/* REVISAR ANTES DE ENTREGAR — 22/10/2026, print aprovado por ele. Três colunas abaixo da
     barra cinza: a lista do mapa, a ficha do item escolhido e a prévia do documento. A altura
     do conjunto é a que a prévia sozinha tinha, e cada coluna rola por dentro: a página não
     rola, e a prévia fica sempre à vista enquanto se corrige. O prefixo rev- evita colisão
     com as classes de outras telas, que dividem esta folha. */
  /* 268 px = o que fica acima da grade (a barra do app, o banner e a faixa, com os 16 px entre
     eles) e 16 de respiro embaixo. Era 300 com o topo de antes de 30/10/2026, mais alto 46 px
     na tela dele, e a grade passava 13 px do pé da janela a 1536x738 (a página rolava). */
  .rev-grade { --rev-itens-min: 196px;   /* cinco linhas de 37 px (medido) e o respiro da lista */
               display: grid; gap: 12px; height: calc(100vh - 268px); min-height: 420px;
               grid-template-columns: minmax(250px, 316px) minmax(300px, 390px) minmax(0, 1fr); }
  .rev-col { min-height: 0; min-width: 0; background: var(--surface);
             border: 1px solid var(--border); border-radius: 9px; }
  .rev-previa { min-height: 0; min-width: 0; }
  .rev-previa .rel-frame { height: 100%; min-height: 0; }

  /* coluna 1 · a lista */
  /* A LISTA GANHA O ESPAÇO — 29/10/2026, achado dele no teste (1536x738): com o selo, a capa, as
     faces, as abas, os filtros, a caixa Ordem e as Observações a coluna só tinha 438 px, e a
     lista ficava com UM item (medido: 8 px de altura, zero itens à vista). Agora o painel ROLA
     por inteiro (as Observações continuam lá, no pé), e a lista tem altura mínima de cinco
     linhas: sobrando espaço ela cresce, faltando o painel rola em vez de espremê-la. */
  .rev-lista { display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
               padding-top: 8px; }
  .rev-lista > :not(.rev-itens) { flex-shrink: 0; }
  /* O TOPO CEDE ESPAÇO — 29/10/2026, segundo achado dele: com o painel rolando a lista aparecia,
     mas na tela dele (1536x738) ela abria com ZERO itens à vista e ninguém ia rolar para
     achá-la. Cada bloco do topo virou uma linha de uma altura só, sem mudar o que faz: o aviso
     fica numa linha (o texto inteiro no balão), a capa e as faces têm ícone pequeno, título e
     resumo lado a lado, e as Observações abrem sob demanda.

     MAIS AGRADÁVEL AOS OLHOS — 30/10/2026, terceiro pedido dele: compacto, o painel ficou
     poluído (uma caixinha com borda em cada bloco, colada na outra, e laranja em quase tudo).
     A régua de agora:
       · faixas separadas por um fio de largura inteira, e NENHUMA caixa dentro delas: a capa e
         as faces; abas, filtros e Ordem; a lista; as Observações no pé;
       · a mesma margem lateral de 12 px em tudo (o recheio da linha conta: 4 + 8);
       · 8 px entre as coisas de uma faixa, e o fio entre faixas com 8 em cima e 12 embaixo
         (a linha de 28 px da capa e das faces já traz o seu respiro);
       · cor só no que é AÇÃO ou ALERTA: o aviso âmbar, o selo "sem imagem", os pontos laranja e
         o Renumerar. O que só diz "está escolhido" (o item aberto, o filtro, a capa na ficha)
         fica no azul-acinzentado da marinha, o mesmo da opção sob o mouse no seletor de língua.
     O selo "Relatório em" saiu da lista no mesmo dia: repetia o seletor do banner. */
  .rev-lista .doc-falta { margin: 0 12px 6px; padding: 3px 8px; border: 0; border-radius: 6px;
                          font-size: 11.5px; line-height: 1.3; white-space: nowrap; overflow: hidden;
                          text-overflow: ellipsis; }
  /* A primeira faixa: a capa e as faces, duas linhas sem caixa. */
  .rev-lista #revCapaItem, .rev-lista #revFacesItem { padding: 0 4px; }
  .rev-lista #revCapaItem .cpi-item, .rev-lista #revFacesItem .fc-item,
  .rev-lista #revCapaItem .cpi-item:hover:not(:disabled),
  .rev-lista #revFacesItem .fc-item:hover:not(:disabled) {
    gap: 8px; height: 28px; min-height: 0; padding: 0 8px; border: 0; border-radius: 6px;
    background: none; box-shadow: none; }
  .rev-lista #revCapaItem .cpi-item:hover:not(:disabled),
  .rev-lista #revFacesItem .fc-item:hover:not(:disabled) { background: var(--surface-2); }
  .rev-lista #revCapaItem .cpi-item.sel, .rev-lista #revCapaItem .cpi-item.sel:hover:not(:disabled) {
    background: #eef3f9; box-shadow: inset 3px 0 0 var(--navy); }
  .rev-lista #revCapaItem .cpi-item::after, .rev-lista #revFacesItem .fc-item::after {
    content: "›"; flex: none; margin-left: auto; color: var(--ink-3); font-size: 15px; line-height: 1; }
  .rev-lista #revCapaItem .cpi-mini { width: 15px; height: 20px; border-radius: 3px; }
  .rev-lista #revFacesItem .fc-item-ico { width: 20px; height: 20px; background: none; }
  .rev-lista #revFacesItem .fc-item-ico svg { width: 20px; height: 20px; }
  .rev-lista #revCapaItem .cpi-item-txt, .rev-lista #revFacesItem .fc-item-txt {
    flex-direction: row; align-items: center; gap: 6px; min-width: 0; }
  .rev-lista #revCapaItem .cpi-item-txt b, .rev-lista #revFacesItem .fc-item-txt b {
    flex: none; white-space: nowrap; }
  .rev-lista #revCapaItem .cpi-item-txt small, .rev-lista #revFacesItem .fc-item-txt small {
    flex: 0 3 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .rev-lista #revCapaItem .cpi-item-txt small::before,
  .rev-lista #revFacesItem .fc-item-txt small::before { content: "· "; }
  .rev-lista #revCapaItem .cpi-selo { flex: none; padding: 0 7px; font-size: 9.5px; line-height: 1.5; }
  /* A segunda faixa: abas, filtros e Ordem. */
  .rev-topo { margin-top: 8px; padding: 12px 12px 8px; border-top: 1px solid var(--hair);
              display: flex; flex-direction: column; gap: 8px; }
  .rev-abas { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--surface-2); }
  .rev-lista .rev-aba, .rev-lista .rev-aba:hover:not(:disabled) {
    flex: 1; height: 24px; padding: 0 4px; border: 0; border-radius: 6px; background: none;
    box-shadow: none; justify-content: center; font-size: 12px; font-weight: 600; color: var(--ink-3); }
  .rev-lista .rev-aba:hover:not(:disabled) { color: var(--ink); }
  .rev-lista .rev-aba.sel { background: var(--surface); color: var(--navy);
                            box-shadow: 0 1px 2px rgba(19,31,51,.14); }
  .rev-aba b, .rev-chip b { font-weight: 700; opacity: .7; }
  /* OS QUATRO FILTROS NUMA LINHA EM QUALQUER FONTE — 30/10/2026: no Windows cabiam com 5 px de
     sobra, e no Linux do servidor (outra fonte, mais larga) quebravam em duas linhas (47 px).
     Agora a linha não quebra: falta largura, o rótulo encolhe com reticências (o nome inteiro
     fica no balão) e o número continua inteiro. */
  .rev-filtros { display: flex; flex-wrap: nowrap; gap: 3px; min-width: 0; }
  .rev-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rev-chip > b { flex: none; }
  .rev-lista .rev-chip, .rev-lista .rev-chip:hover:not(:disabled) {
    height: 22px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 600;
    color: var(--ink-3); background: none; border: 1px solid var(--hair); gap: 4px;
    flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .rev-lista .rev-chip:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); }
  .rev-lista .rev-chip.sel, .rev-lista .rev-chip.sel:hover:not(:disabled) {
    background: #eef3f9; border-color: #c9d6e8; color: var(--navy); }
  /* A terceira faixa: a lista, que fica com o resto da altura. */
  .rev-itens { list-style: none; margin: 0; padding: 3px 4px; overflow-y: auto;
               border-top: 1px solid var(--hair);
               flex: 1 0 var(--rev-itens-min); min-height: var(--rev-itens-min); }
  .rev-lista .rev-item, .rev-lista .rev-item:hover:not(:disabled) {
    width: 100%; height: auto; display: flex; align-items: center; gap: 9px; padding: 3px 7px;
    border: 1px solid transparent; border-radius: 6px; background: none; box-shadow: none;
    text-align: left; color: var(--ink); }
  .rev-lista .rev-item:hover:not(:disabled) { background: var(--surface-2); }
  .rev-lista .rev-item.sel, .rev-lista .rev-item.sel:hover:not(:disabled) {
    background: #eef3f9; box-shadow: inset 3px 0 0 var(--navy); }
  .rev-num { flex: none; min-width: 38px; height: 20px; padding: 0 5px; border-radius: 6px;
             display: inline-flex; align-items: center; justify-content: center;
             font: 700 11px/1 var(--ui); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
  .rev-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
  .rev-txt b { font-size: 12.5px; line-height: 1.2; font-weight: 600; white-space: nowrap; overflow: hidden;
               text-overflow: ellipsis; }
  .rev-txt small { font-size: 11px; line-height: 1.2; color: var(--ink-3); white-space: nowrap; overflow: hidden;
                   text-overflow: ellipsis; }
  .rev-vazio { padding: 14px 10px; font-size: 12px; color: var(--ink-3); text-align: center; }
  /* As Observações: uma linha que abre. O estado é a classe aberta, sem animação; o ponto
     laranja diz que já há texto escrito (classe tem-texto) quando a caixa está fechada. */
  .rev-obs { display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
  .rev-lista .rev-obs-cab, .rev-lista .rev-obs-cab:hover:not(:disabled) {
    display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%;
    height: 28px; padding: 0 12px; border: 0; border-radius: 0; background: none; box-shadow: none;
    font: 700 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-3); cursor: pointer; }
  .rev-lista .rev-obs-cab:hover:not(:disabled) { color: var(--ink); }
  .rev-lista .rev-obs-cab:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
  .rev-obs-cab small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--good); }
  .rev-obs-seta { margin-left: auto; flex: none; opacity: .7; }
  .rev-obs.aberta .rev-obs-seta { transform: rotate(180deg); }
  .rev-obs-ponto { display: none; flex: none; width: 7px; height: 7px; border-radius: 50%;
                   background: var(--orange); }
  .rev-obs.tem-texto:not(.aberta) .rev-obs-ponto { display: block; }
  .rev-obs textarea { display: none; min-height: 58px; margin: 0 12px 12px; font-size: 12.5px;
                      padding: 7px 9px; text-transform: none; letter-spacing: 0; font-weight: 400; }
  .rev-obs.aberta textarea { display: block; }

  /* coluna 2 · a ficha do item */
  .rev-ficha { overflow-y: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
  /* Sem isto a coluna, que tem altura fixa, ENCOLHE os filhos em vez de rolar — e a
     evidência, por ter overflow escondido, chegava a zero de altura. */
  .rev-ficha > * { flex: none; }
  .rev-dica { margin: auto; color: var(--ink-3); font-size: 12.5px; text-align: center; }
  .rev-ficha-cab { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--navy); }
  .rev-salvo { margin-left: auto; font-size: 11px; color: var(--ink-3); text-align: right; }
  .rev-salvo.erro { color: var(--bad); }
  .rev-evid { margin: 0; border-radius: 8px; overflow: hidden; background: #0f1626; }
  .rev-evid img { display: block; width: 100%; max-height: 170px; object-fit: contain; }
  .rev-evid figcaption, .rev-sem-evid, .rev-acoes { display: flex; gap: 6px; align-items: center; }
  /* OS BOTÕES DA FOTO NUMA LINHA SÓ (print dele, 05/11/2026: "fora do padrão"). Na medida são quatro,
     e a 1536 o texto quebrava em duas linhas e estourava os 32 px do botão. Medido: 318 px de botões
     nos 337 px do rodapé da foto. Noutra língua, em que o texto é maior, o botão desce inteiro. */
  .rev-evid figcaption { padding: 6px; justify-content: flex-end; flex-wrap: wrap; gap: 4px;
                         background: rgba(255,255,255,.06); }
  .rev-evid figcaption .btn-p { white-space: nowrap; padding-left: 7px; padding-right: 7px; }
  /* A FOTO DA FICHA — pedido 9 (28/10/2026): a grande com o valor da medida num canto e a
     pequenininha "onde fica" na quina de cima, como no papel. */
  .rev-evid-foto { position: relative; }
  .rev-valor { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px;
               background: rgba(19,31,51,.88); color: #fff; font-size: 12px; }
  .rev-loc { position: absolute; top: 6px; right: 6px; padding: 3px; border-radius: 5px;
             background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.4); line-height: 1; }
  .rev-evid .rev-loc img { width: auto; height: 46px; max-width: 92px; max-height: none; }
  .rev-loc small { display: block; padding-top: 2px; font-size: 8px; font-weight: 700;
                   letter-spacing: .04em; text-transform: uppercase; color: #33415a; }
  .rev-sem-foto-lote { display: flex; gap: 8px; align-items: center; margin: 4px 0 0;
                       font-size: 12px; color: var(--ink-3); }
  .rev-troca { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
  /* `height: auto`: a base de botão (`button, a.btn`) fixa 38 px, e a miniatura saía do botão por
     baixo, em cima da vizinha, com o cartão em 193 px. Guarda:
     `tests/test_trocar_a_foto_da_medida_cabe_no_dialogo.py`. */
  .rev-troca-foto { display: flex; flex-direction: column; height: auto; gap: 4px; padding: 4px; border-radius: 8px;
                    border: 2px solid transparent; background: var(--surface-2); cursor: pointer; }
  .rev-troca-foto.sel { border-color: var(--orange); }
  .rev-troca-foto small { font-size: 10.5px; color: var(--ink-3); overflow: hidden;
                          text-overflow: ellipsis; white-space: nowrap; }
  .rev-troca-quadro { position: relative; display: block; }
  .rev-troca-quadro img { display: block; width: 100%; height: auto; }
  .rev-troca-desenho { position: absolute; inset: 0; width: 100%; height: 100%; fill: none;
                       stroke: #ff4030; stroke-width: 3; vector-effect: non-scaling-stroke; }
  .rev-troca-desenho * { vector-effect: non-scaling-stroke; }
  .rev-evid-falta { display: block; padding: 18px 12px 10px; color: #c3cbd8; font-size: 12px; }
  .rev-sem-evid { justify-content: space-between; padding: 8px 10px; border-radius: 8px;
                  border: 1px dashed var(--border); font-size: 12px; color: var(--ink-3); }
  .rev-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .rev-campo > span:first-child { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
                                  letter-spacing: .06em; color: var(--ink-3); }
  .rev-campo input, .rev-campo select { height: 34px; padding: 6px 10px; font-size: 13px; }
  .rev-campo select { padding-right: 28px; }
  .rev-campo textarea { min-height: 52px; padding: 6px 10px; font-size: 13px; }
  .rev-par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .rev-leitura { font-size: 13px; color: var(--ink-2); padding: 3px 0; }
  .rev-sev { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
  .rev-sev button, .rev-sev button:hover:not(:disabled) {
    height: 30px; padding: 0 2px; justify-content: center; font-size: 10.5px; font-weight: 600;
    border-radius: 6px; border: 1px solid var(--border); background: var(--surface);
    color: var(--ink-2); box-shadow: inset 0 -3px 0 var(--sev); white-space: nowrap; overflow: hidden; }
  .rev-sev button:hover:not(:disabled) { background: var(--surface-2); }
  .rev-sev button.sel { background: var(--sev); border-color: var(--sev); color: #fff;
                        text-shadow: 0 1px 1px rgba(0,0,0,.35); }
  .rev-conserto { margin: 4px 0 0; padding: 8px 10px 10px; border: 1px solid var(--border);
                  border-radius: 9px; display: flex; flex-direction: column; gap: 7px;
                  background: var(--surface-2); }
  .rev-conserto legend { padding: 0 4px; font-size: 12px; font-weight: 700; color: var(--navy); }
  .rev-nota { font-size: 11px; color: var(--ink-3); margin-top: -4px; }
  .rev-conserto input[hidden] { display: none; }
  .rev-moeda { display: flex; align-items: center; gap: 6px; }
  .rev-moeda b { font-size: 13px; color: var(--ink-2); min-width: 26px; }
  /* O Excluir do item (24/10/2026): discreto, no pé da ficha, e PRESO ao pé da coluna — a
     ficha da anomalia rola, e o botão não pode depender de a pessoa rolar até o conserto
     para ser achado. O fundo branco cobre o campo que passa por baixo. */
  .rev-pe { position: sticky; bottom: -14px; margin: 2px -12px -14px; padding: 8px 12px;
            display: flex; justify-content: flex-end; background: var(--surface);
            border-top: 1px solid var(--hair); }

  /* A ORDEM DAS ANOTAÇÕES — numeração editável, print aprovado em 26/10/2026. A caixa "Ordem"
     abaixo das abas, a alça de arrastar de cada linha, o "vira A-05" da prévia e o "Número no
     relatório" da ficha. O laranja claro é o do item escolhido, para a caixa ler como parte da
     lista e não como um aviso. */
  /* Sem caixa desde 30/10/2026 (painel mais limpo, pedido dele): a Ordem é uma linha da
     faixa das abas, como as Observações no pé. O laranja ficou só no ponto do aviso e no
     Renumerar de uma prévia, que são alerta e ação. */
  .rev-ordem { border: 0; background: none; }
  /* A linha que sobra quando a caixa está fechada: "Ordem  Manual" e a seta. O ponto laranja
     avisa que há um aviso lá dentro (relatório entregue, miniatura com o número velho). */
  .rev-lista .rev-ordem-resumo, .rev-lista .rev-ordem-resumo:hover:not(:disabled) {
    display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%;
    height: 24px; padding: 0; border: 0; border-radius: 6px; background: none;
    box-shadow: none; font: 600 12px/1 var(--ui); color: var(--navy); cursor: pointer; }
  .rev-lista .rev-ordem-resumo:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
  .rev-ordem-resumo b { font-weight: 700; }
  /* A linha da Ordem leva o "Atualizar miniaturas" (item 59, print aprovado em 05/11/2026): os dois
     com 24 px, para a linha não crescer, e o botão só com a largura do texto. */
  .rev-ordem-cab { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .rev-lista .rev-ordem-cab .rev-ordem-resumo { flex: 1; width: auto; min-width: 72px; }
  .rev-lista .rev-ordem-miniaturas, .rev-lista .rev-ordem-miniaturas:hover:not(:disabled) {
    flex: none; max-width: 68%; height: 24px; min-height: 0; padding: 0 8px; border: 1px solid #f3c58a; border-radius: 6px;
    background: #fff8ee; box-shadow: none; color: #8a5a12; font: 600 11px/1 var(--ui); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  .rev-lista .rev-ordem-miniaturas:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
  .rev-ordem-seta { margin-left: auto; flex: none; opacity: .7; }
  .rev-ordem.aberta .rev-ordem-seta { transform: rotate(180deg); }
  .rev-ordem-ponto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
  .rev-ordem.aberta .rev-ordem-ponto { display: none; }
  .rev-ordem-corpo { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 4px; }
  .rev-ordem:not(.aberta) .rev-ordem-corpo { display: none; }
  .rev-ordem-rot { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .06em; color: var(--ink-3); }
  .rev-ordem-modo { display: flex; gap: 2px; padding: 2px; border-radius: 7px;
                    background: var(--surface-2); border: 1px solid var(--hair); }
  .rev-lista .rev-ordem-modo button, .rev-lista .rev-ordem-modo button:hover:not(:disabled) {
    height: 24px; padding: 0 9px; border: 0; border-radius: 5px; background: none; box-shadow: none;
    font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
  .rev-lista .rev-ordem-modo button.sel { background: var(--navy); color: #fff; }
  .rev-ordem-linha { display: flex; gap: 5px; align-items: center; }
  .rev-ordem-linha select { flex: 1; min-width: 0; height: 30px; padding: 4px 26px 4px 8px; font-size: 12px; }
  .rev-lista .rev-ordem-linha .btn-p { height: 30px; padding: 0 9px; font-size: 12px; }
  .rev-lista .rev-ordem-linha .rev-ordem-gravar { background: var(--orange); border-color: var(--orange);
                                                  color: #fff; }
  .rev-ordem-nota, .rev-ordem-aviso { font-size: 11px; line-height: 1.35; color: var(--ink-3); }
  .rev-ordem-aviso { color: var(--orange-dk); }
  .rev-itens li.rev-arrasta { display: flex; align-items: center; gap: 2px; }
  .rev-itens li.rev-arrasta > .rev-item { flex: 1; min-width: 0; }
  .rev-alca { flex: none; width: 14px; text-align: center; color: var(--ink-3); cursor: grab;
              font-size: 13px; letter-spacing: -2px; user-select: none; }
  .rev-itens li.arrastando { opacity: .45; }
  .rev-itens li.alvo-antes { box-shadow: inset 0 2px 0 var(--orange); }
  .rev-itens li.alvo-depois { box-shadow: inset 0 -2px 0 var(--orange); }
  .rev-vira { flex: none; margin-left: auto; padding: 1px 6px; border-radius: 999px;
              background: #fff1e6; color: var(--orange-dk); font-size: 10.5px; font-weight: 700;
              white-space: nowrap; }
  .rev-numero { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px;
                border: 1px solid #ffd3b5; border-radius: 9px; background: #fffaf6; }
  .rev-numero-rot { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
                    letter-spacing: .06em; color: var(--ink-3); }
  .rev-numero-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .rev-numero-atual { min-width: 46px; padding: 5px 8px; border: 1px solid var(--border);
                      border-radius: 7px; background: var(--surface); font-size: 13px; color: var(--navy); }
  .rev-numero-linha label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
  .rev-numero-linha input { width: 64px; height: 30px; padding: 4px 8px; font-size: 13px; }
  .rev-numero .rev-nota { margin-top: 0; }

  /* A chave dos custos, no banner navy, ao lado da língua e do PDF. Texto claro sobre o navy;
     o trilho acende em laranja quando ligada. A caixa nativa fica invisível por cima do
     trilho, para o teclado e o leitor de tela continuarem achando uma caixa de marcar. */
  .rev-chave { position: relative; display: flex; align-items: center; gap: 8px; flex: none;
               color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.25;
               white-space: nowrap; cursor: pointer; }
  /* O BANNER DO REVISAR NUMA ALTURA SÓ — 30/10/2026, pedido dele ("sobrar espaço"). O banner é o
     da casa (ícone de 54 px, título, subtítulo, ação laranja na ponta); o que mudou é que nada
     dentro dele quebra linha: o subtítulo corta com reticências (o texto inteiro vai no balão,
     posto pelo documentar.js) e as chaves têm rótulo curto. A 1536 ele tinha 105 px porque o
     subtítulo ia a duas linhas e a chave dos custos a três; hoje são os 90 da casa. */
  .rev-banner .cta-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* O que falta ao relatório (item 59), logo depois do nome do projeto: laranja claro, o que se lê
     sobre o navy. */
  .rev-sub-falta { color: #ffb066; font-weight: 600; }
  .rev-banner .pj-acoes { gap: 16px; align-items: center; }
  .rev-chave input { position: absolute; left: 0; top: 50%; width: 34px; height: 20px;
                     margin: -10px 0 0; opacity: 0; cursor: pointer; }
  .rev-chave-trilho { flex: none; position: relative; width: 34px; height: 20px; border-radius: 999px;
                      background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4);
                      transition: background var(--t); }
  .rev-chave-trilho::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px;
                             height: 14px; border-radius: 50%; background: #fff; transition: left var(--t); }
  .rev-chave input:checked + .rev-chave-trilho { background: var(--orange); border-color: var(--orange); }
  .rev-chave input:checked + .rev-chave-trilho::after { left: 16px; }
  .rev-chave input:focus-visible + .rev-chave-trilho { outline: 2px solid var(--orange); outline-offset: 2px; }

  /* A evidência grande, por cima da tela, com zoom e tela cheia: as regras moram em
     `ampliar-foto.css` desde o item 329 — a revisão das sugestões da IA, no Analisar, usa a
     MESMA peça, e duas cópias do CSS divergiriam na primeira correção. */
  @media (max-width: 1180px) {
    .rev-grade, .rel-de ~ .rev-grade { grid-template-columns: minmax(220px, 260px) minmax(280px, 1fr); height: auto; }
    .rev-previa { grid-column: 1 / -1; height: calc(100vh - 300px); min-height: 420px; }
    .rev-lista, .rev-ficha { max-height: calc(100vh - 300px); min-height: 420px; }
  }

  /* barra de topo de cada tela */
  /* grade de projetos (cards) */
  /* auto-fit (não auto-fill) + largura fixa: as colunas vazias somem e o
     conjunto fica centrado. Com poucos projetos eles ficavam encostados à
     esquerda, com meia tela vazia à direita.

     ---- DECISÃO FECHADA POR ELE EM 28/08/2026. NÃO REABRIR. ----------------

     Eu medi este centramento e **propus mudá-lo**: o rótulo "PROJETOS · todos" fica em x=98 e o
     primeiro cartão em x=567, então há **469 px** entre o título e o conteúdo dele — e o vão muda
     com a largura da janela (469 px a 1600, 113 px a 1280). Mandei print das duas versões e
     recomendei alinhar à esquerda.

     **Ele olhou e disse para deixar como está**, com estas palavras: *"Eu gosto da tela projetos do
     jeito que ela está. Pra mim ela está bonita, está gostosa de usar."*

     Fica registrado aqui porque a próxima varredura de tela vai medir o mesmo vão outra vez, e
     quem achar 469 px sem saber desta conversa vai "consertar" o que ele aprovou. O medidor
     (`scripts/olhar-a-tela.py`) também já sabe ignorar estas duas grades. */
  .cards { display: grid; grid-template-columns: repeat(auto-fit, 258px);
           justify-content: center; gap: var(--s4); }
  .card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
          overflow: hidden; cursor: pointer; transition: var(--t); display: flex; flex-direction: column;
          position: relative; }
  /* Ações rápidas no cartão: canto superior direito, sobre a miniatura. Não vão
     no corpo porque o corpo cresce com o texto e a posição do botão passaria a
     depender do tamanho do nome do projeto — dois cartões lado a lado com os
     botões em alturas diferentes. */
  .card-rapidas { position: absolute; top: 8px; right: 8px; z-index: 2; }
  .card-rapidas button { width: 30px; height: 30px;
                         background: rgba(255,255,255,.92); border-color: transparent;
                         backdrop-filter: blur(3px); }
  .card:hover .card-rapidas button { opacity: 1; }
  .card-rapidas button:disabled { opacity: 0; }        /* no cartão, some de vez */
  .card:hover .card-rapidas button:disabled { opacity: .35; background: rgba(255,255,255,.6); }
  .card-pend { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .card:hover { border-color: var(--border-hover); box-shadow: var(--sh-2); transform: translateY(-2px); }
  .card-thumb { height: 110px; background: linear-gradient(135deg, var(--navy-2), #101a2c);
                display: flex; align-items: center; justify-content: center;
                color: rgba(255,255,255,.45); position: relative; }
  .card-thumb svg { width: 32px; height: 32px; }
  .card-thumb .card-capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
  .card-thumb .tp { z-index: 2; }
  .card-thumb .tp { position: absolute; top: 8px; left: 10px; font-size: 10px; text-transform: uppercase;
                    letter-spacing: .06em; color: rgba(255,255,255,.7); font-weight: 700; }
  .card-corpo { padding: 12px 13px; display: flex; flex-direction: column; gap: 7px; }
  .card-nome { font-weight: 700; font-size: 14px; color: var(--ink);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
  .card-datas { font-size: 11px; color: var(--ink-3); }

  /* lista de recentes */
  /* importar: CONFERIR ANTES DE ENVIAR — item 454. Grade de miniaturas a esquerda, mapa a
     direita, rodape grudado no pe da tela com o botao de enviar. */
  .imp-conf { margin-top: var(--s4); padding-bottom: 0; }
  .imp-conf-cab { display: flex; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; }
  .imp-conf-cab h2 { margin: 0; }
  .imp-conf-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
  .imp-conf-acoes { margin-left: auto; display: flex; gap: 8px; }
  .imp-avisos { display: grid; gap: 8px; }
  .imp-avisos:not(:empty) { margin-top: var(--s3); }
  /* A coluna do mapa tem piso de 340px: menos que isso o retangulo e os pontos viram um
     borrao. A grade fica com o resto, e as duas tem a MESMA altura para fecharem na linha. */
  .imp-conf-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 42%);
                    gap: var(--s4); margin-top: var(--s4); align-items: start; }
  .imp-conf-fotos .imp-grade, .imp-conf-fotos .lst-rolo { margin-top: 0; max-height: 48vh; }
  .imp-conf-fotos .imp-lista { margin-top: 0; }
  .imp-conf-fotos, .imp-conf-lado { min-width: 0; }
  .imp-conf-mapa { height: 48vh; min-height: 300px; border-radius: 12px; overflow: hidden;
                   border: 1px solid var(--border); background: var(--surface-2); }
  .imp-conf-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px;
                      font-size: 11.5px; color: var(--ink-3); }
  .imp-conf-legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
                        margin-right: 5px; vertical-align: -1px; }
  .imp-conf-legenda i.vai { background: var(--orange); }
  .imp-conf-legenda i.tirada { background: #9aa3af; }
  .imp-conf-legenda i.chao { background: #8b1a1a; }
  .imp-conf-legenda i.limite { border-radius: 2px; border: 2px dashed var(--orange); width: 12px; height: 8px; }
  .imp-conf-nota { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
  /* As alcas do retangulo. O canto e quadrado e o miolo e redondo, como nos editores de
     desenho: o quadrado redimensiona, o redondo move. */
  .imp-alca { background: #fff; border: 2px solid var(--orange); border-radius: 3px;
              box-shadow: 0 1px 3px rgba(0,0,0,.35); }
  .imp-alca.canto { cursor: nwse-resize; }
  .imp-alca.miolo { border-radius: 50%; cursor: move; background: var(--orange); border-color: #fff; }
  /* O RODAPE GRUDA NO PE: com 1.600 miniaturas o botao de enviar nao pode sumir rolando.
     Na tela do notebook dele (1536 x 738) o bloco inteiro nao cabe, e o que importa e que a
     conta e o botao estejam sempre a vista. */
  .imp-conf-pe { position: sticky; bottom: 0; z-index: 1100; margin: var(--s4) calc(-1 * var(--s5)) 0;
                 padding: 12px var(--s5); background: var(--surface); border-top: 1px solid var(--border);
                 border-radius: 0 0 12px 12px; display: flex; align-items: center; gap: var(--s5);
                 box-shadow: 0 -6px 14px -10px rgba(19,31,51,.25); }
  .imp-pe-texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
  .imp-pe-conta { font-size: 14px; color: var(--ink-2); }
  .imp-pe-conta b { font-family: var(--brand); font-size: 19px; color: var(--navy); }
  .imp-pe-alturas, .imp-pe-nota { font-size: 12.5px; color: var(--ink-3); }
  .imp-pe-vao { font-size: 12.5px; font-weight: 600; color: var(--warn); }
  .imp-pe-vao::before { content: '! '; font-weight: 800; }
  .imp-pe-lado { display: grid; gap: 2px; min-width: 190px; }
  .imp-conf-pe #impConfirmar { flex: none; white-space: nowrap; }
  .imp-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px;
               margin-top: var(--s4); max-height: 58vh; overflow-y: auto; }
  .imp-mini { position: relative; border-radius: 9px; overflow: hidden; border: 2px solid transparent;
              aspect-ratio: 1; cursor: pointer; background: var(--hair); }
  .imp-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* O `<img>` nasce sem `src` e o quadro fica cinza até a miniatura ficar
     pronta — de propósito: o lugar já está reservado, então nada pula quando
     ela chega. TIFF não decodifica no Chrome e arquivo corrompido também não;
     nesses o quadro fica cinza para sempre, com o aviso. O nome continua no
     `title` do bloco. */
  .imp-mini.sem-previa::after { content: 'sem prévia'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: var(--ink-3); letter-spacing: .04em; }
  .imp-mini.on { border-color: var(--orange); }

  /* A ABA "TÉRMICAS" E A FICHA TÉRMICA DO REVISAR — pedido 16, 28/10/2026. Com a quarta aba as
     abas viram duas linhas de duas: a coluna da lista tem 240 px no mínimo, e quatro abas numa
     linha só cortariam o número. A tabela das medições é a do papel, em letra de lista. */
  .rev-abas.quatro { flex-wrap: wrap; }
  .rev-lista .rev-abas.quatro .rev-aba { flex: 1 1 45%; }
  .rev-termica-unidade { display: inline-flex; align-self: flex-start; }
  .rev-termica-unidade button { min-width: 44px; }
  .rev-termica-nome { margin-right: auto; color: #c3cbd8; font-size: 11.5px; }
  .rev-termica-tab { width: 100%; border-collapse: collapse; font-size: 12px; }
  .rev-termica-tab th { text-align: left; color: var(--ink-3); font-weight: 600; font-size: 10.5px;
                        padding: 3px 4px; border-bottom: 1px solid var(--hair); }
  .rev-termica-tab td { padding: 4px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
  .rev-termica-ressalva { margin-top: 6px; line-height: 1.4; }
  .rev-termica-logo { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
                      color: var(--ink-3); }

  /* O FILTRO E OS CAPÍTULOS do relatório (pedido 11). */
  .rev-lista .rec-item, .rev-lista .rec-item:hover:not(:disabled) {
    display: flex; align-items: center; width: 100%; padding: 3px 10px; text-align: left;
    background: none; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0;
    color: var(--ink); cursor: pointer; }
  .rev-lista .rec-item:hover:not(:disabled) { background: var(--surface-2); }
  .rev-lista .rec-item.ativo { border-left: 3px solid var(--orange); }
  .rec-item-txt { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .rec-item-txt b { flex: none; }
  .rec-item-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .75; }
  /* A CAIXA: cabeçalho e rodapé fixos, e uma rolagem só, no miolo. O cartão desliga a dele aqui e
     em nenhum outro diálogo, por isso a classe mora no cartão desta caixa, e não no dos outros. */
  .dlg-cartao.rec-cartao { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
  .rec-caixa { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .rec-cabeca { flex: none; padding: 22px 56px 10px 26px; }
  .rec-miolo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 26px 6px; }
  .rec-rodape { flex: none; padding: 10px 26px 16px; border-top: 1px solid var(--border); }
  .rec-rodape .dlg-acoes { margin-top: 10px; padding-top: 0; border-top: 0; }
  .rec-caixa h3 { margin: 0; }
  .rec-nota { font-size: 12px; opacity: .8; margin: 0 0 10px; }
  .rec-grupo { margin: 0 0 10px; }
  .rec-rot { font-size: 12px; font-weight: 700; margin: 0 0 4px; }
  .rec-chips { display: flex; flex-wrap: wrap; gap: 4px; }
  /* A regra global de botão dá 38 px e a de rótulo dá caixa alta: os seletores desta caixa levam o
     `.dlg` para vencê-las aqui, sem mexer nelas. */
  .dlg .rec-chip { height: auto; min-height: 26px; padding: 3px 9px; font-size: 12px; font-weight: 500;
    border: 1px solid var(--border); border-radius: 13px; background: none; color: var(--ink); cursor: pointer; }
  .dlg .rec-chip.sel { background: var(--navy); border-color: var(--navy); color: #fff; }
  .rec-cats { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 6px; }
  .rec-cat { display: flex; align-items: center; gap: 6px; padding: 3px 6px; font-size: 13px; }
  .rec-cat + .rec-cat { border-top: 1px solid var(--hair); }
  .rec-cat.arrastando { opacity: .4; }
  .rec-alca { cursor: grab; opacity: .5; }
  .dlg .rec-caixa .rec-cat label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; margin: 0;
    font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink); }
  .dlg .rec-caixa input[type=checkbox] { width: auto; height: auto; margin: 0; flex: none; }
  .dlg .rec-mover { height: 22px; min-height: 22px; padding: 0 6px; background: none; border: 1px solid var(--border);
    border-radius: 4px; color: var(--ink); cursor: pointer; }
  /* A caixa de marcar ao lado do título, e a explicação embaixo dele, em letra normal. */
  .dlg .rec-caixa .rec-capitulos { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px;
    font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink); cursor: pointer; }
  .dlg .rec-caixa .rec-capitulos input[type=checkbox] { margin-top: 3px; }
  .rec-capitulos span { display: flex; flex-direction: column; min-width: 0; }
  .rec-capitulos small { font-size: 12px; opacity: .8; }
  .rec-resultado { font-size: 12px; font-weight: 600; margin: 0; padding: 6px 8px;
    border-radius: 4px; background: var(--surface-2); }
  .rec-resultado.parcial { border-left: 3px solid var(--orange); }