/* ============================================================================
   LICIEX — a identidade visual, num lugar só
   ============================================================================
   PROPOSTA A "Tinta + Âmbar" (Alan, 14/10/2026), escolhida sobre a página
   docs/design/proposta-visual.html, que tem a prévia de cada tela. Substitui o
   tema C3 "Faixas escuras" de 30/09. As quatro regras:
     1. uma cor de ação — o botão principal é PRETO (tinta); o âmbar da marca
        fica no logo, na tela aberta do menu e no foco;
     2. status é sempre o mesmo selo — fundo clarinho, ponto e texto;
     3. poucas medidas — cantos 6/10/14, duas sombras, espaço de 4 em 4;
     4. o número primeiro.
   Chão cinza-gelo, cartões brancos, menu BRANCO, letra Inter.

   O tema claro é o `:root` daqui; o escuro (`html.escuro`) é gerado pelo
   `tema_escuro.py` no bloco CORES-GERADAS e ainda não foi redesenhado.

   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 telas mapeiam estes nomes para os locais
   delas num `:root{}` no topo do próprio arquivo, e as cores fixas que elas
   ainda têm passam pelo bloco CORES-GERADAS (que converte o bege antigo em
   cinza-frio, ver `claro()` no tema_escuro.py).
   ========================================================================== */

/* ── Fontes ────────────────────────────────────────────────────────────────
   Só latin e latin-ext: cirílico, grego e vietnamita nenhum edital usa.
   Inter (texto e números, 14/10/2026) no lugar da Instrument Sans: lê melhor
   em 13px e tem algarismos de largura fixa (`tabular-nums`), então a coluna de
   valores alinha sem precisar de fonte mono. A mono saiu de vez: `--mono` e o
   nome 'JetBrains Mono' (escrito direto em várias telas) apontam para a Inter
   com algarismos fixos — rótulo, número e código ficam na mesma letra. */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url('fontes/inter-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:'Inter'; font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url('fontes/inter-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/inter-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/inter-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;
}
/* Telas que ainda escrevem a fonte antiga pelo nome caem na nova. */
@font-face{
  font-family:'Instrument Sans'; font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url('fontes/inter-latin.woff2') format('woff2');
}

/* ── Tokens ────────────────────────────────────────────────────────────────
   Proposta A, 14/10/2026. Os NOMES são os de sempre (as telas apontam para
   eles); os valores mudaram. */
:root{
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --acento:#F0B429;         /* âmbar da marca: logo, tela aberta, foco */
  --acento-forte:#E0A419;   /* o hover do âmbar */
  --acento-tinta:#111318;   /* o que se escreve SOBRE o âmbar */
  --link:#92400E;

  /* A AÇÃO: o botão principal. Preto-tinta desde 14/10 (era o âmbar). */
  --acao:#111318;
  --acao-forte:#2A2E36;     /* o hover */
  --acao-tinta:#FFFFFF;

  --fundo:#F6F7F9;          /* o chão da página — cinza-gelo */
  --painel:#FFFFFF;         /* cartões, tabelas */
  --painel2:#F9FAFB;        /* cabeçalho de cartão, rodapé de janela */
  --painel3:#F1F3F6;        /* pílula muda, trilho de segmento */

  /* Campo de digitar: borda cinza, âmbar só no FOCO. */
  --campo-borda:#D1D5DB;
  --foco:0 0 0 3px rgba(240,180,41,.30);
  /* Tabela de dados: cabeçalho CLARO com rótulo cinza (era a faixa grafite
     do C3), sem zebra — a divisória fina separa as linhas. */
  --faixa:#F6F7F9;
  --faixa-tinta:#5B6270;
  --zebra:#FFFFFF;
  /* O painel de decisão do pregão ("Disputa foi / Para avançar"): era o único
     bloco grafite do cartão; vira cartão branco como os outros. */
  --decisao:#FFFFFF;
  --decisao-campo:#F6F7F9;
  --decisao-borda:#E5E7EB;
  --decisao-rotulo:#8A919E;
  --decisao-apoio:#5B6270;
  /* O cabeçalho do pregão: branco com borda, como todo cartão. */
  --cabecalho:#FFFFFF;
  --cabecalho-borda:#E5E7EB;

  --linha:#EEF0F3;          /* divisor entre linhas de tabela */
  --linha2:#E5E7EB;         /* borda de cartão */
  --linha3:#D1D5DB;         /* borda de botão, borda em foco */

  --tinta:#111318;          /* texto principal */
  --tinta2:#3D434F;
  --tinta3:#5B6270;
  --tinta4:#8A919E;         /* rótulos */
  --tinta5:#9CA3AF;         /* o mais apagado que ainda se lê */

  /* O MENU lateral (e as barras do celular): BRANCO desde 14/10, ícones cinza
     de traço fino, sem cor por seção. A tela aberta tem fundo cinza-gelo e o
     filete âmbar. */
  --nav-fundo:#FFFFFF;
  --nav-borda:#E8EAEE;
  --nav-tinta:#111318;      /* tela aberta, nome da pessoa */
  --nav-tinta2:#5B6270;     /* item em repouso */
  --nav-tinta3:#8A919E;     /* nome do grupo, atalhos */
  --nav-hover:#F3F4F6;
  --nav-on:#EEF0F3;

  /* SUPERFÍCIE ESCURA de marca — o lado esquerdo do login, o aviso de
     instalar o app, o cabeçalho de impressão. Não é mais o menu (que ficou
     branco); manteve o nome para as telas que já apontam para ele. */
  --menu:#111318;
  --menu2:#262A33;          /* avatar sobre o escuro */
  --menu-tinta:#ECEEF2;     /* texto forte no escuro */
  --menu-tinta2:#A0A7B4;
  --menu-tinta3:#8A919E;
  --menu-tinta4:#6E7584;    /* o mais apagado do escuro */
  --menu-eyebrow:#6E7584;

  /* Semânticas — separadas do acento de propósito: "ganho" não pode virar
     âmbar quando alguém trocar a cor da marca. Par forte/fraco: o forte no
     número e no ponto do selo, o fundo clarinho atrás do selo. */
  --ok:#15803D;    --ok-forte:#166534;
  --ok-fundo:#ECFDF3;   --ok-linha:#C6EFD6;
  --ruim:#DC2626;  --ruim-forte:#B91C1C;
  --ruim-fundo:#FEF2F2; --ruim-linha:#FBD5D5;
  --aviso:#B45309; --aviso-forte:#92400E;
  --aviso-fundo:#FFF7E6; --aviso-linha:#FBE3B4;

  /* As fases da esteira. Ficam como estavam (06/10): as telas repetem estas
     cores em listas próprias (FASES de gestao/ e banco/, COR_FASE de pregao/),
     e elas mudam juntas quando a Esteira for redesenhada (etapa 5). */
  --fase-resumo:#8B6B3D;
  --fase-precificacao:#2C5D9B;
  --fase-disputa:#5B429A;
  --fase-habilitacao:#0E7C86;
  --fase-homologado:#8E4A7E;
  --fase-contrato:#157F52;
  --fase-empenho:#7A7A18;
  --fase-finalizado:#7A756A;
  --fase-reservado:#8A8578;
  --fase-temporario:#5F6B72;
  --fase-exito:#12603F;
  --fase-fora:#8A8578;

  /* As 3 zonas da escada de preço (frontend/disputa/): abaixo do piso é ruim,
     aperto é aviso, cheio é ok. */
  --zona-abaixo:#F1A3A3;
  --zona-aperto:#F5C25B;
  --zona-cheio:#86C9A0;

  --sombra:0 1px 2px rgba(16,24,40,.05);
  --sombra-alta:0 24px 48px rgba(16,24,40,.18);   /* janela */
}

/* >>> CORES-GERADAS (tema_escuro.py — não editar à mão) */
:root{
  --b-0C4A30:#14532D;
  --b-12603F:#166534;
  --b-157F52:#15803D;
  --b-16211D:#111318;
  --b-1E2417:#1E2229;
  --b-1F4A3D:#1F4A3D;
  --b-22322C:#2A2E36;
  --b-26241F:#111318;
  --b-2C5D9B:#2C5D9B;
  --b-322F28:#1D2027;
  --b-4C9A6A:#4C9A6A;
  --b-555047:#4C515A;
  --b-5C574E:#535861;
  --b-5E5850:#545962;
  --b-8E3524:#B91C1C;
  --b-A39C8E:#999DA5;
  --b-A87B2E:#B45309;
  --b-B23A26:#DC2626;
  --b-B98A32:#B45309;
  --b-C9563F:#DC2626;
  --b-DFDACE:#D8DADF;
  --b-E4E0D7:#E7EAEE;
  --b-E7E3D9:#EAECF0;
  --b-E8D896:#E8D896;
  --b-E9EFF8:#EFF6FF;
  --b-E9F2EC:#ECFDF3;
  --b-EDEAE1:#EEF0F4;
  --b-EEEAD6:#EEEAD6;
  --b-EFECE3:#F0F2F5;
  --b-EFECE4:#F0F2F5;
  --b-F0EDE5:#F1F3F6;
  --b-F1EFE8:#F2F4F7;
  --b-F2EFE8:#F2F4F7;
  --b-F3D6CE:#FBD5D5;
  --b-F3F0E8:#F3F5F8;
  --b-F3F1EB:#F4F5F9;
  --b-F4F1E9:#F4F5F9;
  --b-F4F1EA:#F4F5F9;
  --b-F4F2EC:#F4F6F9;
  --b-F4F7FB:#F5F8FF;
  --b-F5EEDC:#F5EEDC;
  --b-F5F2EA:#F4F6F9;
  --b-F6EECD:#F6EECD;
  --b-F7F6F1:#F7F9FC;
  --b-FAF8EF:#F8FAFD;
  --b-FAF8F2:#F9FAFD;
  --b-FAF9F6:#F9FBFE;
  --b-FBEAE5:#FEF2F2;
  --b-FBF3DE:#FBF3DE;
  --b-FBF3E0:#FFF7E6;
  --b-FBF9F3:#F9FBFE;
  --b-FBF9F4:#F9FBFE;
  --b-FBFAF6:#FAFCFF;
  --b-FCE9A8:#FCE9A8;
  --b-FCFBF8:#FBFCFF;
  --b-FFF8E4:#FFF8E4;
  --b-FFF8E6:#FFF8E6;
  --b-FFF8F5:#FAFBFE;
  --b-FFFCF5:#FCFDFF;
  --b-FFFDF3:#FCFDFF;
  --b-FFFFFF:#FFFFFF;
  --l-12603F:#166534;
  --l-157F52:#15803D;
  --l-16211D:#111318;
  --l-1B1B1B:#171B23;
  --l-1C1A16:#15171C;
  --l-1E2417:#1E2229;
  --l-5A544A:#50555E;
  --l-5C574E:#535861;
  --l-6B665C:#626770;
  --l-8E3524:#B91C1C;
  --l-A87B2E:#B45309;
  --l-B23A26:#DC2626;
  --l-B9B199:#AEB1B9;
  --l-C08B7E:#C08B7E;
  --l-C3CDC0:#C6CACF;
  --l-C9A227:#C9A227;
  --l-C9BE9E:#C9BE9E;
  --l-CFC9B2:#C6C9CF;
  --l-CFC9BC:#C7CAD0;
  --l-D2CDBF:#CACDD3;
  --l-D5CFB8:#CCCFD4;
  --l-D6D1C5:#CFD1D7;
  --l-D8C49A:#D8C49A;
  --l-D8D2BC:#CFD2D7;
  --l-D9922A:#D9922A;
  --l-D9A294:#D9A294;
  --l-DCD5C2:#D3D5DB;
  --l-DCE6F2:#E3E5E9;
  --l-DEDED8:#DBDEE2;
  --l-DFDACE:#D8DADF;
  --l-E0BDB2:#E0BDB2;
  --l-E2DDC9:#DADDE2;
  --l-E2DED4:#DCDEE3;
  --l-E3B9AE:#E3B9AE;
  --l-E3CFA0:#E3CFA0;
  --l-E4E0D7:#DEE0E5;
  --l-E7E2D8:#E0E3E7;
  --l-E8B4A0:#E8B4A0;
  --l-E8DCB8:#E8DCB8;
  --l-E9D9A8:#E9D9A8;
  --l-EADFC4:#EADFC4;
  --l-EDE9E0:#E7E9ED;
  --l-EFE1BC:#FBE3B4;
  --l-EFEAE0:#E8EBEF;
  --l-EFECE4:#EAECF0;
  --l-F0D2C9:#FBD5D5;
  --l-F0D9CF:#F0D9CF;
  --l-F0DAD3:#F0DAD3;
  --l-F0EDE5:#EBEDF1;
  --l-F2EFE8:#EDEFF3;
  --t-12101A:#12101A;
  --t-12603F:#166534;
  --t-157F52:#15803D;
  --t-16211D:#111318;
  --t-1A1916:#111318;
  --t-1B1B1B:#171B23;
  --t-1E2417:#1E2229;
  --t-26241F:#111318;
  --t-2C5D9B:#2C5D9B;
  --t-2F6B47:#2F6B47;
  --t-3A362D:#32363F;
  --t-3A362E:#32373F;
  --t-3A3A22:#3A3A22;
  --t-3D3A33:#363A43;
  --t-444444:#40444D;
  --t-4A3D08:#4A3D08;
  --t-4A463D:#42464F;
  --t-4A463E:#42474F;
  --t-4A7040:#4A7040;
  --t-4D5343:#4C5059;
  --t-555555:#51555E;
  --t-5A5548:#51555F;
  --t-5A5648:#51565F;
  --t-5A5A66:#575B65;
  --t-5C574C:#535861;
  --t-5D6351:#5B606A;
  --t-5E584D:#545962;
  --t-666666:#616670;
  --t-6B5210:#6B5210;
  --t-6B5410:#6B5410;
  --t-6B665C:#626770;
  --t-6B6A4C:#6B6A4C;
  --t-6D7360:#6B707A;
  --t-7A5A10:#7A5A10;
  --t-7A756A:#71767F;
  --t-8A5A12:#8A5A12;
  --t-8A6A12:#92400E;
  --t-8A6D1B:#8A6D1B;
  --t-8A7420:#8A7420;
  --t-8A8577:#80858F;
  --t-8A8578:#81858F;
  --t-8E3524:#B91C1C;
  --t-8FD9B0:#8FD9B0;
  --t-9A8A63:#9A8A63;
  --t-9A9384:#8F949D;
  --t-9B3E2C:#9B3E2C;
  --t-9B958A:#91969F;
  --t-9C8A5E:#9C8A5E;
  --t-A39C8E:#999DA5;
  --t-A8AD97:#A6AAB2;
  --t-B23A26:#DC2626;
  --t-B4503A:#B4503A;
  --t-B4AE9E:#ABAEB6;
  --t-B5AEA0:#ABAFB6;
  --t-B8B2A4:#AFB3BA;
  --t-C0227A:#C0227A;
  --t-C8C3B6:#C0C3CA;
  --t-C9C3B4:#C0C3CA;
  --t-C9C4B6:#C1C4CA;
  --t-C9C4B8:#C1C4CB;
  --t-D8E0DA:#DBDEE2;
  --t-E2C07A:#E2C07A;
  --t-E8EAE6:#E7E9ED;
  --t-F08C7A:#F08C7A;
  --t-F0A896:#F0A896;
  --t-F5F3EE:#F1F3F7;
  --t-FAF8EF:#F6F8FB;
  --t-FFFFFF:#FFFFFF;
}
@media screen{
html.escuro{
  color-scheme:dark;
  --link:#EAA17E;
  --campo-borda:#3E4246;
  --linha:#303134;
  --linha2:#35363A;
  --linha3:#3E4246;
  --tinta:#E5E8EE;
  --tinta2:#C0C6D2;
  --tinta3:#ABB1BD;
  --tinta4:#8E939E;
  --tinta5:#838992;
  --ok:#76BE86;
  --ok-forte:#90CA9E;
  --ok-fundo:#17241D;
  --ok-linha:#20412F;
  --ruim:#FA7064;
  --ruim-forte:#FF8578;
  --ruim-fundo:#281F20;
  --ruim-linha:#4F3232;
  --aviso:#E08E61;
  --aviso-forte:#EAA17E;
  --aviso-fundo:#262014;
  --aviso-linha:#433516;
  --fundo:#161512;
  --painel:#1F1D19;
  --painel2:#272521;
  --painel3:#2C2A25;
  --zebra:#23211D;
  --cabecalho:#2A2722;
  --cabecalho-borda:#3E3A32;
  --menu:#100F0D;
  --menu2:#2E2B26;
  --faixa:#2C2A25;
  --faixa-tinta:#CFCAC0;
  --decisao:#3A3731;
  --decisao-campo:#2E2B26;
  --decisao-borda:#55504A;
  --decisao-rotulo:#A9B6AD;
  --decisao-apoio:#BAC4BC;
  --acao:#ECEEF2;
  --acao-forte:#FFFFFF;
  --acao-tinta:#111318;
  --nav-fundo:#100F0D;
  --nav-borda:#24221E;
  --nav-tinta:#F1F0EC;
  --nav-tinta2:#A9A69E;
  --nav-tinta3:#76736C;
  --nav-hover:rgba(255,255,255,.06);
  --nav-on:rgba(255,255,255,.12);
  --sombra:0 1px 3px rgba(0,0,0,.45);
  --sombra-alta:0 24px 60px rgba(0,0,0,.65);
  --foco:0 0 0 3px rgba(240,180,41,.35);
  --b-0C4A30:#3D5146;
  --b-12603F:#005636;
  --b-157F52:#007246;
  --b-16211D:#373C3A;
  --b-1E2417:#393C36;
  --b-1F4A3D:#43524D;
  --b-22322C:#363C3A;
  --b-26241F:#3B3A38;
  --b-2C5D9B:#21528F;
  --b-322F28:#3D3C39;
  --b-4C9A6A:#3C8B5C;
  --b-555047:#4C473E;
  --b-5C574E:#524D44;
  --b-5E5850:#544E46;
  --b-8E3524:#822A19;
  --b-A39C8E:#928B7D;
  --b-A87B2E:#996C1B;
  --b-B23A26:#A42C18;
  --b-B98A32:#A87A1D;
  --b-C9563F:#B94731;
  --b-DFDACE:#302C23;
  --b-E4E0D7:#2D2A23;
  --b-E7E3D9:#2C2921;
  --b-E8D896:#342E16;
  --b-E9EFF8:#21252B;
  --b-E9F2EC:#1F2622;
  --b-EDEAE1:#292620;
  --b-EEEAD6:#2A2717;
  --b-EFECE3:#2C2A25;
  --b-EFECE4:#28251F;
  --b-F0EDE5:#27251F;
  --b-F1EFE8:#26241F;
  --b-F2EFE8:#26241F;
  --b-F3D6CE:#3B2520;
  --b-F3F0E8:#26241E;
  --b-F3F1EB:#272521;
  --b-F4F1E9:#26231E;
  --b-F4F1EA:#25231E;
  --b-F4F2EC:#161512;
  --b-F4F7FB:#1F2124;
  --b-F5EEDC:#292416;
  --b-F5F2EA:#25231D;
  --b-F6EECD:#2B250C;
  --b-F7F6F1:#23211D;
  --b-FAF8EF:#22211A;
  --b-FAF8F2:#24221E;
  --b-FAF9F6:#21201E;
  --b-FBEAE5:#2E211E;
  --b-FBF3DE:#282212;
  --b-FBF3E0:#282214;
  --b-FBF9F3:#22201C;
  --b-FBF9F4:#22201D;
  --b-FBFAF6:#22201C;
  --b-FCE9A8:#2D260E;
  --b-FCFBF8:#20201D;
  --b-FFF8E4:#262011;
  --b-FFF8E6:#252013;
  --b-FFF8F5:#241F1D;
  --b-FFFCF5:#211F1A;
  --b-FFFDF3:#211F18;
  --b-FFFFFF:#1F1D19;
  --l-12603F:#186443;
  --l-157F52:#157F52;
  --l-16211D:#4C5954;
  --l-1B1B1B:#555555;
  --l-1C1A16:#575550;
  --l-1E2417:#515849;
  --l-5A544A:#5A544A;
  --l-5C574E:#5C574E;
  --l-6B665C:#6B665C;
  --l-8E3524:#8E3524;
  --l-A87B2E:#A87B2E;
  --l-B23A26:#B23A26;
  --l-B9B199:#5F5842;
  --l-C08B7E:#C08B7E;
  --l-C3CDC0:#434B40;
  --l-C9A227:#6A5E3D;
  --l-C9BE9E:#584F32;
  --l-CFC9B2:#4E4935;
  --l-CFC9BC:#4D483D;
  --l-D2CDBF:#4A463A;
  --l-D5CFB8:#4A4532;
  --l-D6D1C5:#474339;
  --l-D8C49A:#57482A;
  --l-D8D2BC:#484331;
  --l-D9922A:#D9922A;
  --l-D9A294:#714E45;
  --l-DCD5C2:#464131;
  --l-DCE6F2:#313942;
  --l-DEDED8:#3C3C38;
  --l-DFDACE:#423E34;
  --l-E0BDB2:#5F4339;
  --l-E2DDC9:#413D2C;
  --l-E2DED4:#3F3B33;
  --l-E3B9AE:#644239;
  --l-E3CFA0:#4F4223;
  --l-E4E0D7:#3D3A33;
  --l-E7E2D8:#3D3931;
  --l-E8B4A0:#654438;
  --l-E8DCB8:#463C1D;
  --l-E9D9A8:#483E1E;
  --l-EADFC4:#433A23;
  --l-EDE9E0:#38352E;
  --l-EFE1BC:#443819;
  --l-EFEAE0:#38342C;
  --l-EFECE4:#36332D;
  --l-F0D2C9:#4F3831;
  --l-F0D9CF:#49372F;
  --l-F0DAD3:#473631;
  --l-F0EDE5:#35332D;
  --l-F2EFE8:#34312C;
  --t-12101A:#E8E6F2;
  --t-12603F:#93CBAC;
  --t-157F52:#75BD95;
  --t-16211D:#DAE6E1;
  --t-1A1916:#E8E7E4;
  --t-1B1B1B:#E5E5E5;
  --t-1E2417:#DCE3D5;
  --t-26241F:#E0DED8;
  --t-2C5D9B:#8DB7EE;
  --t-2F6B47:#91C2A1;
  --t-3A362D:#D3CFC6;
  --t-3A362E:#D3CFC7;
  --t-3A3A22:#CFD0B9;
  --t-3D3A33:#CFCCC5;
  --t-444444:#C5C5C5;
  --t-4A3D08:#D5CAA1;
  --t-4A463D:#C7C3BB;
  --t-4A463E:#C7C3BC;
  --t-4A7040:#99BA91;
  --t-4D5343:#BABFB1;
  --t-555555:#B9B9B9;
  --t-5A5548:#BDB9AD;
  --t-5A5648:#BCB9AC;
  --t-5A5A66:#B4B4BF;
  --t-5C574C:#BCB7AD;
  --t-5D6351:#AFB5A5;
  --t-5E584D:#BCB6AC;
  --t-666666:#AEAEAE;
  --t-6B5210:#CCB686;
  --t-6B5410:#CAB685;
  --t-6B665C:#B1ADA4;
  --t-6B6A4C:#AFAE95;
  --t-6D7360:#A5AA9A;
  --t-7A5A10:#CAAE7A;
  --t-7A756A:#A8A39A;
  --t-8A5A12:#D0A674;
  --t-8A6A12:#BFA569;
  --t-8A6D1B:#BCA46A;
  --t-8A7420:#B5A367;
  --t-8A8577:#9E9A8E;
  --t-8A8578:#9E9A8F;
  --t-8E3524:#F2A190;
  --t-8FD9B0:#8FD9B0;
  --t-9A8A63:#A29576;
  --t-9A9384:#969185;
  --t-9B3E2C:#EC9A88;
  --t-9B958A:#948F87;
  --t-9C8A5E:#A39572;
  --t-A39C8E:#918B80;
  --t-A8AD97:#A8AD97;
  --t-B23A26:#F18C78;
  --t-B4503A:#E18C78;
  --t-B4AE9E:#B4AE9E;
  --t-B5AEA0:#B5AEA0;
  --t-B8B2A4:#B8B2A4;
  --t-C0227A:#F378B1;
  --t-C8C3B6:#C8C3B6;
  --t-C9C3B4:#C9C3B4;
  --t-C9C4B6:#C9C4B6;
  --t-C9C4B8:#C9C4B8;
  --t-D8E0DA:#D8E0DA;
  --t-E2C07A:#E2C07A;
  --t-E8EAE6:#E8EAE6;
  --t-F08C7A:#F08C7A;
  --t-F0A896:#F0A896;
  --t-F5F3EE:#F5F3EE;
  --t-FAF8EF:#FAF8EF;
  --t-FFFFFF:#FFFFFF;
}
}
/* <<< CORES-GERADAS */

/* ── 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: polegar cinza 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}
/* Algarismos de largura fixa só onde números se comparam: na Inter o mesmo
   recurso alarga o hífen ("22-10-26" virava "22 - 10 - 26" nos títulos). */
input,.num{font-variant-numeric:tabular-nums}

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

/* Rótulo de seção. Desde 14/10 em letra normal, cinza, 12px (era o versalete
   mono de 9,5px em caixa alta, difícil de ler).
   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(--sans);font-size:12px;font-weight:500;
         letter-spacing:0;text-transform:none;color:var(--tinta3)}

/* Botões. Três tipos (14/10): principal PRETO (`.bt`, e o `.escuro`, que
   era o grafite de "Definir proposta" e agora é o mesmo), secundário branco
   com borda (`.fantasma`) e discreto (só texto, de cada tela). */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:7px;
    white-space:nowrap;height:36px;padding:0 15px;border:0;border-radius:10px;
    font-size:13px;font-weight:600;cursor:pointer;
    background:var(--acao);color:var(--acao-tinta)}
.bt:hover{background:var(--acao-forte)}
.bt:disabled{opacity:.4;cursor:not-allowed;background:var(--acao)}
.bt.fantasma{background:var(--painel);border:1px solid var(--linha3);color:var(--tinta)}
.bt.fantasma:hover{background:var(--painel2);border-color:var(--tinta4);color:var(--tinta)}
.bt.escuro{background:var(--acao);color:var(--acao-tinta)}
.bt.escuro:hover{background:var(--acao-forte)}
.bt.pequeno{height:30px;padding:0 12px;font-size:12.5px;border-radius:8px}

/* Campos */
.campo{width:100%;height:36px;background:var(--b-FFFFFF);
       border:1px solid var(--campo-borda);border-radius:10px;padding:0 12px;
       font-size:13px;outline:none}
.campo:focus{border-color:var(--acento-forte);box-shadow:var(--foco)}
textarea.campo{height:auto;min-height:56px;padding:9px 11px;line-height:1.5;resize:vertical}

/* Cartão */
/* Branco sobre o cinza-gelo, borda fina e sombra quase nula; canto 14. */
.cartao{background:var(--painel);border:1px solid var(--linha2);border-radius:14px;
        box-shadow:var(--sombra)}

/* Selo de estado (14/10): fundo clarinho, ponto na cor e texto normal —
   o MESMO selo em todas as telas. Era um versalete mono sem ponto. */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);
      font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;
      border-radius:6px;padding:3px 8px;line-height:1.35}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.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(--sans);font-size:12.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. */
/* Compacto desde 06/10/2026 (Alan, com print: "essa barra lateral está à toa,
   tem que aparecer tudo sem ter que ficar descendo"). Os 13 itens rolavam num
   notebook. Padding, `gap`, altura dos itens e respiro entre grupos encolheram
   juntos; abaixo de 820px de altura aperta mais um degrau (fim deste bloco).
   Se o menu ganhar item, confira de novo numa janela de 768px. */
.menu{width:200px;flex:none;background:var(--nav-fundo);padding:14px 10px 10px;
      border-right:1px solid var(--nav-borda);
      display:flex;flex-direction:column;gap:14px;
      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:.08em;color:var(--nav-tinta)}
.menu-marca:hover{color:var(--nav-tinta)}
/* O logo liciex (28/10/2026, Alan; antes o monograma AL de 01/09): três
   barras de ponta redonda, a do meio na paleta, e o nome com o "ex" na
   mesma paleta. Feito em HTML e não em <img> para as barras de fora
   seguirem a paleta do tema e o tamanho seguir a fonte de onde ele está. As medidas são as do desenho: barras de
   40, 143 e 102 de altura, 40 de largura e 13 de vão. O favicon e os ícones
   do app são o mesmo desenho em quadrado preto (icone.svg, icones/).

   29/10/2026, de manhã, as barras foram para dentro de um quadrado; à tarde
   o Alan escolheu entre as variações (opção "L1": "mete marcha"): de volta
   SEM o quadrado, e as três barras coloridas DE LADO — uma faixa de cor só,
   o mesmo degradê do "ex", que entra verde na primeira barra e sai lilás na
   última. Cada barra pinta o seu pedaço da faixa: o degradê tem a largura
   do conjunto (.745em = 3 barras de .205 + 2 vãos de .065) e cada uma o
   desloca pela sua posição. Logo sobre faixa escura no tema claro ("Esqueci
   a senha", Privacidade): `.lf-sobre-escuro` nele dá a paleta do escuro. */
:root{
  --logo-ex:linear-gradient(90deg,#17766C 0%,#B98A30 38%,#F28C28 58%,#9A6BD2 100%)}
html.escuro,.lf-sobre-escuro{
  --logo-ex:linear-gradient(90deg,#5FCB9E 0%,#F2A46A 50%,#D6C2F2 100%)}
/* A barra assenta na linha de base do texto, como no desenho. */
html:root .lf-logo{display:inline-flex;align-items:baseline;gap:.32em}
.lf-logo-m{display:inline-flex;align-items:flex-end;gap:.065em;height:.74em;flex:none}
.lf-logo-m i{width:.205em;border-radius:99px;background:var(--logo-ex);background-size:.745em 100%}
.lf-logo-m i:nth-child(1){height:48%;background-position:0 0}
.lf-logo-m i:nth-child(2){height:100%;background-position:-.27em 0}
.lf-logo-m i:nth-child(3){height:71%;background-position:-.54em 0}
html:root .lf-logo-n{font-family:'Outfit','Inter',system-ui,sans-serif;font-weight:600;letter-spacing:-.02em;text-transform:none}
.lf-logo-n i{font-style:normal;background:var(--logo-ex);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 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:-12px 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(--nav-tinta3);cursor:pointer}
.menu-dobra:hover{background:var(--nav-hover);color:var(--nav-tinta)}
/* 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:var(--nav-hover);border-radius:8px;
            color:var(--nav-tinta3);font-size:13px}
.menu-busca:hover{background:var(--nav-on);color:var(--nav-tinta2)}
.menu-kbd{font:500 10px/1 var(--mono);color:var(--nav-tinta3)}

/* 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. */
/* ITEM NORMAL desde 06/10/2026 (decisão do Alan, grupo B da análise visual):
   era um botão âmbar fixo em todas as telas, competia com o botão principal de
   cada tela e parecia a página ativa. Agora tem o visual dos outros itens e só
   acende (`.on`) quando a Busca é a tela aberta. */
.menu-adotar{background:transparent;color:var(--nav-tinta2);border-radius:8px;
             padding:7px 10px;font-size:13px;font-weight:500;
             margin-top:-8px;display:flex;align-items:center;gap:10px}
.menu-adotar:hover{background:var(--nav-hover);color:var(--nav-tinta)}
.menu-adotar.on{background:var(--nav-on);color:var(--nav-tinta);font-weight:600}

/* O filtro de empresa (06/10/2026, Alan: "um botão para filtrar de qual empresa
   estamos vendo os pregões"). Logo abaixo da Busca, com contorno para ler como
   CONTROLE e não como mais uma tela. Filtrado (`.on`), o texto acende e o
   ícone ganha a cor da empresa — dá para saber de longe que não se está vendo
   tudo. Quem monta é o `pintarEmpresa()` do app.js. */
.menu-emp{position:relative;margin-top:-8px}
.menu-emp-bt{display:flex;align-items:center;gap:10px;width:100%;padding:6px 10px;
  border:1px solid var(--nav-borda);border-radius:8px;background:transparent;
  color:var(--nav-tinta2);font:500 13px/1.25 var(--sans);text-align:left;cursor:pointer;
  position:relative}
.menu-emp-bt:hover{background:var(--nav-hover)}
.menu-emp-bt:focus-visible{outline:none;box-shadow:var(--foco)}
.menu-emp-bt.on{border-color:var(--linha3);color:var(--nav-tinta);background:var(--nav-hover)}
.menu-emp-seta{flex:none;font-size:10px;color:var(--nav-tinta3)}
.menu-emp-sigla{display:none}
.menu-emp-lista{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:90;
  background:var(--nav-fundo);border:1px solid var(--nav-borda);border-radius:10px;
  padding:6px;box-shadow:var(--sombra-alta)}
.menu-emp-tit{font:500 12px/1 var(--sans);letter-spacing:0;text-transform:none;
  color:var(--nav-tinta3);padding:6px 8px 8px}
.menu-emp-lista button{display:flex;align-items:center;gap:9px;width:100%;border:0;
  background:transparent;color:var(--nav-tinta);font:500 13px/1.2 var(--sans);
  padding:8px;border-radius:7px;text-align:left;cursor:pointer}
.menu-emp-lista button:hover{background:var(--nav-hover)}
.menu-emp-lista button.on{background:var(--nav-on)}
.menu-emp-lista i{flex:none;width:9px;height:9px;border-radius:50%}
.menu-emp-lista i.todas{border:1.5px solid var(--nav-tinta3);width:6px;height:6px}
.menu-emp-lista b{margin-left:auto;color:var(--acento);font-weight:600}

/* 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 11.5px/1 var(--sans);letter-spacing:0;
            color:var(--nav-tinta3);padding:2px 10px 6px}
.menu-nav .menu-grupo+.menu-grupo,
.menu-nav .menu-item+.menu-grupo{padding-top:14px}

/* 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}
/* item só do Proprietário (Comissões, 30/10/2026): escondido até o `/eu`
   dizer o papel — o `display:flex` abaixo venceria o [hidden] do navegador */
html:root body .menu [data-so-dono][hidden]{display:none!important}

.menu-item{display:flex;align-items:center;gap:10px;padding:7px 10px;
           border-radius:8px;font-size:13px;font-weight:500;
           color:var(--nav-tinta2)}
.menu-item:hover{background:var(--nav-hover);color:var(--nav-tinta)}
.menu-item.on{background:var(--nav-on);color:var(--nav-tinta);font-weight:600}
.menu-item.on:hover{color:var(--nav-tinta)}
/* A tela aberta: barrinha âmbar curta, reta, centrada na borda esquerda.
   Era um filete da altura inteira (box-shadow inset) e o Alan achou feio
   (06/10): ele acompanhava a curva do canto e, no menu recolhido, virava um
   parêntese amarelo ao lado do ícone. `::after` porque o `::before` do item já
   é o traço entre seções no menu recolhido. */
.menu-item{position:relative}
.menu-item.on::after{content:'';position:absolute;left:0;top:50%;width:3px;height:16px;
  margin-top:-8px;border-radius:0 3px 3px 0;background:var(--acento)}

/* A cor por seção (ícones coloridos, 06/10) saiu em 14/10 com o menu branco:
   na proposta A só o filete âmbar da tela aberta tem cor. O `data-g` continua
   posto pelo `itemHTML()` do app.js, caso uma seção volte a pedir marca. */
.menu-rot{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-num{font:500 11px/1 var(--sans);color:var(--nav-tinta3);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:10.5px}

.menu-pe{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.menu-eu{display:flex;align-items:center;gap:9px;padding:10px 10px 2px;
         margin-top:4px;border-top:1px solid var(--nav-borda)}
.menu-av{width:28px;height:28px;border-radius:50%;background:var(--painel3);flex:none;
         display:flex;align-items:center;justify-content:center;
         font:600 10.5px/1 var(--sans);color:var(--nav-tinta)}
.menu-eu-txt{min-width:0;flex:1}
.menu-eu-nome{display:block;font-size:12.5px;font-weight:600;color:var(--nav-tinta);
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-eu-sub{display:block;font-size:11px;color:var(--nav-tinta3);
             white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-sair{margin-top:2px;background:transparent;border:0;border-radius:8px;
           padding:7px 10px;text-align:left;font-size:12px;
           color:var(--nav-tinta3);cursor:pointer}
.menu-sair:hover{background:var(--nav-hover);color:var(--nav-tinta)}
/* Botão do tema (06/10/2026), ao lado do Sair. O rótulo é do tema.js. */
.menu-tema{margin-top:2px;background:transparent;border:0;border-radius:8px;
           padding:7px 10px;text-align:left;font-size:12px;
           color:var(--nav-tinta3);cursor:pointer}
.menu-tema:hover{background:var(--nav-hover);color:var(--nav-tinta)}
.menu-pe-bts{display:flex;gap:4px;flex-wrap:wrap}

/* Janela baixa (notebook de 768px, barra de favoritos aberta): mais um degrau
   de aperto para os 13 itens continuarem cabendo sem rolar. */
@media (min-width:981px) and (max-height:820px){
  .menu{gap:10px;padding-top:12px}
  .menu-adotar{margin-top:-4px}
  .menu-item,.menu-adotar{padding-top:5px;padding-bottom:5px}
  .menu-grupo{padding-bottom:4px}
  .menu-nav .menu-grupo+.menu-grupo,
  .menu-nav .menu-item+.menu-grupo{padding-top:10px}
  .menu-eu{padding-top:8px}
}
/* Notebook de 1366×768 com o Chrome: sobram ~630px. O item "em breve" (sem
   clique) sai, e o resto aperta mais um pouco. */
@media (min-width:981px) and (max-height:700px){
  .menu{gap:8px;padding-top:10px;padding-bottom:6px}
  .menu-item,.menu-adotar{padding-top:4px;padding-bottom:4px}
  .menu-nav .menu-breve{display:none}
  .menu-grupo{padding-bottom:3px}
  .menu-nav .menu-grupo+.menu-grupo,
  .menu-nav .menu-item+.menu-grupo{padding-top:8px}
  .menu-eu{padding-top:6px}
}

/* ── TEMA ESCURO ────────────────────────────────────────────────────────────
   06/10/2026 (decisão do Alan, grupo B): 1ª etapa, a página inteira invertida
   por `filter`. 07/10, 2ª etapa: as cores fixas das telas viraram tokens por
   papel (texto, fundo, linha) e o escuro de cada uma está no bloco
   CORES-GERADAS, perto do topo — gerado pelo `tema_escuro.py`, que se roda de
   novo quando uma tela ganha cor nova. Sem `filter`: as fotos, o âmbar e o
   menu ficam como são, e uma cor ruim no escuro se corrige no script. */
html.escuro body{background:var(--fundo)}
html.escuro img:not([src$=".svg"]){filter:brightness(.92)}

/* ── 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:var(--nav-borda)}
/* 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}

/* 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}
/* "Tema escuro" não cabe em 56px e quebrava em duas linhas (06/10): recolhido,
   sai junto com o Sair. */
.menu.dobrado .menu-tema{display:none}
/* Filtro de empresa recolhido: só o ícone, e a sigla num selo quando filtrado.
   A lista abre AO LADO, porque 56px não comportam o nome das empresas. */
.menu.dobrado .menu-emp-bt{padding:7px 0 7px 9px;border-color:transparent;background:transparent}
.menu.dobrado .menu-emp-bt.on{background:var(--nav-on)}
.menu.dobrado .menu-emp-seta{display:none}
.menu.dobrado .menu-emp-sigla{display:block;position:absolute;right:1px;bottom:1px;
  font:700 8px/1 var(--mono);color:var(--t-FFFFFF);padding:2px 3px;border-radius:4px;
  box-shadow:0 0 0 2px var(--nav-fundo)}
.menu.dobrado .menu-emp-lista{left:calc(100% + 10px);right:auto;top:-6px;min-width:200px}
.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:7px 0 7px 9px;margin:0 1px;border-radius:8px;
  background:transparent}
.menu.dobrado .menu-item:hover{background:var(--nav-hover)}
.menu.dobrado .menu-item.on{background:var(--nav-on)}
.menu.dobrado .menu-breve{background:transparent}
.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(--nav-fundo)}
/* 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}
}
/* Os mesmos degraus de janela baixa do menu aberto, para o recolhido. Ficam
   DEPOIS do bloco acima de propósito: mesma especificidade, quem vem por
   último ganha. */
@media (min-width:981px) and (max-height:820px){
  .menu.dobrado .menu-item{padding-top:5px;padding-bottom:5px}
  .menu.dobrado .menu-adotar{height:30px}
  .menu.dobrado .menu-nav{gap:2px}
}
@media (min-width:981px) and (max-height:700px){
  .menu.dobrado .menu-item{padding-top:4px;padding-bottom:4px}
  .menu.dobrado .menu-adotar{height:28px}
  .menu.dobrado .menu-grupo+.menu-item{margin-top:5px}
  .menu.dobrado .menu-grupo+.menu-item::before{top:-3px}
}

/* 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}}

/* ── CELULAR E TABLET: jeito de app (06/10) ─────────────────────────────────
   Pedido do Alan: "um app igual o do Fluxo CRM, para abrir web ou celular,
   totalmente responsivo — preciso que funcione todas [as telas]". Até aqui,
   abaixo de 980px o menu virava uma faixa no topo rolando de lado: metade dos
   itens ficava fora da tela e nada dizia que existiam.

   Agora são três peças, todas montadas pelo `LF.menu()` no app.js:
   - `.lf-topo`  — barra fina no alto: ☰, a marca e o avatar. NÃO é fixa: as
     telas que já grudam o próprio cabeçalho no topo (o pregão) continuam
     grudando sem disputar o lugar.
   - `.lf-abas`  — a barra fixa EMBAIXO, ao alcance do polegar: as 4 telas do
     dia (Esteira, Agenda, Busca, Oportunidades) e "Menu".
   - o `.menu` de sempre vira GAVETA: desliza da esquerda, com TODAS as telas,
     e fecha no fundo escuro, no Esc ou ao escolher uma tela.
   `--lf-abas` é a altura da barra de baixo, para quem gruda algo no rodapé
   (a barra de salvar de config/, o aviso da sala de disputa) subir junto. */
:root{--lf-abas:0px}
.lf-topo,.lf-abas,.lf-fundo{display:none}
@media (max-width:980px){
  :root{--lf-abas:calc(60px + env(safe-area-inset-bottom))}
  .app-v3{flex-direction:column}
  body{padding-bottom:var(--lf-abas)}
  /* Rede de segurança: no celular, UMA linha que não quebra (um nome de
     arquivo, um código) alargava a página inteira — o navegador então afasta
     o zoom, tudo encolhe e a barra de baixo vai parar no meio da tela (achado
     no resumo do pregão, 06/10). `clip` corta o excesso sem virar caixa de
     rolagem, então o que gruda no topo (o cabeçalho do pregão) segue grudando. */
  .app-v3>.tela{overflow-x:clip}

  .lf-topo{display:flex;align-items:center;gap:10px;height:52px;padding:0 12px;
    padding-top:env(safe-area-inset-top);box-sizing:content-box;
    background:var(--nav-fundo);color:var(--nav-tinta);flex:none;
    border-bottom:1px solid var(--nav-borda)}
  .lf-topo-bt{width:40px;height:40px;border:0;border-radius:9px;background:transparent;
    color:var(--nav-tinta);display:flex;align-items:center;justify-content:center;
    cursor:pointer;flex:none}
  .lf-topo-bt:active{background:var(--nav-hover)}
  .lf-topo-bt svg{width:22px;height:22px}
  .lf-topo .menu-marca{padding:0;flex:1;min-width:0}
  .lf-topo-eu{width:32px;height:32px;border-radius:50%;background:var(--painel3);flex:none;
    display:flex;align-items:center;justify-content:center;
    font:600 11px/1 var(--sans);color:var(--nav-tinta)}
  .lf-topo-eu:hover{color:var(--nav-tinta)}

  .lf-abas{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;
    bottom:0;z-index:45;height:var(--lf-abas);padding-bottom:env(safe-area-inset-bottom);
    background:var(--nav-fundo);border-top:1px solid var(--nav-borda);
    box-shadow:0 -4px 16px rgba(16,24,40,.06)}
  .lf-aba{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;border:0;background:transparent;font:500 10.5px/1.1 var(--sans);
    color:var(--nav-tinta3);cursor:pointer;padding:0 2px;position:relative;
    -webkit-tap-highlight-color:transparent}
  .lf-aba:hover{color:var(--nav-tinta2)}
  .lf-aba .menu-svg{width:21px;height:21px}
  .lf-aba.on{color:var(--nav-tinta);font-weight:600}
  .lf-aba.on::before{content:'';position:absolute;top:0;left:28%;right:28%;height:2px;
    border-radius:0 0 2px 2px;background:var(--acento)}
  .lf-aba[data-contador]::after{content:attr(data-contador);position:absolute;top:6px;
    left:calc(50% + 6px);min-width:15px;padding:1px 4px;border-radius:20px;
    background:var(--acento);color:var(--acento-tinta);font:700 9px/1.3 var(--mono);
    text-align:center}
  .lf-aba[data-contador=""]::after,.lf-aba[data-contador="·"]::after{display:none}

  /* A gaveta: o MESMO menu da coluna, só que fora da tela até ser chamado. */
  .menu{position:fixed;top:0;left:0;bottom:0;z-index:80;width:min(300px,86vw);
    height:100%;padding:calc(18px + env(safe-area-inset-top)) 12px
    calc(14px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(-102%);transition:transform .22s ease,box-shadow .22s ease}
  /* a sombra só com a gaveta aberta: fechada, ela vazava pela borda esquerda */
  .menu.aberto{transform:none;box-shadow:8px 0 30px rgba(0,0,0,.28)}
  /* Na gaveta quem rola é ela inteira: a lista não encolhe (no computador ela
     encolhe e rola sozinha, para o cartão do usuário ficar sempre à vista —
     aqui isso fazia o cartão pousar EM CIMA dos últimos itens). */
  .menu-nav{overflow:visible;flex:none;min-height:auto}
  .menu-pe{flex:none;margin-top:12px}
  .menu-item{padding:11px 10px}
  /* "recolher para só ícones" é coisa da coluna do computador */
  .menu-dobra{display:none}
  .lf-fundo{position:fixed;inset:0;z-index:79;background:rgba(17,19,24,.4);
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  .lf-fundo.aberto{display:block;opacity:1;pointer-events:auto}
  html.lf-gaveta,html.lf-gaveta body{overflow:hidden}

  /* Telas de altura cheia (o Quadro da Esteira) descontam as duas barras. */
  .app-v3>.tela[style*="height:100vh"]{
    height:calc(100dvh - 52px - env(safe-area-inset-top) - var(--lf-abas))!important}

}
@media print{.lf-topo,.lf-abas,.lf-fundo{display:none!important}
  body{padding-bottom:0!important}}

/* O aviso de "instalar como app" (ver `LF.instalar` no app.js). */
.lf-instalar{position:fixed;left:12px;right:12px;bottom:calc(12px + var(--lf-abas));
  z-index:46;max-width:440px;margin:0 auto;display:flex;align-items:center;gap:12px;
  background:var(--menu);color:var(--menu-tinta);border-radius:14px;padding:12px 12px 12px 14px;
  box-shadow:0 12px 32px rgba(0,0,0,.3);font-size:13px;line-height:1.4}
.lf-instalar img{width:40px;height:40px;border-radius:10px;flex:none}
.lf-instalar div{flex:1;min-width:0}
.lf-instalar b{display:block;font-size:13.5px}
.lf-instalar span{color:var(--menu-tinta2);font-size:12px}
.lf-instalar .bt{height:32px;padding:0 13px;flex:none}
.lf-instalar .x{background:transparent;border:0;color:var(--menu-tinta4);font-size:20px;
  cursor:pointer;padding:0 4px;flex:none}

/* A margem das páginas encolhe com a janela (05/10, "várias telas
   estouradas"). Onze telas abrem com o mesmo `padding:32px 36px 60px` inline,
   e em notebook os 72px de margem lateral eram justamente o que faltava para a
   tabela caber sem rolar de lado. O seletor pelo atributo pega as onze sem
   mexer em cada uma; o `!important` é o único jeito de vencer um `style=`. */
@media (max-width:1200px){
  .tela [style*="padding:32px 36px 60px"]{padding:24px 24px 48px!important}
}
@media (max-width:700px){
  .tela [style*="padding:32px 36px 60px"]{padding:18px 14px 40px!important}
}

/* 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 900px ──────────────────
   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).
   05/10: o corte subiu de 700px para 900px. Entre os dois (tablet, janela
   dividida) a linha de colunas já não cabia e voltava a rolar de lado. */
@media (max-width:900px){
  /* `!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;
    /* As linhas chegam com `align-items:center` inline (é o certo na linha de
       colunas). Em coluna, isso fazia cada campo medir o próprio texto — e
       título com `nowrap` esticava o cartão para 2.000px+ (banco/, 05/10). */
    align-items:stretch!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 12.5px/1 var(--sans);color:var(--tinta);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:var(--tinta4);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-seta{font:500 12px/1 var(--sans);text-transform:none;
  letter-spacing:0;color:var(--tinta3);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 11.5px/1.7 var(--sans);color:var(--cor-campo, var(--tinta4));
  width:104px;flex:none}
.mq-l span{flex:1;min-width:0;color:var(--t-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:var(--t-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:var(--b-FBF3E0);border:1px solid var(--l-EFE1BC);color:var(--t-8A6A12);
  border-radius:6px;padding:2px 8px;cursor:help}
.mq-espera{font-size:12.5px;color:var(--t-6B665C)}
.mq-erro{font-size:12.5px;color:var(--t-8E3524)}
.mq-alerta{background:var(--b-FBF3E0);border:1px solid var(--l-EFE1BC);color:var(--t-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 var(--l-EFEAE0)}
.mq-itens-tit{font:600 12px/1.4 var(--sans);color:var(--tinta3);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 11.5px/1.6 var(--sans);color:var(--tinta4);flex:none;font-variant-numeric:tabular-nums}
.mq-item-l span{color:var(--t-1A1916);flex:1;min-width:0}
.mq-item-l.diverge{background:var(--b-FBF3E0)}

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

/* ══ MODAL DE ITENS DO EDITAL, e os botões que levam a ele ═══════════════════
   Veio de radar/index.html em 29/09/2026, quando a tela Oportunidades passou a
   precisar do mesmo gesto: ver os itens é o que decide participar, e a lista da
   manhã não servia para nada se, para olhar os itens, fosse preciso sair dela e
   procurar o edital na Busca.

   Copiar era o caminho curto, e é o caminho que este projeto já pagou caro
   três vezes — os quatro espelhos da esteira, o `FORA_DA_AGENDA` em quatro
   lugares, o `estilo.css` de uma tela que ninguém mais usava. O painel de
   qualificação (`.mq-*`, logo acima) já tinha feito esta mesma viagem em 31/08
   pelo mesmo motivo, e é o precedente que se segue aqui.

   O JS que monta tudo isto é `LF.itens` no app.js. Quem mexer numa ponta
   precisa da outra. */

/* O botão de itens: "~ 3/7 itens". Tem porte de BOTÃO e não de etiqueta porque
   é o gesto mais usado da lista — em 06/08 nasceu selo discreto e o Alan não o
   achou. Quem casa com o termo é âmbar sólido; quem não casa fica pálido. A cor
   carrega a informação: numa lista de 26 editais, os coloridos são onde vale
   clicar. Proposta A (15/10/2026): o âmbar ficou só para logo e foco, e o
   preto é o Reservar ao lado; quem casa virou VERDE clarinho com borda verde
   (o mesmo verde de "casam com a busca" dentro da janela). */
.selo-itens,.bt-itens{font:600 12.5px/1 var(--sans);font-variant-numeric:tabular-nums;
  background:var(--painel);border:1px solid var(--linha3);color:var(--tinta2);
  border-radius:8px;padding:8px 12px;display:inline-flex;align-items:center;gap:6px}
.bt-itens{cursor:pointer;white-space:nowrap;transition:transform .06s}
.bt-itens::before{content:'⌕';font-size:14px;font-weight:400}
.bt-itens.casa{background:var(--ok-fundo);border-color:var(--ok);color:var(--tinta)}
.bt-itens.casa:hover{background:var(--ok-fundo);border-color:var(--tinta)}
.bt-itens:hover{background:var(--painel3);border-color:var(--tinta4)}
.bt-itens:active{transform:translateY(1px)}
.selo-vazio{font-weight:500;background:var(--painel3);border-color:var(--linha2);color:var(--tinta4)}

/* Prévia ao passar o mouse (10/08). Era `title` nativo — demora ~1,5s a
   aparecer e some rápido, o que dava a impressão de não existir prévia. */
.dica-itens{position:fixed;z-index:100;background:var(--menu);color:var(--menu-tinta);
  font:500 12px/1.6 var(--sans);padding:10px 13px;
  border-radius:8px;max-width:360px;white-space:pre-line;
  box-shadow:0 10px 26px rgba(0,0,0,.35);pointer-events:none}

/* Badges de ação na linha (visto / qualificado) */
.badge-acao{display:inline-flex;align-items:center;gap:4px;font-size:12px;
  font-weight:500;border-radius:6px;padding:3px 8px;white-space:nowrap}
.badge-visto{background:var(--painel3);color:var(--tinta3)}
.badge-qualif{background:color-mix(in srgb,var(--fase-precificacao) 12%,transparent);color:var(--tinta)}

/* A caixa. Os itens que casam com o termo sobem para o topo, porque é neles
   que se decide participar ou não. */
.ovl{position:fixed;inset:0;background:rgba(22,33,29,.55);z-index:60;
     display:flex;align-items:center;justify-content:center;padding:24px}
.mbox{background:var(--painel);border-radius:14px;width:min(880px,100%);
      max-height:88vh;display:flex;flex-direction:column;
      box-shadow:0 24px 60px rgba(22,33,29,.32)}
.mtopo{display:flex;align-items:flex-start;gap:12px;padding:20px 24px 14px;
       border-bottom:1px solid var(--linha)}
.mtit{flex:1;min-width:0}
.mtit b{display:block;font-size:15px;font-weight:600;color:var(--tinta)}
.mtit span{display:block;font-size:12.5px;color:var(--tinta3);margin-top:3px}
.mx{background:none;border:0;font-size:20px;line-height:1;color:var(--tinta4);
    cursor:pointer;padding:2px 6px;border-radius:6px;flex:none}
.mx:hover{background:var(--painel3);color:var(--tinta)}
.mbar{display:flex;align-items:center;gap:12px;padding:12px 24px;flex-wrap:wrap;
      border-bottom:1px solid var(--linha)}
.mcont{font-size:12.5px;color:var(--tinta3);flex:1;min-width:150px}
.mbusca{border:1px solid var(--campo-borda);border-radius:10px;padding:8px 11px;background:var(--painel);
        color:var(--tinta);font-family:inherit;font-size:12.5px;width:240px;outline:none}
.mbusca:focus{border-color:var(--acento-forte);box-shadow:var(--foco)}
.mcorpo{overflow-y:auto;padding:8px 24px 20px;flex:1;min-height:0}
.msec{font:600 12.5px/1 var(--sans);color:var(--ok);margin:16px 0 10px}
.msec.outros{color:var(--tinta4)}
.mit{display:flex;gap:12px;padding:11px 12px;border-radius:8px;
     font-size:12.5px;line-height:1.5;align-items:flex-start}
.mit+.mit{margin-top:3px}
.mit.destaque{background:var(--painel2);border:1px solid var(--linha2)}
.mit.outro{color:var(--tinta3)}
/* 26px → 52px (Alan, 10/08): o `numero_item` do PNCP às vezes é um código de
   6+ dígitos (visto num edital do Exército, "785843"). Sem `min-width` a caixa
   estourava e cada linha desalinhava a descrição num ponto diferente. */
.mit-n{font:500 12px/1.6 var(--sans);font-variant-numeric:tabular-nums;color:var(--tinta4);
       width:52px;min-width:52px;flex:none;text-align:right;
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mit-d{flex:1;min-width:0}
.mit-d mark{background:var(--aviso-fundo);color:inherit;padding:0 2px;border-radius:2px}
.mit-m{font:500 12px/1.6 var(--sans);font-variant-numeric:tabular-nums;color:var(--tinta3);
       white-space:nowrap;flex:none}
/* O total do item (quantidade × preço, 13/10) numa linha própria, embaixo do
   unitário e alinhado com ele: é o número que se compara entre os itens. */
.mit-tot{display:block;text-align:right;color:var(--tinta);font-weight:600}
.mvazio{padding:28px 0;text-align:center;color:var(--tinta4);font-size:13px}
.mpe{display:flex;align-items:center;gap:10px;padding:14px 24px;
     border-top:1px solid var(--linha);flex-wrap:wrap}
.mpe .rot{font-size:12.5px;color:var(--tinta3);flex:1;min-width:120px}

/* Os botões secundários do rodapé do modal (Baixar docs, Qualificação). */
.bt-qualif{border:1px solid var(--linha3);background:var(--painel);color:var(--tinta);border-radius:10px;
  padding:9px 15px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;
  white-space:nowrap}
.bt-qualif:hover{background:var(--painel3);border-color:var(--tinta4)}
.bt-qualif:disabled{opacity:.55;cursor:default}
/* O CONTAINER do painel de qualificação dentro do modal. O resultado em si
   (`.mq-*`) está logo acima — 30vh e não 46vh (Alan, 10/08) porque o painel
   competia por espaço com a lista de itens; `.mcorpo{min-height:0}` é o que
   deixa a lista encolher de verdade em vez de disputar altura. */
.mqual{border-top:1px solid var(--linha);background:var(--painel2);padding:10px 20px;
  max-height:30vh;overflow-y:auto;overflow-x:hidden;flex:none}

/* ── Abertura do preço: UMA tabela, duas telas (Alan, 29/09) ────────────────
   Nasceu em 31/08 com dois desenhos diferentes: a calculadora avulsa montava
   uma coluna de linhas e a aba Itens & precificação do pregão espalhava as
   mesmas parcelas numa grade de `auto-fit`, três ou quatro por faixa.

   O veredito do Alan sobre a segunda, em cima do print: **"continua confuso.
   Fazer tipo tabela"**. E o motivo é simples de ver: espalhada, a leitura é em
   ZIGUE-ZAGUE. "Crédito de ICMS entrada (−)" quebrava em três linhas enquanto
   a célula vizinha tinha uma, as faixas ficavam de alturas diferentes, e o
   percentual — que é a coluna nova e serve justamente para comparar parcelas —
   aparecia em quatro posições horizontais distintas. Não dá para varrer de
   cima a baixo, que é a única coisa que se quer fazer com uma abertura de
   preço: achar onde o dinheiro foi parar.

   Então o desenho passa a ser um só e mora AQUI, e não na tela: era a última
   metade duplicada depois de a lista de linhas virar `LF.abertura` no app.js.

   🔴 A LARGURA FIXA das duas colunas de número é o que faz a tabela ser
   tabela. Com `auto`, cada linha alinha no tamanho do próprio conteúdo e
   "3,65%" não fica embaixo de "14,00%" — vira de novo uma lista de números
   soltos, só que empilhada. `tabular-nums` fecha a conta: sem ele os dígitos
   têm larguras diferentes e a vírgula dança mesmo dentro da coluna certa. */
.abertura .linha-total{display:grid;grid-template-columns:1fr 62px 108px;
  gap:10px;align-items:baseline;padding:7px 0;font-size:13px;
  border-bottom:1px solid var(--linha)}
.abertura .linha-total:last-child{border-bottom:0}
.abertura i{font-style:normal;font-family:var(--mono);font-size:12px;
  font-variant-numeric:tabular-nums;text-align:right;color:var(--tinta3)}
.abertura b{font-family:var(--mono);text-align:right;
  font-variant-numeric:tabular-nums}
/* O cabeçalho, como o da tabela de cenários ao lado — sem ele a coluna de %
   é uma fileira de números sem nome. Letra normal desde 15/10/2026. */
.abertura .lt-cab{padding-bottom:5px;border-bottom:1px solid var(--linha2)}
.abertura .lt-cab span,.abertura .lt-cab i,.abertura .lt-cab b{
  font:500 11.5px/1 var(--sans);color:var(--tinta4)}
/* A linha que PROVA que a abertura fecha: o % somado das parcelas e o mesmo
   R$ do topo. É o motivo de a coluna existir. */
.abertura .lt-fim{border-top:2px solid var(--tinta);border-bottom:0;
  margin-top:3px;padding-top:9px;font-weight:700}
.abertura .lt-fim i{color:var(--tinta)}
/* 🪤 Quando o servidor não manda alguma parcela, o total NÃO chega a 100% e a
   linha se acusa em vermelho em vez de mentir um "100,00%" decorado. Foi o que
   aconteceu entre 16:05 e 16:10 de 29/09: front novo contra backend velho, sem
   `ganho_credito` na resposta, e a folha dizia 100% somando 95%. */
.abertura .lt-fim.lt-furo i{color:var(--ruim)}
/* COR POR GRUPO (Alan, 30/09): SÓ o quadradinho antes do nome leva a cor do
   grupo. Na opção B o valor em R$ também levava, e a tabela "ficou colorida
   demais"; no tema C3 (o escolhido) os números voltam à tinta neutra e a cor
   fica no marcador, que é o que basta para achar o grupo de relance. Custo em
   ardósia, imposto em azul, despesa em marrom, lucro em verde, a sobra do
   crédito em roxo e o crédito (−), que SUBTRAI, em vermelho. O % fica em
   --tinta2, mais escuro que antes, porque era o número que "sumia". */
.abertura{--ab-custo:#475569;--ab-credito:var(--ruim);--ab-imposto:#1F4E8C;
  --ab-despesa:#8A4B08;--ab-lucro:#0B5A38;--ab-sobra:#6D28D9}
.abertura .linha-total:not(.lt-fim):not(.lt-cab) i{color:var(--tinta2)}
.abertura .linha-total[class*=" ab-"] span::before{content:"";display:inline-block;
  width:8px;height:8px;border-radius:2px;margin-right:8px;vertical-align:1px;
  background:var(--ab-cor)}
.abertura .ab-custo{--ab-cor:var(--ab-custo)}
.abertura .ab-credito{--ab-cor:var(--ab-credito)}
.abertura .ab-imposto{--ab-cor:var(--ab-imposto)}
.abertura .ab-despesa{--ab-cor:var(--ab-despesa)}
.abertura .ab-lucro{--ab-cor:var(--ab-lucro)}
.abertura .ab-sobra{--ab-cor:var(--ab-sobra)}
.abertura .lt-cab span,.abertura .lt-cab i,.abertura .lt-cab b{color:var(--t-5E584D)}
/* sobra de crédito dentro do lucro (Laércio, 15/10): informa, não é erro */
.abertura .lt-credito-aviso{font-size:12px;line-height:1.5;color:var(--aviso-forte,var(--aviso));
  background:var(--aviso-fundo);border:1px solid var(--aviso-linha);
  border-radius:7px;padding:8px 10px;margin-top:10px}
.abertura .lt-furo-aviso{font-size:11px;line-height:1.45;color:var(--ruim);
  background:var(--ruim-fundo);border:1px solid var(--ruim-linha);
  border-radius:7px;padding:7px 10px;margin-top:9px}

/* ── Janelas no celular (06/10) — no FIM de propósito: as regras de `.ovl`,
   `.mbox` e `.mit` estão no meio do arquivo e, mesmo dentro de um @media,
   regra de cima perde para a de baixo. */
@media (max-width:980px){
  /* Janelas (o modal de itens e o da qualificação) sobem de baixo, como em app. */
  .ovl{align-items:flex-end;padding:0}
  .mbox{width:100%;max-height:92dvh;border-radius:18px 18px 0 0;
    padding-bottom:env(safe-area-inset-bottom)}
  .mbusca{width:100%}
  /* Cada item da janela de itens: a descrição ganha a linha inteira e a
     quantidade/valor desce para baixo dela. Lado a lado, em 360px, a
     descrição virava uma coluna de UMA palavra por linha ("a tela de ver os
     itens também", 06/10). */
  .mtopo,.mbar,.mpe{padding-left:16px;padding-right:16px}
  .mcorpo{padding:6px 12px 16px}
  .mit{flex-wrap:wrap;gap:4px 10px;padding:10px}
  .mit-n{width:auto;min-width:0;text-align:left}
  .mit-d{flex:1 1 calc(100% - 60px)}
  .mit-m{flex:1 1 100%;white-space:normal;padding-left:0}
  .mpe{gap:8px}
  .mpe .rot{flex:1 1 100%}
}

/* ── Modo VISITANTE (090, 07/10/2026) ──────────────────────────────────────
   Faixa pequena, fixa embaixo e sem capturar clique: só lembra por que um
   botão responde "modo visitante" (a trava é do servidor). Sobe acima das
   abas do celular. */
.lf-visitante{position:fixed;left:50%;transform:translateX(-50%);z-index:60;
  bottom:calc(14px + var(--lf-abas, 0px));pointer-events:none;
  background:var(--menu);color:var(--menu-tinta);border:1px solid rgba(255,255,255,.12);
  font-size:12px;line-height:1.35;padding:7px 14px;border-radius:20px;
  box-shadow:var(--sombra-alta);max-width:calc(100vw - 32px);text-align:center}
@media print{.lf-visitante{display:none}}
/* Teste grátis (093): a mesma pílula, com link ("Quero continuar"). Âmbar só
   quando faltam 2 dias ou menos; vermelho quando venceu — cor com significado. */
.lf-conta{position:fixed;left:50%;transform:translateX(-50%);z-index:60;
  bottom:calc(14px + var(--lf-abas, 0px));
  background:var(--menu);color:var(--menu-tinta);border:1px solid rgba(255,255,255,.12);
  font-size:12px;line-height:1.35;padding:7px 14px;border-radius:20px;
  box-shadow:var(--sombra-alta);max-width:calc(100vw - 32px);text-align:center}
.lf-conta a{color:var(--acento);font-weight:600;text-decoration:underline;white-space:nowrap}
.lf-conta.perto{border-color:var(--acento)}
.lf-conta.fechada{background:var(--b-B23A26);border-color:var(--l-B23A26);color:var(--t-FFFFFF)}
.lf-conta.fechada a{color:var(--t-FFFFFF)}
@media print{.lf-conta{display:none}}
/* Busca diária do dia (14/10/2026): a mesma pílula, no ALTO (embaixo já moram
   a do teste e a do visitante). "Há N novas oportunidades" para todos;
   vermelha, só para o proprietário, quando a busca de hoje não rodou. No
   celular desce abaixo da barra do topo (52px). Fecha no ×, até amanhã. */
.lf-busca{position:fixed;left:50%;transform:translateX(-50%);z-index:60;
  top:calc(12px + env(safe-area-inset-top));
  display:flex;align-items:center;gap:10px;
  background:var(--menu);color:var(--menu-tinta);border:1px solid rgba(255,255,255,.12);
  font-size:12px;line-height:1.35;padding:7px 8px 7px 14px;border-radius:20px;
  box-shadow:var(--sombra-alta);max-width:calc(100vw - 32px);box-sizing:border-box}
.lf-busca a{color:var(--acento);font-weight:600;text-decoration:underline;white-space:nowrap}
.lf-busca button{background:none;border:0;color:inherit;opacity:.7;cursor:pointer;
  font-size:15px;line-height:1;padding:2px 6px}
.lf-busca button:hover{opacity:1}
.lf-busca.falhou{background:var(--b-B23A26);border-color:var(--l-B23A26);color:var(--t-FFFFFF)}
.lf-busca.falhou a{color:var(--t-FFFFFF)}
@media (max-width:980px){.lf-busca{top:calc(62px + env(safe-area-inset-top))}}
@media print{.lf-busca{display:none}}
/* O que o visitante não pode fazer some da tela, em vez de responder 403:
   Busca — adotar (por número, pelo PDF), reservar e salvar preset; Documentos
   — adicionar, editar e apagar (ver e imprimir continuam). O pregão e a sala
   de disputa já entram em só-leitura pelo próprio `SO_LEITURA`. */
html.visitante #b-colar, html.visitante #b-manual,
html.visitante #pst-termos-salvar, html.visitante #pst-proibidas-salvar,
html.visitante [data-reservar], html.visitante [data-adotar],
html.visitante #b-novo, html.visitante [data-editar], html.visitante [data-del],
html.visitante [data-anexar], html.visitante [data-emitir],
html.visitante #c-decl [data-modelo]{display:none!important}

/* DESFAZER A TRIAGEM (13/10). Barra no rodapé, no grafite da faixa das tabelas;
   o âmbar fica só no botão, que é a ação (C3). Some sozinha em 15 s.
   23/10 (Alan, com print): saiu do centro para o CANTO DIREITO — no meio ela
   cobria a linha do próximo edital a abrir. O negrito herda a cor da barra (o
   branco fixo sumia no fundo claro da proposta A). */
.lf-desfazer{position:fixed;right:22px;bottom:22px;z-index:3000;display:flex;align-items:center;gap:12px;
  max-width:min(440px,calc(100vw - 32px));padding:10px 10px 10px 16px;border-radius:10px;
  background:var(--faixa);color:var(--faixa-tinta);font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.22);
  transform:translateY(16px);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.lf-desfazer.on{opacity:1;transform:translateY(0);pointer-events:auto}
.lf-desfazer .lf-dz-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-desfazer .lf-dz-t b{color:inherit;font-weight:700}
.lf-desfazer .lf-dz-b{border:none;border-radius:7px;background:var(--acento);color:#26241F;font:inherit;
  font-weight:600;padding:6px 14px;cursor:pointer;white-space:nowrap}
.lf-desfazer .lf-dz-b:disabled{opacity:.6;cursor:default}
.lf-desfazer .lf-dz-x{border:none;background:none;color:var(--faixa-tinta);font-size:18px;line-height:1;
  padding:2px 6px;cursor:pointer}
@media(max-width:600px){.lf-desfazer{left:16px;right:16px;max-width:none;bottom:calc(14px + env(safe-area-inset-bottom))}}

/* ── PROPOSTA A, ETAPAS 4–5 (14/10/2026): as peças da prévia ────────────────
   docs/design/proposta-visual.html. Toda tela redesenhada se monta com estas
   peças, na mesma ordem: barra do topo, cabeçalho, números, filtros e
   conteúdo. Prefixo lf- para não colidir com nada das telas. */

/* A barra do topo (montada pelo barra() do app.js). */
.lf-barra{display:grid;grid-template-columns:1fr minmax(0,auto) 1fr;align-items:center;
  gap:12px;height:56px;flex:none;padding:0 32px;
  background:var(--nav-fundo);border-bottom:1px solid var(--nav-borda);position:relative;z-index:30}
/* Três colunas, e não flex (Alan, 15/10, com print): os cronômetros do meio
   ficam no CENTRO da barra. No flex eles centravam no vão entre a busca
   (400px) e os botões da direita (mais estreitos), e caíam para a esquerda.
   As laterais em 1fr têm a largura da busca como mínimo: em tela estreita o
   meio cede antes de encostar nela.
   29/10/2026 (Alan, com print do Pregão: "mover para o centro"): a BUSCA
   vai para o centro, e os cronômetros e o relógio do resumo passam para a
   coluna da esquerda, onde ela estava. A ordem no HTML não muda. */
.lf-barra>.lf-q{grid-column:2;grid-row:1;justify-self:center}
.lf-barra>.lf-meio{grid-column:1;grid-row:1;justify-self:start;justify-content:flex-start;max-width:100%}
.lf-barra>.lf-barra-dir{grid-column:3;grid-row:1}
.lf-q{position:relative;display:flex;align-items:center;gap:8px;width:min(400px,42vw);height:36px;
  padding:0 8px 0 12px;border:1px solid var(--campo-borda);border-radius:10px;
  background:var(--painel);color:var(--tinta4)}
.lf-q:focus-within{border-color:var(--acento-forte);box-shadow:var(--foco)}
.lf-q-ic{display:flex}
.lf-q-ic .menu-svg{width:16px;height:16px}
.lf-q input{flex:1;min-width:0;border:0;background:transparent;font-size:13px;color:var(--tinta);height:34px}
.lf-q input:focus{outline:none}
.lf-q input::-webkit-search-cancel-button{display:none}
.lf-q kbd{font:500 11px/1 var(--sans);border:1px solid var(--linha3);border-radius:5px;
  padding:3px 5px;color:var(--tinta4);white-space:nowrap}
.lf-q-res{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--painel);
  border:1px solid var(--linha2);border-radius:12px;box-shadow:var(--sombra-alta);padding:6px;
  z-index:95;max-height:440px;overflow:auto}
.lf-q-res a{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;color:var(--tinta)}
.lf-q-res a:hover,.lf-q-res a.on{background:var(--painel3);color:var(--tinta)}
.lf-q-res b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-q-res span{font-size:12px;color:var(--tinta3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-q-vazio{padding:10px;font-size:13px;color:var(--tinta3)}
.lf-barra-dir{justify-self:end;display:flex;align-items:center;gap:12px}
.lf-emp{margin:0}
.lf-emp .menu-emp-bt{height:34px;padding:0 10px;border-color:var(--linha3);color:var(--tinta);gap:8px;border-radius:10px}
.lf-emp .menu-emp-bt .menu-ic{width:18px;height:18px}
.lf-emp .menu-emp-lista{left:auto;right:0;min-width:230px}
.lf-sino{position:relative;width:36px;height:36px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;color:var(--tinta3)}
.lf-sino:hover{background:var(--painel3);color:var(--tinta)}
.lf-sino .menu-svg{width:19px;height:19px}
.lf-sino b{position:absolute;top:1px;right:-2px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--acento);color:var(--acento-tinta);
  font:700 10px/17px var(--sans);text-align:center;box-shadow:0 0 0 2px var(--nav-fundo)}
.lf-av{width:32px;height:32px;border-radius:50%;background:var(--painel3);display:flex;
  align-items:center;justify-content:center;font:600 11.5px/1 var(--sans);color:var(--tinta)}
.lf-av:hover{color:var(--tinta);background:var(--linha2)}
@media (min-width:981px){.lf-busca{top:66px}}
@media (max-width:980px){.lf-barra{display:none}}
@media print{.lf-barra{display:none!important}}

/* A página: cabeçalho, números, cartões. */
.lf-pg{padding:26px 32px 48px;display:flex;flex-direction:column;gap:20px;min-width:0}
.lf-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lf-hd h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--tinta)}
.lf-hd p{margin:4px 0 0;color:var(--tinta3);font-size:13.5px}
.lf-acoes{display:flex;gap:8px;flex-wrap:wrap}
.lf-acoes .bt .menu-svg,.lf-ch .bt .menu-svg{width:16px;height:16px}
.lf-ks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.lf-k{background:var(--painel);border:1px solid var(--linha2);border-radius:14px;
  box-shadow:var(--sombra);padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.lf-k-rot{font-size:12px;font-weight:500;color:var(--tinta3)}
.lf-k-v{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--tinta);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-k-v.ok{color:var(--ok)}
.lf-k-v.ruim{color:var(--ruim)} .lf-k-v.aviso{color:var(--aviso)}
/* Três números em vez de quatro (Busca, Agenda, Precificar; 15/10/2026). */
.lf-ks.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.lf-k-d{font-size:12px;color:var(--tinta3);display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:20px}
.lf-dl{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:6px;
  font-size:11.5px;font-weight:600;white-space:nowrap}
.lf-dl.ok{background:var(--ok-fundo);color:var(--ok)}
.lf-dl.ruim{background:var(--ruim-fundo);color:var(--ruim)}
.lf-dl.aviso{background:var(--aviso-fundo);color:var(--aviso)}
.lf-dl.mudo{background:var(--painel3);color:var(--tinta3)}
.lf-card{background:var(--painel);border:1px solid var(--linha2);border-radius:14px;
  box-shadow:var(--sombra);min-width:0}
.lf-ch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--linha)}
.lf-ch h2{margin:0;font-size:14px;font-weight:600;color:var(--tinta)}
.lf-lk{font-size:12.5px;font-weight:500;color:var(--tinta3);display:inline-flex;align-items:center;gap:4px;
  background:none;border:0;cursor:pointer;padding:0}
.lf-lk:hover{color:var(--tinta)}
.lf-vazio{padding:28px 18px;text-align:center;color:var(--tinta4);font-size:13px}

/* Selo: fundo clarinho, ponto e texto normal — o mesmo em toda tela. */
.lf-sl{--c:var(--tinta4);display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;
  border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;line-height:1;
  background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--tinta)}
.lf-sl::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--c);flex:none}
.lf-sl.ok{--c:var(--ok)} .lf-sl.ruim{--c:var(--ruim)} .lf-sl.aviso{--c:var(--aviso)}
.lf-sl.info{--c:var(--fase-precificacao)} .lf-sl.mudo{--c:var(--tinta4)}
.lf-sl.f-reservado{--c:var(--fase-reservado)} .lf-sl.f-resumo{--c:var(--fase-resumo)}
.lf-sl.f-precificacao{--c:var(--fase-precificacao)} .lf-sl.f-disputa{--c:var(--fase-disputa)}
.lf-sl.f-habilitacao{--c:var(--fase-habilitacao)} .lf-sl.f-homologado{--c:var(--fase-homologado)}
.lf-sl.f-contrato{--c:var(--fase-contrato)} .lf-sl.f-empenho{--c:var(--fase-empenho)}
.lf-sl.f-exito{--c:var(--fase-exito)}
.lf-sl.f-finalizado,.lf-sl.f-fora,.lf-sl.f-declinado{--c:var(--fase-finalizado)}

/* Filtros: busca e chips. */
.lf-fl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lf-campo-q{position:relative;display:flex;align-items:center;width:280px;max-width:100%}
.lf-campo-q .menu-svg{position:absolute;left:11px;width:15px;height:15px;color:var(--tinta4);pointer-events:none}
.lf-campo-q input{width:100%;height:36px;border:1px solid var(--campo-borda);border-radius:10px;
  padding:0 12px 0 33px;font-size:13px;background:var(--painel);color:var(--tinta)}
.lf-campo-q input:focus{outline:none;border-color:var(--acento-forte);box-shadow:var(--foco)}
.lf-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;
  border:1px solid var(--campo-borda);background:var(--painel);font-size:12.5px;font-weight:500;
  color:var(--tinta2);cursor:pointer;white-space:nowrap}
.lf-chip:hover{border-color:var(--tinta4);color:var(--tinta)}
.lf-chip.on{background:var(--acao);border-color:var(--acao);color:var(--acao-tinta)}
.lf-chip.pd{border-style:dashed;background:transparent;color:var(--tinta3);cursor:default}

/* Tabela da prévia: cabeçalho claro, sem zebra, total no pé. */
.lf-tw{overflow-x:auto}
.lf-tb{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.lf-tb th{background:var(--faixa);color:var(--tinta3);text-align:left;font-size:12px;font-weight:500;
  padding:0 14px;height:40px;white-space:nowrap;border-bottom:1px solid var(--linha2)}
.lf-tb td{padding:0 14px;height:50px;border-top:1px solid var(--linha);color:var(--tinta);white-space:nowrap}
.lf-tb tbody tr:first-child td{border-top:0}
.lf-tb tbody tr.lf-ln{cursor:pointer}
.lf-tb tbody tr.lf-ln:hover td{background:var(--painel2)}
.lf-tb .r{text-align:right}
.lf-tb td.r{font-variant-numeric:tabular-nums}
.lf-tb td.f{font-weight:500;white-space:normal;line-height:1.35}
.lf-tb tfoot td{font-weight:600;background:var(--painel2);border-top:1px solid var(--linha2);
  font-variant-numeric:tabular-nums}
.lf-cod{font-size:12.5px;color:var(--tinta3);font-variant-numeric:tabular-nums}
.lf-pr{display:flex;align-items:center;gap:10px;min-width:150px}
.lf-pr-t{flex:1;height:6px;border-radius:3px;background:var(--linha2);overflow:hidden}
.lf-pr-t i{display:block;height:100%;border-radius:3px;background:var(--acao)}
.lf-pr span{font-size:12px;color:var(--tinta3);width:36px;text-align:right;font-variant-numeric:tabular-nums}
.lf-avs{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--painel3);font:600 9.5px/1 var(--sans);color:var(--tinta2);flex:none}

@media (max-width:1100px){.lf-ks:not(.tres){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .lf-pg{padding:18px 14px 40px;gap:16px}
  .lf-ks{gap:10px}
  .lf-k{padding:13px 14px}
  .lf-k-v{font-size:23px}
  .lf-hd h1{font-size:20px}
  .lf-campo-q{width:100%}
}

/* Menu sem rolar (Alan, 14/10/2026, com print: com "Hoje" a mais o menu
   passou a rolar numa janela baixa). O botão de recolher sobe para a linha
   do logo (tinha uma linha só dele) e, em janela de até 900px de altura,
   os itens apertam e o "em breve" sai. */
@media (min-width:981px){
  .menu:not(.dobrado) .menu-dobra{position:absolute;top:9px;right:8px;margin:0}
  .menu:not(.dobrado) .menu-marca{padding-right:40px}
}
@media (min-width:981px) and (max-height:900px){
  .menu{gap:10px;padding-top:12px}
  .menu-item,.menu-adotar{padding-top:5px;padding-bottom:5px}
  .menu-adotar{margin-top:-6px}
  .menu-grupo{padding-bottom:4px}
  .menu-nav .menu-grupo+.menu-grupo,
  .menu-nav .menu-item+.menu-grupo{padding-top:10px}
  .menu-nav .menu-breve{display:none}
  .menu-eu{padding-top:8px}
}
@media (min-width:981px) and (max-height:740px){
  .menu{gap:6px}
  .menu-item,.menu-adotar{padding-top:3px;padding-bottom:3px}
  .menu-adotar{margin-top:-3px}
  .menu-nav .menu-grupo+.menu-grupo,
  .menu-nav .menu-item+.menu-grupo{padding-top:7px}
  .menu-grupo{padding-bottom:2px}
}

/* ── Aviso de disputa começando (15/10/2026) ───────────────────────────────
   A 60 e a 10 segundos da disputa, em qualquer tela (o JS é o
   `alertaDisputa` do app.js). O véu pisca SOBRE a tela sem pegar clique;
   o cartão fica no alto contando até zero. Âmbar no de 60, vermelho no de 10.
   Até 3 piscadas por segundo no máximo — acima disso é desconfortável e pode
   ser perigoso para quem tem fotossensibilidade. */
.lf-pisca{position:fixed;inset:0;z-index:9998;pointer-events:none;
  box-shadow:inset 0 0 0 8px var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);
  opacity:0;animation:lf-pisca .8s ease-in-out 3}
.lf-pisca.atn{--c:var(--acento)}
.lf-pisca.urg{--c:var(--ruim);box-shadow:inset 0 0 0 12px var(--c);animation-duration:.6s;animation-iteration-count:5}
@keyframes lf-pisca{0%,100%{opacity:0}45%{opacity:1}}
.lf-alerta{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9999;
  display:flex;align-items:center;gap:14px;padding:12px 14px 12px 12px;max-width:min(640px,calc(100vw - 24px));
  background:var(--painel);border:1px solid var(--linha2);border-left:6px solid var(--acento);
  border-radius:14px;box-shadow:var(--sombra-alta);animation:lf-alerta-entra .25s ease-out}
.lf-alerta.urg{border-left-color:var(--ruim)}
.lf-alerta-n{min-width:64px;text-align:center;font-size:26px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--tinta)}
.lf-alerta.urg .lf-alerta-n{color:var(--ruim)}
.lf-alerta-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.lf-alerta-t b{font-size:14px;font-weight:600;color:var(--tinta)}
.lf-alerta-t span{font-size:12.5px;color:var(--tinta3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-alerta .bt{white-space:nowrap}
.lf-alerta-x{background:none;border:0;font-size:15px;color:var(--tinta4);cursor:pointer;padding:4px 6px;border-radius:6px}
.lf-alerta-x:hover{background:var(--painel3);color:var(--tinta)}
@keyframes lf-alerta-entra{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:700px){.lf-alerta{flex-wrap:wrap}.lf-alerta .bt{flex:1;text-align:center}}
/* Quem pediu menos movimento no sistema: sem piscar — a borda acende fixa
   por um instante e o cartão aparece do mesmo jeito. */
@media (prefers-reduced-motion:reduce){
  .lf-pisca{animation:none;opacity:1;background:none}
  .lf-alerta{animation:none}
}
@media print{.lf-pisca,.lf-alerta{display:none!important}}
/* O pedido de licença para a notificação do Windows (15/10/2026): canto de
   baixo à DIREITA, para não brigar com o "Instalar o LICIEX" do centro. */
.lf-notif-pede{position:fixed;right:20px;bottom:20px;z-index:9000;width:min(380px,calc(100vw - 24px));
  display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--painel);
  border:1px solid var(--linha2);border-radius:14px;box-shadow:var(--sombra-alta);
  animation:lf-alerta-sobe .25s ease-out}
.lf-notif-pede b{display:block;font-size:14px;font-weight:600;color:var(--tinta)}
.lf-notif-pede span{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--tinta3)}
.lf-notif-bts{display:flex;gap:8px}
@keyframes lf-alerta-sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:980px){.lf-notif-pede{right:12px;bottom:calc(var(--lf-abas) + 12px)}}
@media print{.lf-notif-pede{display:none!important}}
/* Os cronômetros das disputas na barra do topo (15/10/2026, ideia do
   Laércio): um chip por disputa dos próximos 10 minutos, no vão entre a
   busca e a empresa. Âmbar até 1 minuto, vermelho no último, preto com
   "agora" enquanto a sessão acontece. O ponto pulsa devagar — é sinal de
   "ao vivo", não alarme (o alarme é o piscar da tela). */
.lf-cron{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden}
.lf-cron:empty{display:none}
.lf-barra .lf-cron:empty{display:none}
.lf-cron-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 10px;
  border-radius:999px;border:1px solid color-mix(in srgb,var(--acento) 55%,transparent);
  background:color-mix(in srgb,var(--acento) 14%,var(--painel));color:var(--tinta);
  min-width:0;max-width:300px;flex:0 1 auto;transition:background .2s,border-color .2s}
.lf-cron-chip:hover{border-color:var(--tinta);color:var(--tinta)}
.lf-cron-chip i{width:8px;height:8px;border-radius:50%;background:var(--acento);flex:none;
  animation:lf-cron-vivo 1.6s ease-in-out infinite;box-sizing:border-box}
.lf-cron-chip b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.lf-cron-chip span{font-size:12.5px;color:var(--tinta3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.lf-cron-chip.urg{border-color:var(--ruim);background:var(--ruim-fundo)}
.lf-cron-chip.urg i{background:var(--ruim);animation-duration:.8s}
.lf-cron-chip.urg b{color:var(--ruim)}
.lf-cron-chip.ja{border-color:var(--acao);background:var(--acao);color:var(--acao-tinta)}
.lf-cron-chip.ja i{background:var(--ruim)}
.lf-cron-chip.ja span{color:var(--acao-tinta);opacity:.75}
.lf-cron-mais{display:inline-flex;align-items:center;height:34px;padding:0 10px;border-radius:999px;
  border:1px solid var(--linha3);font-size:12.5px;font-weight:600;color:var(--tinta2);flex:none}
@keyframes lf-cron-vivo{0%,100%{opacity:1}50%{opacity:.25}}
/* O meio da barra: cronômetros de disputa e resumos da IA lado a lado (15/10) */
.lf-meio{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;overflow:hidden}
.lf-meio>.lf-cron{flex:0 1 auto;justify-content:flex-start}
.lf-ia{display:flex;align-items:center;gap:8px;min-width:0}
.lf-ia:empty{display:none}
.lf-ia-chip{border-color:var(--linha3);background:var(--painel2)}
.lf-ia-chip i{width:12px;height:12px;background:none;border:2px solid var(--linha3);
  border-top-color:var(--acao);animation:lf-gira .8s linear infinite}
.lf-ia-chip.feito{border-color:var(--ok-linha);background:var(--ok-fundo)}
.lf-ia-chip.feito i{display:none}
.lf-ia-chip.feito b{color:var(--ok)}
@keyframes lf-gira{to{transform:rotate(360deg)}}

/* ── Cofre de acessos (098, 19/10): a janela do código, o botão "Acesso" do
   pregão e da Sala de disputa, e as fichas (login/senha) dos dois. ───────── */
.cofre-jan{width:min(440px,100%)}
.cofre-jan .mtit b{display:flex;align-items:center;gap:8px}
.cofre-jan .mtit .menu-svg{width:18px;height:18px}
.cofre-corpo{padding:18px 24px 22px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cofre-passo{margin:0;font-size:13px;line-height:1.5;color:var(--tinta2)}
.cofre-rot{display:block;font-size:12px;font-weight:500;color:var(--tinta3);margin-bottom:5px}
.cofre-linha{display:flex;gap:8px;align-items:center}
.cofre-cod{width:150px;font-size:20px;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
.cofre-hello{height:44px;padding:0 18px;font-size:14px;gap:9px}
.cofre-hello .menu-svg{width:18px;height:18px}
.cofre-dica{font-size:12px;color:var(--tinta3);line-height:1.45;margin:-4px 0 0}
.cofre-bloco{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%}
.cofre-bloco[hidden]{display:none}
.cofre-link{background:none;border:0;padding:0;margin-top:8px;font:inherit;font-size:12.5px;
  color:var(--tinta3);text-decoration:underline;cursor:pointer}
.cofre-bt{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:8px;
  border:1px solid var(--linha3);background:var(--painel);color:var(--tinta);font:inherit;font-size:12.5px;
  font-weight:500;cursor:pointer;white-space:nowrap}
.cofre-bt:hover{border-color:var(--tinta4);background:var(--painel2)}
.cofre-bt .menu-svg{width:15px;height:15px}
.cofre-pop{position:absolute;z-index:70;width:min(380px,calc(100vw - 24px));background:var(--painel);
  border:1px solid var(--linha2);border-radius:12px;box-shadow:var(--sombra-alta);padding:6px 14px 12px}
.cofre-pop-cab{display:flex;align-items:center;gap:10px;padding:8px 0 6px}
.cofre-pop-cab b{flex:1;font-size:13.5px;font-weight:600}
.cofre-pop-cab a{font-size:12px;color:var(--tinta3)}
.cofre-ficha{padding:10px 0;border-top:1px solid var(--linha)}
.cofre-ficha-cab{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px}
.cofre-emp{font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--painel3);color:var(--tinta2)}
.cofre-emp.todas{font-weight:400;color:var(--tinta3)}
.cofre-abrir{margin-left:auto;font-size:12px}
.cofre-dado{display:flex;align-items:center;gap:8px;font-size:12.5px;min-height:28px}
.cofre-dado>span{width:42px;color:var(--tinta3);flex:none}
.cofre-dado code{font-family:var(--mono,ui-monospace,Consolas,monospace);font-size:12.5px;color:var(--tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cofre-mini{background:none;border:1px solid var(--linha3);border-radius:6px;padding:2px 8px;font:inherit;
  font-size:11.5px;color:var(--tinta2);cursor:pointer;flex:none}
.cofre-mini:hover{border-color:var(--tinta4);color:var(--tinta)}
.cofre-mini:disabled{opacity:.5;cursor:wait}
.cofre-olho{display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;min-width:30px;height:24px}
.cofre-olho.on{background:var(--painel3);color:var(--tinta);border-color:var(--tinta4)}
.cofre-obs{font-size:12px;color:var(--tinta3);margin-top:4px;line-height:1.45;white-space:pre-wrap}
/* No celular (a barra fina do alto): um chip só, sem o nome. */
.lf-topo .lf-cron{flex:0 1 auto;margin-left:auto;margin-right:8px}
.lf-topo .lf-cron-chip{height:30px;padding:0 10px 0 8px}
.lf-topo .lf-cron-chip span{display:none}
@media (prefers-reduced-motion:reduce){.lf-cron-chip i{animation:none}
  .lf-ia-chip i{animation:lf-gira 1.6s linear infinite}}

/* ── Olho da senha (19/10): o botão que o olho-senha.js põe em todo campo de
   senha. Seletores com duas classes para valer sobre o `input`/`button` de
   cada tela, que vêm depois deste arquivo. */
.olho-senha{position:relative;display:block}
.olho-senha>input[type]{padding-right:42px}
.olho-senha>.olho-senha-bt{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;margin:0;padding:0;display:grid;place-items:center;
  background:none;border:0;border-radius:7px;color:var(--tinta3);cursor:pointer;box-shadow:none}
.olho-senha>.olho-senha-bt:hover{color:var(--tinta);background:var(--painel2)}
.olho-senha>.olho-senha-bt:focus-visible{outline:none;box-shadow:var(--foco)}
.olho-senha>.olho-senha-bt[aria-pressed="true"]{color:var(--tinta)}

/* ============================================================================
   LEVEZA — o visual de 27/10/2026 (Alan e Laércio), etapa 1: a base.
   ============================================================================
   O desenho aprovado está em docs/design/leveza/leveza-liciflow.html: fundo
   pastel furta-cor, cartões de VIDRO fosco por cima, menu flutuante com o item
   aberto em pílula preta, pílulas em tudo, números grandes e finos na Outfit.
   Duas paletas, à escolha de cada pessoa (tema.js, `html[data-paleta]`):
     petroleo (padrão) — Petróleo · Âmbar · Coral
     grafite           — Grafite · Laranja · Lavanda
   A = cor do herói, B = contraste, C = acento.
   Tudo aqui é sobreposição: as telas não mudam de marcação nesta etapa.

   OS DOIS TEMAS (28/10/2026, Alan: "o escuro está quebrado, sem relação com a
   identidade nova… escuro mas não só preto"). Até aqui as regras eram
   `html:not(.escuro)` e o escuro ficava com o desenho antigo. Agora são
   `html:root` — a MESMA especificidade, então nada no claro muda de lugar — e
   valem nos dois; o que muda entre eles são só as variáveis: `--lv-w` (a base
   do vidro e das superfícies, em "r,g,b" para entrar no rgba), `--lv-k` (a
   tinta dos traços finos), a pílula (`--lv-pilula*`, preta no claro e clara no
   escuro) e as cores de situação. O escuro é grafite-azulado com os brilhos da
   paleta por baixo, não preto. */
@font-face{
  font-family:'Outfit'; font-style:normal; font-weight:200 700; font-display:swap;
  src:url('fontes/outfit-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:'Outfit'; font-style:normal; font-weight:200 700; font-display:swap;
  src:url('fontes/outfit-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;
}
html:not(.escuro){
  --disp:'Outfit','Inter',system-ui,sans-serif;
  --lv-ink:#16141F; --lv-ink2:#4E4B5E; --lv-ink3:#8B88A0;
  /* petróleo (padrão) */
  --lv-a1:#179C93; --lv-a:#0F7A72; --lv-a3:#0B5F59;
  --lv-b1:#FFD06A; --lv-b:#F5A524;
  --lv-c:#FFC2B5; --lv-ctxt:#7A2414;
  --lv-suave:#E0F2F0; --lv-suave-txt:#0B5F59;
  --lv-fundo:#ECEEF2;
  --lv-vidro:rgba(255,255,255,.46); --lv-vidro2:rgba(255,255,255,.72);
  --lv-borda:rgba(255,255,255,.8);
  --lv-sombra:inset 0 1px 0 rgba(255,255,255,.9),0 14px 34px -20px rgba(40,30,90,.32);
  --lv-blur:blur(18px) saturate(1.5);
  --lv-w:255,255,255; --lv-k:22,20,31;
  --lv-h1:42%; --lv-h2:30%; --lv-h3:48%;   /* o degradê do cartão herói */
  --lv-flut:rgba(255,255,255,.9); --lv-sombra-alta:0 24px 54px -20px rgba(40,30,90,.38); --lv-veu:rgba(22,20,31,.32);
  --lv-pilula:#16141F; --lv-pilula-txt:#FFFFFF; --lv-pilula-hover:#2A2733; --lv-pilula-sub:#B9B6CC;
  /* situação: aviso (âmbar), ruim (vermelho), ok (verde) */
  --lv-av-f:#FFF4DE; --lv-av-t:#A86400; --lv-av-borda:#FBE3B4;
  --lv-ru-f:#FFEDEE; --lv-ru-t:#C93A3F; --lv-ru-borda:#F6B4B6;
  --lv-ok-f:#E7F6EE; --lv-ok-t:#1F7A4D;
  --lv-trilho1:#EEECF5; --lv-trilho2:#F6F5FA; --lv-traco:#D9D6E4; --lv-traco2:#F3F2F7;
  /* os nomes antigos passam a apontar para a Leveza */
  --acao:#16141F; --acao-forte:#2A2733; --acao-tinta:#FFFFFF;
  --tinta:#16141F; --tinta2:#4E4B5E; --tinta3:#6E6B80;
  --link:var(--lv-a3);
  --foco:0 0 0 3px color-mix(in srgb,var(--lv-a) 25%,transparent);
  --fundo:transparent;
  --painel:var(--lv-vidro2);
  --sombra:var(--lv-sombra);
}
html[data-paleta="grafite"]:not(.escuro){
  --lv-a1:#3A3D4A; --lv-a:#24262F; --lv-a3:#15161C;
  --lv-b1:#FBA94C; --lv-b:#F27F1B;
  --lv-c:#CDBDFF; --lv-ctxt:#34207E;
  --lv-suave:#ECECF0; --lv-suave-txt:#24262F;
  --lv-fundo:#EEEEF2;
  --link:#B9530C;
}
/* O ESCURO DA LEVEZA (28/10). Grafite-azulado (#13151C), nunca preto puro;
   o vidro é um ardósia translúcido, a borda é um fio de luz, e a paleta
   aparece clareada o bastante para ler sobre o fundo escuro. Os neutros
   antigos do escuro (gerados pelo tema_escuro.py) puxavam para o marrom —
   aqui eles passam para o mesmo ardósia, para nada destoar. */
html.escuro{
  --disp:'Outfit','Inter',system-ui,sans-serif;
  --lv-ink:#ECEDF3; --lv-ink2:#B9BCCB; --lv-ink3:#8A8EA2;
  --lv-a1:#2BB5A8; --lv-a:#1E9C90; --lv-a3:#7FD6CC;
  --lv-b1:#F7BE55; --lv-b:#F5A524;
  --lv-c:#F2998A; --lv-ctxt:#FFD3C9;
  --lv-suave:rgba(43,181,168,.16); --lv-suave-txt:#8FE0D6;
  --lv-fundo:#13151C;
  --lv-vidro:rgba(30,33,45,.62); --lv-vidro2:rgba(40,44,59,.8);
  --lv-borda:rgba(255,255,255,.08);
  --lv-sombra:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -22px rgba(0,0,0,.75);
  --lv-blur:blur(18px) saturate(1.4);
  --lv-w:44,48,64; --lv-k:255,255,255;
  --lv-h1:46%; --lv-h2:12%; --lv-h3:22%;   /* no escuro o herói puxa para a cor A, sem turvar */
  --lv-flut:rgba(34,38,51,.94); --lv-sombra-alta:0 24px 54px -18px rgba(0,0,0,.8); --lv-veu:rgba(5,6,10,.6);
  --lv-pilula:#ECEDF3; --lv-pilula-txt:#14161D; --lv-pilula-hover:#FFFFFF; --lv-pilula-sub:#6B6F82;
  --lv-av-f:rgba(245,165,36,.15); --lv-av-t:#F7BE55; --lv-av-borda:rgba(245,165,36,.42);
  --lv-ru-f:rgba(248,113,113,.15); --lv-ru-t:#FF8A80; --lv-ru-borda:rgba(248,113,113,.45);
  --lv-ok-f:rgba(74,222,128,.13); --lv-ok-t:#7EDBA0;
  --lv-trilho1:rgba(255,255,255,.08); --lv-trilho2:rgba(255,255,255,.03);
  --lv-traco:rgba(255,255,255,.24); --lv-traco2:rgba(255,255,255,.07);
  --acao:#ECEDF3; --acao-forte:#FFFFFF; --acao-tinta:#14161D;
  --tinta:#ECEDF3; --tinta2:#C3C6D4; --tinta3:#9A9EB1; --tinta4:#7D8196; --tinta5:#6E7286;
  --link:var(--lv-a3);
  --foco:0 0 0 3px color-mix(in srgb,var(--lv-a) 45%,transparent);
  --fundo:transparent;
  --painel:var(--lv-vidro2); --painel2:#262A38; --painel3:#2E3243; --zebra:rgba(255,255,255,.03);
  --linha:rgba(255,255,255,.07); --linha2:rgba(255,255,255,.1); --linha3:rgba(255,255,255,.15);
  --campo-borda:rgba(255,255,255,.14);
  --cabecalho:#232736; --cabecalho-borda:#33384A;
  --menu:#181B24; --menu2:#232736; --faixa:#232736; --faixa-tinta:#C9CCD8;
  --decisao:#2A2E3D; --decisao-campo:#232736; --decisao-borda:#454A5E;
  --sombra:var(--lv-sombra);
}
html.escuro[data-paleta="grafite"]{
  --lv-a1:#C3C7D6; --lv-a:#9EA3B8; --lv-a3:#DADDE7;
  --lv-b1:#FBB565; --lv-b:#F28A2E;
  --lv-c:#B8A5FF; --lv-ctxt:#DCD2FF;
  --lv-suave:rgba(255,255,255,.08); --lv-suave-txt:#E3E5EC;
  --lv-fundo:#141519;
  --link:#FBB565;
}

/* ── o chão: pastel furta-cor das três cores ────────────────────────────── */
html:root body,
html:root .app-v3{
  background:
    radial-gradient(900px 620px at 0% 0%,color-mix(in srgb,var(--lv-a) 42%,transparent),transparent 62%),
    radial-gradient(820px 600px at 100% 0%,color-mix(in srgb,var(--lv-b1) 30%,transparent),transparent 60%),
    radial-gradient(1000px 700px at 65% 115%,color-mix(in srgb,var(--lv-c) 56%,transparent),transparent 62%),
    radial-gradient(700px 520px at 35% 55%,rgba(var(--lv-w),.75),transparent 70%),
    var(--lv-fundo);
  background-attachment:fixed;
}
/* no escuro, os mesmos três brilhos, baixos: luz colorida por trás do vidro */
html.escuro body,
html.escuro .app-v3{
  background:
    radial-gradient(900px 620px at 0% 0%,color-mix(in srgb,var(--lv-a) 30%,transparent),transparent 62%),
    radial-gradient(820px 600px at 100% 0%,color-mix(in srgb,var(--lv-b1) 13%,transparent),transparent 60%),
    radial-gradient(1000px 700px at 65% 115%,color-mix(in srgb,var(--lv-c) 17%,transparent),transparent 62%),
    radial-gradient(700px 520px at 35% 55%,rgba(255,255,255,.025),transparent 70%),
    var(--lv-fundo);
  background-attachment:fixed;
}
html:root .app-v3{padding:14px;gap:16px}
html:root .app-v3>.tela{background:transparent}

/* ── vidro: o material de tudo que é cartão ─────────────────────────────── */
html:root .lf-card,html:root .lf-k,html:root .cartao,
html:root .menu,html:root .mbox{
  background:var(--lv-vidro);-webkit-backdrop-filter:var(--lv-blur);backdrop-filter:var(--lv-blur);
  border:1px solid var(--lv-borda);box-shadow:var(--lv-sombra);border-radius:22px}
html:root .mbox{background:rgba(var(--lv-w),.86)}

/* ── o menu: flutuante, item aberto em pílula preta ─────────────────────── */
html:root .menu{width:228px;height:calc(100vh - 28px);top:14px;padding:20px 14px 14px;border-radius:24px;gap:10px;
  --nav-tinta:var(--lv-pilula);--nav-tinta2:var(--lv-ink2);--nav-tinta3:#A9A6BC;--nav-hover:rgba(var(--lv-w),.55);--nav-on:var(--lv-pilula);--nav-borda:rgba(var(--lv-w),.7)}
html:root .menu-marca{font:600 28px/1 var(--disp);letter-spacing:-.01em;padding:2px 10px 8px}
html:root .menu-marca b{font-weight:600}
/* Logo CENTRADO no menu e um pouco maior (Alan, 29/10, com print: 23 → 28 px,
   20 → 24 no notebook, 19 → 23 em janela baixa). O vão de 40 px à direita era
   do botão de recolher, que saiu em 27/10 — era ele que puxava o logo para a
   esquerda. No celular (`.lf-topo`) o logo segue à esquerda. */
html:root body .menu .menu-marca{justify-content:center;padding-left:10px;padding-right:10px}
html:root body .lf-topo .menu-marca{font-size:23px}
/* O logo É o Hoje (29/10/2026): aceso quando o painel do dia é a tela aberta,
   num vidro claro, sem a pílula preta dos itens (o logo já tem cor). */
html:root body .menu .menu-marca{border-radius:16px;transition:background .15s}
html:root body .menu .menu-marca:hover{background:rgba(var(--lv-w),.45)}
html:root body .menu .menu-marca.on{background:rgba(var(--lv-w),.8);box-shadow:0 1px 0 rgba(var(--lv-k),.04),inset 0 0 0 1px rgba(var(--lv-w),.95)}
/* A Busca logo abaixo do logo (print de 30/10: "meio torto, atropelando um
   ao outro"). As margens NEGATIVAS da Busca nas janelas baixas (-3 a -6 px,
   lá em cima) são de quando o logo era só texto; com o logo em cartão claro,
   puxavam a Busca para dentro dele. Aqui elas saem, em toda altura. */
html:root body .menu:not(.dobrado) .menu-adotar{margin-top:0}
/* o traço antes de "Configurações", que fica sem título de grupo */
.menu-sep{height:1px;margin:8px 12px 4px;background:rgba(var(--lv-k,0,0,0),.09);flex:none}
html:root .menu-grupo{font:500 11px/1 var(--sans);color:#A9A6BC;padding:10px 12px 4px}
html:root .menu-nav .menu-grupo+.menu-grupo,html:root .menu-nav .menu-item+.menu-grupo{padding-top:10px}
html:root .menu{gap:6px}
/* O MENU DE CIMA A BAIXO, COM OS ITENS DISTRIBUÍDOS (30/10/2026, Alan: "volte
   pra ela pegando do topo até embaixo, mas redistribua os ícones no espaço
   que sobrar"). A lista ocupa a altura toda e cada item e título de grupo
   cresce um pouco para dividir o vão que sobrava embaixo — até um teto, para
   no monitor grande não virarem botões gigantes. Em janela baixa eles ficam
   no tamanho mínimo, como antes. O nome, Sair e Tema escuro seguem no pé.
   Só acima de 680 de altura: abaixo disso os títulos de grupo viram um traço
   fino e não podem crescer. */
@media (min-width:981px) and (min-height:681px){
  html:root body .menu:not(.dobrado) .menu-nav{flex:1 1 auto}
  html:root body .menu:not(.dobrado) .menu-nav>.menu-item{flex:1 1 auto;max-height:46px}
  html:root body .menu:not(.dobrado) .menu-nav>.menu-grupo{flex:1 1 auto;max-height:40px;display:flex;align-items:flex-end}
  html:root body .menu:not(.dobrado) .menu-nav>.menu-sep{margin-top:auto}
}
html:root .menu-pe-bts{display:flex;flex-wrap:wrap;gap:2px 4px}
html:root .menu-item,html:root .menu-adotar{border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500;color:var(--lv-ink2)}
html:root .menu-item .menu-ic,html:root .menu-adotar .menu-ic{color:#8B88A0}
html:root .menu-item:hover,html:root .menu-adotar:hover{background:rgba(var(--lv-w),.6);color:var(--lv-ink)}
html:root .menu-item.on,html:root .menu-adotar.on{background:var(--lv-pilula);color:var(--lv-pilula-txt);font-weight:500;
  box-shadow:0 8px 20px -10px color-mix(in srgb,var(--lv-a) 80%,transparent)}
html:root .menu-item.on .menu-ic,html:root .menu-adotar.on .menu-ic{color:#F0B429}
html:root .menu-item.on::after{display:none}
html:root .menu-item.on .menu-num{color:var(--lv-pilula-sub)}
html:root .menu-eu{border-top:1px solid rgba(var(--lv-w),.7)}
html:root .menu-av{background:var(--lv-suave);color:var(--lv-suave-txt)}
html:root .menu-emp-bt{border-radius:999px;background:rgba(var(--lv-w),.5);border-color:var(--lv-borda)}

/* ── a barra do alto: pílulas de vidro sobre o chão ─────────────────────── */
html:root .lf-barra{background:transparent;border-bottom:0;padding:0 0 0 2px;height:56px}
html:root .lf-q{height:42px;border-radius:999px;background:var(--lv-vidro);border:1px solid var(--lv-borda);
  -webkit-backdrop-filter:var(--lv-blur);backdrop-filter:var(--lv-blur);box-shadow:var(--lv-sombra);padding:0 16px;width:min(380px,40vw)}
html:root .lf-q kbd{border:0;background:transparent;color:#A9A6BC}
/* A lista que abre embaixo da busca (28/10, print do Alan na Esteira): sem
   fundo próprio ela herdava o vidro do painel e os cartões de trás
   atravessavam as letras. Desfoque não resolve: a pílula da busca já tem o
   dela e o navegador não desfoca de novo por dentro. Fundo cheio, nos dois
   temas. */
html:root .lf-q-res{background:rgb(var(--lv-w));border:1px solid var(--lv-borda);border-radius:18px;box-shadow:var(--lv-sombra-alta)}
html:root .lf-q-res a:hover,html:root .lf-q-res a.on{background:rgba(var(--lv-k),.06)}
html:root .lf-emp .menu-emp-bt{height:42px;border-radius:999px;padding:0 16px;background:var(--lv-vidro);border:1px solid var(--lv-borda);
  -webkit-backdrop-filter:var(--lv-blur);backdrop-filter:var(--lv-blur);box-shadow:var(--lv-sombra)}
html:root .lf-sino{width:42px;height:42px;border-radius:50%;background:var(--lv-vidro);border:1px solid var(--lv-borda);
  -webkit-backdrop-filter:var(--lv-blur);backdrop-filter:var(--lv-blur);box-shadow:var(--lv-sombra);color:var(--lv-ink)}
html:root .lf-sino b{box-shadow:0 0 0 2px rgb(var(--lv-w))}
html:root .lf-av{width:40px;height:40px;background:var(--lv-suave);color:var(--lv-suave-txt);font:600 13px/1 var(--disp)}

/* ── títulos e números ──────────────────────────────────────────────────── */
html:root .lf-hd h1,html:root .es-l1 h1{font:400 38px/1.05 var(--disp);letter-spacing:-.025em;color:var(--lv-ink)}
html:root .lf-hd p{color:var(--lv-ink3);font-size:13.5px;margin-top:8px}
html:root .lf-k{padding:18px 20px 16px;gap:2px}
html:root .lf-k-rot{font-size:13px;color:var(--lv-ink2);font-weight:500}
html:root .lf-k-v{font:300 48px/1.05 var(--disp);letter-spacing:-.035em;margin:8px 0 8px}
html:root .lf-k-d{font-size:12.5px;color:var(--lv-ink3)}
/* a parte menos importante do número grande, mais clara ("110,3 mil") */
.lf-k .lf-k-v sub{font-size:22px;font-weight:300;color:#A9A6BC;vertical-align:baseline;letter-spacing:-.01em;margin-left:4px}
html:root .lf-ch{border-bottom:0;padding:18px 22px 8px}
html:root .lf-ch h2{font:500 19px/1.2 var(--disp);letter-spacing:-.01em}
html:root .lf-lk{color:var(--lv-ink3)}
/* o herói: o 1º cartão de números de cada tela, vidro tingido pelas três cores */
html:root body:not([data-heroi]) .lf-ks>.lf-k:first-child,html:root body[data-heroi="2"] .lf-ks>.lf-k:nth-child(2),html:root body[data-heroi="3"] .lf-ks>.lf-k:nth-child(3),html:root body[data-heroi="4"] .lf-ks>.lf-k:nth-child(4),html:root .lf-k.lv-heroi{
  background:linear-gradient(140deg,color-mix(in srgb,var(--lv-a) var(--lv-h1),rgba(var(--lv-w),.35)) 0%,
    color-mix(in srgb,var(--lv-b1) var(--lv-h2),rgba(var(--lv-w),.45)) 55%,color-mix(in srgb,var(--lv-c) var(--lv-h3),rgba(var(--lv-w),.4)) 100%);
  box-shadow:inset 0 1px 0 rgba(var(--lv-w),.9),0 20px 44px -22px color-mix(in srgb,var(--lv-a) 75%,transparent);
  position:relative;overflow:hidden}
html:root body:not([data-heroi]) .lf-ks>.lf-k:first-child::after,html:root body[data-heroi="2"] .lf-ks>.lf-k:nth-child(2)::after,html:root body[data-heroi="3"] .lf-ks>.lf-k:nth-child(3)::after,html:root body[data-heroi="4"] .lf-ks>.lf-k:nth-child(4)::after,html:root .lf-k.lv-heroi::after{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;
  border-radius:50%;background:radial-gradient(circle,rgba(var(--lv-w),.55),transparent 65%);pointer-events:none}
html:root .lf-ks{gap:14px}
/* o complemento em cinza dos títulos ("Busca no PNCP") */
.lv-cinza{color:#B4B1C6;font-weight:inherit}
html.escuro .lv-cinza{color:var(--tinta4)}

/* ── botões: pílulas; o principal escuro com o anel colorido ────────────── */
html:root .bt{height:42px;padding:0 18px;border-radius:999px;font-size:13.5px}
html:root .bt:not(.fantasma){background:var(--lv-pilula);color:var(--lv-pilula-txt);
  box-shadow:0 0 0 2px rgba(var(--lv-w),.85),0 0 0 4px color-mix(in srgb,var(--lv-c) 75%,var(--lv-b1)),0 12px 28px -10px color-mix(in srgb,var(--lv-a) 80%,transparent)}
html:root .bt:not(.fantasma):hover{background:var(--lv-pilula-hover)}
html:root .bt.fantasma{background:var(--lv-vidro2);border:1px solid var(--lv-borda);box-shadow:0 1px 2px rgba(22,20,31,.05)}
html:root .bt.pequeno{height:32px;padding:0 13px;font-size:12.5px;border-radius:999px}
html:root .lf-chip{height:36px;padding:0 14px;background:var(--lv-vidro2);border:1px solid var(--lv-borda);font-size:12.5px}
html:root .lf-chip.on{background:var(--lv-pilula);border-color:var(--lv-pilula);color:var(--lv-pilula-txt)}
html:root .seg{background:rgba(var(--lv-w),.45);border:1px solid var(--lv-borda);border-radius:999px;padding:3px}
html:root .seg span{border-radius:999px}
html:root .seg span.on{background:var(--lv-pilula);color:var(--lv-pilula-txt)}

/* ── campos ─────────────────────────────────────────────────────────────── */
html:root .campo,html:root .lf-tela-campo{height:42px;border-radius:14px;background:rgba(var(--lv-w),.6);border:1px solid var(--lv-borda)}
html:root textarea.campo{height:auto}
html:root .campo:focus{border-color:var(--lv-a);box-shadow:var(--foco)}

/* ── tabelas ────────────────────────────────────────────────────────────── */
html:root .lf-tb th{background:transparent;font-size:11.5px;font-weight:600;color:var(--lv-ink3);text-transform:uppercase;letter-spacing:.05em;border-bottom:0}
html:root .lf-tb td{border-bottom:0}
html:root .lf-tb tbody tr:nth-child(even) td{background:rgba(var(--lv-w),.35)}
html:root .lf-tb tbody tr.lf-ln:hover td{background:rgba(var(--lv-w),.6)}

/* ── selos e pílulas de estado ──────────────────────────────────────────── */
html:root .pill,html:root .lf-dl{border-radius:999px}

@media (max-width:980px){
  html:root .app-v3{padding:0;gap:0}
  html:root .menu{height:auto;border-radius:0}
}

/* ── AVISOS, JANELAS E MENSAGENS NA LEVEZA (28/10/2026, Alan com print do
   "Não participo · … Desfazer": "está com o visual antigo… quaisquer mensagens
   ou telas arrumadas para a identidade visual"). Uma família só, nos dois
   temas: superfície flutuante de vidro (`--lv-flut`, quase opaca para o texto
   de trás não atravessar), cantos redondos, botão principal na pílula, o
   secundário em vidro, e cor só onde tem significado (âmbar = atenção,
   vermelho = urgente/erro). Os ids e as classes são os de sempre. */
html:root .ovl{background:var(--lv-veu);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html:root .mbox{background:var(--lv-flut);border:1px solid var(--lv-borda);border-radius:24px;box-shadow:var(--lv-sombra-alta)}
html:root .mtopo{border-bottom:1px solid rgba(var(--lv-k),.07)}
html:root .mtit b{font:500 17px/1.25 var(--disp);color:var(--lv-ink)}
html:root .mtit span{color:var(--lv-ink3)}
html:root .mx{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--lv-ink3)}
html:root .mx:hover{background:rgba(var(--lv-k),.07);color:var(--lv-ink)}
html:root .mbusca{height:38px;border-radius:999px;padding:0 14px;background:rgba(var(--lv-w),.7);border:1px solid rgba(var(--lv-k),.12);color:var(--lv-ink)}
html:root .mbusca:focus{border-color:var(--lv-a);box-shadow:var(--foco);outline:none}
html:root .msec{color:var(--lv-a3);font-family:var(--disp);font-size:13px;font-weight:600}
html:root .msec.outros{color:var(--lv-ink3)}
html:root .mit{border-radius:14px}
/* o item que casa com a busca: tinta da cor A, filete à esquerda e o número
   em pílula — é ele que decide se vale participar */
html:root .mit.destaque{background:color-mix(in srgb,var(--lv-a) 11%,rgba(var(--lv-w),.75));
  border:1px solid color-mix(in srgb,var(--lv-a) 30%,transparent);box-shadow:inset 3px 0 0 var(--lv-a)}
html:root .mit.destaque .mit-n{color:var(--lv-a3);font-weight:700}
html:root .mit.outro{color:var(--lv-ink3)}
html:root .mit-d mark{background:color-mix(in srgb,var(--lv-b1) 45%,transparent);color:inherit;border-radius:4px}
html:root .mit-tot{color:var(--lv-ink)}
html:root .mqual{background:rgba(var(--lv-w),.45);border-top:1px solid rgba(var(--lv-k),.07)}
html:root .dica-itens{background:var(--lv-pilula);color:var(--lv-pilula-txt);border-radius:14px;box-shadow:var(--lv-sombra-alta)}

/* o "Não participo · … Desfazer" e as pílulas de aviso do alto e de baixo */
html:root .lf-desfazer,html:root .lf-visitante,html:root .lf-conta,html:root .lf-busca{
  background:var(--lv-flut);color:var(--lv-ink);border:1px solid var(--lv-borda);
  -webkit-backdrop-filter:var(--lv-blur);backdrop-filter:var(--lv-blur);box-shadow:var(--lv-sombra-alta)}
html:root .lf-desfazer{border-radius:999px;padding:8px 8px 8px 20px;font-size:13px}
html:root .lf-desfazer .lf-dz-t{color:var(--lv-ink2)}
html:root .lf-desfazer .lf-dz-t b{color:var(--lv-ink)}
html:root .lf-desfazer .lf-dz-b{height:34px;padding:0 16px;border-radius:999px;background:var(--lv-pilula);color:var(--lv-pilula-txt);
  box-shadow:0 0 0 2px rgba(var(--lv-w),.85),0 0 0 3.5px color-mix(in srgb,var(--lv-c) 75%,var(--lv-b1))}
html:root .lf-desfazer .lf-dz-b:hover{background:var(--lv-pilula-hover)}
html:root .lf-desfazer .lf-dz-x{width:30px;height:30px;border-radius:50%;color:var(--lv-ink3)}
html:root .lf-desfazer .lf-dz-x:hover{background:rgba(var(--lv-k),.07);color:var(--lv-ink)}
html:root .lf-visitante,html:root .lf-conta,html:root .lf-busca{border-radius:999px;padding:8px 16px;font-size:12.5px}
html:root .lf-conta a,html:root .lf-busca a{color:var(--link)}
html:root .lf-conta.perto{border-color:color-mix(in srgb,var(--lv-b) 55%,transparent);background:color-mix(in srgb,var(--lv-av-f) 60%,var(--lv-flut))}
html:root .lf-conta.fechada,html:root .lf-busca.falhou{background:var(--lv-ru-f);border-color:var(--lv-ru-borda);color:var(--lv-ru-t)}
html:root .lf-conta.fechada a,html:root .lf-busca.falhou a{color:var(--lv-ru-t)}

/* "Avisar no Windows…", instalar o app e o alerta de disputa chegando */
html:root .lf-notif-pede,html:root .lf-instalar,html:root .lf-alerta{
  background:var(--lv-flut);color:var(--lv-ink);border:1px solid var(--lv-borda);border-radius:22px;
  -webkit-backdrop-filter:var(--lv-blur);backdrop-filter:var(--lv-blur);box-shadow:var(--lv-sombra-alta)}
html:root .lf-notif-pede{padding:18px}
html:root .lf-notif-pede b{font:500 16px/1.3 var(--disp);color:var(--lv-ink)}
html:root .lf-notif-pede span,html:root .lf-instalar span{color:var(--lv-ink3)}
html:root .lf-instalar .x{color:var(--lv-ink3)}
html:root .lf-alerta{border-left:0;box-shadow:inset 4px 0 0 var(--lv-b),var(--lv-sombra-alta);padding:12px 14px 12px 18px}
html:root .lf-alerta.urg{box-shadow:inset 4px 0 0 var(--ruim),var(--lv-sombra-alta)}
html:root .lf-alerta-n{font:300 32px/1 var(--disp);letter-spacing:-.03em;color:var(--lv-ink)}
html:root .lf-alerta-t b{color:var(--lv-ink)}
html:root .lf-alerta-t span{color:var(--lv-ink3)}
html:root .lf-alerta-x{border-radius:50%;color:var(--lv-ink3)}
html:root .lf-alerta-x:hover{background:rgba(var(--lv-k),.07);color:var(--lv-ink)}
html:root .lf-pisca.atn{--c:var(--lv-b)}
html:root .cofre-pop{background:var(--lv-flut);border:1px solid var(--lv-borda);border-radius:20px;box-shadow:var(--lv-sombra-alta);
  -webkit-backdrop-filter:var(--lv-blur);backdrop-filter:var(--lv-blur)}

/* ── A COMEMORAÇÃO DO GANHO (27/10/2026) — `LF.celebrarGanho`, a receita do
   CRM Fluxo nas cores da paleta: o cartão de vidro tingido pelas três
   cores, claro ou escuro conforme o tema (o dourado do escuro saiu em 28/10). */
.lf-cel{position:fixed;inset:0;z-index:9100;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(22,20,31,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:lfCelFade .3s ease both}
.lf-cel-conf{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9101}
.lf-cel-card{position:relative;z-index:9102;width:min(460px,100%);border-radius:28px;padding:32px 28px 24px;text-align:center;color:#16141F;
  background:radial-gradient(120% 100% at 0% 0%,color-mix(in srgb,var(--ca) 55%,transparent),transparent 62%),
    radial-gradient(110% 90% at 100% 0%,color-mix(in srgb,var(--cb) 45%,transparent),transparent 60%),
    radial-gradient(110% 100% at 50% 130%,color-mix(in srgb,var(--cc) 80%,transparent),transparent 62%),rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,0 30px 80px -20px color-mix(in srgb,var(--ca) 70%,rgba(0,0,0,.4));
  animation:lfCelPop .55s cubic-bezier(.2,.9,.3,1.25) both}
.lf-cel-ic{width:76px;height:76px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(140deg,var(--ca),var(--cb) 70%,var(--cc));
  box-shadow:0 0 0 10px rgba(255,255,255,.55),0 0 0 11px color-mix(in srgb,var(--cc) 60%,transparent),0 14px 40px -8px var(--ca);
  animation:lfCelGira .8s .1s cubic-bezier(.3,1.6,.5,1) both}
.lf-cel-ic svg{width:36px;height:36px}
.lf-cel-k{font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:22px 0 6px;color:var(--lv-ink2);animation:lfCelSobe .5s .3s both}
.lf-cel-v{font:300 46px/1.1 var(--disp,var(--sans));letter-spacing:-.035em;font-variant-numeric:tabular-nums;animation:lfCelSobe .5s .4s both}
.lf-cel-t{font-size:14.5px;font-weight:600;margin-top:8px;line-height:1.4;animation:lfCelSobe .5s .5s both}
.lf-cel-s{font-size:13px;color:var(--lv-ink2);margin-top:4px;line-height:1.45;animation:lfCelSobe .5s .55s both}
.lf-cel-ok{margin-top:22px;height:46px;padding:0 22px;border:0;border-radius:999px;background:#16141F;color:#fff;font:600 14px/1 var(--sans);cursor:pointer;
  box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 0 4px color-mix(in srgb,var(--cc) 75%,var(--cb)),0 12px 28px -10px var(--ca);
  animation:lfCelSobe .5s .65s both}
.lf-cel-ok:focus-visible{outline:3px solid var(--cb);outline-offset:4px}
/* no escuro: o mesmo cartão com as luzes da paleta, sobre o ardósia */
.lf-cel-escuro{background:rgba(5,6,10,.62)}
.lf-cel-escuro .lf-cel-card{color:#ECEDF3;border-color:rgba(255,255,255,.1);
  background:radial-gradient(120% 100% at 0% 0%,color-mix(in srgb,var(--ca) 38%,transparent),transparent 62%),
    radial-gradient(110% 90% at 100% 0%,color-mix(in srgb,var(--cb) 22%,transparent),transparent 60%),
    radial-gradient(110% 100% at 50% 130%,color-mix(in srgb,var(--cc) 34%,transparent),transparent 62%),rgba(26,29,40,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 80px -20px color-mix(in srgb,var(--ca) 55%,rgba(0,0,0,.8))}
.lf-cel-escuro .lf-cel-ic{box-shadow:0 0 0 10px rgba(255,255,255,.06),0 0 0 11px color-mix(in srgb,var(--cc) 45%,transparent),0 14px 40px -8px var(--ca)}
.lf-cel-escuro .lf-cel-k{color:#B9BCCB}
.lf-cel-escuro .lf-cel-s{color:rgba(236,237,243,.72)}
.lf-cel-escuro .lf-cel-ok{background:#ECEDF3;color:#14161D;
  box-shadow:0 0 0 2px rgba(26,29,40,.9),0 0 0 4px color-mix(in srgb,var(--cc) 75%,var(--cb)),0 12px 28px -10px var(--ca)}
@keyframes lfCelFade{from{opacity:0}to{opacity:1}}
@keyframes lfCelPop{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
@keyframes lfCelSobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lfCelGira{from{opacity:0;transform:scale(.3) rotate(-160deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.lf-cel,.lf-cel *{animation:none!important}}

/* ── RESPONSIVO DA LEVEZA (29/10/2026) ───────────────────────────────────────
   Alan: "no meu note de 14 polegadas parece tudo meio estourado". O desenho da
   Leveza foi medido num monitor grande (1920 px): título de 38 px, números de
   48 px, menu de 228 px e botões de 42 px. Num 14" com o Windows em 125% ou
   150% sobram 1280 a 1536 px de largura e 600 a 730 de altura, e a tela Hoje
   mostrava só a saudação e os quatro números.
   Três degraus, sem mudar nada no monitor grande (fotos idênticas, conferido):
   - NOTEBOOK (981 a 1600 px de largura, ou janela com até 860 de altura):
     tudo cerca de 20% menor, margens mais curtas;
   - JANELA BAIXA (até 680 de altura): mais um aperto na altura;
   - TABLET E CELULAR (até 980 / 700 px): margens de volta (a Leveza zerava as
     da Esteira, e o título encostava na borda), números e títulos menores.
   `html:root body` na frente: as telas trazem as regras da Leveza no próprio
   <style>, que vem depois do base.css, e só ganha delas quem pesa mais.
   Comparação antes/depois em cada aparelho: docs/responsivo/comparar-telas.html
   (aprovada pelo Alan em 29/10). */

@media (min-width:981px) and (max-width:1600px), (min-width:981px) and (max-height:860px){
  html:root body .app-v3{padding:10px;gap:12px}
  html:root body .menu{width:204px;height:calc(100vh - 20px);top:10px;padding:16px 12px 12px;border-radius:20px}
  html:root body .menu-marca{font-size:24px}
  html:root body .menu-item,html:root body .menu-adotar{font-size:12.5px;padding-left:11px;padding-right:11px}
  html:root body .menu-grupo{font-size:10.5px}

  html:root body .lf-barra{height:46px}
  html:root body .lf-q{height:36px;width:min(340px,34vw)}
  html:root body .lf-emp .menu-emp-bt{height:36px;padding:0 13px}
  html:root body .lf-sino{width:36px;height:36px}
  html:root body .lf-av{width:34px;height:34px;font-size:12px}

  html:root body .lf-pg{padding:12px 18px 32px 18px;gap:14px}
  html:root body .lf-hd h1{font-size:29px}
  html:root body .lf-hd p{font-size:12.5px;margin-top:4px}
  html:root body .bt{height:36px;padding:0 15px;font-size:12.5px}
  html:root body .bt.pequeno{height:30px}
  html:root body .lf-chip{height:32px;padding:0 12px;font-size:12px}

  html:root body .lf-ks{gap:12px}
  html:root body .lf-k{padding:13px 16px 12px}
  html:root body .lf-k-v{font-size:36px;margin:4px 0 6px}
  html:root body .lf-k .lf-k-v sub{font-size:17px}
  html:root body .lf-k .lf-k-v em{font-size:11px;padding:4px 8px;top:-5px;margin-left:8px}
  html:root body .lv-kh{font-size:12.5px}
  html:root body .lv-lin{font-size:12px;gap:3px 10px}

  html:root body .lv-ch{padding:14px 16px 0}
  html:root body .lv-ch h2,html:root body .lf-ch h2{font-size:16.5px}
  html:root body .lf-ch{padding:14px 16px 6px}
  html:root body .lv-abas button{padding:5px 10px;font-size:11.5px}
  html:root body .lv-graf{padding:6px 16px 14px;min-height:300px}
  html:root body .lv-tot{margin:6px 0 2px}
  html:root body .lv-tot b{font-size:21px}
  html:root body .lv-barras{min-height:170px;gap:16px;padding-top:16px}
  html:root body .lv-disp{padding:6px 10px 10px;gap:2px}
  html:root body .lv-dl{padding:6px;gap:10px}
  html:root body .lv-dia{width:40px;height:44px;border-radius:12px}
  html:root body .lv-dia b{font-size:16px}
  html:root body .lv-org{width:32px;height:32px;font-size:11px}
  html:root body .lv-dl .v b{font-size:14px}

  /* Esteira */
  html:root body .es-cab{padding:2px 2px 8px;gap:10px}
  html:root body .es-l1 h1{font-size:27px}
  html:root body .es-l1 .lf-chip{height:34px}
  html:root body .seg span{padding:5px 11px;font-size:12px}
  html:root body .es-chip{height:32px;font-size:12px}
  html:root body .es-chip b{font-size:13px}
  html:root body .lname{font-size:14.5px}
  html:root body .board .lhead{padding:12px 12px 4px}
  /* `.board` na frente: o Pregão e o Cofre também têm `.card`, com outro desenho */
  html:root body .board .card{padding:11px 12px;gap:6px;border-radius:16px}
  html:root body .lv-cd-v b{font-size:23px}
  html:root body .lv-cd-v b sub{font-size:13px}

  /* Tabelas (29/10, Atas e empenhos com a coluna Pagamento cortada): o título
     da coluna em CAIXA ALTA sem quebrar ("SALDO A EMPENHAR") era quem ditava a
     largura; agora ele quebra em duas linhas, e o vão entre colunas encolhe.
     O primeiro e o último vão de quem define o seu (Configurações) continuam. */
  html:root body .lf-tb th{white-space:normal;line-height:1.25;height:auto;padding-top:8px;padding-bottom:8px;vertical-align:bottom}
  html:root body .lf-tb th,html:root body .lf-tb td{padding-left:10px;padding-right:10px}
  html:root body .lf-tb td{height:44px}
  html:root body .lf-pr{min-width:96px;gap:8px}
}

/* Janela baixa (14" em 150%: ~600 px de altura útil). */
@media (min-width:981px) and (max-height:680px){
  html:root body .lf-pg{padding-top:6px;gap:12px}
  html:root body .lf-hd h1{font-size:26px}
  html:root body .lf-k-v{font-size:32px;margin:2px 0 4px}
  html:root body .lv-graf{min-height:260px}
  html:root body .lv-barras{min-height:140px}
}

/* Tablet e celular: o menu já é gaveta; aqui voltam as margens e os tamanhos. */
@media (max-width:980px){
  html:root body .lf-pg{padding:18px 20px 32px;gap:14px}
  html:root body .lf-hd h1{font-size:30px}
  html:root body .lf-k{padding:14px 16px 12px}
  html:root body .lf-k-v{font-size:38px;margin:4px 0 6px}
  html:root body .lv-graf{min-height:300px}
  html:root body .lv-barras{min-height:180px}
  html:root body .es-cab{padding:16px 20px 8px}
  html:root body .es-l1 h1{font-size:28px}
  html:root body .board{padding:6px 20px 16px}
}
@media (max-width:700px){
  html:root body .lf-pg{padding:14px 14px 28px;gap:12px}
  html:root body .lf-hd{gap:12px}
  html:root body .lf-hd h1{font-size:24px;line-height:1.15}
  html:root body .lf-hd p{font-size:12.5px}
  html:root body .lf-acoes{width:100%}
  html:root body .lf-acoes .bt{flex:1;justify-content:center;height:40px;padding:0 12px;font-size:13px}
  html:root body .lf-ks{gap:10px}
  html:root body .lf-k{padding:12px 13px 11px;border-radius:18px}
  html:root body .lv-kh{font-size:12px}
  html:root body .lv-kh small{display:none}
  html:root body .lf-k-v{font-size:30px;margin:2px 0 4px}
  html:root body .lf-k .lf-k-v sub{font-size:14px;margin-left:3px}
  html:root body .lf-k .lf-k-v em{font-size:10.5px;padding:3px 7px;top:-4px;margin-left:6px}
  html:root body .lv-lin{font-size:11.5px;gap:3px 6px}
  html:root body .lv-ch{padding:14px 14px 0;flex-wrap:wrap}
  html:root body .lv-ch h2{font-size:16px}
  html:root body .lv-graf{padding:4px 14px 12px;min-height:250px}
  html:root body .lv-tot{gap:18px}
  html:root body .lv-tot b{font-size:19px}
  html:root body .lv-barras{min-height:140px;gap:10px}
  /* o balão cobria as barras vizinhas; os totais já estão logo acima */
  html:root body .lv-bal{display:none}
  html:root body .lv-disp{padding:6px 8px 10px}
  html:root body .lv-dl{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:6px}
  html:root body .lv-dl .lv-org{display:none}

  /* Esteira: título numa linha só, ferramentas e etiquetas menores, e a
     margem que a Leveza tinha zerado de volta. */
  html:root body .es-cab{padding:12px 14px 6px;gap:8px}
  html:root body .es-l1{gap:6px}
  html:root body .es-l1 h1{font-size:24px;flex:1 1 100%;margin:0 0 2px}
  html:root body .es-l1 .lf-chip,html:root body .es-pers-bt{height:32px;font-size:12px;padding:0 11px}
  html:root body .es-pers-bt{width:32px;padding:0}
  html:root body #expandir{margin-left:0}
  html:root body .seg span{padding:5px 10px;font-size:12px}
  html:root body .es-chip{height:30px;font-size:11.5px;padding:0 10px}
  html:root body .board{padding:8px 12px 14px}
  html:root body .board .rail{width:auto;border-radius:16px}
  html:root body .board .lane{border-radius:18px}
  html:root body .board .card{padding:12px;border-radius:16px}
  html:root body .lv-cd-v b{font-size:24px}
}

/* ── MENU SEM ROLAR NO NOTEBOOK (29/10/2026) ─────────────────────────────────
   Alan: "barra lateral, veja se pode melhorar um pouco, pra não ter que ficar
   abaixando ela". Medido no 14" dele (janela de 1280×621): os 17 itens com os
   títulos de grupo pediam 614 px e só sobravam 376. Agora, em janela de até
   820 de altura: itens mais baixos (26 px), títulos de grupo menores, e o
   cartão com o nome sai do pé do menu — o mesmo nome e a foto já estão no
   alto à direita (e levam à Conta); "Sair" e "Tema escuro" ficam. Até 680 de
   altura os títulos de grupo viram um traço fino, como no menu recolhido; até
   600, os itens apertam mais um pouco. Medido: cabe sem rolar de 1280×560
   para cima. `:not(.dobrado)`: o recolhido tem as medidas próprias dele. */
@media (min-width:981px) and (max-height:820px){
  html:root body .menu:not(.dobrado){padding:12px 10px 8px;gap:4px}
  html:root body .menu:not(.dobrado) .menu-marca{font-size:23px;padding:2px 10px 6px}
  html:root body .menu:not(.dobrado) .menu-item,
  html:root body .menu:not(.dobrado) .menu-adotar{padding-top:3px;padding-bottom:3px;margin-top:3px}
  html:root body .menu:not(.dobrado) .menu-nav{gap:1px}
  html:root body .menu:not(.dobrado) .menu-grupo{font-size:10px;padding:7px 12px 2px}
  html:root body .menu:not(.dobrado) .menu-nav .menu-grupo+.menu-grupo,
  html:root body .menu:not(.dobrado) .menu-nav .menu-item+.menu-grupo{padding-top:7px}
  html:root body .menu:not(.dobrado) .menu-eu{display:none}
  html:root body .menu:not(.dobrado) .menu-pe{margin-top:6px;padding-top:4px;border-top:1px solid rgba(var(--lv-w),.7)}
  html:root body .menu:not(.dobrado) .menu-sair,
  html:root body .menu:not(.dobrado) .menu-tema{padding:5px 10px;margin-top:0}
}
@media (min-width:981px) and (max-height:680px){
  html:root body .menu:not(.dobrado) .menu-nav .menu-grupo,
  html:root body .menu:not(.dobrado) .menu-nav .menu-grupo+.menu-grupo,
  html:root body .menu:not(.dobrado) .menu-nav .menu-item+.menu-grupo{font-size:0;line-height:0;height:1px;padding:0;margin:5px 12px;
    background:rgba(var(--lv-k),.09);overflow:hidden;flex:none}
  /* 29/10/2026: com o menu novo (um item e o traço de Configurações a mais)
     "Configurações" caía abaixo da dobra numa janela de 620 — itens e traço
     um pouco mais justos aqui */
  html:root body .menu:not(.dobrado) .menu-item,
  html:root body .menu:not(.dobrado) .menu-adotar{padding-top:2px;padding-bottom:2px}
  html:root body .menu:not(.dobrado) .menu-sep{margin:5px 12px}
}
/* E entre 821 e 1000 de altura (notebook em 125%: 864 úteis), onde o cartão
   com o nome ainda aparece no pé: o menu de 29/10 rolava até 74 px. */
@media (min-width:981px) and (min-height:821px) and (max-height:1000px){
  html:root body .menu:not(.dobrado) .menu-item,
  html:root body .menu:not(.dobrado) .menu-adotar{padding-top:4px;padding-bottom:4px}
  html:root body .menu:not(.dobrado) .menu-grupo{padding-top:8px;padding-bottom:3px}
  html:root body .menu:not(.dobrado) .menu-sep{margin:6px 12px 3px}
}
@media (min-width:981px) and (max-height:600px){
  html:root body .menu:not(.dobrado) .menu-item,
  html:root body .menu:not(.dobrado) .menu-adotar{padding-top:1px;padding-bottom:1px}
}