/* Identidade visual do /dividabr: "Camadas". Só aparência; não altera dados, scripts nem estrutura. Só o /dividabr usa este arquivo.
   Duas camadas, como nas diretrizes de design da Apple: o conteúdo fica em folhas foscas com textura de linho; só os controles
   (barra, menu, filtro, botão secundário) são de vidro e deixam o que está por baixo aparecer. Visual v8, do protótipo "Relógio da Dívida: prévia do novo visual": chão verde-escuro, uma cor de ação (ouro),
   uma cor de dado (azul), menu e barra flutuantes de vidro, folhas de linho para o conteúdo. Verde e vermelho seguem como sinal de alta e queda; as cores das séries dos gráficos não mudam. */

/* fonte reserva com as medidas da Bricolage Grotesque (largura ajustada pela média de caracteres; altura de linha idêntica): quando a fonte real chega, o texto não muda de tamanho e a página não dá salto (CLS) */
@font-face{font-family:"Bricolage Reserva";src:local("Arial"),local("Liberation Sans"),local("Helvetica");font-weight:400 700;size-adjust:97.7%;ascent-override:95.2%;descent-override:27.6%;line-gap-override:0%}

:root{
  /* tema claro: "gelo" (fundo cinza-azulado muito claro, sem branco puro em área grande), tinta azul-marinho em vez de preto, contraste do texto em ~14:1
     (acima do mínimo de 4,5:1 e abaixo do 21:1 do preto sobre branco, que ofusca e cansa), azul de texto mais fechado que o do botão para ler bem em corpo pequeno */
  --bg:#eef4f0; --surface:#fbfdfb; --surface2:#e5eee9; --ink:#10231a; --mut:#46604f; --line:rgba(16,35,26,.14);
  --accent:#1d5fc0; --band:rgba(29,95,192,.09); --ring:rgba(29,95,192,.35);
  --pos:#0b7a49; --neg:#c4252f; --warn:#9a5b00;
  --acao:#f4c84b; --acao-ink:#1b1400;
  --glass:rgba(251,253,251,.7); --glass-borda:rgba(255,255,255,.85);
  --linho1:rgba(16,35,26,.028); --linho2:rgba(16,35,26,.02);
  --realce:inset 0 1px 0 rgba(255,255,255,.9); --sombra:0 1px 1px rgba(16,35,26,.06),0 18px 28px -22px rgba(16,35,26,.30);
  --luz1:rgba(244,200,75,.24); --luz2:rgba(74,227,163,.14);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --disp:"Bricolage Grotesque","Bricolage Reserva","SF Pro Display",-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:"Bricolage Grotesque","Bricolage Reserva","SF Pro Display",-apple-system,"Segoe UI",system-ui,sans-serif; /* o polish.css usa --serif nos títulos: passa a ser a mesma fonte de destaque */
  --r:20px; --r-ctl:14px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#06100c; --surface:#0f1d17; --surface2:#142720; --ink:#eef5f0; --mut:#9fb5a8; --line:rgba(190,230,210,.13);
  --accent:#74b7ff; --band:rgba(116,183,255,.14); --ring:rgba(116,183,255,.4); --pos:#4ae3a3; --neg:#ff8179;
  --acao:#f4c84b; --acao-ink:#1b1400;
  --glass:rgba(18,36,28,.52); --glass-borda:rgba(255,255,255,.11);
  --linho1:rgba(255,255,255,.028); --linho2:rgba(255,255,255,.02);
  --realce:inset 0 1px 0 rgba(255,255,255,.09); --sombra:0 1px 1px rgba(0,0,0,.45),0 22px 32px -22px rgba(0,0,0,.8);
  --luz1:rgba(244,200,75,.13); --luz2:rgba(74,227,163,.11);
}}
:root[data-theme="dark"]{
  --bg:#06100c; --surface:#0f1d17; --surface2:#142720; --ink:#eef5f0; --mut:#9fb5a8; --line:rgba(190,230,210,.13);
  --accent:#74b7ff; --band:rgba(116,183,255,.14); --ring:rgba(116,183,255,.4); --pos:#4ae3a3; --neg:#ff8179;
  --acao:#f4c84b; --acao-ink:#1b1400;
  --glass:rgba(18,36,28,.52); --glass-borda:rgba(255,255,255,.11);
  --linho1:rgba(255,255,255,.028); --linho2:rgba(255,255,255,.02);
  --realce:inset 0 1px 0 rgba(255,255,255,.09); --sombra:0 1px 1px rgba(0,0,0,.45),0 22px 32px -22px rgba(0,0,0,.8);
  --luz1:rgba(244,200,75,.13); --luz2:rgba(74,227,163,.11);
}

/* escolha de tema pelo usuário (dividabr-tema.js): os controles nativos e as barras de rolagem acompanham */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
.dp-tema{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-height:44px;padding:0;margin-left:8px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.dp-tema:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.dp-tema.solto{position:fixed;right:12px;top:12px;z-index:40;background:var(--glass)}
nav.appnav .dp-tema,.appnav .dp-tema{align-self:center;margin-left:4px}

/* chão: luz ambiente fixa (ciano no alto à direita, azul à esquerda), sem grão */
body{background:var(--bg)!important;background-image:none!important}
body::before{content:""!important;position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:1!important;
  background:radial-gradient(900px 520px at 88% -6%,var(--luz1),transparent 62%),radial-gradient(900px 640px at -8% 30%,var(--luz2),transparent 60%)!important}
.hero::before{content:none!important}
.hero::after{background:var(--line)!important}

/* camada de conteúdo: folha fosca com trama de linho */
.card,.kpi,.chart,.note,.tile,.resumo,.ferramentas a,nav.ferramentas a,.cred li,.tw{
  background-color:var(--surface);
  background-image:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 38%),repeating-linear-gradient(0deg,var(--linho1) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,var(--linho2) 0 1px,transparent 1px 3px);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--realce),var(--sombra)!important;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.ferramentas a::before{content:none!important}
.card:hover,.kpi:hover,.tile:hover,.ferramentas a:hover{transform:none!important;border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.card>h2::after,section.card>h2::after,h2::before{content:none!important}
.tw{border-radius:calc(var(--r) - 6px)}
#app>section:nth-of-type(even){background:none;border:0;box-shadow:none;border-radius:0}

/* camada de controles: vidro (só onde há poucos elementos; os botões dentro dos 281 cartões usam preenchimento simples) */
.gbar,#side,.sidebtn,.sfilt input,.dp-btn.s,dialog,.dp-abas{
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,0) 42%),var(--glass)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid var(--glass-borda);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.18),0 14px 34px -14px rgba(0,0,0,.5)}
.gbar{border-width:0 0 1px 0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.1),0 12px 30px -16px rgba(0,0,0,.5)}
.gbar::after{display:none!important}
#side{border-width:0 1px 0 0;overflow:hidden}
#side .btn{white-space:normal;text-align:center}
.sidebtn{border-radius:14px}
/* vidro nos botões neutros das subpáginas (poucos por página). Ficam de fora: o painel principal (#app, centenas de cartões: cada vidro é mais uma camada de desfoque),
   as barras (já são vidro), os botões ligados/principais (cor própria) e os que são só texto (.link) */
button:not(.link,.primary,.on,.dp-tema,.sidebtn,[aria-pressed="true"],[aria-selected="true"],[aria-current],:disabled,#app button,#side button,.dp-abas button),
.btn:not(.ferramentas a,.primary,.on,[aria-current],#app .btn,#side .btn){
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,0) 46%),var(--glass)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid var(--glass-borda);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 16px -10px rgba(0,0,0,.45)}
@media (prefers-reduced-transparency:reduce){.gbar,#side,.sidebtn,.sfilt input,.dp-btn.s,dialog,button:not(.link,.primary,.on,.dp-tema,.sidebtn,[aria-pressed="true"],[aria-selected="true"],[aria-current],:disabled,#app button,#side button,.dp-abas button),.btn:not(.ferramentas a,.primary,.on,[aria-current],#app .btn,#side .btn){background:var(--surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){:root{--line:rgba(120,160,140,.55)}}

/* tipografia: títulos e números de destaque em Bricolage; texto em fonte do sistema; rótulos em caixa normal */
h1,h2,.chart h3,.sh h2{font-family:var(--disp);letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(1.75rem,3.8vw,2.875rem)!important;line-height:1.05!important;font-weight:700;letter-spacing:-.03em!important}
header.top.hero h1{font-size:clamp(2.125rem,5.4vw,4.125rem)!important;line-height:1.02!important}
h2{font-size:clamp(1.4375rem,2.3vw,1.8125rem);font-weight:700}
.chart h3{font-size:1.25rem;font-weight:700}
.eyebrow,.kpi .k,.lbl,.badge,.live,table.ft th,table thead th,.num-ref thead th,.side-h span,.gb-brand small,.foot b,.fo span,.ferramentas::before,#ufDlg .cdh,small{
  text-transform:none!important;letter-spacing:0!important}
.eyebrow{font-size:0.875rem;font-weight:600;color:var(--mut)}
.eyebrow::before{background:var(--acao)}
.lbl,.kpi .k{font-size:0.875rem;font-weight:600;color:var(--mut)}
.ferramentas::before{font-size:0.9375rem;font-weight:700;color:var(--ink)}
.gb-brand small{font-size:0.78125rem}
.badge{font-size:0.75rem}
/* a etiqueta de origem (Oficial, Calculado, Associação...) vai para a primeira linha do cartão, em vez de ficar sobre o título */
.card .badge{position:static;order:-1;align-self:flex-start;margin:0 0 6px;background:transparent}
.card .lbl{padding-right:0}
table.ft th,table thead th{font-size:0.78125rem}
.val,.kpi .v{font-weight:600}
.sub,.sh small{color:var(--mut)}

/* menu lateral: itens de 44 px, o ativo é uma pastilha de vidro (sem barra colorida na lateral) */
nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;border-left:0!important;font-size:0.9375rem;font-weight:500;color:color-mix(in srgb,var(--ink) 80%,transparent)}
nav a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
nav a.on{color:var(--ink);background:color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
#nav{flex-shrink:0}
#nav a{flex:none}
.gb-nav a{border-radius:12px}
.gb-nav a:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}

/* botões: o principal em ouro, o secundário em vidro, os pequenos dentro dos cartões em preenchimento leve */
.dp-btn{border-radius:var(--r-ctl);min-height:48px;box-shadow:none;transform:none!important;font-weight:600}
.dp-btn.p{background:var(--acao);border:0;color:var(--acao-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 18px -8px rgba(244,200,75,.55)}
.dp-btn.p:hover{filter:brightness(1.06)}
.dp-btn.s{color:var(--ink)}
.dp-btn.s:hover{border-color:var(--accent)}
button,.btn:not(.ferramentas a){border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
button:hover,.btn:not(.ferramentas a):hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.ferramentas a,nav.ferramentas a{text-align:left;align-items:flex-start;justify-content:flex-start;white-space:normal}
button:active{transform:none}
.pula{background:var(--acao);color:var(--acao-ink)}
.chip{background:transparent;box-shadow:none;border-radius:999px}

/* gráficos: texto dos eixos mais legível; as cores das séries não mudam */
svg.ch text{font-size:12.5px}
.legend{font-size:0.8125rem}

/* subpáginas de ferramentas (menu de abas e quadros) */
.appnav a{border-radius:12px;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.appnav a.voltar{background:var(--acao);border-color:var(--acao);color:var(--acao-ink)}
.appnav a[aria-current="page"]{background:color-mix(in srgb,var(--ink) 10%,transparent);border-color:var(--glass-borda);color:var(--ink)}
.poster{border-radius:var(--r)}

/* fase 2, destaque da dívida no topo (elemento criado por dividabr-identidade.js; some sem script) */
.hero-num{display:flex;flex-direction:column;gap:10px;margin-top:26px;padding:26px 28px 24px;
  background-color:var(--surface);
  background-image:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 38%),repeating-linear-gradient(0deg,var(--linho1) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,var(--linho2) 0 1px,transparent 1px 3px);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--realce),var(--sombra)}
.hero-num[hidden]{display:none}
.hn-l{font:600 0.9375rem var(--sans);color:var(--mut)}
.hn-v{display:flex;align-items:baseline;flex-wrap:wrap}
.hn-v b{font:700 clamp(3.625rem,7vw,5.75rem)/1 var(--disp);letter-spacing:-.035em;color:var(--ink)}
.hn-v small{font:500 clamp(1.5rem,2.6vw,2.125rem) var(--disp);color:var(--mut);margin:0 10px 0 0}
.hn-v small:last-child{margin:0 0 0 10px}
.hn-m{font:500 0.9375rem var(--mono);color:color-mix(in srgb,var(--ink) 82%,transparent);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hn-n{font-size:0.8125rem;line-height:1.45;color:var(--mut)}
@media (min-width:1000px){
  header.top.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,430px);column-gap:40px;align-items:center}
  header.top.hero .ttl{grid-column:1;max-width:none}
  .hero-num{grid-column:2;grid-row:1;margin-top:0}
}

/* fase 2, barra de abas inferior para telas pequenas (criada por dividabr-identidade.js) */
.dp-abas{display:none}
@media (max-width:899px){
  .dp-abas{display:flex;flex-direction:row;flex:none;overflow:visible;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:24;height:68px;padding:6px;gap:2px;border-radius:28px}
  .dp-abas a,.dp-abas button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:0 2px;border:0;border-radius:22px;
    background:transparent;color:color-mix(in srgb,var(--ink) 82%,transparent);font:600 min(0.71875rem,3.3vw) var(--sans);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dp-abas a.on{background:color-mix(in srgb,var(--ink) 11%,transparent);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
  .dp-abas button:hover,.dp-abas a:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);border:0}
  body{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}
@media (max-width:899px) and (max-height:480px){.dp-abas{height:56px}.dp-abas a,.dp-abas button{min-height:44px;flex-direction:row;font-size:0.75rem}}

/* fase 3: /dividabr/transparencia/* (páginas montadas por transparencia/_fonte/monta.ts, com CSS próprio) */
:root{--on-accent:#ffffff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--on-accent:#06100c}}
:root[data-theme="dark"]{--on-accent:#06100c}
.seg2 button.on,.tabs button.on,.chips button.on,.abas2 button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
#chips button.on{background:var(--surface);color:var(--ink);border-color:var(--accent)}
button.primary{background:var(--acao);border-color:var(--acao);color:var(--acao-ink);font-weight:600}
input,select{border-radius:12px}
th{background:color-mix(in srgb,var(--ink) 9%,var(--surface));color:var(--ink);font-weight:600}
.cx,.gg .cx,.donut,.rk{border-radius:var(--r)}
.cx{background-color:var(--surface);background-image:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 38%),repeating-linear-gradient(0deg,var(--linho1) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,var(--linho2) 0 1px,transparent 1px 3px);border:1px solid var(--line);box-shadow:var(--realce),var(--sombra)}
/* avisos e leituras: borda inteira e fina, sem barra grossa na lateral */
.aviso,.leitura{border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));border-radius:var(--r-ctl);background:color-mix(in srgb,var(--warn) 8%,var(--surface))}
.leitura,.resumo{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.resumo{border-radius:var(--r-ctl)}
/* barra superior das páginas de transparência: vidro, aba atual em pastilha (sem a faixa tricolor e o sublinhado) */
nav.appnav{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,0) 42%),var(--glass)!important;-webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);border-bottom:1px solid var(--glass-borda);box-shadow:inset 0 -1px 0 rgba(255,255,255,.1),0 12px 30px -16px rgba(0,0,0,.5)}
nav.appnav::after{display:none!important}
nav.appnav a{height:44px;min-height:44px;align-self:center;border-radius:12px;font-size:0.875rem}
nav.appnav a[aria-current="page"]{background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
nav.appnav a[aria-current="page"]::before{display:none!important}
nav.appnav a.voltar{background:none;color:var(--ink)}
@media (pointer:coarse){nav.appnav a{min-height:44px}}
/* cartões de navegação da seção: folhas, sem elevação, sem rótulo em caixa alta */
.hub .eyebrow{font-size:0.875rem;font-weight:600;letter-spacing:0;text-transform:none}
.hub a{border-radius:var(--r);background-color:var(--surface);background-image:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 38%),repeating-linear-gradient(0deg,var(--linho1) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,var(--linho2) 0 1px,transparent 1px 3px);box-shadow:var(--realce),var(--sombra)}
.hub a:hover{transform:none;box-shadow:var(--realce),var(--sombra);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.hub a[aria-current="page"]{box-shadow:var(--realce),var(--sombra),inset 0 0 0 1px var(--c,var(--accent))}
.hub a[aria-current="page"]::after{font-size:0.75rem;letter-spacing:0;text-transform:none;font-weight:600}
.hub .ic{background:none}

/* itens do menu lateral: nome longo quebra em até duas linhas em vez de ser cortado sem reticências (display:flex desliga o text-overflow) */
#nav a{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.3;padding-top:8px;padding-bottom:8px}
.gbar .gb-brand b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15}
@media (max-width:1500px){.gbar .gb-brand small{display:none}}

/* ===== v8: layout do protótipo (computador: menu fixo e barra flutuantes; tablet: trilho de ícones; celular: cabeçalho e abas de vidro, indicadores em carrossel) ===== */
.eyebrow::before{background:var(--acao)}
.dp-btn.p,button.primary,.pula{color:var(--acao-ink)}
.hn-v small{color:var(--mut)}
/* ícones do menu (colocados por dividabr-identidade.js): só aparecem no trilho do tablet */
#nav a .ni{display:none;flex:none}
#nav a .nt{min-width:0}
/* marca no topo do menu (a barra do topo deixa de repetir o nome) */
.side-h b{font-family:var(--disp);font-size:1.1875rem;letter-spacing:-.01em}
.side-h span{display:none}
.side-h::before{content:"";flex:none;width:30px;height:22px;border-radius:6px;background:linear-gradient(90deg,#1faa59 0 34%,#f4c84b 34% 67%,#2a5fc1 67%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.side-h{flex-direction:row;align-items:center;gap:12px;padding:20px 18px 10px!important}
.sfilt{margin:0 14px 8px}
.side-f{display:flex;flex-direction:column;gap:0;padding:8px 14px 14px;overflow-y:auto;max-height:42%;border-top:1px solid var(--line)}
#side .side-f .btn{background:transparent!important;border:0!important;border-radius:12px;min-height:38px!important;padding:0 14px;margin:0!important;box-shadow:none!important;text-align:left;justify-content:flex-start;color:var(--ink2,var(--ink));font-size:0.875rem;font-weight:500}
#side .side-f .btn:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
#side .side-f #btnTest{margin-top:8px!important;border:1px solid var(--glass-borda)!important;background:var(--glass)!important;min-height:44px!important;justify-content:center;font-weight:600;color:var(--ink)}
#nav{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 10px}

@media (min-width:1100px){
  :root{--bar:96px}
  #side{transform:none!important;top:16px;bottom:16px;left:16px;width:248px;border-radius:26px;border:1px solid var(--glass-borda);z-index:26}
  .sidebtn{display:none!important}
  html body:has(#side),html.side-open body:has(#side){padding-left:calc(248px + 32px)!important;padding-right:16px!important;padding-top:96px!important}
  .gbar,html.side-open .gbar{left:280px;right:16px;top:16px;height:64px;border:1px solid var(--glass-borda);border-radius:22px;padding:0 22px!important}
  .gbar .gb-brand{display:none}
  .gbar .gb-nav{margin-left:0}
  .gbar .gb-status{margin-left:auto}
  html{scroll-padding-top:112px}
}
/* tablet: o menu vira um trilho de ícones; o botão de menu abre o menu completo por cima */
@media (min-width:700px) and (max-width:1099px){
  :root{--bar:96px}
  #side{transform:none!important;top:16px;bottom:16px;left:16px;width:76px;border-radius:26px;border:1px solid var(--glass-borda);z-index:26}
  html.side-open #side{width:248px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
  html:not(.side-open) .side-h,html:not(.side-open) .sfilt,html:not(.side-open) .sfilt-vazio,html:not(.side-open) .side-f{display:none}
  html:not(.side-open) #nav{display:flex;flex-direction:column;align-items:center;gap:8px;padding:72px 0 0}
  html:not(.side-open) #nav a{width:52px;height:52px;min-height:52px;padding:0;justify-content:center;border-radius:16px}
  html:not(.side-open) #nav a .ni{display:block}
  html:not(.side-open) #nav a .nt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html.side-open #nav a .ni{display:block;margin-right:12px}
  .sidebtn{display:grid!important;top:30px;left:34px;z-index:31;width:40px;height:40px;background:transparent!important;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  html.side-open .sidebtn{left:222px;top:26px}
  html body:has(#side),html.side-open body:has(#side){padding-left:108px!important;padding-right:16px!important;padding-top:96px!important}
  .gbar,html.side-open .gbar{left:108px;right:16px;top:16px;height:64px;border:1px solid var(--glass-borda);border-radius:22px;padding:0 22px!important}
  .gbar .gb-brand{display:none}
  .gbar .gb-status{margin-left:auto}
  .dp-abas{display:none!important}
  html{scroll-padding-top:112px}
}
/* celular: cabeçalho flutuante de vidro, "Seções" na barra de baixo, indicadores principais em carrossel */
@media (max-width:699px){
  :root{--bar:80px}
  .sidebtn{display:none!important}
  .gbar{left:12px;right:12px;top:12px;height:56px;border:1px solid var(--glass-borda);border-radius:20px;padding:0 16px!important}
  .gbar .gb-brand svg{display:none}
  .gbar .gb-brand b{font-family:var(--disp);font-size:1.0625rem}
  .gbar .gb-brand small,.gbar .gb-status #clock{display:none}
  .gbar .gb-status{margin-left:auto}
  html body{padding-top:84px!important}
  html{scroll-padding-top:96px}
  #kpis{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none}
  #kpis::-webkit-scrollbar{display:none}
  #kpis .kpi{flex:0 0 236px;scroll-snap-align:start}
  /* as páginas reservam a altura da grade de cartões (236 / 640 px) para não dar salto; no carrossel é uma fila só, e a reserva esticava todos os cartões */
  #kpis{min-height:124px!important}
}
/* v8: barra das páginas internas também flutuante de vidro, como o cabeçalho do protótipo; links do menu alinhados à esquerda */
#side .side-f .btn{text-align:left!important;justify-content:flex-start!important;font-size:0.875rem}
#side .side-f #btnTest{text-align:center!important;justify-content:center!important}
nav.appnav{top:12px!important;margin:12px 0 22px!important;border:1px solid var(--glass-borda)!important;border-radius:22px;padding-left:14px!important;padding-right:14px!important;min-height:64px}
nav.appnav a{height:48px;min-height:48px}
/* v8.1: no celular a barra das páginas internas não quebra em duas linhas; as abas rolam de lado */
@media (max-width:699px){nav.appnav{flex-wrap:nowrap!important;gap:6px;padding-left:10px!important;padding-right:10px!important}nav.appnav .abas{flex:1 1 auto;min-width:0;margin-left:0!important}nav.appnav .dp-tema{flex:none;margin-left:0}}
/* v8.2: botão de tema (automático/claro/escuro) mais sutil: menor, sem borda e meio apagado até o mouse chegar; a área de toque continua com 44 px */
.dp-tema{width:34px;height:34px;min-height:34px;border-color:transparent!important;background:transparent!important;color:var(--mut)!important;opacity:.82;position:relative;transition:opacity .15s,color .15s}
.dp-tema::after{content:"";position:absolute;inset:-5px}
.dp-tema svg{width:17px;height:17px}
.dp-tema:hover,.dp-tema:focus-visible{opacity:1;color:var(--ink)!important;border-color:color-mix(in srgb,var(--accent) 45%,transparent)!important}
.dp-tema.solto{opacity:.78}
/* v8.3: subpáginas sem o menu lateral não reservam o espaço dele (conteúdo centralizado); em telas largas todas as abas aparecem, quebrando em duas linhas se preciso, em vez de cortar o fim da barra */
@media (min-width:700px){nav.appnav{flex-wrap:wrap!important;row-gap:4px}nav.appnav .abas{flex:1 1 0!important;min-width:0!important;flex-wrap:wrap!important;overflow:visible!important;row-gap:6px;margin-left:0!important}}
/* v8.4: filtro de seções do menu lateral: só a caixa de texto, centralizada, sem o atalho "/" nem a faixa escura atrás */
.sfilt{background:transparent!important;justify-content:center}
.sfilt kbd{display:none!important}
.sfilt input{flex:1 1 auto;text-align:center;padding:9px 12px!important;background-image:none!important}
.sfilt input::placeholder{text-align:center}
/* v8.5 (diretrizes de interface da Apple para iPhone, iPad e Mac): alvos de toque de 44 pt, texto de 16 px nos campos (o Safari do iPhone dá zoom em campo menor), áreas seguras nas laterais (iPhone na horizontal), texto que acompanha o tamanho de fonte do sistema e movimento reduzido */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (pointer:coarse),(max-width:1032px){
  button,select,summary,a.btn,.btn,a.acao,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]){min-height:44px!important}
  #side .side-f .btn{min-height:44px!important}
  .gbar a,a.pula{min-height:44px;display:inline-flex;align-items:center}.meta a{min-width:44px;justify-content:center}
  li>a:only-child{display:inline-flex;align-items:center;min-height:44px}
  select,input,textarea{max-width:100%}
  .seg2,.seg2 label{max-width:100%;min-width:0}.seg2 select{width:100%;text-overflow:ellipsis}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:max(16px,1em)!important}
  .leaflet-bar a{width:44px!important;height:44px!important;line-height:44px!important}
}
main{padding-left:max(16px,env(safe-area-inset-left))!important;padding-right:max(16px,env(safe-area-inset-right))!important;padding-bottom:max(48px,calc(24px + env(safe-area-inset-bottom)))!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* v8.6: no celular as abas da barra superior rolam de lado; o esmaecido à direita avisa que há mais abas */
@media (max-width:699px){nav.appnav .abas{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent);padding-right:18px}}
/* v9: o fundo escurecido do menu de seções (celular e tablet em pé) fecha o menu ao toque; no iPhone o toque só chega ao documento se o elemento parecer clicável */
@media (max-width:1099px){html.side-open::after{cursor:pointer}}
/* v9.1: dica "dd/mm/aaaa" por cima do campo de data vazio no iPhone/iPad (ver dicaData em dividabr-identidade.js) */
.dp-dd{position:absolute;display:flex;align-items:center;padding-left:14px;font-size:max(16px,1em);color:var(--mut);pointer-events:none;white-space:nowrap}
.dp-dd[hidden]{display:none}
/* v9.2: cartões do menu de transparência: a regra de 44 px de toque para links (li>a:only-child) os virava em linha única (ícone, título e descrição lado a lado, o selo "Aqui" por cima do texto); voltam a ser grade */
.hub li>a:only-child{display:grid;align-items:start;min-height:0}
@media (max-width:820px){.hub a[aria-current="page"] b{padding-right:44px}}