:root{
  /* ── EDP Soluções · tema claro (canônico do design system) ─────────────── */
  --void:#FFFFFF; --pit:#F6F8FA; --slab:#FFFFFF; --edge:#E4E9EF; --edge2:#CFD8E1;
  --ink:#212E3E; --ink2:#3A4654; --ink3:#5C6E7A;
  --amber:#225E66; --amber-d:#4A7F86;
  --bt:#0E7C86; --mt:#6D32FF; --at:#B36B00; --as:#1E9E4A;
  --alert:#D64545; --ok:#1E9E4A; --uf:#94A6B4;
  --grad:linear-gradient(120deg,#6D32FF 0%,#28FF52 50%,#6DE4FB 100%);
  --energy:#28FF52; --violet:#6D32FF; --cyan:#6DE4FB; --fog:#BBC9DB;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  --disp:"FT Base","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --body:"FT Base","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --lbl:"FT Base","Segoe UI","Helvetica Neue",Arial,sans-serif;
  /* 225 px, dez por cento a menos que os 250 de origem, pedido de Leonardo em
     25/08/2026. O item mais longo do menu e "Glossario e Fontes". */
  --sbw:225px;
  --r:4px; --r2:8px;
  --sh-sm:0 1px 3px rgba(33,46,62,.08),0 1px 2px rgba(33,46,62,.05);
  --sh-md:0 4px 12px rgba(33,46,62,.10);
}
html[data-tema=slate]{
  --void:#182330; --pit:#1C2836; --slab:#212E3E; --edge:#33465A; --edge2:#46596E;
  --ink:#F2F4F6; --ink2:#C3D0DE; --ink3:#8DA0AC;
  --amber:#28FF52; --amber-d:#1E8F3C;
  --bt:#6DE4FB; --mt:#A78BFF; --at:#E8A317; --as:#7BE0A0;
  --alert:#FF7A7A; --ok:#57D98A; --uf:#7C9599;
  --sh-sm:0 1px 3px rgba(0,0,0,.4); --sh-md:0 6px 18px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.55;
  background-image:radial-gradient(ellipse 80% 46% at 18% -8%,color-mix(in srgb,var(--amber) 8%,transparent),transparent 62%),
  radial-gradient(ellipse 66% 42% at 94% 2%,color-mix(in srgb,var(--bt) 5%,transparent),transparent 60%);
  background-attachment:fixed;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.3;
  background-image:repeating-linear-gradient(0deg,color-mix(in srgb,var(--ink) 1%,transparent) 0 1px,transparent 1px 3px)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mut{color:var(--ink3);font-size:11.5px}
.hidden{display:none!important}

/* ── layout ───────────────────────────────────────── */
#shell{display:grid;grid-template-columns:var(--sbw) 1fr;min-height:100vh}
aside{border-right:1px solid var(--edge);background:color-mix(in srgb,var(--pit) 72%,transparent);backdrop-filter:blur(12px);
  position:sticky;top:0;height:100vh;overflow-y:auto;padding:22px 0 28px;z-index:50;scrollbar-width:thin}
/* A LARGURA TRAVADA, pedida por Leonardo em 18/08/2026 ao ver a prancha de Produtos:
   "note que voce fez essa pagina com a responsividade perfeita, por mais que eu
   redimensione a largura da janela ela esta com a largura maxima travada. Eu preciso que
   voce leve esse conceito pra todas as outras pranchas".
   MEDIDO antes de mexer: as CINCO apartadas ja tem `.wrap{max-width:1500px}`, herdado do
   CSS_BASE do modulo comum. Quem nao tinha trava nenhuma era o `main` do Atlas, e por isso
   as pranchas portadas se esticavam ate a borda da janela em monitor largo. O conserto e
   aqui e vale para as nove de uma vez, com o mesmo 1500px das apartadas para o porte e a
   apartada continuarem comparaveis. */
main{min-width:0;padding:0 34px 90px;max-width:1500px;margin:0 auto;width:100%}

.logo{padding:0 20px 20px;border-bottom:1px solid var(--edge);margin-bottom:16px}
.logo h1{font-family:var(--disp);font-size:29px;font-weight:400;letter-spacing:-.02em;line-height:1}
/* O NOME POR EXTENSO, embaixo do titulo. Duas linhas em tela estreita, e por isso
   `line-height` explicito: em caixa pequena o herdado infla a altura. */
.logo .ext{display:block;font-size:10px;line-height:1.35;color:var(--ink3);
margin:5px 0 7px;max-width:200px}
.logo h1 em{font-style:italic;color:var(--amber)}
.logo .v{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--amber);
  border:1px solid var(--amber-d);border-radius:2px;padding:2px 6px;display:inline-block;margin-top:9px}

.navsec{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--ink3);
  text-transform:uppercase;padding:14px 20px 7px}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;
  border-left:2px solid transparent;color:var(--ink3);font-family:var(--body);font-size:13px;
  padding:9px 20px;cursor:pointer;text-align:left;transition:all .16s}
.nav-item:hover{color:var(--ink2);background:color-mix(in srgb,var(--ink) 2%,transparent)}
.nav-item.on{color:var(--amber);border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 6%,transparent)}
.nav-item .num{font-family:var(--mono);font-size:9.5px;color:var(--ink3);letter-spacing:.06em}
.nav-item.on .num{color:var(--amber)}
.nav-item.pend{border-left-color:var(--edge2)}
.nav-item.pend.on{border-left-color:var(--amber)}
.nav-item .badge{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber);padding:2px 6px;border-radius:2px}

/* filtro global de tensao */
.gfilt{margin:18px 14px 4px;padding:13px 13px 14px;border:1px solid var(--edge2);border-radius:3px;
  background:color-mix(in srgb,var(--ink) 2%,transparent)}
.gfilt .lbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.17em;color:var(--ink3);
  text-transform:uppercase;display:block;margin-bottom:9px}
.seg{display:flex;border:1px solid var(--edge2);border-radius:3px;overflow:hidden}
.seg button{flex:1;background:none;border:0;border-right:1px solid var(--edge2);color:var(--ink3);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;padding:7px 4px;cursor:pointer;
  transition:all .16s;text-transform:uppercase}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink)}
/* BOTAO ATIVO ILEGIVEL, texto preto sobre fundo preto. A regra punha color:var(--void),
   que e quase preto, e contava com um fundo claro vindo de uma regra IRMA. So que essa
   regra irma existia para quatro valores de data-f e mais nada. Todo o resto do app
   ficava com texto preto sobre o fundo escuro do painel: as cinco classes de consumo, o
   "Agrupar por" da 05b, os filtros de lacuna e de regionalismo da 03, e o AS que entrou
   nesta rodada. O fundo claro passa a ser o PADRAO do estado ativo, e a cor por faixa
   vira sobreposicao. Assim controle novo nasce legivel em vez de nascer invisivel. */
.seg button.on{color:var(--void);font-weight:700;background:var(--ink2)}
.seg button.on[data-f=BT]{background:var(--bt)}
.seg button.on[data-f=MT]{background:var(--mt)}
.seg button.on[data-f=AT]{background:var(--at)}
.seg button.on[data-f=AS]{background:var(--as)}
.gfilt .eco{font-size:10.5px;color:var(--ink3);line-height:1.45;margin-top:10px;
  border-top:1px solid var(--edge);padding-top:9px}
.gfilt .eco b{color:var(--ink2);font-family:var(--mono)}

/* ── secoes ───────────────────────────────────────── */
.view{display:none;padding:40px 0 0;animation:rise .34s cubic-bezier(.2,.7,.3,1)}
.view.on{display:block}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h2{font-family:var(--disp);font-size:31px;font-weight:400;letter-spacing:-.012em;margin-bottom:6px}
h2 .n{font-family:var(--mono);font-size:10.5px;color:var(--amber);letter-spacing:.2em;
  display:block;margin-bottom:8px;text-transform:uppercase}
h3{font-family:var(--disp);font-size:20px;font-weight:400;margin-bottom:10px}
h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--ink3);
  text-transform:uppercase;margin:18px 0 8px}
.lede{color:var(--ink2);max-width:90ch;margin-bottom:26px;font-size:14.5px}

.card{background:linear-gradient(165deg,var(--slab),var(--pit));border:1px solid var(--edge);
  border-radius:3px;padding:18px}
.grid{display:grid;gap:13px}
.g2{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(206px,1fr))}
/* A CAIXA FECHA, como nas apartadas. Leonardo pegou a divergencia: o `.st` das cinco
   apartadas tem borda de 1 px em volta MAIS a espessa a esquerda, e aqui so havia a
   espessa. Nao era decisao, era o Atlas ter ficado para tras. */
.stat{border:1px solid var(--edge);border-left:2px solid var(--amber);border-radius:2px;
padding:12px 15px;background:color-mix(in srgb,var(--ink) 2%,transparent)}
.stat .k{font-family:var(--mono);font-size:9px;letter-spacing:.15em;color:var(--ink3);text-transform:uppercase}
.stat .v{font-family:var(--mono);font-size:25px;letter-spacing:-.02em;margin-top:4px}
.stat .v small{font-size:12.5px;color:var(--ink2)}
.stat .d{font-size:11.5px;color:var(--ink3);margin-top:5px;line-height:1.4}
.stat.bt{border-left-color:var(--bt)}.stat.mt{border-left-color:var(--mt)}.stat.at{border-left-color:var(--at)}
.stat.as{border-left-color:var(--as)}
/* R2-3b: o cartao da faixa escolhida acende; os outros esmaecem em vez de sumir, porque
   o total das quatro faixas continua sendo a leitura de contexto. */
.stat.fxon{background:color-mix(in srgb,var(--amber) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--amber) 22%,transparent)}
.stat.fxoff{opacity:.42}
.note{border-left:2px solid var(--amber);padding:13px 17px;background:color-mix(in srgb,var(--amber) 5%,transparent);
  font-size:12.5px;color:var(--ink2);margin:16px 0;line-height:1.55}
.note b{color:var(--amber)}
.note.al{border-left-color:var(--alert);background:color-mix(in srgb,var(--alert) 6%,transparent)}
.note.al b{color:var(--alert)}

/* ── mapas ────────────────────────────────────────── */
.mapbox{background:var(--pit);border:1px solid var(--edge);border-radius:3px;padding:12px;overflow:hidden}
.fige-map{width:100%;height:auto;display:block;overflow:hidden}
.fige-map .ufl{font-family:var(--mono);font-size:11px;fill:var(--ink3);letter-spacing:.1em;font-weight:600}
.fige-map .conc{cursor:pointer;transition:fill-opacity .2s}
.fige-map .conc:hover{fill-opacity:.95!important}
.pulso{animation:pul 1.9s ease-out infinite}
@keyframes pul{0%{r:3;opacity:.95}70%{r:11;opacity:0}100%{r:11;opacity:0}}
.mapcap{font-size:11.5px;color:var(--ink3);margin-top:10px;line-height:1.5;
  border-top:1px solid var(--edge);padding-top:9px}
.mapcap b{color:var(--ink2)}
.maplegend{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.maplegend button{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--edge2);
  border-radius:2px;color:var(--ink2);font-family:var(--mono);font-size:9.5px;padding:4px 8px;cursor:pointer;
  transition:all .16s}
.maplegend button:hover{border-color:var(--ink3);color:var(--ink)}
.maplegend i{width:9px;height:9px;border-radius:1px;display:block}
.scale{display:flex;align-items:center;gap:9px;margin-top:11px;font-family:var(--mono);font-size:9.5px;color:var(--ink3)}
.scale .ramp{flex:1;height:8px;border-radius:2px;
  background:linear-gradient(90deg,hsl(38,72%,46%),hsl(104,65%,54%),hsl(170,58%,62%))}

/* ── tabela ───────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase;
  text-align:right;padding:9px 8px;border-bottom:1px solid var(--edge2);cursor:pointer;user-select:none;
  white-space:nowrap;background:var(--void);position:sticky;top:0;z-index:5}
th:first-child,td:first-child{text-align:left}
th:hover{color:var(--amber)}
th.srt::after{content:" ▾";color:var(--amber)}
td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--edge) 55%,transparent);text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums}
td:first-child{font-family:var(--body);text-align:left}
tbody tr{transition:background .14s;cursor:pointer}
tbody tr:hover{background:color-mix(in srgb,var(--amber) 5%,transparent)}
td.nulo{background:repeating-linear-gradient(45deg,transparent 0 4px,color-mix(in srgb,var(--ink3) 22%,transparent) 4px 5px);color:var(--ink3)}
.bar{height:5px;background:var(--edge);border-radius:3px;overflow:hidden;margin-top:4px}
.bar i{display:block;height:100%;background:var(--amber);border-radius:3px;transition:width .5s cubic-bezier(.2,.7,.3,1)}

/* ── controles ────────────────────────────────────── */
.ctl{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-end;margin-bottom:20px;
  padding:15px 17px;background:var(--pit);border:1px solid var(--edge);border-radius:3px}
.ctl.sticky{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);background:color-mix(in srgb,var(--pit) 94%,transparent)}
.ctl .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink3);
  text-transform:uppercase;margin-bottom:7px;display:block}
.ctl-note{font-size:11.5px;color:var(--ink3);max-width:42ch;line-height:1.45;
  border-left:2px solid var(--edge2);padding-left:11px}
select,input[type=search],input[type=text],input[type=number]{background:var(--slab);border:1px solid var(--edge2);
  color:var(--ink);font-family:var(--mono);font-size:11.5px;padding:8px 10px;border-radius:3px;min-width:180px}
input[type=search]{min-width:220px}
select:focus,input:focus{outline:0;border-color:var(--amber)}
label.chk{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink2);cursor:pointer}
button.act{background:var(--amber);color:var(--void);border:0;border-radius:3px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;cursor:pointer;font-weight:700}
button.act:hover{opacity:.88}
button.gh{background:none;border:1px solid var(--edge2);color:var(--ink2);border-radius:3px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;cursor:pointer}
button.gh:hover{border-color:var(--amber);color:var(--amber)}

/* ── personas ─────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 400px;gap:18px;align-items:start}
.stickycol{position:sticky;top:14px}
.pgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.p{background:linear-gradient(165deg,var(--slab),var(--pit));border:1px solid var(--edge);
  border-radius:3px;overflow:hidden;transition:border-color .18s,transform .18s,opacity .28s;display:flex;flex-direction:column}
.p:hover{border-color:var(--edge2);transform:translateY(-2px)}
.p.sel{border-color:var(--bt);box-shadow:0 0 0 1px var(--bt)}
.p.dim{opacity:.26;filter:saturate(.15)}
.p.gap{border-style:dashed;border-color:var(--amber-d)}
.p .hd{padding:14px 15px 12px;cursor:pointer}
.p .tag{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--ink3);
  text-transform:uppercase;display:flex;justify-content:space-between;gap:8px}
.p h5{font-family:var(--disp);font-size:18px;font-weight:400;line-height:1.24;margin:6px 0 7px;color:var(--ink)}
.p .arq{font-family:var(--mono);font-size:9.5px;color:var(--amber);letter-spacing:.05em}
.p .bd{padding:0 15px 14px;font-size:12.5px;color:var(--ink2);display:none}
.p.open .bd{display:block}
.p .bd h6{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;color:var(--ink3);
  text-transform:uppercase;margin:14px 0 5px;border-top:1px solid var(--edge);padding-top:11px;font-weight:400}
.p .bd p{margin-bottom:6px}
.p .bd ul{margin:0 0 6px 15px}
.mix{display:flex;height:24px;border-radius:2px;overflow:hidden;margin:10px 0 5px;background:var(--edge)}
.mix span{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;
  color:var(--void);font-weight:700;transition:flex-grow .4s cubic-bezier(.2,.7,.3,1);overflow:hidden}
.mix span.BT{background:var(--bt)}.mix span.MT{background:var(--mt)}.mix span.AT{background:var(--at)}
.mixleg{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:9px;color:var(--ink3)}
.mixnone{padding:9px 11px;border:1px dashed var(--amber-d);border-radius:2px;
  font-family:var(--mono);font-size:10px;color:var(--amber);line-height:1.5;margin:10px 0 4px}
.chip{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  border:1px solid var(--edge2);border-radius:2px;padding:2px 6px;margin:0 4px 4px 0;color:var(--ink2)}
.chip.bt{border-color:var(--bt);color:var(--bt)}.chip.mt{border-color:var(--mt);color:var(--mt)}
.chip.at{border-color:var(--at);color:var(--at)}.chip.al{border-color:var(--alert);color:var(--alert)}
.chip.ok{border-color:var(--ok);color:var(--ok)}
.chip.b{cursor:pointer}.chip.b:hover{border-color:var(--amber);color:var(--amber)}

/* ── funil ────────────────────────────────────────── */
.fun{display:flex;flex-direction:column;gap:2px;margin-top:13px}
.fstep{display:grid;grid-template-columns:1fr 122px;gap:14px;align-items:center;padding:8px 11px;
  border-left:2px solid var(--edge2);background:color-mix(in srgb,var(--ink) 1%,transparent)}
.fstep:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.fstep.base{border-left-color:var(--ink2)}
.fstep.sub{border-left-color:var(--alert)}
.fstep.res{border-left-color:var(--bt);background:color-mix(in srgb,var(--bt) 5%,transparent)}
.fstep .t{font-size:12px;color:var(--ink2);line-height:1.32}
.fstep.res .t{color:var(--ink);font-weight:600}
.fstep .v{font-family:var(--mono);font-size:14px;text-align:right}
.fstep.sub .v{color:var(--alert)}.fstep.res .v{color:var(--bt);font-size:17px}
.fmini{height:3px;background:var(--edge);margin-top:4px;border-radius:2px;overflow:hidden}
.fmini i{display:block;height:100%;background:var(--ink3)}

/* ── glossario / fill ─────────────────────────────── */
dl.gloss{display:grid;grid-template-columns:200px 1fr;gap:10px 20px}
dl.gloss dt{font-family:var(--mono);font-size:11.5px;color:var(--amber);letter-spacing:.03em;padding-top:2px}
dl.gloss dd{font-size:12.5px;color:var(--ink2);border-bottom:1px solid var(--edge);padding-bottom:10px}
.fill-row{display:grid;grid-template-columns:190px 1fr 130px;gap:11px;align-items:center;
  padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--edge) 50%,transparent)}
.fill-row .fl{font-family:var(--mono);font-size:10.5px;color:var(--ink3)}
.fill-row.crit .fl{color:var(--amber)}
.prog{height:6px;background:var(--edge);border-radius:3px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--bt);transition:width .4s}
.prog.c i{background:var(--amber)}
.pill{display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 7px;border-radius:2px;background:var(--edge);color:var(--ink2)}
.pill.a{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.pill.r{background:color-mix(in srgb,var(--alert) 15%,transparent);color:var(--alert)}
.pill.g{background:color-mix(in srgb,var(--as) 15%,transparent);color:var(--ok)}
.srcnote{font-size:10.5px;color:var(--ink3);line-height:1.45;margin-top:9px;font-family:var(--mono)}
.srcnote a{color:var(--amber);cursor:pointer;text-decoration:none;border-bottom:1px dotted var(--amber-d)}
footer{border-top:1px solid var(--edge);margin-top:44px;padding:26px 0 40px;color:var(--ink3);font-size:11.5px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:15px;flex-wrap:wrap;margin-bottom:11px}
.cnt{font-family:var(--mono);font-size:11px;color:var(--ink3)}

@media(max-width:1180px){.split{grid-template-columns:1fr}.stickycol{position:static}}
@media(max-width:860px){
  #shell{grid-template-columns:1fr}
  aside{position:static;height:auto;border-right:0;border-bottom:1px solid var(--edge)}
  main{padding:0 18px 70px}
  .ctl.sticky{position:static}
  th{position:static}
  dl.gloss{grid-template-columns:1fr;gap:4px}
  dl.gloss dt{padding-top:9px}
  .fill-row{grid-template-columns:1fr;gap:6px}
  .fstep{grid-template-columns:1fr 92px}
}
@media(max-width:520px){
  .pgrid{grid-template-columns:1fr}
  h2{font-size:25px}
  .g4,.g3,.g2{grid-template-columns:1fr}
}

/* ── guardas de largura: nenhum controle pode estourar o quadro ── */
main,.view,.card,.ctl,.split,.split>*,.grid>*{min-width:0}
.ctl>div{min-width:0;max-width:100%;flex:0 1 auto}
.ctl select,.ctl input{max-width:100%}
.fill-row>*{min-width:0}
.fill-row select,.fill-row input{width:100%;min-width:0;max-width:100%}
.fill-row .chip{max-width:100%;overflow-wrap:anywhere}
dl.gloss dd,dl.gloss dt{overflow-wrap:anywhere}
.p .bd,.mapcap,.srcnote,.note{overflow-wrap:anywhere}
#fill-prog{min-width:0}
@media(max-width:1180px){.fill-row{grid-template-columns:150px 1fr 120px}}

/* ── selo de celula sugerida e nao revisada ── */
.sug{display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;
padding:2px 7px;border-radius:2px;background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber);
border:1px dashed var(--amber-d);margin:0 4px 4px 0}
.p.sugerida{border-left:3px solid var(--amber-d)}
.sugbox{border:1px dashed var(--amber-d);border-radius:2px;padding:10px 12px;margin:10px 0;
background:color-mix(in srgb,var(--amber) 5%,transparent);font-size:11.5px;color:var(--ink2);line-height:1.5}
.sugbox b{color:var(--amber)}
.fill-row.sugerida{background:color-mix(in srgb,var(--amber) 5%,transparent)}
.fill-row .rac{grid-column:1/-1;font-size:11px;color:var(--ink3);line-height:1.45;
border-left:2px solid var(--amber-d);padding:6px 0 6px 11px;margin-top:6px}

/* ══════════════════════════════════════════════════════════
   V2.1 — ajustes
   ══════════════════════════════════════════════════════════ */

/* 1 · CORREÇÃO: .chip aplicado a <button> herdava o background nativo do
   navegador (buttonface, cinza-claro). Era o "fundo branco" da prancha 04. */
button.chip,button.pill{background:none;font-family:var(--mono)}

/* 2 · COR PADRONIZADA POR FAIXA DE TENSÃO, válida em todo o atlas.
   Três cores, não dez: dez subgrupos viram ruído e nenhum é memorizável.
   Dentro da faixa, o subgrupo se identifica pelo código. */
.fx{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.06em;border-radius:2px;padding:2px 7px;margin:0 4px 4px 0;border:1px solid}
.fx::before{content:"";width:7px;height:7px;border-radius:1px;display:block;flex:none}
.fx-BT{border-color:color-mix(in srgb,var(--bt) 50%,transparent);color:var(--bt)}      .fx-BT::before{background:var(--bt)}
.fx-MT{border-color:color-mix(in srgb,var(--mt) 50%,transparent);color:var(--mt)}     .fx-MT::before{background:var(--mt)}
.fx-AT{border-color:color-mix(in srgb,var(--at) 50%,transparent);color:var(--at)}     .fx-AT::before{background:var(--at)}
.fx-AS{border-color:color-mix(in srgb,var(--as) 55%,transparent);color:var(--as)}     .fx-AS::before{background:var(--as)}
.fx-nd{border-color:var(--edge2);color:var(--ink3)}           .fx-nd::before{background:var(--ink3)}
td.fxc,th.fxc{border-left:2px solid transparent}
td.fx-BT{border-left-color:var(--bt)} td.fx-MT{border-left-color:var(--mt)} td.fx-AT{border-left-color:var(--at)}
.legfx{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:9.5px;color:var(--ink3);margin-top:10px}

/* 3 · TIPOGRAFIA DE BLOCO LONGO. Largura de leitura, hierarquia e respiro. */
.prosa{max-width:74ch;font-size:12.5px;line-height:1.62;color:var(--ink2)}
.prosa p{margin-bottom:9px}
.prosa strong,.prosa b{color:var(--ink)}
.bloco{border-top:1px solid var(--edge);padding-top:13px;margin-top:15px}
.bloco:first-child{border-top:0;padding-top:0;margin-top:0}
.bloco>h4{margin-top:0}
.lista{margin:0 0 8px 0;padding:0;list-style:none}
.lista li{position:relative;padding-left:15px;margin-bottom:6px;font-size:12.5px;
  color:var(--ink2);line-height:1.55;max-width:74ch}
.lista li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:1px;background:var(--amber-d)}
.dl2{display:grid;grid-template-columns:132px 1fr;gap:5px 14px;font-size:12.5px}
.dl2 dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--ink3);
  text-transform:uppercase;padding-top:3px}
.dl2 dd{color:var(--ink2);max-width:66ch}

/* 4 · PRANCHA 04: lista vertical no lugar dos 15 chips em três linhas */
.arqsplit{display:grid;grid-template-columns:266px 1fr;gap:16px;align-items:start}
.arqlist{border:1px solid var(--edge);border-radius:3px;overflow:hidden;background:var(--pit)}
.arqlist button{display:block;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--edge);border-left:2px solid transparent;
  padding:9px 13px;cursor:pointer;color:var(--ink2);font-family:var(--body);font-size:12.5px;
  transition:all .15s}
.arqlist button:last-child{border-bottom:0}
.arqlist button:hover{background:color-mix(in srgb,var(--ink) 3%,transparent);color:var(--ink)}
.arqlist button.on{border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 7%,transparent);color:var(--amber)}
.arqlist .m{display:block;font-family:var(--mono);font-size:9px;color:var(--ink3);
  letter-spacing:.08em;margin-top:3px}
.arqlist button.on .m{color:var(--amber-d)}

/* 5 · PRANCHA 05: gráfico de relógio com mais respiro */
.relogio{display:grid;grid-template-columns:214px 1fr 62px;gap:14px;align-items:center;margin-bottom:11px}
.relbar{position:relative;height:26px;background:var(--edge);border-radius:3px;overflow:hidden}
.relbar .faixa{position:absolute;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--amber),var(--bt))}
.relbar .ponta{position:absolute;top:-3px;bottom:-3px;background:var(--alert);width:1.5px;opacity:.75;z-index:2}
.relaxis{display:grid;grid-template-columns:214px 1fr 62px;gap:14px;margin-top:2px}
.relaxis .t{position:relative;height:15px;font-family:var(--mono);font-size:9px;color:var(--ink3)}
.relaxis .t span{position:absolute;transform:translateX(-50%)}

/* 6 · PRANCHA 08: grade estável. O selo entra na mesma linha do rótulo e o
   raciocínio fica recolhido: aberto sempre, ele polui e quebra o alinhamento. */
.fill-row{grid-template-columns:206px 1fr 122px}
.fill-row .fl{display:flex;flex-wrap:wrap;align-items:center;gap:5px;line-height:1.4}
.sug{font-size:8px;padding:1px 5px;letter-spacing:.1em;white-space:nowrap}
.porque{background:none;border:0;color:var(--amber);font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;cursor:pointer;padding:1px 4px;border-bottom:1px dotted var(--amber-d)}
.fill-row .rac{display:none}
.fill-row.aberta .rac{display:block}

/* 7 · PRANCHA 07: hierarquia por impacto, sem bloco vazio */
.lacrow{display:grid;grid-template-columns:74px 1fr 96px;gap:12px;align-items:start;
  padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--edge) 50%,transparent)}
.lacrow .cod{font-family:var(--mono);font-size:9.5px;color:var(--ink3);letter-spacing:.06em}
.lacrow .txt{font-size:12.5px;color:var(--ink2);line-height:1.5;max-width:82ch}
.lacrow .txt .fech{color:var(--ok)}
.lacrow .como{font-size:11.5px;color:var(--ink3);margin-top:5px;border-left:2px solid var(--edge2);padding-left:10px}
.imp-critico{color:var(--alert)} .imp-alto{color:var(--amber)}
.imp-medio{color:var(--ink2)} .imp-baixo{color:var(--ink3)}

/* 8 · composição setorial com drill-down */
.secrow{cursor:pointer;transition:background .14s}
.secrow:hover{background:color-mix(in srgb,var(--amber) 5%,transparent)}
.secdrill{border-left:2px solid var(--amber-d);margin:2px 0 9px 36px;padding:9px 12px;
  background:color-mix(in srgb,var(--ink) 2%,transparent);font-size:11.5px;color:var(--ink2)}
.secdrill h6{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--ink3);
  text-transform:uppercase;margin:9px 0 4px;font-weight:400}
.secdrill h6:first-child{margin-top:0}

/* 9 · regionalismos */
.reg{border:1px solid var(--edge);border-radius:3px;padding:15px 17px;background:var(--pit);margin-bottom:11px}
.reg .cab{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.reg h4{margin:0;font-family:var(--disp);font-size:16.5px;font-weight:400;color:var(--ink);
  letter-spacing:-.008em;text-transform:none}
.cls-fato{color:var(--ok)} .cls-inferencia{color:var(--mt)} .cls-hipotese{color:var(--amber)}
@media(max-width:1180px){.arqsplit{grid-template-columns:1fr}}
@media(max-width:860px){.relogio,.relaxis{grid-template-columns:1fr}.lacrow{grid-template-columns:1fr}
  .dl2{grid-template-columns:1fr}.fill-row{grid-template-columns:1fr}}
@media(max-width:1180px){.arqsplit .split{grid-template-columns:1fr!important}}
@media(max-width:860px){.arqsplit .split{grid-template-columns:1fr!important}
  .arqlist button{padding:8px 11px}.secdrill{margin-left:0}}
/* filtro de classe: segmento com 5 botoes precisa de fonte menor */
#segcl button{font-size:9px;padding:6px 2px;letter-spacing:.04em}
#segcl button.on[data-c=TODAS]{background:var(--ink2)}
#segcl button.on{background:var(--amber);color:var(--void)}
.prosa.larga{max-width:none}
.reg2col{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.reg2col .bloco{border-top:1px solid var(--edge);padding-top:13px;margin-top:15px}
.secrow.hit{background:color-mix(in srgb,var(--amber) 9%,transparent);border-left:2px solid var(--amber);padding-left:6px!important}
@media(max-width:1180px){.reg2col{grid-template-columns:1fr}}
.relogio.clicavel{cursor:pointer;border-radius:3px;padding:3px 5px;margin-left:-5px;transition:background .14s}
.relogio.clicavel:hover{background:color-mix(in srgb,var(--amber) 6%,transparent)}
.relogio.sel{background:color-mix(in srgb,var(--bt) 9%,transparent);box-shadow:inset 2px 0 0 var(--bt)}
#thor tbody tr.sel{background:color-mix(in srgb,var(--bt) 9%,transparent);box-shadow:inset 2px 0 0 var(--bt)}
/* U-06a: destaque do grupo alcancado a partir do chip de CNAE da persona, na 03.
   Sem regra propria a classe entrava e nada mudava, entao o salto chegava mudo. */
#nrglista tbody tr.sel{background:color-mix(in srgb,var(--bt) 10%,transparent);box-shadow:inset 2px 0 0 var(--bt)}
#nrglista tbody tr.sel td:first-child{font-weight:500}
#nrglista td .chip.b{cursor:pointer;margin:1px 2px 1px 0}
/* 50/50 na prancha 05: relogio mais estreito */
#v-oper .relogio,#v-oper .relaxis{grid-template-columns:150px 1fr 50px;gap:10px}

/* ══ CAMADA ENERGÉTICA (Prompt B) ══════════════════════════════════════════
   A régua de solidez: procedência por CAMPO, não por painel (regra 1 da seção 9).
   Quatro naturezas, quatro estados, do mais sólido ao mais vazado. É monocromática
   de propósito: a cor fica livre para codificar categoria, e a régua não compete. */
.sl{padding-left:11px;position:relative}
.sl:before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:1px}
.sl-fato:before{background:var(--ink2)}
.sl-inf:before{background:repeating-linear-gradient(180deg,var(--ink2) 0 5px,transparent 5px 7px)}
.sl-ded:before{background:repeating-linear-gradient(180deg,var(--ink3) 0 2px,transparent 2px 6px)}
.sl-hip:before{background:none;border:1px solid var(--ink3);border-radius:1px}
.slleg{display:flex;gap:18px;flex-wrap:wrap;font-size:10.5px;color:var(--ink3);margin:14px 0 4px}
.slleg .sl{padding-left:10px}

.nrgctl{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;margin:20px 0 18px}
.nrgctl .seg{min-width:250px}
.nrgctl input[type=search]{min-width:220px}

.agr{border:1px solid var(--edge);border-radius:5px;margin-bottom:9px;overflow:hidden;
  background:linear-gradient(165deg,var(--slab),var(--pit))}
.agr>summary{cursor:pointer;padding:12px 15px;display:grid;gap:12px;align-items:center;
  grid-template-columns:1fr auto auto auto auto;list-style:none}
.agr>summary::-webkit-details-marker{display:none}
.agr>summary:hover{background:color-mix(in srgb,var(--amber) 4%,transparent)}
.agr[open]>summary{border-bottom:1px solid var(--edge)}
.agr .anome{font-size:14px;color:var(--ink)}
.agr .asub{font-size:10.5px;color:var(--ink3);font-family:var(--mono);letter-spacing:.05em}
.agr .anum{font-family:var(--mono);font-size:12px;color:var(--ink2);text-align:right;min-width:62px}
.agr .anum i{display:block;font-style:normal;font-size:9px;letter-spacing:.1em;color:var(--ink3)}
.agr .corpo{padding:4px 15px 15px}

/* R2-5f: eixo vertical, linha-guia e leitura hora a hora dentro da célula aberta */
/* R2-4a: ausência vira uma linha por concessão, e o texto inteiro abre no clique */
.ausl{border:1px solid var(--edge);border-radius:3px;margin-bottom:4px;background:color-mix(in srgb,var(--ink) 1%,transparent)}
.ausl>summary{display:flex;gap:9px;align-items:center;cursor:pointer;padding:7px 11px;
  list-style:none;font-size:12px}
.ausl>summary::-webkit-details-marker{display:none}
.ausl>summary:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.ausl .an{color:var(--ink2);white-space:nowrap}
.ausl .af{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ausl[open]>summary .af{white-space:normal;overflow:visible}
/* R2-4b: a legenda da barra passa a caber o nome da célula, então vira coluna */
.cobleg.cobcel{display:flex;flex-direction:column;gap:3px;font-size:11.5px}
.cobleg.cobcel span{display:flex;gap:7px;align-items:baseline}
.cobleg.cobcel b{font-family:var(--mono);color:var(--ink);min-width:74px}
.curvabox{position:relative}
.curva .grade{stroke:var(--edge);stroke-width:.5;stroke-dasharray:2 4}
.curva .ry{font-size:8px;fill:var(--ink3)}
.curva .guia{stroke:var(--ink2);stroke-width:.8;stroke-dasharray:2 3;pointer-events:none}
.curvaler{display:flex;gap:14px;flex-wrap:wrap;align-items:center;min-height:19px;
  font-size:11px;color:var(--ink3);margin:3px 0 0;font-variant-numeric:tabular-nums}
.curvaler b{font-size:12px;color:var(--ink)}
.curvaler .dica{font-style:italic;opacity:.65}
.curvaler .du{color:var(--amber)} .curvaler .sa{color:var(--ink2)} .curvaler .do{color:var(--ink3)}
.curvaler .pt{color:var(--alert)}
.curva{width:100%;height:auto;display:block;cursor:crosshair}
.curva .area{fill:color-mix(in srgb,var(--amber) 13%,transparent)}
.curva .linha{fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linejoin:round}
.curva .ponta{fill:color-mix(in srgb,var(--alert) 10%,transparent)}
.curva .eixo{stroke:var(--edge2);stroke-width:.6}
.curva text{font-family:var(--mono);font-size:8.5px;fill:var(--ink3)}

.ind{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:11px;margin:13px 0}
.ind>div{font-size:12.5px;color:var(--ink)}
.ind .q{display:block;font-size:10.5px;color:var(--ink3);margin-bottom:2px}
.ind .t{font-family:var(--mono);font-size:9.5px;color:var(--ink3);margin-left:5px}

.bnd{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  padding:2px 7px;border-radius:2px;text-transform:uppercase}
.bnd-alta{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.bnd-media{background:color-mix(in srgb,var(--mt) 14%,transparent);color:var(--mt)}
.bnd-baixa{background:color-mix(in srgb,var(--ink3) 18%,transparent);color:var(--ink3)}

.lastro{border-left:2px solid var(--alert);background:color-mix(in srgb,var(--alert) 6%,transparent);padding:9px 13px;
  font-size:11.5px;color:var(--ink2);border-radius:0 3px 3px 0;margin-top:11px}
.lastro b{color:var(--alert)}
.vazio{color:var(--ink3);font-size:12px;font-style:italic}

/* barra de recorte, agora dentro das pranchas onde ela atua */
.fxbar{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-end;margin:0 0 18px;
  padding:13px 16px;border:1px solid var(--edge);border-radius:5px;background:color-mix(in srgb,var(--pit) 55%,transparent)}
.fxbar .fxgrp{display:flex;flex-direction:column;gap:6px}
.fxbar .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink3);text-transform:uppercase}
.fxbar .seg{min-width:210px}
.fxbar .fxeco{flex:1;min-width:250px;font-size:11.5px;color:var(--ink3);line-height:1.45}
.fxbar .fxeco b{color:var(--ink2);font-family:var(--mono)}
/* R2-3b e R2-5g: o ALCANCE do recorte, declarado na propria barra. Quebra a linha inteira
   para nao competir com o eco, que fala de numero, enquanto este fala de escopo. */
.fxbar .fxescopo{flex-basis:100%;order:9;font-size:11.5px;color:var(--ink3);line-height:1.5;
  border-top:1px dashed var(--edge2);padding-top:9px;margin-top:2px;max-width:104ch}
.fxbar .fxescopo b{color:var(--ink2)}
.fxbar .fxeco{order:10}

/* R2-3c e R2-1a: o UNIVERSO de um numero, colado nele. Dois numeros vizinhos que
   respondem perguntas diferentes precisam dizer qual pergunta cada um responde, senao
   o leitor supoe que sao duas estimativas da mesma coisa e conclui que uma esta errada. */
.univ{display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 7px;border-radius:2px;margin:2px 0 6px;line-height:1.4}
.univ-dos{background:color-mix(in srgb,var(--mt) 12%,transparent);color:var(--mt);border:1px solid color-mix(in srgb,var(--mt) 38%,transparent)}
.univ-b3{background:color-mix(in srgb,var(--bt) 11%,transparent);color:var(--bt);border:1px solid color-mix(in srgb,var(--bt) 36%,transparent)}
.ponte{border-left:2px solid var(--edge2);margin:11px 0 2px;padding:9px 0 9px 12px;
  font-size:11.5px;color:var(--ink2);background:color-mix(in srgb,var(--ink) 2%,transparent);max-width:78ch;line-height:1.5}
.ponte b{color:var(--ink)}
.ponte.al{border-left-color:var(--alert)} .ponte.al b{color:var(--alert)}
.ponte.ok{border-left-color:var(--ok)} .ponte.ok b{color:var(--ok)}

/* legenda e mapa acesos juntos, nos dois sentidos */
#map-pan .conc{transition:opacity .13s}
#map-pan .conc.dim{opacity:.2}
#map-pan .conc.hi{stroke:var(--ink);stroke-width:1.4;paint-order:stroke fill}
.maplegend button.hi{background:color-mix(in srgb,var(--amber) 13%,transparent);border-color:var(--amber)}
.maplegend button .mut em{font-style:normal;font-size:8.5px;letter-spacing:.1em;opacity:.7}

/* dicionario de indicadores: 29 linhas fechadas, abre no clique */
.dic{border:1px solid var(--edge);border-radius:4px;margin-bottom:5px;
  background:linear-gradient(165deg,var(--slab),var(--pit))}
.dic>summary{cursor:pointer;padding:9px 14px;display:grid;gap:11px;align-items:center;
  grid-template-columns:26px 1fr auto auto 14px;list-style:none}
.dic>summary::-webkit-details-marker{display:none}
.dic>summary:hover{background:color-mix(in srgb,var(--amber) 5%,transparent)}
.dic[open]>summary{border-bottom:1px solid var(--edge)}
.dic .dnum{font-family:var(--mono);font-size:10px;color:var(--ink3);letter-spacing:.06em}
.dic .dnome{font-size:13px;color:var(--ink)}
.dic .dun{font-size:10px;text-align:right}
.dic .dseta{width:0;height:0;border:4px solid transparent;border-top-color:var(--ink3);
  margin-top:4px;transition:transform .16s;justify-self:end}
.dic[open] .dseta{transform:rotate(-180deg);margin-top:-2px}
.dic .dl2{padding:12px 14px 4px}
.dic .dgo{margin:0 14px 13px;background:none;border:1px solid var(--edge2);border-radius:3px;
  color:var(--ink3);font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  padding:6px 11px;cursor:pointer;text-transform:uppercase;transition:all .16s}
.dic .dgo:hover{color:var(--amber);border-color:var(--amber-d)}

/* fileira de concessoes: o eixo primario da prancha 03, sempre visivel */
.concbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:6px;margin:0 0 16px}
.concbar button{background:linear-gradient(165deg,var(--slab),var(--pit));border:1px solid var(--edge);
  border-radius:4px;padding:9px 11px;cursor:pointer;text-align:left;transition:all .15s;
  display:flex;flex-direction:column;gap:2px}
.concbar button b{font-weight:400;font-size:12px;color:var(--ink2);line-height:1.25}
.concbar button i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.05em;color:var(--ink3)}
.concbar button:hover{border-color:var(--edge2)}
.concbar button:hover b{color:var(--ink)}
.concbar button.on{border-color:var(--amber-d);background:color-mix(in srgb,var(--amber) 9%,transparent)}
.concbar button.on b{color:var(--amber)}

/* fileira de concessoes numa linha so */
.concbar{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:5px}
.concbar button{padding:6px 8px;gap:1px}
.concbar button b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.concbar button i{font-size:8.5px;white-space:nowrap}

/* prancha 03 em DUAS areas, nao tres. Os cartoes de persona viravam duas colunas
   dentro da area da esquerda e o mapa fazia a terceira, o que espremia o
   detalhamento, que e o conteudo mais denso da prancha. Agora a esquerda e um
   trilho de uma coluna so, fixo, e a direita fica com o dobro de largura. */
.split.conc2{grid-template-columns:326px minmax(0,1fr)}
.split.conc2 .prail{position:sticky;top:14px;max-height:calc(100vh - 28px);
  overflow-y:auto;overflow-x:hidden;padding-right:6px}
.split.conc2 .prail::-webkit-scrollbar{width:6px}
.split.conc2 .prail::-webkit-scrollbar-thumb{background:var(--edge2);border-radius:3px}
.split.conc2 .pgrid{grid-template-columns:1fr;gap:7px}
.split.conc2 .p{border-radius:3px}
.split.conc2 #col-det .mapbox{width:100%}
@media (max-width:1180px){
  .split.conc2{grid-template-columns:1fr}
  .split.conc2 .prail{position:static;max-height:none}
  .split.conc2 .pgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}

/* os tres indicadores em destaque, no topo do detalhamento da persona */
.tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;margin:0 0 11px}
.tres>div{padding-left:12px}
.tres .q{display:block;font-size:10.5px;color:var(--ink3);letter-spacing:.03em;margin-bottom:3px}
.tres .n{display:block;font-size:23px;line-height:1.1;color:var(--ink);font-family:var(--disp)}
.tres .n em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink3);margin-left:5px}
.tres .o{display:block;font-size:10.5px;color:var(--ink3);margin-top:4px;line-height:1.35}
.tres .o .bnd{padding:1px 5px;font-size:8.5px}

/* tabela por grupo CNAE dentro da concessao */
.tsec{font-size:12px}
.tsec th{cursor:pointer;user-select:none;white-space:nowrap;transition:color .15s}
.tsec th:hover{color:var(--ink)}
.tsec th.ord{color:var(--amber)}
.tsec td{vertical-align:top;padding-top:7px;padding-bottom:7px}
.tsec tfoot td{border-top:1px solid var(--edge2);color:var(--ink2);font-family:var(--mono);padding-top:9px}
.bar.micro{height:2px;margin-bottom:4px;max-width:230px}
.bar.micro i{background:var(--amber);opacity:.55}

/* composicao setorial em tres niveis */
.secgrade{display:grid;grid-template-columns:26px 1fr 84px 78px 92px 74px;gap:10px;align-items:center;
  padding:7px 6px;border-bottom:1px solid var(--edge)}
.secgrade.cab{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--ink3);
  text-transform:uppercase;border-bottom-color:var(--edge2)}
.secgrade.linha{cursor:pointer;transition:background .14s}
.secgrade.linha:hover{background:color-mix(in srgb,var(--amber) 5%,transparent)}
.secgrade.linha.hit{background:color-mix(in srgb,var(--amber) 8%,transparent)}
.secgrade .num{text-align:right;font-size:11.5px}
.secgrade .bar{display:block;height:3px;margin-top:4px;max-width:340px}
.secgrade.tot{border-bottom:0;border-top:1px solid var(--edge2);color:var(--ink2);font-size:11.5px}
.secgrade.divl{grid-template-columns:26px 1fr 84px 78px 92px 74px;cursor:pointer;
  border-bottom-color:color-mix(in srgb,var(--edge) 50%,transparent);padding:5px 6px}
.secgrade.divl:hover{background:color-mix(in srgb,var(--amber) 7%,transparent)}
.secdrill{padding:9px 0 9px 26px}

.gfil{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:11px}
.gfil select{font-size:11px;padding:5px 8px}
.fchip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink2);
  background:color-mix(in srgb,var(--amber) 11%,transparent);border:1px solid var(--amber-d);border-radius:3px;padding:4px 8px}
.fchip b{font-weight:400;color:var(--amber);font-family:var(--mono)}
.fchip button{background:none;border:0;color:var(--ink3);cursor:pointer;font-size:13px;line-height:1;padding:0}
.fchip button:hover{color:var(--alert)}

/* explicacao das tres unidades, ao lado dos numeros que a usam */
.dic.unid{margin-bottom:14px;border-color:var(--amber-d)}
.dic.unid .dnome{color:var(--amber)}
.unidcorpo{padding:13px 15px 15px}
.tuni{font-size:11.5px;margin-bottom:11px}
.tuni th{font-size:9px}
.tuni td{vertical-align:top;padding:6px 8px}
.tuni .sl{padding-left:10px;font-size:10.5px}

/* regionalismos fechados */
details.reg>summary{cursor:pointer;list-style:none;display:flex;gap:14px;align-items:center;
  justify-content:space-between;padding:11px 15px}
details.reg>summary::-webkit-details-marker{display:none}
details.reg>summary:hover{background:color-mix(in srgb,var(--amber) 5%,transparent)}
details.reg[open]>summary{border-bottom:1px solid var(--edge)}
details.reg>summary .cab{margin:0;border:0;padding:0}
details.reg .regchips{display:flex;gap:7px;align-items:center;flex-shrink:0}
details.reg>div{padding:0 15px 15px}

.arqlist button .m.mono{font-size:9.5px;color:var(--ink3);letter-spacing:.03em;display:block;margin-top:2px}
.arqlist button.on .m.mono{color:var(--amber-d)}

/* cobertura da camada de personas */
.cobbar{display:flex;height:30px;border-radius:4px;overflow:hidden;border:1px solid var(--edge)}
.cobbar>div{transition:opacity .15s}
.cobbar>div:hover{opacity:.75}
.cobleg{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px;font-size:10.5px;color:var(--ink3)}
.cobleg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* tres linhas na curva */
.curva .linha.sab{stroke:var(--mt);stroke-width:1.2;opacity:.85}
.curva .linha.dom{stroke:var(--ink3);stroke-width:1.1;stroke-dasharray:3 2;opacity:.85}
.curvaleg{display:flex;gap:15px;font-size:10px;color:var(--ink3);margin-top:3px}
.curvaleg span:before{content:"";display:inline-block;width:13px;height:2px;margin-right:5px;vertical-align:3px}
.curvaleg .du:before{background:var(--amber)}
.curvaleg .sa:before{background:var(--mt)}
.curvaleg .do:before{background:var(--ink3)}


/* ── U-06b: grade comparável da prancha 05b ───────────────────────────────
   Quatro por linha no desktop, escolha do Leonardo. A escala vertical das
   miniaturas é COMUM às quinze, e é ela que faz a comparação valer. */
.grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.grade.fraca{opacity:.72}
@media(max-width:1180px){.grade{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
.celcard{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--linha);
  border-radius:12px;padding:10px 11px;cursor:pointer;font:inherit;color:inherit;transition:border-color .12s}
.celcard:hover{border-color:var(--ink3)}
.celcard.sel{border-color:var(--bt);box-shadow:0 0 0 1px var(--bt)}
.celcard.curto{box-shadow:inset 3px 0 0 var(--amber)}
.celcard.curto.sel{box-shadow:inset 3px 0 0 var(--amber),0 0 0 1px var(--bt)}
.celcard .ct{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.celcard .cnome{font-size:13px;font-weight:500;color:var(--ink);line-height:1.25}
.celcard .cpct{font-size:11px;color:var(--ink2);white-space:nowrap}
.celcard .ccod{font-size:10.5px;color:var(--ink3);margin:3px 0 6px;letter-spacing:.04em}
.celcard .minicurva{width:100%;height:auto;display:block}
.celcard .cfoot{display:flex;justify-content:space-between;font-size:11px;color:var(--ink2);margin-top:6px}
.celcard .cfoot .nq{color:var(--amber);font-weight:500}
.celcard .crot{font-size:10.5px;color:var(--amber);margin-top:4px;line-height:1.25}
.celdet{margin-top:16px}
.celdet .agr{border-color:var(--bt)}

.celcard .cid{color:var(--bt);font-family:var(--mono);font-size:12px;letter-spacing:.04em;margin-right:2px}

/* ── R2-2a e R2-2b: prancha 02 ─────────────────────────────
   A ficha do indicador sobe para junto do resultado, e o dicionario do fim vira indice.
   Antes o mesmo conteudo aparecia duas vezes: em cima, para o indicador escolhido, e
   embaixo, para os 29. Quem olhava o mapa nao rolava ate o fim; quem lia o dicionario
   nao via o numero. */
.kpificha{border:1px solid var(--edge);border-left:2px solid var(--amber);border-radius:3px;
  padding:12px 16px;background:color-mix(in srgb,var(--ink) 2%,transparent)}
.kpificha dl{margin:0}
.kpificha dt.al{color:var(--alert)}
.kpiidx{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:4px}
.kpil{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 1%,transparent);border:1px solid var(--edge);border-radius:3px;
  padding:7px 11px;color:var(--ink2);font-family:var(--body);font-size:12.5px;transition:all .14s}
.kpil:hover{border-color:var(--amber);color:var(--ink)}
.kpil.on{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 8%,transparent);color:var(--ink)}
.kpil .dnome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anbox{margin-top:15px;padding-top:13px;border-top:1px solid var(--edge)}
.anbox h4{margin:0 0 8px}
.anbox p{font-size:12.5px;color:var(--ink2);line-height:1.55;margin-bottom:8px;max-width:64ch}
.anbox b{color:var(--ink)} .anbox .ok{color:var(--ok)} .anbox .al{color:var(--alert)} .anbox .am{color:var(--amber)}

/* Codigo curto do arquetipo, A1 a A23. Mesmo peso visual do C1..C16 da celula, para o
   olho reconhecer que sao duas reguas do mesmo tipo: identificador curto e citavel. */
.acod{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--amber);border:1px solid var(--amber-d);border-radius:2px;padding:1px 5px;
  margin-right:7px;vertical-align:baseline;font-weight:600}
.arq .acod{font-size:9px;padding:0 4px;margin-right:5px}

/* ══════════════════════════════════════════════════════════════════════════
   CAMADA EDP — identidade visual EDP Soluções aplicada sobre o Atlas FIGE V2.
   Tipografia FT Base, superfícies claras, teal como cor de ação, verde de
   energia como realce, gradiente da marca como assinatura. Nenhuma regra
   estrutural do atlas foi alterada: só cor, tipo, raio, sombra e ritmo.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"FT Base";src:url("/estatico/ftbase-300.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"FT Base";src:url("/estatico/ftbase-350.ttf") format("truetype");font-weight:350;font-style:normal;font-display:swap}
@font-face{font-family:"FT Base";src:url("/estatico/ftbase-350.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"FT Base";src:url("/estatico/ftbase-500.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"FT Base";src:url("/estatico/ftbase-600.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}

body{font-weight:350;background:var(--void);
  background-image:
    radial-gradient(ellipse 60% 38% at 12% -10%,color-mix(in srgb,var(--violet) 7%,transparent),transparent 64%),
    radial-gradient(ellipse 52% 34% at 96% -6%,color-mix(in srgb,var(--cyan) 10%,transparent),transparent 62%);
  background-attachment:fixed}
body::after{display:none}
html[data-tema=slate] body{
  background-image:
    radial-gradient(ellipse 62% 40% at 10% -12%,color-mix(in srgb,var(--violet) 26%,transparent),transparent 64%),
    radial-gradient(ellipse 52% 34% at 98% -8%,color-mix(in srgb,var(--cyan) 12%,transparent),transparent 62%)}
a{color:var(--amber);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--amber) 34%,transparent)}
a:hover{color:var(--ink);border-bottom-color:var(--ink)}
::selection{background:color-mix(in srgb,var(--violet) 22%,transparent)}

/* ── tipografia de rótulo: overline EDP no lugar do monoespaçado ────────── */
.navsec,.nav-item .num,.nav-item .badge,.gfilt .lbl,.seg button,.ctl .lbl,.fxbar .lbl,
h4,h2 .n,.stat .k,.p .tag,.dl2 dt,.secgrade.cab,th,.pill,.sug,.univ,.bnd,.logo .v,
button.act,button.gh,.dic .dgo,.fchip,.acod,.arqlist .m,.fill-row .fl,.porque,
.maplegend button,.scale,.legfx,.curvaleg,.slleg,.agr .asub,.lacrow .cod,.chip,.fx{
  font-family:var(--lbl);font-weight:500}
th,.stat .k,h4,.navsec,.ctl .lbl,.fxbar .lbl,.gfilt .lbl,h2 .n,.univ,.sug,.bnd,.pill,.logo .v,
button.act,button.gh{letter-spacing:.1em}
h2,h3,.p h5,.tres .n,.reg h4,details.reg h4{font-weight:300;letter-spacing:-.015em}
h2{font-size:34px;line-height:1.12;color:var(--ink)}
h2 .n{color:var(--amber);font-weight:600}
h3{font-size:21px;color:var(--ink)}
.lede{color:var(--ink2);font-weight:350;text-wrap:pretty}
b,strong{font-weight:600}

/* ── barra lateral e marca ──────────────────────────────────────────────── */
aside{background:color-mix(in srgb,var(--void) 86%,transparent);border-right:1px solid var(--edge);
  backdrop-filter:blur(14px);padding-top:20px}
.logo{padding:0 20px 18px;position:relative}
.logo::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:2px;background:var(--grad);
  border-radius:2px;opacity:.9}
.logo .marca{display:block;height:26px;width:auto;margin-bottom:16px}
html[data-tema=slate] .logo .marca.claro{display:block}
html[data-tema=slate] .logo .marca.escuro{display:none}
.logo .marca.claro{display:none}
.logo h1{font-family:var(--disp);font-size:26px;font-weight:300;letter-spacing:-.02em;color:var(--ink)}
.logo h1 em{font-style:normal;font-weight:600;color:var(--amber)}
.logo .v{border:1px solid var(--edge2);color:var(--ink3);border-radius:var(--r);padding:3px 7px;
  font-size:9px;background:var(--pit)}
.nav-item{border-left:0;position:relative;padding:10px 20px;font-weight:350;border-radius:0}
.nav-item::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;
  background:transparent;transition:background var(--dur,.16s)}
.nav-item.on{background:color-mix(in srgb,var(--amber) 8%,transparent);color:var(--amber);font-weight:500}
.nav-item.on::before{background:var(--amber)}
html[data-tema=slate] .nav-item.on::before{background:var(--energy)}
.nav-item .badge{background:color-mix(in srgb,var(--at) 14%,transparent);color:var(--at);
  border-radius:var(--r);font-size:8.5px}
.temabtn{display:flex;align-items:center;gap:8px;margin:16px 14px 0;padding:8px 11px;width:calc(100% - 28px);
  background:var(--pit);border:1px solid var(--edge);border-radius:var(--r);color:var(--ink3);
  font-family:var(--lbl);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  cursor:pointer;transition:border-color .16s,color .16s}
.temabtn:hover{border-color:var(--amber);color:var(--amber)}
.temabtn i{width:9px;height:9px;border-radius:50%;background:var(--grad);flex:none}
/* ── V3-MG-03: O BOTAO DE OCULTAR MARGEM E O QUE ELE ESCONDE ──────────────────────────
   Pedido de Leonardo em 20/08/2026. Ele e um botao so, na barra fixa, e a chave e o
   atributo `data-margem="off"` no `html`, igual ao tema.
   USA `visibility` E NUNCA `display`, por pedido explicito dele: "nao precisa mover
   elementos, e so nao exibir, pra evitar qualquer descasamento de diagramacao". A primeira
   apaga o desenho e mantem a caixa; a segunda reflui a grade e e onde nasce desalinho.
   A LISTA E POR CONTAINER E NAO POR PECA, e isto tem um motivo medido: a `.mgmini`, a
   miniatura de curva, NAO e de margem. Ela nasceu no bloco da margem e hoje a prancha Por
   Cidade a usa para desenhar a composicao de curvas da cidade. Esconder `.mgmini` apagaria
   doze miniaturas que nao tem nada com margem. Escondendo o CONTAINER, `.mgcp`, a
   miniatura de dentro dele vai junto e a de fora fica. */
html[data-margem="off"] .mgcob,
html[data-margem="off"] .mgsel,
html[data-margem="off"] .mgpt,
html[data-margem="off"] .mgcp,
html[data-margem="off"] .mgef,
html[data-margem="off"] .mgno,
html[data-margem="off"] .mgok,
html[data-margem="off"] .margem,
html[data-margem="off"] .op-mg,
html[data-margem="off"] .op-mgn,
html[data-margem="off"] .op-mgp,
html[data-margem="off"] .op-mgr{visibility:hidden}
/* O BOTAO DIZ EM QUE ESTADO ELE ESTA, e nao so o que ele faz: ligado, ele fica com a cor
   de alerta, porque a tela esta escondendo numero e quem chega depois tem de ver isso. */
/* V3-SW-01: O AVISO DE "HA COISA ESCONDIDA" SOBREVIVEU A TROCA. O botao antigo ficava
   com borda e texto em `--at` quando a margem estava oculta, e esse sinal nao e enfeite:
   ele avisa que a tela esta mostrando menos do que tem. Com o switch, quem carrega o
   aviso e o ROTULO, porque o trilho ja carrega o estado. Sem isto, desligar a margem
   ficaria silencioso e alguem leria a tela achando que os numeros nao existem. */
.figesw.mgbtn.off span{color:var(--at)}
.figesw.mgbtn.off .swt{border-color:var(--at)}
.figesw.mgbtn.off .swt i{background:var(--at)}

.rodape-marca{margin:18px 20px 0;padding-top:14px;border-top:1px solid var(--edge);
  font-family:var(--lbl);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);line-height:1.6}

/* ── superfícies ────────────────────────────────────────────────────────── */
.card,.p,.agr,.dic,.concbar button,.celcard{background:var(--slab);box-shadow:var(--sh-sm)}
.card{border-radius:var(--r2);padding:20px}
.mapbox,.ctl,.fxbar,.gfilt,.arqlist,.reg,.kpil,.dic,.agr,.ausl{border-radius:var(--r2)}
.p,.celcard,.concbar button{border-radius:var(--r2)}
.stat{border-left:0;border-top:2px solid var(--amber);background:var(--slab);border-right:1px solid var(--edge);
  border-bottom:1px solid var(--edge);border-left:1px solid var(--edge);border-radius:0 0 var(--r) var(--r);
  padding:13px 15px;box-shadow:var(--sh-sm)}
.stat.bt{border-top-color:var(--bt)}.stat.mt{border-top-color:var(--mt)}
.stat.at{border-top-color:var(--at)}.stat.as{border-top-color:var(--as)}
.stat .v{font-family:var(--disp);font-weight:300;font-size:28px;letter-spacing:-.02em;color:var(--ink)}
.stat.fxon{background:color-mix(in srgb,var(--amber) 6%,transparent);box-shadow:var(--sh-md)}
.kpificha{border-left:1px solid var(--edge);border-top:2px solid var(--amber);border-radius:0 0 var(--r) var(--r);
  background:var(--slab)}
.note{border-left:0;border-top:2px solid var(--amber);background:color-mix(in srgb,var(--amber) 5%,transparent);
  border-radius:0 0 var(--r) var(--r);padding:14px 18px}
.note.al{border-top-color:var(--alert)}
.note.ok{border-top-color:var(--ok)}.note.ok b{color:var(--ok)}
.p:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.p.sel{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),var(--sh-md)}
.p h5{font-family:var(--disp);font-weight:500;font-size:17px;letter-spacing:-.005em}
.p .arq{color:var(--amber);font-family:var(--lbl);font-weight:500;letter-spacing:.06em}
.celcard.sel,#thor tbody tr.sel,.relogio.sel,#nrglista tbody tr.sel{border-color:var(--amber)}
.celcard.sel{box-shadow:0 0 0 1px var(--amber),var(--sh-sm)}
.fstep.res{border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 7%,transparent)}
.fstep.res .t,.fstep.res .v{color:var(--amber)}

/* ── controles ──────────────────────────────────────────────────────────── */
button.act{background:var(--amber);color:var(--void);border-radius:var(--r);font-weight:600;
  padding:10px 17px;transition:background .16s,box-shadow .16s}
button.act:hover{opacity:1;background:color-mix(in srgb,var(--amber) 86%,var(--ink));box-shadow:var(--sh-md)}
button.gh{border-radius:var(--r);border-color:var(--edge2);padding:9px 15px}
button.gh:hover{border-color:var(--amber);color:var(--amber);background:color-mix(in srgb,var(--amber) 6%,transparent)}
.seg{border-radius:var(--r);border-color:var(--edge2);background:var(--slab)}
.seg button{color:var(--ink3);font-weight:500}
.seg button.on{background:var(--amber);color:var(--void);font-weight:600}
#segcl button.on{background:var(--amber);color:var(--void)}
select,input[type=search],input[type=text],input[type=number]{border-radius:var(--r);background:var(--slab);
  border-color:var(--edge2);font-family:var(--body);font-size:12.5px;color:var(--ink)}
select:focus,input:focus{border-color:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 24%,transparent)}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.chip,.fx{border-radius:var(--r);padding:3px 8px}
.chip.b:hover{border-color:var(--amber);color:var(--amber);background:color-mix(in srgb,var(--amber) 7%,transparent)}
.pill,.sug,.univ,.bnd{border-radius:var(--r)}
.bar i,.prog i{background:var(--amber)}
.bar,.prog{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.maplegend button{border-radius:var(--r)}
.acod{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 42%,transparent);border-radius:var(--r)}

/* ── tabelas ────────────────────────────────────────────────────────────── */
th{background:var(--void);color:var(--ink3);border-bottom:1px solid var(--edge2)}
th:hover,th.srt,.tsec th.ord{color:var(--amber)}
tbody tr:hover{background:color-mix(in srgb,var(--amber) 6%,transparent)}
td{border-bottom:1px solid var(--edge)}
td.nulo{background:repeating-linear-gradient(45deg,transparent 0 4px,color-mix(in srgb,var(--ink3) 26%,transparent) 4px 5px)}

/* ── mapas ──────────────────────────────────────────────────────────────── */
.mapbox{background:var(--pit);border-color:var(--edge)}
.fige-map .ufl{fill:var(--ink3);font-family:var(--lbl);font-weight:600}
.scale .ramp{background:linear-gradient(90deg,hsl(187,52%,26%),hsl(163,58%,38%),hsl(136,72%,58%))}
#map-pan .conc.hi{stroke:var(--ink)}
.maplegend button.hi{background:color-mix(in srgb,var(--amber) 10%,transparent);border-color:var(--amber)}

/* ── prosa e glossário ──────────────────────────────────────────────────── */
.prosa,.lista li,.dl2 dd,.mut{color:var(--ink2)}
dl.gloss dt{color:var(--amber);font-family:var(--lbl);font-weight:600;font-size:12.5px}
dl.gloss dd{border-bottom-color:var(--edge)}
.lista li::before{background:var(--amber)}
.curva .linha{stroke:var(--amber)}
.curva .area{fill:color-mix(in srgb,var(--amber) 12%,transparent)}
.curvaleg .du:before{background:var(--amber)}
.curvaler .du{color:var(--amber)}
footer{border-top:1px solid var(--edge);color:var(--ink3)}
footer .marca-rodape{height:20px;width:auto;margin-bottom:12px;display:block}
html[data-tema=slate] footer .marca-rodape.escuro,html[data-tema=slate] .logo .marca.escuro{display:none}
/* V3-00a: o rodape tambem alterna. O design escondeu a marca escura no slate e nao
   pos a clara no rodape, entao com slate de PADRAO o rodape abria sem marca. Mesmas
   duas regras que o aside ja tem, espelhadas. Nenhum arquivo novo: reusa a marca clara. */
footer .marca-rodape.claro{display:none}
html[data-tema=slate] footer .marca-rodape.claro{display:block}

/* tokens herdados de regras antigas do atlas, agora ligados ao vocabulário EDP */
:root{--card:var(--slab); --linha:var(--edge); --mut:var(--ink3)}
html[data-tema=slate]{--card:var(--slab); --linha:var(--edge); --mut:var(--ink3)}

:root{--fora:#E7ECF1}
html[data-tema=slate]{--fora:#2B323D}


/* ══ V3-04o: BARRAS DE ROLAGEM PROPRIAS, EM TODO O ATLAS ══════════════════════
   Pedido por Leonardo em 14/08/2026: as barras usavam o padrao do sistema, que no
   Windows e cinza claro largo e briga com o slate.

   NAO e estilo novo, e generalizacao de um que o projeto ja tinha: a coluna de
   personas da prancha de Concessoes ja fazia `.prail::-webkit-scrollbar{width:6px}`
   com polegar em `--edge2`. Aqui a mesma linguagem passa a valer em toda area
   rolavel, e sai de TOKEN, entao acompanha os dois temas em vez de cravar cinza.

   `scrollbar-width` e `scrollbar-color` sao o caminho padrao e cobrem o Firefox; o
   bloco `::-webkit-scrollbar` cobre Chrome e Edge, que e onde este arquivo abre.
   Os dois convivem: cada navegador ignora o que nao entende. */
html{scrollbar-width:thin;scrollbar-color:var(--edge2) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--edge2);border-radius:5px;
  border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--ink3);background-clip:content-box}
*::-webkit-scrollbar-corner{background:transparent}

/* ── V3-SW-01: OS DOIS CONTROLES DA BARRA VIRAM SWITCH ────────────────────────────────
   Pedido de Leonardo em 25/08/2026: "que os botoes tema claro e ocultar margem fossem
   switches, mais delicados, assim como a gente ja usou em alguns outros lugares".

   O DESENHO NAO E NOVO, e isso e o ponto: e o mesmo `.sw` da prancha de Produtos,
   trilho de 36 por 19 com a bolinha deslizando e ambar quando ligado. Reusar em vez de
   inventar mantem a tela falando uma lingua so.

   O BOTAO "SAIR" CONTINUA BOTAO, e nao virou switch junto. Os tres usavam a mesma classe
   `.temabtn`, mas switch comunica ESTADO e sair e ACAO: um switch de "Sair" ficaria
   ligado no que, exatamente?

   O ROTULO E FIXO. Antes o texto mudava com o estado, "Ocultar margem" virava "Mostrar
   margem". Com o trilho a vista isso passa a ser a mesma informacao dita duas vezes, e
   o rotulo fixo deixa a pessoa procurar sempre a mesma palavra no mesmo lugar. */
.figesw{display:flex;align-items:center;gap:9px;margin:14px 14px 0;
  width:calc(100% - 28px);background:none;border:0;padding:0;cursor:pointer}
.figesw .swt{width:32px;height:17px;border-radius:9px;border:1px solid var(--edge2);
  background:var(--slab);position:relative;flex:none;transition:border-color .14s,background .14s}
.figesw .swt i{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:var(--ink3);transition:left .14s,background .14s;display:block}
.figesw.on .swt{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 22%,var(--slab))}
.figesw.on .swt i{left:17px;background:var(--amber)}
.figesw span{font-family:var(--lbl);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;color:var(--ink3);
  /* Line-height explicito: em caixa pequena o herdado do corpo infla a altura e o
     rotulo desalinha do trilho. Armadilha ja registrada no projeto. */
  line-height:1.2;text-align:left}
.figesw:hover span{color:var(--amber)}
.figesw:hover .swt{border-color:var(--amber)}