/**
 * identidade.css — Identidade visual CESAN (portal público)
 *
 * Camada de SOBREPOSIÇÃO. Carregada DEPOIS de tokens.css, portal.css,
 * pages.css e identidade-tokens.css em templates/header.php. Nada aqui
 * reescreve os arquivos anteriores: este arquivo tem só as regras do chrome
 * novo (.id-*) e da home, EXCLUSIVAS do portal público.
 *
 * A tipografia Frutiger e o :root que remapeia os tokens canônicos saíram
 * daqui para /includes/identidade-tokens.css (shared/), porque o ADMIN passou
 * a herdar a mesma identidade e os valores não podem viver em dois lugares.
 * Ele é carregado logo antes deste arquivo — não redefinir --water/--ink/
 * --line/--radius nem @font-face aqui.
 *
 * Referências: identidade-visual/front.html, internas.html e
 * C3308-26_portal_transparencia_home.jpg.
 */

/* ══════════════════════════════════════
   3. NEUTRALIZAÇÃO DO SELETOR `nav` GLOBAL
   portal.css estiliza o ELEMENTO `nav` como se ele fosse o chrome inteiro
   (sticky, altura fixa, glass, padding 48px). O chrome novo usa <header>
   com <nav> aninhados — sem este reset, cada <nav> interno viraria uma
   barra sticky de 64px. Especificidade (0,1,1) vence (0,0,1) inclusive
   dentro das media queries de portal.css.
   ══════════════════════════════════════ */
.id-topbar nav,
.id-header nav,
.id-footer nav,
/* Os <nav> de dentro do conteúdo precisam do mesmo reset: sem ele o breadcrumb
   e a paginação viram barras sticky de 64px com vidro fosco no meio da página,
   e o padding de 48px do seletor global empurra o texto para dentro, tirando-o
   da coluna do .container. */
main nav.page-breadcrumb,
main nav.paginacao{
  position:static;height:auto;padding:0;gap:0;
  background:none;border-bottom:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  display:flex;align-items:center;justify-content:flex-start;
  transition:none;z-index:auto;
}
/* .paginacao redeclara display/justify-content/padding em pages.css (0,1,0),
   mas não position/height/background — por isso precisa do reset acima. */
main nav.paginacao{justify-content:center;padding:24px 0}

/* Skip link — acessibilidade (não existia antes) */
.id-skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--id-primary);color:var(--id-white);
  padding:10px 18px;border-radius:0 0 var(--id-radius) 0;
  font-size:14px;font-weight:700;text-decoration:none;
}
.id-skip:focus{left:0;color:var(--id-white)}

/* ══════════════════════════════════════
   4. TOP BAR
   Valores derivados da arte C3308-26_portal_transparencia_home.jpg @1920px
   e do header oficial de cesan.com.br: fundo bege, sem CTA, sem separador,
   ícones sociais + selo Transparência alinhados à direita.
   ══════════════════════════════════════ */
/* As medidas com clamp() estão calibradas para bater EXATAMENTE com a arte
   quando a viewport tem 1920px (largura do JPG) e encolherem por vw abaixo
   disso. Ex.: .9vw @1920 = 17,3px = o corpo de texto medido na arte. */
.id-topbar{
  background:var(--id-beige);
  font-size:clamp(12px,.75vw,14px);
}
/* Full-bleed: na arte a top bar e o header sangram até a borda da viewport —
   só o conteúdo da página fica em container. Conteúdo alinhado à direita,
   terminando a 37px da borda (medido: x=1883 de 1920). */
.id-topbar-inner{
  /* padding-top 11 / bottom 0 deixa a topbar com 33px (11 + os 22px do maior
     item, o .id-social). Somados aos 11px de dente do .id-header-right dao a
     faixa bege de 44px, e o centro do icone cai em y=22 — exatamente a metade
     dela. Centrar o icone nos 33px da topbar era o que fazia o conjunto ler
     como duas faixas empilhadas. O bottom zerado evita que o icone passe do
     fim da topbar e seja coberto pelo header, que tem z-index maior. */
  max-width:none;margin:0;padding:11px clamp(12px,2vw,37px) 0;
  display:flex;align-items:center;justify-content:flex-end;gap:18px;
}
/* gap 32px @1920: centros dos ícones sociais medidos a ~58px de distância. */
.id-topbar-right{display:flex;align-items:center;gap:clamp(12px,1.7vw,32px)}
.id-social{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;color:var(--id-primary);
  transition:color .15s;
}
.id-social svg{width:16px;height:16px;fill:currentColor;display:block}
.id-social:hover{color:var(--id-primary-d)}
.id-selo{
  display:inline-flex;align-items:center;gap:clamp(8px,.85vw,16px);
  font-weight:700;color:var(--id-primary-d);
  text-decoration:none;margin-left:10px;
}
.id-selo:hover{color:var(--id-primary-d);text-decoration:underline}
/* 24px = tamanho natural do PNG oficial (icon-transparencia). Na arte o selo
   aparece com 34px, mas ampliar o bitmap borra — 10px de desvio, invisível. */
.id-selo-badge{
  width:20px;height:18px;display:block;flex-shrink:0;
}

/* ══════════════════════════════════════
   5. HEADER PRINCIPAL — logo + corte diagonal
   Medidas derivadas da arte C3308-26_portal_transparencia_home.jpg @1920px
   e do header oficial de cesan.com.br.
   ══════════════════════════════════════ */
.id-header{
  /* O branco fica AQUI, cobrindo a largura toda, e nao no .id-brand: o bloco
     branco precisa ir ate a DIAGONAL, nao ate a borda reta do .id-brand. Com o
     branco no .id-brand sobrava uma cunha entre a borda reta dele e a diagonal
     do azul, por onde vazava a faixa bege de tras. */
  background:var(--id-white);
  /* offset-y (2) > blur/2 (1,5): a sombra nao pode subir acima do topo do
     header. Com o 0 1px 3px anterior ela vazava ~0,5px para cima e, como este
     bloco tem z-index 60 e a .id-topbar nao tem, pintava uma linha 1px mais
     escura em cima da faixa bege — que entao lia como duas faixas emendadas. */
  box-shadow:0 2px 3px -1px rgba(26,32,44,.12);
  position:relative;z-index:60;
}
.id-header-inner{
  max-width:none;margin:0;padding:0;
  display:flex;align-items:stretch;
}
/* O bloco branco tem a largura do próprio logo + respiro — não uma fração da
   tela. Na arte ele ocupa 35% da largura, mas ali a faixa do Portal só tem 3
   itens de menu; com os 8 de MENU_ITEM esse bloco empurraria metade do menu
   para fora da tela. Encolhê-lo é o que faz o conjunto caber até 1152px. */
.id-brand{
  flex:0 0 auto;min-width:0;max-width:none;
  display:flex;align-items:center;justify-content:flex-start;
  /* Logo encostado na diagonal: 20px de folga ate a borda do bloco branco.
     O padding-left e que dimensiona o bloco — o direito e so o respiro. */
  padding:0 20px 0 clamp(16px,12.8vw,245px);text-decoration:none;
}
.id-brand img{width:clamp(140px,11vw,212px);height:auto;display:block}

.id-header-right{
  flex:1;min-width:0;
  min-height:128px;
  /* Medidas da faixa do Portal, promovidas a token porque o menu corporativo
     (linha de cima) precisa terminar no MESMO x do menu do Portal (linha de
     baixo) em qualquer largura. Antes o corpnav usava um padding-right em vw
     calibrado só para 1920px e as duas linhas divergiam ao estreitar a tela. */
  --nav-pr:clamp(14px,1.6vw,32px);   /* padding-right da .id-navbar     */
  --nav-gap:clamp(14px,1.7vw,34px);  /* gap da .id-navbar               */
  --search-w:clamp(92px,7vw,150px);  /* input da busca (botao = 34px)   */
  /* Onde as duas linhas de menu terminam:
     --nav-base = borda esquerda da busca (alinha os menus entre si);
     --nav-end  = borda direita do conteudo da pagina, replicando o gutter do
                  .container de pages.css (max-width 1400 + padding 48).
     Vale o MAIOR: em tela larga manda o conteudo, em tela estreita manda a
     busca — senao os menus passariam por baixo dela. */
  --nav-base:calc(var(--nav-pr) + var(--search-w) + 34px + var(--nav-gap));
  --nav-end:calc(max(0px,(100vw - 1400px)/2) + 48px);
  /* Recuo fino pedido no ajuste visual: desloca as DUAS linhas de menu 15px
     para a esquerda, sem mexer na busca nem no wordmark. Some aos dois calculos
     acima para que os menus continuem alinhados entre si. */
  --nav-shift:15px;
  /* "Dente": os 11px de topo deste bloco sao bege, nao azul — juntam-se aos
     33px da .id-topbar e formam UMA faixa bege de 44px (mesma cor, sem emenda
     visivel), mais alta do lado direito que o bloco branco da logo.
     Precisa ser border-top e nao um elemento de fundo separado: o border entra
     no clip-path abaixo, entao a faixa bege acompanha a diagonal. Uma faixa
     por tras vazaria na cunha entre a borda reta do .id-brand e a diagonal.
     box-sizing:border-box (reset do portal.css) mantem o header em 128px. */
  border-top:11px solid var(--id-beige);
  display:flex;flex-direction:column;justify-content:flex-end;
  /* Cor chapada, sem bg-topo.jpg: a arte trazia o bloco branco e a diagonal
     desenhados dentro do arquivo, dimensionados para o .id-brand antigo
     (flex:0 0 35%). Com o brand reduzido a `auto`, os ~37% brancos do JPG
     passaram a cair dentro deste bloco e viravam faixa branca solta. A
     diagonal vive no clip-path abaixo. */
  background:var(--id-primary);
  /* Corte diagonal: bloco branco do logo é MAIS LARGO embaixo. Inclinação
     medida no header oficial (identidade-visual/image.png): a borda vai de
     x=298 em y=46 a x=320 em y=121, ou seja 22px de deslocamento em 75px de
     altura = 0,293 de x por y. Sobre os 128px deste bloco → 38px. */
  clip-path:polygon(0 0, 100% 0, 100% 100%, 38px 100%);
}

/* Linha 1 — nav corporativa CESAN.
   Seletor prefixado com .id-header de propósito: o reset acima
   (`.id-header nav`) tem especificidade (0,1,1) e venceria `.id-corpnav`
   sozinho, zerando gap/padding/justify-content. */
.id-header .id-corpnav{
  flex:1;align-items:center;justify-content:flex-end;flex-wrap:wrap;
  gap:clamp(20px,2.7vw,52px);
  /* Alinhamento à direita com o menu do Portal, por construção e não por
     calibração: reproduz exatamente o que fica à direita daquela faixa —
     padding do navbar + busca (input + botão de 34px) + gap. Assim as duas
     linhas terminam no mesmo x em QUALQUER largura. */
  padding:0 calc(max(var(--nav-end),var(--nav-base)) + var(--nav-shift)) 0 0;
}
.id-corpnav a{
  font-size:clamp(12px,.75vw,14px);font-weight:500;color:var(--id-white);
  text-decoration:none;white-space:nowrap;transition:color .15s;
}
.id-corpnav a:hover,.id-corpnav a:focus-visible{color:var(--id-secondary)}

/* Linha 2 — barra do Portal da Transparência */
/* 62px de altura + 103px da nav corporativa = os 165px do header na arte.
   padding-left 88px @1920: o wordmark começa em x=760 e o bloco azul, já
   descontada a diagonal, em x=672.

   DESVIO CONSCIENTE em relação à arte, nas duas medidas horizontais desta
   faixa (gap do wordmark e padding-right):
   a arte tem 3 itens de menu (Dados/Serviços/Sobre) e reserva 228px de
   gutter à direita + 88px de respiro após o wordmark. O portal tem 7-8
   itens em MENU_ITEM: com as medidas da arte, só 2 caberiam e o resto
   ficaria fora da tela. Gutter e gap foram comprimidos até o ponto em que
   o conjunto inteiro cabe em 1920px. Para voltar ao valor exato da arte
   (quando/se o menu for reduzido a 3 itens): gap 4.6vw/88px e
   padding-right 11.9vw/228px. */
.id-navbar{
  background:var(--id-secondary);
  height:48px;flex-shrink:0;
  display:flex;align-items:center;gap:var(--nav-gap);
  padding:0 var(--nav-pr) 0 clamp(66px,3.9vw,75px);
}
.id-navbar-title{
  font-size:clamp(15px,1.05vw,20px);font-weight:700;font-style:italic;
  color:var(--id-white);white-space:nowrap;flex-shrink:0;
}
.id-navbar-title:hover{color:var(--id-white)}
/* UMA linha só, como no referencial. O projeto tem 8 itens em MENU_ITEM
   (o front.html tem 3), então os links encolhem por clamp e, se ainda assim
   não couberem em larguras intermediárias, a própria faixa rola na
   horizontal — nunca o body. */
.id-header .id-navlinks{
  /* flex:0 1 auto (nao 1 1) para a faixa ter a largura do proprio conteudo:
     com margin-left:auto ela e empurrada para a direita, deixando o wordmark
     "Portal da Transparencia" fixo na esquerda. flex-shrink:1 preserva o
     scroll horizontal desta faixa quando os 8 itens nao cabem. */
  flex:0 1 auto;min-width:0;margin-left:auto;
  /* Faixa de 22px reservada para a máscara de fade morrer em cima de espaço
     vazio, nunca em cima do último item ("Relatórios"). Antes o container era
     flex:1 1 auto e sobrava folga natural; agora ele tem a largura exata do
     conteúdo, então a folga precisa ser explícita. O margin negativo devolve
     esses 22px ao layout, mantendo o alinhamento com o menu corporativo. */
  /* -22px = so cancela o padding acima (faixa termina na busca). Acima disso,
     recua junto com o corpnav ate a borda do conteudo — o max() garante que
     nunca passe por baixo da busca em telas estreitas. */
  padding-right:22px;
  margin-right:calc(var(--nav-shift) + max(-22px,calc(var(--nav-end) - var(--nav-base) - 22px)));
  /* gap da arte = 67px @1920; comprimido para 26px pelo mesmo motivo do
     bloco .id-navbar acima (7-8 itens em vez dos 3 do referencial). */
  flex-wrap:nowrap;gap:clamp(10px,.95vw,19px);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
  /* Fade na borda direita: sinaliza que a faixa continua quando o conjunto
     de itens não cabe (abaixo de ~1400px com os 8 itens atuais). Quando cabe,
     a máscara incide sobre espaço vazio e é imperceptível. */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
}
.id-header .id-navlinks::-webkit-scrollbar{display:none}
/* Navy #005596 sobre cyan #00ADEF = 2,87:1 — reprova WCAG AA. Desvio
   aprovado pelo cliente em favor da fidelidade à identidade visual. */
.id-navlink{
  /* 18px é o corpo da arte; com 7-8 itens só cabe até ~15px @1920. */
  font-size:clamp(12px,.73vw,14px);font-weight:700;
  color:var(--id-primary);
  text-decoration:none;padding:4px 0;border-radius:0;
  white-space:nowrap;flex:0 0 auto;transition:color .15s;
}
.id-navlink:hover{color:var(--id-white)}
.id-navlink.on{color:var(--id-white)}
/* Sem margin-left:auto no desktop: com ele E o auto do .id-navlinks, a folga
   livre da faixa era dividida entre os dois, e o fim do menu do Portal deixava
   de ser previsível a partir da largura da busca — que é o que o corpnav usa
   para se alinhar. Agora só o .id-navlinks tem auto: ele encosta na busca,
   separado apenas pelo gap. No mobile o auto volta (ver @media). */
.id-navtools{display:flex;align-items:center;gap:10px;flex-shrink:0}

.id-search{display:flex;align-items:center;flex-shrink:0}
.id-search input{
  border:none;outline:none;background:var(--id-white);
  font-family:var(--id-font);font-size:13px;color:var(--id-on-surface);
  height:32px;padding:0 10px;width:var(--search-w);min-width:0;
  border-radius:4px 0 0 4px;
}
.id-search input::placeholder{color:var(--id-on-variant);opacity:.75}
.id-search input:focus{box-shadow:inset 0 0 0 2px var(--id-primary)}
.id-search button{
  background:var(--id-primary);color:var(--id-white);
  border:none;cursor:pointer;width:34px;height:32px;padding:0;
  border-radius:0 4px 4px 0;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.id-search button:hover{background:var(--id-primary-d)}
.id-search button ion-icon{font-size:16px}

.id-navtoggle{
  display:none;align-items:center;justify-content:center;
  color:var(--id-white);font-size:26px;padding:4px 6px;
  background:none;border:none;cursor:pointer;
}

/* ── Chrome no mobile: sem diagonal, empilhado ── */
@media(max-width:900px){
  /* Sem dente no mobile: o padding volta a ser simetrico, os icones centram na
     propria topbar. */
  .id-topbar-inner{padding:5px 16px;gap:12px}
  .id-topbar-right{gap:12px}
  .id-header-inner{padding:0 16px;flex-direction:column;align-items:stretch}
  .id-brand{flex:0 0 auto;min-width:0;max-width:none;padding:12px 0;justify-content:center}
  .id-brand img{width:150px}
  .id-header-right{
    clip-path:none;
    min-height:auto;
    margin:0 -16px;
    /* sem diagonal e com blocos empilhados o "dente" bege nao tem funcao */
    border-top:none;
  }
  .id-header .id-corpnav{justify-content:center;gap:16px;padding:8px 16px}
  .id-corpnav a{font-size:13px}
  .id-navbar{height:auto;padding:8px 16px;gap:10px;flex-wrap:wrap}
  .id-navbar-title{font-size:18px}
  .id-navtoggle{display:inline-flex}
  /* .id-navlinks vira lista vertical escondida (order:3), entao o auto volta
     para ca — e o que mantem a busca encostada na direita da faixa. */
  .id-navtools{gap:6px;margin-left:auto}
  .id-search input{width:110px}

  /* Menu colapsado — #navLinks é alternado por portal.js (classe .open).
     overflow volta a visible: aqui a nav é uma lista vertical, não uma faixa
     rolável. */
  .id-header .id-navlinks{
    display:none;order:3;flex:1 0 100%;
    flex-direction:column;align-items:stretch;gap:0;
    overflow:visible;
    background:var(--id-primary);
    margin:8px -16px -8px;padding:4px 0;
  }
  .id-header .id-navlinks.open{display:flex}
  /* Sobre fundo --id-primary o navlink precisa ser branco, senão fica
     navy sobre navy (ilegível). */
  .id-navlink{
    color:var(--id-white);
    padding:12px 16px;border-radius:0;font-size:15px;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .id-navlink:last-child{border-bottom:none}
  .id-navlink.on{background:rgba(255,255,255,.14)}
}
/* 600px e não 480: entre 481 e 600 o wordmark + campo de busca ainda dividem
   a mesma linha e ficam espremidos (o headless do Chrome, por exemplo, tem
   janela mínima de 500px). */
@media(max-width:600px){
  .id-topbar{font-size:12px}
  .id-topbar-inner{gap:10px;flex-wrap:wrap;justify-content:center}
  .id-topbar-right{margin-left:0;gap:12px}
  .id-corpnav a{font-size:12px}
  /* Barra do portal em duas linhas: wordmark em cima, busca + hambúrguer
     embaixo. Em 360px os dois não cabem lado a lado. */
  .id-navbar{gap:8px}
  .id-navbar-title{flex:1 0 100%;font-size:16px;text-align:center}
  .id-navtools{flex:1 0 100%;margin-left:0;gap:8px}
  .id-search{flex:1;min-width:0}
  .id-search input{width:100%}
  .id-navtoggle{flex-shrink:0}
}
@media(max-width:480px){
  .id-header .id-corpnav{gap:12px}
}

/* ══════════════════════════════════════
   6. FOOTER
   ══════════════════════════════════════ */
.id-footer{
  background:var(--id-primary);color:var(--id-white);
  border-top:none;padding:0;margin-top:56px;
}
.id-footer-inner{max-width:1200px;margin:0 auto;padding:0 24px}
.id-footer-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
  padding:36px 0;border-bottom:1px solid rgba(255,255,255,.2);
}
.id-footer-logo{
  height:52px;width:auto;display:block;
  filter:brightness(0) invert(1);opacity:.85;
}
.id-footer-logo-svg{height:52px;width:auto;display:none}
.id-footer-info{flex:1;min-width:240px;font-size:14px;line-height:1.6}
.id-footer-addr{color:rgba(255,255,255,.9);margin-bottom:14px}
.id-footer-social{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.id-footer-social .id-social{color:var(--id-white);width:20px;height:20px}
.id-footer-social .id-social:hover{color:var(--id-secondary)}
.id-footer-social .id-social svg{width:18px;height:18px}
.id-footer-sep{
  width:1px;height:18px;background:rgba(255,255,255,.35);display:inline-block;
}
.id-footer-social .id-selo{color:var(--id-white);font-weight:400}
.id-footer-social .id-selo:hover{color:var(--id-white)}
.id-footer-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--id-secondary-aa);color:var(--id-white);
  font-size:15px;font-weight:700;text-decoration:none;
  padding:12px 22px;border-radius:6px;transition:background .15s;
}
.id-footer-btn:hover{background:var(--id-secondary);color:var(--id-white)}
.id-footer-btn ion-icon{font-size:22px}

/* Colunas de links (FOOTER_LINK) — não constam no referencial, mas são
   navegação existente do portal e não podem ser removidas. */
.id-footer-links{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  padding:32px 0;border-bottom:1px solid rgba(255,255,255,.2);
}
.id-footer-col-title{
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--id-white);margin-bottom:12px;
}
.id-footer-collist{display:flex;flex-direction:column;gap:7px}
.id-footer-link{
  font-size:13px;color:rgba(255,255,255,.82);text-decoration:none;
  transition:color .15s;
}
.id-footer-link:hover{color:var(--id-white);text-decoration:underline}
.id-footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding:16px 0 20px;
}
.id-footer-copy{font-size:12px;color:#bfdbfe}
.id-footer-legal{display:flex;gap:16px;flex-wrap:wrap}
.id-footer-legal a{font-size:12px;color:#bfdbfe;text-decoration:none}
.id-footer-legal a:hover{color:var(--id-white);text-decoration:underline}

@media(max-width:900px){
  .id-footer-inner{padding:0 16px}
  .id-footer-top{flex-direction:column;align-items:center;text-align:center;padding:28px 0}
  .id-footer-social{justify-content:center}
  .id-footer-links{grid-template-columns:1fr 1fr;gap:24px}
  .id-footer-bottom{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .id-footer-links{grid-template-columns:1fr}
}

/* ══════════════════════════════════════
   7. HOME — HERO
   O chrome deixou de ser sticky, então o hero não precisa mais compensar a
   altura da nav com margin negativa.
   ══════════════════════════════════════ */
.hero-banner{
  height:clamp(340px,42vw,540px);
  min-height:340px;
  margin-top:0;padding-top:0;
}
.hero-banner-img{object-position:center 45%}
.hero-banner-overlay{
  background:linear-gradient(90deg, rgba(0,40,70,.62) 0%, rgba(0,40,70,.30) 55%, rgba(0,40,70,.05) 100%);
}
.hero-banner-content{
  max-width:1200px;padding:0 40px;
  align-items:flex-start;text-align:left;justify-content:center;
}
.hero-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.14em;
  color:rgba(255,255,255,.85);margin-bottom:8px;
}
.hero-h{
  font-size:clamp(30px,4.4vw,58px);
  font-weight:700;letter-spacing:-.01em;line-height:1.05;
  color:var(--id-white);margin-bottom:0;
}
/* O <em> da linha 2 vira o "DESTAQUE" do mockup: caixa alta, peso normal.
   Itálico seria sintetizado (só existe Frutiger BoldItalic). */
.hero-h em{
  display:block;font-style:normal;font-weight:400;
  font-size:.46em;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.92);margin-top:2px;
}
/* Fallback do subtítulo quando a faixa está desligada no admin. Sem fundo
   rosa — é texto puro sobre a foto, como era antes da faixa existir. O
   line-height mais alto dá respiro entre as linhas quebradas com Enter. */
.hero-sub{
  color:rgba(255,255,255,.94);
  font-size:clamp(15px,1.6vw,20px);font-weight:400;line-height:1.6;
  max-width:640px;margin:14px 0 24px;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.hero-actions{justify-content:flex-start;margin-bottom:18px}
.btn-hero-prim{
  background:var(--id-white);color:var(--id-primary);
  border-radius:var(--id-radius);font-size:14px;font-weight:700;padding:10px 22px;
}
.btn-hero-prim:hover{background:var(--id-tile);color:var(--id-primary)}
.btn-hero-ghost{
  background:transparent;border:1px solid rgba(255,255,255,.75);
  border-radius:var(--id-radius);font-size:14px;font-weight:700;padding:10px 22px;
}
.hero-search-row{border-radius:var(--id-radius)}
.hero-search-row button{
  background:var(--id-primary);color:var(--id-white);
  border-radius:6px;font-weight:700;
}
.hero-search-row button:hover{background:var(--id-primary-d)}
.hero-dots{bottom:18px}
.hero-dot-btn{background:rgba(255,255,255,.55)}
.hero-dot-btn.active{background:var(--id-secondary);transform:scale(1.3)}
.hero-arrow{border-radius:var(--id-radius)}

@media(max-width:900px){
  .hero-banner{height:auto;min-height:0;padding:36px 0}
  .hero-banner-content{padding:0 20px;height:auto}
  .hero-actions{display:flex;flex-wrap:wrap}
}
@media(max-width:480px){
  .hero-banner{min-height:0}
  .hero-banner-content{justify-content:center;padding:0 16px}
  .hero-actions{display:none}
}

/* ══════════════════════════════════════
   7.1 HOME — FAIXA (ribbon) GLOBAL DO HERO
   Estrutura oficial da identidade visual (proporções medidas na arte de
   referência, 1345x430px). A faixa NÃO vive no rodapé do hero: ela nasce no
   FLUXO, como irmã imediatamente posterior ao <h1 class="hero-h">, logo abaixo
   da linha 2 do título. Os botões e a busca continuam fluindo abaixo dela.

   Dentro do wrapper .hero-ribbon há DOIS elementos independentes:

     1. .hero-ribbon-bar    faixa sólida FULL-BLEED (borda a borda da viewport).
                            Texto encostado numa borda com recuo simples,
                            crescendo para o centro — não centraliza, não
                            estica. Sem seta, sem ondas aqui dentro.
     2. .hero-ribbon-waves  ondulação de 8 linhas ancorada na borda OPOSTA ao
                            texto, deslocada para BAIXO — sobrepõe o terço
                            inferior da faixa e escapa por baixo dela. Fundo
                            transparente (a foto aparece entre as linhas) e
                            pintada POR CIMA do sólido.

   Cores/opacidade chegam em custom properties inline (--rb-cor, --rb-texto,
   --rb-alpha 0..100). A opacidade tinge só o FUNDO da faixa (color-mix) —
   nunca o texto, nunca as ondas.
   ══════════════════════════════════════ */

/* Geometria, normalizada pela altura da faixa (H = --rb-h):
     --rb-h       altura da faixa ≈ 23% da altura do hero (clamp preservado)
     --rb-drop    topo da ondulação = topo da faixa + 0.7 H
     --rb-wave-h  referência de onde o passo entre linhas é derivado (1.0 H /
                  8) — não é mais a altura final do bloco de ondas, que agora
                  varia com a contagem
     --rb-wave-w  largura da ondulação = 63% da largura do hero
     --rb-pad     recuo do texto na borda de ancoragem
     --rb-lines   contagem de linhas da ondulação; o PHP sobrescreve inline
                  quando `faixa_ondulacao` está ligado (0 = sem ondas)
     --rb-gap     passo vertical FIXO entre linhas, derivado da geometria
                  original de 8 linhas ocupando 1.0 H — o bloco de ondas
                  (.hero-ribbon-waves) cresce/encolhe multiplicando este
                  passo pela contagem, em vez de espremer linhas numa altura
                  fixa
   --rb-drop nasce em 0 e só sobe para .7 com a classe .hero-ribbon--ondas
   (emitida pelo PHP quando `faixa_ondulacao` está ligado): sem ondulação não
   há overhang, então a reserva de espaço abaixo da faixa encolhe junto. */
.hero-ribbon{
  --rb-h:clamp(88px,9vw,108px);
  --rb-drop:0;
  --rb-wave-h:1;
  --rb-wave-w:63%;
  --rb-pad:20px;
  --rb-lines:0;
  --rb-gap:calc(var(--rb-wave-h) * var(--rb-h) / 8);
}
.hero-ribbon--ondas{--rb-drop:.7}

/* Break-out full-bleed: .hero-banner-content é max-width:1200px + padding
   lateral e centralizado, então `50%` (do content box) menos `50vw` devolve
   exatamente o deslocamento até a borda da viewport. `align-self:stretch`
   com width:auto faz a largura usada virar contentBox + 2*offset = 100vw sem
   precisar declarar width:100vw. 100vw inclui a scrollbar, mas .hero-banner é
   overflow:hidden — o excesso é clipado, não vira scroll horizontal.

   margin-bottom reserva o overhang da ondulação (0.7 H) + respiro, para que as
   linhas não caiam por cima dos botões. Sem ondas o overhang é 0 e sobra só o
   respiro, porque as duas contas leem o mesmo --rb-drop. */
.hero-ribbon{
  position:relative;
  align-self:stretch;
  /* Bleed só do lado OPOSTO à âncora: a borda ancorada nasce alinhada com o
     <h1> (borda da coluna de conteúdo), a outra sangra até a viewport. */
  margin-left:0;
  margin-right:calc(50% - 50vw);
  margin-top:clamp(14px,2vw,26px);
  margin-bottom:calc(max(0px, var(--rb-drop) * var(--rb-h) + var(--rb-lines) * var(--rb-gap) - var(--rb-h)) + clamp(14px,2vw,26px));
  color:var(--rb-texto,var(--id-on-surface));
}
/* Só ondulação (faixa desligada): sem a barra o wrapper teria altura 0 e as
   ondas, que são absolutas, ficariam sem caixa. O min-height devolve a altura. */
.hero-ribbon--sem-barra{min-height:var(--rb-h)}

/* ── 1. FAIXA SÓLIDA ─────────────────────────────────────────────────────── */
.hero-ribbon-bar{
  position:relative;z-index:0;
  min-height:var(--rb-h);
  display:flex;align-items:center;justify-content:flex-start;
  padding:0 var(--rb-pad);
  /* 1ª declaração = fallback para navegador sem color-mix (fica opaco) */
  background:var(--rb-cor,var(--id-pink));
  background:color-mix(in srgb, var(--rb-cor,var(--id-pink)) calc(var(--rb-alpha,100) * 1%), transparent);
}
/* Espelhado: texto encostado à direita crescendo para a esquerda. */
.hero-ribbon--direita{margin-left:calc(50% - 50vw);margin-right:0}
.hero-ribbon--direita .hero-ribbon-bar{justify-content:flex-end;text-align:right}

/* Cresce a partir do recuo e termina onde acabar — não estica pela faixa.
   Nunca trunca: o texto quebra em quantas linhas precisar e a faixa cresce
   junto (min-height em vez de height no .hero-ribbon-bar). */
.hero-ribbon-text{
  /* Cresce até onde a ondulação começa, para as 8 linhas não passarem por
     baixo do texto. */
  flex:0 1 auto;min-width:0;
  max-width:calc(100% - var(--rb-wave-w) - var(--rb-pad));
  color:var(--rb-texto,var(--id-on-surface));
  font-size:clamp(15px,1.7vw,22px);font-weight:400;line-height:1.5;
}

/* ── 2. ONDULAÇÃO ────────────────────────────────────────────────────────── */
/* Irmã da faixa, não filha. z-index maior: a parte sobreposta aparece por cima
   do sólido. Sem background — a cor é só o stroke dos <path> e vem de
   --rb-texto (na arte oficial as ondas são brancas, iguais ao texto), logo
   --rb-alpha não entra aqui.

   O passo vertical entre linhas (--rb-gap) é FIXO — a mesma fração de 1/8 H
   de sempre — e a contagem vem da config (faixa_ondulacao_linhas, 1..20): é
   o bloco de ondas que muda de altura (--rb-lines * --rb-gap), não as linhas
   que espremem/afastam dentro de uma altura fixa. Cada linha tem sua onda
   centrada; o tiling do <pattern> repete só no eixo X. */
.hero-ribbon-waves{
  position:absolute;right:0;z-index:1;
  top:calc(var(--rb-drop) * var(--rb-h));
  width:var(--rb-wave-w);
  height:calc(var(--rb-lines) * var(--rb-gap));
  display:flex;flex-direction:column;
  pointer-events:none;
  color:var(--rb-texto,var(--id-on-surface));   /* currentColor dos <path> */
}
.hero-ribbon--direita .hero-ribbon-waves{right:auto;left:0}
.hero-ribbon-wave{flex:0 0 var(--rb-gap);height:var(--rb-gap);position:relative;display:block}
/* 8px = altura do tile do pattern; a onda ocupa y 2.5→5.5 dentro dele. */
/* A onda desliza. O deslocamento é 16px — o período exato do <pattern> —, o
   único valor que faz o fim do ciclo cair sobre um estado idêntico ao começo;
   qualquer outro produz um salto visível a cada volta. Como o tile só repete
   dentro do <rect>, arrastar o <svg> abriria 16px de vazio na cauda: daí a
   largura extra, que sai da área visível pelo overflow do .hero-ribbon-wave.

   O delay é NEGATIVO e proporcional ao índice da linha: começa cada uma em um
   ponto diferente do mesmo ciclo, sem espera inicial. Em fase as linhas leem
   como uma imagem escorregando; defasadas, leem como água. --rb-i vem inline
   do index.php porque a contagem é configurável (1..20) e nth-child fixo no
   CSS teria de enumerar os 20 casos. */
.hero-ribbon-wave{overflow:hidden}
.hero-ribbon-wave-svg{
  position:absolute;left:0;top:50%;
  height:8px;width:calc(100% + 16px);display:block;
  transform:translateY(-50%);
  animation:rb-wave-drift 3.4s linear infinite;
  animation-delay:calc(var(--rb-i,0) * -.38s);
}
@keyframes rb-wave-drift{
  from{transform:translate(0,-50%)}
  to  {transform:translate(-16px,-50%)}
}
/* Movimento perpétuo em elemento decorativo é gatilho clássico de desconforto
   vestibular; sem motion a onda fica no quadro inicial, que é a arte estática
   de antes. */
@media(prefers-reduced-motion:reduce){
  .hero-ribbon-wave-svg{animation:none}
}

/* A ondulação existe só acima de 900px. Abaixo disso ela some — ver o bloco
   seguinte, que é onde o corte acontece — então --rb-wave-w não é declarado
   aqui: qualquer valor seria reserva de espaço para um elemento oculto. */
@media(max-width:900px){
  .hero-ribbon{--rb-h:72px;--rb-pad:20px}
  .hero-ribbon-text{font-size:15px}
}
/* Ondulação não cabe: some. O corte é 900px porque --rb-wave-w é PERCENTUAL
   da barra — a fatia das ondas encolhe junto com a tela, mas o texto fica
   sempre com o resto, e esse resto vira faixa de uma coluna só. Medido antes
   deste bloco: 4 linhas a 900px, 5 a 768px, 7 a 600px e 10 a 481px, com a
   faixa esticando de 72px para 225px. Some a ondulação e o texto recupera a
   barra inteira.

   O corte é 900 e não 700 por causa de um degrau invertido que existia aqui:
   o bloco acima subia --rb-wave-w de 63% para 72% ao ATRAVESSAR 900px para
   baixo. A tela encolhia e o texto perdia mais 9 pontos da fatia dela, então
   901px (3 linhas, barra 88px) renderizava melhor que 900px (4 linhas, 90px).
   Sem ondas abaixo de 900 o degrau deixa de existir.

   Os tokens andam juntos e é de propósito: --rb-drop:0 zera a descida da
   onda E parte da reserva de espaço abaixo da faixa; --rb-wave-w:0% tira do
   max-width do texto o desvio de um elemento que não está mais na tela.
   --rb-gap:0px zera o resto da reserva (o termo --rb-lines * --rb-gap do
   margin-bottom) — e é --rb-gap que precisa ser zerado aqui, não --rb-lines:
   --rb-lines chega INLINE pelo PHP (style="--rb-lines:N"), e style inline
   vence media query, então zerá-lo aqui não teria efeito nenhum; --rb-gap
   só existe nesta folha de estilo, é o único ponto onde dá pra zerar a
   reserva no mobile. O seletor precisa citar .hero-ribbon--ondas porque essa
   classe declara --rb-drop:.7 com a mesma especificidade. */
@media(max-width:900px){
  .hero-ribbon,.hero-ribbon--ondas{--rb-drop:0;--rb-wave-w:0%;--rb-gap:0px}
  .hero-ribbon-waves{display:none}
  /* Largura cheia: o recuo lateral já vem do padding da barra (--rb-pad dos
     dois lados). Manter o termo --rb-pad no calc deixaria o recuo assimétrico,
     maior do lado onde a onda costumava entrar. */
  .hero-ribbon-text{max-width:100%}
}
@media(max-width:480px){
  .hero-ribbon{--rb-h:64px;--rb-pad:16px}
  .hero-ribbon-text{font-size:14px}
}

/* ══════════════════════════════════════
   8. HOME — ACESSO RÁPIDO (tiles)
   ══════════════════════════════════════ */
/* !important obrigatório: portal.js escreve `margin-top: -<altura>px` inline
   no .ql-strip para sobrepor a faixa ao hero. Na identidade nova os tiles
   ficam ABAIXO do hero (mockup) e style inline só cede a !important. */
.ql-strip{
  margin-top:0 !important;
  background:var(--id-surface);
  display:block;padding:0;
}
.ql-strip .ql-strip-inner{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:26px;padding:34px 40px;
  max-height:none;opacity:1;overflow:visible;
}
.ql-strip .ql-link{
  position:relative;
  flex:0 0 auto;width:112px;
  flex-direction:column;align-items:center;text-align:center;
  gap:10px;padding:0;
  background:none;border:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  color:var(--id-primary);
  font-size:13px;font-weight:400;line-height:1.3;
  white-space:normal;border-radius:0;
}
.ql-strip .ql-link ion-icon{
  box-sizing:content-box;
  font-size:40px;padding:24px;
  background:var(--id-tile);color:var(--id-primary);
  border-radius:12px;
  transition:background .2s,color .2s;
}
.ql-strip .ql-link:hover{
  color:var(--id-primary-d);background:none;box-shadow:none;transform:none;
}
.ql-strip .ql-link:hover ion-icon{background:#cfe0ea;color:var(--id-primary-d)}
/* O botão de colapso existia só para as pills sobre o hero; com os tiles
   abaixo do hero a faixa é sempre visível. */
.ql-toggle{display:none}

@media(max-width:900px){
  .ql-strip .ql-strip-inner{gap:18px;padding:26px 20px}
  .ql-strip .ql-link{width:96px;font-size:12px}
  .ql-strip .ql-link ion-icon{font-size:32px;padding:20px}
}
@media(max-width:480px){
  .ql-strip .ql-strip-inner{gap:14px;padding:22px 14px}
  .ql-strip .ql-link{width:calc(33.333% - 10px);min-width:88px}
  .ql-strip .ql-link ion-icon{font-size:28px;padding:16px}
}

/* ══════════════════════════════════════
   9. HOME — FAIXA DE KPIs
   ══════════════════════════════════════ */
.numbers{background:var(--id-primary)}
.numbers-inner{border-left:none;max-width:1200px;padding:0 24px}
.numbers .num-cell{
  border:none;padding:26px 18px;text-align:center;
}
.numbers a.num-cell:hover{background:rgba(255,255,255,.08)}
.numbers .num-label{
  color:rgba(255,255,255,.78);font-size:11px;font-weight:400;
  letter-spacing:.1em;margin-bottom:8px;
}
/* Sobrepõe .num-val.blue/.teal/.amber (mesma especificidade, fonte posterior) */
.numbers .num-val,
.numbers .num-val.blue,
.numbers .num-val.teal,
.numbers .num-val.amber{
  color:var(--id-white);
  font-size:clamp(26px,3vw,40px);font-weight:700;letter-spacing:-.02em;
}
.numbers .num-sub{color:rgba(255,255,255,.8);font-size:13px}
.numbers .num-trend{background:rgba(255,255,255,.18);color:var(--id-white)}

@media(max-width:900px){
  .numbers-inner{padding:0 16px}
  .numbers .num-cell{padding:20px 12px}
}

/* ══════════════════════════════════════
   10. HOME — SEÇÕES, CARDS E ATUALIZAÇÕES
   ══════════════════════════════════════ */
.section-divider{border-top:1px solid var(--id-outline)}
.sec-eyebrow{
  color:var(--id-primary);font-size:12px;font-weight:700;letter-spacing:.12em;
}
.sec-title{
  color:var(--id-primary);font-weight:700;letter-spacing:-.01em;
}
.sec-sub{color:var(--id-on-variant);font-weight:400;font-size:15px}

.card{border-radius:var(--id-radius);border:1px solid var(--id-outline)}
.card-title-sm{color:var(--id-primary);font-size:16px;font-weight:700}
.card-desc{color:var(--id-on-variant)}
.card-link{color:var(--id-primary);font-weight:700;font-size:13px}
.card-icon{border-radius:var(--id-radius);background:var(--id-tile);color:var(--id-primary)}

.split-h{color:var(--id-primary);font-weight:700}
.split-p{color:var(--id-on-variant);font-weight:400}
.split-num{color:var(--id-primary);font-weight:700}
.split-action{color:var(--id-primary);font-weight:700;font-size:14px}

/* Lista de "links de ação": rótulo bold primary + botão de ação ciano */
.fmt-box{border-radius:var(--id-radius);border:1px solid var(--id-outline)}
.fmt-title{color:var(--id-primary);font-size:16px;font-weight:700}
.fmt-sub{color:var(--id-on-variant);font-size:12px}
.fmt-icon{border-radius:var(--id-radius);background:var(--id-tile);color:var(--id-primary)}
a.fmt-box .fmt-dl{
  background:var(--id-secondary-aa);color:var(--id-white);
  border-radius:4px;padding:6px;font-size:16px;
}
a.fmt-box:hover .fmt-dl{background:var(--id-primary)}

/* Atualizações — card branco, uma coluna, faixa ciano no topo.
   O título da seção fica FORA de .updates-grid no PHP (index.php), então a
   faixa ciano do mockup é reproduzida como barra ::before do card e o
   título permanece acima, em --id-primary. */
.updates-grid{
  grid-template-columns:1fr;gap:0;
  background:var(--id-white);
  border:1px solid var(--id-outline);
  border-radius:var(--id-radius);
  overflow:hidden;
  box-shadow:0 2px 10px rgba(26,32,44,.06);
}
.updates-grid::before{
  content:"";display:block;height:8px;background:var(--id-secondary);
}
.updates-grid .update-item{
  border:none;border-bottom:1px solid var(--id-surface-dim);
  border-radius:0;padding:14px 22px;align-items:center;gap:14px;
}
.updates-grid .update-item:last-child{border-bottom:none}
.updates-grid a.update-item:hover{background:var(--id-surface-low)}
.updates-grid .update-icon{
  background:var(--id-tile);color:var(--id-primary);
  border-radius:var(--id-radius);width:32px;height:32px;margin-top:0;
}
/* O bloco sem classe entre o ícone e a seta agrupa data/título/descrição.
   Grid de 2 colunas põe a data à direita, como no mockup.
   :not(.update-icon) é obrigatório — o ícone TAMBEM é div filho direto de
   .update-item, e sem a exclusão ele herdava flex:1 (esticava de 32px para a
   metade da linha) e display:grid, que anulava a centralização do glifo. */
.updates-grid .update-item > div:not(.update-icon){
  flex:1;min-width:0;
  display:grid;grid-template-columns:1fr auto;
  align-items:baseline;column-gap:16px;
}
.updates-grid .update-title{
  grid-column:1;grid-row:1;
  color:var(--id-primary);font-size:15px;font-weight:700;margin-bottom:0;
}
.updates-grid .update-date{
  grid-column:2;grid-row:1;
  color:var(--id-on-variant);font-size:13px;margin-bottom:0;white-space:nowrap;
}
.updates-grid .update-desc{
  grid-column:1 / -1;grid-row:2;
  color:var(--id-on-variant);font-size:13px;margin-top:4px;
}
.updates-grid .update-arrow{color:var(--id-primary);margin-top:0}

@media(max-width:480px){
  .updates-grid .update-item > div:not(.update-icon){grid-template-columns:1fr}
  .updates-grid .update-date{grid-column:1;grid-row:2;margin-top:2px}
  .updates-grid .update-desc{grid-row:3}
}

/* Banner CTA (Ouvidoria) */
.banner-cta-inner{border-radius:var(--id-radius)}
.banner-cta-overlay{
  background:linear-gradient(100deg, rgba(0,40,70,.85) 0%, rgba(0,40,70,.55) 100%);
}
.banner-cta-btn{
  background:var(--id-secondary-aa);color:var(--id-white);
  border-radius:6px;font-weight:700;font-size:15px;
}
.banner-cta-btn:hover{background:var(--id-secondary);color:var(--id-white)}

/* Botões reaproveitáveis (portal.css / pages.css) */
.btn,.btn--primary{border-radius:var(--id-radius)}
.btn--primary{background:var(--id-secondary-aa);color:var(--id-white)}
.btn--primary:hover{background:var(--id-primary);color:var(--id-white)}

/* ══════════════════════════════════════════════════════════════════════
   11. PÁGINAS INTERNAS (referencial internas.html)
   Vale para /despesas, /receitas, /contratos, /obras, /empregados e, por
   compartilharem templates/page-header.php, também para /busca,
   /dados-abertos, /ouvidoria e as páginas editoriais. Tudo por
   sobreposição das classes que já existem em pages.css — as únicas
   adições de markup foram o breadcrumb, o wrapper .page-header__card e o
   círculo decorativo, todos em templates/page-header.php.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 11.1 Breadcrumb ───────────────────────────────────────────────── */
.page-breadcrumb{font-size:14px;margin-bottom:14px}
.page-breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.page-breadcrumb li{display:inline-flex;align-items:center}
.page-breadcrumb a{color:var(--id-primary);font-weight:500;text-decoration:none}
.page-breadcrumb a:hover,
.page-breadcrumb a:focus-visible{color:var(--id-primary-d);text-decoration:underline}
.page-breadcrumb__sep{color:var(--id-outline);margin:0 8px;user-select:none}
.page-breadcrumb__current{color:var(--id-on-surface);font-weight:700}

/* ── 11.2 Faixa de título ──────────────────────────────────────────── */
/* pages.css entrega .page-header como faixa cinza de largura total com
   border-bottom. Aqui ela vira apenas o espaçador do card navy. */
.page-header{background:transparent;border-bottom:none;padding:22px 0 0}
.page-header__card{
  position:relative;overflow:hidden;
  background:var(--id-primary);color:var(--id-white);
  border-radius:var(--id-radius);
  padding:32px;
  box-shadow:0 2px 10px rgba(26,32,44,.08);
}
.page-header__card .page-header__top{align-items:center;gap:16px}
.page-header__title{
  color:var(--id-white);
  font-size:clamp(24px,3vw,36px);font-weight:700;letter-spacing:-.01em;
}
.page-header__subtitle{
  color:rgba(255,255,255,.9);
  font-size:18px;font-weight:500;margin-top:6px;line-height:1.4;
}
/* Ícone: branco translúcido, não compete com o título */
.page-header__icon{background:rgba(255,255,255,.14);border-radius:var(--id-radius)}
.page-header__icon ion-icon{color:var(--id-white)}
/* Badge → pill branco com bolinha verde, como o "Atualizado mensalmente"
   do mockup. Navy sobre branco = 7,6:1. */
.page-header__badge,
.page-source-badge{
  background:var(--id-white);color:var(--id-primary);
  border:none;border-radius:999px;
  font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  padding:6px 14px;margin-left:auto;align-self:flex-start;
  box-shadow:0 1px 3px rgba(26,32,44,.18);
}
.page-header__badge ion-icon,
.page-source-badge ion-icon{font-size:15px;color:var(--id-primary)}
.page-header__badge::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:#22c55e;flex-shrink:0;
}
/* Círculo decorativo do canto inferior direito */
.page-header__deco{
  position:absolute;right:-32px;bottom:-64px;
  width:192px;height:192px;border-radius:50%;
  border:20px solid rgba(255,255,255,.05);
  pointer-events:none;
}
@media(max-width:768px){
  .page-header__card{padding:22px}
  .page-header__subtitle{font-size:15px}
  .page-header__badge,.page-source-badge{margin-left:0;font-size:13px}
  .page-header__deco{display:none}
}

/* ── 11.3 Cabeçalho de seção ───────────────────────────────────────── */
.section-title,
.table-group-title,
.editorial-content h2{
  display:inline-block;
  color:var(--id-primary);font-size:24px;font-weight:700;
  padding-bottom:8px;border-bottom:2px solid var(--id-outline);
}

/* ── 11.4 Cards de tabela ──────────────────────────────────────────── */
.table-wrapper{
  background:var(--id-white);
  border:1px solid var(--id-outline);
  border-radius:var(--id-radius);
  box-shadow:0 2px 10px rgba(26,32,44,.06);
  overflow-x:auto;   /* a tabela rola aqui dentro, nunca o body */
}
.data-table th{
  background:var(--id-primary);color:var(--id-white);
  font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  padding:12px 16px;border-bottom:none;
}
.data-table th.text-right{text-align:right}
.data-table th.text-center{text-align:center}
.data-table th.sortable:hover{background:var(--id-primary-d);color:var(--id-white)}
.data-table th.sortable::after{border-top-color:rgba(255,255,255,.7)}
.data-table th.sort-asc::after{border-bottom-color:var(--id-white)}
.data-table th.sort-desc::after{border-top-color:var(--id-white)}
.data-table td{
  padding:16px;border-bottom:1px solid var(--id-outline);
  color:var(--id-on-surface);font-size:14px;
}
.data-table tbody tr:nth-child(even){background:rgba(247,249,252,.5)}
.data-table tbody tr:hover{background:var(--id-surface-low)}
.data-table .num,.data-table .money,.data-table .mono{
  font-variant-numeric:tabular-nums;text-align:right;font-size:14px;
}
.data-table td a{color:var(--id-primary);font-weight:500}
.data-table td a:hover{color:var(--id-primary-d);text-decoration:underline}
/* Linha de total */
.data-table tfoot td{
  background:var(--id-surface-dim);
  color:var(--id-primary);font-weight:700;
  border-top:1px solid var(--id-outline);border-bottom:none;
}
.data-table tfoot td strong{color:var(--id-primary)}
/* `.data-table .money` de pages.css tem duas classes (0,2,0) e vence
   `.data-table tfoot td` (0,1,1) — sem isto o valor do total sai cinza e
   regular enquanto o rótulo ao lado sai navy e bold. */
.data-table tfoot td.num,
.data-table tfoot td.money,
.data-table tfoot td.mono{color:var(--id-primary);font-weight:700}

/* ── 11.5 Modais ───────────────────────────────────────────────────── */
.modal-box{
  border-radius:var(--id-radius);
  overflow:hidden;   /* a faixa navy do header sangra até a borda arredondada */
  box-shadow:0 20px 48px rgba(26,32,44,.28);   /* elevação maior: é overlay */
}
.modal-header{
  background:var(--id-primary);color:var(--id-white);
  border-bottom:none;padding:20px 24px;align-items:flex-start;
}
.modal-heading{flex:1;min-width:0}
.modal-header h3{
  margin:0;color:var(--id-white);
  font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.01em;
  /* 2 linhas em vez do truncamento em 1 linha do estilo inline anterior */
  white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.modal-eyebrow{
  display:block;margin-bottom:4px;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.72);
}
.modal-close{
  background:rgba(255,255,255,.18);color:var(--id-white);
  border-radius:6px;width:34px;height:34px;transition:background .15s;
}
.modal-close:hover{background:rgba(255,255,255,.30)}
.modal-close:focus-visible{outline:2px solid var(--id-white);outline-offset:2px}
.modal-body{background:var(--id-white)}

/* Densidade: 7 colunas não cabem confortavelmente no padding 16px do
   .data-table td padrão das páginas internas. */
.modal-body .data-table{font-size:13px}
.modal-body .data-table th,
.modal-body .data-table td{padding:11px 14px}

@media(max-width:700px){
  .modal-header h3{font-size:18px}
  .modal-close{width:40px;height:40px}
}

/* ── 11.6 Badges (PF/PJ, tipo de documento, status) ────────────────── */
/* .badge-alt não tinha regra nenhuma em pages.css/portal.css — PJ saía sem
   fundo. Navy = tipo primário (PF), ciano-AA = secundário (PJ). */
.badge{
  border-radius:999px;text-transform:uppercase;letter-spacing:.05em;
  font-size:12px;font-weight:700;padding:4px 12px;
  background:var(--id-primary);color:var(--id-white);
}
.badge-alt{background:var(--id-secondary-aa);color:var(--id-white)}
.badge--blue{background:var(--id-primary);color:var(--id-white)}
.badge--teal,.badge--green{background:var(--id-secondary-aa);color:var(--id-white)}
.badge--gray{background:var(--id-on-variant);color:var(--id-white)}

/* ── 11.7 Filtros ──────────────────────────────────────────────────── */
.card-filter-bar,
.filter-bar{
  background:var(--id-white);
  border:1px solid var(--id-outline);
  border-radius:var(--id-radius);
  box-shadow:0 2px 10px rgba(26,32,44,.06);
  padding:18px 24px;gap:12px;
}
.card-filter-input,.card-filter-select,
.filter-bar select,.filter-bar input[type="text"],
.filter-bar input[type="search"],.filter-bar input[type="date"]{
  font-size:14px;padding:9px 14px;
  border:1px solid var(--id-outline);border-radius:6px;
  background:var(--id-white);color:var(--id-on-surface);
}
.card-filter-input:focus-visible,.card-filter-select:focus-visible,
.card-filter-input:focus,.card-filter-select:focus,
.filter-bar select:focus,.filter-bar input:focus{
  border-color:var(--id-secondary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--id-secondary) 25%, transparent);
  outline:none;
}
.card-filter-count{font-size:13px;color:var(--id-on-variant)}
.filter-bar__label{color:var(--id-primary);font-weight:600;font-size:14px}

/* Botões da barra de filtro */
.btn,.btn-sm{
  border-radius:6px;
  background:var(--id-secondary-aa);color:var(--id-white);font-weight:700;
}
.btn:hover,.btn-sm:hover{background:var(--id-primary);color:var(--id-white)}
.btn-sm{font-size:13px;padding:9px 18px}
/* "Limpar" / secundário — cinza com texto legível (4,9:1) */
.btn-outline,
.filter-bar__btn--secondary{
  background:var(--id-surface-dim);color:var(--id-on-variant);
  border:1px solid var(--id-outline);font-weight:700;
}
.btn-outline:hover,
.filter-bar__btn--secondary:hover{background:var(--id-outline);color:var(--id-on-surface)}

/* ── 11.8 Export ───────────────────────────────────────────────────── */
.export-bar{
  background:var(--id-white);border:1px solid var(--id-outline);
  border-radius:var(--id-radius);padding:16px 20px;
  box-shadow:0 2px 10px rgba(26,32,44,.06);
}
.export-label{font-size:14px;color:var(--id-on-variant)}
.export-btn,
.export-btn--xlsx,
.export-btn--pdf{
  border-radius:6px;font-size:13px;font-weight:700;padding:9px 16px;
  background:var(--id-secondary-aa);color:var(--id-white);
  border:1px solid transparent;
}
.export-btn:hover,
.export-btn--xlsx:hover,
.export-btn--pdf:hover{background:var(--id-primary);color:var(--id-white)}
.export-btn ion-icon{font-size:15px}

/* ── 11.8b Download em célula de tabela ─────────────────────────────
   Ícone-ação compacto. O .btn/.btn-sm sólido pesava demais repetido
   linha a linha; segue a linguagem ghost do .btn-detail (pages.css). */
.dl-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;flex-shrink:0;
  border:1px solid color-mix(in srgb, var(--id-secondary) 22%, transparent);
  border-radius:8px;
  background:color-mix(in srgb, var(--id-secondary) 8%, transparent);
  color:var(--id-secondary-aa);
  text-decoration:none;
  transition:background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.dl-btn ion-icon{font-size:18px}
.dl-btn:hover{
  background:var(--id-primary);color:var(--id-white);
  border-color:var(--id-primary);
  box-shadow:0 2px 8px color-mix(in srgb, var(--id-primary) 25%, transparent);
}
/* Mesmos valores do anel de foco global (§ mais abaixo): dentro da tabela
   aquela regra vence por especificidade, no card mobile não casa — igualar
   aqui mantém desktop e mobile com o mesmo foco. */
.dl-btn:focus-visible{
  outline:3px solid color-mix(in srgb, var(--id-secondary) 55%, transparent);
  outline-offset:2px;
}
/* `.data-table td a` (0,1,2) e `:hover` (0,2,2) vencem `.dl-btn` sozinho —
   sem este override o hover viria azul-sobre-azul e com sublinhado no ícone. */
.data-table td a.dl-btn{color:var(--id-secondary-aa);font-weight:inherit}
.data-table td a.dl-btn:hover{color:var(--id-white);text-decoration:none}
@media (prefers-reduced-motion:reduce){.dl-btn{transition:none}}
@media (forced-colors:active){
  .dl-btn{border:1px solid ButtonBorder;color:ButtonText}
  .dl-btn:hover{background:Highlight;color:HighlightText}
}

/* ── 11.9 Paginação ────────────────────────────────────────────────── */
.paginacao li a{
  border-radius:6px;border:1px solid transparent;background:transparent;
  color:var(--id-on-surface);font-size:14px;font-weight:500;
}
.paginacao li a:hover{background:var(--id-surface-dim);border-color:transparent;color:var(--id-on-surface)}
.paginacao li.active a{
  background:var(--id-primary);border-color:var(--id-primary);color:var(--id-white);font-weight:700;
}
/* Setas « » — únicos <a> com aria-label na lista */
.paginacao li a[aria-label]{color:var(--id-on-variant)}
.paginacao li a[aria-disabled="true"],
.paginacao li.disabled a{opacity:.5;pointer-events:none}
.paginacao__info,.table-info{font-size:14px;color:var(--id-on-variant)}

/* ── 11.10 Banner de informação ────────────────────────────────────── */
/* Sem uso em PHP hoje: é o componente que o conteúdo editorial (PAGINA.
   DS_CONTEUDO, HTML autorado no admin) passa a ter disponível, junto de
   .data-table e .faq-list que já são documentados no CLAUDE.md. */
.info-banner{
  display:flex;align-items:flex-start;gap:12px;
  background:color-mix(in srgb, var(--id-secondary) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--id-secondary) 20%, transparent);
  border-radius:var(--id-radius);padding:16px;
  font-size:14px;color:var(--id-on-variant);line-height:1.5;
  margin:20px 0;
}
.info-banner ion-icon{font-size:18px;color:var(--id-secondary-aa);flex-shrink:0;margin-top:1px}
.info-banner p{margin:0}

/* ── 11.11 Estados e detalhes de apoio ─────────────────────────────── */
.empty-state{
  background:var(--id-white);border:1px solid var(--id-outline);
  border-radius:var(--id-radius);padding:56px 24px;
}
.empty-state ion-icon{color:var(--id-outline)}
.empty-state h3{color:var(--id-primary);font-size:20px;font-weight:700}
.empty-state p{color:var(--id-on-variant);font-size:14px}
.btn-detail{
  border-radius:999px;font-size:12px;font-weight:700;
  background:var(--id-tile);color:var(--id-primary);
  border:1px solid color-mix(in srgb, var(--id-primary) 20%, transparent);
}
.btn-detail:hover{background:var(--id-primary);color:var(--id-white);border-color:var(--id-primary)}
/* Métricas do topo de /empregados */
.metrics-bar{border-bottom:1px solid var(--id-outline)}
.metric-val{color:var(--id-primary);font-weight:700}
.metric-label{color:var(--id-on-variant);font-size:13px}
/* Cards mobile das tabelas */
.mob-card,.emp-card{
  border:1px solid var(--id-outline);border-radius:var(--id-radius);
  background:var(--id-white);
}
.mob-card-title,.emp-card-nome{color:var(--id-primary);font-weight:700}
.mob-card-label,.emp-card-meta{color:var(--id-on-variant)}
.mob-card-val.blue,.mob-total-val{color:var(--id-primary)}
.mob-total{background:var(--id-surface-dim);border-radius:var(--id-radius);color:var(--id-primary)}
.mob-total-label{color:var(--id-primary);font-weight:700}

/* Foco visível em todo controle interativo das internas */
.page-breadcrumb a:focus-visible,
.data-table td a:focus-visible,
.btn:focus-visible,.btn-sm:focus-visible,.btn-outline:focus-visible,
.btn-detail:focus-visible,.export-btn:focus-visible,
.paginacao li a:focus-visible{
  outline:3px solid color-mix(in srgb, var(--id-secondary) 55%, transparent);
  outline-offset:2px;
}

/* ══════════════════════════════════════
   12. ACESSIBILIDADE / IMPRESSÃO
   ══════════════════════════════════════ */

/* Sem backdrop-filter o chrome novo não depende de vidro: nenhuma superfície
   do header/footer usa blur. Restam as do hero, já tratadas em portal.css.
   Este bloco garante que o header opaco não seja substituído pelo fallback
   `nav{background:var(--bg)}` de portal.css. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .id-header nav,.id-topbar nav{background:none}
  .id-header-right{background:var(--id-primary)}
  .id-navbar{background:var(--id-secondary)}
}

/* forced-colors ignora background-image, box-shadow e clip-path decorativos:
   sem borda explícita o chrome e os cards perdem contorno. */
@media (forced-colors: active){
  .id-topbar,.id-header{border-bottom:1px solid CanvasText}
  .id-header nav{border-bottom:none}
  /* mask-image apaga conteúdo em alto contraste */
  .id-header .id-navlinks{-webkit-mask-image:none;mask-image:none}
  .id-header-right{clip-path:none;border-left:1px solid CanvasText}
  .id-navbar{border-top:1px solid CanvasText}
  .id-footer{border-top:1px solid CanvasText}
  .id-footer-btn,.id-search button,.btn,.banner-cta-btn{border:1px solid ButtonText}
  .updates-grid,.card,.fmt-box{border:1px solid CanvasText}
  .ql-strip .ql-link ion-icon{border:1px solid CanvasText}

  /* Faixa do hero: fundo em color-mix e stroke do SVG somem em alto
     contraste — sem borda a faixa fica invisível sobre a foto. */
  .hero-ribbon-bar{background:Canvas;border:1px solid CanvasText}
  .hero-ribbon-text{color:CanvasText}
  .hero-ribbon-waves{display:none}

  /* Internas: o card navy, o thead e os pills dependem só de background —
     todos somem sem borda explícita. */
  .page-header__card{border:1px solid CanvasText}
  .page-header__deco{display:none}
  .page-header__badge,.page-source-badge,.badge,.badge-alt,
  .btn-detail,.export-btn,.btn-sm,.btn-outline{border:1px solid ButtonText}
  .page-header__badge::before{outline:1px solid CanvasText}
  .table-wrapper,.card-filter-bar,.filter-bar,.export-bar,
  .empty-state,.info-banner,.mob-card,.emp-card{border:1px solid CanvasText}
  .data-table th{border-bottom:1px solid CanvasText}
  .paginacao li.active a{border:1px solid CanvasText}
  .modal-box{border:1px solid CanvasText}
  .modal-close{border:1px solid CanvasText}
}

@media (prefers-reduced-motion: reduce){
  .id-social,.id-navlink,.id-corpnav a,.id-search button,
  .id-footer-btn,.id-footer-link,.ql-strip .ql-link ion-icon,
  .page-breadcrumb a,.data-table tbody tr,.data-table td a,
  .btn,.btn-sm,.btn-outline,.btn-detail,.export-btn,
  .paginacao li a,.card-filter-input,.card-filter-select,
  .modal-close{
    transition:none;
  }
}

@media print{
  .id-topbar,.id-header,.id-footer,.ql-strip{display:none !important}
  /* Internas: economizar tinta e manter o título legível no papel */
  .page-breadcrumb,.page-header__deco,.card-filter-bar,.filter-bar,
  .export-bar,.metric-export,.paginacao{display:none !important}
  .page-header__card{background:none;color:#000;box-shadow:none;border:1px solid #000}
  .page-header__title,.page-header__subtitle{color:#000}
  .data-table th{background:none;color:#000;border-bottom:1px solid #000}
  .table-wrapper{box-shadow:none;overflow:visible}
}