/* Página do fiscal. Paleta da campanha em cor chapada; fundo claro para ler no sol. */
:root {
  --fundo: #F2F4FA;
  --cartao: #FFFFFF;
  --marinho: #25347C;
  --marinho-escuro: #1A2766;
  --azul: #3B60B5;
  --suave: #4A5585;
  --linha: #E6E9F3;
  --verde: #3EBD5A;
  --sobre-verde: #0C2A15;
  --verde-texto: #1C8A48;
  --verde-agua-fundo: #DDF2F1;
  --verde-agua-texto: #0F3B3A;
  --amarelo: #F9E11B;
  --laranja: #F8B21C;
  --laranja-forte: #EF6E1F;
  --laranja-fundo: #FFF3DF;
  --laranja-texto: #4F2404;
  --desligado: #E1E5F0;
  --titulo: "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fundo); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--fundo); color: var(--marinho-escuro);
  font: 17px/1.45 "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
}

/* ---------- Topo ---------- */
.topo {
  border-radius: 0 0 32px 32px;
  padding: calc(22px + env(safe-area-inset-top)) 22px 30px;
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; max-width: 560px; margin: 0 auto;
}
.topo.marinho { background: var(--marinho); color: #FFFFFF; }
.topo.verde { background: var(--verde); color: var(--sobre-verde); }
.topo.laranja { background: var(--laranja); color: var(--marinho-escuro); }
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.marca { font-weight: 700; font-size: 15px; }
.pilula { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; background: rgba(0,0,0,.18); }
.topo.verde .pilula, .topo.laranja .pilula { background: rgba(12,20,60,.12); }
.ponto { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pilula.aberto .ponto { background: var(--verde); }
.pilula.fechado .ponto { background: var(--laranja); }
.pilula.encerrado .ponto { background: #C9D3F2; }
.topo.verde .pilula .ponto, .topo.laranja .pilula .ponto { background: currentColor; }

.heroi-icone { width: 84px; height: 84px; border-radius: 26px; background: #FFFFFF; display: grid; place-items: center; margin-top: 4px; }
.heroi-icone svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.topo.verde .heroi-icone { color: var(--verde-texto); }
.topo.laranja .heroi-icone { color: #C4520F; }
.heroi-rotulo { margin: 0; font-size: 18px; color: #C9D3F2; }
.heroi-titulo { margin: 0; font-family: var(--titulo); font-weight: 800; font-size: 36px; line-height: 1; letter-spacing: -.02em; }
.heroi-titulo.enorme { font-size: 76px; line-height: .9; letter-spacing: -.03em; }
.heroi-titulo .destaque { color: var(--amarelo); }
.heroi-sub { margin: 0; font-size: 18px; line-height: 1.4; }
.topo.marinho .heroi-sub { color: #C9D3F2; }

/* ---------- Corpo ---------- */
main { width: 100%; max-width: 560px; margin: 0 auto; padding: 20px 20px calc(28px + env(safe-area-inset-bottom)); flex: 1; display: flex; flex-direction: column; gap: 14px; }
.pilha { display: flex; flex-direction: column; gap: 14px; flex: 1; }

.cartao { background: var(--cartao); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 0 rgba(26,39,102,.06), 0 12px 30px -20px rgba(26,39,102,.45); }
.cartao-rotulo { font-weight: 700; font-size: 14px; color: var(--azul); }
.aviso-texto { font-size: 18px; line-height: 1.45; white-space: pre-line; }
.aviso-imagem { width: 100%; max-height: 360px; object-fit: contain; border-radius: 14px; }
.cartao.linhas { padding: 6px 18px; gap: 0; }
.linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--linha); }
.linha:last-child { border-bottom: 0; }
.linha span:first-child { color: var(--suave); }
.linha span:last-child { font-weight: 700; text-align: right; }
.linha .grande { font-family: var(--titulo); font-weight: 800; font-size: 24px; line-height: 1; }

.dica { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; }
.dica p { margin: 0; font-size: 16px; line-height: 1.4; }
.dica svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.dica.laranja { background: var(--laranja-fundo); color: var(--laranja-texto); }
.dica.laranja svg { color: #C4520F; }
.dica.verde-agua { background: var(--verde-agua-fundo); color: var(--verde-agua-texto); margin-top: auto; }
.dica.verde-agua svg { color: #1C7A76; width: 20px; height: 20px; }
.pendentes { align-items: center; justify-content: space-between; }
.pendentes .botao-texto { margin: 0; padding: 4px 0; white-space: nowrap; }

.retorno { align-self: center; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--laranja-fundo); color: #7A3A06; font-size: 15px; font-weight: 700; text-align: center; }
.retorno::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--laranja-forte); }
.retorno.novo { animation: realce 1s ease-out; }
@keyframes realce { from { transform: scale(1.06); } to { transform: none; } }

/* Coleta: um quadro para cada QR Code do boletim. */
.coleta-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.contagem { font-weight: 700; font-size: 15px; color: var(--azul); }
.contagem.completo { color: var(--verde-texto); }
.chip { padding: 6px 12px; border-radius: 999px; background: var(--cartao); font-weight: 700; font-size: 15px; box-shadow: 0 1px 0 rgba(26,39,102,.08); }
.quadros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quadros li { border-radius: 20px; padding: 14px; min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 16px; line-height: 1.2; }
.quadros li svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.quadros li.largo { grid-column: 1 / -1; min-height: 72px; }
.quadros li.lida { background: var(--verde); color: var(--sobre-verde); }
.quadros li.lida svg { stroke-width: 3.2; }
.quadros li.falta { background: var(--cartao); color: #8A3A07; border: 3px dashed var(--laranja-forte); padding: 11px; }
.quadros li.espera { background: var(--cartao); color: var(--suave); border: 3px dashed #C4CBE0; padding: 11px; }
.quadros li.falta svg, .quadros li.espera svg { stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter; }

.fotos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fotos:empty { display: none; }
.fotos li { position: relative; width: 84px; height: 84px; border-radius: 14px; overflow: hidden; border: 3px solid #C4CBE0; background: var(--cartao); }
.fotos li.ok { border-color: var(--verde); }
.fotos li.nada { border-color: var(--laranja-forte); }
.fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fotos .selo { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; font-weight: 700; line-height: 1.2; padding: 3px 4px; text-align: center; background: var(--marinho-escuro); color: #FFFFFF; }
.fotos .tirar { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(26,39,102,.75); color: #FFFFFF; font-size: 18px; line-height: 1; cursor: pointer; }

/* ---------- Botões ---------- */
.acoes { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
/* Início: nada de quadros nem contagem; câmera em destaque, anexar como segunda opção. */
.intro { margin: 0; font-size: 18px; line-height: 1.45; color: var(--marinho-escuro); }
#coleta:not(.inicio) .intro { display: none; }
#coleta.inicio .coleta-linha, #coleta.inicio #partes, #coleta.inicio #enviar { display: none; }
#coleta.inicio #abrir-camera { order: -1; background: var(--amarelo); color: var(--marinho-escuro); border-color: transparent; min-height: 72px; font-size: 22px; box-shadow: 0 14px 26px -14px rgba(26,39,102,.7); }
#coleta.inicio #anexar { background: var(--cartao); color: var(--marinho); border-color: var(--marinho); box-shadow: none; }
.botao {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 60px; padding: 12px 18px; border-radius: 18px; border: 2px solid transparent;
  font-family: var(--titulo); font-weight: 800; font-size: 19px; line-height: 1.1; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; text-decoration: none;
}
.botao svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.botao.amarelo { background: var(--amarelo); color: var(--marinho-escuro); box-shadow: 0 10px 22px -14px rgba(26,39,102,.6); }
.botao.contorno { background: var(--cartao); color: var(--marinho); border-color: var(--marinho); }
.botao.marinho-cheio { background: var(--marinho); color: #FFFFFF; box-shadow: 0 10px 22px -14px rgba(26,39,102,.7); }
.botao.enviar { min-height: 54px; background: var(--desligado); color: #5D6687; order: 3; }
.botao.enviar svg { display: none; }
.botao.enviar:not(:disabled) { order: 0; min-height: 76px; border-radius: 22px; font-size: 26px; background: var(--amarelo); color: var(--marinho-escuro); box-shadow: 0 14px 26px -14px rgba(26,39,102,.7); }
.botao.enviar:not(:disabled) svg { display: block; width: 26px; height: 26px; stroke-width: 3; }
.botao:disabled { cursor: not-allowed; }
#enviar-assim { order: 4; }
/* Com o boletim completo, anexar vira link e a câmera sai de cena. */
.acoes.completo #anexar { background: none; box-shadow: none; border: 0; min-height: 48px; font-family: "Atkinson Hyperlegible", sans-serif; font-weight: 700; font-size: 16px; color: var(--marinho); text-decoration: underline; text-underline-offset: 4px; }
.acoes.completo #anexar svg, .acoes.completo #abrir-camera { display: none; }
.botao:focus-visible, .botao-texto:focus-visible, summary:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.botao-texto { display: block; margin: 4px auto 0; background: none; border: 0; color: var(--marinho); font: inherit; font-weight: 700; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; padding: 10px; cursor: pointer; }

.giro-pequeno { display: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid currentColor; border-top-color: transparent; animation: giro .8s linear infinite; }
.verificando .giro-pequeno { display: inline-block; }
.verificando .icone-verificar { display: none; }
.verificando { cursor: progress; }

.escondido { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ajuda { color: var(--suave); }
.ajuda summary { cursor: pointer; font-weight: 700; color: var(--marinho-escuro); padding: 8px 0; }
.ajuda ul { padding-left: 20px; margin: 6px 0 0; }
.ajuda li { margin-bottom: 6px; }

/* Câmera em tela cheia. Preso nas quatro bordas (sem vh/dvh): cabe na parte visível no
   Safari e no Chrome, inclusive Android antigo, e o botão fica sempre à vista. */
.camera {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20;
  background: #000; color: #FFFFFF;
  display: flex; flex-direction: column; overflow: hidden;
}
.camera-topo { padding: 14px 20px 12px; padding-top: calc(14px + env(safe-area-inset-top)); }
.camera-titulo { margin: 0; font-family: var(--titulo); font-weight: 800; font-size: 22px; line-height: 1.1; }
.camera-status { margin: 6px 0 0; font-weight: 700; font-size: 16px; color: var(--amarelo); }
/* Passos: um traço por QR Code; verde quando lido, amarelo o da vez. */
.camera-passos { list-style: none; margin: 0 0 12px; padding: 0; display: flex; gap: 6px; }
.camera-passos li { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.25); }
.camera-passos li.lida { background: var(--verde); }
.camera-passos li.vez { background: var(--amarelo); }
/* Cartão de confirmação: cobre a câmera por um instante a cada QR Code lido. */
.camera-aviso {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2;
  background: var(--verde); color: #FFFFFF; border-radius: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 24px; -webkit-animation: surgir .25s ease-out; animation: surgir .25s ease-out;
}
.camera-aviso.enviando { background: var(--marinho); }
.camera-aviso-icone { width: 92px; height: 92px; border-radius: 28px; background: #FFFFFF; color: var(--verde); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.camera-aviso.enviando .camera-aviso-icone { color: var(--marinho); }
.camera-aviso-icone svg { width: 54px; height: 54px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.camera-aviso-titulo { margin: 0; font-family: var(--titulo); font-weight: 800; font-size: 34px; line-height: 1; }
.camera-aviso-lido { margin: 10px 0 0; font-weight: 700; font-size: 19px; }
.camera-aviso-proximo { margin: 22px 0 0; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.18); font-weight: 700; font-size: 18px; line-height: 1.3; }
.camera-aviso-proximo:empty { display: none; }
@-webkit-keyframes surgir { from { opacity: 0; -webkit-transform: scale(.96); } to { opacity: 1; -webkit-transform: none; } }
@keyframes surgir { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
/* A caixa do vídeo segue o formato da própria imagem (sem object-fit): no iPhone o
   object-fit calcula com a imagem deitada e encolhe a câmera. O vídeo é a moldura. */
.camera-visor { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 16px; }
.camera video {
  position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  width: auto; height: auto; max-width: 100%; max-height: 100%; display: block;
  border-radius: 22px; background: #111;
}
/* Mira: centrada no visor, que é o centro do vídeo; o lado vem do tamanho real do vídeo (app.js). */
.camera-mira {
  position: absolute; top: 50%; left: 50%; width: 0; height: 0;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none;
  /* Amarelo com contorno escuro: aparece no papel branco do boletim e na mesa escura. */
  border: 4px solid var(--amarelo); border-radius: 20px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.5), inset 0 0 0 2px rgba(0,0,0,.5);
}
.camera-rodape { padding: 14px 16px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.camera-rodape .botao { width: 100%; }
body[data-tela="camera"] { overflow: hidden; }
body[data-tela="camera"] #topo, body[data-tela="camera"] #sem-conexao, body[data-tela="camera"] #pendentes { display: none !important; }

.enviando { text-align: center; padding: 40px 16px; }
.enviando p { font-weight: 700; font-size: 18px; }
.giro { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; border: 5px solid var(--linha); border-top-color: var(--marinho); animation: giro .9s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .giro, .giro-pequeno { animation-duration: 2.5s; } .retorno.novo { animation: none; } }

body[data-tela="resultado"] #sem-conexao, body[data-tela="resultado"] #pendentes,
body[data-tela="enviando"] #sem-conexao, body[data-tela="enviando"] #pendentes { display: none !important; }

/* ---------- Quem envia ---------- */
.quem { display: flex; align-items: center; gap: 8px; margin: -6px 0 2px; font-size: 15px; font-weight: 700; }
#quem-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem-trocar { flex: none; white-space: nowrap; }
.quem svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.quem-trocar { margin-left: auto; padding: 8px 2px; background: none; border: 0; color: inherit; font: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.campo-rotulo { font-weight: 700; font-size: 16px; }
.campo {
  width: 100%; min-height: 60px; padding: 10px 16px; border-radius: 16px; border: 2px solid #C4CBE0;
  background: #FFFFFF; color: var(--marinho-escuro); font: inherit; font-size: 20px;
}
.campo.numero { font-family: var(--titulo); font-weight: 800; font-size: 28px; letter-spacing: .02em; }
.campo:focus { outline: 0; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(59,96,181,.22); }
.campo.invalido, .campo.invalido:focus { border-color: #C2410C; box-shadow: 0 0 0 4px rgba(194,65,12,.18); }
/* O botão só acende com um CPF de verdade no campo; enquanto confere, continua amarelo com o giro. */
.botao.amarelo:disabled:not(.verificando) { background: var(--desligado); color: #5D6687; box-shadow: none; }
.campo-grupo { display: flex; flex-direction: column; gap: 8px; }
.campo-ajuda { margin: 6px 0 2px; padding: 12px 14px; border-radius: 14px; background: var(--laranja-fundo); color: var(--laranja-texto); font-size: 16px; line-height: 1.4; }
.campo-erro { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--laranja-fundo); color: #7A3A06; font-weight: 700; font-size: 16px; line-height: 1.35; }
#identidade-form { gap: 10px; }
#identidade-form .botao { margin-top: 6px; }
.pistas { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 2px; }
.pista-opcao { min-height: 60px; padding: 12px 16px; line-height: 1.2; overflow-wrap: anywhere; border-radius: 16px; border: 2px solid #C4CBE0; background: #FFFFFF; color: var(--marinho-escuro); font-family: var(--titulo); font-weight: 800; font-size: 22px; text-align: left; cursor: pointer; }
.pista-opcao[aria-pressed="true"] { border-color: var(--marinho); background: #EEF1FB; }
.confirma { gap: 6px; }
.confirma-nome { margin: 2px 0 0; font-family: var(--titulo); font-weight: 800; font-size: 28px; line-height: 1.15; color: var(--marinho-escuro); overflow-wrap: anywhere; }
.confirma-secoes { margin: 0; font-size: 16px; color: #5D6687; }
.confirma .botao { margin-top: 12px; }

/* ---------- Suas seções ---------- */
.minhas { gap: 12px; }
.minhas-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.minhas-conta { padding: 5px 12px; border-radius: 999px; background: var(--laranja-fundo); color: #7A3A06; font-weight: 700; font-size: 14px; }
.minhas-conta.tudo { background: #DDF5E3; color: #145A30; }
.minhas-lista { list-style: none; margin: 0; padding: 0; }
.minhas-lista li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linha); }
.minhas-lista li:first-child { border-top: 0; }
.minhas-marca { width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px dashed #C4CBE0; }
.minhas-lista li.chegou .minhas-marca { border: 0; background: var(--verde); color: var(--sobre-verde); }
.minhas-marca svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.minhas-texto { min-width: 0; flex: 1; }
.minhas-texto strong { display: block; font-size: 17px; line-height: 1.2; }
.minhas-texto .minhas-fiscal { color: var(--marinho); font-weight: 700; }
.confirma a.botao[hidden] { display: none; }
.minhas-texto span { display: block; font-size: 14px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minhas-situacao { flex: none; font-size: 13px; font-weight: 700; color: #8A3A07; }
.minhas-lista li.chegou .minhas-situacao { color: var(--verde-texto); }
body[data-tela="camera"] #minhas, body[data-tela="enviando"] #minhas, body[data-tela="identidade"] #minhas { display: none !important; }

[hidden] { display: none !important; }