* { box-sizing: border-box; }
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  background: #000;
  color: #fff;
}
.topnav {
  background: #000;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-bottom: 1px solid #222;
}
.topnav .brand { display: flex; align-items: center; margin-right: 10px; text-decoration: none; }
.topnav .brand img { height: 30px; display: block; }
.brand-wordmark {
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.brand-wordmark em {
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-family: 'Brush Script MT', 'Segoe Script', Georgia, serif;
  margin-right: 4px;
}
.topnav a { color: #ccc; text-decoration: none; font-size: 14px; }
.topnav a:hover { color: #fff; }
.topnav .nav-user { margin-left: auto; color: #fff; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.topnav .logout { color: #fff; border: 1px solid #555; border-radius: 20px; padding: 4px 12px; }
.topnav .logout:hover { border-color: #fff; }
.papel-tag {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

main { padding: 20px; max-width: 1100px; margin: 0 auto; }
main a { color: #fff; text-decoration: underline; }
main a:hover { color: #ccc; }
h1 { font-size: 24px; color: #fff; font-weight: 800; letter-spacing: -0.3px; }
h2 { font-size: 16px; color: #fff; margin-top: 28px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }

.cards { display: flex; gap: 14px; flex-wrap: wrap; margin: 16px 0; }
.card {
  background: #0d0d0d; border-radius: 12px; padding: 14px 18px;
  min-width: 140px; border: 1px solid #333;
}
.card .num { font-size: 26px; font-weight: 800; color: #fff; }
.card .label { font-size: 12px; color: #999; }
.card.alerta .num { color: #ff5252; }

table { width: 100%; border-collapse: collapse; background: #0d0d0d; border-radius: 12px; overflow: hidden; border: 1px solid #333; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #262626; font-size: 14px; color: #fff; }
th { background: #fff; color: #000; font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.3px; }
tr:last-child td { border-bottom: none; }

form.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
input, select, textarea {
  padding: 7px 9px; border: 1px solid #444; border-radius: 10px; font-size: 14px;
  background: #111; color: #fff;
}
input::placeholder, textarea::placeholder { color: #888; }
select option { background: #111; color: #fff; }
button {
  background: #fff; color: #000; border: 2px solid #fff; cursor: pointer;
  padding: 7px 18px; font-weight: 600; border-radius: 999px;
}
button:hover { background: #ddd; border-color: #ddd; }

.badge { padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge.loja { background: transparent; color: #fff; border: 1.5px solid #fff; }
.badge.externo { background: #fff; color: #000; border: 1.5px solid #fff; }
.badge.misto { background: transparent; color: #fff; border: 1.5px dashed #fff; }
.badge.atrasado-badge { background: #ff5252; color: #000; border: 1.5px solid #ff5252; }
.badge.hoje-badge { background: #3ddc84; color: #000; border: 1.5px solid #3ddc84; }

.atrasado { color: #ff5252; font-weight: bold; }

.tag-prazo { width: 26px; height: 5px; border-radius: 3px; margin-top: 5px; }
.tag-prazo-verde { background: #3ddc84; }
.tag-prazo-amarelo { background: #ffc23d; }
.tag-prazo-vermelho { background: #ff5252; }

.agenda-dia {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 22px; margin-top: 32px; padding-bottom: 8px; border-bottom: 2px solid #333;
}
.agenda-dia.atrasado { color: #ff5252; }
.agenda-resumo { font-size: 13px; font-weight: 400; text-transform: none; color: #999; letter-spacing: normal; }
.flash { background: #0d0d0d; color: #fff; border: 1px solid #fff; padding: 8px 14px; border-radius: 12px; margin-bottom: 14px; font-size: 14px; }
a.wa { color: #3ddc84; text-decoration: none; font-size: 13px; font-weight: 600; }
.small { font-size: 12px; color: #999; }

.login-page { min-height: calc(100vh - 20px); display: flex; align-items: center; justify-content: center; background: #000; margin: -20px; padding: 20px; }
.login-box {
  max-width: 340px; width: 100%; background: #000; color: #fff; padding: 40px 32px;
  border-radius: 12px; border: 1.5px solid #fff; text-align: center;
}
.login-logo { max-width: 220px; margin: 0 auto 12px; display: block; }
.login-wordmark { color: #fff; margin: 0 0 4px; }
.login-subtitle { color: #aaa; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 24px; }
.login-box input { background: #111; color: #fff; border-color: #444; }
.login-box input::placeholder { color: #888; }
.login-box button { width: 100%; background: #fff; color: #000; border-color: #fff; }
.login-box button:hover { background: #ddd; }

.os-form { background: #0d0d0d; border-radius: 12px; padding: 16px 18px; margin: 14px 0; border: 1px solid #333; }
.toggle-group { display: flex; gap: 20px; margin-bottom: 12px; font-size: 14px; }
.toggle-group input { margin-right: 5px; }
.hidden { display: none; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 8px; }
.campo-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.3px;
}
.campo-label input, .campo-label select {
  font-size: 14px; color: #fff; text-transform: none; letter-spacing: normal;
}
.item-row { grid-template-columns: 1.6fr 0.8fr 1.4fr 0.8fr auto; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed #333; }
.btn-remover { background: #ff5252; border-color: #ff5252; color: #000; }
.btn-remover:hover { background: #ff8080; border-color: #ff8080; }
.link-remover {
  background: none; border: none; color: #ff5252; padding: 4px 6px;
  font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline;
  border-radius: 0; justify-self: start;
}
.link-remover:hover { color: #ff8080; background: none; }
#btn-add-item { margin: 4px 0 10px; }
.item-linha { font-size: 13px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; color: #fff; }
.item-linha:last-child { margin-bottom: 0; }
.item-linha .small { color: #999; }

.form-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.btn-grande { padding: 13px 32px; font-size: 16px; }