:root {
  --fundo: #0d1220; --carta: #151d33; --linha: #26304d;
  --tinta: #eef2fb; --apoio: #9fb0d0;
  --alta: #2f9e5e; --media: #d9a020; --baixa: #d94b4b;
  --marca: #2775d6;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* `hidden` SEMPRE vence o display do CSS. Sem isto, `.painel { display: grid }`
   atropela o padrão do navegador e o painel continua na tela mesmo escondido
   por atributo -- mostrando as ofertas do upload anterior ao lado do aviso de
   que nenhuma página deste PDF serviu. */
[hidden] { display: none !important; }
body { font: 16px/1.5 system-ui, "Segoe UI", sans-serif; background: var(--fundo); color: var(--tinta); }
.topo { padding: 26px 24px 12px; }
.topo h1 { font-size: 26px; }
.sub { color: var(--apoio); font-size: 15px; max-width: 78ch; }
.envio { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; padding: 16px 24px; }
.envio label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--apoio); }
.envio input {
  background: var(--carta); color: var(--tinta);
  border: 1px solid var(--linha); border-radius: 8px; padding: 9px 11px; font-size: 15px;
}
#btnLer { min-height: 44px; padding: 0 22px; border: 0; border-radius: 8px;
          background: var(--marca); color: #fff; font-weight: 700; cursor: pointer; }
#btnLer:disabled { opacity: .55; cursor: progress; }
/* O aviso e o unico diagnostico quando nada foi achado, e ele e comprido (uma
   contagem por motivo, por familia). Sem teto de largura vira uma linha unica
   que atravessa a tela de ponta a ponta -- que e como se le pior. */
.aviso { margin: 10px 24px; padding: 12px 14px; border-radius: 8px; max-width: 110ch;
         background: rgba(217,75,75,.14); border: 1px solid var(--baixa); }

/* O painel deixou de ser DUAS COLUNAS (imagem | dados) e virou uma PILHA de
   páginas achadas: a varredura devolve várias, e cada uma traz a sua imagem
   ao lado dos seus números. As duas colunas desceram um nível, para dentro
   de `.lado-a-lado`, que é onde a conferência de fato acontece. */
.painel { padding: 12px 24px 40px; }
.cabeca-painel { display: flex; gap: 14px 20px; flex-wrap: wrap;
                 align-items: baseline; margin-bottom: 18px; }
/* Quantas páginas de quantas. Sem o campo de página no formulário, é a única
   coisa que dá ao operador o tamanho do que foi olhado. */
.resumo { font-size: 15px; font-weight: 700; }
.legenda { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--linha); }
.chip-alta { border-color: var(--alta); color: var(--alta); }
.chip-media { border-color: var(--media); color: var(--media); }
.chip-baixa { border-color: var(--baixa); color: var(--baixa); }

/* Cada página achada, numa ficha própria. A borda existe para uma coisa só:
   com duas ou três páginas na tela, o operador precisa ver de relance onde
   uma acaba e a outra começa — validade de uma ao lado de preço de outra é o
   erro que esta tela existe para não deixar acontecer. */
.achado { border: 1px solid var(--linha); border-radius: 14px;
          padding: 18px 20px 20px; margin-bottom: 22px; }
.cabeca-achado { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.numero { font-size: 21px; }
/* Qual leitor entendeu esta pagina. O portal descobre a familia sozinho, e
   por isso ela precisa estar a vista: descoberta que ninguem ve e descoberta
   que ninguem confere. */
.familia { display: inline-block; padding: 3px 11px;
           border: 1px solid var(--marca); border-radius: 999px;
           color: #8fbcf0; font-size: 12px; font-weight: 700;
           letter-spacing: .04em; text-transform: uppercase; }
.validade { color: var(--apoio); font-size: 14px; margin-top: 8px; }
/* Com aviso, a linha da validade deixa de ser rodape cinza: ela passa a ser
   uma coisa para olhar. A p24 do Mapa declara validade ANTERIOR a propria
   atualizacao, e sem contraste esse sinal morre no rodape. */
.validade.media, .validade.baixa { color: var(--tinta); }
.selo { display: inline-block; margin-left: 6px; padding: 2px 9px;
        border: 1px solid currentColor; border-radius: 999px;
        font-size: 12px; font-weight: 700; }
.selo.media { color: var(--media); }
.selo.baixa { color: var(--baixa); }
/* Para quem vale este preco. Sem o seletor de UF, e esta linha que responde. */
.ufs { color: var(--apoio); font-size: 14px; margin-bottom: 16px; }

/* "Esta pagina nao vai para o site, e este e o motivo."
   NAO e cinza de rodape: o FIT e lido, conferido e nao publicado, e quem
   confere precisa ler isso ANTES de apertar Publicar e concluir que o portal
   engoliu a pagina. Mesma tinta cheia dos avisos de validade, com a borda
   suave a esquerda para separa-la das duas linhas de dado acima. */
.nao-publicada { color: var(--tinta); font-size: 14px; line-height: 1.5;
                 margin: 0 0 16px; padding: 10px 14px;
                 border-left: 3px solid var(--media); border-radius: 4px;
                 background: rgba(255, 255, 255, .04); }
.nao-publicada .selo { margin-left: 0; margin-right: 6px; }

/* A imagem ganha mais largura que os cards: as paginas do Mapa sao deitadas e
   cheias de numero miudo, e e contra ELA que se confere. Os cards ao lado sao
   linhas curtas -- espremer a imagem para dar folga a eles inverteria quem
   precisa de espaco. */
.lado-a-lado { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; }
/* 🚨 A imagem ACOMPANHA a rolagem dos cards. Com tres ofertas empilhadas a
   coluna de dados fica muito mais alta que a pagina, e sem isto o operador
   rola ate a terceira oferta com a imagem ja fora da tela -- conferindo de
   memoria, que e o mesmo que nao conferir. */
.lado-pdf img { position: sticky; top: 14px;
                width: 100%; border: 1px solid var(--linha); border-radius: 10px; }
.oferta { background: var(--carta); border: 1px solid var(--linha);
          border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.oferta:last-child { margin-bottom: 0; }
.oferta h3 { font-size: 19px; margin-bottom: 10px; }
.campo { display: grid; grid-template-columns: 130px 1fr; gap: 10px;
         padding: 6px 0; border-top: 1px solid var(--linha); align-items: center; }
.campo:first-of-type { border-top: 0; }
.campo .rot { color: var(--apoio); font-size: 13px; }
.campo .val { font-weight: 700; }
.campo.media .val { color: var(--media); }
.campo.baixa .val { color: var(--baixa); }
.origem { grid-column: 2; color: var(--apoio); font-size: 12px; }
@media (max-width: 900px) { .lado-a-lado { grid-template-columns: 1fr; } }

/* ===========================================================================
   Degrau 2: entrar, ver o que muda, publicar.

   Mesmo sistema de tokens do degrau 1 — nada de identidade nova numa tela que
   o operador já aprendeu. O único token acrescentado é `--baixa-tinta`: o
   `--baixa` de borda tem contraste 4,4:1 sobre o fundo, abaixo dos 4,5 que
   texto corrido precisa. Borda pode ser `--baixa`; PALAVRA não.
   =========================================================================== */
:root { --baixa-tinta: #ff9a9a; --alta-tinta: #6ee2a0; }

button { font: inherit; min-height: 40px; padding: 0 18px; border-radius: 8px;
         border: 1px solid var(--linha); background: var(--carta);
         color: var(--tinta); font-weight: 600; cursor: pointer;
         transition: background .16s ease-out, border-color .16s ease-out; }
button:hover:not(:disabled) { border-color: var(--marca); }
/* 🚨 `not-allowed`, e não `progress`. Um botão desabilitado enquanto o pedido
   viaja de fato é "espere"; mas o Publicar com a ponte fora fica desabilitado
   PARA VALER, e uma ampulheta ali prometeria que algo está a caminho. */
button:disabled { opacity: .55; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }

/* A entrada. Um cartão DENTRO da página, e não uma tela por cima dela.
   🚨 Era `min-height: 100vh` com `place-items: center`: uma tela cheia que
   cobria o portal inteiro enquanto ninguém entrasse. Ler o Mapa não pede
   login, então o cartão passou a ocupar o espaço de um bloco qualquer — e
   some assim que há sessão (ou quando não há ponte com que entrar). */
.entrada { padding: 8px 24px 28px; }
.cartao-entrada { width: 100%; max-width: 380px; display: flex; flex-direction: column;
                  gap: 14px; background: var(--carta); border: 1px solid var(--linha);
                  border-radius: 16px; padding: 24px 26px 22px; }
.cartao-entrada h2 { font-size: 20px; }
.cartao-entrada label { display: flex; flex-direction: column; gap: 6px;
                        font-size: 13px; color: var(--apoio); }
.cartao-entrada input { background: var(--fundo); color: var(--tinta);
                        border: 1px solid var(--linha); border-radius: 8px;
                        padding: 10px 11px; font-size: 15px; }
.cartao-entrada input::placeholder { color: var(--apoio); }
#btnEntrar { background: var(--marca); border-color: var(--marca); color: #fff;
             margin-top: 4px; }

.linha-topo { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
/* Quem está logado, e o que isso muda. Um botão que some sem explicação faz o
   operador achar que a tela quebrou. */
.quem { color: var(--apoio); font-size: 14px; flex: 1 1 auto; }
.discreto { min-height: 34px; padding: 0 14px; font-size: 13px;
            color: var(--apoio); font-weight: 600; }

/* O bloco de publicação. */
.publicacao { padding: 8px 24px 36px; }
.publicacao h2 { font-size: 20px; margin-bottom: 4px; }
.controles { display: flex; gap: 14px; align-items: end; flex-wrap: wrap;
             margin: 14px 0 6px; }
.controles label { display: flex; flex-direction: column; gap: 6px;
                   font-size: 13px; color: var(--apoio); }
.controles select { background: var(--carta); color: var(--tinta); font: inherit;
                    border: 1px solid var(--linha); border-radius: 8px;
                    padding: 9px 11px; min-height: 40px; }
#btnDiff { background: var(--marca); border-color: var(--marca); color: #fff; }
/* 🚨 O botão que grava num site público não pode parecer o botão que compara.
   Ele é vermelho e diz o verbo inteiro; a confirmação depois dele usa o mesmo
   verbo ("Publicado"), para o operador saber que foi aquilo que aconteceu. */
.perigo { background: transparent; border-color: var(--baixa);
          color: var(--baixa-tinta); }
.perigo:hover:not(:disabled) { background: rgba(217,75,75,.16);
                               border-color: var(--baixa); }

/* Cada oferta do diff. Três colunas: campo, o que está no ar, o que o Mapa
   diz. Tabela e não cartão: comparar valor com valor é justamente o que uma
   tabela faz melhor que qualquer outra coisa. */
.oferta-diff { border: 1px solid var(--linha); border-radius: 12px;
               padding: 14px 16px 6px; margin-bottom: 14px; background: var(--carta); }
.cabeca-diff { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
               margin-bottom: 8px; }
.cabeca-diff h3 { font-size: 17px; }
.cabeca-diff .carta { color: var(--apoio); font-size: 12px; margin-left: auto; }
.oferta-diff .chip { font-size: 12px; font-weight: 700; }
.sit-novo .chip { border-color: var(--marca); color: #8fbcf0; }
.sit-mudou .chip { border-color: var(--baixa); color: var(--baixa-tinta); }
.sit-sai .chip { border-color: var(--baixa); color: var(--baixa-tinta); }
.sit-igual .chip { color: var(--apoio); }
.ilegivel { color: var(--media); font-size: 13px; margin-bottom: 8px; }

.tabela-diff { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-diff th, .tabela-diff td { text-align: left; padding: 7px 10px 7px 0;
                                   border-top: 1px solid var(--linha); }
.tabela-diff thead th { color: var(--apoio); font-size: 12px; font-weight: 600;
                        border-top: 0; }
.tabela-diff tbody th { color: var(--apoio); font-weight: 600; width: 34%; }
.tabela-diff .antes { color: var(--apoio); }
.tabela-diff .depois { font-weight: 700; }
/* 🚨 A mudança é dita de TRÊS jeitos: cor, risco no valor antigo e a palavra
   "muda". Cor sozinha não chega a quem não a distingue, a quem imprime a tela
   nem a quem olha de relance — e é sobre esta marca que se decide gravar
   preço num site público. */
.tabela-diff tr.muda .antes { text-decoration: line-through; }
.tabela-diff tr.muda .depois { color: var(--baixa-tinta); }
.tabela-diff .marca { font-size: 11px; font-weight: 700; text-transform: uppercase;
                      letter-spacing: .06em; border: 1px solid var(--baixa);
                      border-radius: 999px; padding: 1px 7px; margin-left: 6px;
                      color: var(--baixa-tinta); }

/* O cabeçalho que separa as duas TABELAS dentro do mesmo diff. Ele não é
   decoração: fibra e celular vão para tabelas diferentes, em transações
   diferentes, e uma lista corrida diria ao operador que ele aprova uma coisa
   só. Discreto de propósito — quem tem de saltar aos olhos é a mudança. */
.grupo-diff { font-size: 13px; font-weight: 700; text-transform: uppercase;
              letter-spacing: .08em; color: var(--apoio);
              border-top: 1px solid var(--linha); padding-top: 18px;
              margin: 22px 0 4px; }
.grupo-diff + .sub { font-size: 13px; margin-bottom: 12px; }

.feito { border: 1px solid var(--alta); border-radius: 12px; padding: 14px 16px;
         background: rgba(47,158,94,.12); margin-top: 14px; }
.feito strong { color: var(--alta-tinta); }
.feito button { margin-top: 10px; }

.tabela-historico { width: 100%; border-collapse: collapse; font-size: 14px;
                    margin-top: 12px; max-width: 70ch; }
.tabela-historico th, .tabela-historico td { text-align: left; padding: 7px 14px 7px 0;
                                             border-top: 1px solid var(--linha); }
.tabela-historico thead th { color: var(--apoio); font-size: 12px; border-top: 0; }