/* =====================================================================
   estilo.css — A FOLHA DE ESTILO DO ACOMPANHAMENTO POR TECNICO
   =====================================================================
   ⚠️ ESTE ARQUIVO E O CONTRATO ENTRE DESIGN E CODIGO. Ate 16/08/2026 ele
   vivia dentro de `templates/base.html`, num bloco <style> colado ao Jinja —
   e isso impedia o trabalho de design de acontecer em outro lugar sem
   conflito: quem desenhasse teria que editar o MESMO arquivo onde moram
   `{% block %}`, `{% for %}` e a logica do cabecalho de dois andares.

   A FRONTEIRA, agora:
     * este arquivo  -> CSS puro, zero Jinja. E o territorio do DESIGN.
     * templates/    -> marcacao e logica. Territorio do CODIGO.
   As duas pontas viajam pelo git; nada se copia a mao.

   O ALVO PARA OLHAR e `static/exemplo.html`, um instantaneo estatico da tela
   real (com as classes de verdade e SEM nome de pessoa) que abre sozinho no
   navegador e aponta para esta folha. Regerar com:
       .venv/bin/python ops/gerar_exemplo_design.py

   ⚠️ CLASSES QUE O TEMPLATE GERA E QUE NAO PODEM SUMIR DAQUI — cada uma
   carrega significado que ja custou defeito:
     .st-bom .st-atencao .st-ruim .st-escala .st-piso   estado declarado
     .pouca-base                                        base abaixo do piso
     .ini-grupo                                         fronteira de SECAO
     .fam .f0..f6                                       familia de colunas
     .c-rotulo .rot-cx .rot .recuo .abrir .funil        a coluna congelada
     .tem-barra                                         barra de proporcao
     .valor .dt .vazio .legenda .notas                  celula e apoio
   Renomear qualquer uma quebra a tela em silencio: o CSS deixa de casar com
   a marcacao e nao ha erro, so um painel sem cor. A suite `teste_cor.py` le
   ESTA folha e reprova se os canais de estado sumirem.
   ===================================================================== */
/* =====================================================================
   IDENTIDADE VISUAL R2 — Manual da Marca v1.0 (2026), aplicada em 16/08/2026.
   Fonte: amostras/R2-Brand-Kit/R2-Brand-Book.html

   POR QUE O TEMA E CLARO, e nao escuro como a versao anterior:
   o proprio manual mede o contraste e declara `Ink / Papel = 15:1 · AAA`
   como o par de leitura. A marca e clara. A tela seguiu a marca, nao o
   gosto de quem programou.

   A REGRA DO AMARELO, copiada do manual palavra por palavra:
   "o amarelo e acento: use em blocos, barras e detalhes — NUNCA como texto
   sobre fundo claro. Meta minima: WCAG AA (4,5:1) para texto."
   Amarelo / Branco = 1,5:1 — reprovado. Por isso ele so aparece aqui como
   barra e marcador, jamais como cor de texto ou de numero.

   E O PRINCIPIO DE LAYOUT, tambem do manual:
   "margens amplas e muito espaco em branco — clareza antes de densidade."
   Numa tabela de operacao isso tem limite pratico; a solucao adotada foi
   manter a AREA DE DADOS neutra e calma (Ink sobre Papel, sem cor
   decorativa) e usar o Vinho apenas no CROMO — cabecalho, botao primario,
   link e marcadores. E o que grandes marcas fazem em produto denso.
   ===================================================================== */
:root{
  /* --- paleta oficial R2 --- */
  --vinho:      #9D0D16;   /* PANTONE 484 C — primaria */
  --vinho-vivo: #C6121E;   /* estados ativos */
  --vinho-esc:  #780A11;   /* pressionado */
  --amarelo:    #FFCC00;   /* PANTONE 123 C — ACENTO, nunca texto */
  --ambar:      #E0A106;   /* alerta */
  --ink:        #1A1614;   /* texto */
  --grafite:    #555049;   /* texto secundario */
  --nevoa:      #E7E2DB;   /* bordas e divisores */
  --papel:      #F6F4F1;   /* fundo */
  --branco:     #FFFFFF;
  --nevoa-clara:#EFEAE2;

  /* =================================================================
     TOKENS DO HANDOFF DE DESIGN — 2026-08-17
     -----------------------------------------------------------------
     Vieram de `amostras/design_handoff_acompanhamento_login/tokens.css`.
     Eles resolvem um problema REAL e nomeado na analise que veio junto: a
     folha nao tinha cinza terciario, nem uma segunda hairline (mais forte
     que --nevoa, para fronteira de BLOCO), nem tinta de selecao de linha —
     e sem esses, cada tela nova inventa um valor a 1-9 unidades dos que ja
     existem, diferenca invisivel a olho nu que so aparece quando duas
     vistas se encontram.

     🔴 POR QUE ELES FORAM ACRESCENTADOS E NAO SUBSTITUIRAM O :root.
     O handoff mandava COLAR por cima, substituindo o bloco inteiro. Medido
     antes de obedecer: isso apagaria 35 tokens, dos quais 30 EM USO, em
     118 lugares da folha — porque o pacote RENOMEIA o vocabulario base
     (--papel virou --bg, --texto virou --ink, --nevoa virou --linha,
     --painel/--branco viraram --surf). Cada `var()` orfao vira propriedade
     IGNORADA pelo navegador, sem erro nenhum: a tela nao quebra, ela
     desbota. Some junto TODA a escala tipografica (--t-*), as SEIS cores de
     familia e — pior — os tokens de canal de estado (--st-ruim-fundo,
     --st-ruim-barra, --st-atencao-fundo), que sao o que sustenta a WCAG
     1.4.1 e o que o teste_cor.py cobra.

     A saida: os nomes NOVOS entram como fonte da verdade, e os ANTIGOS
     continuam existindo apontando para eles (bloco de apelidos abaixo).
     Assim a folha de 944 linhas nao precisa ser reescrita de uma vez, e a
     migracao pode ser feita por pedaco, verificavel.
     ================================================================= */

  /* --- superficie e texto, vocabulario novo --- */
  --bg:           #F6F4F1;   /* fundo da aplicacao */
  --surf:         #FFFFFF;   /* cartao, cabecalho, rail */
  --surf-2:       #F4F0EA;   /* linha de total, segmento ativo */
  --surf-3:       #EFEAE2;   /* trilho de barra, avatar */
  --linha:        #E7E2DB;   /* hairline padrao */
  --linha-fina:   #F4F0EA;   /* divisor entre linhas da grade */

  /* --- os que NAO existiam, e cuja ausencia gerava paleta paralela --- */
  --linha-bloco:  #D8D2C9;   /* fronteira de BLOCO (familia de colunas) */
  --fraco-branco: #7A7268;   /* terciario sobre branco/surf .... 4,74:1 */
  --fraco-papel:  #6F665C;   /* terciario sobre papel/banda .... 5,17:1 */
  --ctrl-linha:   #7A7268;   /* contorno de CONTROLE (WCAG 1.4.11, >=3:1) */
  --selecao:      #FDF6F6;   /* fundo de linha selecionada */
  /* 🔴 TRES TOKENS QUE FALTAVAM, e cada ausencia tinha um custo medido.
     --selecao-linha ERA ORFAO: `.aviso-erro` do login pedia
       `border:1px solid var(--selecao-linha)` e o token nao existia em mapa
       nenhum. `var()` sem valor invalida a declaracao INTEIRA, entao
       `border-style` voltava a `none` e o banner de 'Usuario ou senha
       invalidos' ficava sem caixa — 1,07:1 contra o branco do cartao.
     --aviso-fundo e --linha-hover eram HEX CLARO FIXO (#FFFBEE, #F2EEE8).
       No tema escuro mediam 1,17:1 e 1,04:1 — invisiveis. E o `.aviso` e
       justamente onde se explica o silencio do dia vivo: o texto que mais
       precisa ser lido era o menos legivel. Valores do handoff §3.1. */
  --selecao-linha:#F6D9DB;   /* contorno de selecao e de banner de erro */
  --aviso-fundo:  #FFFBEE;   /* fundo do aviso de contexto */
  --linha-hover:  #F2EEE8;   /* linha da tabela sob o mouse */
  /* 🔴 O FIM DO GRADIENTE DE CROMO. Era o literal #FBF9F7 no `header` e
     nas `.notas` — e literal claro nao inverte. No tema escuro o cabecalho
     ia de #16181B (topo) a QUASE BRANCO (base), e a migalha "Operacao",
     em --fraco-branco, caia justo na parte clara e SUMIA.
     ⚠️ E o defeito quase passou por MEDICAO ERRADA: medi o texto contra o
     fundo do `body` e deu 5,93:1 (aprova). O fundo que de fato o pinta era
     o GRADIENTE, nao o body. Medir contra a superficie errada aprova o que
     esta errado — so a renderizacao ampliada denunciou. */
  --cromo-fim:    #FBF9F7;   /* base do gradiente de cabecalho e painel */
  /* 🔴 MAIS DOIS LITERAIS CLAROS QUE NAO INVERTIAM. A varredura que os achou
     foi mecanica, e vale repetir: tire da folha TODO bloco de tema escuro e
     procure hex de luminancia alta no que sobra — o que sobra e o que vale
     nos DOIS temas, e hex claro ali e pedaco de tela que nao inverte.
     Achou 6 em 17/08; a barra de comando e o cabecalho de familia estavam
     entre eles, e eram justamente os dois blocos que apareciam BRANCOS na
     foto do tema escuro. */
  --pilula-atencao:#FFF3D6;  /* fundo de chip de aviso (texto --st-atencao) */
  --aviso-forte:  #FDF3F3;   /* fundo do aviso de severidade alta */
  --vinho-texto:  #9D0D16;   /* vinho como TEXTO/link (inverte no escuro) */
  --foto-base:    #1A1614;   /* superficie escura nos DOIS temas */

  /* --- geometria declarada --- */
  --raio-ctrl:   6px;
  --raio-cartao: 8px;
  --raio-campo:  10px;
  --alt-ctrl:    30px;   /* TODO controle de barra de comando */
  --alt-campo:   44px;   /* campo de formulario */

  /* --- as cinco regras de token que o handoff registra, e custaram retrabalho:
     1. --secao e DECORACAO (regua, sparkline). Borda de controle e --ctrl-linha:
        --secao mede 2,40:1 e o controle vira fantasma.
     2. --ambar e SUBLINHADO, nunca texto (#E0A106 no branco = 2,27:1).
        Texto de atencao e --st-atencao.
     3. --ink e TEXTO e INVERTE com o tema. Superficie escura permanente
        e --foto-base.
     4. NUNCA um terceiro vinho: "ruim" e --st-ruim, a marca e --vinho.
     5. Todo mapa de tema precisa das MESMAS chaves — token faltando num lado
        nao da erro, a regra so nao se aplica, e o defeito aparece semanas
        depois. Ha teste cobrando isso. --- */

  --vinho-tinta:#F6D9DB;   /* fundo de destaque suave */

  /* --- papeis na interface --- */
  --fundo:   var(--papel);
  --painel:  var(--branco);
  --linha:   var(--nevoa);
  --texto:   var(--ink);
  --fraco:   var(--grafite);
  --acento:  var(--vinho);

  /* ---- ESCALA TIPOGRAFICA: cada papel tem UM tamanho ----
     Antes eram 13 tamanhos (9.5 a 23px) e gaps de 4 a 16px. Nao era defeito
     visivel; era ENTROPIA — cada elemento novo virava uma decisao nova. Com o
     registro crescendo em indicadores, isto paga rapido. */
  --t-micro: 10px;
  --t-apoio: 11.5px;
  --t-dado:  13px;
  --t-corpo: 14px;
  --t-titulo:15px;
  --t-kpi:   24px;
  /* 🔴 NIVEL 1 da escala, acrescentado em 20/08. A folha ia ate --t-kpi
     (24px) e os paineis novos precisavam de um degrau ACIMA para o numero
     que domina a tela. Sem ele eu vinha escrevendo pixel cru — 27, 22, 17 —
     e OITO tamanhos arbitrarios competindo e' exatamente a falta de
     hierarquia que o dono viu e chamou de "nao esta legal". */
  --t-num:   32px;

  /* ---- ESPACO: multiplos de 4, e um ritmo vertical so ---- */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;

  /* ---- PALETA DE STATUS — v3: O FUNDO CARREGA A COR, O TEXTO VAI PARA INK ----
     A v2 tambem saiu pastel, e o dono reprovou de novo. A causa nao era gosto,
     era ESTRUTURA: quem carregava o matiz era o TEXTO, e texto colorido precisa
     de 4,5:1 — o que obrigava o fundo a ficar quase branco para nao matar o
     texto. ENQUANTO O TEXTO FOR O PORTADOR, O FUNDO NAO PODE SER VIVO.

     A v3 inverte os papeis. O numero vai para Ink (#1A1614) em negrito e o
     FUNDO fica livre para saturar. Ink em fundo forte mede 7,73:1 no vermelho e
     12,76:1 no amarelo — folga enorme. E o que Excel e Bloomberg fazem na
     formatacao condicional, e e o unico caminho para "vivo" sem quebrar
     contraste.

     E OS DOIS FUNDOS SAO A MARCA, LITERALMENTE:
       #E5949A = --vinho-vivo (#C6121E) com 55% de branco
       #FFD633 = --amarelo    (#FFCC00) com 20% de branco
     Nao sao tons "parecidos com" a marca: sao a propria cor clareada.

     MEDIDO (Machado-Oliveira-Fernandes 2009, dE OKLab x100):
       amarelo x vermelho ... normal 22,5 · protan 22,8 · deutan 19,6  (alvo 8)
       cada fundo x papel ... 20,4 e 26,9                             (alvo 12)
       Ink em cada fundo .... 12,76:1 e 7,73:1                        (alvo 4,5)

     ⚠️ POR QUE "BOM" NAO GANHOU FUNDO. Testei; nao passa. Todo par
     fundo-verde x fundo-vermelho com contraste utilizavel mede dE 4,2 a 5,9 sob
     deuteranopia — abaixo ate do piso 6. Para ~5% dos homens seriam a MESMA
     celula. Sem fundo no bom, o daltonico compara "sem fundo x amarelo x
     vermelho" e mede 19,6 / 22,5. A doutrina do exception highlighting (so a
     excecao grita) e a acessibilidade apontaram para o mesmo lado. */
  --st-bom:        #09724F;   /* 5,95:1 no branco · 5,15:1 no hover da linha */
  --st-atencao:    #5F4700;
  --st-atencao-ic: #9A6400;   /* a barra: 3,55:1 no proprio fundo */
  --st-atencao-fundo:#FFD633; /* o --amarelo da marca com 20% de branco */
  /* ⚠️ --st-atencao-hover e --st-ruim-hover foram REMOVIDOS em 18/08: eram o
     hover da celula PREENCHIDA, e o preenchimento saiu da tabela em 17/08.
     Os dois fundos sobrevivem porque a pilula do KPI ainda os usa. */
  --st-ruim:       #C6121E;   /* o --vinho-vivo DO MANUAL */
  --st-ruim-barra: #780A11;   /* --vinho-esc: 4,88:1 no proprio fundo */
  --st-ruim-fundo: #E5949A;   /* o --vinho-vivo da marca com 55% de branco */
  /* a fronteira de SECAO. 2,40:1 contra o branco: nao e texto, e divisor —
     mas precisa ser VISTO, e o #CFC7BA anterior media 1,68:1. */
  --secao:         #B0A697;

  /* ---- A FAIXA DE FAMILIA (16/08, 2a rodada) ----
     Ideia trazida do relatorio que o dono monta no Excel: la cada bloco de
     colunas tem cor propria, e e isso que faz o olho achar o ASSUNTO no meio de
     vinte colunas sem ler cabecalho nenhum. A nossa faixa era cinza uniforme
     nas seis familias: delimitava, mas nao identificava.

     A DIFERENCA PARA O EXCEL DELE, e ela e de proposito: la as cores nao seguem
     regra (ambar aparece em duas familias, grafite numa, vinho noutra), entao
     marcam fronteira mas nao se aprendem. Aqui e uma RAMPA, e a rampa conta a
     ordem da tabela — que ja e uma historia:
        Presenca (quem estava) -> Jornada (quando trabalhou) ->
        Producao (o que fez) -> Tempos (quanto demorou) ->
        Chegada (chegou no prazo) -> Baremo (quanto valeu)
     Quanto mais fundo o tom, mais perto do RESULTADO. Isso se aprende uma vez.

     ⚠️ EIXO TAUPE, NAO ROSA, e a escolha e medida. A primeira versao ramificava
     para o vinho da marca, e o ultimo tom (#C9A5A4) ficava a dE 5,6 do fundo de
     "ruim" — perto demais de uma cor que agora SIGNIFICA algo. No eixo neutro
     quente todo tom fica a dE >= 8,9 do fundo ruim e >= 15,1 do de atencao.
     Ink em cada faixa: 7,13:1 no pior caso (a --fam-6, de 17/08). Vizinhos: dE 3,8 (e ainda ha a
     barra de 2px de secao entre elas — a cor nao trabalha sozinha). */
  --fam-0:#F3EEE6; --fam-1:#E8E1D6; --fam-2:#DDD4C7;
  --fam-3:#D2C7B7; --fam-4:#C7BBA8; --fam-5:#BCAE99;
  /* 🔴 --fam-6 NASCEU DE UM DEFEITO QUE ESTAVA NO AR (17/08/2026).
     A familia CARGA entrou na madrugada e virou a 7a; o `Baremo` passou a
     receber a classe `f6`, que NAO EXISTIA no CSS — a faixa dele ficou sem
     cor nenhuma, calada, e nenhum teste olhava para isso. O tom continua o
     passo medio da rampa (-11,-13,-15) e foi MEDIDO: Ink sobre ele da
     7,13:1, ainda acima do AAA. Ha teste cobrando que exista um --fam-N e
     um .fN para cada familia do registro. */
  --fam-6:#B1A18A;

  /* A BANDA DA COLUNA CONGELADA. O congelamento e um EIXO, nao um dado — e no
     branco ele lia como "mais uma celula que ficou parada". dE 4,4 contra o
     papel: visivel sem competir (a zebra que saiu media 1,4 e por isso nao
     fazia nada). Verde de "bom" sobre ela: 5,24:1. */
  --banda:      #F4F0EA;
  --banda-raiz: #E3DBCE;   /* a linha-raiz da arvore fica ACIMA da banda: dE 6,3 */

  --raio: 10px;
  --sombra: 0 1px 2px rgba(26,22,20,.06), 0 4px 16px rgba(26,22,20,.04);
}

/* =====================================================================
   TEMA ESCURO — 2026-08-17, declaracao do dono ("entra sim, como opcao")
   ---------------------------------------------------------------------
   🔴 ELE REDEFINE OS DOIS VOCABULARIOS, E ISSO NAO E REDUNDANCIA.
   A folha tem 944 linhas escritas contra os nomes ANTIGOS (--papel, --branco,
   --nevoa, --texto...). O handoff de design trouxe nomes NOVOS (--bg, --surf,
   --linha, --ink). Redefinir so os novos deixaria 118 usos com valor claro
   dentro do tema escuro — e o defeito nao daria erro: a tela sairia metade
   clara, metade escura.
   Onde o nome antigo ja e apelido do novo no :root (--fundo, --painel,
   --texto), nao ha linha aqui: ele herda sozinho.

   ⚠️ TODO VALOR ABAIXO FOI MEDIDO, nao escolhido. Os pares estao no
   comentario de cada bloco. O criterio e o mesmo do tema claro: texto >= 4,5:1
   sobre o proprio fundo, e cada fundo de estado tem que se destacar da
   superficie normal (senao o estado nao se le como estado).

   ⚠️ ACENTO DESSATURADO. Cor calibrada para fundo branco vira neon no escuro:
   o verde #09724F some e o vermelho #C6121E vibra. Os tres estados de TEXTO
   trocam para as versoes dessaturadas do handoff.
   ===================================================================== */
html[data-tema="escuro"]{
  /* --- superficie e texto: o vocabulario NOVO --- */
  --bg:#0F1113; --surf:#16181B; --surf-2:#1D2024; --surf-3:#24282C;
  --linha:#262A2E; --linha-bloco:#33383D; --linha-fina:#1D2024;
  --fraco-branco:#8A9198; --fraco-papel:#969DA4; --ctrl-linha:#8A9198;
  --selecao:#211A1D; --foto-base:#0D0F10;
  --selecao-linha:#4A2A2E; --aviso-fundo:#221E14; --linha-hover:#1D2024;
  --cromo-fim:#101315; --pilula-atencao:#2E2410; --aviso-forte:#241618;
  /* o vinho da marca mede 2,4:1 aqui e SOME — como texto ele clareia */
  --vinho-texto:#E8686F;

  /* --- e o vocabulario ANTIGO, que 118 usos ainda referenciam --- */
  --papel:#0F1113;        /* = --bg    */
  --branco:#16181B;       /* = --surf  */
  --nevoa:#262A2E;        /* = --linha */
  --nevoa-clara:#24282C;  /* = --surf-3 */
  --banda:#1D2024;
  --banda-raiz:#2A2E33;
  --ink:#E8EAEC;          /* off-white, nao branco puro: evita halacao em OLED */
  --grafite:#B9BEC4;
  --secao:#5C636A;
  --vinho-tinta:#3A2226;

  /* --- estado: acentos DESSATURADOS (do handoff, medidos) --- */
  --st-bom:#4CC38A;
  --st-atencao:#E3B341;
  --st-ruim:#F1707A;
  --ambar:#E3B341;
  --st-atencao-ic:#E3B341;
  --st-ruim-barra:#F1707A;

  /* fundos de estado: Ink claro sobre eles, e destacando da superficie.
     Medido — Ink 6,13 / 4,90 / 5,33 / 4,50 e destaque 2,40 / 3,01 / 2,77 / 3,28.
     ⚠️ Os dois fundos ficam a 1,15:1 UM DO OUTRO: eles se separam por MATIZ, e
     o "ruim" ainda carrega a barra lateral — o canal nao-cromatico da WCAG
     1.4.1 que a DEC-2026-074 declarou e o teste_cor.py cobra. */
  --st-atencao-fundo:#6B520F;
  --st-ruim-fundo:#8E4B4E;

  /* --- familias: a rampa SOBE a partir do fundo, em vez de descer do papel.
     Ink claro sobre cada faixa: 13,56 · 12,25 · 10,96 · 9,71 · 8,57 · 7,54 ·
     6,63 — o pior caso continua acima do AAA. --- */
  --fam-0:#1D2024; --fam-1:#242830; --fam-2:#2B303B; --fam-3:#323847;
  --fam-4:#394053; --fam-5:#40485F; --fam-6:#47506B;

  /* sombra some no escuro: o que separa plano e o DEGRAU de superficie */
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.45);

  color-scheme: dark;   /* barra de rolagem, campos nativos e autofill */
}

/* SISTEMA — segue o SO quando o usuario nao escolheu.
   ⚠️ A REGRA E DUPLICADA DE PROPOSITO em vez de agrupada com o seletor acima:
   navegador que nao entende `:where()` descartaria o seletor INTEIRO se os
   dois estivessem na mesma lista, e o tema escuro sumiria para quem escolheu
   explicitamente. Duplicar custa bytes; agrupar custa o recurso. */
@media (prefers-color-scheme: dark){
  html[data-tema="sistema"]{
    --bg:#0F1113; --surf:#16181B; --surf-2:#1D2024; --surf-3:#24282C;
    --linha:#262A2E; --linha-bloco:#33383D; --linha-fina:#1D2024;
    --fraco-branco:#8A9198; --fraco-papel:#969DA4; --ctrl-linha:#8A9198;
    --selecao:#211A1D; --foto-base:#0D0F10; --vinho-texto:#E8686F;
    --selecao-linha:#4A2A2E; --aviso-fundo:#221E14; --linha-hover:#1D2024;
    --cromo-fim:#101315; --pilula-atencao:#2E2410; --aviso-forte:#241618;
    --papel:#0F1113; --branco:#16181B; --nevoa:#262A2E; --nevoa-clara:#24282C;
    --banda:#1D2024; --banda-raiz:#2A2E33; --ink:#E8EAEC; --grafite:#B9BEC4;
    --secao:#5C636A; --vinho-tinta:#3A2226;
    --st-bom:#4CC38A; --st-atencao:#E3B341; --st-ruim:#F1707A; --ambar:#E3B341;
    --st-atencao-ic:#E3B341; --st-ruim-barra:#F1707A;
    --st-atencao-fundo:#6B520F;
    --st-ruim-fundo:#8E4B4E;
    --fam-0:#1D2024; --fam-1:#242830; --fam-2:#2B303B; --fam-3:#323847;
    --fam-4:#394053; --fam-5:#40485F; --fam-6:#47506B;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}
*{box-sizing:border-box}
/* ⚠️ FOCO VISIVEL GLOBAL. Nao existia regra nenhuma: tabular pela tela era
   navegar no escuro. O `scroll-padding` impede o cabecalho fixo de engolir o
   elemento que acabou de receber foco. */
/* 🔴 O ANEL DE FOCO USA `--vinho-texto`, NAO `--vinho`. O da marca nao
   inverte: #9D0D16 sobre o fundo escuro mede 2,25:1, abaixo dos 3:1 que a
   WCAG 1.4.11 exige de indicador de foco — quem navega por teclado no tema
   escuro nao via onde estava. `--vinho-texto` e IGUAL a `--vinho` no claro
   e vira #E8686F no escuro; o handoff o criou exatamente para isto. */
:focus-visible{outline:2px solid var(--vinho-texto);outline-offset:2px;border-radius:3px}
html{scroll-padding-top:64px}
.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
html,body{height:100%}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px; line-height:1.5; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--vinho);text-decoration:none}
a:hover{color:var(--vinho-vivo);text-decoration:underline}

/* ---- cabecalho: o vinho e "o canal", o amarelo "a irradiacao" ---- */
/* ===========================================================================
   CASCA: RAIL DE MODULOS + CORPO  (handoff 2.1, implementado em 17/08/2026)
   ---------------------------------------------------------------------------
   POR QUE UM RAIL SE SO HA UMA TELA
   A tela cresceu de 8 para 48 colunas e de um recorte para cinco eixos, e todo
   controle novo foi empilhado na mesma barra do topo. O rail nao e enfeite: e
   onde os proximos modulos vao morar, e ter o lugar declarado agora evita que
   a barra de comando continue sendo o deposito de tudo.

   OS SEIS ITENS SEM PAGINA APARECEM MARCADOS — decisao do dono (17/08). Eles
   sao <span aria-disabled>, nunca <a>: item de menu que nao abre e pior que
   item ausente, entao ele diz "em breve" em vez de fingir. A opacidade e o
   selo sao DOIS canais, porque opacidade sozinha nao sobrevive ao P&B.
   =========================================================================== */
.casca{display:flex;align-items:flex-start;min-height:100vh}
.rail{
  width:188px;flex:none;position:sticky;top:0;height:100vh;z-index:40;
  background:var(--surf);border-right:1px solid var(--linha);
  padding:12px 10px;display:flex;flex-direction:column;gap:1px;
}
.corpo{flex:1 1 auto;min-width:0}

.rail-topo{display:flex;align-items:center;justify-content:space-between;
           gap:6px;padding:0 6px 14px}
.rail .marca{display:block;line-height:0}
/* 41x24 mantem a proporcao do ativo (990x582 = 1,701; 41/24 = 1,708). O ativo
   REVERSO entra no escuro porque o vinho da marca mede 2,4:1 sobre --surf. */
.rail .marca-img{display:block;width:41px;height:24px;
                 background:url(/static/marca/r2-logo.svg) center/contain no-repeat}
html[data-tema="escuro"] .rail .marca-img{background-image:url(/static/marca/r2-logo-rev.svg)}
@media (prefers-color-scheme: dark){
  html[data-tema="sistema"] .rail .marca-img{background-image:url(/static/marca/r2-logo-rev.svg)}
}
.rail-dobra{width:26px;height:26px;flex:none;border:0;background:none;padding:0;
            color:var(--fraco-branco);border-radius:6px;cursor:pointer;
            display:grid;place-items:center;transition:background .12s ease}
.rail-dobra:hover{background:var(--banda);color:var(--ink)}

.rail-itens{display:flex;flex-direction:column;gap:1px;min-width:0}
.rail-item{
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:9px 10px;border-radius:8px;font-size:13.5px;
  color:var(--grafite);text-decoration:none;transition:background .12s ease;
}
.rail-item:hover{background:var(--banda)}
.rail-item.ativo{background:var(--selecao);color:var(--vinho-texto);font-weight:600}
.rail-item.indisp{opacity:.55;cursor:default}
.rail-item.indisp:hover{background:none}
.rail-rot{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* O SELO E UM CADEADO, NAO UMA PILULA DE TEXTO. Medido em 17/08: "em breve"
   custava 54px e, somado ao icone e ao gap, truncava "Mapa de campo" e
   "Relatorios" dentro dos 188px do handoff. Rotulo cortado num menu e pior
   que selo discreto — e o cadeado diz a mesma coisa em 13px. A explicacao
   inteira continua no `title`, e a opacidade e o terceiro canal. */
.rail-selo{margin-left:auto;flex:none;display:flex;color:var(--fraco-papel)}
.rail-selo .ico{width:13px;height:13px}
.rail-fio{height:1px;background:var(--linha-fina);margin:9px 4px}
.ico{width:17px;height:17px;flex:none}

.rail-pe{margin-top:auto;display:flex;align-items:center;gap:9px;
         padding:10px 6px 2px;border-top:1px solid var(--linha-fina)}
.avatar{width:30px;height:30px;flex:none;border-radius:50%;background:var(--surf-3);
        display:grid;place-items:center;font-size:11.5px;font-weight:600;color:var(--ink)}
.rail-quem{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.rail-quem b{font-size:12.5px;font-weight:600;color:var(--ink);
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-quem a{font-size:11px;color:var(--fraco-papel)}
.rail-quem a:hover{color:var(--vinho-texto)}

/* RECOLHIDO: 56px, so os icones. O estado vem do servidor em `data-rail`
   pelo mesmo motivo do tema — senao a tela salta na carga. */
[data-rail="fechado"] .rail{width:56px;padding:12px 7px}
[data-rail="fechado"] .rail-rot,
[data-rail="fechado"] .rail-selo,
[data-rail="fechado"] .rail-quem,
[data-rail="fechado"] .rail .marca{display:none}
[data-rail="fechado"] .rail-topo{justify-content:center;padding:0 0 14px}
[data-rail="fechado"] .rail-item{justify-content:center;padding:9px 0}
[data-rail="fechado"] .rail-pe{justify-content:center;padding:10px 0 2px}

/* Em tela estreita o rail vira faixa de icones sozinho — 188px de menu num
   celular seria metade da largura util. */
@media (max-width:900px){
  .rail{width:56px;padding:12px 7px}
  .rail-rot,.rail-selo,.rail-quem,.rail .marca{display:none}
  .rail-topo{justify-content:center;padding:0 0 14px}
  .rail-item{justify-content:center;padding:9px 0}
  .rail-pe{justify-content:center;padding:10px 0 2px}
}
@media print{.rail{display:none}}

/* MIGALHA — onde se esta. O nome do produto saiu do <h1> repetido: ele ja
   esta na marca do rail, e repetir titulo em duas alturas nao informa. */
.migalha{display:flex;align-items:center;gap:7px;min-width:0;
         font-size:13px;color:var(--fraco-branco)}
.migalha i{font-style:normal;opacity:.55}
.migalha b{color:var(--ink);font-weight:600;white-space:nowrap;
           overflow:hidden;text-overflow:ellipsis}

header{
  background:var(--painel); border-bottom:1px solid var(--linha);
  padding:0; position:sticky; top:0; z-index:30;
}
/* ---- VIDA NO CROMO (pedido do dono: "o site pode ser mais vivo") ----
   Degrade, sombra e textura entram AQUI — no cabecalho, nos cartoes, nos
   botoes, no cabecalho da tabela. NAO na area de dados: ali o principio e o
   contrario ("um fundo neutro so"), porque fundo com vida compete com a cor
   que agora CARREGA SIGNIFICADO. Vida no cromo, calma no dado. */
header .faixa{
  height:4px;
  background:linear-gradient(90deg,var(--vinho-esc) 0%,var(--vinho) 34%,
             var(--vinho-vivo) 58%,var(--ambar) 74%,var(--amarelo) 100%);
}
header{
  background:linear-gradient(180deg,var(--branco) 0%,var(--cromo-fim) 100%);
  box-shadow:0 1px 0 var(--linha),0 4px 14px rgba(26,22,20,.05);
}
header .barra{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 22px}
header .marca{display:flex;align-items:center;gap:11px;min-width:0}
header .marca img{height:26px;width:auto;display:block}
header h1{
  font-size:15px;margin:0;font-weight:600;letter-spacing:-.15px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
header h1 span{color:var(--grafite);font-weight:400}
header .quem{color:var(--grafite);font-size:12.5px;white-space:nowrap;
             display:flex;align-items:center;gap:14px}

/* ---- SEGMENTADO DE TEMA (17/08/2026) — claro · auto · escuro ----
   Altura fixa em --alt-ctrl: a partir daqui TODO controle de barra tem a mesma
   altura. Controle com altura propria e o que faz uma barra parecer montada
   por acidente. */
.tema{display:inline-flex;height:var(--alt-ctrl);border:1px solid var(--ctrl-linha);
      border-radius:var(--raio-ctrl);overflow:hidden;background:var(--surf)}
.tema button{appearance:none;border:0;background:transparent;cursor:pointer;
             font:inherit;font-size:11.5px;color:var(--fraco-branco);
             padding:0 10px;transition:background .12s ease,color .12s ease}
.tema button + button{border-left:1px solid var(--linha)}
.tema button:hover{background:var(--banda);color:var(--ink)}
/* ⚠️ O ESTADO ATIVO SAI DO `aria-pressed`, NAO DE UMA CLASSE. Assim a marca
   visual e a informacao que o leitor de tela recebe sao O MESMO ATRIBUTO —
   nao ha como uma mudar e a outra ficar para tras. */
.tema button[aria-pressed="true"]{background:var(--selecao);color:var(--vinho-texto);
                                  font-weight:600}

main{padding:18px 22px 56px;max-width:1720px;margin:0 auto}

.cartao{
  background:linear-gradient(180deg,var(--branco) 0%,var(--cromo-fim) 100%);
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:14px 16px;margin-bottom:var(--e3);
  box-shadow:0 1px 2px rgba(26,22,20,.05),0 6px 18px rgba(26,22,20,.045);
}

/* ============================================================================
   ROTULO EM CAIXA NORMAL — handoff secao 5, aplicado em 17/08/2026 (3a sessao)
   ----------------------------------------------------------------------------
   O micro-caps de 9,5px com letter-spacing largo era a regra da tela INTEIRA:
   rotulo de recorte, cabecalho de familia, cabecalho de coluna, pilula de
   estado, legenda, sumario das notas. Funciona como etiqueta — mas quando TUDO
   e etiqueta, nada e titulo, e o olho perde a hierarquia. Foi a primeira coisa
   que o dono apontou ao comparar a tela real com o modelo.
   A EXCECAO declarada pelo handoff sao os macros de motivo (TECNICA,
   REAGENDAMENTO, CAMPO, CLIENTE), que sao caixa alta NO REGISTRO — ali a caixa
   e o dado, nao a decoracao. Nenhum deles esta nesta folha ainda.
   ============================================================================ */

/* ---- vistas salvas: o estado ja estava na URL, entao isto e so um atalho ---- */
.vistas{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.v-rot{font-size:11.5px;letter-spacing:0;
       color:var(--fraco-papel);font-weight:500}
.v-item{display:inline-flex;align-items:center;background:var(--branco);
        border:1px solid var(--nevoa);border-radius:999px;overflow:hidden}
.v-item a{padding:3px 4px 3px 11px;font-size:12px;color:var(--ink);font-weight:500}
.v-item a:hover{color:var(--vinho);text-decoration:none}
/* ⚠️ era `--nevoa` sobre branco: 1,29:1. Um botao invisivel. */
.v-item .x{padding:3px 9px 3px 4px;color:var(--grafite);font-weight:700;font-size:13px}
.v-item .x:hover{color:var(--vinho)}
.v-item:hover{border-color:var(--vinho)}

/* ---- FILTROS: uma faixa densa. O rotulo vive DENTRO do campo, o que
   economiza a linha inteira que ele ocupava em cima de cada controle. ---- */
/* TEXTURA — uma trama diagonal quase imperceptivel (opacidade .025) so no
   cartao de filtros, para ele ler como "painel de controle" e nao como mais um
   bloco branco. Ela NAO entra na area de dados: textura atras de numero e
   ruido, e agora a cor ali carrega significado. */
.cartao.barra{
  padding:10px 12px;
  background-image:
    linear-gradient(180deg,var(--branco) 0%,var(--cromo-fim) 100%),
    repeating-linear-gradient(135deg,rgba(157,13,22,.025) 0 2px,transparent 2px 7px);
}
form.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
/* 🔴 O RECORTE VIRA CHIP — handoff secao 2.1, aplicado em 17/08 (3a sessao).
   Era uma caixa de 44px com o rotulo EMPILHADO por cima do valor. Quatro
   dessas ocupavam a barra inteira e empurravam Aplicar/Filtrar/Colunas para a
   borda. O modelo poe rotulo e valor NA MESMA LINHA, em 30px:

       [ Empresa  R2 ⌄ ]   em vez de     [ EMPRESA    ]
                                         [ R2       ⌄ ]

   A altura de 30px e a mesma do segmentado de tema (`--alt-ctrl`), e e a regra
   do handoff: **altura de controle constante em toda barra**. Controle que
   muda de altura ao lado de outro faz a barra parecer montada por acidente.
   ⚠️ A INTERACAO NAO MUDOU: continuam `<select>` e `<input type=date>` nativos.
   O modelo desenha menus proprios; nativo funciona no teclado, no leitor de
   tela e no celular sem uma linha de JS, e trocar isso seria perder para
   ganhar aparencia. */
.campo{
  display:flex;flex-direction:row;align-items:center;gap:7px;
  background:var(--branco);border:1px solid var(--linha-bloco);border-radius:var(--raio-ctrl,6px);
  padding:0 10px;min-height:var(--alt-ctrl,30px);
}
.campo>span{
  font-size:12.5px;letter-spacing:0;flex:none;
  color:var(--fraco-branco);font-weight:400;line-height:1;
}
.campo select,.campo input[type=date]{
  border:0;background:transparent;padding:0;min-width:0;font-size:13px;
  color:var(--ink);font-family:inherit;font-weight:500;
}
.campo select:focus,.campo input:focus{outline:none}
.campo:focus-within{border-color:var(--vinho);box-shadow:0 0 0 2px var(--vinho-tinta)}
.campo.periodo .par{display:flex;align-items:center;gap:5px}
/* ⚠️ era `--nevoa` sobre branco: 1,29:1. A seta que diz 'de -> ate' e
   informacao, nao enfeite — nao pode ser invisivel. */
.campo.periodo em{color:var(--grafite);font-style:normal;font-weight:700}
.campo.periodo input{width:96px}
/* o `.cartao.barra` deixa de ser uma faixa alta e vira a linha de comando */
.cartao.barra{align-items:center}

/* 🔴 O ORCAMENTO DE LARGURA DA BARRA DE COMANDO — medido, nao estimado.
   Com os chips de 30px a barra passou a QUEBRAR EM DUAS LINHAS: os filhos
   somavam 1.257px + 32 de gap contra 1.167 uteis a 1440px de viewport (o rail
   come 188). Sobra negativa de 122px.
   O modelo cabe numa linha porque colapsa coisas que aqui sao interativas: o
   Segmento dele diz "4 de 4" (um chip), o nosso mostra as QUATRO fichas
   clicaveis; e o Periodo dele e texto, o nosso sao dois seletores de data
   nativos com o icone do navegador.
   Nao troquei a interacao por aparencia. Comprimi o que da para comprimir sem
   perder funcao — e deixo a conta escrita, porque coluna nova na barra vai
   estourar de novo e alguem precisa saber onde estava a folga. */
/* ⚠️ ESCOPADO NA BARRA DE COMANDO, e isso e conserto: a primeira versao era
   `.campo select` solto e alcancou tambem os seletores da barra de FERRAMENTAS,
   truncando "Chefia do dia (historica)" em "Chefia do dia (histor...". Rotulo
   de leitura de chefia cortado nao e economia de espaco, e perda de informacao
   — sao duas leituras diferentes e o nome inteiro e que as distingue. */
.cartao.barra .campo select{max-width:132px;text-overflow:ellipsis}
.fichas .ficha{padding:0 8px;font-size:11.5px}
.acoes .botao{padding:0 11px;font-size:12.5px}

/* segmentos viram FICHAS que se acendem — mais compacto e mais claro que
   quatro caixas de marcar com rotulo solto */
.fichas{display:flex;gap:4px}
.ficha{
  font-size:11.5px;font-weight:600;letter-spacing:.2px;color:var(--grafite);
  border:1px solid var(--nevoa);border-radius:999px;padding:1px 9px;cursor:pointer;
  margin:0;text-transform:none;user-select:none;line-height:1.5;
}
/* 🔴 NAO TROCAR POR `display:none`. Ele tira o checkbox da ordem de
   tabulacao E do leitor de tela — a filtragem por segmento ficava
   INALCANCAVEL por teclado, e essa era a falha de acessibilidade mais grave
   da tela (16/08). Este e o padrao "visualmente oculto, ainda focavel". */
.ficha input{position:absolute;width:1px;height:1px;
             clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.ficha:focus-within{outline:2px solid var(--vinho);outline-offset:2px}
.ficha.on{background:var(--vinho);border-color:var(--vinho);color:var(--branco)}
.ficha:hover{border-color:var(--vinho)}
/* O aviso de "pelo menos um" — some sozinho em 2,2s. Existe porque desfazer o
   clique CALADO seria o mesmo defeito que este conserto veio corrigir. */
.dica-seg{font-size:11px;color:var(--vinho);font-weight:600;align-self:center;
          margin-left:4px;white-space:nowrap}

/* ---- CABECALHO ORDENAVEL ----
   A seta so aparece ACESA na coluna ativa; nas outras ela fica apagada e so
   ganha cor no hover (padrao do Carbon/IBM: "only the sorted column displays an
   icon, and unsorted icons are only visible on hover"). O cursor deixa de ser
   `help` no cabecalho ordenavel — ali ele CLICA, e cursor mentindo sobre a
   acao e defeito de usabilidade. */
th a.ord{
  display:inline-flex;align-items:center;gap:4px;color:inherit;
  text-decoration:none;cursor:pointer;
}
th a.ord:hover{color:var(--vinho);text-decoration:none}
/* M3 — 15 setas permanentes eram ruido fixo. O comentario acima ja citava a
   regra do Carbon ("seta so na coluna ativa"); agora ela e cumprida. */
th a.ord .seta{font-size:8.5px;opacity:0;line-height:1;transition:opacity .1s}
th a.ord:hover .seta,th a.ord:focus-visible .seta{opacity:.75}
/* ⚠️ A COLUNA ORDENADA DEIXA DE SER UM BLOCO ROSA. O `--vinho-tinta` de fundo
   era o campo cromatico mais proximo do vermelho de "ruim", e agora que o
   vermelho SIGNIFICA algo os dois brigavam no mesmo cabecalho. O estado de
   ordenacao passa a ser sublinhado + texto em vinho + seta acesa: tres canais,
   nenhum deles preenchimento — que fica reservado ao julgamento. */
th.ordenada{color:var(--vinho);box-shadow:inset 0 -3px 0 var(--vinho)}
th.ordenada a.ord .seta{opacity:1}

/* M3 — O DRILL DEIXA DE PINTAR A COLUNA INTEIRA DE VINHO.
   No nivel coordenador a coluna de nomes era a mais saturada da tela, e
   competia com os deltas vermelhos (que significam "piorou") na MESMA familia
   cromatica. O manual pede o vinho no CROMO, emoldurando — nao dentro da area
   de dados. O pontilhado continua dizendo "isto abre". */
td.c-rotulo a:not(.abrir):not(.funil){
  color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--grafite);
}
td.c-rotulo a:not(.abrir):not(.funil):hover{
  color:var(--vinho);border-bottom-color:var(--vinho);border-bottom-style:solid;
}

/* M8 — MINI-BARRA DE PROPORCAO nas razoes.
   🔴 HOJE ELA NAO APARECE EM COLUNA NENHUMA, e isso e o conserto de um defeito
   que o dono viu na tela: "a chegada no time esta com fundo cinza". Estava — a
   barra pinta um gradiente de Nevoa POR CIMA do fundo da celula, e a Chegada
   ganhou regua na mesma sessao; a barra cinza cobria a cor de julgamento.
   A barra nunca foi acompanhante do semaforo: era o SUBSTITUTO dele enquanto a
   cor estava travada. Com regua declarada, o substituto sai. Quem decide e
   `tem_barra()` no registro, nao esta folha — ela so desenha. */
td.tem-barra{
  background-image:linear-gradient(90deg,var(--nevoa-clara) 0 var(--p),transparent var(--p));
  background-repeat:no-repeat;background-size:100% 58%;background-position:0 center;
}
tbody tr:hover td.tem-barra{background-color:var(--linha-hover)}

/* M10 — PISO DE AMOSTRA: razao sem base suficiente fica esmaecida.
   O topo da ordenacao por tec-dias mostrava `0,0% -53,0` com n=1, na mesma
   tipografia de uma linha com n=40 — o delta mais forte da tela onde o dado
   menos sustenta. */
td.pouca-base{opacity:.42}
td.pouca-base .dt{display:none}

/* =====================================================================
   COR COM SIGNIFICADO — v3. Tres estados, tres FORMAS diferentes.
   =====================================================================
   O glifo (`!` / `✕`) saiu a pedido do dono. Ele era o canal redundante da
   WCAG 1.4.1, entao o canal teve que mudar de lugar, nao sumir. O que carrega
   o estado sem depender de matiz nenhum e a FORMA DO PREENCHIMENTO:

     bom     sem fundo  + negrito  + texto verde
     atencao FUNDO cheio + negrito + barra lateral clara
     ruim    FUNDO cheio + negrito + barra lateral ESCURA de 3px

   Em preto e branco isso vira: nada · cinza medio · cinza escuro com barra —
   tres coisas distintas sem uma gota de cor. Ha teste cobrando cada uma destas
   regras do CSS (`teste_cor.py`, item 4), para nao virar disciplina. */
/* ---- O FIO DE RESPIRO ENTRE PREENCHIMENTOS (16/08, 2a rodada) ----
   Trazido do relatorio que o dono monta no Excel: la os fundos vao de ponta a
   ponta da celula MAS ha um fio branco entre elas, e e esse fio que faz a
   coisa ler como mapa de calor em vez de borrao. Sem ele, Eficacia e Chegada
   vermelhas na mesma linha viram um bloco unico e o olho perde a fronteira da
   celula — o dado deixa de ser por coluna.
   Feito com `box-shadow`, nunca com `border`: borda mudaria a largura da
   coluna; sombra nao ocupa espaco de layout.
   ⚠️ A ORDEM DA LISTA IMPORTA. A primeira sombra e pintada POR CIMA. O anel do
   respiro vem primeiro e a barra lateral vem depois, com 5px — o anel come os
   2px de fora e sobram exatamente os 3px de barra. Invertendo, a barra
   encostaria na celula vizinha e o respiro sumiria justo onde ele mais serve. */
tbody td{--gap:var(--painel)}
tbody tr:hover td{--gap:var(--linha-hover)}
tfoot td{--gap:var(--nevoa-clara)}

td.st-bom .valor{color:var(--st-bom);font-weight:700}
/* 🔴 AS COLUNAS DE BUCKET TROCARAM DE CANAL EM 17/08/2026 (3a sessao) —
   preenchimento -> SUBLINHADO. Handoff secao 2.3, pedido do dono ao comparar a
   tela real com o modelo.

   POR QUE, e nao e estetica: a celula preenchida era um RETANGULO COLORIDO
   inteiro no meio da grade. Com 32 colunas na tela e duas familias inteiras de
   horario, isso enchia a tabela de blocos amarelos e vermelhos e afogava a
   Eficacia, que e o numero que importa. O modelo pinta o NUMERO e sublinha.

   A REGRA DA WCAG 1.4.1 CONTINUA HONRADA — o canal nao-cromatico so mudou de
   forma, e as tres formas sao distinguiveis em P&B:
       bom      -> numero em --st-bom, SEM traco
       atencao  -> numero em --ink  + traco SOLIDO em --ambar
       ruim     -> numero em --ink  + traco PONTILHADO em --st-ruim
   `--ambar` como TRACO e o uso correto dele (o handoff proibe como texto: mede
   2,27:1). E o preenchimento sai inteiro, entao o `--gap` e a barra lateral
   deixam de existir aqui — o teste foi atualizado junto, na mesma sessao.

   ⚠️ DUAS COLISOES DE VOCABULARIO FICAM DECLARADAS, nao resolvidas:
   (1) no PAPEL o mapa e outro (atencao=pontilhado, ruim=duplo), porque la nao
       ha cor e a forma precisa de separacao maxima;
   (2) `.calado` tambem e pontilhado, mas em cinza e sobre um "—".
   Ambas pedem ratificacao do dono. */
td.st-atencao .valor{
  color:var(--ink);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--ambar);
  text-decoration-thickness:3px;text-underline-offset:4px;
}
td.st-ruim .valor{
  color:var(--ink);font-weight:600;
  text-decoration:underline dotted;text-decoration-color:var(--st-ruim);
  text-decoration-thickness:3px;text-underline-offset:4px;
}

/* ESCALA CONTINUA (so onde o dono pediu gradiente, hoje a Eficacia).
   🔴 O HEX VEM DO PYTHON, e a troca conserta um defeito. O `color-mix` de
   antes interpolava DOIS pontos (vermelho -> verde) e portanto PULAVA O
   AMARELO, que o dono declarou como o auge de 0,7. Medido na tela: 88,2% e
   70,8% saiam quase da mesma cor (dE 2,7) — a escala nao separava nada na
   faixa onde as pessoas vivem. `cor_escala()` interpola em OKLab entre as TRES
   ancoras declaradas. Aqui so se pinta o que ele calculou. */
/* 🔴 A ESCALA MUDOU DE CANAL EM 17/08/2026 — declaracao do dono.
   Ate aqui a Eficacia era a UNICA celula da grade com fundo colorido, e por
   isso criava um vocabulario visual so dela: cinco estados na tela, quatro
   falando por texto/barra e um falando por preenchimento. Agora ela fala por
   SUBLINHADO, como as demais.

   O numero volta para --ink em qualquer ponto da escala — legibilidade
   constante, independente de onde a celula caiu. Quem carrega a informacao e o
   traco de 3px embaixo.

   ⚠️ AS ANCORAS TIVERAM QUE MUDAR JUNTO, e isso e o ponto que quase passou:
   cor de PREENCHIMENTO e palida por obrigacao (senao mata o texto por cima);
   cor de TRACO precisa de 3:1 contra o papel. Os pasteis antigos mediam
   1,41:1 como traco — sumiam. Ver o bloco de _ANCORAS em registro.py.

   ⚠️ `--f` e a cor no claro, `--fd` no escuro. As duas vem do servidor porque
   no modo "Auto" quem decide e o navegador. */
td.st-escala .valor{
  color:var(--ink); font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--f);
  text-decoration-thickness:3px;
  text-underline-offset:4px;
}
html[data-tema="escuro"] td.st-escala .valor{text-decoration-color:var(--fd)}
@media (prefers-color-scheme: dark){
  html[data-tema="sistema"] td.st-escala .valor{text-decoration-color:var(--fd)}
}
/* O PE DA ESCALA (<=50 por cento) ganha sublinhado DUPLO — e o canal que nao
   depende de matiz nenhum, e o mesmo que a folha ja usa na impressao. Sem ele,
   quem nao distingue vermelho de verde teria so a espessura do traco. */
td.st-escala.st-piso .valor{text-decoration-style:double;text-decoration-thickness:1px}
/* ⚠️ BASE FRACA NAO GANHA TRACO. O piso vence a tinta — a mesma regra que ja
   valia para o preenchimento. Uma eficacia de 0 por cento com n=1 nao pode ser
   a celula mais gritante da tela. */
td.pouca-base .valor{text-decoration:none}

/* ---- SEPARACAO DAS FAMILIAS DE COLUNAS ----
   🔴 SECAO != COLUNA, e por um mes a tela dizia que eram a mesma coisa. O
   template comparava a familia contra uma variavel que NUNCA FOI DEFINIDA
   (`grupo_anterior`), e em Jinja o indefinido nao e igual a nada — entao TODA
   celula do corpo recebia a barra de 2px reservada a fronteira de secao. A
   tabela virava papel quadriculado e a fronteira deixava de significar algo por
   ser igual a todas as outras. Era o "erro classico da tabela densa" que este
   proprio comentario descrevia — descrito aqui e cometido no template.
   O desenho pretendido, agora cumprido:
     * fronteira de SECAO = barra de 2px em `--secao`, do cabecalho ao rodape;
     * cabecalho da familia com FAIXA de fundo — e ela que faz ler "bloco";
     * NENHUMA linha entre colunas da mesma familia. A secao se destaca por
       CONTRASTE com a ausencia de linha, nao por ser mais grossa. */
th.ini-grupo,td.ini-grupo{border-left:2px solid var(--secao);padding-left:16px}
tfoot td.ini-grupo{border-left:2px solid var(--secao)}

@media print{
  /* Os fundos caem na impressora, entao o canal que sobrevive tem que ser
     TIPOGRAFICO — e nao pode ser `border-left`, que ja pertence a fronteira de
     secao e brigaria com ela na mesma celula. Cada estado ganha um sublinhado
     proprio, que e canal livre: */
  td.st-atencao,td.st-ruim,td.st-escala{background-color:transparent!important;
                                        box-shadow:none!important;filter:none!important}
  td.st-bom .valor,td.st-atencao .valor,td.st-ruim .valor,
  td.st-escala .valor{color:#000;font-weight:700}
  td.st-atencao .valor{text-decoration:underline dotted;text-underline-offset:2px}
  td.st-ruim .valor,td.st-escala.st-piso .valor{
    text-decoration:underline double;text-underline-offset:2px}
  th.ini-grupo,td.ini-grupo{border-left:.5pt solid #999}
}

/* M9 — o cabecalho de dois andares. O 2o andar cola logo abaixo do 1o.
   ⚠️ ESTA E A UNICA DECLARACAO DE `.th-grupos th`. Antes havia duas — uma
   pedindo a barra de secao de 2px e outra, mais abaixo no arquivo, pedindo
   1px de Nevoa. A segunda vencia por ordem, entao a faixa de familia era
   separada por uma linha fina enquanto o corpo levava a barra grossa: o
   cabecalho e o corpo desenhavam fronteiras diferentes para a MESMA fronteira.
   Duas declaracoes da mesma coisa e o defeito que o registro veio matar nos
   dados; aqui ele tinha sobrado no CSS. */
.th-grupos th{
  position:sticky;top:0;   /* o z-index mora na secao "O EMPILHAMENTO", uma vez so */
  background:var(--nevoa-clara);
  font-size:11px;letter-spacing:0;
  color:var(--ink);font-weight:600;padding:5px 10px;cursor:default;
  border-bottom:1px solid var(--nevoa);border-left:2px solid var(--secao);
  height:27px;
}
.th-grupos th:first-child{border-left:0;background:var(--painel)}
/* a cor da familia — o indice vem do REGISTRO, entao esconder coluna nao
   repinta as outras. Ver o comentario em `--fam-0` la em cima. */
.th-grupos th.f0{background:var(--fam-0)} .th-grupos th.f1{background:var(--fam-1)}
.th-grupos th.f2{background:var(--fam-2)} .th-grupos th.f3{background:var(--fam-3)}
.th-grupos th.f4{background:var(--fam-4)} .th-grupos th.f5{background:var(--fam-5)}
.th-grupos th.f6{background:var(--fam-6)}
@media print{.th-grupos th.fam{background:#fff!important;border-bottom:.75pt solid #000}}
thead tr:not(.th-grupos) th{top:27px}

/* M2 — A IMPRESSAO.
   Nao existia UMA linha de @media print. A conversa com o supervisor e papel,
   e a folha saia com barra de filtros, sem carimbo e com coluna cortada — o
   MESMO furo de governanca que a exportacao fechou, pela outra porta: papel
   sem o recorte declarado e a captura de tela com outro nome. */
/* M7 — a barra de VISTA: mais leve que o cartao de filtros, de proposito.
   Peso visual diferente = gramatica diferente. */
.barra-vista{
  display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  margin:0 0 var(--e2);padding:0 2px;
}
.bv-esq{font-size:var(--t-apoio);color:var(--grafite);font-variant-numeric:tabular-nums;
        display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap}
.bv-esq b{color:var(--ink)}
/* ---- A LEGENDA DA COR ----
   As amostras repetem EXATAMENTE o tratamento da celula. Legenda que desenha
   diferente da tabela e pior que legenda nenhuma: ela ensina a ler errado.

   🔴 E foi o que aconteceu entre 17/08 23:37 e 18/08 (achado ao documentar a
   sessao). A tabela trocou de canal — preenchimento -> sublinhado — e a
   legenda ficou para tras, mostrando o retangulo amarelo e a barra lateral que
   nao existem mais em celula nenhuma. Ficou no ar assim.
   A regra estava escrita aqui em cima desde o comeco, e escrita nao segurou —
   por isso agora o `teste_cor.py` COMPARA os dois blocos e reprova a
   divergencia. Comentario nao e mecanismo. */
.legenda{display:inline-flex;align-items:center;gap:5px}
.legenda .lg{font-size:11px;font-weight:500;letter-spacing:0;
             padding:2px 7px;border-radius:4px;color:var(--ink)}
.legenda .lg-bom{color:var(--st-bom);font-weight:700}
.legenda .lg-at{color:var(--ink);font-weight:600;
                text-decoration:underline;text-decoration-color:var(--ambar);
                text-decoration-thickness:3px;text-underline-offset:4px}
.legenda .lg-ru{color:var(--ink);font-weight:600;
                text-decoration:underline dotted;text-decoration-color:var(--st-ruim);
                text-decoration-thickness:3px;text-underline-offset:4px}
.legenda a{font-size:var(--t-apoio)}
@media print{.legenda{display:none}}
.bv-dir{display:flex;gap:var(--e2);align-items:center;margin-left:auto;flex-wrap:wrap}
.barra-vista .campo{
  min-height:32px;padding:2px 8px;background:transparent;border-color:transparent;
}
.barra-vista .campo:hover{border-color:var(--nevoa);background:var(--branco)}
.barra-vista .campo>span{font-size:9px}
.barra-vista .campo select{font-size:var(--t-apoio)}
@media (max-width:760px){
  .bv-dir{margin-left:0;width:100%}
  .barra-vista .campo{background:var(--branco);border-color:var(--nevoa);flex:1 1 46%}
}
@media print{.barra-vista{display:none}}

.titulo-bloco{font-size:var(--t-titulo);margin:0 0 var(--e3);color:var(--ink);font-weight:600}
.regras{margin:0;padding-left:18px;font-size:var(--t-corpo);color:var(--ink);line-height:1.6}
.regras li{margin-bottom:var(--e2)}
.glossario{margin:0;font-size:var(--t-corpo)}
.glossario dt{font-weight:700;color:var(--ink);margin-top:var(--e3);
              display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap}
.glossario dd{margin:2px 0 0;color:var(--grafite);line-height:1.55;max-width:78ch}
.etiq{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.05em;
      font-weight:700;color:var(--vinho);background:var(--vinho-tinta);
      border-radius:999px;padding:1px 8px}
.so-impressao{display:none}
@media print{
  @page{size:A4 landscape;margin:11mm}
  header,.cartao.barra,.vistas,.paginacao,.menu,.acoes,.filtros-livres .x,
  a.funil,a.abrir,.f-limpar,.v-item .x,.ref-anterior a{display:none!important}
  body{background:#fff;color:#000;font-size:10pt}
  main{padding:0;max-width:none}
  .cartao{box-shadow:none;border:0;padding:0;margin-bottom:6pt}
  .kpi{border:.75pt solid #999;box-shadow:none;break-inside:avoid}
  .kpi .k-val{font-size:15pt}
  table{font-size:8pt;width:100%}
  th,td{padding:2.5pt 5pt;border-bottom:.4pt solid #999}
  th,.th-grupos th{position:static!important;color:#000;background:#fff}
  th.c-rotulo,td.c-rotulo{position:static;box-shadow:none;background:#fff}
  /* o cabecalho REPETE em toda pagina, e a linha nao parte no meio */
  thead{display:table-header-group}
  tr{break-inside:avoid}
  tbody tr:nth-child(even) td,tbody tr:nth-child(even) td.c-rotulo{background:#fff}
  td.tem-barra{background-image:none}
  td.pouca-base{opacity:1;color:#666;font-style:italic}
  .cartao.rolagem,.rolagem{overflow:visible;max-height:none;min-height:0}
  .aviso{border:.4pt solid #999;background:#fff}
  details{display:block!important}
  details>summary{display:none}
  .so-impressao{display:block;font-size:8.5pt;color:#000;
                border-bottom:1pt solid #000;padding-bottom:4pt;margin-bottom:8pt}
  .so-impressao b{font-size:11pt}
}

/* ---- SELETOR DE COLUNAS ---- */
.menu summary .conta{
  font-size:10px;font-weight:700;color:var(--vinho);background:var(--vinho-tinta);
  border-radius:999px;padding:1px 6px;margin-left:6px;letter-spacing:0;
}
.colunas-lista{max-height:62vh;overflow:auto;min-width:224px}
.col-item{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;
          cursor:pointer;font-size:13px;color:var(--ink)}
.col-item:hover{background:var(--vinho-tinta)}
.col-item input{accent-color:var(--vinho);margin:0}
.col-acoes{border-top:1px solid var(--nevoa);margin-top:5px;padding-top:5px}
.col-acoes a{display:block;padding:6px 10px;font-size:12.5px}

/* ---- FILTROS LIVRES (fichas removiveis) ---- */
.filtros-livres{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.f-item{display:inline-flex;align-items:center;gap:5px;background:var(--vinho-tinta);
        border:1px solid var(--vinho);border-radius:999px;padding:2px 4px 2px 11px;
        font-size:12px;color:var(--ink)}
.f-item b{font-weight:700;color:var(--vinho);font-size:10px;text-transform:uppercase;
          letter-spacing:.5px}
.f-item .x{padding:0 7px;color:var(--vinho);font-weight:700;font-size:14px;line-height:1}
.f-item .x:hover{color:var(--vinho-esc);text-decoration:none}
.f-limpar{font-size:11.5px;color:var(--grafite)}
/* ⚠️ AMBAR COMO TEXTO REPROVA: #E0A106 sobre branco da 2,27:1, e o minimo e
   4,5:1. E a MESMA regra que o manual ja aplica ao amarelo ("acento em bloco,
   nunca texto"). Vira chip: fundo claro, texto escuro — 8,0:1. */
.f-recusado,.f-escondido{
  font-size:11.5px;font-weight:600;cursor:help;
  color:var(--st-atencao);background:var(--pilula-atencao);border-radius:999px;padding:1px 9px;
}
.f-escondido b{color:#3D2E00}
.f-campo{display:flex;flex-direction:column;gap:2px;padding:5px 10px}
.f-campo span{font-size:11.5px;letter-spacing:0;
              color:var(--fraco-papel);font-weight:500}
.f-campo select,.f-campo input{border:1px solid var(--nevoa);border-radius:6px;
              padding:5px 7px;font-family:inherit;font-size:13px;color:var(--ink);
              background:var(--branco);min-width:190px}
#m-filtro button{margin:4px 10px 0;background:var(--vinho);color:var(--branco);
              border:0;border-radius:7px;padding:7px 12px;font-weight:600;
              font-family:inherit;font-size:13px;cursor:pointer;width:calc(100% - 20px)}
#m-filtro button:hover{background:var(--vinho-vivo)}
.f-nota{font-size:11px;color:var(--grafite);padding:7px 10px 3px;margin:0;line-height:1.4}

/* ---- A ARVORE NAS LINHAS ----
   O recuo e um <span> de largura calculada, nao padding no <td>: a coluna do
   nome fica CONGELADA na rolagem horizontal, e padding nela deslocaria o
   congelamento. A hierarquia tambem aparece no PESO da fonte, nao so no recuo —
   quem imprime em preto e branco continua enxergando os niveis. */
/* 🔴 O FLEX MORA NO `.rot-cx`, NUNCA NO <td>.
   `display:flex` num <td> tira dele a natureza de celula: o navegador embrulha
   o conteudo numa celula anonima, a altura e o fundo param de acompanhar a
   linha e o congelamento (`position:sticky`) passa a pintar um retangulo que
   nao cobre a celula inteira — foi o que o dono viu ("na rolagem lateral as
   linhas com nome do gerente ficam em cima das demais, mas nao esta a coluna
   completa"). O <td> volta a ser <td>; quem alinha e a caixa de dentro. */
td.c-rotulo{white-space:nowrap}
/* o teto de largura vive AQUI, nao no <td>: `max-width` em celula de tabela e
   so uma sugestao no layout automatico, e os navegadores a ignoram. Num flex
   container ele vale, e e ele que da ao `.rot` o limite para as reticencias. */
.rot-cx{display:flex;align-items:center;gap:2px;max-width:300px}
.rot-cx .recuo{display:inline-block;flex:0 0 auto}
.rot-cx .rot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
td.c-rotulo.n0 .rot{font-weight:700;color:var(--ink)}
td.c-rotulo.n1 .rot{font-weight:600}
td.c-rotulo.n2 .rot{font-weight:500;color:var(--grafite)}
td.c-rotulo.n3 .rot{font-weight:400;color:var(--grafite)}
tr.lin-n0 td{border-top:1px solid var(--nevoa)}
/* o fundo da linha-raiz mora junto das outras regras de fundo congelado, na
   secao da tabela — uma declaracao por assunto */
a.abrir{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;flex:0 0 17px;border:1px solid var(--nevoa);
  border-radius:4px;background:var(--branco);color:var(--vinho);
  font-weight:700;font-size:12px;line-height:1;text-decoration:none;
}
a.abrir:hover{border-color:var(--vinho);background:var(--vinho-tinta);text-decoration:none}
.abrir.vazio{border:0;background:none;color:#C7C0B6;cursor:default}  /* folha da arvore: ponto decorativo */
/* o funil so aparece no hover da linha — a NN/g pede acao descoberta sob
   demanda em tabela densa, para nao competir com o dado */
a.funil{opacity:0;color:var(--grafite);font-size:13px;padding:0 3px;text-decoration:none}
tr:hover a.funil,tr:focus-within a.funil{opacity:.55}
a.funil:hover,a.funil:focus-visible{opacity:1!important;color:var(--vinho);text-decoration:none}

form.filtros .acoes{display:flex;gap:var(--e2);align-items:center;margin-left:auto}
/* o botao primario com relevo — degrade curto e sombra colorida do proprio
   vinho, que e o que faz um botao parecer clicavel sem contorno grosso */
form.filtros .acoes button[type=submit]{
  background:linear-gradient(180deg,var(--vinho-vivo) 0%,var(--vinho) 100%);
  color:var(--branco);border:0;border-radius:8px;padding:0 18px;height:36px;
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 1px 2px rgba(157,13,22,.30),0 4px 12px rgba(157,13,22,.22);
  transition:transform .06s,box-shadow .12s;
}
form.filtros .acoes button[type=submit]:hover{
  box-shadow:0 2px 4px rgba(157,13,22,.34),0 8px 20px rgba(157,13,22,.28);
}
form.filtros .acoes button[type=submit]:active{transform:translateY(1px)}

/* exportacao e link num menu so, discreto — tres botoes viraram um "⋯" */
.menu{position:relative}
.menu summary{
  list-style:none;cursor:pointer;border:1px solid var(--nevoa);border-radius:8px;
  background:var(--branco);color:var(--grafite);font-weight:700;font-size:15px;
  padding:0 11px;height:34px;display:flex;align-items:center;letter-spacing:1px;
}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{border-color:var(--vinho);color:var(--vinho)}
.menu[open] summary{border-color:var(--vinho);color:var(--vinho)}
.menu-itens{
  position:absolute;right:0;top:38px;z-index:40;min-width:186px;
  background:var(--branco);border:1px solid var(--nevoa);border-radius:9px;
  box-shadow:0 6px 24px rgba(26,22,20,.13);padding:5px;
}
.menu-itens a,.menu-itens button{
  display:block;width:100%;text-align:left;background:transparent;border:0;
  color:var(--ink);font-size:13px;font-weight:500;padding:7px 10px;border-radius:6px;
  cursor:pointer;font-family:inherit;
}
.menu-itens a:hover,.menu-itens button:hover{background:var(--vinho-tinta);color:var(--vinho);text-decoration:none}

/* ---- CARTOES: mais informacao, menos altura. O delta subiu para a linha do
   rotulo (ele nao merece uma linha propria) e no lugar entrou a BASE do
   calculo — numerador e denominador, que e o que faltava para o numero se
   explicar sozinho. ---- */
/* ---- FAIXA DE KPI (handoff 2.1, 17/08/2026) -------------------------------
   SAIU A CAIXA. Os cinco viviam em cartoes com borda, sombra, degrade e uma
   fita colorida no topo — quatro tratamentos para dizer a mesma coisa, e o
   resultado era que os cinco gritavam igual e nenhum hierarquizava. Viram
   BLOCOS separados por um fio, que e o que o handoff mede: sem caixa,
   `1px var(--linha-fina)` entre eles, padding 9px 14px 10px 0.

   O ESTADO NAO SAIU JUNTO: ele continua na pilula `.k-st` (a PALAVRA
   "atencao"/"ruim", que sobrevive ao P&B) e na barra lateral. Tirar a caixa e
   decisao de densidade; tirar canal de estado seria decisao de acessibilidade,
   e essa nao esta em jogo. `teste_cor.py` cobra os canais em `td.st-*`, nao
   aqui — conferido antes de mexer, nao depois. */
.cartoes{display:flex;flex-wrap:wrap;align-items:stretch;
         gap:0;margin:2px 0 12px;
         border-top:1px solid var(--linha-fina);
         border-bottom:1px solid var(--linha-fina)}
.kpi{
  flex:1 1 168px;min-width:0;
  padding:9px 14px 10px 0;position:relative;
  border-left:1px solid var(--linha-fina);
}
.kpi:first-child{border-left:0;padding-left:2px}
.k-topo{display:flex;align-items:center;gap:7px;min-width:0}
/* ROTULO EM CAIXA NORMAL. O micro-caps de 9,5px com letter-spacing largo era
   a regra da tela inteira — e quando tudo e etiqueta, nada e titulo. 11,5px
   normal devolve a hierarquia sem perder densidade (handoff, secao 5). */
/* ⚠️ A COR NAO MORA AQUI. `.k-rot` tambem e alvo da regra de "rotulo em caixa
   normal" mais abaixo (`.v-rot, .k-rot, .f-campo span`), que vem DEPOIS com a
   mesma especificidade e vence — e entrega `--fraco-papel`, que e o terciario
   CERTO para o fundo papel em que a faixa de KPI cai (5,13:1). Declarar
   `color` aqui tambem criava uma segunda verdade que ja nascia morta: a folha
   inteira tem um comentario contra isso. Fica so a metrica. */
.k-rot{font-size:11.5px;letter-spacing:0;font-weight:500;
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* verde e vermelho aqui NAO sao meta: sao direcao contra o periodo anterior,
   que e referencia medida. Sem base anterior, sem cor. */
.k-dt{font-size:12px;font-weight:500;white-space:nowrap;color:var(--grafite)}
.k-dt.sobe{color:var(--st-bom)}
.k-dt.desce{color:var(--st-ruim)}
/* ---- O ESTADO NO CARTAO ----
   Mesma gramatica da celula, em escala de cartao: quem esta bem leva so a
   palavra em verde; quem precisa de atencao ou esta ruim leva PREENCHIMENTO, e
   o cartao inteiro ganha uma barra lateral no tom. Repetir a gramatica e o que
   faz o topo e a tabela lerem como uma coisa so. */
.k-st{font-size:11px;font-weight:500;letter-spacing:0;
      padding:1px 7px;border-radius:999px}
.k-st.st-bom{color:var(--st-bom);border:1px solid var(--nevoa)}
.k-st.st-atencao{background:var(--st-atencao-fundo);color:var(--ink)}
.k-st.st-ruim{background:var(--st-ruim-fundo);color:var(--ink)}
/* 🔴 A BARRA LATERAL SAIU DO CARTAO EM 17/08 (3a sessao). Ela era o canal
   nao-cromatico do estado quando o cartao tinha caixa — mas a PILULA ao lado do
   rotulo diz a mesma coisa POR ESCRITO ("atencao", "ruim"), e palavra sobrevive
   ao P&B melhor que barra. Com os blocos ja separados por fio, a barra virava
   uma terceira vertical na mesma regiao e o topo lia como cerca.
   ⚠️ O canal continua existindo — mudou de lugar, nao sumiu. `teste_cor.py`
   cobra os canais em `td.st-*`, nao aqui; conferido antes de remover. */
.k-val .k-dt{margin-left:8px;vertical-align:baseline}
@media print{.kpi.k-atencao,.kpi.k-ruim{box-shadow:none}
             .k-st{border:.5pt solid #000;background:none!important;color:#000!important}}
.k-val{font-size:21px;font-weight:600;line-height:1.18;color:var(--ink);
       font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:2px}
.k-val i{font-size:12px;font-style:normal;font-weight:600;color:var(--grafite);margin-left:2px}
.k-base{font-size:11px;color:var(--fraco-papel);margin-top:2px;white-space:nowrap;
        overflow:hidden;text-overflow:ellipsis}
.ref-anterior{font-size:11.5px;color:var(--grafite);margin:0 0 11px 2px}

.cel-spark{padding:2px 8px !important;line-height:0;vertical-align:middle}
.spark{display:block;margin:0 auto;opacity:.9}
tbody tr:hover .spark{opacity:1}

/* delta miudo ao lado do numero na tabela */
/* M3 — O DELTA GANHA VAGA FIXA.
   `72.9% +3.6` e `50.0%` eram centralizados COMO BLOCO, entao o valor derivava
   e o olho deixava de descer em linha reta. O tabular-nums alinhava o digito e
   o apendice desfazia. A centralizacao (decisao do dono) fica; o efeito
   colateral some. */
td.c-num .dt{display:inline-block;min-width:4.6ch;text-align:left;margin-left:5px}
.dt{font-size:10px;font-weight:700;margin-left:4px;vertical-align:1px}
/* o delta usa a MESMA paleta de status: dois verdes quase iguais com
   empregos diferentes seria o defeito que esta paleta veio corrigir */
.dt.sobe{color:var(--st-bom)}
.dt.desce{color:var(--st-ruim)}

/* =====================================================================
   A TABELA — area de DADOS calma, e um PAINEL DE ROLAGEM de verdade.
   =====================================================================
   🔴 O CONGELAMENTO NAO FUNCIONAVA, e isso explica quase tudo que o dono viu.
   `overflow-x:auto` faz o `overflow-y` computar `auto` junto: a `.rolagem`
   JA ERA um container de rolagem. Mas ela nao tinha altura limite, entao nunca
   rolava na vertical — e o `position:sticky` do <thead> e do <tfoot> se
   ancorava numa caixa que nunca rolava, ou seja, nao colava em lugar nenhum.
   Pior: o `top:0` do cabecalho mirava o topo da CAIXA, nao o da janela, e o
   cabecalho do site (z-index 30) passava por cima dele.
   Com `max-height` a caixa vira o painel que o desenho sempre pressupos:
   cabecalho fixo, TOTAL fixo no pe e a coluna de nomes fixa a esquerda — os
   tres ao mesmo tempo, que e o que um grid profissional entrega.

   ⚠️ E O PADDING DO CARTAO SAIU. Com `overflow` ligado, os 16px de padding
   ficam DENTRO da area rolavel: o conteudo passa por baixo deles e reaparece
   na faixa a esquerda da coluna congelada. Grid de dados vai de borda a borda. */
.cartao.rolagem{padding:0;overflow:auto;max-height:calc(100vh - 250px);min-height:150px}
.rolagem{border-radius:var(--raio)}
table{
  border-collapse:separate;border-spacing:0;width:100%;font-size:var(--t-dado);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;   /* digitos de largura fixa: as colunas alinham */
}
/* Numero CENTRALIZADO por pedido do dono (16/08). A convencao de mercado e a
   direita, porque alinha as casas decimais — mas com `tabular-nums` os digitos
   ja tem largura fixa, entao a coluna continua alinhada e legivel. */
th,td{padding:7px 11px;border-bottom:1px solid var(--linha);text-align:center}
th{
  position:sticky;top:0;color:var(--grafite);
  background:linear-gradient(180deg,var(--branco) 0%,var(--cromo-fim) 100%);
  font-size:11px;letter-spacing:0;font-weight:500;
  border-bottom:2px solid var(--nevoa);z-index:10;cursor:default;
}

/* ---- O EMPILHAMENTO, declarado de uma vez so ----
   Antes o z-index era decidido regra a regra e o resultado era contraditorio:
   `tfoot td` pedia 8 e `td.c-rotulo` pedia 5, mas `td.c-rotulo` tem
   especificidade MAIOR — entao no rodape as celulas de numero (8) passavam por
   cima da celula de nome (5) e cortavam "TOTAL do recorte" no meio. Era isso o
   "nao esta a coluna completa". A ordem correta e uma so:
     canto do cabecalho 40 > cabecalho 30/29 > canto do rodape 22 > rodape 20
     > coluna congelada 15 > celulas comuns 1
   Quem congela nos DOIS eixos tem que ficar acima de quem congela em um. */
.c-periodo,.c-rotulo{text-align:left}
/* A SOMBRA DE BORDA DA COLUNA CONGELADA (handoff 2.2, 17/08/2026).
   Era um fio de 1px (`1px 0 0 var(--linha)`), que so separa. A sombra diz
   outra coisa: que a coluna esta ACIMA do que rola por baixo dela. O handoff
   chama isso de "o detalhe que faz a tabela parecer produto e nao planilha", e
   custa uma linha.
   ⚠️ O FIO CONTINUA: a sombra sozinha some na impressao e em alto contraste,
   e ai a fronteira da coluna congelada desapareceria. Os dois juntos — fio
   para a estrutura, sombra para a profundidade. A borda usa `--linha-bloco`,
   que e a fronteira de BLOCO do handoff, mais forte que a de linha. */
th.c-rotulo,td.c-rotulo{position:sticky;left:0;background:var(--painel);z-index:15;
                        box-shadow:1px 0 0 var(--linha-bloco),
                                   6px 0 8px -6px rgba(25,22,20,.14)}
thead tr:not(.th-grupos) th{z-index:30}
thead tr:not(.th-grupos) th.c-rotulo{z-index:40}
.th-grupos th{z-index:29}
.th-grupos th:first-child{z-index:40}
tfoot td{position:sticky;bottom:0;z-index:20}
tfoot td.c-rotulo{position:sticky;left:0;bottom:0;z-index:22}   /* congela nos DOIS eixos */

/* ---- FUNDO OPACO EM TUDO QUE CONGELA ----
   Celula congelada com fundo transparente deixa o conteudo passar por baixo —
   e era o caso do rodape e da linha de gerente da arvore. Nao ha excecao: se
   gruda, e opaca. */
tfoot td{font-weight:700;border-top:2px solid var(--ink);background:var(--nevoa-clara)}
tfoot td.c-rotulo{background:var(--nevoa-clara)}
tbody td{background:var(--painel)}
/* ---- A BANDA DA COLUNA CONGELADA ----
   Tambem veio do Excel do dono: la a coluna de Filial tem fundo proprio e le
   como MOLDURA, nao como dado. A nossa era branca — congelava e continuava
   parecendo mais uma celula que ficou parada. Com banda, a fronteira do
   congelamento fica obvia, o que de quebra reforca o conserto da rolagem. */
tbody td.c-rotulo{background:var(--banda)}
tr.lin-n0 td.c-rotulo{background:var(--banda-raiz)}
@media print{tbody td.c-rotulo,tr.lin-n0 td.c-rotulo{background:#fff}}

/* ⚠️ A ZEBRA SAIU. Ela media 1,02:1 contra o branco — invisivel, entao nao
   separava linha nenhuma — e ao mesmo tempo alterava o fundo por baixo das
   celulas com cor de julgamento, que agora CARREGAM SIGNIFICADO. Fundo
   decorativo competindo com fundo semantico e o erro que a paleta v3 veio
   corrigir. Quem separa as linhas e a regra de 1px, que sempre esteve la. */
/* M3 — HOVER != ORDENADA. As duas usavam vinho-tinta: "seu mouse esta aqui"
   e "esta ordenado por aqui" sao informacoes diferentes. O hover vira
   nevoa; o vinho fica reservado a ordenacao. */
tbody tr:hover td,tbody tr:hover td.c-rotulo{background-color:var(--linha-hover)}
.vazio{color:var(--grafite);opacity:.65}

/* ---- trilha: e NAVEGACAO, nao enfeite. Cada item volta ao seu ponto. ---- */
.trilha{display:flex;gap:7px;flex-wrap:wrap;align-items:center;font-size:12.5px;
        color:var(--grafite);margin-bottom:11px}
.trilha .sep{color:var(--grafite);font-weight:700}   /* mesma correcao: 1,29:1 -> 7,98:1 */
.trilha .item{
  background:var(--branco);border:1px solid var(--nevoa);
  border-radius:999px;padding:3px 11px;color:var(--ink);text-decoration:none;
  transition:background .12s,border-color .12s;
}
a.trilha-x{}
.trilha a.item:hover{background:var(--vinho-tinta);border-color:var(--vinho);
                     color:var(--vinho);text-decoration:none}
.trilha .item.raiz{border-left:3px solid var(--vinho)}
/* o item ATUAL nao e link — e onde voce esta, e clicar nele nao faria nada */
.trilha .item.atual{background:var(--vinho);border-color:var(--vinho);color:var(--branco);cursor:default}
.trilha .item.atual b{color:var(--branco)}
.trilha .subir{margin-left:6px;font-size:12px;color:var(--vinho);white-space:nowrap}

/* ---- acoes da tabela, dentro da barra de filtros ---- */
form.filtros .acoes{display:flex;gap:7px;align-items:center;margin-left:auto;padding-bottom:1px}
.contagem{font-size:12px;color:var(--grafite);padding:2px 2px 9px;white-space:nowrap}

/* ---- avisos: o AMARELO entra aqui, como BARRA, nunca como texto ---- */
.aviso{
  border-left:4px solid var(--amarelo);background:var(--aviso-fundo);color:var(--ink);
  padding:10px 13px;border-radius:7px;font-size:12.5px;margin-bottom:12px;
  border-top:1px solid var(--nevoa);border-right:1px solid var(--nevoa);
  border-bottom:1px solid var(--nevoa);
}
.aviso.forte{border-left-color:var(--vinho);background:var(--aviso-forte)}
.grupo{color:var(--grafite);font-size:12px;line-height:1.65}

/* ---- NOTAS DE LEITURA ----
   Eram tres paragrafos densos soltos embaixo da tabela, no mesmo tamanho do
   resto da pagina: um muro de texto ocupando um quarto da tela, e a parte menos
   profissional do que o dono via. NADA foi cortado — cada frase ali fecha um
   furo de interpretacao que ja custou erro (a media das medias, o dia do
   tecnico, o cartao que conta uma vez). O que muda e o ENQUADRAMENTO: painel
   proprio, tipo menor, duas colunas quando ha largura, titulo dizendo o que e,
   e a possibilidade de recolher. Quem ja sabe passa; quem precisa acha. */
.notas{
  border:1px solid var(--linha);border-radius:var(--raio);
  background:linear-gradient(180deg,var(--branco) 0%,var(--cromo-fim) 100%);
  padding:11px 16px 13px;margin-top:var(--e3);
  box-shadow:0 1px 2px rgba(26,22,20,.04);
}
.notas>summary{
  list-style:none;cursor:pointer;font-size:11.5px;font-weight:600;
  letter-spacing:0;color:var(--grafite);
  display:flex;align-items:center;gap:var(--e2);
}
.notas>summary::-webkit-details-marker{display:none}
.notas>summary::after{content:"▾";font-size:9px;color:var(--vinho)}
.notas[open]>summary::after{content:"▴"}
.notas>summary:hover{color:var(--vinho)}
.notas .corpo{margin-top:var(--e2)}
.notas p{margin:0 0 var(--e2);color:var(--grafite);font-size:var(--t-apoio);
         line-height:1.6;break-inside:avoid}
.notas p:last-child{margin-bottom:0}
.notas b{color:var(--ink)}
@media (min-width:1100px){.notas .corpo{column-count:2;column-gap:32px}}
@media print{.notas{border:0;box-shadow:none;padding:0;background:none}
             .notas .corpo{column-count:2}}

/* marcador de ressalva no cabecalho da coluna — ocupa zero espaco vertical,
   e o texto inteiro vive no `title`. Substituiu um bloco de aviso que tomava
   uma secao inteira da tela. */
.marca-aviso{color:var(--ambar);font-weight:700;margin-left:2px;cursor:help}

/* ---- O SILENCIO DECLARADO (17/08/2026) ------------------------------------
   Doze indicadores calam no dia aberto por decisao (DEC-2026-076). Ate hoje
   eles mostravam um "—" identico ao de dado faltando, e o dono leu a tela como
   quebrada. O numero estava certo; faltava dizer POR QUE.

   O canal e SUBLINHADO PONTILHADO, nao cor: cor sozinha nao sobrevive ao P&B
   nem a quem nao distingue matiz (WCAG 1.4.1), e a folha ja usa o traco como
   canal de estado desde a DEC-2026-080. Pontilhado significa "de proposito";
   ausencia de traco continua significando "nao ha dado".
   O texto vem do `title`, que sai de MOTIVO_CALADO no registro. */
.calado{
  color:var(--fraco-branco);
  text-decoration:underline dotted var(--ctrl-linha);
  text-underline-offset:3px;
  cursor:help;
}
/* ⚠️ `--fraco-papel`, NAO `--fraco-branco`. Esta marca vive no `th`, cujo
   gradiente termina em #F7F4F0 — fundo PAPEL. Medido: o terciario de branco
   da 4,32:1 ali (reprova), o de papel da ~5,0:1. E exatamente a distincao
   pela qual o projeto tem DOIS cinzas terciarios em vez de um. */
.marca-calado{color:var(--fraco-papel);margin-left:2px;cursor:help;font-size:.85em}

/* ---- estado vazio que ENSINA ---- */
.vazio-bloco{text-align:center;padding:44px 22px;color:var(--grafite)}
.vazio-bloco .t{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:7px}
.vazio-bloco .d{font-size:13px;max-width:520px;margin:0 auto 15px}

/* No ESCURO a sombra de 14 por cento desaparece contra o fundo — sombra e
   ausencia de luz, e sobre superficie escura nao ha luz para tirar. A densidade
   sobe para 44 por cento, que e a mesma decisao que o handoff tomou para
   `--sombra` no tema escuro. */
html[data-tema="escuro"] th.c-rotulo,
html[data-tema="escuro"] td.c-rotulo{box-shadow:1px 0 0 var(--linha-bloco),
                                     6px 0 10px -6px rgba(0,0,0,.44)}
@media (prefers-color-scheme: dark){
  html[data-tema="sistema"] th.c-rotulo,
  html[data-tema="sistema"] td.c-rotulo{box-shadow:1px 0 0 var(--linha-bloco),
                                        6px 0 10px -6px rgba(0,0,0,.44)}
}

/* ---- BARRA DE ESTADO (handoff 2.7, 17/08/2026) ----------------------------
   A procedencia do dado publicada na tela: quantas linhas, de que fonte, de
   que HORA e a foto, quando vem a proxima, qual leitura de chefia e quanto
   tempo a consulta levou. Medidas do handoff, nao inventadas aqui.
   Cor: --fraco-papel (5,17:1 sobre a banda) — o --fraco-branco reprovaria
   sobre este fundo, e e essa a razao de existirem dois cinzas terciarios. */
.barra-estado{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  min-height:30px;padding:0 2px;margin-top:10px;
  font-size:11px;color:var(--fraco-papel);
  border-top:1px solid var(--linha-fina);
}
.barra-estado b{font-weight:600;color:var(--grafite)}
.barra-estado a{color:var(--fraco-papel);text-decoration:underline;
                text-underline-offset:2px}
.barra-estado a:hover{color:var(--vinho-texto)}
.be-div{width:1px;height:11px;background:var(--linha-bloco);display:block;flex:none}
.be-espaco{flex:1 1 auto}

/* ---- paginacao ---- */
.paginacao{display:flex;justify-content:space-between;align-items:center;gap:12px;
           padding:11px 2px 0;font-size:12.5px;color:var(--grafite);flex-wrap:wrap}
.paginacao .grupo-botoes{display:flex;gap:7px;align-items:center}

/* =====================================================================
   CELULAR — a tabela vira LISTA DE CARTOES.
   Quinze colunas rolando na horizontal e usavel e ruim. Abaixo de 760px cada
   linha vira um cartao com o nome no topo e os indicadores em duas colunas,
   cada um com o proprio rotulo (o `data-r` que o template escreve). A coluna
   congelada e o cabecalho fixo saem — no cartao eles nao fazem sentido.
   ===================================================================== */
@media (max-width:760px){
  main{padding:12px 10px 40px}
  header .barra{padding:10px 13px}
  header h1 span{display:none}

  .cartoes{grid-template-columns:repeat(2,1fr);gap:7px}
  .kpi{padding:7px 10px 8px}
  .k-val{font-size:19px}

  form.filtros{gap:6px}
  .campo{flex:1 1 46%;min-height:40px}
  .campo.periodo{flex:1 1 100%}
  .campo.periodo input{width:100%}
  form.filtros .acoes{flex:1 1 100%;margin-left:0}
  form.filtros .acoes button[type=submit]{flex:1}

  /* no celular a tabela vira lista de cartoes: painel rolavel nao se aplica */
  .cartao.rolagem,.rolagem{overflow:visible;max-height:none;min-height:0}
  table,thead,tbody,tfoot,tr,th,td{display:block}
  thead{display:none}
  tbody tr{
    background:var(--painel);border:1px solid var(--linha);border-radius:9px;
    margin-bottom:9px;padding:9px 11px;box-shadow:var(--sombra);
    display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;
  }
  tbody tr:hover td,tbody tr:nth-child(even) td{background:transparent}
  /* a 1a celula (periodo) e a 2a (nome) ocupam a largura toda, no topo */
  tbody td.c-periodo{grid-column:1/-1;order:-2;font-size:11px;color:var(--grafite);
                        text-align:left;border:0;padding:0}
  tbody td.c-rotulo{grid-column:1/-1;order:-1;position:static;font-weight:700;
                        font-size:14.5px;border:0;padding:0 0 5px;
                        border-bottom:1px solid var(--linha)!important;box-shadow:none}
  tbody td{border:0;padding:0;text-align:left;display:flex;
           justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
  tbody td::before{
    content:attr(data-r);color:var(--grafite);font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:.5px;
  }
  tbody td.c-periodo::before,tbody td.c-rotulo::before{content:none}
  tbody td[data-r="Tendência"]{grid-column:1/-1}
  .cel-spark{padding:0!important}
  .spark{margin:0}
  tfoot tr{background:var(--nevoa-clara);border:1px solid var(--ink);border-radius:9px;
           display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;padding:9px 11px}
  tfoot td{border:0;padding:0;text-align:left;display:flex;
           justify-content:space-between;font-size:13px}
  tfoot td.c-periodo{display:none}
  tfoot td.c-rotulo{grid-column:1/-1;font-size:14px;border-bottom:1px solid var(--nevoa)!important;padding-bottom:5px}
  .contagem{padding-bottom:7px}
  .paginacao{flex-direction:column;align-items:stretch;gap:8px}
  .paginacao .grupo-botoes{justify-content:center;flex-wrap:wrap}
}


/* =====================================================================
   ONDA 3 DO HANDOFF DE DESIGN — 2026-08-17
   ===================================================================== */

/* ---- ANEL DE FOCO VISIVEL (WCAG 2.4.7) ----
   🔴 A FOLHA TINHA 7 MENCOES A `outline`/`:focus` EM 944 LINHAS, e nenhuma
   cobria os controles da barra. Navegar esta tela por teclado era navegar as
   cegas — e ela e um painel operacional, onde teclado e o caminho rapido.
   `:focus-visible` (e nao `:focus`) para o anel NAO aparecer no clique de
   mouse, que e o motivo pelo qual gente desliga outline e quebra a
   acessibilidade inteira. */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--vinho-texto);
  outline-offset:2px;
  border-radius:3px;
}
/* dentro da tabela o offset positivo seria cortado pelo `overflow` da coluna
   congelada — ali o anel vai para dentro */
td:focus-visible, th a:focus-visible{outline-offset:-2px}

/* ---- ALTURA DE CONTROLE CONSTANTE ----
   Um so valor (--alt-ctrl, 30px) para tudo que se clica numa barra. */
.barra-cmd select, .barra-cmd input, .barra-cmd button,
.filtros select, .filtros input, .filtros button{
  min-height:var(--alt-ctrl);
}

/* ---- ROTULO EM CAIXA NORMAL ----
   O micro-caps de 9,5px com letter-spacing largo era a regra da tela INTEIRA,
   e quando tudo e etiqueta nada e hierarquia: o olho perde o que e titulo e o
   que e apoio. Fica caixa alta so onde o CONTEUDO ja e caixa alta (os macros
   de motivo, as etiquetas de estado da legenda).
   ⚠️ Nao se apaga a regra antiga: sobrescreve-se. A folha e territorio de
   design e a regra original tem comentario proprio explicando de onde veio. */
.v-rot, .k-rot, .f-campo span{
  font-size:11.5px; text-transform:none; letter-spacing:normal;
  color:var(--fraco-papel);
}

/* =====================================================================
   TELA "ENTRAR" — 17/08/2026
   ---------------------------------------------------------------------
   Ela saiu de um <style> embutido com paleta propria (azul #4da3ff sobre
   #0f1115) e passou a viver aqui, nos mesmos tokens do resto do produto.
   Era a unica tela que nao usava a marca.
   ===================================================================== */
body.tela-entrar{
  margin:0; min-height:100vh; display:flex; align-items:center;
  justify-content:center; background:var(--bg); color:var(--ink);
  /* duas luzes radiais de baixa opacidade — NAO e imagem e NAO e ruido:
     e a textura mais barata que existe e a unica que nao pesa no carregamento */
  background-image:
    radial-gradient(90% 60% at 50% -10%, rgba(157,13,22,.05) 0%, rgba(157,13,22,0) 60%),
    radial-gradient(70% 50% at 12% 110%, rgba(255,204,0,.07) 0%, rgba(255,204,0,0) 58%);
}
html[data-tema="escuro"] body.tela-entrar{
  background-image:
    radial-gradient(90% 60% at 50% -10%, rgba(232,104,111,.10) 0%, rgba(232,104,111,0) 60%),
    radial-gradient(70% 50% at 12% 110%, rgba(227,179,65,.06) 0%, rgba(227,179,65,0) 58%);
}
@media (prefers-color-scheme: dark){
  html[data-tema="sistema"] body.tela-entrar{
    background-image:
      radial-gradient(90% 60% at 50% -10%, rgba(232,104,111,.10) 0%, rgba(232,104,111,0) 60%),
      radial-gradient(70% 50% at 12% 110%, rgba(227,179,65,.06) 0%, rgba(227,179,65,0) 58%);
  }
}
.tela-entrar .selo{position:fixed;top:18px;right:22px;font-size:11.5px;
                   color:var(--fraco-papel)}
.entrar{display:flex;flex-direction:column;align-items:center;gap:24px;
        padding:24px;width:100%;max-width:460px}

/* A MARCA VEM POR `background-image`, nao por <img src>.
   ⚠️ Ativo que troca com o tema NAO pode entrar por `src`: o navegador busca no
   parse, antes de qualquer regra, e o arquivo do outro tema vira 404 recorrente
   no log do nginx. */
.assinatura{width:176px;height:124px;
            background:url(/static/marca/r2-logo-full.svg) center/contain no-repeat}
html[data-tema="escuro"] .assinatura{background-image:url(/static/marca/r2-logo-full-rev.svg)}
@media (prefers-color-scheme: dark){
  html[data-tema="sistema"] .assinatura{background-image:url(/static/marca/r2-logo-full-rev.svg)}
}

.cartao-entrar{width:100%;max-width:404px;background:var(--surf);
               border:1px solid var(--linha-bloco);border-radius:12px;
               padding:30px 32px 28px;box-shadow:var(--sombra-cartao,0 1px 2px rgba(25,22,20,.04))}
.cartao-entrar h1{font-size:31px;font-weight:600;letter-spacing:-.028em;
                  margin:0 0 6px;color:var(--ink)}
.cartao-entrar .sub{font-size:15px;color:var(--grafite);margin:0 0 22px}
.cartao-entrar label{display:block;font-size:12.5px;color:var(--fraco-branco);
                     margin:14px 0 6px;font-weight:500}
/* CAMPO E CONTROLE, entao a borda e --ctrl-linha e nao --linha-bloco:
   com --linha-bloco o campo mede 1,50:1 contra o cartao e vira fantasma. */
.cartao-entrar input{width:100%;box-sizing:border-box;height:var(--alt-campo);
                     background:var(--surf);color:var(--ink);
                     border:1px solid var(--ctrl-linha);border-radius:var(--raio-campo);
                     padding:0 13px;font:inherit;font-size:15px;
                     transition:border-color .16s ease,box-shadow .16s ease}
.cartao-entrar input:focus{outline:none;border-color:var(--vinho-texto);
                           box-shadow:0 0 0 4px rgba(157,13,22,.14)}
html[data-tema="escuro"] .cartao-entrar input:focus{box-shadow:0 0 0 4px rgba(232,104,111,.28)}
.cartao-entrar input.campo-erro{border-color:var(--st-ruim)}
.cartao-entrar input[readonly]{background:var(--banda);color:var(--fraco-papel);
                               border-color:var(--linha-bloco)}

.btn-entrar{width:100%;height:var(--alt-campo);margin-top:22px;
            background:var(--vinho);color:#fff;border:0;
            border-radius:var(--raio-campo);font:inherit;font-size:15px;
            font-weight:600;cursor:pointer;
            box-shadow:0 1px 2px rgba(120,10,17,.28);
            transition:background .12s ease,box-shadow .12s ease,transform .06s ease}
.btn-entrar:hover{background:var(--vinho-vivo);box-shadow:0 4px 14px rgba(120,10,17,.28)}
.btn-entrar:active{transform:translateY(1px)}
.btn-entrar.ocupado{background:var(--vinho-esc);cursor:progress;
                    display:flex;align-items:center;justify-content:center;gap:9px}
.btn-entrar.ocupado::before{content:"";width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:r2spin .7s linear infinite}
@keyframes r2spin{to{transform:rotate(360deg)}}

/* ============================================================================
   MOVIMENTO — handoff secao 4, implementado em 17/08/2026 (3a sessao)
   ----------------------------------------------------------------------------
   Ate aqui a folha tinha UM keyframe: o spinner do login. O dono comparou a
   tela com o modelo e a primeira coisa que apontou, depois do design, foi que
   "nao tem animacao nenhuma".

   A REGRA QUE GOVERNA TUDO AQUI, e ela e do handoff: **nada acima de 550ms no
   caminho de interacao, e nada que atrase clique.** Animacao em painel de
   operacao nao e enfeite nem espera — ela existe para dizer O QUE MUDOU quando
   a tela se refaz. Quem olha isto o dia inteiro percebe movimento inutil em
   uma hora e passa a odiar a ferramenta.

   E TUDO AQUI MORRE COM `prefers-reduced-motion` — nao por formalidade: quem
   liga essa preferencia costuma ter motivo vestibular, e uma grade de 32
   colunas entrando em cascata e exatamente o gatilho.
   ============================================================================ */

/* ---- 1. ENTRADA DA LINHA DA GRADE — 340ms, 6px (handoff) ----------------
   Escalonada em 8 degraus de 22ms. O teto de 8 e deliberado: com 16 linhas em
   cascata completa a ultima entraria 350ms depois da primeira, e a tabela
   pareceria montar-se devagar. Da 9a em diante todas entram junto. */
@keyframes r2entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
tbody tr{animation:r2entra 340ms ease both}
tbody tr:nth-child(1){animation-delay:0ms}    tbody tr:nth-child(2){animation-delay:22ms}
tbody tr:nth-child(3){animation-delay:44ms}   tbody tr:nth-child(4){animation-delay:66ms}
tbody tr:nth-child(5){animation-delay:88ms}   tbody tr:nth-child(6){animation-delay:110ms}
tbody tr:nth-child(7){animation-delay:132ms}  tbody tr:nth-child(8){animation-delay:154ms}
tbody tr:nth-child(n+9){animation-delay:176ms}

/* ---- 2. O SPARKLINE SE DESENHA — 1100ms (handoff: 1000-1200ms) ----------
   `pathLength="100"` no SVG normaliza o comprimento, entao o mesmo dasharray
   serve a qualquer forma de serie. O ponto da ponta so aparece quando o traco
   chega nele — se aparecesse antes, anunciaria um fim que ainda nao existe. */
.spark{color:var(--fraco-branco)}
.spark .spark-l{stroke-dasharray:100;stroke-dashoffset:100;
                animation:r2traco 1100ms ease forwards}
.spark .spark-p{fill:var(--vinho-texto);opacity:0;
                animation:r2ponto 260ms ease 950ms forwards}
@keyframes r2traco{to{stroke-dashoffset:0}}
@keyframes r2ponto{to{opacity:1}}

/* ---- 3. O PULSO DO DIA VIVO — 2400ms (handoff) --------------------------
   So existe quando a fonte E o dia vivo. Um ponto que pulsa numa tela cujo dado
   NAO se atualiza sozinho seria mentira de interface. */
.vivo-ponto{display:inline-block;width:7px;height:7px;border-radius:50%;
            background:var(--st-bom);margin-right:5px;vertical-align:baseline;
            animation:r2pulso 2400ms ease-in-out infinite}
@keyframes r2pulso{0%,100%{opacity:1;transform:scale(1)}
                   50%{opacity:.45;transform:scale(.82)}}

/* ---- 4. HOVER 120ms e CAMPO 160ms (handoff) -----------------------------
   O hover da linha ja existia sem transicao: a cor trocava de um quadro para o
   outro, o que o olho le como piscada, nao como resposta. */
tbody tr td{transition:background-color 120ms ease}
.campo input,.campo select,.campo>div{transition:border-color 160ms ease,
                                                 box-shadow 160ms ease}

/* ---- 5. A CONTRAPARTIDA, e ela nao e opcional ---------------------------- */
@media (prefers-reduced-motion: reduce){
  tbody tr{animation:none}
  .spark .spark-l{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .spark .spark-p{opacity:1;animation:none}
  .vivo-ponto{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important}
}

.aviso-erro{display:flex;align-items:center;gap:9px;margin:0 0 4px;
            background:var(--selecao);border:1px solid var(--selecao-linha);
            border-radius:var(--raio-ctrl);padding:10px 12px;
            font-size:12.5px;color:var(--ink)}
.aviso-erro svg{color:var(--st-ruim);flex:0 0 auto}
.pe-entrar{font-size:11.5px;color:var(--fraco-papel);margin:0}

/* ⚠️ QUEM DESLIGA ANIMACAO NO SISTEMA NAO QUER SPINNER GIRANDO. O estado
   continua existindo (o botao muda de texto e trava); so o movimento sai. */
@media (prefers-reduced-motion: reduce){
  .btn-entrar.ocupado::before{animation:none}
  .cartao-entrar input,.btn-entrar{transition:none}
}

/* =====================================================================
   M-PCP — a pagina da demanda (DEC-2026-088)

   ACRESCIMO, NUNCA SUBSTITUICAO (DEC-2026-079): tudo abaixo usa tokens que JA
   EXISTEM no `:root` desta folha; nenhum token e redefinido, nenhum bloco
   antigo e tocado.

   ⚠️ Os nomes foram CONFERIDOS contra a folha antes de entrar. A primeira
   versao deste bloco usava `--borda`, `--texto-2` e `--fundo-2`, que NAO
   EXISTEM aqui — e `var()` orfao nao da erro: a pagina teria ido ao ar sem
   estilo, calada. E a mesma armadilha que a DEC-2026-079 mediu no handoff de
   design (30 tokens em uso, 118 lugares).
   ===================================================================== */

/* O selo de laboratorio. Ele e a PRIMEIRA coisa da pagina de proposito: a
   fonte e de carga manual, sem robo e sem vigia, e um numero daqui pode virar
   print numa reuniao. O aviso mora onde o leitor ve — nao so no ADR. */
.aviso-lab {
  border: 1px solid var(--linha);
  border-left: 3px solid var(--ambar);
  background: var(--surf);
  border-radius: var(--raio-cartao, 6px);
  padding: 10px 14px;
  margin: 0 0 18px;
  font-size: var(--t-apoio, 13px);
  line-height: 1.55;
  color: var(--grafite);
}
.aviso-lab strong { color: var(--ink); }
.aviso-lab code { font-size: var(--t-micro, 12px); }
.lab-proc { display: inline-block; margin-left: 6px; opacity: .85; }

.pcp-filtros {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end;
  margin: 0 0 18px;
}
.pcp-filtros label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--t-micro, 11px); letter-spacing: .04em; text-transform: uppercase;
  color: var(--grafite);
}
.pcp-filtros select, .pcp-filtros input {
  font: inherit; font-size: var(--t-apoio, 13px); text-transform: none; letter-spacing: 0;
  padding: 5px 8px; border: 1px solid var(--linha); border-radius: var(--raio-ctrl, 5px);
  background: var(--surf); color: var(--ink);
}
.pcp-filtros button {
  font: inherit; font-size: var(--t-apoio, 13px); padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--linha); border-radius: var(--raio-ctrl, 5px);
  background: var(--surf); color: var(--ink);
}

.pcp-h { font-size: var(--t-titulo, 15px); margin: 26px 0 6px; color: var(--ink); }
.pcp-nota {
  font-size: var(--t-apoio, 12.5px); line-height: 1.6; margin: 0 0 12px;
  color: var(--grafite); max-width: 78ch;
}

/* A tabela rola DENTRO do seu container: a pagina nunca rola na horizontal. */
.tab-rolagem { overflow-x: auto; margin-bottom: 8px; }

.pcp-tab { border-collapse: collapse; font-size: var(--t-dado, 13px); width: 100%; }
.pcp-tab th, .pcp-tab td {
  padding: 4px 10px; border-bottom: 1px solid var(--linha-fina);
  white-space: nowrap; color: var(--ink);
}
.pcp-tab th {
  text-align: left; font-size: var(--t-micro, 11px); letter-spacing: .04em;
  text-transform: uppercase; color: var(--grafite);
  border-bottom: 1px solid var(--linha);
}
.pcp-tab .num { text-align: right; font-variant-numeric: tabular-nums; }
.pcp-tab .forte { font-weight: 600; }
/* A media e informacao de CONTEXTO, nao o fato do dia: recua um passo. */
.pcp-tab .media { color: var(--grafite); }
.pcp-tab .marca { width: 1.2em; text-align: center; color: var(--grafite); }

/* Dia que nao entra na conta. Sao DOIS estados diferentes e por isso dois
   tratamentos — nao-util e regra de CALENDARIO, atipico e regra de DADO.
   O canal nao e so a opacidade: a coluna `marca` carrega `·` e `!`, porque
   um canal so nao passa em WCAG 1.4.1 (mesma razao da DEC-2026-074). */
.pcp-tab tr.nao-util td { opacity: .5; }
.pcp-tab tr.atipico td {
  text-decoration: line-through; text-decoration-thickness: 1px; opacity: .7;
}

/* =====================================================================
   M-PCP · O PAINEL — tokens de visualização

   A COR AQUI NÃO JULGA, E ISSO É DECISÃO (DEC-2026-073).
   Cor na tela é julgamento DECLARADO, nunca inferido do dado. Demanda não tem
   régua de bom/ruim — mais entrante não é bom nem ruim, é mais trabalho. Então
   a cor faz os dois papéis que lhe restam honestamente: IDENTIDADE (qual
   segmento) e MAGNITUDE (quanto), jamais mérito. Nenhum verde/vermelho de
   status aparece neste painel.

   OS HEX VÊM DE UMA PALETA JÁ VALIDADA, e não de escolha visual: não há Node
   nesta VPS para rodar o validador de contraste e ΔE sob daltonismo, então
   inventar uma paleta aqui seria escolher no olho — exatamente o que o método
   proíbe. Os quatro primeiros slots da paleta de referência passam nas provas
   de par adjacente nos dois modos.

   O VINHO DA MARCA NÃO ENTRA COMO SÉRIE. Ele mede 2,4:1 sobre o rail (medido na
   DEC-2026-081) e não sustenta linha fina; fica como acento de ênfase.
   ===================================================================== */
:root {
  --viz-1: #2a78d6;   /* INST  · azul   */
  --viz-2: #eb6834;   /* ME    · laranja */
  --viz-3: #1baf7a;   /* SERV  · aqua   */
  --viz-4: #eda100;   /* REP   · amarelo */
  --viz-grade: #e6e5e1;
  --viz-eixo:  #8a8880;
  --viz-prev:  #6da7ec;   /* previsto: mesma matiz, um passo mais clara */
  --viz-fds:   #f4f3f0;   /* faixa de fim de semana */
}
/* Os passos escuros SÃO ESCOLHIDOS para a superfície escura — não são o claro
   invertido. Seguem o padrão de tema desta folha: `sistema` é explícito (o
   servidor carimba `data-tema` sempre), então o modo escuro mora em DOIS
   lugares — o media query para quem deixou no sistema, e o seletor direto para
   quem escolheu escuro. Escrever só um deixaria metade dos leitores sem. */
html[data-tema="escuro"] {
  --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500;
  --viz-grade: #35342f; --viz-eixo: #7e7c74;
  --viz-prev: #5598e7; --viz-fds: #232320;
}
@media (prefers-color-scheme: dark) {
  html[data-tema="sistema"] {
    --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500;
    --viz-grade: #35342f; --viz-eixo: #7e7c74;
    --viz-prev: #5598e7; --viz-fds: #232320;
  }
}

/* --- a faixa de KPI ------------------------------------------------- */
.pcp-kpis { display: flex; flex-wrap: wrap; gap: 26px 40px; margin: 4px 0 22px; }
.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi-rot {
  font-size: var(--t-micro, 11px); letter-spacing: .05em; text-transform: uppercase;
  color: var(--grafite);
}
.kpi-val { font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--ink);
           font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: var(--t-micro, 11px); color: var(--grafite); }

/* --- os gráficos ---------------------------------------------------- */
.pcp-graficos { display: flex; flex-direction: column; gap: 26px; }
.viz { border: 1px solid var(--linha); border-radius: var(--raio-cartao, 6px);
       padding: 14px 16px 10px; background: var(--surf); }
.viz-tit { font-size: var(--t-apoio, 13px); font-weight: 600; color: var(--ink);
           margin: 0 0 2px; }
.viz-sub { font-size: var(--t-micro, 11.5px); color: var(--grafite); margin: 0 0 10px;
           line-height: 1.5; max-width: 82ch; }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Marcas finas, grade recessiva — a régua não compete com o dado. */
.viz .grade { stroke: var(--viz-grade); stroke-width: 1; }
.viz .eixo  { stroke: var(--viz-eixo); stroke-width: 1; }
.viz .rot   { fill: var(--grafite); font-size: 10px; }
.viz .rot-forte { fill: var(--ink); font-size: 10px; font-weight: 600; }
.viz .linha-serie { fill: none; stroke-width: 2; stroke-linejoin: round;
                    stroke-linecap: round; }
.viz .linha-media { fill: none; stroke-width: 2; stroke-dasharray: none; opacity: .95; }
/* O previsto usa a MESMA matiz da série, tracejada: é a mesma grandeza noutro
   estado, não outra coisa. Trocar de cor sugeriria outra série. */
.viz .linha-prev { fill: none; stroke-width: 2; stroke-dasharray: 5 4; }
.viz .faixa-prev { fill: var(--viz-prev); opacity: .16; }
.viz .banda-fds  { fill: var(--viz-fds); }
.viz .barra { rx: 2; }
/* 2px de respiro entre preenchimentos vizinhos, na cor da superfície */
.viz .barra + .barra { stroke: var(--surf); stroke-width: 2; }
.viz .ponto { r: 2.5; }

.viz-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px;
               font-size: var(--t-micro, 11px); color: var(--grafite); }
.viz-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.viz-legenda i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.viz-legenda i.trac { background: repeating-linear-gradient(90deg,
                       currentColor 0 5px, transparent 5px 9px); height: 3px; }

/* alvo de toque maior que a marca */
.viz .alvo { fill: transparent; cursor: crosshair; }
.viz .alvo:hover ~ .destaque, .viz .destaque.on { opacity: 1; }

/* Os rótulos de valor. TEXTO USA TOKEN DE TEXTO, NUNCA A COR DA SÉRIE — a
   marca colorida ao lado é que carrega a identidade; o número fica em tinta.
   O `val-fraco` é o segundo plano (produção), um passo atrás na hierarquia,
   e não uma cor diferente: a diferença é de peso, não de matiz. */
.viz .val       { fill: var(--ink); font-size: 10px; font-weight: 600;
                  font-variant-numeric: tabular-nums; }
.viz .val-fraco { fill: var(--grafite); font-size: 9.5px;
                  font-variant-numeric: tabular-nums; }
.viz .val-prev  { fill: var(--grafite); font-style: italic; }

/* O valor da média fica na cor da própria linha da média — é a ÚNICA exceção à
   regra de "texto em token de texto", e ela se justifica: o número está POSADO
   SOBRE a linha, sem marca ao lado que carregue a identidade. Aqui a cor é o
   que diz a qual das três curvas o número pertence. Vai com halo na cor da
   superfície para não se perder sobre a barra da produção. */
.viz .val-media {
  fill: var(--viz-4); font-size: 9.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: var(--surf); stroke-width: 2.5px;
  stroke-linejoin: round;
}

/* A produção PROJETADA: mesma matiz da realizada, VAZADA. O contorno tracejado
   diz "isto é conta, não fato" — a mesma gramática que o tracejado já usa na
   linha do entrante previsto. Preenchê-la igual apagaria a fronteira entre o
   que aconteceu e o que se projetou, que é a única coisa que o leitor não pode
   confundir num gráfico com futuro dentro. */
.viz .barra-prev {
  fill: none; stroke: var(--viz-3); stroke-width: 1.5;
  stroke-dasharray: 3 2.5; rx: 2; opacity: .85;
}
.viz-legenda i.vazado {
  background: none; border: 1.5px dashed var(--viz-3);
  height: 10px; width: 14px; border-radius: 2px;
}

/* =====================================================================
   PAINEL GERENCIAL (20/08/2026) — a escada de meses.

   ⚠️ ACRESCENTADO NO FIM DA FOLHA, e de proposito: o `estilo.css` e
   territorio do DESIGN (DEC-2026-075) e tem risco de merge declarado
   (DEC-2026-079). Bloco no fim e o que menos colide.

   ⚠️ TODO TOKEN USADO AQUI FOI CONFERIDO CONTRA O `:root` DESTA FOLHA.
   `var()` orfao nao da erro — a tela vai ao ar DESBOTADA e calada, que e
   exatamente o que a DEC-2026-079 registrou.

   CORES NEUTRAS POR DECISAO DO DONO: nenhuma regua de merito entra aqui.
   ===================================================================== */

/* --- as abas de vista (Tabela | Painel gerencial) -------------------- */
.abas { display: flex; gap: 2px; margin: 0 0 18px;
        border-bottom: 1px solid var(--linha); }
.abas .aba {
  font-size: var(--t-apoio, 13px); padding: 8px 16px; text-decoration: none;
  color: var(--grafite); border-bottom: 2px solid transparent;
  margin-bottom: -1px; border-radius: var(--raio-ctrl, 5px) var(--raio-ctrl, 5px) 0 0;
}
.abas .aba:hover { background: var(--surf-2); color: var(--ink); }
/* A aba ativa e <span>, nao <a>: link para a pagina em que ja se esta e
   promessa falsa para leitor de tela. Mesmo criterio da migalha. */
/* Navegacao nao vai para o papel — mesma regra que o rail ja segue. */
@media print { .abas { display: none } }
.abas .aba.ativa {
  color: var(--ink); font-weight: 600; border-bottom-color: var(--vinho);
  background: none; cursor: default;
}

/* --- filtros e KPIs: mesma gramatica do /pcp ------------------------- */
.ger-filtros { display: flex; flex-wrap: wrap; gap: 12px 16px;
               align-items: flex-end; margin: 0 0 18px; }
.ger-filtros label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--t-micro, 11px); letter-spacing: .04em;
  text-transform: uppercase; color: var(--grafite);
}
.ger-filtros select, .ger-filtros input {
  font: inherit; font-size: var(--t-apoio, 13px); text-transform: none;
  letter-spacing: 0; padding: 5px 8px; border: 1px solid var(--linha);
  border-radius: var(--raio-ctrl, 5px); background: var(--surf); color: var(--ink);
  max-width: 190px;
}
.ger-limpar { font-size: var(--t-apoio, 12.5px); color: var(--fraco-papel);
              text-decoration: underline; padding-bottom: 7px; }
.ger-limpar:hover { color: var(--vinho-texto); }

/* --- as faixas e a grade de cartoes ----------------------------------
   🔴 DENSIDADE E O ASSUNTO DESTE BLOCO (reescrito em 20/08). A 1a versao
   media ~2.900px de altura e nao cabia numa tela — que e a definicao de
   painel que ela deveria cumprir. O cartao caiu de ~230px para ~128px
   tirando o que nao era dado: o paragrafo de dica (foi para o `title`), o
   cabecalho de duas linhas (virou uma) e 28px de altura de grafico. */
.ger-faixa { margin: 0 0 24px; }
.ger-faixa h2 {
  font-size: var(--t-apoio, 13px); color: var(--grafite); margin: 0 0 6px;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.ger-porseg { font-weight: 400; text-transform: none; letter-spacing: 0; }
/* O sinal substitui QUATRO paragrafos identicos. Texto no `title`. */
.ger-sinal {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: var(--t-micro, 11px); color: var(--fraco-papel);
  border-bottom: 1px dotted var(--linha); cursor: help;
}
.ger-sinal::before { content: "⚠ "; }

.ger-grade {
  display: grid; gap: 12px;
  /* 🔴 `auto-fill`, NAO `auto-fit` — e a diferenca e visivel e foi reportada.
     Com `auto-fit` as trilhas VAZIAS COLAPSAM e o que sobra estica para
     preencher a linha: ligando UM cartao so, ele virava 100 por cento da
     largura e saia numa escala diferente de todos os outros. `auto-fill`
     mantem as trilhas, entao um cartao ocupa UMA trilha e fica do mesmo
     tamanho que teria acompanhado. Comparar exige escala igual. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ger-cartao {
  border: 1px solid var(--linha); border-radius: var(--raio-cartao, 6px);
  padding: 8px 10px 4px; background: var(--surf); min-width: 0;
}
/* UMA linha de cabecalho: rotulo a esquerda, valor corrente a direita.
   Antes eram duas (h3 + span em bloco proprio) mais um paragrafo. */
.ger-cartao h3 {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin: 0 0 1px;
  font-size: var(--t-micro, 10px); letter-spacing: .04em;
  text-transform: uppercase; color: var(--grafite); font-weight: 600;
}
.ger-cartao h3 b {
  /* NIVEL 2 — o mesmo do Geral do executivo. O numero E o que se le; o
     grafico e o contexto. Duas telas, uma escala. */
  font-size: var(--t-kpi, 24px); font-weight: 600; color: var(--ink);
  letter-spacing: -.01em; text-transform: none;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.ger-vazio {
  border: 1px dashed var(--linha); border-radius: var(--raio-cartao, 6px);
  padding: 22px; text-align: center; color: var(--grafite);
  font-size: var(--t-apoio, 13px);
}
.ger-vazio strong { color: var(--ink); }

/* --- o metodo, RECOLHIDO ---------------------------------------------
   Recolher e diferente de apagar: a governanca sai da tinta da reuniao
   sem sair do projeto. */
.ger-metodo { margin: 18px 0 8px; border-top: 1px solid var(--linha);
              padding-top: 10px; }
.ger-metodo summary {
  cursor: pointer; font-size: var(--t-apoio, 12.5px); color: var(--grafite);
  list-style: none;
}
.ger-metodo summary::-webkit-details-marker { display: none }
.ger-metodo summary::before { content: "▸ "; }
.ger-metodo[open] summary::before { content: "▾ "; }
.ger-metodo summary:hover { color: var(--ink); }
.ger-metodo > div {
  margin-top: 10px; font-size: var(--t-micro, 11.5px); line-height: 1.65;
  color: var(--grafite); max-width: 92ch;
}
.ger-metodo p { margin: 0 0 8px; }
.ger-metodo strong { color: var(--ink); }
.ger-metodo code { font-size: var(--t-micro, 11px); }

/* --- A COR DA SERIE (20/08) ------------------------------------------
   🔴 TOKEN PROPRIO, e nao troca do `--viz-1`. Aquele pinta os graficos do
   /pcp; mexer nele repintaria outra tela sem ninguem pedir. Token novo por
   ACRESCIMO e o que a DEC-2026-079 manda.

   ⚠️ O VINHO ENTRA CONTRA A LETRA DA DEC-2026-089, por revisao consciente do
   dono (20/08) e com a medicao ao lado. Aquela decisao disse "o vinho da
   marca NAO entra como serie" citando ~2,4:1 — e o numero era do vinho sobre
   o RAIL ESCURO (medido: 1,95:1) e de LINHA FINA. Aqui e BARRA, forma cheia,
   sobre a superficie do cartao:

       vinho #9D0D16 sobre --surf claro  #FFFFFF ...... 8,39:1
       vinho #9D0D16 sobre --surf escuro #16181B ...... 2,12:1  REPROVA
       clareado      #E0555F sobre o escuro ........... 4,77:1  ok

   Por isso o tema escuro NAO leva o vinho puro: reprovaria no criterio 3:1
   da WCAG 1.4.11 para objeto grafico que carrega significado. Leva o mesmo
   MATIZ clareado — a marca continua marca, o dado continua legivel. */
:root { --ger-serie: #9D0D16; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --ger-serie: #E0555F; }
}
[data-tema="escuro"] { --ger-serie: #E0555F; }

/* --- o SVG da escada -------------------------------------------------
   🔴 ESTE BLOCO JA EXISTIU E EU O APAGUEI SEM PERCEBER, ao reescrever a
   secao de densidade em 20/08. O dono reiniciou o servico e viu a tela
   assim: eixo invisivel (line sem stroke nao desenha), rotulos a 16px
   dentro de um grafico de 104px, e o mes em curso como BARRA PRETA (rect
   sem fill cai no preto do navegador). Ele disse "nao ficou legal", e
   estava certo — so que a queixa era do CSS, nao do modelo.

   ⚠️ AS MARCAS DO /pcp MORAM SOB `.viz`; a escada vive no cartao. Redeclarar
   o SELETOR e correto; redeclarar a COR nao seria — por isso os valores
   saem dos mesmos tokens.

   ⚠️ Ha um teste guardando isto agora (ops/testes_tela/teste_cor.py): se uma
   destas classes ficar sem regra, ele reprova. Comentario nao e mecanismo. */
.ger-cartao svg.escada { display: block; width: 100%; height: auto; overflow: visible; }
.ger-cartao .eixo { stroke: var(--viz-eixo); stroke-width: 1; }
.ger-cartao .rot  { fill: var(--grafite); font-size: var(--t-apoio, 11.5px); }
.ger-cartao .val  { fill: var(--ink); font-size: var(--t-dado, 13px); font-weight: 600;
                    font-variant-numeric: tabular-nums; }
.ger-cartao .val-fraco { fill: var(--fraco); font-size: var(--t-dado, 13px); }
.ger-cartao .barra { rx: 2; fill: var(--ger-serie); }
/* O MES EM CURSO: so contorno tracejado. Mesma gramatica da projecao do
   PCP — mesma grandeza, outro estado. ⚠️ `fill:none` e OBRIGATORIO: sem
   ele o navegador preenche de PRETO. */
.ger-cartao .barra.vazada {
  fill: none; stroke: var(--ger-serie); stroke-width: 1.5;
  stroke-dasharray: 3 2.5; opacity: .9;
}
.ger-cartao .haste { stroke: var(--viz-eixo); stroke-width: 1.5; }
/* o rotulo do zero no cartao de desvio: recessivo, ele e regua e nao dado */
.ger-cartao .rot.base { fill: var(--fraco-papel); font-size: var(--t-micro, 10px); }
.ger-cartao .ponto { fill: var(--ger-serie); }
.ger-cartao .ponto.parcial { fill: var(--surf); stroke: var(--ger-serie);
                             stroke-width: 2; stroke-dasharray: 2 1.6; }

/* --- o seletor e a legenda do vazado --------------------------------- */
.ger-menu { align-self: flex-end; }
.ger-menu .colunas-lista { max-height: 60vh; overflow-y: auto; }
.col-grupo {
  margin: 8px 0 2px; font-size: var(--t-micro, 10px); letter-spacing: .06em;
  text-transform: uppercase; color: var(--fraco-papel);
}
.col-grupo:first-child { margin-top: 0 }
.col-grupo span { text-transform: none; letter-spacing: 0; opacity: .8 }
.ger-preset {
  display: block; padding: 3px 4px; font-size: var(--t-apoio, 12.5px);
  color: var(--grafite); text-decoration: none; border-radius: 4px;
}
.ger-preset:hover { background: var(--surf-2); color: var(--ink); }
.ger-legenda {
  display: inline-flex; align-items: center; gap: 6px; padding-bottom: 7px;
  font-size: var(--t-micro, 11px); color: var(--grafite);
}
.ger-legenda i.vazado {
  width: 14px; height: 10px; border: 1.5px dashed var(--ger-serie);
  border-radius: 2px; display: inline-block;
}



/* =====================================================================
   PAINEL EXECUTIVO (20/08) — um mes so, os segmentos DENTRO do indicador.

   🔴 REESCRITO no mesmo dia, e a razao vale registro: a 1a versao NAO
   PARECIA IRMA do painel gerencial. Barra deitada aqui contra barra em pe
   la; tres paddings de cartao diferentes na mesma tela; numero de 30px ao
   lado de numero de 15px sem hierarquia que explicasse a diferenca. Duas
   gramaticas para a mesma grandeza, no mesmo sistema, obrigam o leitor a
   reaprender a ler a cada aba — e foi isso que o dono viu quando disse
   "nao esta muito legal".

   A regra que passou a valer: o executivo HERDA do gerencial tudo que os
   dois compartilham (`--ger-serie`, `.abas`, `.ger-filtros`, `.ger-metodo`,
   o tratamento de titulo do cartao) e so declara o que e proprio dele — o
   cabecalho do mes e a faixa de numeros.
   ===================================================================== */
.exe-cabeca { margin: 0 0 20px; display: flex; align-items: baseline;
              gap: 12px; flex-wrap: wrap; }
.exe-cabeca h1 {
  font-size: var(--t-kpi, 24px); font-weight: 600; color: var(--ink); margin: 0;
  letter-spacing: -.01em;
}
.exe-cabeca p { margin: 0; font-size: var(--t-apoio, 11.5px); color: var(--grafite); }
.exe-cabeca strong { color: var(--ink); font-weight: 600; }

/* --- a faixa de numeros ----------------------------------------------
   `auto-fill`, nao `auto-fit`: com poucos itens, `auto-fit` estica o que
   sobra e quebra a escala entre os cartoes. Mesmo defeito reportado no
   painel gerencial em 20/08. */
.exe-numeros {
  display: grid; gap: 12px; margin: 0 0 24px;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
}
.exe-num, .exe-bloco {
  border: 1px solid var(--linha); border-radius: var(--raio-cartao, 6px);
  background: var(--surf); min-width: 0;
}
/* MESMO padding do `.ger-cartao`, de proposito: as duas telas usam o mesmo
   cartao, entao ele mede o mesmo nas duas. */
.exe-num   { padding: 10px 12px 11px; display: flex; flex-direction: column; gap: 1px; }
.exe-bloco { padding: 8px 10px 4px; }

/* O rotulo usa a MESMA regra do `.ger-cartao h3`: micro, caixa alta,
   espacado — e o valor grande ao lado. Um so tratamento de titulo. */
.exe-rot {
  font-size: var(--t-micro, 10px); letter-spacing: .04em;
  text-transform: uppercase; color: var(--grafite); font-weight: 600;
}
.exe-val {
  /* NIVEL 1 — e o unico elemento deste tamanho na tela. */
  font-size: var(--t-num, 32px); font-weight: 600; line-height: 1.06;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.015em;
}
/* 🔴 O DELTA NAO RECEBE COR. Verde/vermelho seria julgamento, e tres destes
   indicadores nao tem regua ratificada (DEC-2026-073/089). O sinal ja diz a
   direcao; quem diz se e bom e quem le, com a regua dele. */
.exe-delta {
  font-size: var(--t-micro, 10px); color: var(--grafite);
  font-variant-numeric: tabular-nums;
}
.exe-delta.calado { font-style: italic; color: var(--fraco-papel); }

/* --- os blocos por indicador ------------------------------------------ */
.exe-blocos {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
}
.exe-bloco header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 1px;
}
.exe-bloco h2 {
  font-size: var(--t-micro, 10px); letter-spacing: .04em; text-transform: uppercase;
  color: var(--grafite); font-weight: 600; margin: 0;
}
.exe-geral { font-size: var(--t-micro, 10px); color: var(--grafite);
             display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.exe-geral b { font-size: var(--t-kpi, 24px); color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- as barras por segmento, EM PE (pedido do dono, 20/08) -------------
   ⚠️ Os seletores repetem os do `.ger-cartao` porque o SVG vive noutro
   cartao — repetir o SELETOR e correto; repetir a COR nao seria, e por isso
   os valores saem dos mesmos tokens. O `teste_cor.py` guarda os dois. */
.exe-bloco svg.segbar { display: block; width: 100%; height: auto; overflow: visible; }
.exe-bloco .eixo { stroke: var(--viz-eixo); stroke-width: 1; }
.exe-bloco .rot  { fill: var(--grafite); font-size: var(--t-apoio, 11.5px); font-weight: 600; }
.exe-bloco .val  { fill: var(--ink); font-size: var(--t-dado, 13px); font-weight: 600;
                   font-variant-numeric: tabular-nums; }
.exe-bloco .val-fraco { fill: var(--fraco); font-size: var(--t-dado, 13px); }
.exe-bloco .barra { rx: 2; fill: var(--ger-serie); }


/* == M-PLANEJAMENTO (03/09/2026) ======================================
   Aditivo por regra (DEC-2026-079): nenhum token existente muda. "Fora da
   regua" usa o canal da casa (DEC-2026-083): sublinhado PONTILHADO + marca
   textual — nunca preenchimento, que o teste_cor reprova em td. */
.plano-topo{margin:0 0 14px}
.plano-h1{font-size:1.35rem;margin:0 0 4px}
.plano-sub{color:var(--grafite);max-width:72ch;margin:0}
.plano-sub code{font-size:.85em}
.plano-filtros{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin:0 0 12px}
.plano-filtros label{display:flex;flex-direction:column;gap:3px;font-size:.85rem}
.plano-limpar{align-self:center;font-size:.85rem}
.plano-aviso{border:1px solid var(--linha);border-left:4px solid var(--st-atencao-ic);
  padding:8px 12px;margin:0 0 12px;border-radius:3px}
.plano-aviso p{margin:2px 0}
/* 🔴 A CAIXA QUE FALTAVA. Eram 28 linhas x 24 colunas com rolagem solta:
   descia tres linhas e o cabecalho sumia, andava para o lado e o DIA sumia.
   Sem os dois ancorados, a grade vira numero sem sujeito e sem predicado —
   e foi isso, mais que a estetica, que fez a tela ser "ruim de trabalhar".
   `border-collapse` PRECISA virar `separate`: com `collapse` o sticky nao
   segura as bordas no Chrome (a borda pertence a tabela, nao a celula). */
.plano-scroll{overflow:auto;max-height:min(70vh,700px);
  border:1px solid var(--linha);border-radius:var(--raio-cartao);
  background:var(--surf)}
.plano-tab{border-collapse:separate;border-spacing:0;
  font-variant-numeric:tabular-nums;min-width:900px}
.plano-tab thead th{position:sticky;top:0;z-index:2;background:var(--surf);
  border-bottom:1px solid var(--linha)}
.plano-tab thead tr:nth-child(2) th{top:30px}
.plano-tab td:first-child,.plano-tab thead th:first-child{position:sticky;
  left:0;z-index:1;background:var(--surf);
  border-right:1px solid var(--linha-bloco)}
.plano-tab thead th:first-child{z-index:3}
.plano-tab tbody tr:hover td{background:var(--linha-hover)}
/* A FRONTEIRA DO SEGMENTO PRECISA DESCER PARA O CORPO. Ela existia so no
   cabecalho: as 24 colunas do corpo eram uma parede sem costura, e achar
   onde o INST acaba e o REP comeca exigia contar coluna. */
.plano-tab td.plano-ini-seg,.plano-tab th.plano-ini-seg{
  border-left:2px solid var(--linha-bloco)}
.plano-tab th,.plano-tab td{padding:4px 8px;border-bottom:1px solid var(--linha-fina);
  text-align:right;white-space:nowrap}
.plano-tab th:first-child,.plano-tab td:first-child{text-align:left}
.plano-seg{border-left:2px solid var(--linha);text-align:center}
.plano-regua{display:block;font-weight:400;font-size:.72rem;color:var(--fraco-branco)}
.plano-dia{font-weight:600}
.plano-dow{font-weight:400;color:var(--fraco-branco);font-size:.8em}
.plano-feriado td{font-weight:600} /* peso, nao tinta — cor nao julga dia */
.plano-passado td{color:var(--fraco-branco)}
/* A DEC-2026-083 fixou traco PONTILHADO vermelho de 3px para `ruim`.
   Estava 2px e sem cor declarada — herdava a tinta do texto, entao em dia
   passado (que e cinza) o "fora da regua" ficava cinza tambem. */
.plano-fora{text-decoration:underline dotted 3px var(--st-ruim);
  text-underline-offset:3px}
.plano-marca{color:var(--st-ruim)}
.plano-marca{font-size:.75em}
/* 🔴 5,5ch CORTAVA O NUMERO, e foi o defeito nº1 da tela (dono, 03/09:
   "muito ruim de trabalhar"). O placeholder tem 3 a 4 digitos e o
   input[type=number] ainda gasta ~1,5ch com as setinhas: sobrava espaco para
   dois. `283` aparecia como `28:`. Largura nova cabe 4 digitos COM folga.

   AS SETINHAS SAEM, e nao e so espaco: com elas, a roda do mouse sobre um
   campo focado ALTERA o valor. Numa tabela de 28 linhas que se rola o tempo
   todo, isso e um cenario mudado sem ninguem ter digitado nada. */
.plano-input{width:7ch;text-align:right;font:inherit;padding:2px 4px;
  border:1px solid var(--ctrl-linha);border-radius:var(--raio-ctrl);
  background:var(--surf);color:var(--ink);appearance:textfield;
  -moz-appearance:textfield}
.plano-input::-webkit-outer-spin-button,
.plano-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.plano-input:focus{outline:2px solid var(--vinho-vivo);outline-offset:1px}
.plano-sim-col{border-left:1px dashed var(--linha-bloco)}
.plano-acoes{display:flex;gap:14px;align-items:center;margin:10px 0;flex-wrap:wrap}
.plano-nota{font-size:.8rem;color:var(--fraco-branco);max-width:70ch}
.plano-proposta{border:1px solid var(--linha);border-left:4px solid var(--ink);
  border-radius:3px;padding:12px 16px;margin:0 0 14px}
.plano-prop-h{font-size:1rem;margin:0 0 8px}
.plano-proposta ul{margin:0;padding-left:18px}
.plano-proposta li{margin:4px 0;font-size:.9rem}

/* =====================================================================
   M-BACKLOG (03/09/2026) — o estoque do ELOS Online, a fila e o dia.

   ADITIVO, como manda a DEC-2026-079: nenhum token do :root é tocado, e
   toda cor sai de token EXISTENTE. Isto não é formalidade — o bloco
   .plano-* escrito em 03/09 de madrugada pede `--fio`, `--tinta-2` e
   `--tinta-3`, que NÃO EXISTEM: são 10 `var()` órfãos caindo em hex fixo,
   exatamente o modo de falha que a 079 descreve ("não dá erro, desbota").
   Consequência real: aquela tabela não acompanha o tema.
   ===================================================================== */
.bl-topo{margin:0 0 10px}
.bl-h1{font-size:1.35rem;margin:0 0 6px}

/* A FOTO NA CARA, não no rodapé: esta página mostra estoque de um INSTANTE. */
.bl-foto{margin:0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bl-chip{display:inline-flex;gap:6px;align-items:baseline;
  background:var(--surf-2);border:1px solid var(--linha);
  border-radius:var(--raio-ctrl);padding:3px 9px;font-size:.82rem}
.bl-corrente{color:var(--fraco-branco);font-size:.92em}

/* ABAS = links GET. Cada vista é um endereço próprio, copiável e recarregável;
   funciona sem JavaScript, como todo controle desta casa. */
.bl-abas{display:flex;gap:2px;margin:14px 0 10px;border-bottom:1px solid var(--linha)}
.bl-aba{padding:7px 14px;text-decoration:none;color:var(--grafite);
  border:1px solid transparent;border-bottom:none;font-size:.9rem;
  border-radius:var(--raio-ctrl) var(--raio-ctrl) 0 0}
.bl-aba:hover{background:var(--linha-hover)}
.bl-aba.ativa{background:var(--surf);border-color:var(--linha);
  color:var(--ink);font-weight:600;margin-bottom:-1px;padding-bottom:8px}

.bl-nota{color:var(--grafite);font-size:.85rem;max-width:80ch;margin:8px 0}
.bl-aviso{border:1px solid var(--linha);border-left:4px solid var(--st-atencao-ic);
  background:var(--aviso-fundo);padding:8px 12px;margin:10px 0;
  border-radius:var(--raio-ctrl)}
.bl-aviso p{margin:2px 0;font-size:.88rem}
.bl-aviso-info{border-left-color:var(--viz-1);background:var(--surf-2)}

/* A TABELA. `overflow:auto` no contêiner e não no body: a página nunca rola
   na horizontal — quem rola é a tabela, dentro da própria caixa. */
.bl-rolagem{overflow:auto;max-height:min(64vh,620px);border:1px solid var(--linha);
  border-radius:var(--raio-cartao);background:var(--surf)}
.bl-tab{border-collapse:separate;border-spacing:0;width:100%;
  font-variant-numeric:tabular-nums;font-size:.88rem}
.bl-tab th,.bl-tab td{padding:5px 10px;border-bottom:1px solid var(--linha-fina);
  text-align:right;white-space:nowrap}
.bl-tab th:first-child,.bl-tab td:first-child{text-align:left}

/* CABEÇALHO GRUDADO: 28 filiais rolam e o cabeçalho tem que ficar. Sem isto o
   leitor perde de que coluna é o número na terceira rolagem — defeito medido
   na tela do /planejamento em 03/09. */
.bl-tab thead th{position:sticky;top:0;z-index:2;background:var(--surf);
  border-bottom:1px solid var(--linha);font-weight:600}
.bl-tab thead tr:nth-child(2) th{top:26px}
/* A COLUNA DA FILIAL TAMBÉM GRUDA: rolando na horizontal, perder o nome da
   praça transforma a tabela numa grade de números sem sujeito. */
.bl-tab td:first-child,.bl-tab thead th:first-child{position:sticky;left:0;
  z-index:1;background:var(--surf)}
.bl-tab thead th:first-child{z-index:3}
.bl-tab tbody tr:hover td{background:var(--linha-hover)}
.bl-tab tfoot th,.bl-tab tfoot td{position:sticky;bottom:0;background:var(--surf-2);
  font-weight:600;border-top:1px solid var(--linha);z-index:2}

/* FRONTEIRA DE BLOCO: separa a família "Posto" da família "Segmento". Sem ela
   as 9 colunas viram uma parede — é a mesma razão do --linha-bloco existir. */
.bl-bloco{border-left:2px solid var(--linha-bloco)}
.bl-tab td.bl-total{border-left:2px solid var(--linha-bloco);font-weight:600}
.bl-filial{font-weight:600}
.bl-cluster{display:block;font-weight:400;font-size:.78em;color:var(--fraco-branco)}
.bl-fraco{color:var(--fraco-branco)}
.bl-regua{display:block;font-weight:400;font-size:.74rem;color:var(--fraco-branco)}

/* FORA DA RÉGUA: traço PONTILHADO vermelho de 3px, exatamente como a
   DEC-2026-083 fixou. Preenchimento NÃO volta — com 32 colunas visíveis a
   grade virava campo de blocos e o número afogava. O ▲ é o segundo canal,
   porque estado não pode depender só de matiz (WCAG 1.4.1). */
.bl-fora{text-decoration:underline dotted 3px var(--st-ruim);text-underline-offset:3px}
.bl-marca{color:var(--st-ruim);font-size:.85em}

/* MÚLTIPLOS PEQUENOS da curva do dia. Grade que quebra sozinha: quatro painéis
   numa tela larga, dois numa estreita, um no celular. */
.bl-minis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  padding:12px}
.bl-mini{margin:0;border:1px solid var(--linha);border-radius:var(--raio-ctrl);
  padding:6px 8px 2px;background:var(--surf)}
.bl-mini svg{display:block;width:100%;height:auto}
.bl-mini-cap{font-size:.84rem;padding:2px 2px 6px;color:var(--grafite)}
.bl-eixo{font-size:9px;fill:var(--viz-eixo)}
.bl-tab-curva{margin-top:12px;width:auto;min-width:min(100%,520px)}

/* A ALAVANCA HORIZONTAL do /planejamento (03/09). Fica ACIMA da tabela e
   separada por uma linha: ela age sobre a tabela inteira, e um controle de
   escopo amplo colado num de escopo pontual confunde qual manda. */
.plano-horizontal{display:flex;gap:12px;align-items:end;flex-wrap:wrap;
  margin:0 0 10px;padding:10px 12px;background:var(--surf-2);
  border:1px solid var(--linha);border-radius:var(--raio-ctrl)}
.plano-horizontal label{display:flex;flex-direction:column;gap:3px;font-size:.85rem}
.plano-hz-rot{font-size:.85rem;font-weight:600;align-self:center;color:var(--grafite)}