/* ============================ AJUDA =====================================
     A Ajuda mostra o MANUAL — páginas A4 servidas por /manual — na mesma
     moldura que a tela Documento usa para o laudo. O conteúdo vive no backend,
     servindo prévia e PDF da mesma fonte. */
  /* ---------------------------------------- a Ajuda que atende (315 · 317 · 318) */
  /* A BUSCA SOBE PARA A LINHA DAS ABAS — item 373. Ela morava num bloco proprio, e
     aquele cartao custava 105px de altura ANTES da primeira palavra do manual. O rotulo
     FICA visivel: tirar o rotulo e deixar so o marcador de texto e o defeito que o item
     360 consertou nos tres campos de senha hoje mesmo — marcador some ao digitar. */
  /* A BUSCA MORA NA LATERAL, acima de "Neste manual" — pedido dele em 24/08/2026,
     olhando a tela: a coluna da esquerda E a navegacao, e buscar e navegar. Ela ja
     passou por dois lugares hoje: um bloco proprio (custava 105px de altura antes da
     primeira palavra) e a linha das abas. Este e o terceiro, e o dele. */
  .aj-indice .aj-rot { display: block; margin: 0 0 6px; }
  .aj-indice #ajBusca { width: 100%; margin: 0 0 14px; font-size: 12.5px; }
  .aj-indice .aj-indice-rot { padding-top: 12px; border-top: 1px solid var(--hair); }
  /* AS ABAS MORAM DENTRO DO BANNER — pedido dele em 24/08/2026, olhando a tela:
     *"a gente consegue economizar esse espaco"*. Elas ocupavam uma fita branca de
     largura inteira so para duas palavras; o banner tem 103px de altura e ~500px
     vazios no meio. Medido: a fita custava 64px (48 de altura + 16 de folga) ANTES da
     primeira palavra do manual.
     ⚠️ E ELA PRECISOU DE VESTE PROPRIA, pelo mesmo motivo do item 361: sobre navy, o
     `.pj-modo` claro virava um bloco branco e ficava o elemento mais forte da tela.
     Peso nao e universal — ele pressupoe o FUNDO. */
  /* ⚠️ O `!important` AQUI NAO E PREGUICA: `.pj-modo button` declara
     `color: var(--ink-2) !important`, e `!important` vence ESPECIFICIDADE. Sem repetir a
     marca, a minha regra era ignorada e a aba nao selecionada saia em `rgb(70,83,106)`
     sobre o navy — **contraste 2,03**, medido, contra o minimo legivel de 4,5.
     🔴 E isso e a REPETICAO EXATA do item 361, que registrou 2,13 para o `btn-sutil` no
     mesmo lugar. Eu escrevi a veste nova e caí no mesmo buraco no mesmo dia. Com
     `--tinta-esc-1` (#cdd6e4) o contraste vai a ~11. */
  .cta-banner .aj-abas { margin: 0; flex: none; background: rgba(255,255,255,.09);
                         border-color: transparent; }
  .cta-banner .aj-abas button { color: var(--tinta-esc-1) !important;
                                background: none !important; }
  .cta-banner .aj-abas button.sel { background: rgba(255,255,255,.16) !important;
                                    color: #fff !important; }
  .aj-abas { margin-bottom: var(--s4); }
  .aj-rot { display: block; font: 800 9.5px/1 var(--ui); letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
  #ajBusca, #faqBusca { width: 100%; height: 38px; }
  .aj-achado { border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px;
    margin-top: 8px; cursor: pointer; transition: .12s; }
  .aj-achado:hover { border-color: var(--orange); box-shadow: 0 2px 8px rgba(19,31,51,.07); }
  .aj-achado b { display: block; font-size: 13.5px; }
  .aj-achado .vazio { font-size: 12px; }
  /* A FAQ em sanfona: a resposta abre embaixo da pergunta, e nao numa tela nova —
     gabarito do Launivo, e o que mantem a lista inteira a vista enquanto se le uma. */
  .faq-lista { display: flex; flex-direction: column; gap: 8px; margin-top: var(--s3); }
  .faq-item { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .faq-item summary { cursor: pointer; padding: 11px 14px; font-weight: 700;
    font-size: 13.5px; list-style: none; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::before { content: '+'; display: inline-block; width: 16px;
    color: var(--orange); font-weight: 800; }
  .faq-item[open] summary::before { content: '−'; }
  .faq-item[open] summary { background: var(--sel-bg); }
  .faq-resp { padding: 0 14px 13px 30px; font-size: 13px; line-height: 1.6;
    color: var(--ink-2); }
  .aj-suporte { margin-top: var(--s4); }
  .aj-canais { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--s3); }
  .aj-canais .btn-p { text-decoration: none; }

  .aj-bloco { padding: 0 !important; overflow: hidden; }
  /* A FAIXA DE "VOCÊ VEIO DE…" — item 365. Ela só aparece quando alguém PULOU para um
     capítulo (pelo "?" ou pela busca); quem entra pelo menu vê o manual do começo e não
     precisa de explicação nenhuma. Aviso que aparece sempre é aviso que ninguém lê.
     Azul, e não laranja: é informação sobre o que aconteceu, não uma ação a fazer. */
  .aj-veio { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
             flex-wrap: wrap; background: rgba(47,111,214,.07); border: 1px solid rgba(47,111,214,.22);
             border-radius: 10px; padding: 10px 14px; margin: 0 0 var(--s4); }
  .aj-veio span { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
  .aj-veio b { color: var(--ink); }
  .aj-nota { margin: 0; padding: 14px 22px; font-size: 12.5px; line-height: 1.55;
             color: var(--ink-2); background: var(--surface-2);
             border-bottom: 1px solid var(--border); }
  /* A LEITURA DO MANUAL — item 373, 24/08/2026, pedido dele: "no ajuda quero um layout
     de pagina que favoreca a leitura do manual; do jeito que esta o manual ficou
     escondido".
     🔴 MEDIDO ANTES: 434px de cabecalho antes da primeira palavra, e o manual numa
     caixa de 520px que rolava POR DENTRO enquanto a pagina rolava por fora. Dentro
     dela, uma folha A4 de 795px com ~300px de cinza de cada lado. Na tela dele, de
     738px, o titulo do manual caia ABAIXO DA DOBRA: abrir a Ajuda mostrava zero
     palavras do manual.
     A caixa nunca crescia porque `calc(100vh - 250px)` dava 488 na tela dele e o
     `min-height: 520px` vencia. Teto e piso brigando, e quem perdia era o texto. */
  .aj-leitura { display: grid; grid-template-columns: 248px minmax(0, 1fr);
                gap: 0; padding: 0; overflow: hidden; }
  /* A COLUNA TEM O TETO DO PALCO, e o `calc` e o MESMO do `.aj-manual` de proposito.
     Sem o teto ela cresce com o indice e EMPURRA o bloco: medido, a pagina passou a
     rolar 318px onde rolava 258, so por a busca ter entrado aqui. Duas alturas que
     precisam concordar sao duas contas para a mesma pergunta — se um dia o `196px`
     mudar, muda nos dois. */
  .aj-indice { border-right: 1px solid var(--hair); padding: 14px 14px 16px;
               background: var(--surface-2); overflow-y: auto;
               max-height: calc(100vh - 196px); }
  .aj-indice-rot { font: 700 10px/1.6 var(--ui); letter-spacing: .06em;
                   text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
  /* O item do indice e NAVEGACAO, e por isso nao veste o botao de acao do catalogo
     (item 320): ele e da familia da rail, e o censo de botoes o conta daquele lado. */
  /* `flex-start`, e nao `baseline`: com titulo de duas linhas o alinhamento por linha
     de base empurrava o numero para baixo e o vao entre os itens saia irregular. */
  .aj-cap { display: flex; align-items: flex-start; gap: 8px; width: 100%;
            margin-bottom: 2px;
            text-align: left; background: none; border: 0; cursor: pointer;
            padding: 6px 8px; border-radius: 7px; font: 400 12.5px/1.4 var(--ui);
            color: var(--ink-2); }
  .aj-cap:hover { background: var(--surface-1); color: var(--ink); }
  .aj-cap b { color: var(--ink-3); font-size: 11px; min-width: 12px; }
  .aj-cap.aqui { background: rgba(255,101,1,.10); color: var(--ink); font-weight: 600; }
  .aj-cap.aqui b { color: var(--orange); }
  .aj-indice .aj-nota { margin: 14px 0 0; padding: 10px 0 0; background: none;
                        border: 0; border-top: 1px solid var(--hair); font-size: 11.5px; }
  /* O SUPORTE TAMBEM NA LATERAL — pedido dele em 24/08/2026, olhando a tela.
     Ele custava ~150px de altura no fim da pagina, largura inteira, para dizer um
     telefone e um e-mail. Na coluna ele deixa de ser CARTAO: sem fundo, sem borda,
     sem sombra — quem separa e a mesma linha fina que separa a nota acima.
     ⚠️ NA ABA "Perguntas frequentes" ele CONTINUA onde estava, porque a coluna so
     existe na aba Manual. Um markup so, dois lugares: copiar o bloco seria criar duas
     versoes para divergirem. */
  .aj-indice .aj-suporte { margin: 12px 0 0; padding: 12px 0 0; background: none;
                           border: 0; border-top: 1px solid var(--hair);
                           box-shadow: none; border-radius: 0; }
  /* 🔴 O `padding: 0` da primeira versao TIROU OS 11px que dao lugar a marca laranja, e
     o "T" de "Travou" ficou EM CIMA dela — ele viu e mandou consertar. A marca e um
     `::before` em `left: 0`; sem a folga, texto e marca ocupam o mesmo pixel.
     E o titulo quebra em duas linhas aqui, a pedido dele: a coluna tem 232px e
     "TRAVOU? FALE COM A GENTE" em caixa-alta com espacamento de letra nao cabe.
     ⚠️ `display: block` e obrigatorio: o `<br>` nao quebra dentro de um flex, e o
     titulo de bloco e flex por padrao. E com duas linhas a marca deixa de ser centrada
     (`top: 50%`) e passa a alinhar com a PRIMEIRA — marca no meio de um titulo de duas
     linhas fica flutuando no vao. */
  .aj-indice .aj-suporte h2 { font-size: 11px; letter-spacing: .05em;
                              text-transform: uppercase; color: var(--ink-3);
                              margin: 0 0 6px; padding: 0 0 0 11px; border: 0;
                              display: block; line-height: 1.35; }
  .aj-indice .aj-suporte h2 br { display: inline; }
  .aj-indice .aj-suporte h2::before { top: 3px; transform: none; }
  .aj-indice .aj-suporte .vazio { font-size: 11.5px; line-height: 1.5; margin: 0 0 8px; }
  .aj-indice .aj-canais { display: flex; flex-direction: column; gap: 6px; }
  /* O TELEFONE NAO QUEBRA EM DUAS LINHAS — pedido dele, olhando a coluna.
     "WhatsApp +55 (14) 99906-4101" nao cabia em 12px com 14px de folga de cada lado.
     `nowrap` sozinho vazaria da coluna; o que faz caber e a folga menor com a fonte
     um ponto menor. Medido na coluna de 232px: sobra folga. */
  /* 🔴 MEDIDO, e o primeiro ajuste NAO BASTOU: com 11,5px e folga de 8px o botao do
     WhatsApp pedia 215px e a coluna dava 203 — e com `nowrap` transbordar nao quebra a
     linha, CORTA O NUMERO. Trocar uma quebra por um corte e trocar um defeito visivel
     por um pior: quem le um telefone cortado nao sabe que esta cortado.
     ⚠️ E O SEGUNDO AJUSTE TAMBEM NAO BASTOU: com a coluna a 248px o botao passou a
     caber com folga de ZERO — cabia por 0px. E o caso "passa por 1 pixel" que o item
     351 ja registrou: layout que passa raspando na maquina de quem escreve quebra na de
     quem usa, e aqui bastaria outro telefone ou outra fonte para cortar o numero.
     Terceiro ajuste: 11px. Folga medida abaixo, e ela precisa ser POSITIVA de verdade. */
  .aj-indice .aj-canais .btn-p { width: 100%; justify-content: center; font-size: 11px;
                                 padding: 0 6px; white-space: nowrap; }
  .aj-palco { min-width: 0; display: flex; flex-direction: column; }
  /* A ALTURA VEM DA JANELA, e o piso e baixo de proposito: piso alto foi o que
     travou a caixa em 520px na tela dele. Quem manda e o `calc`. */
  .aj-manual { width: 100%; height: calc(100vh - 196px); min-height: 320px;
               border: 0; display: block; background: var(--surface); }
  @media (max-width: 1100px) {
    .aj-leitura { grid-template-columns: 1fr; }
    .aj-indice { border-right: 0; border-bottom: 1px solid var(--hair); }
  }

  /* Diálogo de usuário: cabeçalho navy, corpo e rodapé separados — mesma
     presença das telas, em vez de um formulário solto numa caixa branca. */
  /* ⚠️ `hidden auto` como no `.pl-dlg` — item 364. Este NÃO estava cortando nada hoje
     (medido: 0px fora, a 738 e a 600 de janela), mas tinha a MESMA proteção desligada.
     O `.dlg-cartao` declara `overflow-y: auto` de propósito, junto com o teto de 90vh;
     quem escreve `overflow: hidden` para segurar o canto arredondado desliga a rolagem
     sem querer, e o defeito só aparece no dia em que o conteúdo cresce. Consertado
     antes de doer, porque a palavra é a mesma. */
  .dlg-usuario { width: min(470px, 94vw); padding: 0; overflow: hidden auto; }
  /* O diálogo abre por cima do banner navy da tela, e um topo navy sumia no
     fundo. Tentei inverter para laranja cheio e ficou pesado — laranja é o
     acento da marca, não uma superfície.
     A solução: topo CLARO, como o resto do cartão, separado do corpo por um
     filete, com o avatar laranja marcando a identidade. O cartão se distingue
     do fundo escuro por ser claro, não por gritar mais alto que ele. */
  .du-topo { display: flex; align-items: center; gap: 14px; padding: 20px 22px 16px;
             background: var(--surface-2); border-bottom: 1px solid var(--border); }
  .du-av { width: 42px; height: 42px; border-radius: 50%; flex: none; display: flex;
           align-items: center; justify-content: center; font-family: var(--brand);
           font-weight: 800; font-size: 18px; color: #fff; background: var(--orange);
           box-shadow: 0 2px 8px rgba(255,101,1,.30); }
  .dlg-cartao.dlg-usuario .du-topo h3 { color: var(--navy); margin: 0 0 2px; font-size: 16px; }
  .dlg-cartao.dlg-usuario .du-topo p { color: var(--ink-3); font-size: 12px; margin: 0;
                                       line-height: 1.4; }
  /* O diálogo precisa CABER na tela: com os campos empilhados e os papéis em
     cartão alto ele chegava a 808px, mais que a área útil de um notebook.
     Nome e e-mail dividem a linha, os papéis ficaram compactos, e o corpo rola
     se ainda assim faltar espaço.
     O seletor cita o pai para vencer a regra genérica de .campos, que vem
     depois no arquivo e reimporia o auto-fit. */
  .du-corpo { padding: 18px 22px; max-height: calc(100vh - 250px); overflow-y: auto; }
  .dlg-usuario .du-campos { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); }
  .dlg-usuario .du-campos .campo-full { grid-column: 1 / -1; }
  /* Papéis como cartões: um <select> escondia a diferença entre eles, que é
     justamente o que o dono precisa entender antes de escolher. */
  .du-papeis { display: grid; gap: 6px; }
  .du-papel { display: block; border: 1px solid var(--border); border-radius: 9px;
              padding: 7px 11px 8px 32px; cursor: pointer; position: relative;
              background: var(--surface-2); transition: border-color var(--t), background var(--t);
              text-transform: none; letter-spacing: 0; margin: 0; }
  .dlg-usuario .du-papel input { position: absolute; left: 11px; top: 10px;
                    width: 15px; height: 15px; accent-color: var(--orange); margin: 0; }
  .du-papel b { display: block; font-size: 13px; color: var(--ink); font-weight: 600; }
  .du-papel small { display: block; font-size: 11px; color: var(--ink-3); line-height: 1.35;
                    margin-top: 1px; text-transform: none; }
  .du-papel:hover { border-color: var(--border-hover); }
  .du-papel.sel { border-color: var(--orange); background: var(--sel-bg); }
  .du-erro { color: var(--bad); background: var(--bad-bg); border: 1px solid #f3cec4;
             border-radius: 9px; padding: 9px 12px; font-size: 12.5px; margin-top: var(--s4); }
  .du-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px;
               background: var(--surface-2); border-top: 1px solid var(--border); }
  .dlg-cartao h3 { font-family: var(--brand); font-weight: 700; font-size: 16px;
                   color: var(--navy); margin: 0 0 5px; }
  .dlg-cartao > p { color: var(--ink-2); font-size: 13px; line-height: 1.5;
                    margin: 0 0 var(--s4); }
  .dlg-cartao p b { color: var(--ink); }
  /* 🔴 O VAO DE TODO DIALOGO E 16px — item 360, e antes eram CINCO valores diferentes.
     Medido no de trocar senha: 5 entre titulo e texto, 16 do texto ao 1o campo, 12 entre
     campos, 8 do campo para a dica e 12 dela para o proximo. O padrao da casa e 16.
     ⚠️ Quem carrega a folga agora e o `label`, e o `input` perdeu a margem propria: com
     os dois tendo margem, o vao entre um campo e o rotulo seguinte era a SOMA dos dois, e
     mexer num deles dava um numero que ninguem previa. Um dono por vao. */
  .dlg-cartao label { display: block; margin: var(--s4) 0 5px; }
  .dlg-cartao label:first-of-type { margin-top: 0; }
  .dlg-cartao input { width: 100%; height: 38px; margin-bottom: 0; }
  /* O `select` do `pedirEscolha` (item 42) segue o mesmo campo do `pedirTexto` — dois
     tamanhos de campo no mesmo diálogo fariam o segundo parecer de outro produto. */
  .dlg-cartao select { width: 100%; height: 38px; margin-bottom: var(--s3); }
  /* A dica COLA no campo de cima, porque e sobre ele. Com o vao dos outros blocos ela
     parecia um paragrafo independente no meio do formulario. */
  .dlg-forca { margin: 6px 0 0; }
  .dlg-forca-tri { height: 4px; background: var(--hair); border-radius: 999px; overflow: hidden; }
  .dlg-forca-tri i { display: block; height: 4px; width: 0; border-radius: 999px;
                     background: var(--bad); transition: width .18s, background .18s; }
  .dlg-forca span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }
  .dlg-erro { color: var(--bad); font-size: 12.5px; min-height: 17px;
              margin: var(--s4) 0 0; }
  .dlg-erro:empty { min-height: 0; margin: 0; }
  .dlg-acoes { display: flex; gap: var(--s2); justify-content: flex-end; margin-top: var(--s4); }
  .dlg-acoes button { height: 38px; padding: 0 18px; }
  /* O Processar enquanto o servidor prepara, 17/10/2026: o texto é o estado, o círculo é enfeite. */
  .dlg-preparando { color: var(--ink-3); font-size: 13px; margin: 0 0 10px; }
  /* O erro do Processar fica vermelho: a regra dos parágrafos do cartão o deixava cinza. */
  .dlg-cartao p.dlg-erro { color: var(--bad); }
  .dlg-acoes button .proc-giro { display: inline-block; width: 12px; height: 12px; margin-right: 8px;
    vertical-align: -1px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff; animation: giraToast .8s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .dlg-acoes button .proc-giro { animation: none; } }
  /* Parado mas LARANJA: a regra geral do principal parado tira a cor, e aqui o botão parado é o
     estado em andamento, não uma ação proibida. Mais específica que ela de propósito. */
  .dlg-acoes button.principal.preparando:disabled { background: var(--orange); color: #fff;
    border-color: transparent; opacity: 1; cursor: progress; }

  /* trava de senha na abertura */
  /* ------------------------------------------------ tela de abertura */
  /* Acima de tudo (z-index maior que a trava): é a primeira coisa que se vê.
     Hoje o que se vê é ESTA recriação em CSS/SVG — a arte oficial não existe.
     Se um dia existir, entra por JS: ver `ARTE_DA_ABERTURA` no app.js. */
  #abertura { position: fixed; inset: 0; z-index: 120; background: var(--navy-5);
              display: flex; align-items: center; justify-content: center;
              overflow: hidden; transition: opacity .5s ease; }
  #abertura.saindo { opacity: 0; pointer-events: none; }
  #abertura.com-arte { background: var(--navy-5) center/cover no-repeat; }#abertura.com-arte .ab-malha,
  #abertura.com-arte .ab-centro { display: none; }   /* a arte já traz tudo */
  .ab-malha { position: absolute; width: 62%; height: 46%; }
  .ab-esq { left: -6%; bottom: -4%; }
  .ab-dir { right: -6%; bottom: -7%; transform: scaleY(-1) rotate(4deg); }
  .ab-centro { text-align: center; position: relative; }
  .ab-nome { font-family: var(--brand); font-weight: 800; font-size: clamp(44px, 7vw, 84px);
             color: #fff; letter-spacing: -.01em;
             text-shadow: 0 0 34px rgba(160,190,255,.45), 0 0 90px rgba(120,150,255,.25); }
  .ab-nome b { color: var(--orange); text-shadow: 0 0 34px rgba(255,101,1,.5); }
  .ab-sub { margin-top: 10px; color: var(--tinta-esc-2); font-size: 13px; letter-spacing: .2em;
            text-transform: uppercase; }
  .ab-carregando { margin-top: 22px; color: var(--tinta-esc-2); font-size: 13px; letter-spacing: .14em;
                   text-transform: uppercase; display: inline-flex; align-items: center; gap: 9px; }
  .ab-carregando i { width: 9px; height: 9px; border-radius: 50%; background: var(--orange);
                     animation: ab-pulso 1.1s ease-in-out infinite; }
  @keyframes ab-pulso { 0%,100% { opacity: .25; transform: scale(.8); }
                        50% { opacity: 1; transform: scale(1.15); } }

  .trava { position: fixed; inset: 0; z-index: 90; background: var(--navy);
           display: grid; place-items: center; }
  .trava-cartao { width: min(340px, 90vw); background: var(--surface); border-radius: 12px;
                  padding: 28px 26px; text-align: center; }
  .trava-marca { font-family: var(--brand); font-weight: 800; font-size: 22px; color: var(--navy); }
  .trava-marca b { color: var(--orange); }
  .trava-cartao p { color: var(--ink-3); font-size: 13px; margin: 8px 0 16px; }
  /* A versao publicada, no pe do cartao de login (item 401): discreta como a do menu,
     tabular para o hexadecimal nao dancar, e some sozinha quando o servidor nao sabe. */
  .trava-cartao p.trava-versao { margin: 14px 0 0; font-size: 11px; line-height: 1.3;
                                 font-variant-numeric: tabular-nums; letter-spacing: .02em;
                                 color: var(--ink-3); opacity: .55; cursor: default; }
  .trava-cartao p.trava-versao:hover { opacity: .9; }
  .trava-cartao input { width: 100%; text-align: center; margin-bottom: 10px; }
  .trava-cartao button { width: 100%; }

  /* A variante da trava para ASSINATURA VENCIDA (item 63) morava aqui — o cartao
     largo com a nota "nada foi apagado" e as classes tv-nota e tv-acoes. MORREU no
     item 379: com o modo leitura, o 402 nao cobre mais a tela inteira — a conta ve
     tudo e baixa o que ja era dela, e quem conta a historia e o banner fixo
     (.faixa-leitura.assinatura-aviso e .assinatura-trava, logo abaixo). O CSS orfao
     saiu porque a guarda de classes fantasmas o acusou, como devia. */

  /* tela de relatório embutido */
  /* Espécie do documento — hoje só relatório (ver SÓ RELATÓRIO no CLAUDE.md). Fica junto do botão que gera,
     porque é ali que a decisão acontece. */
  /* A espécie do documento não se escolhe mais: o Sherlock emite só relatório.
     No lugar do segmentado, um rótulo — mesma altura de 32px, para a barra não
     mudar de anatomia e o "Ficha de anomalia" ao lado continuar alinhado. */
  /* 34px, e não 32: o `.esp-botoes` ao lado tem botões de 32px MAIS a borda de
     1px do grupo. Medi os dois lado a lado e o rótulo saía 2px mais baixo, com
     os topos fora de registro. Quem manda na altura aqui é o vizinho. */
  .rel-especie-fixa { display: inline-flex; align-items: center; height: 34px;
                      padding: 0 14px; border-radius: 9px; font-size: 12.5px;
                      font-weight: 600; color: var(--navy);
                      background: var(--surface-2); border: 1px solid var(--border); }

  /* 🔴 AQUI MORAVAM `.esp-op`, `.btn-verde` e `.btn-azul` — saíram no item 320,
     21/08/2026, e a razão é a régua da casa: **3+ usos = componente; 1 ou 2 usos = HTML
     simples**.

     * `.btn-verde` tinha 2 usos (baixar backup, mudar plano) e `.btn-azul` tinha 1
       (verificar serviços). Três botões não sustentam duas cores próprias no catálogo —
       e nenhum dos três é destrutivo nem é a ação principal da tela. Viraram `btn-p`.
     * `.esp-op` era uma QUARTA veste do segmentado ("escolha um entre poucos"), que a
       grade/lista já resolvia com `.pj-modo`. Hoje é `.pj-modo` também.

     Quem quiser trazer uma cor de volta traz com lastro: três usos, e o fiscal
     (`test_o_catalogo_dos_botoes.py`) passa a conhecê-la. */
  /* 🔴 E AQUI FICOU A SEGUNDA ÓRFÃ DO MESMO COMMIT — o resto do `.esp-op`, cuja
     primeira linha saiu no item 320. Ela envenenou a `.rel-barra`, que é a BARRA DE
     CONTROLES DO DOCUMENTO: sem ela, o rótulo, os botões de exportação e a explicação
     perdem o flex, o fundo, a borda e o recheio, e ficam soltos na página.

     Medido no navegador: `.rel-barra` tinha ZERO regras vivas. Foram DUAS regras
     mortas pelo mesmo commit, em pontas opostas do arquivo — e a segunda só apareceu
     porque a guarda do item 360 varre a folha inteira em vez de olhar onde eu já
     estava olhando. Eu tinha visto `.rel-barra` numa lista antes e DESCARTEI como
     falso positivo do meu regex. Era real. */
  /* O :hover aqui não é enfeite. `button:hover:not(:disabled)` vale (0,2,1) e
     `.esp-op.ativo` vale (0,2,0) — a genérica ganha e pinta o botão SELECIONADO
     de branco ao passar o mouse, que foi o que o dono viu. É a terceira vez que
     esse empate aparece (menu, filtro de laudos e agora aqui). */
  /* Barra de controles do documento, abaixo do banner: espécie à esquerda,
     exportações à direita. */
  /* Controles do documento: dois blocos-irmãos de mesmo peso — a escolha da
     espécie e as exportações —, cada um com o seu rótulo e a sua explicação.
     Antes eram uma linha só com um dos lados vazio, e parecia desequilibrado. */
  /* Barra única de controles, centrada acima do documento: rótulo, botões e a
     explicação curta AO LADO deles. Em dois cartões empilhados o texto ficava
     longo e a faixa desequilibrada. */
  /* O RÓTULO SOBE PARA CIMA DO CONTROLE — 21/10/2026, aprovado por print. Com o rótulo ao
     lado, os três grupos somavam 1.224 a 1.320 px, e a 1536 px com o menu aberto a barra tem
     1.243: quebrava em duas linhas (121 px) nas seis línguas, inclusive pt-BR. Em cima, os
     grupos ocupam 996 a 1.097 px e a barra fica numa linha só (88 px) nas 24 combinações
     medidas (1536 e 1920, menu aberto e fechado, seis línguas). O stretch da barra e a
     linha 1fr do grupo põem os três rótulos na mesma altura, mesmo com o segmentado da
     Ficha mais alto que os vizinhos.

     🔴 E COM FOLGA PARA A FONTE — 22/10/2026. Medido no Windows, cabia; no Chromium do servidor
     (outra fonte do sistema, mais larga) a 1536 com o menu aberto faltavam 82 px em inglês, 63
     em espanhol, 61 em francês e 1 em italiano, e a barra voltava a 2 linhas. O que o assinante
     vê depende da fonte do computador dele. Daí: 16 px entre os grupos (era --s5), 14 px de
     margem interna (era 20) e a explicação cinza com no máximo 13em, quebrando em mais uma
     linha na língua mais longa. Na fonte do servidor sobram de 74 px (espanhol) a 128 px
     (inglês), com a barra entre 93 e 108 px; o teste exige 40 px de folga, não só caber.

     UMA LINHA BAIXA — 30/10/2026, pedido dele: o topo do Revisar (banner e esta faixa) tomava
     213 px da tela de 738 dele, e quem pagava era a lista. A explicação cinza de cada grupo
     virou um i com o texto no balão; sem ela, o rótulo VOLTA para o lado do controle e cabe
     com folga (o que não cabia em 21/10 era rótulo, controle E explicação lado a lado). A faixa
     foi de 93 para 48 px, numa linha, nas mesmas 24 combinações do teste. */
  .rel-barra { display: flex; align-items: center; justify-content: center;
               gap: 16px; flex-wrap: wrap; margin: var(--s4) 0;
               background: var(--surface-2); border: 1px solid var(--border);
               border-radius: 12px; padding: 6px 14px; }
  .rel-grupo { display: flex; align-items: center; gap: 8px; }
  .rel-rot { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
             color: var(--ink-3); font-weight: 700; white-space: nowrap; }
  .rel-export { display: flex; align-items: center; gap: 6px; }
  /* Cada exportação na cor da sua ferramenta — verde Excel, azul Word — para o
     olho achar o formato antes de ler o rótulo. */
  .rel-export button { height: 32px; padding: 0 12px; font-size: 12.5px;
                       display: inline-flex; align-items: center; gap: 7px; }
  .rel-export .exp svg { flex: none; }
  .exp-xls { color: var(--acao-verde); border-color: var(--acao-verde-bd); background: var(--acao-verde-bg); }
  .exp-xls:hover:not(:disabled) { background: var(--acao-verde-bg2); border-color: var(--acao-verde); }
  .exp-csv { color: #6a5a1e; border-color: #e3d9b4; background: #fdfaef; }
  .exp-csv:hover:not(:disabled) { background: #f8f1dc; border-color: #a08a34; }
  .exp-doc { color: var(--acao-azul); border-color: var(--acao-azul-bd); background: var(--acao-azul-bg); }
  .exp-doc:hover:not(:disabled) { background: var(--acao-azul-bg2); border-color: var(--acao-azul); }
  .rel-grupo .pj-modo { display: inline-flex; }
  /* Na faixa baixa o segmentado tem a altura do vizinho (34 px), e não os 40 de Projetos. */
  .rel-grupo .pj-modo { padding: 2px; }
  .rel-grupo .pj-modo button { height: 28px; }
  /* O i da explicação: o texto inteiro está no title (o balão). Recebe foco pelo teclado. */
  .rel-explica { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px;
                 border-radius: 50%; border: 1px solid var(--border-hover); color: var(--ink-3);
                 font: italic 700 10px/1 Georgia, serif; cursor: help; user-select: none; }
  .rel-explica:hover, .rel-explica:focus-visible { color: var(--navy); border-color: var(--navy); }
  .rel-explica:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
  .rel-sep { width: 1px; height: 22px; background: var(--border); }
  /* A LÍNGUA DO RELATÓRIO, no banner do Documentar — 21/10/2026. O mesmo desenho do seletor
     de idioma da casca (pílula translúcida com bandeira), para ser reconhecido de cara; o
     rótulo "Relatório em" diz que ele não troca a tela. Mora no banner e não na barra cinza:
     ali um quarto grupo não cabia a 1536 px. Os seletores levam o .cta-banner ou o
     .rel-idi-lista na frente para vencer o button:hover:not(:disabled) genérico, que vale
     (0,2,1) e já pintou de branco um botão selecionado nesta tela. */
  .rel-idi { position: relative; display: flex; align-items: center; gap: 8px; flex: none; }
  .rel-idi-rot { color: var(--tinta-esc-2); font-size: 11px; font-weight: 700;
                 text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
  .cta-banner .rel-idi-btn,
  .cta-banner .rel-idi-btn:hover:not(:disabled) {
    display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px;
    color: #fff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.32);
    border-radius: 999px; font: 600 12.5px/1 var(--ui); white-space: nowrap; cursor: pointer; }
  .cta-banner .rel-idi-btn:hover:not(:disabled),
  .cta-banner .rel-idi-btn[aria-expanded="true"] {
    background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.55); }
  .cta-banner .rel-idi-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
  /* A bandeira vem da casca (bandeiraDoIdioma) com a classe dela; aqui ela é vestida pela
     caixa, e não pelo nome da casca, que a guarda de colisão proíbe repetir nesta folha. */
  .rel-idi-band { display: flex; flex: none; }
  .rel-idi-band svg { width: 18px; height: 13px; display: block;
                      border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
  .rel-idi-btn svg:last-child { opacity: .85; flex: none; }
  .rel-idi-lista { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 300px;
                   padding: 6px; background: var(--surface); color: var(--ink); text-align: left;
                   border: 1px solid var(--border); border-radius: 12px;
                   box-shadow: 0 10px 28px rgba(19,31,51,.18); }
  .rel-idi-lista[hidden] { display: none; }
  .rel-idi-cab { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                 color: var(--ink-3); padding: 6px 10px 4px; }
  .rel-idi-lista .rel-idi-op,
  .rel-idi-lista .rel-idi-op:hover:not(:disabled) {
    display: flex; align-items: center; gap: 10px; width: 100%; height: auto; padding: 8px 10px;
    border: 0; border-radius: 8px; background: none; color: var(--ink); box-shadow: none;
    font: 600 12.5px/1.2 var(--ui); text-align: left; cursor: pointer; }
  .rel-idi-lista .rel-idi-op:hover:not(:disabled) { background: #eef3f9; }
  .rel-idi-lista .rel-idi-op[aria-selected="true"] { background: #fff4ec; color: var(--orange-dk); }
  .rel-idi-op small { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--ink-3); }
  .rel-idi-nota { margin: 6px 4px 2px; padding: 8px 8px 4px; border-top: 1px solid var(--border);
                  font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
  /* DE QUAL MAPA É O RELATÓRIO — 24/10/2026, print "marcações por pasta" (parte 5). Uma
     fileira de cartões logo abaixo do banner, só em projeto com pasta pronta: o rádio laranja
     é o escolhido. Mora fora da barra cinza pela mesma razão da língua (ali não cabe a 1536
     px), e a grade da revisão encolhe a altura da fileira para a página continuar sem rolar.
     Os seletores levam o .rel-de na frente para vencer o button:hover:not(:disabled) genérico. */
  .rel-de { display: flex; align-items: center; gap: 12px; margin: var(--s3) 0 0; }
  .rel-de-rot { color: var(--ink-3); font-size: 11px; font-weight: 700; text-transform: uppercase;
                letter-spacing: .07em; white-space: nowrap; flex: none; }
  .rel-de-ops { display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; }
  .rel-de .rel-de-op,
  .rel-de .rel-de-op:hover:not(:disabled) {
    display: flex; align-items: center; gap: 10px; height: auto; min-width: 190px; max-width: 280px;
    padding: 7px 14px 7px 11px; border: 1.5px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--ink); box-shadow: none; text-align: left;
    font: 500 12.5px/1.25 var(--ui); cursor: pointer; }
  .rel-de .rel-de-op:hover:not(:disabled) { border-color: #f3b98f; }
  .rel-de .rel-de-op.on, .rel-de .rel-de-op.on:hover:not(:disabled) {
    border-color: var(--orange); background: #fff7f1; cursor: default; }
  .rel-de .rel-de-op:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
  .rel-de-bola { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #b4c0cf;
                 flex: none; box-sizing: border-box; }
  .rel-de-op.on .rel-de-bola { border: 5px solid var(--orange); }
  .rel-de-txt { display: flex; flex-direction: column; min-width: 0; }
  .rel-de-txt b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rel-de-txt small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
  /* 62 px = a fileira (45) e o espaço acima dela (16), descontados da altura E do mínimo:
     medido a 1536×738, só a altura deixava o mínimo de 420 empurrar a grade 42 px abaixo. */
  /* 330 = os 268 da grade sem a fileira (revisar.css, 30/10/2026) mais esses 62. */
  .rel-de ~ .rev-grade { height: calc(100vh - 330px); min-height: 358px; }
  @media (max-width: 1080px) { .rel-sep { display: none; }
  }
  /* Aviso do que falta antes de gerar o documento — âmbar, informa sem impedir. */
  .doc-falta { font-size: 12.5px; color: var(--warn); background: var(--warn-bg);
               border: 1px solid var(--warn-bd); border-radius: 9px; padding: 8px 11px;
               margin: var(--s3) 0 0; line-height: 1.4; }
  .rel-frame { width: 100%; height: calc(100vh - 300px); min-height: 420px;
               border: 1px solid var(--border); border-radius: 9px; background: #fff; }