/* ============================================================================
   LICIFLOW — a identidade visual, num lugar só
   ============================================================================
   Vem do design que o Alan aprovou em 05/08/2026 (o bundle `Liciflow (2).html`,
   guardado em docs/design/telas-v3-referencia.html e extraído para
   telas-v3-template.html). Valor por valor, tirado do próprio mockup.

   TEMA ÚNICO, CLARO. O escuro saiu por decisão do Alan em 05/08: o mockup só
   desenhou o claro, e manter um escuro derivado significava manter uma
   identidade que ninguém desenhou. O `tema.js` e o botão ☀/☾ foram removidos.
   Se um dia houver um escuro desenhado, ele entra como `html.escuro` — e é o
   `:root` daqui que continua sendo a verdade do claro.

   Fontes servidas pelo próprio servidor (frontend/fontes/): a pasta está no
   Google Drive e o operador usa isto com internet ruim. Google Fonts cairia
   para a fonte do sistema e desmontaria o desenho.

   Quem mexe em cor mexe AQUI: as 8 telas mapeiam estes nomes para os locais
   delas num `:root{}` no topo do próprio arquivo, e nenhuma tem cor literal.
   Trocar um valor daqui chega às 8 de uma vez — é para isso que a camada existe.
   ========================================================================== */

/* ── Fontes ────────────────────────────────────────────────────────────────
   Só latin e latin-ext. O bundle trazia também cirílico, grego e vietnamita —
   51 KB que nenhum edital brasileiro usa.

   Instrument Sans (texto) veio no bundle de 05/08 e substituiu a Archivo.
   JetBrains Mono (números) é a mesma desde 03/08: o mockup novo usa ela também. */
@font-face{
  font-family:'Instrument Sans'; font-style:normal; font-weight:400 700;
  font-stretch:100%; font-display:swap;
  src:url('fontes/instrument-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans'; font-style:normal; font-weight:400 700;
  font-stretch:100%; font-display:swap;
  src:url('fontes/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url('fontes/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url('fontes/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── Tokens ────────────────────────────────────────────────────────────────
   Os valores do mockup de 05/08. Sem `html.claro`: há um tema só, e o padrão
   do `:root` É ele. (Antes o padrão era o escuro e `.claro` sobrescrevia —
   invertido em relação ao desenho, e a origem de mais de um susto.) */
:root{
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  --acento:#F0B429;         /* âmbar da marca */
  --acento-forte:#E0A419;   /* o hover do âmbar */
  --acento-tinta:#16211D;   /* o que se escreve SOBRE o âmbar */
  --link:#8A6A12;

  --fundo:#F1EFE8;          /* o chão da página — bege, não branco */
  --painel:#FFFFFF;         /* cartões, tabelas */
  --painel2:#FAF8F2;        /* cabeçalho de cartão, rodapé de modal */
  --painel3:#EFECE3;        /* pílula muda, trilho de segmento */

  --linha:#F0EDE5;          /* divisor entre linhas de tabela */
  --linha2:#E4E0D7;         /* borda de cartão */
  --linha3:#D6D1C5;         /* borda de botão, borda em foco */

  --tinta:#1A1916;          /* texto principal */
  --tinta2:#4A463D;
  --tinta3:#6B665C;
  --tinta4:#9A9384;         /* rótulos (o versalete) */
  --tinta5:#A39C8E;         /* o mais apagado que ainda se lê */

  /* O MENU: grafite quente, fixo. Não segue o tema — é a identidade.
     06/08: era #16211D (quase preto, carregado), passou por #223229 e #24352C.
     23/09 DEIXOU DE SER VERDE, a pedido do Alan ("essa cor do lado de fora,
     meio verde, não estou gostando dela"). O incômodo foi medido antes de
     trocar, e não era saturação: o menu estava em MATIZ 148° (verde) e todo o
     resto da tela em 47° (o bege #F1EFE8 do `--fundo`) — lados opostos do
     círculo, brigando o dia inteiro na periferia da visão.
     #26241F é o próprio bege levado ao escuro (matiz 40°, a mesma família):
     o menu para de ser UMA COR e vira tinta, e o âmbar da marca passa a ser a
     única cor forte da tela. Escolhido entre 5 alternativas fotografadas na
     Agenda de verdade — as outras foram petróleo #1E2B33, ardósia #26282B,
     verde calmo #1C2823 e o quase-preto #1A1916.
     O cabeçalho do pregão NÃO usa mais este token: o Alan pediu cores
     diferentes para as duas superfícies (`.topo` em pregao/).
     NÃO é o valor dos BOTÕES escuros nem dos cabeçalhos de TABELA — aqueles
     seguem #16211D (hardcoded em ~30 lugares, 9 telas): são elemento sobre
     fundo claro e precisam do contraste fechado.
     Não clarear muito mais: o texto daqui é branco translúcido a 6-13%. */
  --menu:#26241F;
  --menu2:#3A3730;          /* avatar dentro do menu — acompanha o fundo */
  --menu-tinta:#E8EAE6;     /* nome da pessoa, texto forte no escuro */
  --menu-tinta2:#9DAAA2;    /* item de menu em repouso */
  --menu-tinta3:#8FA096;    /* rótulo de cabeçalho de tabela */
  --menu-tinta4:#6E7F75;    /* o mais apagado do escuro */
  --menu-eyebrow:#5E6F66;   /* "OPERAÇÃO", "EMPRESA" */

  /* Semânticas — separadas do acento de propósito: "ganho" não pode virar
     âmbar quando alguém trocar a cor da marca.
     O par forte/fraco existe porque o mockup usa os dois: o escuro no número
     grande, o claro no texto sobre fundo colorido. */
  --ok:#157F52;    --ok-forte:#12603F;
  --ok-fundo:#E9F2EC;   --ok-linha:#CFE3D7;
  --ruim:#B23A26;  --ruim-forte:#8E3524;
  --ruim-fundo:#FBEAE5; --ruim-linha:#F0D2C9;
  --aviso:#B98A32; --aviso-forte:#8A6A12;
  --aviso-fundo:#FBF3E0; --aviso-linha:#EFE1BC;

  /* As 7 fases da esteira. Vêm do `faseCor()` do mockup, valor por valor.
     A 8ª, `fora`, o mockup não desenhou — mas ela existe no backend (FASES em
     main.py:864) e é onde mora o pregão perdido. Cinza morno, do mesmo tom da
     paleta: presente sem chamar atenção. */
  --fase-resumo:#C08A1E;
  --fase-precificacao:#2C5D9B;
  --fase-disputa:#5B429A;
  --fase-habilitacao:#0E7C86;
  --fase-contrato:#157F52;
  --fase-empenho:#7A7A18;
  --fase-finalizado:#7A756A;
  /* 09/09: `temporario` (editais em migração) e `exito` (o fim COM ganho, que
     era o "Concluído"). O verde é o do êxito; o cinza de cima ficou com o
     `finalizado`, que virou o fim SEM ganho. */
  --fase-reservado:#8A8578;
  --fase-temporario:#5F6B72;
  --fase-exito:#12603F;
  --fase-fora:#8A8578;

  /* As 3 zonas da escada de preço (frontend/disputa/). O mockup NÃO as define:
     ele não redesenhou a sala de disputa. Derivadas da paleta nova a partir das
     semânticas — abaixo do piso é ruim, aperto é aviso, cheio é ok — para a
     escada não ficar com a cor do design velho no meio da tela nova. */
  --zona-abaixo:#D9908B;
  --zona-aperto:#E3B44A;
  --zona-cheio:#7FB398;

  --sombra:0 1px 3px rgba(22,33,29,.07);
  --sombra-alta:0 24px 60px rgba(22,33,29,.32);   /* modal */
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fundo); color:var(--tinta);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--tinta);text-decoration:none}
a:hover{color:var(--link)}
input,select,button,textarea{font-family:inherit;font-size:inherit;color:inherit}
::placeholder{color:var(--tinta5)}
:focus-visible{outline:2px solid var(--acento);outline-offset:1px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--acento);outline-offset:-1px}

/* A barra de rolagem do mockup: polegar bege com folga do fundo. */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--linha3);border-radius:9px;
                          border:3px solid var(--fundo)}
::-webkit-scrollbar-track{background:transparent}

/* Dígitos que se comparam ficam alinhados na coluna — dinheiro em fonte
   proporcional é o tipo de coisa que faz ler R$ 1.900 como R$ 1.190. */
.mono,.din{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── Peças que aparecem em toda tela ─────────────────────────────────────── */

/* Rótulo de seção: o versalete que organiza a página no design.
   NÃO se chama `.rot`: esse nome já existe em gestao/ (rótulo da fase no menu) e
   em disputa/ (rótulo de campo) com outro significado, e uma regra global de
   `text-transform:uppercase` vazava para eles — o menu inteiro virou CAIXA ALTA
   em 03/08. Classe global precisa de nome que ninguém tenha usado antes. */
.eyebrow{font-family:var(--mono);font-size:9.5px;font-weight:500;
         letter-spacing:.15em;text-transform:uppercase;color:var(--tinta4)}

/* Botões. O primário é o âmbar; o `escuro` é o verde do menu (usado em
   "Definir proposta", onde a ação é definitiva). */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:7px;
    white-space:nowrap;height:34px;padding:0 15px;border:0;border-radius:8px;
    font-size:13px;font-weight:600;cursor:pointer;
    background:var(--acento);color:var(--acento-tinta)}
.bt:hover{background:var(--acento-forte)}
.bt:disabled{opacity:.45;cursor:not-allowed;background:var(--acento)}
.bt.fantasma{background:transparent;border:1px solid var(--linha3);color:var(--tinta2)}
.bt.fantasma:hover{background:var(--painel2);border-color:var(--menu);color:var(--tinta)}
.bt.escuro{background:var(--menu);color:var(--menu-tinta)}
.bt.escuro:hover{background:#22322C}
.bt.pequeno{height:30px;padding:0 12px;font-size:12.5px}

/* Campos */
.campo{width:100%;height:34px;background:var(--painel2);
       border:1px solid var(--linha2);border-radius:8px;padding:0 11px;
       font-size:13px;outline:none}
.campo:focus{border-color:var(--linha3)}
textarea.campo{height:auto;min-height:56px;padding:9px 11px;line-height:1.5;resize:vertical}

/* Cartão */
.cartao{background:var(--painel);border:1px solid var(--linha2);border-radius:12px}

/* Pílula de estado. No mockup ela é um versalete em mono, sem o ponto colorido
   — o fundo já dá o tom. */
.pill{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;
      letter-spacing:.07em;border-radius:5px;padding:5px 8px}
.pill.ok{background:var(--ok-fundo);color:var(--ok-forte)}
.pill.ruim{background:var(--ruim-fundo);color:var(--ruim-forte)}
.pill.aviso{background:var(--aviso-fundo);color:var(--aviso-forte)}
.pill.mudo{background:var(--painel3);color:var(--tinta3)}

/* Recado que aparece e some */
.msg{font-family:var(--mono);font-size:11.5px;min-height:15px}
.msg.ok{color:var(--ok)} .msg.bad{color:var(--ruim)} .msg.warn{color:var(--aviso-forte)}

/* Vazio */
.vazio{padding:22px;text-align:center;color:var(--tinta5);font-size:13px}

/* ── O menu lateral ────────────────────────────────────────────────────────
   Valores do mockup (docs/design/telas-v3-template.html:271-313), valor por
   valor. O HTML é injetado por `LF.menu()` no `app.js`.

   Prefixo `.menu-` em tudo: nenhuma das 8 telas usa esse prefixo. Classe global
   com nome já usado vaza — em 03/08 um `.rot` no base.css colidiu com o `.rot`
   de gestao/ e disputa/ e o menu virou CAIXA ALTA.

   O par com `.app-v3` no fim é o esqueleto de duas colunas que cada tela ganha
   ao adotar o menu. */
/* 238px → 200px (06/08, o Alan achou largo). 200 é o piso: "Biblioteca de
   documentos" é o item mais longo e ainda cabe. Abaixo disso o `.menu-rot`
   trunca com "…" em silêncio, sem erro nenhum — se encurtar mais, confira
   esse item. */
.menu{width:200px;flex:none;background:var(--menu);padding:20px 10px 16px;
      display:flex;flex-direction:column;gap:20px;
      position:sticky;top:0;height:100vh}

.menu-marca{display:flex;align-items:center;gap:10px;padding:2px 8px 0;
            font:700 13px/1 var(--sans);letter-spacing:.14em;color:#F5F3EE}
.menu-marca:hover{color:#F5F3EE}
/* O ícone da marca (icone.svg): monograma AL (trocado 01/09 — era a esteira
   em três degraus, ver histórico do arquivo). Como <img> e não background
   para o arquivo ser um só: o mesmo que serve de favicon nas 11 telas. Não
   é mais quadrado — a largura acompanha a proporção real do logo (~1.62:1)
   em vez de espremer/esticar num box 1:1. */
.menu-quad{width:36px;height:22px;flex:none;display:block}

/* O botão de fixar/recolher. Fica solto no canto de cima, alinhado à direita, e
   encosta no topo com margem negativa para não abrir uma faixa vazia sob a
   marca — o `.menu` tem `gap:20px`.

   SEM margem negativa à direita (era `-2px`, 21/08: "quando fixa dá uma
   enroscada aqui, o botão estoura"): o botão cresceu de 26px para 30px e o -2px
   passou a empurrá-lo para fora dos 10px de padding do menu — ele encostava na
   borda e transbordava. Margem horizontal em ZERO deixa o `align-self:flex-end`
   pousá-lo exatamente na borda interna do padding, que é onde ele deve ficar.
   Se mexer na largura deste botão, confira aqui de novo. */
.menu-dobra{align-self:flex-end;margin:-16px 0 -14px 0;background:transparent;
            border:0;border-radius:7px;width:30px;height:30px;flex:none;
            display:flex;align-items:center;justify-content:center;
            color:var(--menu-tinta4);cursor:pointer}
.menu-dobra:hover{background:rgba(255,255,255,.10);color:#fff}
/* 18px: com 15px o painel + a seta por dentro não se distinguiam no menu. */
.menu-dobra svg{width:18px;height:18px;display:block}
/* Fixado (menu aberto) o botão fica âmbar: é o que diz "está fixo" sem precisar
   passar o mouse para ler o balão. */
.menu:not(.dobrado) .menu-dobra{color:var(--acento)}

.menu-busca{display:flex;align-items:center;gap:8px;padding:8px 10px;
            background:rgba(255,255,255,.07);border-radius:8px;
            color:var(--menu-tinta3);font-size:13px}
.menu-busca:hover{background:rgba(255,255,255,.12);color:var(--menu-tinta3)}
.menu-kbd{font:500 10px/1 var(--mono);color:var(--menu-tinta4)}

/* FLEX, não `text-align:center`. Este botão era só texto ("+ Adotar edital") e o
   `text-align` bastava; desde 21/08 ele tem um ÍCONE SVG e um rótulo, e o
   text-align empilhava os dois — lupa em cima à esquerda, "Busca" centrado
   embaixo, a caixa esticada em duas linhas (visto em screenshot ampliado).
   `display:flex` põe os dois na mesma linha, e o `gap:10px` casa com o
   `.menu-item` para a lupa cair na mesma vertical dos ícones da nav.
   `padding-left:10px` (e não 12) é o que alinha a lupa com esses ícones. */
.menu-adotar{background:var(--acento);color:var(--acento-tinta);border-radius:8px;
             padding:10px 12px 10px 10px;font-size:13px;font-weight:600;
             margin-top:-12px;display:flex;align-items:center;gap:10px}
.menu-adotar:hover{background:var(--acento-forte);color:var(--acento-tinta)}

/* min-height:0 + overflow-y:auto (31/08, achado ao vivo): a nav cresceu com
   Empresas/Fornecedores/Parâmetros e, sem isto, num viewport baixo (notebook
   pequeno, ou DevTools aberto embaixo encolhendo a página) os itens de baixo
   ficavam cortados em silêncio — `.menu` é `height:100vh` sem rolagem própria,
   e um flex item sem `min-height:0` nunca encolhe abaixo do conteúdo, então
   o `overflow` sozinho não bastava. Agora só a NAV rola; marca/busca no topo
   e o cartão do usuário embaixo (`.menu-pe`, `margin-top:auto`) continuam
   sempre visíveis. */
.menu-nav{display:flex;flex-direction:column;gap:2px;min-height:0;overflow-y:auto}
.menu-grupo{font:500 9.5px/1 var(--mono);letter-spacing:.16em;
            color:var(--menu-eyebrow);padding:2px 10px 8px}
.menu-nav .menu-grupo+.menu-grupo,
.menu-nav .menu-item+.menu-grupo{padding-top:22px}

/* Largura fixa e centrado: é o que mantém os ícones numa coluna alinhada
   quando o menu recolhe. `flex` no lugar de `text-align` porque o conteúdo
   agora é um <svg>, não um glifo — o `font-size` fica para o fallback `·`. */
.menu-ic{flex:none;width:20px;height:20px;display:flex;align-items:center;
         justify-content:center;font-size:15px;line-height:1}
/* 17px num viewBox de 24: o desenho ocupa ~20px de caixa e fica óptica-mente
   do tamanho do texto de 13px ao lado. `stroke` herda a cor via currentColor,
   então repouso/hover/aceso não precisam de regra própria para o ícone. */
.menu-svg{width:17px;height:17px;display:block}

.menu-item{display:flex;align-items:center;gap:10px;padding:9px 10px;
           border-radius:8px;font-size:13px;font-weight:500;
           color:var(--menu-tinta2)}
.menu-item:hover{background:rgba(255,255,255,.06);color:var(--menu-tinta2)}
.menu-item.on{background:rgba(255,255,255,.13);color:#fff}
.menu-item.on:hover{color:#fff}
.menu-rot{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-num{font:500 11px/1 var(--mono);color:var(--menu-tinta4);flex:none}

/* Tela que ainda não existe (fases 5-9): visível para mostrar o mapa do
   produto, apagada e sem clique para não prometer o que não abre. */
.menu-breve{opacity:.45;cursor:default}
.menu-breve:hover{background:transparent}
.menu-breve .menu-num{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}

.menu-pe{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.menu-eu{display:flex;align-items:center;gap:9px;padding:12px 10px 4px;
         margin-top:8px;border-top:1px solid rgba(255,255,255,.09)}
.menu-av{width:26px;height:26px;border-radius:50%;background:var(--menu2);flex:none;
         display:flex;align-items:center;justify-content:center;
         font:600 10px/1 var(--mono);color:#B9C6BE}
.menu-eu-txt{min-width:0;flex:1}
.menu-eu-nome{display:block;font-size:12.5px;font-weight:500;color:var(--menu-tinta);
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-eu-sub{display:block;font-size:11px;color:var(--menu-tinta4);
             white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-sair{margin-top:6px;background:transparent;border:0;border-radius:8px;
           padding:7px 10px;text-align:left;font-size:12px;
           color:var(--menu-tinta4);cursor:pointer}
.menu-sair:hover{background:rgba(255,255,255,.06);color:var(--menu-tinta2)}

/* ── MENU RECOLHIDO: só os ícones ────────────────────────────────────────────
   Tudo neste bloco pressupõe a COLUNA vertical (200px→56px) — abaixo de
   981px o menu já virou faixa horizontal (ver `@media(max-width:980px)`
   embaixo), que não tem coluna nenhuma para recolher. Sem este
   `@media(min-width:981px)`, `.dobrado` (a preferência do desktop, salva em
   localStorage) também valia lá: o `width:56px` de baixo encolhia a faixa
   INTEIRA para 56px, sumindo com toda a navegação (Busca, Esteira, Agenda,
   avatar, Sair) atrás de nada clicável. Achado 03/09 com print do Alan:
   "clico no botão de resumir os ícones todos somem e fica uma coisa bem
   feia" — o botão em si (`.menu-dobra`) também já aparecia torto na faixa
   antes mesmo do clique, porque seu `align-self:flex-end` + margem negativa
   (linha ~256, fora deste bloco) foram calibrados para a coluna. Por isso a
   faixa horizontal esconde o botão por completo (`.menu-dobra{display:none}`
   lá embaixo) em vez de tentar realinhá-lo.

   Uma classe no `.menu` e o resto é consequência. 56px = 20px de ícone + o
   padding — o suficiente para o alvo de clique não ficar apertado.

   Os rótulos saem com `display:none`, não `opacity:0`: invisível-mas-presente
   continua sendo lido pelo leitor de tela e continua ocupando espaço, e em
   56px o texto quebraria em duas linhas antes de sumir. O `title` de cada item
   (posto no `itemHTML()`) é o que diz o nome com o menu fechado.

   Sem animação de largura de propósito: `width` animada re-layouta a tela
   inteira a cada quadro, e a coluna da direita é tabela grande. */
/* O `gap:20px` do `.menu` foi calibrado para 200px de largura: em 56px ele abre
   vãos enormes entre marca, botão de recolher, Busca e a nav — a coluna ficava
   esticada e desalinhada (21/08, o Alan: "tá bem mal otimizado isso aqui").
   Recolhido o gap cai para 10px e o padding aperta. */
@media (min-width:981px){
.menu.dobrado{width:56px;padding:14px 8px 12px;gap:10px}
.menu.dobrado .menu-rot,
.menu.dobrado .menu-grupo,
.menu.dobrado .menu-kbd,
.menu.dobrado .menu-marca b,
.menu.dobrado .menu-eu-txt,
.menu.dobrado .menu-sair,
.menu.dobrado .menu-breve .menu-num{display:none}
/* Os grupos ("OPERAÇÃO"/"EMPRESA") somem com `display:none` acima, mas o
   `padding-top:22px` que os separava abria um buraco no meio da coluna de
   ícones sem nenhum rótulo para justificá-lo. Zerado; a fronteira entre blocos
   passa a ser um traço fino, que cabe em 56px e ainda separa.

   O seletor tem de ser `.menu-grupo + .menu-item` (o item que vem DEPOIS do
   cabeçalho de grupo), não `.menu-item + .menu-grupo + .menu-item`: o primeiro
   grupo do menu ("OPERAÇÃO") não tem item antes dele, e com o seletor de três
   partes o traço caía entre Agenda e Documentos — parecendo separar o par
   errado. Conferido em screenshot ampliado. */
.menu.dobrado .menu-nav{gap:4px}
.menu.dobrado .menu-nav .menu-item+.menu-grupo{padding-top:0}
.menu.dobrado .menu-grupo+.menu-item{margin-top:9px;position:relative}
.menu.dobrado .menu-grupo+.menu-item::before{content:'';position:absolute;
  top:-5px;left:10px;right:10px;height:1px;background:rgba(255,255,255,.11)}
/* O primeiro grupo abre a lista — ali o traço não separa nada, só sobra. */
.menu.dobrado .menu-nav>.menu-grupo:first-child+.menu-item{margin-top:0}
.menu.dobrado .menu-nav>.menu-grupo:first-child+.menu-item::before{display:none}

/* A marca em 56px: o quadrado âmbar de 22px era o maior elemento da coluna e
   puxava o olho para o canto de cima. 19px de altura o põe em pé de
   igualdade com os ícones de 17px dos itens (largura mantém a proporção
   ~1.62:1 do logo, ver .menu-quad acima). */
.menu.dobrado .menu-quad{width:31px;height:19px}
/* O botão de recolher, sem rótulo por perto, não precisa de 30px de alvo —
   26px continua clicável e para de competir com a marca. */
.menu.dobrado .menu-dobra{width:26px;height:26px;margin:0}
.menu.dobrado .menu-dobra svg{width:16px;height:16px}
/* O botão âmbar da Busca era o mesmo padding de quando havia rótulo ao lado:
   virava um bloco alto e vazio. 34px é a altura EXATA dos itens da nav
   (9px+9px de padding + 20px do .menu-ic) — 38px deixava o âmbar mais alto que
   todo o resto e a coluna lia como desalinhada. */
.menu.dobrado .menu-adotar{padding:0 0 0 10px;height:34px;margin:0 1px;
  display:flex;align-items:center;justify-content:flex-start}
.menu.dobrado .menu-adotar .menu-svg{width:18px;height:18px}
/* O avatar no rodapé: sem nome ao lado, a borda superior e o padding de 12px
   sobravam. */
.menu.dobrado .menu-eu{border-top:0;padding:6px 0 0;margin-top:4px}
.menu.dobrado .menu-pe{gap:4px}
/* O contador da Esteira continua: é o número que faz alguém abrir a tela.
   Vira bolinha âmbar no canto do ícone em vez de texto na linha.

   10/08 (Alan): "estão feios quando a barra encolhe" — cada ícone virava um
   glifo solto, sem contorno nenhum, e só a Busca/Adotar tinham caixa própria.
   Ficava inconsistente: alguns pareciam botão, a maioria não. Agora todo
   item ganha a MESMA caixa (fundo fraco em repouso, mais forte no hover/on),
   igual em todos — é isso que lê como "botão" numa coluna de ícones. */
/* `justify-content:flex-start` e NÃO `center`, com o ícone centrado por padding:
   `justify-content` não interpola — de `center` para `flex-start` o ícone salta
   de lugar num quadro, e era metade do "corte" que o Alan viu em 21/08. Mantendo
   flex-start nos dois estados, o que muda entre eles é só o `padding-left`, que
   É animável. 9px = (38px de caixa - 20px de ícone) / 2, o mesmo centro visual
   que o `center` dava. */
.menu.dobrado .menu-item{position:relative;justify-content:flex-start;
  padding:9px 0 9px 9px;margin:0 1px;border-radius:8px;
  background:rgba(255,255,255,.05)}
.menu.dobrado .menu-item:hover{background:rgba(255,255,255,.1)}
.menu.dobrado .menu-item.on{background:rgba(255,255,255,.17)}
.menu.dobrado .menu-breve{background:rgba(255,255,255,.02)}
.menu.dobrado .menu-num[data-contador]{position:absolute;top:1px;right:4px;
  min-width:15px;padding:1px 3px;border-radius:20px;text-align:center;
  background:var(--acento);color:var(--acento-tinta);font-size:9px;font-weight:700;
  box-shadow:0 0 0 2px var(--menu)}
/* Mesma razão do `.menu-item` acima: alinhamento fixo em flex-start nos dois
   estados, e quem centra o ícone é o padding — que interpola. */
.menu.dobrado .menu-marca,
.menu.dobrado .menu-busca,
.menu.dobrado .menu-adotar,
.menu.dobrado .menu-eu{justify-content:flex-start;padding-left:8px;padding-right:0}
/* Recolhido o "+ Adotar edital" é só o "+" — o âmbar sozinho já o identifica. */
.menu.dobrado .menu-adotar .menu-ic{font-size:17px;font-weight:600}
.menu.dobrado .menu-dobra{align-self:center;margin-right:0}
}

/* O esqueleto: menu à esquerda, tela à direita. `min-width:0` no conteúdo é o
   que impede uma tabela larga de empurrar o menu para fora da janela — sem
   ele, um item de edital com nome longo espreme o menu.

   Coluna da direita é `.tela` (classe) e não `<main>` (elemento): `buscar/` já
   tem um `<main>` seu por dentro, e `<main>` dentro de `<main>` é HTML inválido
   — o leitor de tela passa a anunciar dois conteúdos principais. */
.app-v3{display:flex;align-items:stretch;min-height:100vh;background:var(--fundo)}
.app-v3>.tela{flex:1;min-width:0}

/* Menu não vai para o papel. `pregao/` e `disputa/` imprimem. */
@media print{.menu{display:none!important}}

/* Em tela estreita o menu vira uma faixa no topo, rolando na horizontal, em vez
   de sumir: se sumisse, `config/` e `adotar/` ficariam sem saída nenhuma — de lá
   não há outro caminho para tela alguma. O mesmo 980px que `gestao/` e
   `disputa/` já usam. */
@media (max-width:980px){
  .app-v3{flex-direction:column}
  .menu{width:auto;height:auto;flex-direction:row;align-items:center;gap:12px;
        padding:10px 12px;overflow-x:auto;position:static}
  .menu-nav,.menu-pe{flex-direction:row;align-items:center;margin-top:0}
  .menu-grupo,.menu-eu-sub,.menu-busca,.menu-num{display:none}
  /* O botão de recolher some por completo: "recolher para só ícones" é um
     conceito de coluna, e a faixa horizontal não tem coluna para recolher —
     ela já rola sozinha. Sem isto o botão ficava torto aqui (seu
     `align-self:flex-end` + margem negativa são calibrados para a coluna,
     ver comentário no bloco `MENU RECOLHIDO` acima) e, se clicado, encolhia
     a faixa inteira para 56px — ver o mesmo comentário. */
  .menu-dobra{display:none}
  .menu-nav .menu-item+.menu-grupo{padding-top:0}
  .menu-item,.menu-marca,.menu-adotar,.menu-eu,.menu-sair{white-space:nowrap;flex:none}
  .menu-adotar{margin-top:0}
  .menu-eu{border-top:0;padding:0;margin-top:0}
}

/* Tabela larga nunca empurra a página para o lado — rola dentro de si. */
.rolar-x{overflow-x:auto}

/* Faixa de abas rolável em tela estreita: mostra uma barrinha de rolagem FINA
   em vez de escondida — some com ela tira a única pista de que há mais abas
   fora da tela (achado ao planejar o mobile, 02/09-B: `pregao/`, `disputa/`
   escondiam a barra com `scrollbar-width:none`). */
.abas-rolar{overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.abas-rolar::-webkit-scrollbar{height:5px}
.abas-rolar::-webkit-scrollbar-thumb{background:var(--linha3);border-radius:3px}

/* ── Lista responsiva: "tabela vira cartão" abaixo de 700px ──────────────────
   Pedido do Alan (02/09-B): a plataforma "funcionar como outras plataformas"
   em celular. Várias telas (radar/, biblioteca/, itens/) desenham resultado
   como uma linha de colunas de largura fixa dentro de `.rolar-x` — em celular
   isso é só scroll horizontal infinito, sem fim visível. Primeiro padrão
   COMPARTILHADO para o caso oposto: o desktop continua sendo a linha de
   colunas de sempre (nada muda ali); abaixo de 700px cada linha vira um
   cartão empilhado, com o rótulo da coluna na frente do valor.
   Como usar: o container leva `.lc`, cada linha `.lc-linha`, o cabeçalho de
   coluna (se existir) `.lc-cab` — ele só faz sentido no desktop, some sozinho
   aqui embaixo — e cada campo dentro da linha leva `data-rot="RÓTULO"` (o
   nome da coluna que ele representa). Não depende de `<table>`: funciona
   tanto em `<tr>/<td>` quanto nas linhas `display:flex` que essas telas já
   usam, porque só liga em cima do que já está lá (`display:flex!important`
   na linha, sem mexer no HTML de cada campo). */
@media (max-width:700px){
  /* `!important`: o cabeçalho de coluna quase sempre vem com `style="display:
     flex"` inline (é como as telas montam essas linhas) — sem isso o inline
     vence e o cabeçalho não some. */
  .lc-cab{display:none!important}
  .lc-linha{display:flex!important;flex-direction:column;gap:6px;
    border:1px solid var(--linha2);border-radius:10px;background:var(--painel);
    padding:12px 14px;margin-bottom:10px;width:auto!important;min-width:0!important}
  .lc-linha>*{width:auto!important;flex:none!important;min-width:0!important;
    white-space:normal!important}
  .lc-linha [data-rot]{display:flex;justify-content:space-between;align-items:baseline;
    gap:10px}
  .lc-linha [data-rot]::before{content:attr(data-rot);font:600 9.5px/1.4 var(--mono);
    letter-spacing:.06em;text-transform:uppercase;color:var(--tinta4);flex:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── Qualificação da IA — resultado, compartilhado entre radar/ (antes de
   adotar) e qualificar/ (Ferramentas, avulso) (31/08). O CONTAINER que
   embrulha isto (`.mqual` no Radar, um modal; outra coisa em qualificar/)
   fica em cada tela — só o miolo do resultado é o mesmo HTML
   (`LF.montarQualHtml`, app.js) e por isso o mesmo CSS. */
.mq-topo{font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.08em;
  text-transform:uppercase;color:#8A6A12;margin-bottom:8px;cursor:pointer;
  display:flex;align-items:baseline;gap:8px}
.mq-topo b{flex:none;white-space:nowrap}
/* O nome do arquivo pode ser enorme (o PNCP não abrevia) — sem isto ele
   empurrava "QUALIFICAÇÃO DA IA" pra quebrar em duas linhas e ainda vazava
   pro lado, com barra de rolagem horizontal no meio do modal. Agora corta
   com "…" e nunca estica a linha. */
.mq-topo span{font-weight:400;text-transform:none;letter-spacing:0;color:#8A8578;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-seta{font:500 10px/1 'JetBrains Mono',monospace;text-transform:none;
  letter-spacing:0;color:#8A6A12;white-space:nowrap;flex:none}
.mq-seta:hover{opacity:.7}
/* Cor por campo (Alan, 10/08): era tudo cinza/âmbar uniforme e ficava sem
   destaque nenhum — a cor de cada linha vem de `corQual()` (app.js). */
.mq-l{display:flex;gap:10px;font-size:12.5px;line-height:1.6;padding:6px 10px;
  margin:2px 0;border-radius:6px;border-left:3px solid var(--cor-campo, transparent);
  background:color-mix(in srgb, var(--cor-campo, transparent) 6%, transparent)}
.mq-l b{font:600 10.5px/1.7 'JetBrains Mono',monospace;color:var(--cor-campo, #8A8578);
  text-transform:uppercase;width:104px;flex:none}
.mq-l span{flex:1;min-width:0;color:#1A1916}
/* "segundo o PNCP": a resposta ainda não passou pelo edital (sem qualificação
   ou qualificação salva antes do campo existir) */
.mq-fonte{font-size:11px;color:#8A8578;margin-left:7px}
/* o edital e o PNCP discordam — vale conferir antes de montar a proposta */
.mq-diverge{display:inline-block;margin-left:8px;font-size:11.5px;
  background:#FBF3E0;border:1px solid #EFE1BC;color:#8A6A12;
  border-radius:6px;padding:2px 8px;cursor:help}
.mq-espera{font-size:12.5px;color:#6B665C}
.mq-erro{font-size:12.5px;color:#8E3524}
.mq-alerta{background:#FBF3E0;border:1px solid #EFE1BC;color:#6B5410;border-radius:8px;
  padding:8px 11px;font-size:12.5px;margin-bottom:10px}

/* Itens conferidos com o edital (Alan, 12/08) — só aparece com FOCO marcado */
.mq-itens{margin-top:8px;padding-top:8px;border-top:1px solid #EFEAE0}
.mq-itens-tit{font:600 10.5px/1.4 'JetBrains Mono',monospace;letter-spacing:.06em;
  text-transform:uppercase;color:#8A8578;margin-bottom:6px}
.mq-item-l{font-size:12.5px;line-height:1.6;padding:5px 8px;margin:2px 0;
  border-radius:6px;display:flex;gap:8px}
.mq-item-l b{font:600 11px/1.6 'JetBrains Mono',monospace;color:#8A8578;flex:none}
.mq-item-l span{color:#1A1916;flex:1;min-width:0}
.mq-item-l.diverge{background:#FBF3E0}

@media(max-width:640px){
  .mq-l{flex-direction:column;gap:2px}
  .mq-l b{width:auto}
}