/* ──────────────────────────────────────────────────────────────────────
   css/01-tokens.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   AS VARIAVEIS
   Toda cor, medida, sombra e fonte do painel nasce aqui, e so aqui. Nenhum
   outro arquivo escreve um valor de cor direto: eles leem var(--alguma-coisa).
   E o que permite trocar o tema inteiro mudando um bloco, e o que permite ao
   JS pintar grafico com a mesma cor do CSS (ver js/nucleo/cores.js).

   Sao dois blocos: :root com o tema claro e :root[data-tema-eficaz="escuro"]
   com o escuro. O escuro NAO e inversao automatica - cada valor foi escolhido
   contra a superficie em que ele aparece de verdade.
   ===================================================================== */

/* ==============================================================
   COR DA PAGINA - o unico ajuste por setor
   Cada quadro do Runrun.it vai virar uma pagina, e o que diferencia uma
   da outra e a linha `--pag-rgb`. O valor vai em CANAIS, nao em
   hexadecimal, porque a mesma cor e usada com transparencia no halo do
   fundo: rgb(var(--pag-rgb) / var(--halo-pag)).
     TI 0 84 144 · Compras 21 106 76 · MKT 199 88 32 ·
     Limpeza e Manutencao 157 88 148
   As quatro foram MEDIDAS juntas, nos dois temas, no validador do skill
   dataviz: pior par ΔE 14,5 na visao normal e 6,9 em daltonismo, com
   contraste de 4,3:1 (claro) e 5,7:1 (escuro) contra o card.
   Limpeza e Manutencao era roxo (106 79 168) e virou magenta: roxo e
   vizinho do azul do TI em visao normal E colapsa junto com ele em
   protanopia (ΔE 2,2). Com magenta, a quarta cor deixa de ser o gargalo.
   Quatro matizes mutuamente distinguiveis em daltonismo NAO existem — os
   6,9 ficam na faixa que o validador chama de piso, legal apenas com
   codificacao secundaria. Ela existe e nao e opcional aqui: o filete fica
   SEMPRE colado ao nome do setor, no cartao e no cabecalho. A cor ajuda a
   reconhecer a pagina; quem informa qual e ela e o nome.
   O que NAO muda de pagina para pagina: as cores dos DADOS (--c1, o
   cinza de contexto, os status). Quem abre duas paginas lado a lado tem
   de ler as barras do mesmo jeito nas duas.
   ============================================================== */
:root{
  color-scheme:light;
  --pag-rgb:0 84 144;
  --ouro-rgb:184 145 47;
  --halo-pag:.26;
  --halo-ouro:.26;
  /* As duas manchas de baixo, mais fracas: elas existem para o fundo nao ser
     chapado no meio da pagina, nao para serem vistas. */
  --halo-baixo:.14;
  /* A camada de desenho do fundo: os aneis largos e a malha de pontos. */
  --anel-op:.16;
  --pontos:rgba(21,24,27,.055);

  /* Rampa do fundo, de cima para baixo. NEUTRA de proposito.
     Ela era azul (#EFF4FD -> #DFE8F8), e com isso a pagina de Compras
     continuava com fundo azulado apesar do halo verde: o azul assado na
     rampa vencia a cor do setor, e o usuario relatou nao sentir diferenca
     entre as paginas no modo claro. Com a rampa em cinza, a UNICA cor do
     fundo e a do setor — o TI segue azul porque a cor dele e azul, nao
     porque a rampa e. */
  --grad-1:#F5F4F0;
  --grad-2:#F5F4F0;
  --grad-3:#F5F4F0;

  /* ---- Identidade Anglo Morumbi (manual de marca) ---- */
  --azul:#005490;          /* cor principal - SO como preenchimento solido */
  --azul-claro:#32A2DB;    /* cor para detalhes e anel de foco */
  --cinza:#7C7974;         /* cor rodape */

  /* ---- Ouro do selo Leader In Me / Legacy School ----
     Amostrado do proprio logo (#D4AE64, #E2CD7B, #988036). Vive so na
     moldura da pagina - filete do cabecalho, divisor das marcas, topo da
     folha, regua do rodape. NUNCA entra em grafico: cor de dado aqui tem
     significado, e ouro nao significa nada nos dados. */
  --ouro:#B8912F;
  --ouro-claro:#E2CD7B;
  --ouro-escuro:#7C6320;
  --ouro-tint:#FBF7EC;
  --ouro-borda:#F0E4C4;

  /* ---- Superficies ----
     Quatro papeis, nao quatro tons de cinza. No claro todos escurecem um
     pouco o branco; no ESCURO o poco escurece e as superficies de
     interacao CLAREIAM, que e como o olho le relevo no escuro. */
  --fundo:#F5F4F0;
  --card:#FFFFFF;
  /* Controle EM REPOUSO e campo de digitar. No claro os dois sao brancos e
     quem os desenha e a borda; no ESCURO isso nao funciona — botao da cor
     do card em cima do card fica sem corpo, parece texto solto. Ali o
     controle CLAREIA (fica acima do card) e o campo ESCURECE (fica dentro
     dele), que e a leitura de relevo no escuro. */
  --controle:#FFFFFF;
  --campo:#FFFFFF;
  --sup-poco:#FAF9F6;      /* cabecalho de tabela, corpo e pe da folha */
  --sup-hover:#F7F6F2;     /* linha da tabela e opcao sob o cursor */
  --sup-fill:#F1EFEA;      /* preenchimento de botao secundario */
  --sup-fill-2:#E7E4DD;    /* o mesmo, sob o cursor */
  --borda:#E4E1DA;
  --borda-forte:#D2CEC5;
  --linha:#EFEDE8;         /* fio de dentro das tabelas */

  /* ---- Tinta ---- */
  --tinta:#1D1C1A;
  --tinta-2:#4A4844;
  --tinta-3:#6B6862;
  --tinta-fraca:#DCE1E6;   /* desabilitado */

  /* ---- Azul em cada papel ----
     --azul  = fundo solido, com texto branco em cima (nao muda no escuro:
               branco sobre #005490 da 5,6:1 nos dois modos).
     --azul-tinta = azul como TEXTO/ICONE/BORDA sobre a superficie. Esse
               sim muda: #005490 sobre card escuro daria 1,6:1. */
  --azul-hover:#00457A;
  --azul-tinta:#005490;
  --azul-tint:#F2F8FC;
  --azul-tint-2:#E6F1FA;
  --azul-borda:#CBE3F2;
  --azul-borda-2:#8FC4E4;

  /* ---- Slots categoricos (validados: banda de luminosidade,
         piso de croma, separacao CVD e piso de visao normal) ---- */
  --c1:#005490;
  --c2:#EB6834;
  --c3:#1BAF7A;
  --c4:#32A2DB;
  --c5:#EDA100;
  --c6:#4A3AA7;

  /* ---- Cinza de contexto (Storytelling com Dados) ----
     O padrao e cinza; a cor de marca fica reservada para o dado que
     carrega a mensagem. ---- */
  --neutro:#827E77;
  --neutro-claro:#CFD6DC;
  --grade:#EEF1F4;         /* linha de grade do grafico */

  /* ---- Status (significado reservado, sempre com rotulo) ---- */
  --ok:#0F7A54;
  --ok-tint:#E6F4EE;
  --ok-tint-1:#F5FBF8;
  --ok-borda:#BFE3D2;
  --ok-tinta:#0B5F42;
  --alerta:#8A6100;
  --alerta-tint:#FBF2DE;
  --alerta-borda:#EBD9A8;
  --alerta-tinta:#5C4A16;
  --alerta-tinta-forte:#3D3009;
  --critico:#C13B32;
  --critico-tint:#FBEAE8;
  --critico-tint-2:#F6D7D3;
  --critico-borda:#F0C9C4;
  --critico-tinta:#9E2B23;

  /* ---- Veus e sombras ---- */
  --veu:rgba(8,20,34,.45);
  --veu-forte:rgba(8,20,34,.52);
  --tooltip-bg:rgba(10,27,45,.95);
  /* DUAS CAMADAS EM CADA SOMBRA, e nao uma. Uma sombra so, com desfoque
     grande, vira uma mancha cinza em volta do cartao; o que o olho le como
     "levantado" e o par — um contato curto e escuro logo abaixo da borda,
     mais uma difusa e larga. Quanto mais alto o objeto, mais as duas se
     afastam, que e o que faz o cartao subir de verdade no hover. */
  /* UMA ESCALA DE ALTURA SÓ (decisão 59), a do Material 3: o cartão parado
     (sombra), o que sobe sob o cursor (media), o menu que abre por cima
     (alta), a folha e o diálogo (modal, folha). Antes eram três famílias
     de sombra misturadas, cada componente com a sua. */
  --sombra:0 1px 2px rgba(29,28,26,.06);
  --sombra-baixa:0 1px 3px rgba(16,36,62,.08);
  --sombra-media:0 2px 6px rgba(29,28,26,.07), 0 10px 24px rgba(29,28,26,.1);
  --sombra-alta:0 4px 10px rgba(29,28,26,.08), 0 18px 40px rgba(29,28,26,.14);
  --sombra-modal:0 18px 50px rgba(10,24,42,.3);
  --sombra-folha:0 24px 70px rgba(10,24,42,.34);
  /* O MOVIMENTO, em três durações e uma curva (as do Material 3): curta
     para o que responde ao dedo, média para o que troca, longa para o que
     entra. Abaixo de 400ms, o limite de Doherty: a tela nunca espera a
     animação. */
  --dur-1:120ms;
  --dur-2:200ms;
  --dur-3:320ms;
  --curva:cubic-bezier(.2,0,0,1);
  /* O MÊS EM CURSO: a borda picotada (3,4:1 contra o fundo dele) e um fundo
     um tom abaixo do cartão — ainda não é um cartão fechado. */
  /* BOM, ATENÇÃO, RUIM (decisão 61): a cor dos números que pedem leitura de
     estado. Medidos como texto: 5,3, 5,4 e 5,3:1 contra o branco. */
  --bom:#0F7A54;
  --atencao:#9A5C00;
  --ruim:#C0362C;
  --borda-curso:#7D8995;
  --card-aberto:#FAF9F6;
  /* A IDADE DA FILA em cinco tons de uma cor só (decisão 60): até 7 dias, 8 a
     30, 31 a 90, 91 a 365, mais de um ano. No claro escurece com a idade; no
     escuro clareia — o mais velho é sempre o que mais salta. */
  --idade-0:#E5C276;
  --idade-1:#D9A441;
  --idade-2:#C98B1A;
  --idade-3:#9A6409;
  --idade-4:#6B4200;
  /* O RELEVO (decisão 55). Profundidade é a soma de três coisas, e a sombra
     sozinha é só uma: a LUZ NA BORDA DE CIMA (o brilho), um LEVE DEGRADÊ na
     superfície — mais clara em cima, como quem recebe luz — e a SOMBRA em
     duas camadas embaixo. No claro a sombra faz quase tudo; no escuro, onde
     sombra preta sobre fundo escuro some, é o brilho e o degradê que fazem.
       elev-1   cartão parado
       elev-2   cartão sob o cursor, o que sobe
       controle botão: degradê e brilho próprios; apertado, afunda */
  /* SOMBRA EM TRÊS CAMADAS, E AZULADA (decisão 57). Uma sombra só, cinza,
     lia como borda borrada; três — o contato, a curta e a longa — leem como
     peso. O tom vem do azul-marinho, e não do preto: sombra preta sobre o
     fundo frio da página sujava, a azulada assenta. */
  --brilho:0 0 #0000;
  --superficie:none;
  --elev-1:0 1px 2px rgba(29,28,26,.06);
  --elev-2:0 2px 4px rgba(29,28,26,.06), 0 10px 24px rgba(29,28,26,.08);
  --elev-botao:0 1px 2px rgba(16,36,62,.18), 0 1px 3px 1px rgba(16,36,62,.1);
  --elev-botao-alta:0 1px 2px rgba(16,36,62,.2), 0 2px 6px 2px rgba(16,36,62,.12);

  /* ---- O SISTEMA (decisão 58) ----
     As variáveis de um sistema de componentes, como as do Figma: quem desenha
     um cartão, um botão ou uma etiqueta usa estes nomes, e não um valor solto.

     FORMA, na escala do Material 3: 6 a etiqueta, 8 o chip, 12 o cartão,
     16 a faixa de destaque. Botão é pílula. */
  --raio-xs:6px;
  --raio-s:8px;
  --raio-l:12px;
  /* TIPO: seis tamanhos, e só seis. */
  --t-display:40px;    /* o ano */
  --t-numero:28px;     /* número grande */
  --t-numero-m:22px;   /* número de cartão pequeno */
  --t-titulo:14px;     /* nome de cartão */
  --t-corpo:13px;
  --t-rotulo:12px;     /* rótulo, legenda, pé */
  /* FOCO (WCAG 2.4.7 e 1.4.11): o anel tem de ter 3:1 contra o que está em
     volta. O azul-claro da marca dava 2,8:1 no branco — reprovava. O azul da
     marca dá 7,9:1. */
  --foco:#005490;
  /* A FAIXA DE DESTAQUE: o azul do Anglo, com o ouro do selo no nome do setor.
     Contraste medido: branco 7,9:1, o azul-claro de rótulo 6,0:1, o ouro
     5,0:1 — os três acima de 4,5:1. */
  --destaque:#005490;
  --destaque-tinta:#FFFFFF;
  --destaque-tinta-2:#D3E3F1;
  --destaque-ouro:#E2CD7B;
  --destaque-controle:rgba(255,255,255,.14);
  --destaque-borda:rgba(255,255,255,.55);
  --destaque-hover:rgba(255,255,255,.1);
  --inverso-hover:#E3EDF6;
  /* CARTÃO CLICÁVEL: as camadas de estado do Material 3 (o cartão escurece
     um pouco sob o cursor, mais um pouco apertado). */
  --card-hover:#FBFAF8;
  --card-pressionado:#F3F1EC;
  /* AS BARRAS DOS MESES: o trilho (a escala do ano) e o cinza dos abertos,
     com 3,6:1 contra o branco e 3,2:1 contra o trilho. */
  --trilho:#EEEBE5;
  --barra-ab:#827E77;
  --relevo-controle:none;
  --sombra-controle:0 1px 1px rgba(29,28,26,.05);
  --sombra-controle-alta:0 1px 2px rgba(29,28,26,.07), 0 4px 10px rgba(29,28,26,.07);
  --afundado:inset 0 1px 3px rgba(16,36,62,.14);

  /* ---- Esqueleto de carregamento ---- */
  --esq-1:#E9EEF3;
  --esq-2:#DCE4EC;
  --esq-3:#E4EAF1;

  /* ---- A porta (tela de entrada) ----
     A unica tela do painel com superficie de VIDRO, e ela so existe porque
     ali atras ha um desenho para deixar passar. Nas outras telas o fundo do
     cartao e chapado de proposito: numero se le melhor sobre superficie
     opaca, e vidro atras de tabela e ruido.

     `arte-*` sao as cores do painel desenhado no fundo. Tres papeis, a mesma
     gramatica do painel de verdade: `estrutura` e a moldura dos cartoes e a
     grade, `dado` e o que representa numero, `realce` e a UNICA peca colorida
     - cinza e o padrao, cor e a mensagem, igual la dentro. */
  --porta-vidro:rgba(255,255,255,.74);
  --porta-vidro-borda:rgba(255,255,255,.92);
  --porta-brilho:rgba(255,255,255,.9);
  --porta-campo:rgba(255,255,255,.8);
  --porta-campo-borda:rgba(21,24,27,.14);
  --porta-arte-estrutura:#5C7691;
  --porta-arte-dado:#2C6FA8;
  --porta-arte-realce:#B8912F;
  --porta-arte-opacidade:.2;
  --porta-veu:rgba(226,232,240,.52);

  /* ---- O cartao de setor ----
     `sc-cab` e `sc-cab-fim` sao as duas pontas do degrade horizontal da faixa
     (esquerda e direita) e `sc-fio` e a linha que a fecha. Mudam de tema
     porque tinta escura sobre fundo claro rende MENOS que tinta clara sobre
     fundo escuro: o mesmo numero daria faixa lavada aqui e gritante la.

     No CLARO a faixa e mais forte (.2) do que a intuicao sugere. Com .13 ela
     virava um pastel lavado - a cor sumia e sobrava sujeira -, e pastel e a
     coisa mais datada que um painel pode ter. Com .2 ela le como cor.

     O CORPO E DE VIDRO: `vidro` e a superficie translucida, `vidro-borda` o
     contorno. No claro o vidro e quase branco e precisa de contorno escuro
     para existir; no escuro e o oposto. */
  --sc-cab:.2;
  --sc-cab-fim:.09;
  --sc-fio:.4;
  --vidro:rgba(255,255,255,.62);
  --vidro-borda:rgba(21,24,27,.1);
  --vidro-brilho:rgba(255,255,255,.75);

  /* 14 e nao 12: com cartoes lado a lado e muita borda de 1px na tela, o
     canto um pouco mais aberto e o que separa "aplicacao interna" de
     "ferramenta acabada". Vale para cartao, cabecalho e KPI - os controles
     pequenos tem raio proprio, porque 14 num botao de 28px vira pilula. */
  --raio:10px;
  /* A FONTE DO SISTEMA (decisão 60): a Segoe UI Variable no Windows, a San
     Francisco no Mac e no iPhone, a Roboto no Android — a letra que cada
     aparelho desenha melhor, e nenhum arquivo para baixar. Os números grandes
     usam o corte "Display", feito para tamanho grande. Era a Trebuchet MS,
     que deixava a tela com cara de 2005. */
  --fonte:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --fonte-num:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}

/* ==============================================================
   MODO ESCURO
   Um bloco so, ligado por `data-tema-eficaz="escuro"` no <html> - o JS
   resolve 'auto' contra o sistema e escreve esse atributo, o que evita
   repetir 60 tokens dentro de um @media.
   Nada aqui e inversao automatica: cada valor foi escolhido contra a
   superficie em que ele vive de verdade. O que troca de papel:
     · o azul de TEXTO clareia (o de preenchimento solido fica)
     · as barras do grafico clareiam (#005490 no escuro e invisivel)
     · superficie de interacao clareia, poco escurece
     · o tooltip deixa de ser quase-preto e passa a ser cinza claro
   ============================================================== */
:root[data-tema-eficaz="escuro"]{
  color-scheme:dark;
  --halo-pag:.24;
  --halo-ouro:.13;
  --halo-baixo:.1;
  --anel-op:.13;
  --pontos:rgba(255,255,255,.045);
  /* O ESCURO É AZUL-MARINHO (decisão 58): as superfícies saem do matiz do
     azul do Anglo (205°), em tons, como as superfícies tonais do Material 3 —
     quanto mais alto o objeto, mais claro. Antes eram cinza-ardósia, que não
     é cor de ninguém. */
  --grad-1:#101114;
  --grad-2:#101114;
  --grad-3:#101114;

  --cinza:#9A9691;

  --ouro-tint:#2A2415;
  --ouro-borda:#4A3D1C;
  --ouro-escuro:#E8CE84;   /* ouro legivel como texto no escuro */

  --fundo:#101114;
  --card:#18191D;
  --controle:#212328;     /* acima do card: botao, filtro, paginador */
  --campo:#131417;        /* dentro do card: caixa de digitar */
  --sup-poco:#141518;
  --sup-hover:#1F2126;
  --sup-fill:#24262C;
  --sup-fill-2:#2D3037;
  --borda:#2A2C32;
  --borda-forte:#3A3D45;
  --linha:#222429;

  --tinta:#EDEDEF;
  --tinta-2:#BDBEC4;
  --tinta-3:#8E9099;
  --tinta-fraca:#4E5159;

  --azul-hover:#0A6BB0;
  --azul-tinta:#7CC5F2;
  --azul-tint:#132536;
  --azul-tint-2:#183049;
  --azul-borda:#23415F;
  --azul-borda-2:#2F5B85;

  /* --c1 e o destaque das barras, medido contra o card (7,9:1) e contra
     o cinza de contexto (2,5:1). --c2 e a SEGUNDA serie do grafico de
     fluxo (Criados x Finalizados): validado contra --c1 em ΔE 22,6 (CVD
     protan/deutan) e 27,8 (visao normal), com 4,9:1 contra o card, e
     escolhido dentro da banda de claridade do modo escuro para diferir do
     azul tambem em CLARIDADE, nao so em matiz.
     --c1 fica DE PROPOSITO acima dessa banda: no escuro ele precisa se
     separar do cinza de contexto, e isso pede um azul mais claro do que a
     banda pediria. c3..c6 seguem sendo RESERVA, espacados a olho. */
  --c1:#6FBEEE;
  --c2:#DC6E3A;
  --c3:#35C495;
  --c4:#A6D8F5;
  --c5:#EDB640;
  --c6:#9186EC;

  --neutro:#6B6F78;
  --neutro-claro:#45484F;
  --grade:#24262B;

  --ok:#3FBF8C;
  --ok-tint:#1E3F31;
  --ok-tint-1:#17332A;
  --ok-borda:#2A5F48;
  --ok-tinta:#7FE0B4;
  --alerta:#D8A72B;
  --alerta-tint:#31280F;
  --alerta-borda:#5C4A1C;
  --alerta-tinta:#F0CE73;
  --alerta-tinta-forte:#F7E1A6;
  --critico:#F2665A;
  --critico-tint:#341A17;
  --critico-tint-2:#452220;
  --critico-borda:#6E2E28;
  --critico-tinta:#FF9E93;

  --veu:rgba(0,0,0,.6);
  --veu-forte:rgba(0,0,0,.66);
  /* A dica do gráfico sobe acima do cartão: um tom mais claro que ele. */
  --tooltip-bg:rgba(44,47,54,.98);
  --sombra:0 1px 1px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
  --sombra-baixa:0 1px 3px rgba(0,0,0,.4);
  --sombra-media:0 2px 6px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.42);
  --sombra-alta:0 4px 10px rgba(0,0,0,.45), 0 16px 38px rgba(0,0,0,.5);
  --sombra-modal:0 18px 50px rgba(0,0,0,.60);
  --sombra-folha:0 24px 70px rgba(0,0,0,.65);
  --brilho:inset 0 1px 0 rgba(255,255,255,.04);
  --superficie:none;
  --elev-botao:0 1px 2px rgba(0,0,0,.4), 0 1px 3px 1px rgba(0,0,0,.25);
  --elev-botao-alta:0 1px 2px rgba(0,0,0,.45), 0 2px 6px 2px rgba(0,0,0,.3);
  --foco:#8CCBF3;
  --destaque:#005490;
  --card-hover:#1C1E22;
  --card-pressionado:#212328;
  --trilho:#26282E;
  --barra-ab:#6E727B;
  --elev-1:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.35);
  --elev-2:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.45);
  --relevo-controle:none;
  --sombra-controle:0 1px 1px rgba(0,0,0,.35);
  --sombra-controle-alta:0 2px 6px rgba(0,0,0,.4);
  --afundado:inset 0 2px 4px rgba(0,0,0,.5);

  --esq-1:#1E2025;
  --esq-2:#272A30;
  --esq-3:#22252A;
  --bom:#4ADE9B;
  --atencao:#F5B544;
  --ruim:#FF7B6E;
  --borda-curso:#666A74;
  --card-aberto:#141518;
  --idade-0:#5E4D24;
  --idade-1:#8D6C22;
  --idade-2:#C08A27;
  --idade-3:#E8A93A;
  --idade-4:#FFD27A;

  /* ---- A porta, no escuro ----
     O vidro escuro pede MENOS opacidade que o claro (.62 contra .74): no
     claro o borrao de um fundo claro some, e sem opacidade o cartao
     desaparece; no escuro ele se destaca sozinho pelo contorno.
     O desenho do fundo clareia e fica MENOS opaco: risco claro sobre fundo
     quase preto salta muito mais que risco escuro sobre fundo claro, e na
     mesma opacidade do tema claro ele deixava de ser fundo e virava tela. */
  --porta-vidro:rgba(24,25,29,.7);
  --porta-vidro-borda:rgba(255,255,255,.1);
  --porta-brilho:rgba(255,255,255,.13);
  --porta-campo:rgba(10,11,13,.55);
  --porta-campo-borda:rgba(255,255,255,.13);
  --porta-arte-estrutura:#8FB4D4;
  --porta-arte-dado:#7CC5F2;
  --porta-arte-realce:#E8CE84;
  --porta-arte-opacidade:.12;
  --porta-veu:rgba(6,7,9,.55);

  /* O cartao de setor, no escuro. A faixa e mais forte nos dois papeis: com os
     numeros do tema claro ela sumia contra o fundo quase preto. */
  --sc-cab:.26;
  --sc-cab-fim:.11;
  --sc-fio:.46;
  --vidro:rgba(24,25,29,.66);
  --vidro-borda:rgba(255,255,255,.09);
  --vidro-brilho:rgba(255,255,255,.1);
}


/* ──────────────────────────────────────────────────────────────────────
   css/02-base.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   O CHAO
   Reset, o fundo da pagina e a largura util. Quase nada, de proposito: o que
   nao for compartilhado por todas as telas mora no arquivo da sua tela.
   ===================================================================== */


*{box-sizing:border-box;}

/* O FUNDO DA PAGINA.
   Quatro manchas de luz sobre uma descida suave, todas fixas para nao
   "escorrer" ao rolar:

     · a COR DA PAGINA em cima a esquerda (muda por setor)
     · o ouro do selo em cima a direita
     · uma retomada da cor da pagina embaixo a direita
     · um respiro dourado embaixo a esquerda

   As duas de baixo entraram porque o fundo era vivo no topo e chapado no
   resto: rolando a pagina, a segunda tela parecia outro site. E porque os
   cartoes agora sao de VIDRO — vidro sobre superficie chapada nao e vidro, e
   um desfoque de nada nao tem nada para desfocar.

   Manchas, e nao textura com desenho: atras de grafico e de tabela, qualquer
   padrao com forma compete com o dado. Luz difusa nao compete com nada.

   `background-color` fica como rede de seguranca: navegador que nao entenda
   `rgb(R G B / a)` mostra o fundo chapado, nunca nada. */
html{min-height:100%;}
/* O FUNDO É LISO (decisão 61). As manchas de luz, os anéis e a malha de
   pontos saíram: eram enfeite, e enfeite em volta de número é o que dava à
   tela a "cara de IA". A cor do setor ficou no ponto ao lado do nome. */
body{margin:0;padding:0;color:var(--tinta);min-height:100vh;background:var(--fundo);
  font-family:var(--fonte);-webkit-font-smoothing:antialiased;}
/* A CAMADA DE DESENHO DO FUNDO.
   As manchas acima dão LUZ; esta dá FORMA — sem ela o fundo é bonito mas
   amorfo, e a página parece flutuar no nada. São duas coisas:

     · uma malha de pontos, fina, que dá textura e escala ao espaço vazio
     · dois anéis largos, um de cada lado, que é o que faz o fundo parecer
       desenhado em vez de só colorido

   PONTO E LINHA, E NADA COM FORMA RECONHECÍVEL: atrás de gráfico e de tabela,
   qualquer padrão que pareça alguma coisa compete com o dado. Ponto não parece
   nada, e é exatamente por isso que serve.

   Fixa na tela e não na página: rolando, o conteúdo passa por cima de um fundo
   parado, que é o que dá profundidade. E `pointer-events:none` porque isto não
   é clicável — sem a linha, ela engoliria o clique da página inteira. */
/* O conteúdo passa por cima da camada de desenho. Sem isto ela cobriria a
   página inteira — inclusive os cartões. */
/* A LARGURA DA PÁGINA (decisão 53). Até 1.760px de conteúdo: num monitor de
   1920 a tela parava em 1.400 e sobravam duas faixas vazias dos lados — com
   os cartões empilhados, parecia o painel de celular esticado. Acima de 1.760
   (monitores de 2560) o conteúdo para e centraliza: um gráfico de linha com
   2.400px de largura não se lê melhor, só fica mais chato. A margem dos lados
   acompanha a tela, de 12px no celular a 32px no monitor. */
.wrap{position:relative;z-index:1;
  max-width:1760px;margin:0 auto;padding:18px clamp(12px, 2vw, 32px) 56px;}

button{font-family:inherit;}


/* ──────────────────────────────────────────────────────────────────────
   css/03-cabecalho.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   O CABECALHO
   A faixa do topo: as duas marcas, o titulo da pagina e o estado da
   sincronizacao. A cor do setor entra aqui como tinta e como halo.
   ===================================================================== */

/* ============== HEADER ============== */
/* A FAIXA DO COLÉGIO (decisão 61): o cabeçalho é o azul do Anglo, cheio, nos
   dois temas — a identidade fica num lugar só, forte, e o resto da tela pode
   ser sóbrio. Tudo dentro dele é branco ou branco translúcido; o branco a
   78% dá 5,5:1 contra o azul. */
.header{display:flex;align-items:center;gap:20px;padding:16px 22px;background:var(--azul);color:#fff;
  border:0;border-radius:var(--raio-l);box-shadow:var(--elev-1);
  margin-bottom:18px;position:relative;overflow:hidden;}
.header h1{color:#fff !important;}
.header .sub,.header .sync-hint{color:rgba(255,255,255,.78) !important;}
.header .sync-line{color:#fff;}
.header .voltasetor{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);color:#fff;box-shadow:none;}
.header .voltasetor:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5);}
.header .btn.tema{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff;box-shadow:none;}
.header .btn.tema:hover{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.5);}
.header .conta{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08);}
.header .conta-quem,.header .conta-quem .ic{color:#fff;}
.header .conta-sair{color:#fff;border-left-color:rgba(255,255,255,.3);}
.header .conta-sair:hover{background:rgba(255,255,255,.16);color:#fff;}
.header :focus-visible{outline-color:#fff;}
/* A COR DO SETOR COMO TINTA, ajustada ao tema.
   A MATIZ nao muda de tema: ela e a identidade da pagina, e trocar de matiz
   entre claro e escuro faria a mesma pagina parecer duas. O que muda e a
   CLARIDADE — o mesmo azul-marinho que salta no branco desaparece no
   escuro: medido, 2,06:1 contra o cabecalho escuro, contra 5,5 a 10,2 da
   ponta dourada do mesmo filete. Depois do ajuste, 5,7:1.

   A primeira versao disto clareava misturando BRANCO
   (`color-mix(... white)`). Resolvia o contraste e estragava o resto:
   misturar com branco derruba o croma junto, e azul-marinho com
   verde-escuro, lavados, convergem — ΔE 6,5 na visao normal e 2,2 em
   daltonismo, medidos no validador do skill dataviz. Subir a claridade em
   OKLCH mantendo o croma da 14,5 e 6,9 com as mesmas quatro matizes.

   Dentro de `@supports` de proposito: a sintaxe de cor relativa
   (`oklch(from ...)`) com `var()` dentro so e validada na hora de computar,
   e uma declaracao invalidada ali NAO cai na declaracao anterior — cai no
   valor inicial, ou seja, filete transparente. Com a consulta, navegador
   sem suporte simplesmente nao entra no bloco e fica com a cor cheia, que e
   o comportamento de antes desta mudanca. */
:root{--pag-ink:rgb(var(--pag-rgb));--pag-ink-meio:rgb(var(--pag-rgb) / .5);}
@supports (color: oklch(from red 0.7 c h)){
  :root[data-tema-eficaz="escuro"]{
    --pag-ink:oklch(from rgb(var(--pag-rgb)) 0.70 c h);
    --pag-ink-meio:oklch(from rgb(var(--pag-rgb)) 0.70 c h / .55);
  }
}

/* SEM FILETE NO TOPO (decisão 58). O filete colorido em cima do cabeçalho
   (a cor do setor virando o ouro) saiu: "fica com muita cara de IA". A cor
   do setor segue no título e na luz do fundo. */
.brand{display:flex;align-items:center;gap:12px;flex:none;}
.brand .divisa{width:1px;height:32px;flex:none;
  background:linear-gradient(180deg,transparent,var(--ouro-claro) 45%,var(--ouro) 60%,transparent);}
.header .logo{height:44px;width:auto;flex:none;}
.header .selo{height:33px;width:auto;flex:none;}
.header .titles{flex:1;min-width:0;}
.header h1{margin:0;font-size:19px;font-weight:700;color:var(--azul-tinta);letter-spacing:-.01em;}
.header .sub{margin:3px 0 0;font-size:12px;color:var(--tinta-3);}
.header .mascote{height:62px;width:auto;flex:none;}

.sync{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none;}
.sync-acts{display:flex;align-items:center;gap:6px;}
.btn.tema{padding:7px 10px;}
.sync-line{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--tinta-2);}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;}
.dot.stale{background:var(--alerta);}
.dot.erro{background:var(--critico);}
.sync-hint{font-size:10.5px;color:var(--tinta-3);}

/* A CONTA E O SAIR, numa peça só: o e-mail de quem está vendo e o botão que
   encerra aquela sessão. Uma moldura com divisória diz "estas duas coisas são
   sobre a mesma conta" sem precisar de texto. O e-mail encurta com reticências
   em tela estreita; o completo fica no title. */
.conta{display:inline-flex;align-items:stretch;border:1px solid var(--borda-forte);
  border-radius:8px;background:var(--controle);overflow:hidden;}
.conta-quem{display:inline-flex;align-items:center;gap:6px;padding:0 10px;
  font-size:11.5px;color:var(--tinta-2);max-width:260px;min-width:0;}
.conta-quem[hidden]{display:none;}
.conta-quem .ic{flex:none;color:var(--tinta-3);}
.conta-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.conta-sair{border:none;border-left:1px solid var(--borda-forte);background:none;
  padding:7px 12px;font:inherit;font-size:12px;font-weight:600;color:var(--tinta-2);
  cursor:pointer;transition:.14s;}
.conta-quem[hidden] + .conta-sair{border-left:none;}
.conta-sair:hover{color:var(--azul-tinta);background:var(--sup-fill);}

/* AO VIVO: a bolinha verde pulsa devagar. É o único movimento do cabeçalho, e
   quer dizer uma coisa só — "isto está ligado agora". Sem movimento para quem
   pediu menos movimento ao sistema. */
.dot.vivo{background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:vivo 2.4s ease-out infinite;}
@keyframes vivo{0%{box-shadow:0 0 0 0 rgba(31,158,107,.55);}70%{box-shadow:0 0 0 7px rgba(31,158,107,0);}
  100%{box-shadow:0 0 0 0 rgba(31,158,107,0);}}
@media (prefers-reduced-motion: reduce){ .dot.vivo{animation:none;} }

/* OS AVISOS DE CHAMADO NOVO, no canto de baixo. Empilham se chegarem vários,
   somem sozinhos em nove segundos, e um clique abre a ficha. */
.avisos-vivo{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;
  gap:8px;max-width:min(360px,calc(100vw - 32px));pointer-events:none;}
.aviso-vivo{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;text-align:left;
  background:var(--card);border:1px solid var(--borda-forte);border-left:3px solid var(--ok);
  border-radius:10px;padding:10px 12px;box-shadow:var(--sombra-forte, var(--sombra));
  font:inherit;font-size:12.5px;color:var(--tinta);cursor:pointer;
  animation:entraAviso .28s ease-out;transition:opacity .5s, transform .5s;}
.aviso-vivo:hover{border-color:var(--azul-tinta);}
.aviso-vivo.saindo{opacity:0;transform:translateY(6px);}
.aviso-vivo .av-pulso{flex:none;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--ok);}
.aviso-vivo .av-txt{line-height:1.4;}
.aviso-vivo .av-txt b{color:var(--ok-tinta);}
.aviso-vivo .av-tit{display:block;margin-top:2px;color:var(--tinta-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px;}
@keyframes entraAviso{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){ .aviso-vivo{animation:none;} }


/* ──────────────────────────────────────────────────────────────────────
   css/04-controles.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   BOTOES E SELOS
   A familia de botoes do painel. Fica logo depois do cabecalho porque e la
   que ela aparece primeiro, e a ordem de carga E a ordem da cascata.
   Quem decide a COR de cada acao e 13-acoes.css, no fim da fila.
   ===================================================================== */

/* Pílula, como os botões do Material 3 (decisão 59), com 34px de altura: o
   alvo folgado que a WCAG 2.5.8 pede (24) e que o dedo acerta. */
.btn{border:1px solid var(--borda-forte);background:var(--controle);color:var(--tinta-2);
  border-radius:999px;min-height:34px;padding:0 15px;font-size:12.5px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
  transition:background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-1);}
.btn:hover{border-color:var(--azul-tinta);color:var(--azul-tinta);}
.btn.primary{background:var(--azul);border-color:var(--azul);color:#fff;}
.btn.primary:hover{background:var(--azul-hover);border-color:var(--azul-hover);color:#fff;}
.btn.ghost{border-color:transparent;background:transparent;}
.btn.ghost:hover{background:var(--sup-fill);border-color:transparent;color:var(--azul-tinta);}
.btn[disabled]{opacity:.45;cursor:default;pointer-events:none;}
a.btn{text-decoration:none;}



/* ──────────────────────────────────────────────────────────────────────
   css/05-entrada.css
   ────────────────────────────────────────────────────────────────────── */
/* O BOTÃO DO GOOGLE, o de verdade. O conteúdo é um <iframe> que o Google
   monta, então aqui só se resolve o lugar: centralizado e com a mesma largura
   dos outros botões da porta. Estilizar por dentro não é possível nem
   permitido. */
.porta-gbtn{display:flex;justify-content:center;margin:0 0 10px;}

/* `[hidden]` SÓ ESCONDE QUANDO NADA DECLARA `display`.
   O atributo funciona por uma regra da folha do navegador (`display:none`),
   e qualquer `display` escrito numa folha nossa ganha dela. `.btn-google` tem
   `display:flex` — então, com o botão do Google montado, os DOIS apareciam:
   o dele e o nosso, um debaixo do outro, dizendo a mesma coisa.
   Vale para os dois seletores, e é por isso que eles estão juntos aqui. */
.porta-gbtn[hidden],
.btn-google[hidden]{display:none;}

/* ========================================================================
   A TELA DE ENTRADA
   A porta: o que a pessoa ve antes de existir qualquer dado na tela.
   ===================================================================== */

/* A PORTA.
   z-index acima de tudo (o maior do painel era 300): uma porta atras de
   qualquer coisa nao e uma porta.

   TRES CAMADAS DE FUNDO, de tras para a frente:
     1. o gradiente e os dois halos - a mesma linguagem do resto do painel,
        azul da marca em cima a esquerda e ouro do selo em cima a direita
     2. .porta-arte, o painel desenhado (o SVG que vive no index.html)
     3. ::after, o veu - apaga as pontas e joga o olho no meio

   POR QUE UM PAINEL DESENHADO E NAO UMA FOTO. A tela de entrada do portal do
   colegio usa uma foto da escola, e ali faz sentido: quem entra e a
   comunidade. Isto aqui e ferramenta de trabalho, aberta dezenas de vezes
   por mes - foto cansa e compete com o formulario. O que esta atras do vidro
   e o ESQUELETO do que a pessoa vai ver do outro lado: a fileira de numeros,
   a tendencia, as barras ordenadas, a fila. Diz o que a ferramenta e, sem
   mostrar dado nenhum e sem custar uma requisicao. */
/* `align-items:flex-start` mais `margin:auto` no cartão, e não
   `align-items:center`: centrado de verdade, o cartão mais alto que a janela
   tem o TOPO cortado e não há como rolar até ele — some o logo, some o
   título, e a rolagem não ajuda porque o que sobrou está acima do zero. Com
   `margin:auto` ele centraliza quando cabe e encosta no topo quando não cabe,
   que é o comportamento certo numa tela baixa (notebook com a janela pela
   metade, celular deitado). */
.porta{position:fixed;inset:0;z-index:500;display:none;align-items:flex-start;
  justify-content:center;padding:24px;overflow:auto;
  background:
    radial-gradient(1250px 560px at 6% -12%, rgb(var(--pag-rgb) / var(--halo-pag)), transparent 62%),
    radial-gradient(950px 430px at 97% -4%,  rgb(var(--ouro-rgb) / var(--halo-ouro)), transparent 64%),
    linear-gradient(180deg, var(--grad-1), var(--grad-2) 46%, var(--grad-3));
  background-color:var(--fundo);}
.porta.on{display:flex;}

/* O PAINEL DESENHADO.
   A mascara apaga o desenho nas bordas: um painel inteiro, nitido ate o
   canto da tela, competiria com o formulario em vez de ficar atras dele.
   Assim ele e mais forte atras do vidro - onde o borrao o transforma em
   textura - e se dissolve nas pontas.

   `opacity` num token porque e o ajuste mais provavel desta tela: se o
   desenho aparecer demais ou de menos, mexe-se em UM numero, e ele ja tem
   valor diferente por tema. */
.porta-arte{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  opacity:var(--porta-arte-opacidade);
  -webkit-mask-image:radial-gradient(112% 92% at 50% 44%, #000 22%, transparent 74%);
  mask-image:radial-gradient(112% 92% at 50% 44%, #000 22%, transparent 74%);}

/* Tres papeis, a mesma gramatica do painel de verdade: estrutura e a moldura
   dos cartoes e a grade, dado e o que representa numero, e ha UM realce -
   cinza e o padrao, cor e a mensagem. */
.porta-arte .a-cartao rect{fill:none;stroke:var(--porta-arte-estrutura);stroke-width:1.6;}
.porta-arte .a-grade line{stroke:var(--porta-arte-estrutura);stroke-width:1;opacity:.5;}
.porta-arte .a-rot rect{fill:var(--porta-arte-estrutura);}
.porta-arte .a-fraca rect{opacity:.6;}
.porta-arte .a-num rect{fill:var(--porta-arte-dado);}
.porta-arte .a-barra rect{fill:var(--porta-arte-dado);}
.porta-arte .a-barra .a-realce{fill:var(--porta-arte-realce);}
.porta-arte .a-linha{fill:none;stroke:var(--porta-arte-dado);stroke-width:3;
  stroke-linejoin:round;stroke-linecap:round;}
.porta-arte .a-fina polyline{stroke-width:2;}
.porta-arte .a-tracejada{stroke:var(--porta-arte-estrutura);stroke-width:2.2;
  stroke-dasharray:9 7;}
.porta-arte .a-area{fill:var(--porta-arte-dado);opacity:.16;}

/* O anel de repartição: tres fatias do mesmo circulo, desenhadas com
   `stroke-dasharray` em vez de tres arcos calculados a mao. A volta toda mede
   2·pi·86 = 540,4 - as fatias sao 45%, 32% e 23% dela. */
.porta-arte .a-anel{fill:none;stroke:var(--porta-arte-estrutura);stroke-width:26;
  opacity:.45;}
.porta-arte .a-anel-1{stroke:var(--porta-arte-dado);opacity:1;
  stroke-dasharray:243 540.4;transform:rotate(-90deg);transform-origin:1250px 430px;}
.porta-arte .a-anel-2{stroke:var(--porta-arte-realce);opacity:1;
  stroke-dasharray:173 540.4;stroke-dashoffset:-243;
  transform:rotate(-90deg);transform-origin:1250px 430px;}

/* O VEU. Tira o peso das quatro pontas para o cartao ser a coisa mais clara
   (ou a mais escura) da tela sem precisar de sombra maior. */
.porta::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(92% 78% at 50% 46%, transparent 38%, var(--porta-veu) 100%);}

/* O CARTAO DE VIDRO.
   `backdrop-filter` borra o que esta atras: o desenho continua visivel sob o
   formulario, mas desfocada, e e isso que faz o cartao parecer estar NA
   FRENTE de alguma coisa em vez de colado num fundo.
   `saturate` junto porque borrar lava a cor - sem ele o azul do halo vira
   cinza debaixo do vidro.
   A luz de cima (`inset 0 1px 0`) e o que da espessura: sem ela o cartao e
   um retangulo translucido; com ela e uma placa. */
.porta-cx{position:relative;z-index:1;
  background:var(--porta-vidro);
  border:1px solid var(--porta-vidro-borda);
  border-radius:18px;
  padding:30px 30px 22px;max-width:412px;width:100%;text-align:center;margin:auto;
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  box-shadow:var(--sombra-modal), inset 0 1px 0 var(--porta-brilho);}

/* Navegador sem `backdrop-filter` mostraria o desenho NITIDO atras de texto de
   12px, e ai o texto fica ilegivel. Sem o efeito, superficie chapada. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .porta-cx{background:var(--card);}
}

/* AS MARCAS, com o mesmo filete dourado do cabecalho do painel: e a mesma
   casa, e a porta tem de parecer com a sala. */
.porta-logos{display:flex;align-items:center;justify-content:center;gap:13px;
  margin-bottom:14px;}
.porta-cx .plogo{height:46px;width:auto;flex:none;}
.porta-cx .pselo{height:35px;width:auto;flex:none;}
.porta-cx .pdivisa{width:1px;height:33px;flex:none;
  background:linear-gradient(180deg,transparent,var(--ouro-claro) 45%,var(--ouro) 60%,transparent);}

.porta-cx h2{font-size:19px;margin:0 0 4px;color:var(--tinta);font-weight:800;
  letter-spacing:-.01em;}
.porta-cx .psub{font-size:12.5px;color:var(--tinta-3);margin:0;}

/* A DIVISORIA entre o que a tela diz e o que ela pede.
   Sem ela o subtitulo e o primeiro rotulo se encostam e o olho le os dois
   como um bloco so. O losango e o mesmo ouro do selo, e e a unica peca
   decorativa do projeto inteiro - uma porta comporta uma. */
.porta-divisa{display:flex;align-items:center;justify-content:center;gap:10px;
  margin:18px 0;}
.porta-divisa::before,.porta-divisa::after{content:"";width:72px;height:1px;}
.porta-divisa::before{background:linear-gradient(90deg,transparent,var(--ouro));}
.porta-divisa::after{background:linear-gradient(90deg,var(--ouro),transparent);}
.porta-divisa span{width:5px;height:5px;flex:none;border-radius:1px;
  background:var(--ouro);transform:rotate(45deg);}

/* O BOTAO DE TEMA DA PORTA. Canto superior direito da TELA, nao do cartao:
   ele nao e parte do formulario, e dentro do cartao disputaria a atencao com
   os dois caminhos de entrada. Reaproveita `.btn.tema` do cabecalho - mesmo
   controle, mesma aparencia, mesmo texto. */
.porta-tema{position:absolute;top:18px;right:18px;z-index:2;}

/* O FORMULARIO.
   Rotulo ACIMA do campo, e nao so `placeholder`: placeholder some quando se
   comeca a digitar, e ai a pessoa que voltou ao formulario depois de um erro
   nao sabe mais qual campo e qual. Alinhado a esquerda porque campo de
   formulario se le da esquerda, mesmo num cartao centrado. */
.porta-cx form{text-align:left;}
.porta-rot{display:block;font-size:11.5px;font-weight:700;color:var(--tinta-2);
  margin:0 0 6px;}
.porta-campo{width:100%;box-sizing:border-box;margin-bottom:14px;padding:11px 13px;
  border:1px solid var(--porta-campo-borda);border-radius:10px;
  background:var(--porta-campo);color:var(--tinta);font-size:13.5px;
  font-family:inherit;transition:border-color .14s, box-shadow .14s;}
.porta-campo:focus{outline:none;border-color:var(--azul-tinta);
  box-shadow:0 0 0 3px var(--azul-tint-2);}
.porta-campo::placeholder{color:var(--tinta-3);}

.porta-cx .btn{width:100%;justify-content:center;padding:11px;}
/* O botão de entrar é a pílula do sistema, com 44px: a ação de uma tela só. */
.porta-entrar{margin-top:4px;font-size:14px;min-height:44px;padding:0 20px;border-radius:999px;}

/* O BOTAO DO GOOGLE, no desenho que o proprio Google especifica: fundo
   branco, contorno cinza, o G de quatro cores.
   NAO acompanha o tema, e isso e de proposito - um botao de identidade que
   muda de aparencia deixa de ser reconhecivel, e reconhecer e o trabalho
   dele. E o unico lugar do painel com cor escrita fora de 01-tokens.css, e
   e porque estas cores nao sao nossas. */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:11px 14px;border-radius:10px;cursor:pointer;
  background:#FFFFFF;color:#1F1F1F;border:1px solid #DADCE0;
  font-family:inherit;font-size:13.5px;font-weight:600;
  transition:background .14s, box-shadow .14s;}
.btn-google:hover{background:#F7F8F8;box-shadow:0 1px 3px rgba(60,64,67,.3);}
.btn-google:active{background:#F1F3F4;}
.btn-google:disabled{opacity:.55;cursor:default;box-shadow:none;}
.btn-google svg{flex:none;display:block;}

/* Separador com rotulo: sem ele os dois caminhos de entrada viram uma pilha
   de botoes e ninguem entende que sao alternativas, nao etapas. */
.porta-ou{display:flex;align-items:center;gap:12px;margin:16px 0 14px;
  font-size:10.5px;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.08em;}
.porta-ou::before,.porta-ou::after{content:"";flex:1;height:1px;
  background:var(--porta-campo-borda);}

/* O erro fica ENTRE o formulario e o botao do Google, que e onde o olho ja
   esta depois de apertar Entrar. Sem altura minima reservada: uma faixa
   vazia permanente e ruido, e o empurrao de uma linha ao errar a senha e
   justamente o movimento que chama a atencao para a mensagem. */
.porta-erro{font-size:12px;color:var(--critico-tinta);line-height:1.5;
  text-align:left;}
.porta-erro:not(:empty){margin:2px 0 4px;padding:9px 11px;border-radius:9px;
  background:var(--critico-tint);border:1px solid var(--critico-borda);}

/* Colada no botao de entrar, porque e dele que ela fala. Embaixo do botao do
   Google parecia falar do Google - justamente o caminho em que nao se digita
   senha nenhuma. */
.porta-nota{margin:10px 0 0;font-size:11px;color:var(--tinta-3);line-height:1.55;}
.porta-nota:empty{display:none;}
.porta-rodape{margin-top:14px;padding-top:12px;font-size:10.5px;color:var(--tinta-3);
  border-top:1px solid var(--porta-campo-borda);}

/* Celular: o cartao ocupa a largura toda. O desenho do fundo nao muda - o
   `slice` do SVG ja recorta pelo meio, que e onde a composicao e mais densa. */
@media (max-width:480px){
  .porta{padding:16px;}
  .porta-cx{padding:24px 20px 18px;}
  .porta-cx h2{font-size:17.5px;}
  .porta-cx .plogo{height:40px;}
  .porta-cx .pselo{height:30px;}
}

/* Quem pediu menos movimento nao quer transicao em campo de formulario. */
@media (prefers-reduced-motion:reduce){
  .porta-campo,.btn-google{transition:none;}
}

/* seta de "abrir fora": discreta ao lado do numero, some do caminho do
   clique que abre a ficha */
.ext{display:inline-block;margin-left:5px;color:var(--azul-tinta);text-decoration:none;
  font-weight:700;font-size:11px;opacity:.45;transition:opacity .14s;}
.ext:hover{opacity:1;text-decoration:none;}
tr:hover .ext{opacity:.8;}
.btn .spin{display:inline-block;width:11px;height:11px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:rot .7s linear infinite;}
@keyframes rot{to{transform:rotate(360deg);}}


/* ──────────────────────────────────────────────────────────────────────
   css/06-filtros.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   ABAS, FILTROS E PERIODO
   A barra de filtros e a janela de periodo. E a maior secao de CSS do
   projeto porque o controle de periodo e uma tela inteira: ano, mes,
   semana, dia e intervalo, e no celular ele sobe de baixo como uma folha.
   ===================================================================== */

/* ============== TABS ============== */
.tabs{display:flex;gap:2px;margin-bottom:12px;border-bottom:1px solid var(--borda);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab-btn{flex:none;white-space:nowrap;}
.tab-btn{background:none;border:none;padding:10px 16px;font-size:13.5px;font-weight:600;
  color:var(--tinta-3);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:.14s;}
.tab-btn:hover{color:var(--azul-tinta);}
.tab-btn.active{color:var(--azul-tinta);border-bottom-color:var(--azul-tinta);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ============== FILTROS ==============
   "Elimine as distrações": a barra é cromo, não dado. Uma linha só, sem
   cartão branco nem sombra, para não competir com os gráficos. */
.filterbar{padding:0;margin:0 0 16px;}
.filter-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.ms{position:relative;}
/* O FILTRO É UM CHIP DE LISTA (Material 3): 36px, canto de 8. Com valor
   escolhido ele fica CHEIO no azul de fundo — o filtro ligado se vê de
   longe, sem depender de ler o rótulo (decisão 59). */
.ms-btn{border:1px solid var(--borda-forte);background:var(--controle);border-radius:var(--raio-s);
  min-height:36px;padding:0 11px 0 12px;font-size:12.5px;color:var(--tinta-2);cursor:pointer;display:flex;
  align-items:center;gap:7px;min-width:132px;justify-content:space-between;
  transition:background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-1);}
.ms-btn:hover{border-color:var(--azul-tinta);}
.ms-btn.has{border-color:transparent;color:var(--azul-tinta);background:var(--azul-tint-2);font-weight:700;}
.ms-btn .caret{font-size:9px;opacity:.7;transition:transform var(--dur-2) var(--curva);}
.ms.open > .ms-btn .caret{transform:rotate(180deg);}
.ms-panel{display:none;position:absolute;top:calc(100% + 5px);left:0;z-index:60;
  width:min(262px, calc(100vw - 26px));
  background:var(--card);border:1px solid var(--borda-forte);border-radius:var(--raio);
  box-shadow:var(--sombra-alta);padding:9px;transform-origin:top left;}
.ms.open .ms-panel{display:block;animation:menuAbre var(--dur-2) var(--curva);}
/* O menu nasce do botão: cresce um pouco e aparece, de cima para baixo. */
@keyframes menuAbre{from{opacity:0;transform:translateY(-4px) scale(.97);}to{opacity:1;transform:none;}}
/* Fundo escuro, cabeçalho e rodapé existem SÓ na folha do celular
   (`@media (max-width:699px)`). No desktop o painel é um balão ancorado no
   botão: já fecha ao clicar fora, e um "Pronto" ali seria um clique a mais
   sem função. O markup é o mesmo nas duas; quem decide é o CSS. */
/* Fundo, cabeçalho e rodapé existem só no controle de PERÍODO — os
   dropdowns de dimensão continuam balões simples, que fecham ao clicar fora
   e não têm nada a confirmar. */
.ms-back,.ms-sheet-head,.ms-sheet-foot{display:none;}
.ms-sheet-head{position:relative;}

/* ── O PERÍODO É UMA JANELA, NÃO UM BALÃO ── em qualquer largura.
   Começou como conserto de celular, onde o balão só fechava tocando de novo
   no campo, a página rolava atrás e o calendário disputava espaço. O usuário
   pediu o mesmo no computador em 09/09: "vai ser mais intuitivo para o
   usuário, adicione um botão para confirmar a data selecionada".
   No desktop ela é CENTRADA; no celular sobe de baixo (bloco de 699px). */
.ms-per.open .ms-back{display:block;position:fixed;inset:0;z-index:70;
  background:rgba(0,0,0,.5);}
.ms-per .ms-panel{position:fixed;left:50%;top:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);
  width:min(430px, calc(100vw - 32px));max-width:none;
  max-height:min(84vh, 680px);border-radius:14px;padding:0;overflow:visible;
  z-index:71;flex-direction:column;}
.ms-per.open .ms-panel{display:flex;}
.ms-per .ms-sheet-head{display:flex;align-items:center;justify-content:space-between;
  padding:13px 15px 11px;border-bottom:1px solid var(--linha);flex:0 0 auto;}
.ms-per .ms-sheet-head b{font-size:14px;color:var(--tinta);}
.ms-per .ms-x{background:none;border:none;color:var(--tinta-3);font-size:26px;
  line-height:1;padding:0 4px;cursor:pointer;font-family:inherit;}
.ms-per .ms-x:hover{color:var(--tinta);}
/* Só o miolo rola — a página atrás fica travada pelo JS. */
.ms-per #perBox{flex:1 1 auto;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;padding:11px 13px 5px;}
/* O rodapé diz O QUE está selecionado ao lado do botão: um "Confirmar"
   sozinho não mostra o que se está confirmando. */
.ms-per .ms-sheet-foot{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:10px 13px;border-top:1px solid var(--linha);}
.ms-per .ms-sel{font-size:11.5px;color:var(--tinta-3);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ms-per .ms-sel b{color:var(--tinta);}
.ms-per .ms-sheet-foot .btn{margin-left:auto;min-height:38px;flex:0 0 auto;}
.ms-search{width:100%;border:1px solid var(--borda);border-radius:7px;padding:6px 9px;
  background:var(--campo);color:var(--tinta);
  font-size:12px;font-family:inherit;margin-bottom:7px;}
.ms-search:focus{outline:2px solid var(--foco);outline-offset:-1px;border-color:var(--azul-tinta);}
.ms-actions{display:flex;gap:6px;margin-bottom:7px;}
.ms-actions button{flex:1;border:none;background:var(--sup-fill);color:var(--tinta-2);border-radius:6px;
  padding:5px;font-size:11px;font-weight:600;cursor:pointer;}
.ms-actions button:hover{background:var(--sup-fill-2);color:var(--azul-tinta);}
.ms-list{max-height:212px;overflow-y:auto;}
.ms-opt{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;
  font-size:12px;cursor:pointer;color:var(--tinta);}
.ms-opt:hover{background:var(--sup-hover);}
.ms-opt input{accent-color:var(--azul-tinta);margin:0;flex:none;}
.ms-opt .txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ms-opt .n{font-size:10.5px;color:var(--tinta-3);font-variant-numeric:tabular-nums;flex:none;}
.ms-empty{font-size:11.5px;color:var(--tinta-3);padding:10px 6px;text-align:center;}

.oculto{display:none !important;}

/* Um único controle de período, sem nenhum campo para digitar: a navegação
   é ano › mês › semana/dia, no espírito do drill-down do Power BI. */
.ms-per{margin-left:auto;}
/* A regra do BALÃO (`width:330px; left:auto; right:0`) morava aqui e foi
   removida na v59. Ela ficou órfã quando o período virou janela centrada,
   e como estava DEPOIS da regra nova com a mesma especificidade, era ela
   que ganhava: a janela nascia com 330px encostada à direita, exatamente
   onde o balão nascia. Foi o "não abriu o modal no centro da tela".
   Duas regras para o mesmo seletor na mesma camada é o cheiro; a de baixo
   vence em silêncio. */
.ms-sec{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tinta-3);font-weight:700;margin:2px 0 6px;}
.ms-hr{height:1px;background:var(--borda);margin:11px -9px;}

.presets{display:flex;gap:4px;flex-wrap:wrap;}
.presets + .presets{margin-top:4px;}
.preset{flex:1;border:1px solid transparent;background:var(--sup-fill);color:var(--tinta-2);
  border-radius:7px;padding:6px 8px;font-size:11.5px;font-weight:600;cursor:pointer;
  transition:.14s;white-space:nowrap;font-family:inherit;}
.preset:hover{background:var(--sup-fill-2);color:var(--azul-tinta);}
.preset.active{background:var(--azul);color:#fff;}

/* trilha: onde estou e como volto */
.perhead{display:flex;align-items:center;gap:1px;flex-wrap:wrap;margin:0 0 8px;}
.crumb{border:none;background:none;color:var(--azul-tinta);font-weight:700;cursor:pointer;
  padding:3px 5px;border-radius:6px;font-size:11.5px;font-family:inherit;}
.crumb:hover{background:var(--sup-fill);}
.perhead .sep{color:var(--tinta-3);font-size:11px;}
.perhead .now{color:var(--tinta);font-weight:700;font-size:11.5px;padding:3px 5px;}

/* OS ANOS EM GRADE, irmã da grade de meses (01/10/2026: a lista com seta
   "estava feia"). O ano fica em destaque e a contagem embaixo, menor — a mesma
   hierarquia do mês, para o olho não reaprender a cada nível. */
.anogrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;}
.anocell{border:1px solid var(--borda);background:var(--controle);border-radius:8px;
  padding:9px 2px 7px;cursor:pointer;font-family:inherit;text-align:center;transition:.12s;}
.anocell b{display:block;font-size:13.5px;font-weight:700;color:var(--tinta);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;}
.anocell i{display:block;font-size:10px;color:var(--tinta-3);font-style:normal;
  font-variant-numeric:tabular-nums;margin-top:2px;}
.anocell:hover{border-color:var(--azul-tinta);}
.anocell.sel{background:var(--azul);border-color:var(--azul);}
.anocell.sel b,.anocell.sel i{color:#fff;}

.mesgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;}
.mescell{border:1px solid var(--borda);background:var(--controle);border-radius:8px;
  padding:7px 2px 6px;cursor:pointer;font-family:inherit;text-align:center;transition:.12s;}
.mescell b{display:block;font-size:12px;font-weight:700;color:var(--tinta-2);}
.mescell i{display:block;font-size:10px;color:var(--tinta-3);font-style:normal;
  font-variant-numeric:tabular-nums;margin-top:1px;}
.mescell:hover{border-color:var(--azul-tinta);}
.mescell.sel{background:var(--azul);border-color:var(--azul);}
.mescell.sel b,.mescell.sel i{color:#fff;}
.mescell.zero{opacity:.32;pointer-events:none;}

/* O QUE ESTÁ SENDO COMPARADO, no próprio calendário: contorno tracejado, que é
   a mesma linguagem das linhas comparadas no gráfico. Azul cheio é o período
   da tela; tracejado é contra quem ele está sendo medido. */
.anocell.cmp,.mescell.cmp{border-style:dashed;border-color:var(--tinta-2);}
.caldia.cmp{outline:1px dashed var(--tinta-2);outline-offset:-2px;}

/* ESCOLHENDO COM O QUE COMPARAR: o calendário mudou de papel, e o aviso fica
   onde ficavam os atalhos, em cima, para não passar despercebido. */
.cmp-escolhendo{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border-radius:8px;background:var(--azul-tint);border:1px solid var(--azul-borda);
  font-size:11.5px;line-height:1.45;color:var(--tinta-2);}
.cmp-escolhendo b{color:var(--azul-tinta);}

.perall{width:100%;margin-top:8px;border:1px dashed var(--borda-forte);background:transparent;
  color:var(--tinta-2);border-radius:7px;padding:6px;font-size:11.5px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:.12s;}
.perall:hover{border-color:var(--azul-tinta);color:var(--azul-tinta);}
.perall.sel{border-style:solid;border-color:var(--azul-borda);background:var(--azul-tint);color:var(--azul-tinta);}

.calgrid{display:grid;grid-template-columns:24px repeat(7,minmax(0,1fr));gap:2px;}
.caldow{font-size:9px;text-transform:uppercase;letter-spacing:.03em;color:var(--tinta-3);
  text-align:center;font-weight:700;padding-bottom:3px;}
.calwk{border:none;background:none;cursor:pointer;border-radius:6px;font-family:inherit;
  font-size:9px;font-weight:700;color:var(--tinta-3);padding:0;}
.calwk:hover{background:var(--sup-fill);color:var(--azul-tinta);}
.calwk.sel{background:var(--azul);color:#fff;}
.caldia{border:1px solid transparent;background:none;border-radius:6px;padding:3px 0 2px;
  cursor:pointer;font-family:inherit;font-size:11.5px;color:var(--tinta);line-height:1.1;}
.caldia .pt{display:block;height:4px;line-height:4px;}
.caldia .pt i{display:inline-block;width:3px;height:3px;border-radius:50%;
  background:var(--azul-claro);vertical-align:top;}
.caldia:hover{background:var(--sup-hover);}
.caldia.fora{color:var(--tinta-fraca);pointer-events:none;}
.caldia.zero{color:var(--tinta-3);opacity:.45;pointer-events:none;}
.caldia.faixa{background:var(--azul-tint-2);color:var(--azul-tinta);}
.caldia.sel{background:var(--azul);color:#fff;font-weight:700;}
.caldia.sel .pt i{background:rgba(255,255,255,.8);}
.perhint{font-size:10.5px;color:var(--tinta-3);line-height:1.5;margin-top:9px;}
.perhint b{color:var(--tinta-2);}

/* "Mais filtros": o que se usa todo dia fica à vista; o resto só quando
   pedido, para a barra não virar uma parede de dropdowns. */
.fmais{border:1px dashed var(--borda-forte);background:transparent;border-radius:8px;
  padding:7px 11px;font-size:12px;color:var(--tinta-3);cursor:pointer;font-family:inherit;
  font-weight:600;transition:.14s;white-space:nowrap;}
.fmais:hover{border-color:var(--azul-tinta);color:var(--azul-tinta);}
.fmais.on{border-style:solid;border-color:var(--azul-borda);background:var(--azul-tint);color:var(--azul-tinta);}
.filter-extra{display:none;margin-top:7px;}
.fmob{display:none;}
.filter-extra.open{display:flex;}

.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:9px;min-height:24px;}
.chips.hidden{display:none;}
/* O filtro ligado, como chip de entrada do Material 3: canto de 8, 30px, e o
   x com alvo de 24px (WCAG 2.5.8). */
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--azul-tint);border:1px solid var(--azul-borda);
  color:var(--azul-tinta);border-radius:var(--raio-s);min-height:30px;padding:0 3px 0 10px;font-size:12px;font-weight:600;}
.chip button{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;border-radius:6px;}
.chip .k{color:var(--tinta-3);font-weight:600;}
.chip button{border:none;background:none;color:var(--azul-tinta);cursor:pointer;font-size:14px;
  line-height:1;padding:0 3px;border-radius:50%;opacity:.65;}
.chip button:hover{opacity:1;background:var(--azul-tint-2);}
.chips .count{font-size:11.5px;color:var(--tinta-3);margin-left:auto;font-variant-numeric:tabular-nums;}
/* Sem filtro a faixa nao fica muda nem desaparece: some a altura mudaria a
   cada clique. O texto e cinza claro para nao competir com os graficos. */
.chips .vazio{font-size:11.5px;color:var(--tinta-3);}


/* ──────────────────────────────────────────────────────────────────────
   css/07-narrativa.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   O QUE OS DADOS ESTAO DIZENDO
   A faixa de texto que abre o painel. Storytelling com Dados: o grafico
   mostra, a frase diz. Uma caixa so, com uma barra azul na esquerda.
   ===================================================================== */

/* ============== A GRANDE IDEIA ==============
   Storytelling com Dados: a conclusão vem primeiro, em uma frase.
   O painel não deixa o leitor garimpar o "e daí". */
/* SEM A BARRA DA ESQUERDA (decisão 59). A frase é um cartão TONAL, como os
   do Material 3: o fundo azul-claro diz "isto é a leitura dos dados"; quando
   a fila cresce, o fundo passa ao âmbar e a etiqueta acompanha. A cor do
   fundo é reforço — o que a frase diz está escrito nela. */
.bigidea{background:var(--azul-tint);border:1px solid var(--azul-borda);
  border-radius:var(--raio);padding:14px 18px;margin-bottom:14px;box-shadow:var(--sombra);}
.bigidea.crescendo{background:var(--alerta-tint);border-color:var(--alerta-borda);}
.bigidea .tag{font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--azul-tinta);font-weight:700;display:block;margin-bottom:5px;}
.bigidea.crescendo .tag{color:var(--alerta-tinta);}
/* A frase é a manchete da folha (decisão 60): maior que qualquer título. */
.bigidea p,.bigidea .bi-txt{margin:0;font-size:17px;line-height:1.5;color:var(--tinta);letter-spacing:-.005em;}
/* NO MÁXIMO QUATRO FRASES, CORRIDAS (01/10/2026). Era um parágrafo de seis
   ou sete frases com todo número em azul: quando tudo é destaque, nada é.
   Ficaram as quatro mais importantes, e o destaque passou a ser o PESO do
   número, não a cor. A cor fica para o que tem sentido — a fila que cresceu
   (vermelho) ou diminuiu (verde). Por um dia foram uma lista, uma frase por
   linha; ocupava espaço demais e voltou a ser parágrafo. */
.bigidea .bi-recorte{color:var(--tinta-2);}
.bigidea .bi-recorte b{color:var(--tinta-2);}
.bigidea b{color:var(--tinta);font-weight:700;}
.bigidea .neg{color:var(--critico-tinta);font-weight:700;}
.bigidea .pos{color:var(--ok-tinta);font-weight:700;}


/* ──────────────────────────────────────────────────────────────────────
   css/08-kpis.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   A FILEIRA DE NUMEROS
   Os cartoes grandes do topo e a faixa de comparacao que aparece abaixo
   deles quando ha um periodo anterior sendo comparado.
   ===================================================================== */

/* ============== KPIs ============== */
/* minmax(0,…) em toda faixa de grid: sem isso o min-content do canvas
   do Chart.js infla a coluna e a página passa a rolar na horizontal. */
.kpi-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px;margin-bottom:14px;}
/* SEIS OU SETE CARTÕES. O quarto ("abertos nos últimos 30 dias") só existe
   sem período escolhido: com período, ele não quer dizer nada (em 2025 seriam
   zero, porque os últimos 30 dias estão em 2026). Desde 01/10/2026 a fileira
   tem também a taxa de atendimento — então são seis com período e sete sem,
   e nenhum cartão fica mentindo para preencher buraco. */
.kpi-row.sete{grid-template-columns:repeat(7,minmax(0,1fr));}
/* TRÊS NA FRENTE, DOIS NO DETALHE (decisão 52). Os três da frente são as três
   respostas da tela — quanto chegou, quanto foi resolvido, o que está parado —,
   e por isso mais altos e com o número maior. */
.kpi-row.tres{grid-template-columns:repeat(3,minmax(0,1fr));}
.kpi-row.tres .kpi{min-height:118px;padding:15px 18px 14px;}
.kpi-row.tres .kpi-val{font-size:34px;}
.kpi-row.dois{grid-template-columns:repeat(2,minmax(0,1fr));}
/* OS DESENHOS DOS NÚMEROS (decisões 61 e 62): a linha do ano e o anel da
   taxa, com a marca da meta. Ver `linhaDoAno`, `anelDe`. Os quatro números
   da frente (.kpi-row.quatro) estão em 17-v3.css. */
.kpi-graf{position:relative;height:30px;margin:2px 0 0;}
.kpi-graf:empty{display:none;}
.kg-linha{display:block;width:100%;height:30px;overflow:visible;}
.kg-area{stroke:none;opacity:.14;}
.kg-traco{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:0;animation:risca .9s var(--curva) both;}
@keyframes risca{from{stroke-dashoffset:1;}}
.kg-ent .kg-traco{stroke:var(--neutro);} .kg-ent .kg-area{fill:var(--neutro);}
.kg-fin .kg-traco{stroke:var(--c1);} .kg-fin .kg-area{fill:var(--c1);}
.kg-fila .kg-traco{stroke:var(--atencao);} .kg-fila .kg-area{fill:var(--atencao);}
.kg-ponto{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;border:2px solid var(--card);}
.kg-ponto.kg-ent{background:var(--neutro);} .kg-ponto.kg-fin{background:var(--c1);} .kg-ponto.kg-fila{background:var(--atencao);}
.kpi-anel{position:absolute;top:14px;right:14px;width:54px;height:54px;}
.kpi-anel:empty{display:none;}
.kg-anel{display:block;width:100%;height:100%;transform:rotate(-90deg);}
.kg-trilho{fill:none;stroke:var(--trilho);stroke-width:5;}
.kg-valor{fill:none;stroke-width:5;stroke-linecap:round;stroke:var(--neutro);
  transition:stroke-dasharray .9s var(--curva);animation:anel 1s var(--curva) both;}
@keyframes anel{from{stroke-dasharray:0 100;}}
.kg-anel.st-bom .kg-valor{stroke:var(--bom);} .kg-anel.st-atencao .kg-valor{stroke:var(--atencao);}
.kg-anel.st-ruim .kg-valor{stroke:var(--ruim);}
/* O ESTADO NO NÚMERO (decisão 61): a cor e, no pé, o sinal escrito. */
.st-bom{color:var(--bom) !important;}
.st-atencao{color:var(--atencao) !important;}
.st-ruim{color:var(--ruim) !important;}
.st-selo{display:inline-flex;align-items:center;gap:4px;font-weight:700;}
.st-selo b{font-weight:800;}
.dicaclic{margin:0 0 7px;font-size:11px;color:var(--tinta-3);}
.kpi{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);
  padding:13px 15px 12px;box-shadow:var(--sombra);position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:7px;min-height:104px;}
/* SEM FILETE DE ESTADO (decisão 58): a borda colorida da esquerda saiu. O
   estado do número se diz pela seta e pela frase do pé, em texto, que é o que
   a WCAG pede (1.4.1: cor nunca sozinha). */
/* O número é o mais forte da tela (decisão 59): em cinza ele perdia para o
   próprio rótulo. */
.kpi.k-neutro .kpi-val{color:var(--tinta);}
/* O saldo da fila pinta o número e a seta com o sentido: verde encolheu,
   vermelho cresceu. Só ele: nos outros cartões, mais ou menos não é bom nem
   ruim por si — mais chamados abertos pode ser mais gente pedindo, e isso
   não é defeito de ninguém. Ver numeros/faixa.js. */
/* A fila de uma ponta à outra: "41 → 103", e embaixo a variação, com a cor
   do sentido. O número de chegada pesa mais: é a fila de agora. */
.kpi-val.fila-de-para{display:flex;align-items:baseline;gap:6px;}
.kpi-val.fila-de-para .de{color:var(--tinta-3);font-size:.78em;}
.kpi-val.fila-de-para .vai{color:var(--tinta-3);font-size:.6em;}
.kpi-var{display:inline-flex;align-items:center;gap:2px;font-weight:700;color:var(--tinta-2);}
.kpi.k-saldo.k-ok .kpi-var{color:var(--ok-tinta);}
.kpi.k-saldo.k-crit .kpi-var{color:var(--critico-tinta);}
/* O rótulo em caixa normal (decisão 60): "Entraram em 2026" se lê; em CAIXA
   ALTA de 11px, era uma etiqueta que o olho pulava. */
.kpi-label{font-size:12.5px;color:var(--tinta-2);font-weight:600;line-height:1.3;}
.kpi-val{font-family:var(--fonte-num);font-size:29px;font-weight:700;color:var(--tinta);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;}
.kpi-val.sm{font-size:24px;}
.kpi-foot{font-size:11px;color:var(--tinta-3);line-height:1.35;margin-top:auto;}
.kpi-foot b{color:var(--tinta-2);font-weight:700;}

.mini-tab{margin:8px 0 10px;max-width:520px;}
.mini-tab tr.curso td{color:var(--tinta-3);}
.mini-tab td i{font-style:normal;font-size:.9em;}
/* A variação do comparativo, logo abaixo do número. Fica na tinta fraca de
   propósito: subir é bom em "Finalizados" e ruim em "Reabertos", então o
   cartão não tem como saber o que pintar de verde. A seta dá a direção e a
   cor segue reservada aos dois números que pedem ação.
   `:empty` faz o espaço desaparecer sozinho quando não há comparação —
   assim o JS só precisa escrever '' e o cartão volta ao tamanho de antes. */
.kpi-delta{font-size:11px;font-weight:700;color:var(--tinta-3);margin-top:4px;line-height:1.3;}
.kpi-delta b{color:var(--tinta-2);}
.kpi-delta:empty{display:none;}

/* ── COMPARATIVO ──
   As linhas de comparacao ficam LOGO ABAIXO do numero, com o NOME do
   periodo ao lado do valor. Nome e o que faltava na v51: uma variacao solta
   ("▼ 4,3%") nao diz contra o que. Tinta fraca porque subir e bom em
   "Finalizados" e ruim em "Reabertos" — o cartao nao tem como saber o que
   pintar de verde, e a cor segue reservada aos numeros que pedem acao. */
/* TRÊS CAMADAS, e a do meio é a que faltava.
   As linhas de comparação estavam em 11px cinza — exatamente o mesmo peso do
   rodapé logo abaixo ("99,1% do total · 8 cancelados"). O olho lia as duas
   como nota de pé, e o comparativo desaparecia. Foi o "parece não estar
   comparando nada" de 09/09.
   Agora: número grande (29px) → comparação (11,5px, tinta cheia, separada por
   um fio) → rodapé (11px cinza). Três pesos, três funções. */
.kpi-cmp{margin-top:7px;padding-top:6px;border-top:1px solid var(--linha);
  display:grid;gap:2px;font-size:11.5px;line-height:1.4;}
.kpi-cmp:empty{display:none;}
.kpi-cmp .l{display:flex;gap:7px;align-items:baseline;}
/* A ORDEM DA LINHA É A ORDEM DA FRASE: "▲ 4,1%  vs 2025  (1.234)". A variação
   vem primeiro e em tinta cheia, porque é a resposta; contra quem, em seguida;
   e o número do outro período, por último e mais claro, para quem quer
   conferir. Mudou em 01/10/2026 — ver `deltaContra` em comparacao.js. */
.kpi-cmp .l .d{white-space:nowrap;color:var(--tinta);font-weight:700;}
/* Nome longo ("vs 15/09 a 26/09/2025") num cartão estreito termina em
   reticências, e não cortado no meio de um número: o `title` da linha tem a
   frase inteira. */
.kpi-cmp .l .p{color:var(--tinta-2);font-weight:600;white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis;}
.kpi-cmp .l .v{margin-left:auto;color:var(--tinta-3);font-weight:600;font-variant-numeric:tabular-nums;}
/* O cartão que NÃO compara diz por quê, em tinta fraca: é aviso, não número. */
.kpi-cmp .l.nada{color:var(--tinta-3);font-weight:500;font-size:11px;}
/* O TRAÇO DE CADA ANO, do tamanho de uma amostra. O padrão de cada classe é
   o MESMO de `TRACOS_CMP` no script — é o que liga a linha 2023 do gráfico
   ao "2023" escrito no cartão. `align-self:center` porque a linha da
   comparação alinha por baseline, e um bloco de 2px de altura sem texto
   teria a baseline no pé, jogando o traço para baixo do número. */
.kpi-cmp .l .sw,.sc-cmp .l .sw{flex:0 0 14px;height:2px;align-self:center;}
.sw-0{background:repeating-linear-gradient(90deg,var(--neutro) 0 7px,transparent 7px 11px);}
.sw-1{background:repeating-linear-gradient(90deg,var(--neutro) 0 2px,transparent 2px 5px);}
.sw-2{background:repeating-linear-gradient(90deg,var(--neutro) 0 9px,transparent 9px 12px,
  var(--neutro) 12px 14px,transparent 14px 17px);}

/* A faixa diz UMA vez o que esta sendo comparado, para os seis cartoes nao
   repetirem "vs 2025" seis vezes. */
.cmpfaixa{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  background:var(--sup-poco);border:1px solid var(--borda);border-radius:9px;
  padding:9px 12px;margin:0 0 12px;font-size:12px;}
.cmpfaixa:empty{display:none;}
.cmpfaixa .cf-rot{font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--tinta-3);}
.cmpfaixa .cf-item{display:flex;gap:6px;align-items:baseline;color:var(--tinta-3);}
.cmpfaixa .cf-item b{color:var(--tinta);font-size:13px;}
.cmpfaixa .cf-agora b{color:var(--azul-tinta);}
.cmpfaixa .cf-nota{margin-left:auto;color:var(--tinta-3);font-size:11px;}
.cmpfaixa .cf-dt{color:var(--tinta-3);font-size:10.5px;opacity:.85;}
.cmpfaixa .cf-var{font-weight:700;color:var(--tinta-2);font-size:12px;}
/* As linhas de comparação dentro de um cartão da tela geral, uma embaixo de
   cada número. A MESMA FRASE das linhas dos KPIs do setor — quanto, contra
   quem, e o valor do outro período: "▲ 24,4% vs 2025 (1.708)". Até 01/10/2026
   era uma linha só, na ordem antiga (período, valor, variação). */
.sc-cmp{display:grid;gap:1px;margin-top:5px;font-size:10px;line-height:1.35;}
/* Quebra em vez de cortar: "▼ 8 a menos vs set/2025 (8)" não cabe numa coluna
   de 140px, e "vs set/20…" esconderia justamente contra quem se compara. */
.sc-cmp .l{display:flex;flex-wrap:wrap;gap:0 4px;align-items:baseline;color:var(--tinta-3);min-width:0;}
/* Amostra menor que a dos KPIs: a coluna de um cartão da tela geral tem
   metade da largura de um KPI, e cada pixel aqui é um caractere do nome. */
.sc-cmp .l .sw{flex-basis:10px;}
.sc-cmp .l .d{white-space:nowrap;color:var(--tinta-2);font-weight:700;}
.sc-cmp .l .p{white-space:nowrap;font-weight:600;}
.sc-cmp .l .v{white-space:nowrap;color:var(--tinta-3);font-variant-numeric:tabular-nums;}

/* Os chips de escolha, no pe do painel de periodo. */
.cmpchips{display:flex;flex-wrap:wrap;gap:5px;}
.cmpchip{border:1px solid var(--borda-forte);background:var(--controle);
  color:var(--tinta-2);border-radius:7px;padding:6px 10px;font-size:12px;
  font-family:inherit;cursor:pointer;transition:.14s;min-height:34px;}
.cmpchip:hover{border-color:var(--azul-tinta);color:var(--azul-tinta);}
.cmpchip .cc-n{margin-left:4px;font-weight:500;color:var(--tinta-3);font-variant-numeric:tabular-nums;}
.cmpchip.on .cc-n{color:inherit;opacity:.75;}
.cmpchip .sw{display:inline-block;width:14px;height:2px;margin-right:6px;vertical-align:middle;}
.cmpchip.zero{opacity:.45;}
.cmpchip.cmpmais{border-style:dashed;background:transparent;color:var(--azul-tinta);font-weight:600;}
.cmpchip.cmpmais:hover{border-color:var(--azul-tinta);background:var(--azul-tint);}
.cmpchip.on{border-color:var(--azul-borda);background:var(--azul-tint);
  color:var(--azul-tinta);font-weight:700;}
/* Todo número grande do painel abre a lista que ele contou. */
.kpi.clic{cursor:pointer;transition:box-shadow .15s, transform .15s, border-color .15s;
  text-align:left;font-family:inherit;width:100%;}
.kpi.clic:hover{border-color:var(--borda-forte);transform:translateY(-1px);
  box-shadow:var(--sombra-media);}
.kpi.clic:focus-visible{outline:2px solid var(--foco);outline-offset:2px;}
/* A lupa fica sempre visível, fraca: é ela que anuncia que o número abre. */
.kpi .lupa{position:absolute;right:9px;top:8px;font-size:11px;color:var(--azul-tinta);
  opacity:.38;transition:opacity .15s;}
.kpi.clic:hover .lupa,.kpi.clic:focus-visible .lupa{opacity:1;}
.kpi.clic:hover{background:var(--sup-hover);}

/* O ÍCONE DE CADA NÚMERO DA FRENTE (decisão 56), num círculo tingido: cinza
   para o que entra, azul para o que a equipe faz (finalizados, taxa) — as
   mesmas cores das colunas do gráfico —, e o relógio para o que espera. */
.kpi-topo{display:flex;align-items:center;gap:9px;}
.kpi-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;
  background:var(--sup-fill);color:var(--tinta-2);box-shadow:var(--sombra-controle);}
.kpi-ic.ic-fin{background:var(--azul-tint);color:var(--azul-tinta);}
.kpi-ic.ic-parados{background:var(--alerta-tint, var(--sup-fill));color:var(--alerta-tinta, var(--tinta-2));}



/* ──────────────────────────────────────────────────────────────────────
   css/09-graficos.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   CARTOES DE GRAFICO
   A moldura de todo grafico: o cartao, a area de plotagem em tres alturas,
   os botoes do canto e a legenda.
   ===================================================================== */

/* ============== CARDS / GRÁFICOS ============== */
.grid-a{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:12px;margin-bottom:12px;}
/* DOIS POR LINHA, e o que sobrar sozinho ocupa a linha inteira (decisão 61):
   três colunas em tela larga deixavam um buraco à direita quando a seção tinha
   dois cartões. */
.grid-b{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:12px;margin-bottom:12px;}
/* OS PARADOS E O QUE MAIS CHEGA (Visão Geral): um embaixo do outro até 999px,
   lado a lado acima. Os dois cartões ficam da mesma altura, e o gráfico das
   categorias cresce junto, em vez de deixar um buraco embaixo. */
.grade-geral{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:12px;}
.grade-geral > .card{margin:0;}
@media (min-width:1000px){
  .grade-geral{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}
  .grade-geral #card-tipo .plot{flex:1 1 auto;min-height:220px;}
}
/* O cartão na largura toda: a fila ao longo do período, cujo eixo tem 24
   horas ou 31 dias e precisa da linha inteira para os rótulos não pularem. */
.card-larga{margin-bottom:12px;}
/* OS CARTÕES QUE SÓ UM SETOR TEM (graficos/proprios.js), na mesma grade dos
   outros. `[hidden]` precisa de regra própria: o `display:grid` de `.grid-b`
   ganharia dele, e o TI, que não tem cartão próprio, mostraria uma faixa
   vazia (ver o mesmo caso em 05-entrada.css). O cartão largo — os cancelados
   mês a mês — ocupa a linha inteira, como os largos de fora da grade.

   FAIXA E NÃO GRADE. Na grade, um cartão sozinho na linha — a unidade de
   Compras antes dos cancelados, o "onde" da Manutenção, o terceiro de
   Marketing — ficava com meia largura e um buraco ao lado (visto em
   13/11/2026). Na faixa, cada cartão tem no mínimo 440px e cresce até
   preencher a linha: dois dividem, um sozinho ocupa tudo, e buraco não há. */
.cartoes-proprios{display:flex;flex-wrap:wrap;}
.cartoes-proprios[hidden]{display:none;}
.cartoes-proprios > .card{margin:0;flex:1 1 min(100%, 440px);}
.cartoes-proprios > .card-larga{flex-basis:100%;}
.card{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio-l);
  padding:18px 20px 18px;box-shadow:var(--sombra);display:flex;flex-direction:column;min-width:0;}
.card canvas{max-width:100%;}
/* O fio sob o titulo separa o que o cartao DIZ do que ele MOSTRA. Sem ele o
   subtitulo e o topo do grafico se encostavam, e o olho lia os rotulos do
   eixo como se fossem continuacao da frase. */
.card-head{display:flex;align-items:flex-start;gap:10px;
  padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--linha);}
.card-head .ct{flex:1;min-width:0;}
.card h3{margin:0;font-size:14.5px;font-weight:700;color:var(--tinta);letter-spacing:-.005em;}
.card .csub{margin:3px 0 0;font-size:11px;color:var(--tinta-3);}

/* O TÍTULO É A MENSAGEM (01/10/2026). Quando o cartão tem conclusão
   (`takeaway()` põe a classe `tem-msg`), o nome do gráfico encolhe para
   etiqueta e a conclusão sobe a título. É o "título de ação" do Storytelling
   com Dados: quem só lê os títulos sai da página sabendo o que ela diz.
   As notas que vinham depois de " · " ficam numa linha menor embaixo. */
.card.tem-msg h3{font-size:10.5px;font-weight:700;color:var(--tinta-3);
  text-transform:uppercase;letter-spacing:.06em;line-height:1.3;}
.card.tem-msg .csub{margin-top:6px;font-size:16px;font-weight:600;color:var(--tinta);
  line-height:1.38;letter-spacing:-.005em;text-wrap:pretty;}
.card.tem-msg .csub b{color:var(--azul-tinta);font-weight:700;}
.card .csub .csub-nota{display:block;margin-top:4px;font-size:11px;font-weight:500;
  color:var(--tinta-3);line-height:1.45;letter-spacing:0;}
.card .csub .csub-nota b{color:var(--tinta-2);font-weight:700;}

/* UM VALOR SÓ: o número, o valor e o aviso, no meio do espaço do gráfico.
   `flex:1` para centrar no que sobra quando o cartão vizinho na grade é mais
   alto — sem isso a frase ficaria colada em cima de um vazio. */
.card.um-valor .plot{height:auto;min-height:132px;flex:1;display:flex;
  align-items:center;justify-content:center;}
.umvalor{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;padding:8px;}
.umvalor .uv-n{font-size:36px;font-weight:700;color:var(--tinta);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.umvalor .uv-t{font-size:13px;color:var(--tinta-2);}
.umvalor .uv-t b{color:var(--azul-tinta);}
.umvalor .uv-s{font-size:11px;color:var(--tinta-3);}
/* OS DOIS CAMINHOS DO VALOR ÚNICO: ver os chamados (a ação, em azul) e
   voltar (desfazer o filtro, em contorno). Ver `hbar`. */
.umvalor .uv-acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;}
.umvalor .uv-acoes button{display:inline-flex;align-items:center;gap:5px;font:inherit;
  font-size:12px;font-weight:700;border-radius:8px;padding:7px 13px;cursor:pointer;
  transition:background .14s, border-color .14s;}
.umvalor .uv-ver{border:1px solid var(--azul-borda);background:var(--azul-tint);color:var(--azul-tinta);}
.umvalor .uv-ver:hover{border-color:var(--azul-tinta);background:var(--azul-tint-2);}
.umvalor .uv-voltar{border:1px solid var(--borda-forte);background:var(--controle);color:var(--tinta-2);}
.umvalor .uv-voltar:hover{border-color:var(--azul-tinta);color:var(--azul-tinta);}
.umvalor .uv-acoes button:focus-visible{outline:2px solid var(--foco);outline-offset:2px;}
.card .csub .lnk-voltar svg{vertical-align:-1px;}
/* "ver todas as categorias", no fim da frase do cartão quando ele mostra as
   subcategorias de uma categoria. Botão, e não link: não leva a outro
   endereço, tira um filtro. Ver graficos/categorias.js. */
.card .csub .lnk-voltar{border:none;background:none;padding:0;font:inherit;
  color:var(--azul-tinta);cursor:pointer;font-weight:700;}
.card .csub .lnk-voltar:hover{text-decoration:underline;}
.card-acts{display:flex;gap:3px;flex:none;}
/* Antes eram invisíveis até o hover: quem não passa o mouse não descobre
   que o card faz mais do que mostrar o gráfico. */
/* Os botões do canto do cartão: chips pequenos, com 28px (WCAG 2.5.8 pede
   24) e em caixa normal — CAIXA ALTA em 10px se lê pior, e o rótulo já é
   uma palavra só (decisão 59). */
.icobtn{display:inline-flex;align-items:center;gap:5px;min-height:28px;border:1px solid var(--borda-forte);
  background:var(--controle);color:var(--tinta-2);border-radius:var(--raio-s);padding:0 10px;font-size:12px;
  font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-1);}
.icobtn:hover{background:var(--azul-tint);color:var(--azul-tinta);border-color:var(--azul-tinta);}
.icobtn.on{background:var(--azul-tint);color:var(--azul-tinta);border-color:var(--azul-borda-2);}
.icobtn.btn-vertodos{color:var(--azul-tinta);border-color:var(--azul-borda);background:var(--azul-tint);}
.icobtn.btn-vertodos:hover{border-color:var(--azul-tinta);background:var(--azul-tint-2);}

.plot{position:relative;height:262px;min-width:0;}
.plot.tall{height:330px;}
.plot.short{height:224px;}
.altview{display:none;max-height:330px;overflow:auto;}
.card.showtable .plot{display:none;}
.card.showtable .altview{display:block;}

.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:6px;color:var(--tinta-3);font-size:12.5px;text-align:center;}
.empty .big{font-size:22px;opacity:.35;}

.minitable{width:100%;border-collapse:collapse;font-size:12px;}
.minitable th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--tinta-3);padding:6px 8px;border-bottom:1px solid var(--borda);position:sticky;top:0;background:var(--card);}
.minitable td{padding:6px 8px;border-bottom:1px solid var(--linha);color:var(--tinta-2);}
.minitable td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--tinta);font-weight:600;}

/* ============== LEGENDA ============== */
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px;}
.legend-item{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tinta-2);}
.legend-item .sw{width:10px;height:10px;border-radius:2px;flex:none;}
.legend-item .sw.line{height:2.5px;border-radius:2px;}
/* A legenda dos cartões com comparação (ver `legendaComparacao`) some junto
   com o gráfico quando a tabela é aberta: a tabela tem as colunas nomeadas. */
.leg-cmp{gap:6px 14px;margin:-2px 0 8px;}
.card.showtable .leg-cmp{display:none;}

/* QUE LINHAS O GRÁFICO DE TENDÊNCIA DESENHA, com comparação ligada: as duas
   medidas ou uma só. Mesmo tamanho do botão TABELA ao lado, para o canto do
   cartão continuar sendo uma fileira só. */
.medida{display:inline-flex;border:1px solid var(--borda-forte);border-radius:7px;overflow:hidden;}
.medida[hidden]{display:none;}
.medida button{border:none;background:var(--controle);color:var(--tinta-2);font:inherit;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:4px 8px;cursor:pointer;transition:.14s;}
.medida button + button{border-left:1px solid var(--borda);}
.medida button:hover{background:var(--azul-tint);color:var(--azul-tinta);}
.medida button.on{background:var(--azul-tint);color:var(--azul-tinta);}
.medida button:focus-visible{outline:2px solid var(--foco);outline-offset:-2px;}


/* ── EM QUE ETAPA ESTAVAM, embaixo das colunas (ver `tabelaEtapasHTML`) ──
   Uma tabela alinhada ao gráfico: cada número embaixo da coluna do mês dele,
   o nome da etapa na margem da esquerda. O fundo de cada número é mais
   escuro quanto maior ele é (um tom só); a etapa que mais mexeu vai em azul. */
.fila-etapas{margin-top:6px;border-top:1px solid var(--linha);padding-top:8px;--gut:150px;--dir:0px;--n:1;}
.fila-etapas:empty{display:none;}
.fe-tit{font-size:10.5px;font-weight:700;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.05em;margin:0 0 4px;}
.fe-l{display:grid;grid-template-columns:var(--gut) repeat(var(--n), minmax(0, 1fr)) var(--dir);align-items:center;}
.fe-l + .fe-l{border-top:1px solid var(--linha);}
.fe-l .fe-n{font:inherit;font-size:12px;font-weight:600;color:var(--tinta);text-align:left;background:none;border:0;
  padding:5px 10px 5px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fe-l button.fe-n{cursor:pointer;}
.fe-l button.fe-n:hover{color:var(--azul-tinta);text-decoration:underline;}
.fe-l .fe-c{font:inherit;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tinta);
  margin:2px 1px;padding:4px 0;border:0;border-radius:4px;cursor:pointer;text-align:center;
  background:color-mix(in srgb, var(--c1) calc(var(--a) * 100%), transparent);}
.fe-l .fe-c:hover{outline:1.5px solid var(--c1);}
.fe-l .fe-c.zero{color:var(--tinta-3);font-weight:400;cursor:default;}
.fe-l .fe-c.zero:hover{outline:0;}
.fe-l.destaque .fe-n{color:var(--azul-tinta);}
.fe-nota{font-size:12px;color:var(--tinta-3);padding:2px 0;}
/* Os dois botões que abrem UM detalhe por vez embaixo do gráfico. */
.fe-opcoes{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12px;color:var(--tinta-3);margin-bottom:6px;}
.fe-opcoes button{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12px;cursor:pointer;
  border:1px solid var(--borda-forte);background:var(--card);color:var(--tinta-2);border-radius:999px;padding:4px 11px;}
.fe-opcoes button:hover{color:var(--azul-tinta);border-color:var(--azul-tinta);}
.fe-opcoes button.on{background:var(--azul);border-color:var(--azul);color:#fff;}
.fe-expl{font-size:11.5px;color:var(--tinta-3);margin:2px 0 6px;}
/* As linhas do que aconteceu no mês: contagens, sem o fundo das fotos. */
.fe-l.fe-mov .fe-c{background:none;color:var(--tinta-2);font-weight:600;}
.fe-l.fe-mov .fe-n{font-weight:500;color:var(--tinta-2);}
.fe-tit + .fe-l{border-top:0;}
.fila-etapas .fe-tit:not(:first-child){margin-top:10px;}
@media (max-width:640px){
  .fila-etapas{overflow-x:auto;}
  .fe-l .fe-c{font-size:10px;}
}

/* ── OS PARADOS, POR QUEM ELES ESPERAM (decisão 52) ──
   Uma barra só, dividida pelos grupos da página, e embaixo o número e as
   etapas de cada parte. Cada parte abre a lista dela. */
.quem-corpo{padding:2px 0 2px;}
.qe-barra{display:flex;gap:2px;height:28px;margin:6px 0 10px;}
.qe-seg{border:0;padding:0;cursor:pointer;min-width:6px;}
.qe-seg:first-child{border-radius:5px 0 0 5px;}
.qe-seg:last-child{border-radius:0 5px 5px 0;}
.qe-seg:only-child{border-radius:5px;}
.qe-seg:hover{filter:brightness(1.12);}
.qe-seg:focus-visible{outline:2px solid var(--foco);outline-offset:2px;}
.qe-legs{display:flex;flex-wrap:wrap;gap:4px 2px;}
.qe-l{min-width:150px;text-align:left;background:none;border:0;border-radius:7px;padding:5px 8px 5px 0;
  font:inherit;font-size:13px;color:var(--tinta-2);cursor:pointer;line-height:1.35;}
.qe-l:hover{background:var(--sup-hover);}
.qe-l:disabled{cursor:default;opacity:.7;}
.qe-l:disabled:hover{background:none;}
.qe-l b{font-size:20px;color:var(--tinta);margin-right:3px;letter-spacing:-.01em;}
.qe-l small{display:block;font-size:11.5px;color:var(--tinta-3);margin:2px 0 0 18px;}
.qe-sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:7px;vertical-align:1px;}
.qe-nota{margin-top:12px;padding-top:10px;border-top:1px solid var(--linha);font-size:12.5px;color:var(--tinta-2);line-height:1.5;}
.qe-nota b{color:var(--tinta);}
.qe-ver{font:inherit;font-size:12px;color:var(--azul-tinta);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;margin-left:4px;}
.qe-cmp{font-size:11.5px;color:var(--tinta-3);margin-top:6px;}
.qe-cmp b{color:var(--tinta-2);}
.qe-vazio{font-size:13px;color:var(--tinta-3);padding:8px 0;}
/* Sem grupos: a fila por etapa, em linhas, na ordem do quadro. */
.qe-linhas{display:grid;gap:4px;}
.qe-lin{display:grid;grid-template-columns:minmax(110px,220px) minmax(0,1fr) 44px;align-items:center;gap:10px;
  background:none;border:0;border-radius:6px;font:inherit;font-size:12.5px;text-align:left;cursor:pointer;padding:3px 4px;color:var(--tinta-2);}
.qe-lin:hover{background:var(--sup-hover);}
.qe-lin b{color:var(--tinta);font-variant-numeric:tabular-nums;}
.qe-trilho{height:13px;}
.qe-trilho i{display:block;height:100%;border-radius:0 4px 4px 0;}

/* O botão que liga e desliga uma série (os cancelados do primeiro gráfico). */
/* Ligado é cheio (como o chip de filtro); desligado é só o contorno. Antes
   era riscado e a 55% de opacidade — o texto caía abaixo de 4,5:1. */
.icobtn.alterna[aria-pressed="true"]{background:var(--azul-tint-2);border-color:transparent;color:var(--azul-tinta);}
.icobtn.alterna[aria-pressed="false"]{background:transparent;color:var(--tinta-3);}

/* As seções numeradas e os pontos de atenção em blocos saíram na decisão
   62: cada painel tem o selo "A3 · n", e os pontos viraram o plano 5W2H.
   Ver 17-v3.css. */

/* ══════════════════════════════════════════════════════════════
   A FAIXA DOS MESES (decisão 60) — o topo da Visão Geral

   Um cartão baixo por mês que teve chamado: o nome, a taxa de atendimento e
   as colunas de entraram (cinza) × finalizados (azul) na escala do ano. O
   escolhido fica azul; os outros recuam um pouco, para o olho saber em que
   recorte está a folha. O mês em curso tem a borda picotada — ainda não
   fechou. Rola de lado quando não cabe, em vez de quebrar em duas linhas.
   ══════════════════════════════════════════════════════════════ */
.faixa-meses{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;margin:2px -2px 0;
  scroll-snap-type:x proximity;scrollbar-width:thin;}
.faixa-meses[hidden]{display:none;}
.fm-ano,.fm-mes{flex:1 0 86px;display:flex;flex-direction:column;gap:7px;text-align:left;cursor:pointer;font:inherit;
  color:var(--tinta-2);padding:11px 12px 10px;border:1px solid var(--borda);border-radius:14px;
  background:var(--card);background-image:var(--superficie);box-shadow:var(--elev-1);scroll-snap-align:start;
  transition:transform var(--dur-2) var(--curva), box-shadow var(--dur-2), background-color var(--dur-2),
             border-color var(--dur-2), opacity var(--dur-2);}
.fm-ano{flex:0 0 auto;min-width:98px;justify-content:center;gap:3px;}
.fm-ano b{font-family:var(--fonte-num);font-size:21px;font-weight:700;line-height:1;color:var(--tinta);letter-spacing:-.02em;}
.fm-ano span{font-size:11.5px;color:var(--tinta-3);}
.fm-ano:hover,.fm-mes:hover{transform:translateY(-3px);box-shadow:var(--elev-2);}
.fm-ano:active,.fm-mes:active{transform:none;box-shadow:var(--elev-1);}
.fm-ano[aria-pressed="true"],.fm-mes[aria-pressed="true"]{border-color:var(--azul-tinta);background:var(--azul-tint);
  background-image:none;box-shadow:0 0 0 1px var(--azul-tinta), var(--elev-2);}
.faixa-meses.foco .fm-mes[aria-pressed="false"]{opacity:.6;}
.faixa-meses.foco .fm-mes[aria-pressed="false"]:hover{opacity:1;}
.fm-topo{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:12.5px;font-weight:700;color:var(--tinta-2);}
.fm-topo em{font-style:normal;font-size:10px;font-weight:700;padding:1px 6px;border-radius:6px;white-space:nowrap;
  background:var(--sup-fill);color:var(--tinta-2);}
.fm-mes.pior .fm-topo em{background:var(--alerta-tint);color:var(--alerta-tinta);}
.fm-tx{font-family:var(--fonte-num);font-size:22px;font-weight:700;line-height:1;color:var(--tinta);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;}
.fm-tx small{margin-left:1px;font-size:12px;font-weight:600;color:var(--tinta-3);}
.fm-tx{font-size:26px;}
.fm-pe{font-size:11px;color:var(--tinta-3);font-variant-numeric:tabular-nums;}
.fm-mes.curso{border:1.5px dashed var(--borda-curso);background:var(--card-aberto);background-image:none;box-shadow:none;}
.fm-mes.curso .fm-tx{color:var(--tinta-2);}



/* ──────────────────────────────────────────────────────────────────────
   css/10-tabelas.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   TABELAS
   A tabela principal e a area rolavel que a segura.
   ===================================================================== */

/* ============== TABELA PRINCIPAL ============== */
.tbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:11px;}
.search{position:relative;flex:1;min-width:210px;max-width:340px;}
.search input{width:100%;min-height:36px;border:1px solid var(--borda-forte);border-radius:var(--raio-s);
  background:var(--campo);color:var(--tinta);
  padding:0 11px 0 32px;font-size:12.5px;font-family:inherit;transition:border-color var(--dur-1);}
.search input:hover{border-color:var(--tinta-3);}
.search input:focus{outline:2px solid var(--foco);outline-offset:-1px;border-color:var(--azul-tinta);}
/* Lupa desenhada em SVG: as opções em Unicode para "buscar" são ruins e
   mudam de forma conforme a fonte do sistema — o arquivo tinha duas
   diferentes, e uma delas era o símbolo ⚲ (NEUTER). */
.search .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--tinta-3);pointer-events:none;display:flex;line-height:0;}
/* alinha o desenho com a linha de base do texto ao redor */
.ic{display:inline-block;vertical-align:-.14em;flex:none;}
.badge .ic{vertical-align:-.16em;}
.pgbtn .ic,.sheet-x .ic{vertical-align:-.2em;}
.kpi-val .ic{vertical-align:0;margin-right:2px;}
/* ícone de nova guia colado no link, para o link parecer clicável */
.linkext{display:inline-flex;align-items:center;gap:5px;color:var(--azul-tinta);
  font-weight:700;text-decoration:none;}
.linkext:hover{text-decoration:underline;}
.linkext .ic{opacity:.75;}
.linkext:hover .ic{opacity:1;}
.pager{display:flex;gap:7px;align-items:center;font-size:11.5px;color:var(--tinta-3);margin-left:auto;}
.pager b{color:var(--tinta-2);font-variant-numeric:tabular-nums;}
.pgbtn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;
  border:1px solid var(--borda-forte);background:var(--controle);border-radius:var(--raio-s);
  padding:0 8px;cursor:pointer;font-size:12px;color:var(--tinta-2);}
.pgbtn:hover:not([disabled]){border-color:var(--azul-tinta);color:var(--azul-tinta);}
.pgbtn[disabled]{opacity:.4;cursor:default;}

.tscroll{overflow:auto;max-height:520px;border:1px solid var(--borda);border-radius:9px;}
table.dt{width:100%;border-collapse:collapse;font-size:12px;}
table.dt th{text-align:left;background:var(--sup-poco);color:var(--tinta-2);padding:9px 11px;font-weight:700;
  white-space:nowrap;cursor:pointer;user-select:none;position:sticky;top:0;z-index:5;
  border-bottom:1px solid var(--borda-forte);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;}
table.dt th:hover{color:var(--azul-tinta);background:var(--sup-fill);}
table.dt th .arw{opacity:.85;font-size:9px;margin-left:4px;color:var(--azul-tinta);}
table.dt td{padding:8px 11px;border-bottom:1px solid var(--linha);color:var(--tinta-2);
  white-space:nowrap;max-width:250px;overflow:hidden;text-overflow:ellipsis;}
table.dt tbody tr:hover td{background:var(--sup-hover);}
table.dt td.num{font-variant-numeric:tabular-nums;color:var(--tinta);font-weight:600;}
/* A SITUAÇÃO DO CHAMADO (decisão 59). Vermelho é erro, e "em aberto" não é
   erro: é o estado normal de quem está sendo atendido. Aberto é azul (a
   equipe está nele), finalizado é verde, cancelado e sem desfecho são cinza
   (saíram sem atendimento), reaberto é âmbar (pede olhar). */
.badge{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:0 8px;border-radius:999px;
  font-size:11px;font-weight:700;white-space:nowrap;}
/* O SEMÁFORO DA SITUAÇÃO (decisão 61): em aberto é âmbar (pendente),
   finalizado é verde, cancelado é vermelho, reaberto é azul, sem desfecho é
   cinza — cada um com o ícone dele, para a cor nunca estar sozinha. */
.badge.b-pend{background:color-mix(in srgb, var(--atencao) 16%, transparent);color:var(--atencao);}
.badge.b-ok{background:color-mix(in srgb, var(--bom) 16%, transparent);color:var(--bom);}
.badge.b-canc{background:color-mix(in srgb, var(--ruim) 14%, transparent);color:var(--ruim);}
.badge.b-info{background:var(--azul-tint-2);color:var(--azul-tinta);}
.badge.b-neutro{background:var(--sup-fill);color:var(--tinta-2);}
.badge.b-emp{background:color-mix(in srgb, var(--c6) 16%, transparent);color:var(--c6);}
.badge.b-crit{background:var(--critico-tint);color:var(--critico);}
.badge.b-ok{background:var(--ok-tint);color:var(--ok);}
.badge.b-warn{background:var(--alerta-tint);color:var(--alerta);}
.age{font-size:10.5px;color:var(--tinta-3);}
.age.old{color:var(--critico);font-weight:700;}


/* ──────────────────────────────────────────────────────────────────────
   css/11-estados.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   ESPERA, VAZIO E ALERTA
   O esqueleto de carregamento (blocos do tamanho do que vem, nao uma roda
   girando), a tela vazia e a faixa de alerta operacional.
   ===================================================================== */

/* ============== ESTADOS ============== */
#stage{transition:opacity .18s;}
#stage.busy,#portal.busy{opacity:.45;pointer-events:none;}
#portal{transition:opacity .18s;}

/* ── ESQUELETO DE CARREGAMENTO ──
   Enquanto o recorte novo é desenhado, os VALORES viram blocos cinzas
   pulsando e a ESTRUTURA fica de pé: rótulos, títulos e a moldura dos
   cartões continuam legíveis. É melhor que uma roda no meio da tela por
   dois motivos: a página não pula (cada bloco ocupa o lugar do número que
   vai chegar) e o leitor vê ONDE o dado vai aparecer, em vez de encarar
   um giro sem lugar.

   `color:transparent` em vez de esconder o texto: o bloco ganha a largura
   exata do número que estava ali, sem eu precisar chutar tamanhos. */
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.42}}
.esq{pointer-events:none;}
.esq .kpi-val,.esq .kpi-foot,.esq .kpi-delta,.esq .kpi-cmp,
.esq .bigidea p,.esq .bigidea .bi-txt,.esq .csub,.esq .takeaway,
.esq .pc-n > b,.esq .pc-anel-v b,.esq .pc-frase,.esq .pc-frase b,.esq .ct-n > b,.esq .ct-texto p,.esq .sc-cmp,.esq .cmpfaixa,.esq .sc-frase,.esq .sc-frase b,.esq .sc-var,.esq .sc-sub{
  color:transparent !important;background:var(--sup-fill);border-radius:6px;
  animation:pulsa 1.05s ease-in-out infinite;}
.esq .kpi-val{border-radius:8px;}
/* Os gráficos e as miniaturas somem por trás de um bloco do mesmo tamanho,
   para a altura da página não mudar no meio do carregamento. */
.esq .plot,.esq .pc-graf{
  background:var(--sup-fill);border-radius:8px;
  animation:pulsa 1.05s ease-in-out infinite;}
.esq .plot canvas,.esq .pc-graf svg,.esq .pc-anel svg{visibility:hidden;}
.esq .cmpfaixa *{visibility:hidden;}
/* As tabelas ficam com as linhas em branco, sem sumir: uma tabela que
   desaparece e volta faz a página saltar duas vezes. */
.esq table.dt tbody td,.esq table.rank tbody td{
  color:transparent !important;}
.esq table.dt tbody td *,.esq table.rank tbody td *{visibility:hidden;}
/* A tela de carga deixou de ser uma roda centrada e virou o CONTORNO da
   página que está chegando, então ela ocupa a largura toda. */
.boot{display:block;color:var(--tinta-3);font-size:13px;}
.boot-aviso{margin:0 2px 12px;font-size:12.5px;color:var(--tinta-3);}
/* Os tijolos. Um só `.sk` com a pulsação, e as medidas por modificador —
   assim um bloco novo é uma linha de CSS, não um bloco inteiro. */
.sk{display:block;background:var(--sup-fill);border-radius:6px;
  animation:pulsa 1.05s ease-in-out infinite;}
.sk-tit{height:15px;width:52%;margin-bottom:7px;}
.sk-sub{height:10px;width:74%;margin-bottom:13px;}
.sk-num{height:23px;width:58%;margin-bottom:5px;}
.sk-rot{height:9px;width:84%;}
.sk-spark{height:30px;margin-top:13px;}
.sk-plot{height:230px;margin-top:11px;}
.sk-kpi{height:29px;width:64%;margin:6px 0 9px;}
.sk-linha{height:11px;width:100%;margin-top:6px;}
.sk-botao{height:32px;width:130px;border-radius:8px;}
.skcard{background:var(--card);border:1px solid var(--borda);
  border-radius:var(--raio);padding:14px 15px;}
.skgrid{display:grid;gap:11px;}
.skgrid.setores{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.skgrid.kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px;}
.skgrid.dois{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}
.sknums{display:grid;grid-template-columns:1fr 1fr;gap:9px 11px;}
@media (max-width:999px){ .skgrid.dois{grid-template-columns:1fr;} }
@media (max-width:699px){ .skgrid.dois{grid-template-columns:1fr;} }
@media (max-width:999px){ .skgrid.kpis{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:519px){ .skgrid.kpis{grid-template-columns:1fr;} }
/* Alerta operacional: forte o bastante para ser lido antes dos números,
   não tão forte que pareça o painel quebrado. */
.aviso{background:var(--alerta-tint);border:1px solid var(--alerta-borda);border-left:4px solid var(--alerta);
  border-radius:var(--raio);padding:11px 15px;font-size:12.5px;line-height:1.55;
  color:var(--alerta-tinta);margin-bottom:12px;box-shadow:var(--sombra);}
.aviso b{color:var(--alerta-tinta-forte);}
.aviso.seguinte{margin-top:-4px;}

.errbox{background:var(--critico-tint);border:1px solid var(--critico-borda);color:var(--critico-tinta);
  border-radius:var(--raio);padding:14px 16px;font-size:12.5px;line-height:1.5;}
.errbox b{display:block;margin-bottom:3px;font-size:13px;}
.errbox code{background:var(--critico-tint-2);padding:1px 5px;border-radius:4px;
  font-family:Consolas,"Courier New",monospace;font-size:11.5px;}


/* ──────────────────────────────────────────────────────────────────────
   css/12-folha.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   A FOLHA
   A tela que sobe quando se clica num numero: lista de chamados, ficha de
   um chamado, descricao, linha do tempo e ranking. No celular ela ocupa a
   tela inteira; no desktop e uma janela centrada.
   ===================================================================== */

/* ============== MODAL ============== */

/* ============== FOLHA ==============
   Um modal só, empilhável: cada nível entra na pilha e o cabeçalho mostra
   a trilha inteira, clicável. Voltar, Esc e clique fora saem um nível —
   nunca fecham tudo de surpresa. */
.sheet{display:none;position:fixed;inset:0;z-index:300;}
/* Com a folha aberta, a página de trás não rola (ver `pintarTela`). */
html.folha-aberta,html.folha-aberta body{overflow:hidden;}
.sheet-body{overscroll-behavior:contain;}
.sheet.open{display:block;}
.sheet-back{position:absolute;inset:0;background:var(--veu-forte);
  backdrop-filter:blur(1.5px);animation:fadeIn .16s ease-out;}
.sheet-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1080px,calc(100vw - 36px));
  /* dvh acompanha a barra de endereço do celular, que vh ignora */
  max-height:min(880px,calc(100vh - 44px));max-height:min(880px,calc(100dvh - 44px));
  background:var(--card);border-radius:16px;box-shadow:var(--sombra-folha);
  display:flex;flex-direction:column;overflow:hidden;animation:sheetIn .19s ease-out;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes sheetIn{from{opacity:0;transform:translate(-50%,-46%) scale(.985)}
                   to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* A COR DO SETOR NO CABEÇALHO DA FOLHA, como no cabeçalho da página: a folha
   aberta no painel do Marketing é laranja, a do TI é azul (pedido de
   05/10/2026). O filete de cima é o mesmo da página — a cor do setor virando o
   ouro do selo —, e o fundo é a cor do setor bem clara, sumindo no cartão. */
.sheet-head{padding:14px 18px 12px;border-bottom:1px solid var(--borda);flex:none;
  position:relative;background:linear-gradient(180deg,rgb(var(--pag-rgb) / .16),var(--card) 85%);}
.trilha{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:11px;
  color:var(--tinta-3);margin-bottom:8px;}
.trilha:empty{display:none;}
.trilha button{border:none;background:none;padding:1px 3px;font:inherit;font-size:11px;
  color:var(--azul-tinta);cursor:pointer;border-radius:4px;}
.trilha button:hover{background:var(--sup-fill);text-decoration:underline;}
.trilha .cur{color:var(--tinta-2);font-weight:700;}
.trilha .sep{opacity:.5;}
.sheet-titrow{display:flex;align-items:flex-start;gap:11px;}
.sheet-ct{flex:1;min-width:0;}
.sheet-ct h4{margin:0;font-size:16px;font-weight:700;color:var(--tinta);letter-spacing:-.01em;}
.sheet-sub{margin:4px 0 0;font-size:12px;color:var(--tinta-3);line-height:1.5;}
.sheet-sub:empty{display:none;}
.sheet-sub b{color:var(--tinta-2);}
.sheet-voltar{flex:none;padding:5px 10px;font-size:11.5px;}
.sheet-x{flex:none;border:1px solid transparent;background:none;color:var(--tinta-3);
  font-size:15px;line-height:1;cursor:pointer;border-radius:8px;padding:5px 8px;}
.sheet-x:hover{background:var(--sup-fill);color:var(--tinta);}
.sheet-body{padding:14px 18px 16px;overflow:auto;flex:1;min-height:0;background:var(--sup-poco);}
.sheet-foot{padding:11px 18px;border-top:1px solid var(--borda);flex:none;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--sup-poco);}
.sheet-foot:empty{display:none;}
.sheet-foot .dir{margin-left:auto;display:flex;gap:8px;align-items:center;}
.sheet-body .tscroll{background:var(--card);}
.sheet-body .segm{background:var(--card);}
/* :not(.primary) e essencial — sem isso este fundo branco vence o de
   .btn.primary (mesma especificidade, vem depois) e o botao fica com texto
   branco sobre fundo branco. Aconteceu: "Abrir no Runrun.it" e "Filtrar o
   painel por este" apareciam vazios. */
.sheet-foot .btn:not(.primary){border-color:var(--borda-forte);background:var(--controle);}
.sheet-foot .btn:not(.primary):hover{border-color:var(--azul-tinta);background:var(--azul-tint);}

/* nota explicativa: é onde a folha diz o que ela está contando */
.nota{background:var(--ouro-tint);border:1px solid var(--ouro-borda);border-radius:9px;
  padding:9px 12px;font-size:11.5px;color:var(--tinta-2);line-height:1.55;margin-bottom:12px;}
.nota b{color:var(--tinta);}

/* alternador de lados (entraram / saíram) */
.segm{display:inline-flex;border:1px solid var(--borda-forte);border-radius:9px;
  overflow:hidden;margin-bottom:12px;}
.segm button{border:none;background:var(--controle);color:var(--tinta-2);font:inherit;
  font-size:12px;font-weight:600;padding:7px 14px;cursor:pointer;}
.segm button + button{border-left:1px solid var(--borda);}
.segm button:hover{background:var(--sup-fill);}
.segm button.on{background:var(--azul);color:#fff;}

/* tabela de ranking com barra na própria célula */
table.rank{width:100%;border-collapse:collapse;font-size:12.5px;}
table.rank th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--tinta-3);padding:7px 9px;border-bottom:1px solid var(--borda-forte);
  position:sticky;top:0;background:var(--sup-poco);z-index:2;cursor:pointer;user-select:none;}
table.rank th:hover{color:var(--azul-tinta);}
table.rank th.n{text-align:right;}
table.rank td{padding:0;border-bottom:1px solid var(--linha);color:var(--tinta-2);}
table.rank td .cel{padding:8px 9px;}
table.rank td.n{text-align:right;font-variant-numeric:tabular-nums;color:var(--tinta);font-weight:700;}
table.rank tbody tr{cursor:pointer;}
table.rank tbody tr:hover td{background:var(--sup-hover);}
table.rank .pos{color:var(--tinta-3);font-variant-numeric:tabular-nums;font-size:11px;}
table.rank .barcel{position:relative;min-width:120px;}
table.rank .bar{position:absolute;left:9px;top:50%;transform:translateY(-50%);height:9px;
  border-radius:3px;background:var(--neutro-claro);}
table.rank tbody tr:first-child .bar{background:var(--c1);}
table.rank .filtrar{border:1px solid var(--borda-forte);background:var(--controle);
  color:var(--tinta-2);font:inherit;font-size:10.5px;font-weight:700;padding:3px 8px;
  border-radius:6px;cursor:pointer;white-space:nowrap;}
table.rank .filtrar:hover{border-color:var(--azul-tinta);color:var(--azul-tinta);}

/* ficha do chamado */
/* Blocos soltos, não grade: com 11 campos a grade deixava células vazias
   cinzas na última linha, e o olho lia isso como dado faltando. */
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:10px;}
.ficha .campo{background:var(--card);border:1px solid var(--borda);border-radius:11px;
  padding:11px 14px;min-width:0;box-shadow:var(--sombra-baixa);}
.ficha .rot{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-3);
  font-weight:700;margin-bottom:4px;}
.ficha .val{font-size:13px;color:var(--tinta);line-height:1.45;word-break:break-word;}
.ficha .val.mut{color:var(--tinta-3);}
.ficha .val small{display:block;font-size:11px;color:var(--tinta-3);margin-top:2px;}
.assunto{background:var(--card);border:1px solid var(--borda);border-radius:11px;
  padding:12px 14px;margin-bottom:12px;box-shadow:var(--sombra-baixa);}
.assunto .rot{font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tinta-3);font-weight:700;margin-bottom:5px;}
.assunto .txt{font-size:14px;color:var(--tinta);line-height:1.5;word-break:break-word;}

/* descrição: o formulário de abertura, desmontado em campos */
.descr{background:var(--card);border:1px solid var(--borda);border-radius:11px;
  padding:4px 0;margin-bottom:12px;box-shadow:var(--sombra-baixa);}
.descr .cab{display:flex;align-items:baseline;gap:8px;padding:9px 14px 7px;
  border-bottom:1px solid var(--borda);}
.descr .cab .rot{font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tinta-3);font-weight:700;}
.descr .cab .obs{font-size:10.5px;color:var(--tinta-3);}
.descr .par{display:grid;grid-template-columns:148px 1fr;gap:10px;
  padding:9px 14px;border-bottom:1px solid var(--linha);}
.descr .par:last-child{border-bottom:none;}
.descr .par .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--tinta-3);font-weight:700;line-height:1.5;}
.descr .par .v{font-size:13px;color:var(--tinta);line-height:1.55;
  word-break:break-word;white-space:pre-wrap;}
.descr .livre{padding:10px 14px;font-size:13px;color:var(--tinta);line-height:1.6;
  white-space:pre-wrap;word-break:break-word;}
.descr .esperando{padding:12px 14px;font-size:12px;color:var(--tinta-3);}
/* Esqueleto: já mostra a forma do que vem, então a espera não é uma caixa
   vazia — é o próprio conteúdo se anunciando. */
.esqueleto{padding:4px 14px 12px;}
.esqueleto .par{display:grid;grid-template-columns:148px 1fr;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--linha);}
.esqueleto .par:last-child{border-bottom:none;}
.barra{height:10px;border-radius:5px;
  background:linear-gradient(90deg,var(--esq-1) 8%,var(--esq-2) 22%,var(--esq-1) 36%);
  background-size:300% 100%;animation:brilho 1.4s linear infinite;}
.barra.v{height:12px;}
@keyframes brilho{from{background-position:150% 0;} to{background-position:-150% 0;}}
@media (prefers-reduced-motion: reduce){
  .barra{animation:pulsa 1.6s ease-in-out infinite;background:var(--esq-3);}
  @keyframes pulsa{0%,100%{opacity:1;} 50%{opacity:.55;}}
}
@media (max-width:640px){ .descr .par{grid-template-columns:1fr;gap:2px;} }

/* linha do tempo do chamado */
.linhat{display:flex;align-items:center;gap:0;margin:14px 0 4px;}
.linhat .no{display:flex;flex-direction:column;gap:3px;flex:none;text-align:center;}
.linhat .no .pt{width:11px;height:11px;border-radius:50%;background:var(--c1);margin:0 auto;}
.linhat .no.fim .pt{background:var(--ok);}
.linhat .no.fim.canc .pt{background:var(--alerta);}
.linhat .no.aberto .pt{background:var(--card);border:2.5px solid var(--c1);}
.linhat .no .qd{font-size:10.5px;color:var(--tinta-3);white-space:nowrap;}
.linhat .no .qd b{color:var(--tinta-2);display:block;font-size:11.5px;}
.linhat .tr{flex:1;height:2px;background:var(--borda-forte);margin:0 8px;position:relative;top:-8px;}
.linhat .tr .dur{position:absolute;left:50%;top:-9px;transform:translateX(-50%);
  background:var(--card);padding:0 7px;font-size:11px;color:var(--tinta-2);font-weight:700;
  white-space:nowrap;}

/* O CAMINHO DO CHAMADO (ver `caminhoDoChamado`): a frase, a barra do tempo
   dividida pelas etapas, e uma linha por passagem. A cor de cada etapa é a
   mesma na barra e no ponto da linha, e o nome está sempre escrito — a cor
   nunca está sozinha. */
.caminho{margin:14px 0 6px;padding:12px 14px 6px;border:1px solid var(--borda);border-radius:10px;
  background:var(--sup-fill);}
.cam-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:10px;}
.caminho .rot{font-size:10.5px;font-weight:700;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.05em;}
.cam-frase{font-size:13px;color:var(--tinta-2);}
.cam-frase b{color:var(--tinta);}
.caminho .reab{color:var(--tinta-2);font-weight:700;font-style:normal;}
.cam-tab .reab{font-size:10.5px;padding:1px 6px;border-radius:999px;background:var(--card);
  border:1px solid var(--borda-forte);margin-left:4px;}
.cam-barra{display:flex;align-items:center;gap:2px;height:12px;margin:0 0 8px;}
.cam-barra i{display:block;height:100%;min-width:3px;border-radius:3px;}
.cam-barra b{flex:none;width:14px;height:14px;border-radius:50%;margin-left:3px;background:var(--tinta);color:var(--card);
  display:inline-flex;align-items:center;justify-content:center;}
.cam-barra b.canc{background:var(--neutro);}
.cam-barra b.agora{background:var(--card);border:2.5px solid var(--c1);box-sizing:border-box;}
/* A tabela das etapas, atrás de um clique. */
.cam-det summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--azul-tinta);padding:2px 0 6px;
  list-style:none;display:inline-flex;align-items:center;gap:6px;}
.cam-det summary::-webkit-details-marker{display:none;}
.cam-det summary::before{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s;}
.cam-det[open] summary::before{transform:rotate(45deg);}
.cam-det summary:hover{text-decoration:underline;}
.cam-tab{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px;font-variant-numeric:tabular-nums;}
.cam-tab th{font-size:10px;font-weight:700;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.04em;
  text-align:left;padding:4px 8px 5px 0;border-bottom:1px solid var(--linha);}
.cam-tab th:nth-child(1){width:38%;}
.cam-tab th:nth-child(2),.cam-tab th:nth-child(3){width:22%;}
.cam-tab td{padding:6px 8px 6px 0;border-top:1px solid var(--linha);color:var(--tinta-2);vertical-align:middle;}
.cam-tab tr:first-child td{border-top:0;}
.cam-tab .du{text-align:right;padding-right:0;white-space:nowrap;}
.cam-tab td.du{font-weight:700;color:var(--tinta);}
.cam-tab td.et{font-weight:700;color:var(--tinta);}
.cam-tab td.et span{vertical-align:middle;}
.cam-tab .pt{display:inline-flex;align-items:center;justify-content:center;width:10px;height:10px;
  border-radius:3px;margin-right:8px;vertical-align:middle;}
.cam-tab .pt.fim{width:12px;height:12px;border-radius:50%;background:var(--tinta);color:var(--card);}
.cam-tab .pt.fim.canc{background:var(--neutro);}
.cam-tab .mut{color:var(--tinta-3);}
.cam-tab .agora{color:var(--c1);}
.cam-tab tr.atual td.du{color:var(--c1);}
@media (max-width:640px){
  .cam-tab th:nth-child(1){width:44%;}
  .cam-tab th:nth-child(3), .cam-tab td:nth-child(3){display:none;}
}

/* tabela de chamados dentro da folha */
.lista-vazia{padding:34px 10px;text-align:center;color:var(--tinta-3);font-size:12.5px;}
table.dt td .lnk,table.rank .lnk{border:none;background:none;padding:0;font:inherit;
  color:var(--azul-tinta);cursor:pointer;font-weight:700;font-variant-numeric:tabular-nums;}
table.dt td .lnk:hover,table.rank .lnk:hover{text-decoration:underline;}
table.dt tbody tr.clic{cursor:pointer;}
/* Seta no fim da linha no hover: diz que a linha leva a algum lugar. */
table.dt tbody tr.clic td:last-child{position:relative;padding-right:22px;}
table.dt tbody tr.clic td:last-child::after{content:"\203A";position:absolute;right:9px;
  top:50%;transform:translateY(-50%);color:var(--azul-tinta);font-weight:700;opacity:0;transition:.14s;}
table.dt tbody tr.clic:hover td:last-child::after{opacity:.85;}
table.rank tbody tr:hover .bar{background:var(--azul-claro);}

.footer{text-align:center;font-size:11px;color:var(--tinta-3);margin-top:24px;
  padding-top:15px;line-height:1.6;position:relative;}
/* Um fio neutro, e não o degradê dourado (decisão 59): o rodapé se separa do
   conteúdo sem enfeite. */
.footer::before{content:"";position:absolute;top:0;left:26%;right:26%;height:1px;background:var(--borda);}

/* ── A TAXA MÊS A MÊS, no topo da folha da taxa (ver `taxaMesAMes`) ──
   Uma linha por mês: o nome, a barra de 0 a 100%, a taxa, os finalizados e
   os que ficaram na fila. O pior mês em azul; o mês em curso, apagado. */
.tx-meses{margin:0 0 14px;padding:12px 14px;border:1px solid var(--borda);border-radius:10px;background:var(--sup-fill);}
.tx-expl{font-size:12px;color:var(--tinta-2);margin-bottom:8px;line-height:1.45;}
.tx-expl b{color:var(--tinta);}
.tx-l{display:grid;grid-template-columns:110px minmax(80px, 1fr) 58px 86px 100px;align-items:center;gap:10px;
  width:100%;padding:5px 6px;border:0;border-radius:6px;background:none;font:inherit;font-size:12px;
  color:var(--tinta-2);text-align:left;font-variant-numeric:tabular-nums;}
button.tx-l{cursor:pointer;}
button.tx-l:hover{background:var(--card);}
.tx-l.tx-cab{font-size:10.5px;font-weight:700;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.04em;}
.tx-l .m{font-weight:600;color:var(--tinta);}
.tx-l .m i{font-style:normal;font-weight:400;font-size:10.5px;color:var(--tinta-3);}
.tx-l .bx{display:block;height:9px;border-radius:5px;background:var(--card);overflow:hidden;}
.tx-l .bx i{display:block;height:100%;border-radius:5px;background:var(--neutro);}
.tx-l .p{font-weight:700;color:var(--tinta);text-align:right;}
.tx-l .n{text-align:right;}
.tx-l.pior .bx i{background:var(--c1);}
.tx-l.pior .p, .tx-l.pior .m{color:var(--azul-tinta);}
.tx-l.curso{opacity:.6;}
.tx-pe{margin-top:8px;font-size:12px;color:var(--tinta-2);}
@media (max-width:640px){
  .tx-l{grid-template-columns:70px 1fr 50px 50px;}
  .tx-l > :nth-child(5){display:none;}
}

/* A situação de hoje, embaixo da situação do instante da lista. */
.sit-hoje{display:block;margin-top:2px;font-size:10.5px;color:var(--tinta-3);white-space:nowrap;}

/* O mês escolhido na folha da taxa, e a etiqueta do filtro em cima das abas. */
.tx-l.sel{background:var(--azul-tint);}
.filtro-folha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  margin:0 0 10px;padding:8px 12px;border-radius:8px;background:var(--sup-fill);font-size:12.5px;color:var(--tinta-2);}
.filtro-folha b{color:var(--tinta);}
.filtro-folha button{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12px;cursor:pointer;
  border:1px solid var(--borda-forte);background:var(--card);color:var(--azul-tinta);border-radius:999px;padding:3px 10px;}
.lado-html{margin-top:4px;}


/* ──────────────────────────────────────────────────────────────────────
   css/13-acoes.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   A COR DE CADA ACAO
   Papel, nao enfeite: o que RETIRA e vermelho, o que LEVA PARA FORA e verde,
   o que NAVEGA e azul. Vem depois de todo mundo de proposito - e a ultima
   palavra sobre a cor de um controle. Inclui o anel de foco, igual em tudo.
   ===================================================================== */

/* ══════════════════════════════════════════════════════════════
   COR DE CONTROLE — papel, não enfeite
     azul     age e navega   (abrir, filtrar, ordenar, sincronizar, link)
     vermelho retira         (fechar, remover filtro, limpar tudo)
     verde    leva para fora (baixar CSV) e confirma (já sincronizado)
     cinza    é o resto
   Os tons são os mesmos tokens de status usados nos dados. Isso não
   confunde porque controle e dado nunca dividem o mesmo espaço: a etiqueta
   verde de "Finalizado" vive dentro da célula da tabela, o botão verde vive
   no cabeçalho do cartão. Nenhuma dessas cores entra em gráfico.
   ══════════════════════════════════════════════════════════════ */

/* — retira — */
.sheet-x{color:var(--critico);}
.sheet-x:hover{background:var(--critico-tint);color:var(--critico-tinta);}
/* sem opacidade: a .62 o vermelho virava rosa claro e o contraste real
   caia para ~2,4:1 — o botao de remover tem de ser legivel */
.chip button{color:var(--critico);opacity:1;}
.chip button:hover{background:var(--critico-tint-2);opacity:1;color:var(--critico-tinta);}
.btn.limpar{color:var(--critico);border-color:transparent;background:transparent;}
.btn.limpar:hover{background:var(--critico-tint);border-color:var(--critico-borda);color:var(--critico-tinta);}

/* — leva para fora — */
.icobtn.baixar{color:var(--ok);border-color:var(--ok-borda);background:var(--ok-tint-1);}
.icobtn.baixar:hover{border-color:var(--ok);background:var(--ok-tint);color:var(--ok-tinta);}
.btn.baixar{color:var(--ok);border-color:var(--ok-borda);background:var(--ok-tint-1);}
.btn.baixar:hover{border-color:var(--ok);background:var(--ok-tint);color:var(--ok-tinta);}
.sheet-foot .btn.baixar:not(.primary){background:var(--ok-tint-1);border-color:var(--ok-borda);}
.sheet-foot .btn.baixar:not(.primary):hover{background:var(--ok-tint);border-color:var(--ok);}

/* — confirma: a sincronização travada não é um botão "morto", está em dia — */

/* — navega — */
.sheet-voltar{color:var(--azul-tinta);}
.sheet-voltar:hover{color:var(--azul-tinta);border-color:var(--azul-tinta);background:var(--azul-tint);}

/* Anel de foco igual em tudo que se pode acionar: quem navega pelo teclado
   precisa ver onde está, e cada controle tinha o seu (ou nenhum). */
button:focus-visible,a:focus-visible,input:focus-visible,
select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--foco);outline-offset:2px;}
table.dt th:focus-visible,table.rank th:focus-visible{outline-offset:-2px;}


/* ══════════════════════════════════════════════════════════════
   O RELEVO — cartões que sobem da página, botões que se apertam
   (decisão 55)

   Vem aqui, depois de todos os componentes, porque é transversal: o mesmo
   relevo para o cartão de gráfico, o número grande, a frase do topo e o
   cabeçalho; o mesmo para todo botão. Os tokens estão em 01-tokens.css, um
   jogo para cada tema.

   TRÊS ALTURAS, e só três: a página (o fundo, plano), o cartão (elev-1) e o
   que está sob o cursor (elev-2). Mais que isso e o olho não sabe mais o
   que está na frente.
   ══════════════════════════════════════════════════════════════ */
.header,.card,.kpi,.cmpfaixa{
  background-image:var(--superficie);box-shadow:var(--elev-1);}
.kpi.clic:hover,.kpi.clic:focus-visible{box-shadow:var(--elev-2);transform:translateY(-2px);}
.kpi.clic:active{transform:translateY(0);box-shadow:var(--elev-1);}

/* OS BOTÕES TÊM CORPO: degradê de luz, brilho na borda de cima, uma sombra
   curta. Sob o cursor sobem um pixel; apertados, afundam. Os de estado
   ligado (azul) ganham o mesmo relevo por cima da cor deles. */
.btn,.icobtn,.ms-btn,.pgbtn,.cmpchip,.preset,.medida,.fe-opcoes button,.filtro-folha button,.voltasetor{
  background-image:var(--relevo-controle);box-shadow:var(--sombra-controle);
  transition:transform .12s, box-shadow .12s, background-color .14s, border-color .14s, color .14s;}
.medida button{background-image:var(--relevo-controle);}
.btn.ghost{background-image:none;box-shadow:none;}
.btn:hover,.icobtn:hover,.ms-btn:hover,.pgbtn:hover:not([disabled]),.cmpchip:hover,.preset:hover,
.fe-opcoes button:hover,.filtro-folha button:hover,.voltasetor:hover{
  box-shadow:var(--sombra-controle-alta);transform:translateY(-1px);}
.btn:active,.icobtn:active,.ms-btn:active,.pgbtn:active:not([disabled]),.cmpchip:active,.preset:active,
.fe-opcoes button:active,.filtro-folha button:active,.voltasetor:active,.medida button:active{
  box-shadow:var(--afundado);transform:translateY(0);}
/* LIGADO É CHEIO (decisão 59), como nos chips do Material 3: o filtro com
   valor e o atalho escolhido ganham a cor de fundo, e não mais a sombra para
   dentro — afundado num tema escuro quase não se via. */
.ms-btn.has,.preset.active,.icobtn.on,.medida button.on{box-shadow:none;background-image:none;transform:none;}

/* AS ABAS VIRAM UM TRILHO com a aba da vez em relevo, por cima dele: o
   trilho é fundo (afundado), a aba escolhida é cartão. Antes era um
   sublinhado, e a aba ativa não se destacava do resto da página. */
.tabs{display:inline-flex;max-width:100%;gap:3px;padding:4px;border:1px solid var(--borda);
  border-radius:11px;background:var(--sup-poco);box-shadow:var(--afundado);margin-bottom:14px;}
.tab-btn{border:0;border-radius:8px;margin:0;padding:8px 16px;min-height:36px;
  transition:background-color var(--dur-2) var(--curva), color var(--dur-2), box-shadow var(--dur-2);}
.tab-btn:hover{background:var(--sup-hover);}
.tab-btn.active{background:var(--card);background-image:var(--superficie);color:var(--azul-tinta);
  box-shadow:var(--elev-1);border-bottom-color:transparent;}

/* ══════════════════════════════════════════════════════════════
   OS COMPONENTES (decisão 58) — botão cheio e chip de filtro

   Do Material 3, com as cores do Anglo. Um componente, um desenho, em toda
   tela: quem aprendeu o chip do ano reconhece o chip em qualquer lugar (lei
   de Jakob; consistência, a 4ª heurística de Nielsen).

   BOTÃO CHEIO   a ação principal da tela, e só ela. Pílula de 40px de
                 altura (alvo folgado: WCAG 2.5.8 pede 24). Sobre a faixa
                 azul, invertido: branco com letra azul.
   CHIP DE FILTRO escolha entre poucas opções que se veem todas (o ano).
                 32px, canto de 8; o escolhido é cheio e leva o ✓ — a escolha
                 não depende só de cor (WCAG 1.4.1).
   ══════════════════════════════════════════════════════════════ */
.btn-cheio{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px 0 24px;border:0;
  border-radius:999px;font:inherit;font-size:var(--t-titulo);font-weight:700;letter-spacing:.01em;white-space:nowrap;
  cursor:pointer;background:var(--azul);color:#fff;box-shadow:var(--elev-botao);
  transition:background-color .16s, box-shadow .16s;}
.btn-cheio:hover{background:var(--azul-hover);box-shadow:var(--elev-botao-alta);}
.btn-cheio:active{box-shadow:none;}
.btn-cheio.inverso{background:var(--destaque-tinta);color:var(--destaque);}
.btn-cheio.inverso:hover{background:var(--inverso-hover);}

.chip-filtro{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;
  border:1px solid var(--borda-forte);border-radius:var(--raio-s);font:inherit;font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;cursor:pointer;background:transparent;color:var(--tinta-2);
  transition:background-color .16s, border-color .16s, color .16s;}
.chip-filtro:hover{background:var(--sup-hover);color:var(--tinta);}
.chip-filtro.on{padding-left:8px;border-color:transparent;background:var(--azul-tint-2);color:var(--azul-tinta);}

/* O número grande sob o cursor: o cartão sobe e o relevo continua (o fundo
   chapado de antes apagava a superfície). */
.kpi.clic:hover,.kpi.clic:focus-visible{background-color:var(--card);background-image:var(--superficie);}
.kpi-ic{transition:transform .2s cubic-bezier(.2,.7,.2,1);}
.kpi.clic:hover .kpi-ic{transform:scale(1.06);}

/* O MOVIMENTO. Ao abrir uma tela (os meses, o painel de um período, os
   setores), os blocos sobem e aparecem em sequência, na ordem da folha — o
   olho é levado de cima para baixo. A ordem vem do JS (`--i`, ver
   `animarEntrada`); a classe `anima` só existe durante a entrada, para
   que o relevo sob o cursor volte a valer logo depois. As barras dos meses
   crescem do zero, como o número que conta até o valor. */
@keyframes surge{from{opacity:0;transform:translateY(12px) scale(.985);}to{opacity:1;transform:none;}}
@keyframes cresce{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes cresceY{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@keyframes aparece{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.anima .fm-ano,.anima .fm-mes,.anima .kpi,.anima .card{
  animation:surge .52s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i, 0) * 45ms);}
/* Trocar de aba é trocar de folha: um esmaecer curto, sem a sequência. */
.tab-panel.active{animation:aparece .28s ease-out;}

@media (prefers-reduced-motion: reduce){
  .anima *,.tab-panel.active{animation:none !important;}
  .fm-mes,.fm-ano,.kpi,.btn-cheio,.chip-filtro,.kpi-ic{transition:none !important;}
  .fm-mes:hover,.fm-ano:hover,.kpi.clic:hover{transform:none !important;}
}

/* ══════════════════════════════════════════════════════════════
   MENOS MOVIMENTO, EM TUDO (decisão 59 · WCAG 2.3.3)

   A rede de segurança: quem pediu ao sistema menos movimento não vê
   animação nem transição em lugar nenhum — inclusive nas que ainda vierem.
   As regras de cada componente continuam valendo; esta só as encurta a zero.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    animation-delay:0s !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}


/* ──────────────────────────────────────────────────────────────────────
   css/14-responsivo.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   LARGURAS
   Onde o desenho muda de forma. A ordem e do maior para o menor, e cada
   quebra existe por um aparelho real: tablet, Fold aberto, celular em pe,
   celular deitado e toque sem mouse.
   ===================================================================== */

/* ══════════════════════════════════════════════════════════════
   RESPONSIVO
   As faixas seguem o que a tabela precisa, não nomes de aparelho:
     < 560   celular em pé, e a tela externa do Fold fechado (~344px)
     560-899 celular grande, Flip aberto, celular deitado
     900-1199 tablet em pé, Fold ABERTO (~717px) e notebook pequeno
     >= 1200 desktop
   As colunas .c560 / .c900 / .c1200 aparecem a partir da largura do nome.
   Nada é perdido ao esconder coluna: um toque na linha abre a ficha com
   todos os campos.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1199px){ .c1200{display:none;} }
@media (max-width:899px){  .c900{display:none;} }
@media (max-width:559px){  .c560{display:none;} }

@media (max-width:1199px){
  /* AS DUAS FORMAS DA FILEIRA, SEMPRE JUNTAS. `.kpi-row.sete` tem duas
     classes e vence `.kpi-row` sozinha mesmo dentro de media query — então
     desde que o quarto cartão passou a sair da fileira (v63), escolher um
     período no celular deixava as colunas do desktop, de 65px, com linhas de
     140px transbordando por cima do cartão vizinho. Não é a media query que
     "não pegou": é especificidade, e o conserto é nomear as duas. */
  .kpi-row,.kpi-row.sete{grid-template-columns:repeat(3,minmax(0,1fr));}
  .header .mascote{display:none;}
}

/* DUAS COLUNAS ATÉ O TABLET DEITADO (decisão 53). Eram uma só abaixo de
   1200px, e um notebook de 1024 ou um tablet deitado via a aba Detalhes como
   celular. Uma coluna só abaixo de 900: tablet em pé, dobrável aberto,
   celular. */
@media (max-width:899px){
  .grid-a,.grid-b{grid-template-columns:minmax(0,1fr);}
}

/* Fold aberto e tablet em pé: 3 KPIs cabem, 2 desperdiçariam a tela. */
@media (max-width:899px){
  .wrap{padding:14px 15px 44px;}
  .plot{height:238px;}
  .plot.tall{height:290px;}
  .ficha{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
}

@media (max-width:699px){
  .kpi-row,.kpi-row.sete{grid-template-columns:repeat(2,minmax(0,1fr));}
  .header{flex-wrap:wrap;gap:12px;}
  .header .titles{flex:1 1 100%;order:2;}
  .brand{order:1;}
  .sync{align-items:stretch;width:100%;order:3;}
  .sync-line,.sync-hint{text-align:left;}
  .presets{margin-left:0;width:100%;flex-wrap:wrap;}
  /* a barra inteira fica atrás de um botão; aberta, cada filtro ocupa a
     linha toda, que é o que dá alvo de toque decente */
  .fmob{display:flex;width:100%;justify-content:space-between;align-items:center;
    min-height:42px;font-size:13px;}
  .filterbar.fechada .filter-row{display:none;}
  .filterbar:not(.fechada) .fmob{margin-bottom:9px;}
  .filter-row .ms,.filter-row .ms.ms-per{flex:1 1 100%;}
  .ms-btn{width:100%;}
  /* o painel passa a se posicionar pela barra de filtros, não pelo botão:
     num celular, um painel de 262px ancorado num botão à direita saía da tela */
  .ms{position:static;}
  .filterbar{position:relative;}
  .ms-panel,.ms-per .ms-panel{left:8px;right:8px;width:auto;max-width:none;}

  /* NO CELULAR a mesma janela vem de BAIXO, ancorada onde o dedo está, e
     ocupa a largura toda — no desktop ela é centrada (regra base). */
  .ms-per .ms-panel{left:0;right:0;bottom:0;top:auto;transform:none;
    width:auto;max-width:none;max-height:88vh;max-height:88dvh;
    border-radius:14px 14px 0 0;border-left:none;border-right:none;
    border-bottom:none;}
  /* A barrinha do topo é a dica de "isto vem de baixo, arraste ou feche". */
  .ms-per .ms-sheet-head::before{content:"";position:absolute;top:6px;left:50%;
    transform:translateX(-50%);width:36px;height:4px;border-radius:2px;
    background:var(--borda-forte);}
  .ms-per .ms-sheet-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom));}
  /* Alvos de dedo no calendário: 34px era o desenho de mouse. */
  .ms-per .caldia,.ms-per .calwk{min-height:40px;}
  .ms-per .mescell{min-height:52px;}
  .ms-per .anocell{min-height:52px;}
  /* O seletor de linhas da tendência e o botão TABELA não cabem ao lado do
     título num celular: o canto do cartão desce para baixo do título. */
  .card-head:has(.medida:not([hidden])){flex-wrap:wrap;}
  .card-head:has(.medida:not([hidden])) .ct{flex:1 1 100%;}
}

@media (max-width:559px){
  .wrap{padding:11px 10px 34px;}
  .kpi{min-height:92px;padding:11px 12px 10px;}
  .kpi-val{font-size:25px;}
  .kpi-val.sm{font-size:21px;}
  .card{padding:12px 12px 13px;}
  .plot{height:216px;}
  .plot.tall{height:262px;}
  .header h1{font-size:17px;}
  .header .logo{height:38px;}
  .header .selo{height:28px;}
  .tab-btn{padding:10px 12px;font-size:12.5px;}
  .bigidea{padding:12px 14px;}
  .bigidea p,.bigidea .bi-txt{font-size:14px;}
  .card.tem-msg .csub{font-size:13.5px;}
  table.dt td{max-width:150px;}
  .tscroll{max-height:none;}
  .sheet-body{padding:12px 12px 14px;}
  /* a folha vira tela cheia: modal flutuante em 360px é só moldura */
  .sheet-box{left:0;top:0;transform:none;width:100vw;max-width:none;
    height:100vh;height:100dvh;max-height:none;border-radius:0;animation:none;}
  .sheet-head{padding:12px 14px 10px;}
  .sheet-foot{padding:10px 14px;}
  .search{max-width:none;}
  .mesgrid{grid-template-columns:repeat(3,minmax(0,1fr));}
  /* so o icone: o titulo/aria-label continua dizendo o estado */
  .btn.tema .rot{display:none;}
  .btn.tema{padding:8px 9px;}
}

/* Telas baixas: Flip aberto na horizontal, celular deitado, tela externa
   do Fold. O gráfico não pode ocupar a tela toda. */
@media (max-height:560px){
  .plot{height:190px;}
  .plot.tall{height:210px;}
  .plot.short{height:170px;}
  .ms-panel{max-height:70vh;max-height:70dvh;overflow-y:auto;}
  .ms-per .ms-panel{max-height:70vh;max-height:70dvh;}
  .sheet-box{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);}
}

/* ── TOQUE ──
   Sem mouse não existe hover, então tudo que só aparecia no hover teria
   ficado invisível para sempre. E o alvo precisa caber num dedo. */
@media (hover:none){
  .kpi .lupa{opacity:.72;}
  table.dt tbody tr.clic td:last-child::after{opacity:.5;}
  table.rank .bar{background:var(--neutro-claro);}
  .ext,.linkext .ic{opacity:.9;}
}
@media (pointer:coarse){
  .btn,.pgbtn,.ms-btn,.icobtn,.fmais{min-height:40px;}
  .tab-btn{min-height:44px;}
  .sheet-x{min-width:40px;min-height:40px;}
  .mescell{min-height:42px;}
  .calgrid button{min-height:36px;}
  .ms-opt{min-height:40px;padding:8px;}
  .ms-list{max-height:min(320px, 46vh);}
  table.dt td{padding:11px 11px;}
  .filtrar{min-height:34px;padding:5px 11px;}
  .segm button{min-height:42px;}
  .medida button{min-height:40px;}
  .umvalor .uv-acoes button{min-height:40px;}
  .chip button{min-width:26px;min-height:26px;}
}

/* Os três números da frente e os dois do detalhe, um embaixo do outro no
   celular: em 375px, três colunas dariam 110px para "Resolvidos 861" e o pé. */
@media (max-width:699px){
  .kpi-row.tres,.kpi-row.dois{grid-template-columns:minmax(0,1fr);}
}


/* ──────────────────────────────────────────────────────────────────────
   css/15-portal.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   A TELA DOS SETORES (decisão 60)
   A primeira tela de quem entra, e a única que fala de mais de um setor ao
   mesmo tempo: uma frase sobre o colégio e os setores lado a lado, uma linha
   cada, nas mesmas colunas.

   O QUE SE COMPARA ENTRE SETORES SÃO AS PROPORÇÕES — vazão, taxa, tempo
   típico, idade da fila, parte do esforço. Volume não: Compras tem cem vezes
   o volume da Limpeza, e na mesma régua a Limpeza vira um risco (pedido do
   usuário que segue valendo). Por isso as coluninhas de entradas × saídas de
   cada linha estão na escala do PRÓPRIO setor. A cor do setor é só o ponto
   ao lado do nome: identifica, não mede.
   ===================================================================== */
/* Barra de período da tela dos setores. O controle é o MESMO de dentro de
   um setor, movido para cá — daí o `#perGeral` ser só um lugar vazio. */
/* `position:relative` porque no celular `.ms` vira `position:static` e o
   painel passa a se ancorar no ancestral posicionado mais proximo. Dentro de
   um setor esse ancestral e `.filterbar`; aqui, no portal, nao havia nenhum,
   e o painel ia para o canto da pagina — fora da tela. Era o "no mobile
   essa lista nem abre". */
.portal-per{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 2px 14px;
  position:relative;}
.pp-rot{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--tinta-3);}
.pp-nota{font-size:12px;color:var(--tinta-3);}
/* A regra que alinhava o painel do período à esquerda no portal saiu na v58:
   ele deixou de ser um balão ancorado no botão e passou a ser uma janela
   centrada na tela, que não depende de onde o controle vive. */
#perGeral .ms-per{margin-left:0;}

/* O TOPO DO COLÉGIO E OS CARTÕES DOS SETORES moram em 17-v3.css (decisão
   62): o painel do colégio (.p-colegio) e o cartão de setor (.ps). */
.portal-cards{display:flex;flex-wrap:wrap;}

/* Centrada, como o rodapé logo abaixo. Ela era a única linha alinhada à
   esquerda naquela região da tela, e uma frase desalinhada no meio de um bloco
   centrado lê como sobra de outro layout. */
.portal-nota{margin:18px auto 0;max-width:820px;text-align:center;
  font-size:12px;color:var(--tinta-3);line-height:1.55;}

/* Volta para a tela dos setores. Vive junto ao título porque é o título
   que ele desfaz; na barra de sincronização ficaria longe do nome. */
/* Estava discreto demais — pedido do usuario. Passa a ler como um controle
   de acao: fundo tingido de azul, borda azul, texto maior. Azul porque no
   painel azul e a cor de quem AGE e NAVEGA. */
.voltasetor{display:inline-flex;align-items:center;gap:6px;margin-bottom:7px;min-height:32px;
  padding:0 14px 0 10px;border:1px solid var(--azul-borda);border-radius:999px;
  background:var(--azul-tint);color:var(--azul-tinta);
  font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;
  box-shadow:var(--sombra);transition:background .15s, border-color .15s;}
.voltasetor:hover{background:var(--azul-tint-2);border-color:var(--azul-tinta);}
.voltasetor svg{flex:none;}
/* `display` de autor vence o `[hidden]{display:none}` da folha do
   navegador, entao sem esta linha o botao de voltar ficava visivel NA
   PROPRIA tela dos setores — e o teste que olhava `el.hidden` dizia que
   estava escondido, porque a propriedade estava certa e so o efeito nao. */
.voltasetor[hidden]{display:none;}




/* ──────────────────────────────────────────────────────────────────────
   css/16-impressao.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   PAPEL
   Some o que e controle, fica o que e conteudo, e o tema volta ao claro.
   ===================================================================== */

/* Impressão: sem filtro, sem botão, o gráfico e a tabela é que interessam. */
@media print{
  .filterbar,.tabs,.sync,.card-acts,.pager,.search,.sheet,.dicaclic{display:none !important;}
  .wrap{padding:0;max-width:none;}
  /* Papel e branco: no modo escuro os tokens voltam ao claro, senao
     sairia tinta clara sobre fundo branco. */
  :root[data-tema-eficaz="escuro"]{
    --card:#FFFFFF;--fundo:#FFFFFF;--sup-poco:#F7F9FB;--sup-hover:#FFFFFF;
    --sup-fill:#F0F3F6;--sup-fill-2:#E4EAF0;--borda:#D3D9DF;--borda-forte:#B9C1CA;
    --linha:#E4E8EC;--tinta:#000000;--tinta-2:#333333;--tinta-3:#555555;
    --azul-tinta:#005490;--c1:#005490;--neutro:#A8B2BC;--neutro-claro:#CFD6DC;
    --grade:#EEF1F4;--ok:#0F7A54;--alerta:#8A6100;--critico:#C13B32;}
  body{background:#fff;}
  .card,.kpi,.header{box-shadow:none;break-inside:avoid;}
  .tab-panel{display:block !important;}
}


/* ──────────────────────────────────────────────────────────────────────
   css/17-v3.css
   ────────────────────────────────────────────────────────────────────── */
/* ========================================================================
   A FOLHA EM PAINÉIS (decisões 62 e 63)

   A proposta v3 aplicada ao painel de verdade. Vem por último na cascata: é
   a palavra final sobre a aparência das três telas.

     PROFUNDIDADE   o fundo tem luz (o azul do Anglo em cima, o ouro do selo
                    embaixo), dois anéis largos e uma malha de pontos nas
                    bordas. Cada painel tem duas alturas: a FAIXA DO TÍTULO,
                    mais clara, em cima, e o CORPO, mais fundo, embaixo — o
                    título não se mistura com o gráfico (decisão 63).
     REGIÃO COMUM   todo texto mora num painel (Gestalt). Nada solto sobre o
                    fundo.
     A COR DIZ O QUE É
                    azul de AÇÃO       tudo que se clica: botão, filtro, aba,
                                       "ver os chamados". Sempre com forma de
                                       botão (fundo e borda), nunca só cor.
                    azul da MARCA      o ícone de cada painel; os finalizados
                    cinza-azulado      os que entraram; o contexto
                    verde/âmbar/verm.  só o ESTADO (bom, atenção, crítico),
                                       sempre com a palavra escrita.
     SEM FILETE     nenhuma faixa colorida em borda de cartão.
     LARGURA TODA   nenhum texto para no meio da tela (decisão 63).

   Os tokens daqui sobrepõem os de 01-tokens.css. Ficam juntos dos
   componentes que os usam enquanto a direção se assenta; consolidar em
   01-tokens.css é o passo seguinte.
   ===================================================================== */

/* ── 1. a paleta ── */
:root{
  /* TRÊS FUNDOS, TRÊS CORES (decisão 66): a página mais funda, o quadro dos
     gráficos e tabelas mais claro que ela, e a faixa do título por cima.
     O quadro na cor da página "fica feio" (05/11/2026). */
  --fundo:#DCE5EF;
  --fundo-1:#E3EAF3; --fundo-2:#DCE5EF; --fundo-3:#D5DFEA;
  --luz-pag:.20; --luz-claro:.16; --luz-ouro:.20;
  --anel-a:rgba(0,84,144,.10); --anel-b:rgba(184,145,47,.16); --pontos:rgba(0,84,144,.08);

  /* o corpo do painel é o fundo; a faixa do título e os blocos de dentro
     ficam por cima, mais claros */
  --painel:rgba(242,246,251,.97);
  /* a faixa e a moldura são OPACAS: a faixa passa por cima da moldura, e
     duas camadas translúcidas somariam um degrau na ponta */
  --cab-fundo:#FFFFFF;
  --sombra-fora:0 1px 2px rgba(16,36,62,.06), 0 14px 34px rgba(16,36,62,.10);
  --ps-base:#FFFFFF; --ps-moldura:8%; --ps-cab:22%; --ps-cab-2:34%;
  --painel-2:rgba(0,84,144,.04);
  --painel-3:rgba(0,84,144,.08);
  --painel-borda:rgba(0,84,144,.14);
  --painel-borda-2:rgba(0,84,144,.30);
  --painel-sombra:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(16,36,62,.06), 0 14px 34px rgba(16,36,62,.10);
  --painel-sombra-2:inset 0 1px 0 #fff, 0 4px 10px rgba(16,36,62,.08), 0 24px 52px rgba(16,36,62,.16);
  --kpi-fundo:linear-gradient(180deg,#FFFFFF,#F9FBFD);
  --kpi-sombra:0 1px 2px rgba(16,36,62,.06);
  --kpi-sombra-2:0 14px 30px rgba(16,36,62,.14);

  --tinta:#13243A; --tinta-2:#3C4E66; --tinta-3:#56677D;
  --borda:#D9E3ED; --borda-forte:#AFC1D3; --linha:#D8E2EC;
  --trilho:#DFE7EF;
  /* AS GUIAS DE LEITURA (decisão 65): a grade dos gráficos e a faixa de
     linha sim, linha não — visíveis sobre o quadro, sem disputar com o dado */
  --grade:#C3D0DD; --faixa-linha:rgba(0,84,144,.055); --tab-cab:#EDF2F7;
  --g-aparte:#8A70DA;
  --controle:#FFFFFF; --campo:#FFFFFF;
  --sup-poco:#F4F7FA; --sup-hover:#EEF3F8; --sup-fill:#E8EEF5; --sup-fill-2:#DCE5EE;
  --card-hover:#F8FAFC; --card-pressionado:#EEF3F8; --card-aberto:#F6F9FC;
  --neutro:#748297; --barra-ab:#748297; --ent:#748297;

  /* AÇÃO: o azul de tudo que se clica */
  --acao:#0A6BB0; --acao-fundo:rgba(10,107,176,.09); --acao-fundo-2:rgba(10,107,176,.17);
  --acao-borda:rgba(10,107,176,.45); --acao-cheio:#0A6BB0; --acao-cheio-2:#085A94;
  --azul-tinta:#0A6BB0; --azul-tint:rgba(10,107,176,.09); --azul-tint-2:rgba(10,107,176,.17);
  --azul-borda:rgba(10,107,176,.35); --azul-borda-2:rgba(10,107,176,.55);
  /* MARCA: o ícone de cada painel */
  --marca-ic:#005490; --marca-ic-fundo:rgba(0,84,144,.09);

  /* o texto dos selos: um tom abaixo da cor de estado, para passar de 4,5:1
     sobre o fundo claro do próprio selo */
  --bom-t:#0B6444; --atencao-t:#7E4A00; --ruim-t:#A82C23;
  --aba-trilho:rgba(0,84,144,.06); --aba-ativa:#FFFFFF;
  --dica-fundo:rgba(14,24,40,.96);
}
:root[data-tema-eficaz="escuro"]{
  --fundo:#060A11;
  --fundo-1:#0A1220; --fundo-2:#070C15; --fundo-3:#05080E;
  --luz-pag:.55; --luz-claro:.16; --luz-ouro:.16;
  --anel-a:rgba(79,176,238,.10); --anel-b:rgba(226,196,107,.10); --pontos:rgba(255,255,255,.05);

  --painel:rgba(17,27,44,.96);
  --cab-fundo:#1B2739;
  --sombra-fora:0 2px 6px rgba(0,0,0,.25), 0 18px 40px rgba(0,0,0,.32);
  --ps-base:#131E30; --ps-moldura:13%; --ps-cab:38%; --ps-cab-2:52%;
  --painel-2:rgba(255,255,255,.035);
  --painel-3:rgba(255,255,255,.07);
  --painel-borda:rgba(140,175,215,.15);
  --painel-borda-2:rgba(140,175,215,.30);
  --painel-sombra:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.25), 0 18px 40px rgba(0,0,0,.32);
  --painel-sombra-2:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.3), 0 26px 56px rgba(0,0,0,.42);
  --kpi-fundo:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  --kpi-sombra:inset 0 1px 0 rgba(255,255,255,.06);
  --kpi-sombra-2:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.4);

  --card:#131E2E; --controle:#18273B; --campo:#0D1623;
  --tinta:#EEF3F9; --tinta-2:#B7C5D6; --tinta-3:#8FA1B6;
  --borda:#22324A; --borda-forte:#3A5272; --linha:#24344B;
  --trilho:#1E2C3F;
  --grade:#2E405A; --faixa-linha:rgba(255,255,255,.045); --tab-cab:#223147;
  --g-aparte:#A795F3;
  --sup-poco:#0F1926; --sup-hover:#1A2739; --sup-fill:#1C2B40; --sup-fill-2:#25374F;
  --card-hover:#172436; --card-pressionado:#1A283C; --card-aberto:#0F1926;
  --c1:#4FB0EE; --neutro:#7D8CA3; --barra-ab:#7D8CA3; --ent:#7D8CA3;
  --bom:#34D399; --atencao:#FBBF24; --ruim:#F87171;
  --ok:#34D399; --alerta:#FBBF24; --critico:#F87171;
  --bom-t:#34D399; --atencao-t:#FBBF24; --ruim-t:#F87171;

  --acao:#72C3F6; --acao-fundo:rgba(92,184,242,.13); --acao-fundo-2:rgba(92,184,242,.24);
  --acao-borda:rgba(92,184,242,.50); --acao-cheio:#1A73B5; --acao-cheio-2:#2185CF;
  --azul-tinta:#72C3F6; --azul-tint:rgba(92,184,242,.13); --azul-tint-2:rgba(92,184,242,.24);
  --azul-borda:rgba(92,184,242,.40); --azul-borda-2:rgba(92,184,242,.60);
  --marca-ic:#9DD3F7; --marca-ic-fundo:rgba(79,176,238,.15);
  --foco:#8CCBF3;
  --esq-1:#16233A; --esq-2:#1E2D45; --esq-3:#1A2840;
  --aba-trilho:rgba(6,11,19,.6); --aba-ativa:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
  --dica-fundo:rgba(22,34,52,.97);
}

/* ── 2. o fundo: luz e desenho, parados atrás do conteúdo ──
   A luz de cima à esquerda é a cor da página (`--pag-rgb`): o azul do Anglo
   na tela dos setores, a cor do setor dentro dele. Ponto e anel, e nada com
   forma reconhecível, para não competir com o dado. A máscara deixa o desenho
   só nas bordas: o meio, onde mora a leitura, fica limpo. */
body{background:var(--fundo);}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(1100px 620px at -5% -12%, rgb(var(--pag-rgb) / var(--luz-pag)), transparent 62%),
             radial-gradient(900px 560px at 108% -6%, rgb(50 162 219 / var(--luz-claro)), transparent 60%),
             radial-gradient(900px 760px at 105% 108%, rgb(var(--ouro-rgb) / var(--luz-ouro)), transparent 62%),
             linear-gradient(180deg, var(--fundo-1) 0%, var(--fundo-2) 55%, var(--fundo-3) 100%);}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 12% 30%, transparent 27.6%, var(--anel-a) 27.7%, var(--anel-a) 28%, transparent 28.1%),
             radial-gradient(circle at 12% 30%, transparent 33.6%, var(--anel-a) 33.7%, var(--anel-a) 33.85%, transparent 33.95%),
             radial-gradient(circle at 92% 78%, transparent 21.6%, var(--anel-b) 21.7%, var(--anel-b) 22%, transparent 22.1%),
             radial-gradient(circle at 92% 78%, transparent 15.6%, var(--anel-b) 15.7%, var(--anel-b) 15.85%, transparent 15.95%),
             radial-gradient(circle at 96% 6%, transparent 9.6%, var(--anel-a) 9.7%, var(--anel-a) 9.9%, transparent 10%),
             radial-gradient(circle, var(--pontos) 1px, transparent 1.3px);
  background-size:auto,auto,auto,auto,auto,28px 28px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 40%, transparent 35%, #000 85%);
  mask-image:radial-gradient(120% 100% at 50% 40%, transparent 35%, #000 85%);}

/* ── 3. a faixa do colégio, as abas e a barra de filtros ── */
.header{background:linear-gradient(120deg,#005490 0%,#0A63A6 55%,#0B4C82 100%);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 18px 40px rgba(0,30,60,.28);}
.header::after{content:"";position:absolute;right:-60px;top:-80px;width:340px;height:340px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 40px rgba(255,255,255,.03);pointer-events:none;}
/* A NAVEGAÇÃO NA FAIXA AZUL (decisão 66): uma segunda linha, mais funda, com
   as abas do setor à esquerda e, à direita, a volta para todos os setores e
   um atalho por setor, com o ícone e a cor dele. A faixa ficava vazia no
   meio e as abas, sozinhas numa linha embaixo dela. */
.header{flex-wrap:wrap;row-gap:14px;}
.h-nav{order:10;flex:1 1 100%;position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px 20px;margin:2px -22px -16px;padding:10px 22px 12px;
  background:rgba(2,18,38,.22);border-top:1px solid rgba(255,255,255,.14);}
.header .tabs{display:inline-flex;max-width:100%;overflow-x:auto;margin:0;padding:4px;gap:4px;border:1px solid rgba(255,255,255,.18);
  border-radius:12px;background:rgba(0,0,0,.18);box-shadow:inset 0 2px 6px rgba(0,0,0,.18);}
.header .tab-btn{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 15px;border-radius:9px;
  color:rgba(255,255,255,.88);font-weight:600;}
.header .tab-btn i{font-size:13px;opacity:.85;}
.header .tab-btn:hover{background:rgba(255,255,255,.13);color:#fff;}
.header .tab-btn.active{background:#fff;color:#005490;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.22);}
.header .tab-btn.active i{opacity:1;}
.h-setores{margin-left:auto;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;}
.header .voltasetor{margin:0;}
.h-atalhos{display:flex;gap:6px;flex-wrap:wrap;}
.h-atalhos:empty{display:none;}
.h-set{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px 0 5px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:background-color .2s, border-color .2s, transform .2s var(--curva);}
.h-set i{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;font-size:11px;
  background:rgb(var(--cor));color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.28);}
.h-set:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45);transform:translateY(-1px);}
.h-set.aqui{background:#fff;border-color:#fff;color:#0B2A4A;}
.h-set.aqui i{box-shadow:none;}
.header :focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media (max-width:1279px){ .h-set{padding:0 5px;} .h-set span{display:none;} }
/* as abas podem encolher (e rolar de lado): sem isto, no celular, elas
   empurravam a barra para fora da faixa */
.h-nav,.h-nav > *{min-width:0;}
.header .tabs{flex:0 1 auto;}
@media (max-width:700px){
  .h-setores{margin-left:0;}
  .header .tabs{width:100%;}
  .header .tab-btn{flex:1 0 auto;justify-content:center;padding:0 10px;font-size:12.5px;}
  .header .tab-btn i{display:none;}
}
/* A barra de filtros também é um painel: os chips, o "Limpar tudo" e a
   contagem de chamados não ficam soltos sobre o fundo. Sem desfoque: os
   menus dela são suspensos. */
.filterbar{padding:12px 14px;border-radius:16px;background:var(--cab-fundo);border:1px solid var(--painel-borda);
  box-shadow:var(--painel-sombra);}
.filterbar .chips:not(.hidden){margin-top:10px;}

/* ── 4. os controles: tudo que se clica tem cara de botão ──
   "Os botões estão totalmente despercebidos, alguns não dá para saber que dá
   para interagir" (04/11/2026). Todo controle tem fundo, borda e o azul de
   ação; sob o cursor ele acende e sobe. O "Baixar CSV" deixou de ser verde:
   verde é estado (bom), não ação. */
.icobtn,.icobtn.btn-vertodos,.icobtn.baixar{min-height:32px;padding:0 12px;border-radius:10px;font-size:12.5px;font-weight:700;
  border:1px solid var(--acao-borda);background:var(--acao-fundo);color:var(--acao);cursor:pointer;}
.icobtn:hover,.icobtn.btn-vertodos:hover,.icobtn.baixar:hover{background:var(--acao-fundo-2);border-color:var(--acao);color:var(--acao);}
.icobtn.alterna[aria-pressed="false"]{background:transparent;border-color:var(--borda-forte);color:var(--tinta-2);}
.icobtn.alterna[aria-pressed="false"]:hover{border-color:var(--acao);color:var(--acao);background:var(--acao-fundo);}
.icobtn.alterna[aria-pressed="true"]{background:var(--acao-fundo-2);border-color:var(--acao);color:var(--acao);}
.medida{border-color:var(--acao-borda);border-radius:10px;}
.medida button{background:transparent;color:var(--tinta-2);font-weight:600;}
.medida button.on{background:var(--acao-fundo-2);color:var(--acao);}
.ms-btn{min-height:38px;border-radius:10px;border:1px solid var(--borda-forte);background:var(--controle);color:var(--tinta);font-weight:600;}
.ms-btn .caret{opacity:1;color:var(--acao);}
.ms-btn:hover{border-color:var(--acao);background:var(--acao-fundo);color:var(--acao);}
.ms-btn.has{background:var(--acao-fundo-2);border-color:var(--acao-borda);color:var(--acao);}
.fmais{min-height:38px;border-radius:10px;border:1px dashed var(--acao-borda);background:transparent;color:var(--acao);font-weight:700;}
.fmais:hover,.fmais.on{border-style:solid;border-color:var(--acao);background:var(--acao-fundo);color:var(--acao);}
.chip{border-radius:10px;background:var(--acao-fundo);border-color:var(--acao-borda);color:var(--tinta);}
.chip button{color:var(--acao);}
.btn.limpar{border:1px solid var(--borda-forte);background:var(--controle);color:var(--tinta-2);border-radius:10px;font-weight:700;}
.btn.limpar:hover{border-color:var(--acao);background:var(--acao-fundo);color:var(--acao);}
.pgbtn{border-radius:10px;border:1px solid var(--borda-forte);background:var(--controle);color:var(--tinta);}
.pgbtn:hover:not([disabled]){border-color:var(--acao);background:var(--acao-fundo);color:var(--acao);}
.search input{min-height:38px;border-radius:10px;border-color:var(--borda-forte);background:var(--campo);color:var(--tinta);}
.search input:focus{border-color:var(--acao);box-shadow:0 0 0 3px var(--acao-fundo);}
/* o número que se clica: a lupa fica sempre à vista, como um botãozinho */
.kpi .lupa{opacity:1;top:12px;right:12px;width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--acao-fundo);border:1px solid var(--acao-borda);color:var(--acao);transition:background-color .2s, color .2s;}
.kpi.clic:hover .lupa,.kpi.clic:focus-visible .lupa{background:var(--acao-cheio);border-color:transparent;color:#fff;}
.kpi-topo{padding-right:36px;}

/* ── 5. o painel e o cartão: a moldura, a faixa do título e o quadro ──
   Três camadas (decisões 63 e 64). A MOLDURA, mais clara, envolve tudo: em
   cima ela é a faixa do título, nos lados e embaixo uma borda de 10px. Dentro
   dela, mais fundo, o QUADRO, onde ficam o gráfico, a tabela e os números —
   "como se fosse um quadro dentro do card" (05/11/2026).

   Sem embrulhar o corpo num elemento novo: a moldura é a própria borda do
   cartão, na cor da faixa, e a faixa avança por cima dela com margem
   negativa. O fio do quadro é uma sombra para dentro (ela desenha na beirada
   de dentro da borda); o fio de fora, uma sombra de 1px. As medidas ficam em
   variáveis para a faixa saber quanto avançar. */
.painel,.card{--px:20px;--pt:18px;--pb:18px;--r:20px;--moldura:0px;--moldura-cor:var(--cab-fundo);--rq:calc(var(--r) - var(--moldura));
  position:relative;background:var(--painel);border:0 solid var(--moldura-cor);border-radius:var(--r);
  box-shadow:0 0 0 1px var(--painel-borda), var(--sombra-fora);background-image:none;padding:var(--pt) var(--px) var(--pb);}
/* a moldura: em todo cartão, e no painel que tem título E corpo */
.card,.painel:has(> .p-cab):not(:has(> .p-cab:last-child)){--moldura:10px;border-width:0 var(--moldura) var(--moldura);
  box-shadow:0 0 0 1px var(--painel-borda), inset 0 0 0 1px var(--painel-borda), var(--sombra-fora);}
/* vidro só onde não há menu suspenso dentro: o desfoque prende os filhos
   "fixed" ao painel, e a folha do período no celular é um deles */
.painel:not(.portal-per),.card,.ps{-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);}
.painel{margin:0 0 16px;}
.card-larga,#card-fila{margin-bottom:16px;}
.grade-geral,.grid-b{gap:16px;margin-bottom:16px;}
.grid-b > .painel{margin:0;}
@media (max-width:700px){
  .painel,.card{--px:12px;--pt:14px;--pb:14px;--r:16px;}
  .card,.painel:has(> .p-cab):not(:has(> .p-cab:last-child)){--moldura:6px;}
}

/* A FAIXA DO TÍTULO cobre a moldura de cima de ponta a ponta. Embaixo dela,
   o QUADRO tem os quatro cantos arredondados (decisão 65: "inconsistente ter
   as bordas abaixo arredondadas e as de cima não"). Os de baixo vêm da própria
   borda; os de cima são desenhados por baixo da faixa — dois cantinhos na cor
   da moldura com o fio curvo, e o fio reto entre eles. */
.painel > .p-cab,.card > .card-head{position:relative;margin:calc(var(--pt) * -1) calc((var(--px) + var(--moldura)) * -1) 18px;
  padding:14px calc(var(--px) + var(--moldura)) 14px;background:var(--cab-fundo);border:0;border-radius:var(--r) var(--r) 0 0;}
.painel > .p-cab::after,.card > .card-head::after,.ps-cab::after{content:"";position:absolute;left:var(--moldura);right:var(--moldura);
  top:100%;height:var(--rq);pointer-events:none;
  background:
    radial-gradient(circle at 100% 100%, transparent calc(var(--rq) - 1.2px), var(--painel-borda) calc(var(--rq) - .7px),
      var(--painel-borda) calc(var(--rq) - .1px), var(--moldura-cor) calc(var(--rq) + .4px)) left top / var(--rq) var(--rq) no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--rq) - 1.2px), var(--painel-borda) calc(var(--rq) - .7px),
      var(--painel-borda) calc(var(--rq) - .1px), var(--moldura-cor) calc(var(--rq) + .4px)) right top / var(--rq) var(--rq) no-repeat,
    linear-gradient(var(--painel-borda), var(--painel-borda)) center top / calc(100% - 2 * var(--rq)) 1px no-repeat;}
/* o painel que é só título (a frase dos Detalhes e de Todos) é uma faixa só */
.painel > .p-cab:last-child{margin-bottom:calc(var(--pb) * -1);border-radius:var(--r);padding-bottom:16px;}
.painel > .p-cab:last-child::after{display:none;}

/* O TÍTULO NA LARGURA TODA. A regra das cores, os selos e os botões do
   cartão (Tabela, Ver todos) moravam numa coluna à direita do título e o
   faziam quebrar no meio da tela (05/11/2026). Agora sobem para a linha do
   assunto, e o título e a nota correm de borda a borda. */
.p-cab{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:18px;}
.p-tit{display:contents;}
.p-tit > *{grid-column:1 / -1;}
.p-tit > .kicker{grid-column:1;grid-row:1;}
.p-acoes{grid-column:2;grid-row:1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;}
.p-acoes:empty{display:none;}
/* O assunto, pequeno, com o ícone do painel; o título embaixo é a conclusão. */
.kicker{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;line-height:1.3;text-transform:uppercase;color:var(--tinta-3);}
.k-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:9px;
  background:var(--marca-ic-fundo);color:var(--marca-ic);font-size:13px;letter-spacing:0;}
.p-h{margin:0;font-size:clamp(18px,1.5vw,21px);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--tinta);}
.p-sub{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--tinta-3);}
/* a frase do topo, dentro do painel: vira o título dele */
.painel .bigidea,.painel .bigidea.crescendo{background:none;border:0;border-radius:0;padding:0;margin:0;box-shadow:none;}
.painel .bigidea .bi-txt{font-size:clamp(17px,1.4vw,19px);font-weight:600;line-height:1.45;color:var(--tinta);letter-spacing:-.01em;}
.painel .bigidea .bi-txt b{color:var(--tinta);}
.p-tit > .kicker + *{margin-top:10px;}
@media (max-width:700px){
  .p-acoes{grid-column:1 / -1;grid-row:auto;justify-content:flex-start;margin-top:10px;}
}

/* O cabeçalho do cartão, na mesma grade: o ícone, o assunto e os botões na
   linha de cima; a conclusão e a nota de leitura embaixo, na largura toda. */
.card > .card-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;}
.card-head .ct{display:contents;}
.card-head .ct > .k-ic{grid-column:1;grid-row:1;margin-right:9px;}
.card-head .ct > h3{grid-column:2;grid-row:1;}
.card-head .ct > .csub{grid-column:1 / -1;grid-row:2;}
.card-head .card-acts{grid-column:3;grid-row:1;margin-left:12px;flex-wrap:wrap;justify-content:flex-end;gap:6px;}
@media (max-width:700px){
  .card-head .card-acts{grid-column:1 / -1;grid-row:3;margin:10px 0 0;justify-content:flex-start;}
}
.card h3{color:var(--tinta-3);}
.card.tem-msg h3,.card h3{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;}
.card.tem-msg .csub{margin-top:10px;font-size:16px;}
.card .csub .csub-tit{display:block;font-size:clamp(16px,1.3vw,18px);font-weight:700;line-height:1.35;color:var(--tinta);letter-spacing:-.012em;}
.card .csub .csub-nota{margin-top:6px;font-size:13px;line-height:1.5;}
.card:not(.tem-msg) .csub{margin-top:10px;font-size:13px;line-height:1.5;color:var(--tinta-2);}
/* O GRÁFICO OCUPA O CORPO INTEIRO. Lado a lado na grade, o cartão mais baixo
   esticava e o gráfico ficava do tamanho de antes, com um vão embaixo — o
   gráfico parecia cortado. Agora ele cresce até o fim do cartão; o canvas
   sai do fluxo para o Chart.js poder encolher de volta. */
.card{display:flex;flex-direction:column;}
.card > .plot{flex:1 0 auto;min-height:0;}
.card > .plot > canvas{position:absolute;left:0;top:0;}
/* Os parados e o que mais chega, lado a lado: quem dita a altura é o cartão
   dos parados; o das categorias parte de 200px e cresce até ela. */
@media (min-width:1000px){ .grade-geral #card-tipo .plot{height:200px;} }
.card > .quem-corpo{flex:1;display:flex;flex-direction:column;justify-content:center;}

/* AS TABELAS (decisão 65): sobre um fundo próprio, mais claro que o quadro;
   o cabeçalho firme, uma faixa em linha sim, linha não, um fio entre todas e
   a linha sob o cursor no azul de ação — ela abre a ficha do chamado. */
.tscroll{border:1px solid var(--painel-borda-2);border-radius:12px;background:var(--cab-fundo);}
table.dt{font-size:13px;}
table.dt th{background:var(--tab-cab);color:var(--tinta-2);padding:12px 12px 11px;font-size:11px;letter-spacing:.05em;
  border-bottom:2px solid var(--painel-borda-2);}
table.dt th:hover{background:var(--acao-fundo-2);color:var(--acao);}
table.dt td{padding:11px 12px;border-bottom:1px solid var(--linha);color:var(--tinta);}
table.dt tbody tr:nth-child(even) td{background:var(--faixa-linha);}
table.dt tbody tr:hover td{background:var(--acao-fundo-2);}
table.dt tbody tr:last-child td{border-bottom:0;}
.minitable,.rank{border-collapse:collapse;width:100%;font-size:13px;}
.minitable th,.rank th{background:var(--tab-cab);color:var(--tinta-2);padding:10px 12px;border-bottom:2px solid var(--painel-borda-2);text-align:left;}
.minitable td,.rank td{padding:9px 12px;border-bottom:1px solid var(--linha);color:var(--tinta);}
.minitable tbody tr:nth-child(even) td,.rank tbody tr:nth-child(even) td{background:var(--faixa-linha);}
.altview{border:1px solid var(--painel-borda-2);border-radius:12px;background:var(--cab-fundo);}

/* ── 6. a regra das cores, a meta e os selos ── */
.regra{display:inline-flex;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:7px 12px;border-radius:12px;
  background:var(--painel-2);border:1px solid var(--painel-borda);font-size:12px;color:var(--tinta-2);}
.regra > span{display:inline-flex;align-items:center;gap:6px;}
.regra i{width:9px;height:9px;border-radius:50%;flex:none;}
.regra .regra-t{font-weight:700;color:var(--tinta);}
.st-fundo-bom{background:var(--bom);} .st-fundo-atencao{background:var(--atencao);} .st-fundo-ruim{background:var(--ruim);}
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:700;
  line-height:1;white-space:nowrap;vertical-align:middle;}
.pill-bom{background:color-mix(in srgb, var(--bom) 15%, transparent);color:var(--bom-t);}
.pill-atencao{background:color-mix(in srgb, var(--atencao) 17%, transparent);color:var(--atencao-t);}
.pill-ruim{background:color-mix(in srgb, var(--ruim) 15%, transparent);color:var(--ruim-t);}
.pill-neutro{background:var(--painel-3);color:var(--tinta-2);}
.p-acoes .pill{height:28px;padding:0 12px;font-size:12.5px;}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.meta-row:empty{display:none;}
.meta-row .m{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:var(--painel-2);
  border:1px solid var(--painel-borda);font-size:12.5px;color:var(--tinta-2);}
.meta-row .m > svg{color:var(--marca-ic);flex:none;}
.meta-row .m b{color:var(--tinta);}
.kg-meta{fill:var(--card);stroke:var(--tinta);stroke-width:1.1;}

/* ── 7. os números ── */
/* quatro numa linha; abaixo de 1100px, dois por linha — nunca três e um sozinho */
.kpi-row.quatro{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:0;}
@media (max-width:1099px){ .kpi-row.quatro{grid-template-columns:repeat(2,minmax(0,1fr));} }
.kpi-row.dois{gap:12px;margin-bottom:0;}
.kpi{border-radius:16px;background:var(--kpi-fundo);border:1px solid var(--painel-borda);box-shadow:var(--kpi-sombra);
  padding:16px 18px 14px;gap:6px;min-height:0;}
.kpi.clic:hover,.kpi.clic:focus-visible{background:var(--kpi-fundo);border-color:var(--acao-borda);box-shadow:var(--kpi-sombra-2);
  transform:translateY(-3px);}
.kpi-row.quatro .kpi-val,.kpi-row.dois .kpi-val{font-size:36px;margin-top:2px;}
.kpi-ajuda{font-size:12.5px;line-height:1.45;color:var(--tinta-3);min-height:2.9em;}
.kpi-foot{font-size:12px;color:var(--tinta-2);display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;}
/* o anel da taxa desce para o canto de baixo: o de cima é da lupa */
.kpi-anel{top:auto;bottom:14px;right:16px;width:64px;height:64px;}
#kAtendCard .kpi-val,#kAtendCard .kpi-foot{padding-right:72px;}
/* AS LINHAS DOS NÚMEROS aparecem por uma cortina, e não pelo tracejado: com
   o traço que não escala, o tracejado deixava buracos na linha. A dos
   parados é cinza (o amarelo saiu, decisão 63). */
.kg-traco{stroke-dasharray:none;animation:none;}
.kg-linha{animation:cortina .9s var(--curva) both;}
@keyframes cortina{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
.kg-fila .kg-traco{stroke:var(--tinta-3);} .kg-fila .kg-area{fill:var(--tinta-3);} .kg-ponto.kg-fila{background:var(--tinta-3);}
/* No celular, dois por linha: os quatro cabem numa tela e meia em vez de
   quatro. O anel sai — o número e o selo já dizem o estado. */
@media (max-width:600px){
  .kpi-row.quatro{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .kpi-row.quatro .kpi{padding:12px 12px 12px;}
  .kpi-row.quatro .kpi-val,.kpi-row.dois .kpi-val{font-size:28px;}
  .kpi-row.quatro .kpi-ajuda{font-size:11.5px;min-height:0;}
  .kpi-row.quatro .kpi-graf{display:none;}
  #kAtendCard .kpi-anel{display:none;}
}
.cmpfaixa{border-radius:14px;}
.painel .cmpfaixa{margin-bottom:12px;}

/* ── 8. a faixa dos meses, dentro do painel da situação ── */
.faixa-meses{padding:4px 2px 4px;margin:0 -2px;}
.fm-ano,.fm-mes{border-radius:14px;background:var(--kpi-fundo);border:1px solid var(--painel-borda);box-shadow:var(--kpi-sombra);}
.fm-ano:hover,.fm-mes:hover{border-color:var(--acao-borda);box-shadow:var(--kpi-sombra-2);}
.fm-ano[aria-pressed="true"],.fm-mes[aria-pressed="true"]{border-color:var(--acao);
  background:linear-gradient(180deg, var(--acao-fundo-2), var(--acao-fundo));}
.fm-mes.curso{border:1.5px dashed var(--painel-borda-2);background:transparent;box-shadow:none;}

/* ── 9. entraram × finalizados: as colunas e a diferença ── */
.plot.svgplot{height:auto;}
.col-svg{display:block;width:100%;height:auto;overflow:visible;}
.col-eixo line{stroke:var(--grade);}
.col-eixo text{fill:var(--tinta-3);font-size:11.5px;font-family:var(--fonte);}
.tb-e{fill:var(--ent);} .tb-f{fill:var(--c1);} .tb-c{fill:color-mix(in srgb, var(--c1) 40%, transparent);}
.col-g.curso rect{opacity:.45;}
.col-v{font-family:var(--fonte-num);font-size:11px;font-weight:700;fill:var(--tinta-2);}
.tb-f-t{fill:var(--azul-tinta);}
.col-alvo{fill:transparent;cursor:pointer;}
.col-alvo:hover{fill:var(--acao-fundo);}
.col-svg .cresce,.ps-graf .cresce{transform-box:fill-box;transform-origin:50% 100%;animation:cresceY .8s var(--curva) both;}
.col-difs{display:grid;margin-top:2px;}
.col-difs > span{display:flex;justify-content:center;min-width:0;}
.col-difs .pill{height:20px;min-width:34px;justify-content:center;padding:0 6px;font-size:11px;font-family:var(--fonte-num);}
@media (max-width:600px){ .col-difs .pill{min-width:0;padding:0 3px;font-size:10px;height:18px;} }
/* a dica dos desenhos em SVG: escura nos dois temas, como a do Chart.js */
.dica-svg{position:fixed;z-index:300;pointer-events:none;min-width:200px;padding:10px 12px;border-radius:12px;
  background:var(--dica-fundo);border:1px solid rgba(140,175,215,.24);box-shadow:0 14px 34px rgba(0,0,0,.35);
  font-size:12.5px;color:#C9D6E5;opacity:0;transform:translate(-50%, calc(-100% - 14px));transition:opacity .12s;}
.dica-svg.on{opacity:1;}
.dica-svg b{color:#fff;}
.ds-t{font-weight:700;color:#fff;margin-bottom:4px;}
.ds-l{display:flex;justify-content:space-between;gap:14px;}
.ds-sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;}
.ds-sw.tb-e{background:#8C99AC;} .ds-sw.tb-f{background:#4FB0EE;} .ds-sw.fila{background:#8C99AC;}
.ds-p{margin-top:6px;font-size:11px;color:#9FB2C8;}

/* ── 10. os pontos de atenção ──
   Um cartão por ponto (decisão 63): o problema e o tamanho em destaque, as
   respostas do 5W2H embaixo, cada uma com o seu ícone, e o botão para os
   chamados. A cor da urgência fica no ícone, no selo, no número e no prazo —
   nunca num filete. */
.pa-lista{display:grid;gap:10px;}
.pa{display:grid;grid-template-columns:46px minmax(0,1.3fr) minmax(210px,.6fr) minmax(0,1.3fr) auto;align-items:center;gap:14px 22px;
  padding:16px 18px;margin:0;border-radius:14px;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--kpi-fundo);border:1px solid var(--painel-borda);box-shadow:var(--kpi-sombra);
  transition:transform .25s var(--curva), box-shadow .25s, border-color .25s;}
.pa:hover,.pa:focus-visible{transform:translateY(-2px);box-shadow:var(--kpi-sombra-2);}
.pa-ruim:hover,.pa-ruim:focus-visible{border-color:color-mix(in srgb, var(--ruim) 55%, transparent);}
.pa-atencao:hover,.pa-atencao:focus-visible{border-color:color-mix(in srgb, var(--atencao) 55%, transparent);}
.pa-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:18px;}
.pa-ruim .pa-ic{background:color-mix(in srgb, var(--ruim) 17%, transparent);color:var(--ruim-t);}
.pa-atencao .pa-ic{background:color-mix(in srgb, var(--atencao) 19%, transparent);color:var(--atencao-t);}
.pa-o{display:flex;flex-direction:column;gap:6px;min-width:0;}
.pa-tit{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;}
.pa-tit b{font-size:15px;line-height:1.3;color:var(--tinta);}
.pa-ctx{font-size:13px;line-height:1.5;color:var(--tinta-2);}
.pa-onde{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:1px 9px;border-radius:999px;background:var(--painel-3);
  font-size:12px;color:var(--tinta-2);white-space:nowrap;}
.pa-onde i{font-size:10.5px;color:var(--marca-ic);}
.pa-q,.pa-passo{padding-left:22px;border-left:1px solid var(--linha);min-width:0;}
.pa-q{display:flex;align-items:center;gap:12px;}
.pa-q > b{font-family:var(--fonte-num);font-size:32px;font-weight:700;line-height:1;letter-spacing:-.02em;}
.pa-q > span{display:flex;flex-direction:column;gap:3px;min-width:96px;font-size:13px;line-height:1.3;color:var(--tinta-2);}
.pa-q small{font-size:11.5px;color:var(--tinta-3);}
.pa-passo{display:flex;flex-direction:column;gap:5px;}
.pa-passo em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3);}
.pa-passo em small{margin-left:6px;padding:1px 7px;border-radius:5px;background:var(--painel-3);font-weight:600;letter-spacing:0;text-transform:none;}
.pa-como{font-size:13.5px;line-height:1.45;color:var(--tinta);}
.pa-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--tinta-2);}
.pa-meta > span{display:inline-flex;align-items:center;gap:6px;}
.pa-meta > span:last-child{font-weight:700;}
.pa-meta i{font-size:11px;color:var(--marca-ic);}
.pa-meta .st-ruim i,.pa-meta .st-atencao i{color:inherit;}
.pa-pe{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border-radius:10px;white-space:nowrap;
  background:var(--acao-fundo);border:1px solid var(--acao-borda);color:var(--acao);font-size:12.5px;font-weight:700;
  transition:background-color .2s, color .2s;}
.pa-pe i{transition:transform .25s var(--curva);}
.pa:hover .pa-pe,.pa:focus-visible .pa-pe{background:var(--acao-cheio);border-color:transparent;color:#fff;}
.pa:hover .pa-pe i{transform:translateX(3px);}
@media (max-width:1099px){
  .pa{grid-template-columns:46px minmax(0,1fr);align-items:start;}
  .pa-q,.pa-passo,.pa-pe{grid-column:2;}
  .pa-q,.pa-passo{padding:12px 0 0;border-left:0;border-top:1px solid var(--linha);}
  .pa-pe{justify-self:start;}
}
.at-ok{display:flex;gap:10px;align-items:center;padding:14px 16px;border-radius:14px;font-weight:600;
  background:color-mix(in srgb, var(--bom) 12%, transparent);color:var(--bom-t);}

/* ── 11. a tela dos setores ──
   TODOS OS CARTÕES DO MESMO TAMANHO (decisão 63): a largura é fixa por linha
   (cinco, três, dois ou um, conforme a tela) e a linha que sobra fica no
   meio, em vez de esticar dois cartões até a borda. */
.painel.portal-per{padding:12px 16px;border-radius:16px;margin-bottom:16px;background:var(--cab-fundo);}
.pp-regra{margin-left:auto;}
.painel.portal-nota{max-width:none;margin:16px 0 0;padding:12px 18px;text-align:left;font-size:12.5px;color:var(--tinta-3);}
.painel.portal-nota:empty{display:none;}
.portal-cards{--max:5;--n:min(var(--itens, 5), var(--max));display:flex;flex-wrap:wrap;justify-content:center;gap:16px;}
@media (max-width:1299px){ .portal-cards{--max:3;} }
@media (max-width:939px){ .portal-cards{--max:2;} }
@media (max-width:599px){ .portal-cards{--max:1;} }
/* O MESMO QUADRO DOS OUTROS CARTÕES (decisão 64), com a moldura na cor do
   setor: o cabeçalho esmaece da cor cheia até o tom da moldura, e ela segue
   pelos lados e por baixo. */
.ps{--moldura:10px;--rq:calc(20px - var(--moldura));--moldura-cor:color-mix(in srgb, rgb(var(--cor)) var(--ps-moldura), var(--ps-base));
  flex:0 0 calc((100% - (var(--n) - 1) * 16px) / var(--n));min-width:0;display:flex;flex-direction:column;padding:0;margin:0;
  text-align:left;font:inherit;color:inherit;cursor:pointer;container-type:inline-size;
  border-radius:20px;border:0 solid var(--moldura-cor);border-width:0 var(--moldura) var(--moldura);
  background:var(--painel);box-shadow:0 0 0 1px var(--painel-borda), inset 0 0 0 1px var(--painel-borda), var(--sombra-fora);
  transition:transform .35s var(--curva), box-shadow .35s;}
@media (max-width:700px){ .ps{--moldura:6px;} }
/* SOB O CURSOR, o cartão acende na cor do setor: sobe, ganha um halo da cor
   dele, o cabeçalho esquenta, o ícone gira um pouco e o botão se enche. */
.ps:hover,.ps:focus-visible{transform:translateY(-6px);
  box-shadow:0 0 0 1px rgba(var(--cor), .75), inset 0 0 0 1px var(--painel-borda), 0 26px 50px -14px rgba(var(--cor), .6), var(--painel-sombra-2);}
.ps:focus-visible{outline:2px solid var(--foco);outline-offset:3px;}
.ps-cab{position:relative;display:flex;align-items:center;gap:12px;margin:0 calc(var(--moldura) * -1);
  padding:16px calc(14px + var(--moldura)) 14px;border-radius:20px 20px 0 0;
  background:linear-gradient(120deg, color-mix(in srgb, rgb(var(--cor)) var(--ps-cab), var(--ps-base)), color-mix(in srgb, rgb(var(--cor)) var(--ps-moldura), var(--ps-base)) 75%);
  transition:background .35s;}
.ps:hover .ps-cab{background:linear-gradient(120deg, color-mix(in srgb, rgb(var(--cor)) var(--ps-cab-2), var(--ps-base)), color-mix(in srgb, rgb(var(--cor)) var(--ps-moldura), var(--ps-base)) 85%);}
.ps-ic{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;
  background:rgba(var(--cor), .92);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 14px rgba(var(--cor), .35);
  transition:transform .35s var(--curva);}
.ps:hover .ps-ic{transform:scale(1.08) rotate(-6deg);}
.ps-nome{font-size:16.5px;letter-spacing:-.01em;color:var(--tinta);min-width:0;line-height:1.25;}
.ps-anel{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 14px 6px;}
.ps-anel .kg-anel{width:124px;height:124px;flex:none;}
.ps-anel .kg-trilho,.ps-anel .kg-valor{stroke-width:4.5;}
.ps-c{position:absolute;top:16px;left:50%;width:124px;height:124px;margin-left:-62px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.ps-c b{font-family:var(--fonte-num);font-size:24px;line-height:1;color:var(--tinta);}
.ps-c span{max-width:80px;margin-top:4px;font-size:10.5px;line-height:1.2;color:var(--tinta-3);}
.ps-nums{display:grid;gap:8px;padding:12px 14px 4px;}
.ps-n{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;padding-bottom:8px;border-bottom:1px solid var(--linha);}
.ps-n:last-child{border-bottom:0;padding-bottom:0;}
.ps-r{font-size:12.5px;color:var(--tinta-2);}
.ps-v{text-align:right;}
.ps-v b{font-family:var(--fonte-num);font-size:20px;font-weight:700;color:var(--tinta);}
.ps-v small{display:block;font-size:11.5px;font-weight:600;color:var(--tinta-3);}
.ps-n .sc-cmp{flex-basis:100%;}
.ps-graf{padding:12px 14px 0;}
.ps-graf svg{display:block;width:100%;height:auto;}
.ps-graf .ps-barras{height:60px;}
.ps-base{stroke:var(--grade);vector-effect:non-scaling-stroke;}
.ps-meses{display:grid;margin-top:4px;font-size:10px;color:var(--tinta-3);text-align:center;}
.ps-meses span{min-width:0;overflow:hidden;}
@container (max-width:290px){ .ps-meses span:nth-child(even){visibility:hidden;} }
.ps-col.curso rect{opacity:.45;}
.ps-leg{padding:6px 14px 0;font-size:11px;color:var(--tinta-3);}
.ps-leg .sc-gr{display:inline-flex;flex-wrap:wrap;gap:2px 10px;}
.ps-leg .sc-gr span{display:inline-flex;align-items:center;gap:5px;}
.ps-leg .sc-gr i{display:inline-block;width:9px;height:9px;border-radius:2px;}
.ps-frase{flex:1;min-height:3.2em;padding:12px 14px 0;font-size:13px;line-height:1.45;color:var(--tinta-2);}
.ps-frase b{color:var(--tinta);}
.ps-pe{display:flex;padding:14px 14px 14px;}
.ps-abrir{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:38px;border-radius:11px;
  background:var(--acao-fundo);border:1px solid var(--acao-borda);color:var(--acao);font-size:13px;font-weight:700;
  transition:background-color .25s, color .25s, border-color .25s;}
.ps-abrir i{transition:transform .3s var(--curva);}
.ps:hover .ps-abrir,.ps:focus-visible .ps-abrir{background:var(--acao-cheio);border-color:transparent;color:#fff;}
.ps:hover .ps-abrir i{transform:translateX(4px);}
.ps-sem{cursor:default;}
.ps-sem:hover{transform:none;box-shadow:0 0 0 1px var(--painel-borda), inset 0 0 0 1px var(--painel-borda), var(--sombra-fora);}
.ps-vazio{padding:16px 14px;font-size:13px;color:var(--tinta-3);}

/* ── 14. o grafismo (decisão 67) ──
   "Adicione mais elementos e grafismo" (12/11/2026). Desenho que dá corpo à
   página sem competir com o dado: tudo atrás do texto, apagado, sem filete e
   sem forma que pareça informação. */

/* A MARCA-D'ÁGUA das faixas de título: o ícone do painel, grande e inclinado,
   no canto de baixo à direita, cortado pela borda da faixa (ver
   decorarFaixas). Tudo o que fica por cima dela — botões, selos, a regra
   das cores — tem fundo SÓLIDO (decisão 68): transparente, o desenho
   aparecia através do texto. */
.cab-arte{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none;}
.cab-arte i{position:absolute;right:-6px;bottom:-34px;font-size:118px;line-height:1;color:var(--marca-ic);opacity:.055;
  transform:rotate(-14deg);}
.card-head .ct > *,.card-head .card-acts,.p-tit > *,.p-cab > .p-acoes{position:relative;z-index:1;}
@media (max-width:700px){ .cab-arte i{font-size:88px;bottom:-26px;} }
.ps-cab .cab-arte i{right:-6px;top:50%;bottom:auto;font-size:86px;color:rgb(var(--cor));opacity:.16;transform:translateY(-50%) rotate(-12deg);}
.ps-cab > :not(.cab-arte){position:relative;z-index:1;}

/* A FAIXA AZUL: uma malha de pontos que acende para a direita e um arco
   dourado (o ouro do selo) saindo de baixo, atrás de tudo. */
.header::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 74% 135%, transparent 118px, rgba(226,196,107,.45) 119px, rgba(226,196,107,.45) 120.5px, transparent 121.5px),
             radial-gradient(circle at 74% 135%, transparent 150px, rgba(226,196,107,.2) 151px, rgba(226,196,107,.2) 152px, transparent 153px),
             radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1.6px) 0 0 / 14px 14px;
  -webkit-mask-image:linear-gradient(90deg, transparent 28%, #000 72%);mask-image:linear-gradient(90deg, transparent 28%, #000 72%);}
.header > *{position:relative;z-index:1;}

/* O CANTO DA FAIXA E OS ATALHOS, SÓLIDOS (decisão 68). Sobre a malha de pontos
   e o arco dourado, o texto em fundo transparente ficava difícil de ler: o
   estado da carga, o tema e a conta moram num bloco sólido, e as abas, a
   volta e os atalhos dos setores também têm fundo cheio. */
.header .sync{padding:10px 12px;border-radius:14px;background:#0A4A80;border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,20,45,.25);}
.header .btn.tema,.header .conta{background:#0F5C9C;border-color:rgba(255,255,255,.32);}
.header .btn.tema:hover,.header .conta-sair:hover{background:#176BB0;}
.header .tabs{background:#083F6E;}
.header .voltasetor{background:#0B4C84;border-color:rgba(255,255,255,.32);}
.header .voltasetor:hover{background:#1263A5;border-color:rgba(255,255,255,.55);}
.h-set{background:#0B4C84;border-color:rgba(255,255,255,.28);}
.h-set:hover{background:#1263A5;}
.h-set.aqui{background:#fff;}

/* A COR DE CADA NÚMERO, NO ÍCONE DELE (decisão 68). O halo no canto ficou
   "borrado" atrás do botão de abrir; a cor do que o número conta — cinza para
   o que entrou, azul para o que a equipe fez, a cor do estado quando há
   estado — passou para o quadradinho do ícone. */
.kpi{--kpi-cor:var(--c1);}
.kpi.k-ab,.kpi.k-neutro:not(.k-fi){--kpi-cor:var(--neutro);}
.kpi:has(.kpi-val.st-bom){--kpi-cor:var(--bom);}
.kpi:has(.kpi-val.st-atencao){--kpi-cor:var(--atencao);}
.kpi:has(.kpi-val.st-ruim){--kpi-cor:var(--ruim);}
.kpi .kpi-ic,.kpi .kpi-ic.ic-fin,.kpi .kpi-ic.ic-parados,.kpi .kpi-ic.ic-abertos{width:32px;height:32px;border-radius:10px;
  background:color-mix(in srgb, var(--kpi-cor) 15%, var(--cab-fundo));color:var(--kpi-cor);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kpi-cor) 30%, transparent);}

/* O RODAPÉ num painel, com os logos. */
.footer{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 22px;margin:24px 0 0;
  padding:16px 24px;border-radius:18px;background:var(--cab-fundo);border:1px solid var(--painel-borda);box-shadow:var(--sombra-fora);
  text-align:left;font-size:12px;line-height:1.6;color:var(--tinta-3);}
.footer::before{display:none;}
.rodape-marca{display:flex;align-items:center;gap:12px;flex:none;}
.rodape-marca img{height:36px;width:auto;}
.rodape-marca img:last-child{height:28px;}
.rodape-marca .divisa{width:1px;height:28px;background:linear-gradient(180deg,transparent,var(--ouro-claro) 45%,var(--ouro) 60%,transparent);}
.rodape-txt{margin:0;}
.rodape-txt b{color:var(--tinta-2);}

/* OS CONTROLES SÓLIDOS (decisão 68): o mesmo azul de ação, misturado com o
   fundo da faixa em vez de transparente. */
.icobtn,.icobtn.btn-vertodos,.icobtn.baixar{background:color-mix(in srgb, var(--acao) 10%, var(--cab-fundo));}
.icobtn:hover,.icobtn.btn-vertodos:hover,.icobtn.baixar:hover{background:color-mix(in srgb, var(--acao) 20%, var(--cab-fundo));}
.icobtn.alterna[aria-pressed="false"]{background:var(--cab-fundo);}
.icobtn.alterna[aria-pressed="false"]:hover{background:color-mix(in srgb, var(--acao) 10%, var(--cab-fundo));}
.icobtn.alterna[aria-pressed="true"]{background:color-mix(in srgb, var(--acao) 20%, var(--cab-fundo));}
.medida{background:var(--cab-fundo);}
.regra{background:var(--cab-fundo);}
.pill-bom{background:color-mix(in srgb, var(--bom) 15%, var(--cab-fundo));}
.pill-atencao{background:color-mix(in srgb, var(--atencao) 18%, var(--cab-fundo));}
.pill-ruim{background:color-mix(in srgb, var(--ruim) 15%, var(--cab-fundo));}
.pill-neutro{background:color-mix(in srgb, var(--marca-ic) 8%, var(--cab-fundo));}
.kpi .lupa{background:color-mix(in srgb, var(--acao) 10%, var(--cab-fundo));}

/* ── 15. a aba Todos os chamados (decisão 68) ──
   Em cima, uma peça por situação: quantos são, quanto pesam, e um clique
   filtra a lista. A cor é a do selo da situação nas listas. Embaixo, a lista
   com as colunas de menos uso só a partir de 1600px. */
.sit-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px;}
.sit{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:14px 16px;margin:0;
  border-radius:14px;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--kpi-fundo);border:1px solid var(--painel-borda);box-shadow:var(--kpi-sombra);
  transition:transform .2s var(--curva), box-shadow .2s, border-color .2s, background-color .2s;}
.sit:hover:not([disabled]),.sit:focus-visible{transform:translateY(-2px);border-color:var(--acao-borda);box-shadow:var(--kpi-sombra-2);}
.sit[aria-pressed="true"]{border-color:var(--acao);background:color-mix(in srgb, var(--acao) 7%, var(--cab-fundo));
  box-shadow:0 0 0 1px var(--acao), var(--kpi-sombra-2);}
.sit[disabled]{cursor:default;}
.sit-ic{grid-row:1 / span 2;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;}
.sit-t{grid-column:2;grid-row:1;font-size:13px;font-weight:600;color:var(--tinta-2);}
.sit > b{grid-column:2;grid-row:2;font-family:var(--fonte-num);font-size:26px;font-weight:700;line-height:1.1;color:var(--tinta);}
.sit > small{grid-column:3;grid-row:1 / span 2;font-size:12px;color:var(--tinta-3);}
.sit-neutro .sit-ic{background:color-mix(in srgb, var(--marca-ic) 12%, var(--cab-fundo));color:var(--marca-ic);}
.sit-pend .sit-ic{background:color-mix(in srgb, var(--atencao) 18%, var(--cab-fundo));color:var(--atencao-t);}
.sit-ok .sit-ic{background:color-mix(in srgb, var(--bom) 16%, var(--cab-fundo));color:var(--bom-t);}
.sit-canc .sit-ic{background:color-mix(in srgb, var(--ruim) 15%, var(--cab-fundo));color:var(--ruim-t);}
#card-todos .tscroll{max-height:640px;}
@media (max-width:1599px){ .c1600{display:none;} }
@media (prefers-reduced-motion: reduce){ .sit{transition:none;} .sit:hover{transform:none;} }

/* ── 17. os filtros da lista dos parados (decisão 71) ── */
.filtros-fila{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;}
.filtros-fila:empty{display:none;}
.ff{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 12px;margin:0;border-radius:999px;
  border:1px solid var(--painel-borda-2);background:var(--cab-fundo);color:var(--tinta-2);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:background-color .2s, border-color .2s, color .2s;}
.ff b{font-family:var(--fonte-num);font-weight:700;color:var(--tinta);}
.ff .ff-cor{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;}
.ff > .fa-solid{font-size:12px;color:var(--atencao-t);}
.ff:hover{border-color:var(--acao);color:var(--acao);}
.ff[aria-pressed="true"]{background:color-mix(in srgb, var(--acao) 14%, var(--cab-fundo));border-color:var(--acao);color:var(--acao);}
.ff[aria-pressed="true"] b{color:var(--acao);}

/* ── 12. a entrada ── */
.anima .painel,.anima .ps,.anima .pa{
  animation:surge .52s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i, 0) * 45ms);}
@media (prefers-reduced-motion: reduce){
  .ps,.ps-ic,.ps-abrir,.ps-abrir i,.pa,.pa-pe i{transition:none !important;}
  .ps:hover,.pa:hover{transform:none !important;}
  .ps:hover .ps-ic{transform:none !important;}
}

/* ── 13. impressão: sem luz, sem vidro ── */
@media print{
  body::before,body::after{display:none;}
  .painel,.card,.ps,.pa{background:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
}