/* =====================================================================
   padrao.css — a papelaria DA TELA da Central OSDB Itaquera
   =====================================================================

   Existe uma papelaria só para documento impresso (docBase() no
   frequencia.py e documento_osdb.py). Este arquivo é a outra metade: a
   papelaria da TELA. Uma página nova não inventa cor, raio de canto nem
   cabeçalho — ela liga este arquivo e usa as classes daqui.

   A referência é a página **Procedimentos do CEDESP**
   (Procedimentos_do_CEDESP_2026_Apresentacao_2.html): foi ali que a
   identidade da Obra virou interface — azul com gradiente e trama, barra
   de quatro cores, kicker em versal espaçado, título 800, cartão branco
   de canto largo com sombra baixa. A tela de login (LOGIN_HTML no
   servidor.py) e o dashboard de Frequência (HTML_TEMPLATE no
   frequencia.py) já falavam essa língua. O resto do sistema, não.

   COMO USAR
   ---------
   1) Antes do <style> da página (o <style> vem DEPOIS, para poder
      sobrescrever o que for específico dela):

          <link rel="stylesheet" href="/padrao.css?v=1">

      O "?v=1" não é enfeite: .css passa pela borda da Cloudflare, que
      segura arquivo estático, e Ctrl+Shift+R não resolve. Mudou este
      arquivo de um jeito que precisa valer hoje para todo mundo, suba o
      número em todas as páginas (ou Purge Everything no painel da
      Cloudflare). Ver docs/operacao-servidor.md, seção 4.

   2) Apague o :root da página. É esse passo que unifica de verdade — sem
      ele, a página continua pintando por conta própria.

   3) Monte o cabeçalho com .cabecalho (ver a seção 5 abaixo), não com um
      <header> de fundo azul chapado.

   O QUE ESTE ARQUIVO NÃO FAZ
   --------------------------
   - Não mexe em <table>, <input>, <button> pelo nome do elemento. Só
     "*" e "body" são estilizados por elemento; todo o resto é classe.
     Assim ligar o arquivo numa página velha não muda nada que a página
     não peça — a adoção é sempre reversível e o diff, pequeno.
   - Não impõe estrutura de slide. O layout de apresentação (rolagem
     travada em telas cheias) é da página de Procedimentos e do Book de
     Impacto, que são material de leitura. Painel de trabalho — Admin,
     Conselho, Ficha — usa a MESMA linguagem visual em layout de painel.
   ===================================================================== */

/* ── 1 · FONTE ─────────────────────────────────────────────────────────
   Poppins servida do próprio servidor (nada de Google Fonts: a rede da
   Obra cai e a fonte tem de continuar lá). Os três pesos são os que a
   identidade usa — 400 texto, 600 rótulo, 800 título. */
@font-face{font-family:'Poppins';font-weight:400;font-display:swap;src:url('/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-display:swap;src:url('/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:800;font-display:swap;src:url('/poppins-800.woff2') format('woff2')}

/* ── 2 · AS CORES ──────────────────────────────────────────────────────
   Os quatro tons institucionais e a escala neutra fria em volta deles.
   Os valores são os da página de Procedimentos, letra por letra.

   Os NOMES são em português, como manda a convenção do repositório. Logo
   abaixo vem uma lista de apelidos: são os nomes que as outras páginas
   já usavam (--blue, --text, --border, --fundo...). Eles existem para
   que uma página adote o padrão APAGANDO o próprio :root, sem precisar
   trocar var(--blue) por var(--azul) em trezentos lugares. Apelido não é
   dívida: é o que torna a mudança pequena o bastante para ser revisável.
   Página nova escreve o nome em português. */
:root{
  /* institucionais */
  --azul:#21438E; --azul-esc:#1A356F; --azul-clr:#2D5BB5;
  --vermelho:#E63827; --laranja:#F37F1F; --teal:#2BB19D;

  /* neutros */
  --bg:#F4F6FA;        /* fundo da página */
  --white:#FFFFFF;     /* fundo de cartão */
  --ink:#1F2A3D;       /* texto */
  --muted:#5C6879;     /* texto secundário */
  --line:#E4E9F2;      /* borda e divisória */
  --tint:#EAF0FA;      /* azul lavado: chip, cabeçalho de tabela, realce */

  /* fundos lavados de cada cor — para tarja, selo e linha destacada */
  --teal-bg:#E5F5F1; --laranja-bg:#FDEFE0; --vermelho-bg:#FCE8E5; --azul-bg:#EAF0FA;

  /* versões LEGÍVEIS de laranja e teal, para texto pequeno sobre branco.
     #F37F1F em corpo de 12px não passa em contraste; serve para fundo,
     tarja e número grande, não para frase. */
  --laranja-txt:#B45F0C; --teal-txt:#12796C;

  /* o gradiente institucional, num lugar só: cabeçalho, capa e tela de
     login usam exatamente este */
  --grad-azul:
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.08), transparent 30%),
    radial-gradient(circle at 12% 88%, rgba(43,177,157,.20), transparent 34%),
    linear-gradient(160deg,#24499A 0%, #21438E 42%, #1A356F 100%);

  /* sombra do cartão — baixa e fria, nunca preta */
  --sombra:0 10px 30px rgba(28,45,80,.06);
  --sombra-alta:0 16px 38px rgba(28,45,80,.12);

  /* raios de canto */
  --r-p:10px; --r-m:16px; --r-g:22px; --r-pill:999px;

  --dur:.7s;

  /* --- apelidos (compatibilidade com as páginas já escritas) --- */
  --blue:var(--azul); --blue2:var(--azul-esc); --blue3:var(--azul-clr);
  --red:var(--vermelho); --orange:var(--laranja); --amber:var(--laranja);
  --green:var(--teal);
  --azul-escuro:var(--azul-esc);
  --tinta:var(--ink); --text:var(--ink); --texto:var(--ink);
  --text-muted:var(--muted); --suave:var(--muted); --medio:#41506F;
  --border:var(--line); --borda:var(--line);
  --fundo:var(--bg); --surface:var(--white); --surface2:var(--tint);
  --accent:var(--azul); --accent2:var(--vermelho);
}

/* ── 3 · BASE ──────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:'Poppins','Segoe UI',Arial,sans-serif; font-size:14px;
  -webkit-font-smoothing:antialiased;
}

/* O atributo `hidden` do HTML tem de vencer SEMPRE. Sem esta linha, qualquer
   componente com `display` declarado (um .btn inline-flex, uma .tarja flex)
   continua na tela mesmo marcado como hidden — foi assim que o botão "Nova
   busca" da Ficha do Educando apareceu quando não devia, e é a mesma
   armadilha que o contatos.html já registrava para a faixa de aviso. */
[hidden]{display:none!important}

/* Entrada dos blocos. Reexecuta quando o conteúdo é remontado por filtro,
   e é por isso que vale a pena ser curta. */
@keyframes subir{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pulsar{0%,100%{opacity:1}50%{opacity:.55}}
.sobe{animation:subir .5s ease both}

/* Quem pediu ao sistema para não animar não recebe animação nenhuma.
   Não é preferência de gosto: há educando e colega com sensibilidade a
   movimento, e o navegador já sabe quem são. */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── 4 · ÍCONES ────────────────────────────────────────────────────────
   Mesmas regras do icones.py (sprite Lucide embutido). Ficam aqui para
   que a página que já liga o padrao.css não precise repeti-las. */
.icn{width:1em;height:1em;flex:none;vertical-align:-.125em;fill:none;
  stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icn-2{width:1.4em;height:1.4em}
.icn-3{width:2em;height:2em}
/* Marcador colorido (no lugar de bolinha de emoji). O prefixo "icn-" é de
   propósito: uma classe curta como ".pt" já colidiu com o ".pt" dos
   cartões da página de Procedimentos e quebrou o layout dela. */
.icn-pt{display:inline-block;width:.62em;height:.62em;border-radius:50%;
  vertical-align:.02em;background:currentColor}

/* ── 5 · CABEÇALHO DE PÁGINA ───────────────────────────────────────────
   O cabeçalho da casa: gradiente azul com a trama de grade por cima, e a
   barra de quatro cores fechando embaixo. Substitui o <header> de azul
   chapado que cada painel tinha inventado.

       <header class="cabecalho">
         <div class="cab-inner">
           <div class="cab-txt">
             <div class="kicker">Serviço Social</div>
             <h1>Ficha do Educando</h1>
             <p class="cab-sub">dado sensível — cada ficha aberta fica na trilha</p>
           </div>
           <div class="cab-acoes"> …botões… </div>
         </div>
       </header>
       <div class="fourbar-larga"><i></i><i></i><i></i><i></i></div>          */
.cabecalho{
  position:relative; color:#fff; overflow:hidden;
  padding:22px 30px; background:var(--grad-azul);
}
/* A trama de grade: é ela que dá profundidade ao azul e evita o "banner
   chapado". Opacidade baixa de propósito — tem de se notar sem se ver. */
.cabecalho::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:38px 38px;
}
.cabecalho-inner{
  position:relative; z-index:2; max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.cabecalho-txt{min-width:0}
.cabecalho h1{
  margin:0; font-size:clamp(19px,2.4vw,26px); font-weight:800;
  letter-spacing:-.02em; line-height:1.12;
  display:flex; align-items:center; gap:10px;
}
.cabecalho-sub{margin:5px 0 0; font-size:13px; font-weight:300; color:rgba(255,255,255,.85)}
.cabecalho .kicker{color:#9DB8EC; margin-bottom:6px}
.cabecalho-acoes{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* Etiqueta de número no canto do cabeçalho (total, semestre, data). */
.cabecalho-tag{
  background:var(--vermelho); color:#fff; font-weight:800; font-size:14px;
  padding:8px 17px; border-radius:var(--r-pill); white-space:nowrap;
  box-shadow:0 8px 22px rgba(230,56,39,.35);
}
.cabecalho-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  padding:7px 14px; border-radius:var(--r-pill);
}

/* ── 6 · TIPOGRAFIA DA IDENTIDADE ──────────────────────────────────────
   O kicker (versal pequeno, muito espaçado, vermelho) é a assinatura
   tipográfica da Obra: ele aparece antes do título em toda peça, do
   cartaz ao slide. Sobre azul ele vira o azul-claro #9DB8EC. */
.kicker{
  font-size:clamp(11px,1.1vw,13px); font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--vermelho);
}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted)}
.titulo-secao{
  font-size:clamp(19px,2.6vw,28px); font-weight:800; color:var(--azul);
  letter-spacing:-.01em; line-height:1.12; margin:.1em 0 .2em;
}
.sub{font-size:clamp(13px,1.4vw,16px); font-weight:300; line-height:1.5;
  color:var(--muted); max-width:780px}
/* Frase-manifesto, do tamanho de meia tela. Só em capa e abertura. */
.statement{font-size:clamp(28px,4.4vw,56px); font-weight:800; line-height:1.08;
  letter-spacing:-.015em; margin:0; max-width:15ch}
.statement .hl{color:var(--laranja)}
/* Bloco de abertura de seção: kicker + título + barra. */
.head{margin-bottom:22px}
.head .fourbar{margin-top:14px}

/* ── 7 · BARRA DE QUATRO CORES ─────────────────────────────────────────
   Azul, vermelho, laranja, teal — nessa ordem, sempre. É a marca da casa
   reduzida a seis pixels de altura. ".barra4 span" é o apelido antigo,
   do frequencia.py. */
.fourbar{display:flex; height:7px; width:180px; border-radius:var(--r-pill); overflow:hidden}
.fourbar-larga{display:flex; height:6px; width:100%}
.fourbar i,.fourbar-larga i,.barra4 span{flex:1}
.fourbar i:nth-child(1),.fourbar-larga i:nth-child(1){background:var(--azul)}
.fourbar i:nth-child(2),.fourbar-larga i:nth-child(2){background:var(--vermelho)}
.fourbar i:nth-child(3),.fourbar-larga i:nth-child(3){background:var(--laranja)}
.fourbar i:nth-child(4),.fourbar-larga i:nth-child(4){background:var(--teal)}
.barra4{display:flex; height:6px}
.b-az{background:var(--azul)} .b-vm{background:var(--vermelho)}
.b-lj{background:var(--laranja)} .b-tl{background:var(--teal)}

/* ── 8 · O CORPO DA PÁGINA ─────────────────────────────────────────── */
.pagina{max-width:1400px; margin:0 auto; padding:20px 22px 60px}
.pagina-estreita{max-width:900px; margin:0 auto; padding:20px 22px 60px}

/* ── 9 · CARTÃO ────────────────────────────────────────────────────────
   Um só desenho de cartão, em três tamanhos de canto. Branco, borda fina
   fria, sombra baixa — nunca borda grossa nem sombra preta. */
.cartao{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-m); padding:16px 18px; margin-bottom:14px;
  box-shadow:var(--sombra);
}
.cartao-g{border-radius:var(--r-g); padding:26px 24px}
.cartao-plano{box-shadow:none}
/* Cartão que é botão: sobe ao passar o mouse. Só onde clicar leva a algum
   lugar — cartão que não é clicável não se move. */
.cartao-clic{cursor:pointer; transition:transform .22s, box-shadow .22s, border-color .22s}
.cartao-clic:hover{transform:translateY(-3px); box-shadow:var(--sombra-alta); border-color:#C9D6EE}
/* Faixa de cor no topo, para classificar o cartão sem escrever a palavra. */
.cartao.t-azul{border-top:4px solid var(--azul)}
.cartao.t-vermelho{border-top:4px solid var(--vermelho)}
.cartao.t-laranja{border-top:4px solid var(--laranja)}
.cartao.t-teal{border-top:4px solid var(--teal)}

/* Cartão com cabeçalho próprio (o "painel"): título à esquerda, link à
   direita, corpo embaixo. */
.painel{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-g); box-shadow:var(--sombra); overflow:hidden;
  margin-bottom:16px;
}
.painel-cab{
  display:flex; align-items:center; gap:10px;
  padding:15px 20px 13px; border-bottom:1px solid var(--line);
}
.painel-cab h2{margin:0; font-size:14px; font-weight:800; color:var(--azul);
  letter-spacing:-.01em; flex:1; display:flex; align-items:center; gap:8px}
.painel-cab .painel-link{font-size:11.5px; font-weight:600; color:var(--muted);
  text-decoration:none; cursor:pointer; background:none; border:none; font-family:inherit}
.painel-cab .painel-link:hover{color:var(--azul)}
.painel-corpo{padding:14px 20px 18px}

/* ── 10 · NÚMEROS ──────────────────────────────────────────────────────
   O cartão de indicador. Rótulo pequeno em versal, número grande em 800,
   nota embaixo. Grade que se acomoda sozinha. */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px}
.kpi{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-m);
  padding:18px 20px; box-shadow:var(--sombra); border-top:4px solid var(--azul);
}
.kpi .kpi-rot{font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted)}
.kpi .kpi-val{font-size:32px; font-weight:800; letter-spacing:-.02em;
  color:var(--azul); line-height:1.05; margin:8px 0 4px; font-variant-numeric:tabular-nums}
.kpi .kpi-nota{font-size:12px; font-weight:300; color:var(--muted); line-height:1.4}
.kpi.k-vermelho{border-top-color:var(--vermelho)} .kpi.k-vermelho .kpi-val{color:var(--vermelho)}
.kpi.k-laranja{border-top-color:var(--laranja)}   .kpi.k-laranja .kpi-val{color:var(--laranja-txt)}
.kpi.k-teal{border-top-color:var(--teal)}         .kpi.k-teal .kpi-val{color:var(--teal-txt)}

/* ── 11 · BOTÕES ───────────────────────────────────────────────────────
   Três pesos, e só. Primário azul (a ação da tela), neutro branco (o
   resto), claro (sobre o cabeçalho azul). Perigo em vermelho, para
   apagar e finalizar. */
.btn{
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  padding:8px 15px; border-radius:var(--r-p);
  border:1.5px solid var(--line); background:var(--white); color:var(--ink);
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  transition:.18s;
}
.btn:hover{background:var(--tint); border-color:#C9D3E8}
.btn:disabled{opacity:.4; cursor:default}
.btn-primario{background:var(--azul); border-color:var(--azul); color:#fff}
.btn-primario:hover{background:var(--azul-esc); border-color:var(--azul-esc); color:#fff}
.btn-perigo{background:var(--vermelho); border-color:var(--vermelho); color:#fff}
.btn-perigo:hover{background:#C42D1E; border-color:#C42D1E; color:#fff}
.btn-claro{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.32); color:#fff}
.btn-claro:hover{background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.45); color:#fff}
.btn-pill{border-radius:var(--r-pill); padding:9px 18px}

/* Chip: rótulo de leitura, não é botão. */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-size:12px; font-weight:500; background:var(--tint); color:var(--ink);
  border-radius:var(--r-pill); padding:6px 13px}
.chip b{font-weight:700}

/* ── 12 · FORMULÁRIO ───────────────────────────────────────────────────
   Rótulo em versal pequeno acima do campo; o campo herda a fonte. */
.campo{font-size:11px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.3px; display:block}
.campo input,.campo select,.campo textarea,
.entrada{
  display:block; width:100%; font:inherit; font-size:13px; margin-top:4px;
  padding:8px 10px; border-radius:9px; border:1.5px solid var(--line);
  background:var(--white); color:var(--ink);
}
.campo input:focus,.campo select:focus,.campo textarea:focus,.entrada:focus{
  outline:2px solid var(--azul); border-color:var(--azul);
}
.barra-filtros{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}

/* ── 13 · TABELA ───────────────────────────────────────────────────────
   Classe, não elemento: página que já tem tabela própria não é afetada
   ao ligar o padrão. Envolva em .rolagem — tabela larga rola dentro do
   próprio quadro, a página nunca rola de lado. */
.rolagem{overflow-x:auto}
.tabela{width:100%; border-collapse:collapse; font-size:13px}
.tabela th{
  background:var(--tint); color:var(--azul);
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  padding:9px 10px; text-align:left; border-bottom:1px solid var(--line);
}
.tabela td{padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
.tabela tbody tr:hover{background:var(--tint)}
.tabela .num{text-align:right; font-variant-numeric:tabular-nums}

/* ── 14 · SELOS E TARJAS ───────────────────────────────────────────────
   As faixas de frequência da casa têm cor fixa: crítico é vermelho,
   atenção é laranja, ok é teal. Não invente outra escala — a régua está
   no parametros.py e a cor, aqui. */
.selo{font-size:11px; font-weight:700; padding:3px 10px; border-radius:var(--r-pill);
  display:inline-block}
/* Versal só onde o selo é ESTADO (Rascunho, Fechado, Crítico). Selo que
   carrega valor — "17 anos", "Transferido" — fica em caixa normal: versal
   em número e nome próprio atrapalha a leitura. */
.selo.versal{text-transform:uppercase; letter-spacing:.4px}
.selo.ok{background:var(--teal-bg); color:var(--teal-txt)}
.selo.atencao{background:var(--laranja-bg); color:var(--laranja-txt)}
.selo.critico{background:var(--vermelho-bg); color:var(--vermelho)}
.selo.neutro{background:var(--tint); color:var(--azul)}

/* Tarja de aviso: barra de cor à esquerda, fundo lavado. */
.tarja{border-radius:0 var(--r-p) var(--r-p) 0; padding:11px 14px;
  font-size:12.5px; line-height:1.5; margin-bottom:14px}
.tarja.info{background:var(--azul-bg); border-left:5px solid var(--azul); color:#28406F}
.tarja.aviso{background:var(--laranja-bg); border-left:5px solid var(--laranja); color:#7A4A06}
.tarja.erro{background:var(--vermelho-bg); border-left:5px solid var(--vermelho); color:#8C1F14}
.tarja.ok{background:var(--teal-bg); border-left:5px solid var(--teal); color:#12594F}

.vazio{color:var(--muted); padding:22px 0; text-align:center; font-size:13px}

/* ── 15 · FICHA QUE SOBE DE BAIXO ──────────────────────────────────────
   O modal da casa não é caixa no meio da tela: é folha que sobe de baixo,
   com a barra de quatro cores na borda. Vem da página de Procedimentos e
   funciona igual no celular, que é onde a maioria abre. */
.overlay{position:fixed; inset:0; background:rgba(16,26,50,.55); backdrop-filter:blur(4px);
  z-index:90; display:none; opacity:0; transition:opacity .3s}
.overlay.show{display:block; opacity:1}
.gaveta{
  position:fixed; z-index:95; inset:auto 0 0 0; margin:0 auto;
  width:min(880px,94vw); max-height:88vh; background:#fff;
  border-radius:var(--r-g) var(--r-g) 0 0; box-shadow:0 -20px 60px rgba(10,20,45,.35);
  transform:translateY(103%); transition:transform .38s cubic-bezier(.22,.9,.3,1);
  display:flex; flex-direction:column;
}
.gaveta.show{transform:translateY(0)}
.gaveta-topo{height:8px; display:flex; border-radius:var(--r-g) var(--r-g) 0 0;
  overflow:hidden; flex:none}
.gaveta-topo i{flex:1}
.gaveta-topo i:nth-child(1){background:var(--azul)} .gaveta-topo i:nth-child(2){background:var(--vermelho)}
.gaveta-topo i:nth-child(3){background:var(--laranja)} .gaveta-topo i:nth-child(4){background:var(--teal)}
.gaveta-cab{padding:20px 28px 10px; display:flex; align-items:flex-start; gap:14px; flex:none}
.gaveta-cab h3{font-size:clamp(18px,2.2vw,24px); font-weight:800; color:var(--azul);
  line-height:1.15; margin:0; flex:1}
.gaveta-fechar{flex:none; width:38px; height:38px; border-radius:50%; border:none;
  background:var(--tint); color:var(--azul); font-size:19px; font-weight:700;
  cursor:pointer; transition:.2s}
.gaveta-fechar:hover{background:var(--vermelho); color:#fff}
.gaveta-corpo{padding:6px 28px 18px; overflow-y:auto}
.gaveta-pe{flex:none; display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:12px 28px 20px; border-top:1px solid var(--line)}
body.modal-aberto{overflow:hidden}

/* ── 16 · REVELAÇÃO AO ROLAR ───────────────────────────────────────────
   Usado nas páginas de leitura (Procedimentos, Book). Em painel de
   trabalho, prefira .sobe: quem vem lançar chamada não quer esperar
   animação. */
.animate{opacity:0; transform:translateY(20px);
  transition:opacity var(--dur) ease, transform var(--dur) ease}
.animate.in{opacity:1; transform:none}
.delay-1{transition-delay:.05s}.delay-2{transition-delay:.14s}.delay-3{transition-delay:.23s}
.delay-4{transition-delay:.32s}.delay-5{transition-delay:.41s}.delay-6{transition-delay:.50s}

/* ── 17 · CELULAR ──────────────────────────────────────────────────────
   Metade da casa abre isto no telefone, pelo PWA. */
@media (max-width:820px){
  .cabecalho{padding:16px 16px}
  .cabecalho-inner{align-items:flex-start}
  .pagina,.pagina-estreita{padding:14px 12px 48px}
  .cartao{padding:14px 15px}
  .cartao-g{padding:18px 16px}
  .painel-cab,.painel-corpo{padding-left:15px; padding-right:15px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px}
  .gaveta-cab,.gaveta-corpo,.gaveta-pe{padding-left:18px; padding-right:18px}
}