/* Complementos da aplicação real sobre gcoc.css/moderno.css (os mesmos dos protótipos aprovados na F1). */
#raiz { min-height: 100vh; display: flex; flex-direction: column; }
.area-principal { flex: 1; padding: 14px; display: flex; flex-direction: column; align-items: center; }
.area-principal > .pagina { width: min(1280px, 100%); padding: 4px 0 24px; }
.contents { display: contents; }
.carregando { padding: 24px; color: var(--texto-2); }
.erro-caixa { border: 1px solid var(--erro); color: var(--erro); background: color-mix(in srgb, var(--erro) 8%, var(--janela)); padding: 6px 10px; margin: 6px 12px; }
.ok-caixa { border: 1px solid var(--ok); color: var(--ok); padding: 6px 10px; margin: 6px 12px; }
.linha .erro-campo { color: var(--erro); font-size: .85rem; }
.btn[disabled], .btn-peq[disabled] { opacity: .45; cursor: not-allowed; }
.submenu button.item-menu { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; padding: 3px 18px; color: var(--texto); cursor: pointer; }
.submenu button.item-menu:hover, .submenu button.item-menu:focus { background: var(--selecao); color: var(--selecao-tx); }
.submenu .fase { color: var(--texto-2); display: flex; justify-content: space-between; gap: 12px; }
.submenu .fase small { font-size: .75rem; border: 1px solid var(--borda); border-radius: 3px; padding: 0 4px; }
.lupa-descricao { color: var(--texto-2); font-weight: 600; min-width: 160px; }
.bloco-titulo { font-weight: 600; }
.modal-fundo { position: fixed; inset: 0; background: rgba(15, 25, 40, .45); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 40; }
.modal { background: var(--janela); border: 1px solid var(--borda-forte); box-shadow: 0 16px 40px rgba(0, 0, 0, .3); width: min(560px, 94vw); }
.modal .conteudo-modal { padding: 12px 14px; display: grid; gap: 8px; }
.pendencia-origem { font-size: .78rem; color: var(--texto-2); grid-column: 1 / -1; }
@media print {
  .menu, .sistema-titulo, .status, .faixa-prototipo, .rodape, .barra-f, .abas, .nao-imprime, .janela-titulo, .ok-caixa, .erro-caixa { display: none !important; }
  .janela { box-shadow: none; border: 0; }
  .folha { border: 0; box-shadow: none; margin: 0; max-width: none; }
}
/* documento emitido (F5 · Impressos) */
.folha { background: #fff; color: #111; max-width: 760px; margin: 12px auto; padding: 28px 40px; border: 1px solid #c9c9c9; font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.55; }
.folha-faixa { background: #1f4e8c; color: #fff; font-family: Arial, sans-serif; font-weight: 700; letter-spacing: .06em; padding: 8px 12px; margin: -28px -40px 22px; }
.folha-titulo { text-align: center; font-size: 17px; margin: 0 0 18px; }
.folha p { text-align: justify; margin: 0 0 12px; }
.folha-local { text-align: right !important; margin-top: 24px !important; }
.folha-rodape { display: flex; gap: 16px; align-items: center; border-top: 1px solid #ddd; margin-top: 28px; padding-top: 12px; font-family: Arial, sans-serif; font-size: 11px; line-height: 1.4; }
.folha-rodape .url, .hash { word-break: break-all; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; }
/* página pública de validação (sem casca) */
.validacao { max-width: 560px; margin: 32px auto; padding: 0 16px; font-family: Arial, sans-serif; }
.validacao h1 { font-size: 20px; color: #1f4e8c; }
.validacao .situacao { font-size: 22px; font-weight: 800; padding: 10px 14px; border-radius: 6px; border: 2px solid; }
.validacao .situacao.ok { color: #13703a; } .validacao .situacao.alerta { color: #8a5a00; } .validacao .situacao.erro { color: #b3261e; }
.validacao dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.validacao dt { font-weight: 700; } .validacao dd { margin: 0; }
span.lupa-descricao.w-l { display: inline-block; width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* portal do cidadão (fora da casca do GCOC; celular primeiro) */
.portal { min-height: 100vh; display: flex; flex-direction: column; background: #f4f6fa; font-family: system-ui, Arial, sans-serif; font-size: 16px; }
.portal-topo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; background: #1f4e8c; color: #fff; padding: 12px 16px; }
.portal-topo span { opacity: .85; font-size: .9rem; } .portal-topo button { margin-left: auto; background: transparent; color: #fff; border: 1px solid #fff; border-radius: 6px; padding: 4px 12px; }
.portal-corpo { flex: 1; width: min(720px, 100%); margin: 0 auto; padding: 16px; display: grid; gap: 14px; align-content: start; }
.portal-corpo h1 { font-size: 1.45rem; margin: 4px 0; } .portal-corpo h2 { font-size: 1.1rem; margin: 0 0 6px; }
.portal-cartao { background: #fff; border: 1px solid #d6dbe4; border-radius: 10px; padding: 16px; display: grid; gap: 10px; }
.portal-campo { display: grid; gap: 4px; } .portal-campo span { font-weight: 600; }
.portal-campo input { font-size: 1rem; padding: 10px 12px; border: 1px solid #b8c0cc; border-radius: 8px; width: 100%; box-sizing: border-box; }
.portal-botao { font-size: 1rem; font-weight: 700; padding: 12px; border-radius: 8px; border: 0; background: #1f4e8c; color: #fff; cursor: pointer; }
.portal-link { background: none; border: 0; color: #1f4e8c; text-decoration: underline; padding: 0; font-size: 1rem; cursor: pointer; }
.portal-rodape { text-align: center; font-size: .8rem; color: #5b6472; padding: 14px 16px; }
.portal-campo select { font-size: 1rem; padding: 10px 12px; border: 1px solid #b8c0cc; border-radius: 8px; background: #fff; }
.portal-etapas { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.portal-doc { border-top: 1px solid #e3e7ee; padding-top: 8px; }
.caixa-postal { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.caixa-postal li { border: 1px solid #d6dbe4; border-radius: 8px; padding: 8px 10px; background: #fff; max-width: 85%; }
.caixa-postal li.cidadao { justify-self: end; background: #eef4ff; } .caixa-postal li.sistema { background: #fff7e6; }
.caixa-postal li p { margin: 4px 0 0; white-space: pre-wrap; } .caixa-postal small { color: #5b6472; }
.portal textarea { font-size: 1rem; padding: 10px 12px; border: 1px solid #b8c0cc; border-radius: 8px; width: 100%; box-sizing: border-box; }
/* F8 · fotos da vistoria feita no app e envio em quarentena */
.fotos-vistoria { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fotos-vistoria li { display: grid; gap: 4px; width: 160px; }
.fotos-vistoria img { width: 160px; height: 120px; object-fit: cover; border: 1px solid #d6dbe4; border-radius: 6px; background: #eef1f6; }
pre.json { max-height: 420px; overflow: auto; background: #f6f8fb; border: 1px solid #d6dbe4; border-radius: 6px; padding: 8px; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
/* F9 · relatórios: janela Preview do GCOC (barra, páginas) e a folha do relatório */
.preview { background: #d9dde4; border: 1px solid #9aa3b1; margin: 8px; }
.preview-barra { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: #eef1f6; border-bottom: 1px solid #9aa3b1; padding: 6px; }
.preview-barra button { min-width: 36px; min-height: 32px; padding: 2px 10px; border: 1px solid #9aa3b1; background: #fff; border-radius: 3px; cursor: pointer; }
.preview-barra button:disabled { opacity: .4; cursor: default; }
.preview-pag { margin-left: auto; font-weight: 700; padding-right: 8px; }
.preview-aviso { margin: 6px 12px; }
.preview-papel { padding: 12px; overflow-x: auto; }
.preview-papel.impressao { display: none; }
.rel-folha { background: #fff; color: #111; margin: 0 auto; padding: 18px 26px; max-width: 820px; box-shadow: 0 1px 4px rgba(0,0,0,.25); font: 12px Arial, Helvetica, sans-serif; }
.rel-folha.paisagem { max-width: 1120px; }
.rel-topo { display: flex; justify-content: space-between; border-top: 2px solid #111; border-bottom: 1px solid #111; padding: 4px 0; margin-bottom: 4px; }
.rel-sub { font-weight: 700; margin: 4px 0; }
.rel-titulo { text-align: center; font-size: 15px; text-decoration: underline; margin: 10px 0 8px; }
.rel-filtros { font-size: 11px; color: #333; margin: 0 0 6px; }
.rel-grade { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.rel-grade caption { text-align: left; font-weight: 700; padding: 6px 0 2px; }
.rel-grade th { text-align: left; font-size: 11px; text-transform: uppercase; border-bottom: 1px solid #111; padding: 3px 4px; vertical-align: bottom; }
.rel-grade td { padding: 2px 4px; vertical-align: top; white-space: pre-line; }
.rel-grade tbody.par { background: #e6e6e6; }
.rel-grade tr.segunda td { font-size: 11px; padding-bottom: 4px; }
.rel-grade tr.segunda span { margin-right: 18px; }
.rel-grade tr.segunda em { font-style: normal; color: #444; }
.rel-total { border-top: 1px solid #111; padding-top: 4px; font-weight: 700; }
@media print {
  .preview { background: none; border: 0; margin: 0; }
  .preview-barra, .preview-aviso, .preview-papel.tela { display: none !important; }
  .preview-papel.impressao { display: block; padding: 0; }
  .rel-folha { box-shadow: none; max-width: none; padding: 0; break-after: page; }
  html.imprime-paisagem body { page: paisagem; }
  html:has(.preview) body, .preview-papel { background: #fff !important; }
  .rel-folha:last-child { break-after: auto; }
  .rel-grade tbody { break-inside: avoid; }
  .rel-grade tbody.par { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@page paisagem { size: A4 landscape; margin: 10mm; }
/* A ficha do laudo é um impresso GRANDE: as 76 linhas em duas colunas não cabem em A4 nem a 5,5px (medido).
   Em A3 deitado cabe numa folha só, a 9px, que é o que a ficha de papel é. Quem só tem A4 imprime com
   "ajustar à página": sai menor, mas continua UMA folha, com as assinaturas junto do que elas atestam. */
@page laudo { size: A3 landscape; margin: 8mm; }
html.imprime-laudo body { page: laudo; }
/* F9 · painel gerencial (seção 19): único lugar com cara de dashboard */
.painel { max-width: 1200px; margin: 12px auto; padding: 0 12px; }
.painel h1 { font-size: 20px; margin: 4px 0 10px; }
.painel-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; background: #fff; border: 1px solid #d6dbe4; border-radius: 8px; padding: 10px; }
.painel-filtros label { display: grid; gap: 2px; font-size: 13px; font-weight: 600; }
.painel-filtros input, .painel-filtros select { min-height: 32px; padding: 2px 8px; }
.painel-grupo h2 { font-size: 16px; margin: 18px 0 8px; border-bottom: 1px solid #d6dbe4; padding-bottom: 4px; }
.painel-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.painel-cartao { background: #fff; border: 1px solid #d6dbe4; border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; align-content: start; }
.painel-cartao h3 { font-size: 14px; margin: 0; }
.painel-valor { font-size: 28px; font-weight: 700; margin: 0; color: #1f4e8c; }
.painel-cartao.indisponivel .painel-valor { color: #8a93a3; }
.painel-motivo { font-size: 12px; color: #8a5a00; background: #fff7e6; border-radius: 6px; padding: 4px 6px; margin: 0; }
.painel-partes { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.painel-partes li { display: flex; justify-content: space-between; border-bottom: 1px dotted #e3e7ee; padding: 1px 0; }
.painel-origem { font-size: 11.5px; color: #5b6472; margin: 0; }
/* F10 · homologação (seção 43): barra da medição em curso e comparativo */
.barra-homologacao { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #1f4e8c; color: #fff; padding: 6px 12px; font-size: .9rem; }
.barra-homologacao .btn-peq { background: #fff; }
.barra-homologacao .erro-inline { background: #fdecea; color: #b3261e; border-radius: 6px; padding: 2px 6px; }
.grade td.pior { color: #b3261e; font-weight: 700; }
.grade tr.selecionada { outline: 2px solid #1f4e8c; }
.bloco-homologacao { display: grid; gap: 10px; margin-top: 10px; }
.rot-inline { margin: 0 6px 0 2px; color: #5b6472; }
button.ligacao { background: none; border: 0; padding: 0; color: #1f4e8c; text-decoration: underline; cursor: pointer; font: inherit; text-align: left; }
@media print { .barra-homologacao { display: none !important; } }

/* ADR-012 · laudo de vistoria no layout do PAPEL: grade de caixas em duas colunas, folha deitada.
   A caixa vazia é informação (item conferido, sem defeito), por isso o formulário sai INTEIRO. */
.folha-laudo { max-width: 1120px; padding: 18px 22px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.3; }
.lau-topo { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #1f4e8c; padding-bottom: 4px; }
.lau-marca { color: #1f4e8c; font-size: 30px; letter-spacing: -.06em; font-weight: 700; margin-right: 10px; }
.lau-dtp { font-weight: 700; font-size: 11px; }
.lau-orgao { color: #1f4e8c; font-weight: 700; font-size: 15px; text-align: right; line-height: 1.1; }
.lau-titulo { text-align: center; font-size: 15px; margin: 8px 0 10px; letter-spacing: .02em; }

.lau-identificacao { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.lau-campo { border: 1px solid #1f4e8c; border-radius: 2px; padding: 9px 6px 3px; position: relative; min-width: 96px; flex: 1 1 96px; }
.lau-campo.largo { flex: 3 1 240px; }
.lau-rot { position: absolute; top: -6px; left: 5px; background: #fff; padding: 0 3px; font-size: 8px; letter-spacing: .04em; color: #1f4e8c; }
.lau-val { display: block; min-height: 13px; font-weight: 700; }

.lau-colunas { column-count: 2; column-gap: 14px; }
.lau-grupo { break-inside: avoid; border: 1px solid #1f4e8c; margin-bottom: 6px; }
.lau-grupo h3 { margin: 0; background: #e8eef7; color: #1f4e8c; font-size: 10px; letter-spacing: .06em; padding: 2px 5px; border-bottom: 1px solid #1f4e8c; }
.lau-grupo table { width: 100%; border-collapse: collapse; }
.lau-grupo th[scope="row"] { text-align: left; font-weight: 400; padding: 1px 5px; width: 38%; vertical-align: top; }
.lau-grupo td { padding: 1px 5px; }
.lau-grupo tr.lau-marcada { background: #f3f3f3; }
.lau-grupo tr.lau-marcada th[scope="row"] { font-weight: 700; }
.lau-sub th { text-align: left; background: #f6f8fc; font-size: 9px; letter-spacing: .05em; padding: 1px 5px; border-top: 1px solid #c9d6e8; color: #33485f; }
.lau-caixa { display: inline-block; margin-right: 9px; white-space: nowrap; font-size: 10px; }
.lau-texto { font-weight: 700; }
.lau-obs { font-style: italic; color: #444; margin-left: 4px; }

.lau-resultado { display: flex; gap: 22px; justify-content: center; border: 1px solid #1f4e8c; padding: 5px; margin: 8px 0; font-size: 14px; font-weight: 700; }
.lau-resultado .marcado { color: #1f4e8c; }
.lau-assinaturas { display: flex; gap: 8px; }
.lau-assina { border: 1px solid #1f4e8c; border-radius: 2px; padding: 9px 6px 3px; position: relative; flex: 1; min-height: 52px; display: flex; flex-direction: column; justify-content: space-between; }
.lau-assina p { margin: 0; font-weight: 700; }
.lau-data { font-size: 9px; text-align: right; color: #1f4e8c; }
.lau-observacoes { margin-top: 8px; }
.lau-observacoes .lau-val { min-height: 30px; font-weight: 400; }

@media print {
  /* A ficha de papel cabe numa folha deitada porque é densa. Na tela o laudo pode respirar; na impressão ele
     encolhe para caber, senão sairiam quatro páginas onde o original tem uma. */
  .folha-laudo { padding: 0; max-width: none; font-size: 9px; line-height: 1.1; }
  .lau-grupo { break-inside: avoid; }
  .lau-titulo { font-size: 11px; margin: 4px 0 5px; }
  .lau-marca { font-size: 20px; }
  .lau-orgao { font-size: 10px; }
  .lau-identificacao { gap: 4px; margin-bottom: 5px; }
  .lau-campo { padding: 7px 4px 1px; min-width: 70px; }
  .lau-rot { font-size: 6px; }
  .lau-val { min-height: 9px; }
  .lau-grupo h3 { font-size: 7px; padding: 1px 4px; }
  .lau-grupo th[scope="row"], .lau-grupo td { padding: 0 4px; }
  .lau-sub th { font-size: 6.5px; padding: 0 4px; }
  .lau-caixa { font-size: 6.5px; margin-right: 6px; }
  .lau-resultado { font-size: 10px; padding: 3px; margin: 5px 0; gap: 16px; }
  .lau-assina { min-height: 34px; }
  .lau-observacoes .lau-val { min-height: 18px; }
  /* O rodapé do QR é a única coisa que transbordava para uma segunda folha. Ele encolhe: a ficha é de UMA folha,
     e uma assinatura numa página separada da vistoria que ela atesta é exatamente o que não se quer. */
  .folha-laudo .folha-rodape { margin-top: 4px; padding-top: 3px; font-size: 6px; gap: 8px; line-height: 1.25; }
  .folha-laudo .folha-rodape canvas, .folha-laudo .folha-rodape img, .folha-laudo .folha-rodape svg { width: 46px; height: 46px; }
  .folha-laudo .folha-rodape .url, .folha-laudo .folha-rodape .hash { font-size: 5.5px; }
}
.lau-grupo.sem-grupo { border-color: #c9d6e8; }

/* O fundo fica inerte durante a busca sem mudar a geometria da casca. */
.casca-conteudo { display: contents; }

/* ---- Mapa (componentes/Mapa.tsx) ---- */
.mapa { display: flex; flex-direction: column; gap: 6px; }
.mapa-caixa { position: relative; overflow: hidden; border: 1px solid var(--borda); background: #e8eef4; cursor: grab; touch-action: none; }
.mapa-caixa:active { cursor: grabbing; }
.mapa-tile { position: absolute; width: 256px; height: 256px; user-select: none; -webkit-user-drag: none; }
/* O pino marca onde a coordenada ESTÁ; a mira, onde ela FICARIA. Formas diferentes de propósito: confundir as
   duas é gravar um lugar achando que se está a ver o outro. */
.mapa-pino { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #b3261e; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none; }
.mapa-mira { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid #0067b9; border-radius: 50%; background: rgba(0, 103, 185, .12); pointer-events: none; }
.mapa-mira::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; margin: -1px 0 0 -1px; background: #0067b9; }
.mapa-zoom { position: absolute; right: 6px; top: 6px; display: flex; flex-direction: column; gap: 4px; }
.mapa-credito { position: absolute; right: 0; bottom: 0; background: rgba(255, 255, 255, .8); font-size: 11px; padding: 1px 5px; }
.mapa-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Pinos da tela da cidade: FORMA diz a modalidade, COR diz a situação, VAZADO diz que o lugar é só sugestão.
   Três sinais independentes, porque quem lê o mapa precisa distinguir "escola lotada" de "táxi com pendência"
   sem abrir nenhuma ficha — e cor sozinha não serve a quem não distingue cores. */
.mapa-marca { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; padding: 0; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); background: #6b7b8c; }
.mapa-marca.forma-taxi { border-radius: 50%; }
/* Canto VIVO contra círculo. A 16px, "redondo" contra "quase redondo" (3px de raio) não se distingue — e eu
   tinha afirmado que a forma diz a modalidade. Ou o sinal é legível, ou não é sinal. */
.mapa-marca.forma-escola { border-radius: 0; }
.mapa-marca.tom-ok { background: #13703a; }
.mapa-marca.tom-aviso { background: #c98a00; }
.mapa-marca.tom-atencao { background: #b3261e; }
/* Vazado diz "localização só sugerida" SEM apagar a situação: o miolo fica branco e a COR vai para o anel.
   Ver a tela foi o que mostrou isto — com o fundo branco chapado, um ponto "precisa de alguém" que ainda não
   foi confirmado no mapa ficava igual a um em dia, e é justamente o estado em que quase todos começam. */
.mapa-marca.vazado { background: #fff; border-style: dashed; border-width: 3px; margin: -9px 0 0 -9px; }
.mapa-marca.vazado.tom-ok { border-color: #13703a; }
.mapa-marca.vazado.tom-aviso { border-color: #c98a00; }
.mapa-marca.vazado.tom-atencao { border-color: #b3261e; }
.mapa-marca.escolhido { outline: 3px solid #0067b9; outline-offset: 2px; z-index: 2; }
.mapa-legenda { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 12px; color: var(--suave); }
.mapa-legenda i { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.mapa-cidade { display: grid; grid-template-columns: 280px 1fr; gap: 10px; align-items: start; }
.mapa-lista { max-height: 520px; overflow: auto; border: 1px solid var(--borda); background: #fff; }
.mapa-lista button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--borda);
  background: none; padding: 6px 8px; cursor: pointer; font: inherit; }
.mapa-lista button[aria-pressed="true"] { background: var(--claro); font-weight: 700; }
@media (max-width: 900px) { .mapa-cidade { grid-template-columns: 1fr; } }