:root {
  --tinta: #F4F3EE;
  --tinta-fraca: #9c9c97;
  --fundo: #0a0a0a;
  --superficie: #151513;
  --borda: #2a2a26;
  --destaque: #EE3A1B;
}

* { box-sizing: border-box; }

/* Regras de display abaixo venceriam o atributo `hidden`, que é como o
   painel troca de tela. Sem isto, todas as telas apareceriam de uma vez. */
[hidden] { display: none !important; }

body {
  margin: 0; padding: 24px; min-height: 100vh;
  background: radial-gradient(120% 80% at 50% 0%, #1c1c1a 0%, #0f0f0d 45%, #070706 100%);
  background-attachment: fixed;
  color: var(--tinta);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.5;
}

h1, h2, h3 { margin: 0 0 16px; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1rem; margin-top: 32px; color: var(--tinta-fraca); font-weight: 700; }

/* ---------- Login ---------- */

#tela-login {
  min-height: 80vh; display: flex; align-items: center; justify-content: center;
}

.login-caixa {
  width: 100%; max-width: 23rem;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 18px; padding: 36px 30px 30px;
}

.login-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.login-marca svg { width: 22px; height: 22px; }
.login-marca span { font-size: .95rem; font-weight: 800; letter-spacing: 0.16em; }
.login-sub { color: var(--tinta-fraca); font-size: .85rem; margin: 0 0 26px; }

#tela-login form { max-width: none; gap: 18px; }

/* ---------- Navegação ---------- */

nav {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 32px;
  padding-bottom: 20px; border-bottom: 1px solid var(--borda);
}

nav button { background: transparent; border-color: transparent; color: var(--tinta-fraca); padding: 10px 14px; }
nav button:hover { background: rgba(244,243,238,0.06); color: var(--tinta); }
nav button.ativo { background: rgba(244,243,238,0.1); color: var(--tinta); }
nav #botao-sair { margin-left: auto; color: var(--tinta-fraca); }
nav #botao-sair:hover { color: var(--destaque); }

/* ---------- Controles ---------- */

button {
  font: inherit; font-weight: 700; padding: 12px 16px;
  border: 1px solid var(--borda); background: rgba(244,243,238,0.06);
  color: var(--tinta); border-radius: 10px; cursor: pointer; min-height: 44px;
  transition: background .15s, border-color .15s;
}

button:hover { background: rgba(244,243,238,0.12); }

button[type="submit"] {
  background: var(--destaque); color: #fff; border-color: var(--destaque);
}
button[type="submit"]:hover { background: #ff4d2e; }
button:disabled { opacity: .5; cursor: default; }

form { display: grid; gap: 16px; max-width: 30rem; }

label { display: grid; gap: 6px; font-size: .82rem; color: var(--tinta-fraca); font-weight: 600; }

/* Campos soltos fora de <form> (a reimpressão de lote) não herdam o
   max-width do formulário e esticariam pela tela inteira. */
.tela > label, .tela > select { max-width: 30rem; }

input, select, textarea {
  font: inherit; font-weight: 500; padding: 12px; color: var(--tinta);
  border: 1px solid var(--borda); border-radius: 10px;
  background: rgba(0,0,0,0.35); min-height: 44px;
}

input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--destaque);
}

input::placeholder { color: #5c5c58; }
select option { background: var(--superficie); color: var(--tinta); }

.erro { color: #ff6b4d; font-weight: 700; font-size: .9rem; }

/* Aviso é informação, não erro — some do vermelho de propósito. Com a borda
   avermelhada, a mensagem "os QR apontam para tal endereço" foi lida como
   falha de impressão por quem usava. */
.aviso {
  background: rgba(244,243,238,0.05); border: 1px solid var(--borda);
  border-left: 3px solid var(--tinta-fraca);
  padding: 12px 14px; border-radius: 10px; font-size: .88rem; color: var(--tinta-fraca);
}

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borda); }
th { color: var(--tinta-fraca); font-size: .78rem; text-transform: uppercase; letter-spacing: 0.08em; }

#folha-placas { display: flex; flex-wrap: wrap; gap: 4mm; margin-top: 24px; }

/* Placa 60x90mm — arte aprovada em 10/09/2026.
   Sem cantos arredondados de propósito: o arredondamento é feito pela faca
   da gráfica, não desenhado na arte. */
.placa {
  width: 60mm; height: 90mm;
  padding: 4.8mm 4mm 3.7mm;
  box-sizing: border-box;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; overflow: hidden;
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* O preto do cartão é um SVG desenhado, não `background` do CSS.
   Navegador tem opção de "não imprimir plano de fundo" (economia de tinta),
   ligada ou desligada por quem imprime — com background comum, o cartão
   sairia branco com texto branco, ou seja, em branco. Desenho é conteúdo,
   não plano de fundo: imprime independente dessa opção. */
.placa-fundo { position: absolute; inset: 0; width: 100%; height: 100%; }
.placa > *:not(.placa-fundo) { position: relative; }

.placa-nfc { width: 10.6mm; height: 7.1mm; }
.placa-instrucao {
  margin-top: 2.4mm; font-size: 1.72mm; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; line-height: 1.7; color: #8f8f8a;
}
.placa-chamada {
  margin-top: 5.3mm; font-family: 'Caveat', cursive; font-weight: 700;
  font-size: 5.8mm; line-height: 1; color: #F4F3EE;
}
.placa-google { margin-top: 1.6mm; font-size: 7.9mm; font-weight: 800; letter-spacing: -0.01em; line-height: 1; display: flex; }
.placa-estrelas { margin-top: 2.6mm; display: flex; gap: 0.8mm; }
.placa-estrelas svg { width: 3.7mm; height: 3.7mm; }
/* Moldura clara 27.5mm com QR de 21.5mm deixa 3mm de borda livre de cada
   lado. O padrão do QR exige 4 módulos de "zona de silêncio" em volta; a
   21.5mm cada módulo tem 0,74mm, então 3mm dá os 4 módulos. Com a moldura
   menor sobravam 2 módulos e o preto do cartão encostava perto demais do
   código — leitura falha de vez em quando, sem motivo aparente. */
.placa-qr {
  margin-top: 3.2mm; width: 27.5mm; height: 27.5mm; background: #F4F3EE;
  border-radius: 1.9mm; display: flex; align-items: center; justify-content: center;
}
.placa-qr svg { width: 21.5mm; height: 21.5mm; display: block; }
.placa-codigo {
  margin-top: 2.1mm; font-family: ui-monospace, monospace;
  font-size: 2.1mm; letter-spacing: 0.22em; color: #6c6c68;
}
.placa-marca { margin-top: auto; display: flex; align-items: center; gap: 1.3mm; opacity: 0.55; }
.placa-marca svg { width: 2.4mm; height: 2.4mm; }
.placa-marca span { font-size: 1.72mm; letter-spacing: 0.16em; font-weight: 700; color: #9c9c97; }

@media print {
  body { padding: 0; background: #fff; }
  nav, form, button, label, select, h1, h2, h3, #resumo-lote, .aviso { display: none !important; }
  #folha-placas { gap: 0; }
  .placa { break-inside: avoid; page-break-inside: avoid; }
}

.opcional { font-weight: 500; opacity: .6; text-transform: none; letter-spacing: 0; }