/* ============================================================
AKME.CSS — Design System Akme · folha universal
------------------------------------------------------------
Uma única folha para os 4 alvos. Os projetos referenciam este
arquivo e compõem as classes; a expressão de cada superfície é
escolhida por classe no :
hub portal de entrada dos protótipos
akme-site site institucional Akme
sn-site site institucional Smart Navigator
app-sn Smart Navigator Web (app operacional)
app-p2 Portal 2 (app corporativo)
Seções:
§1 Tokens (camada de marca — trocar identidade = trocar §1)
§2 Base e tipografia
§3 Layout e componentes núcleo (sites)
§4 Expressão Akme (site)
§5 Expressão Smart Navigator (site)
§6 App Smart Navigator Web (mapas)
§7 App corporativo (Portal 2)
§8 Sobreposição e estados (modal, menu, tooltip, toast…)
§9 Documentação (o sistema descrevendo a si mesmo)
§10 Hub (portal de entrada)
============================================================ */
/* §0 FONTES — carregadas AQUI para que as páginas continuem
referenciando apenas akme2026.css + akme2026.js.
Inter e JetBrains Mono eram declaradas mas nunca carregadas;
sem elas o navegador caía no fallback e sintetizava o negrito. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap");
/* ================= §1 TOKENS — camada de marca ================= */
:root{
color-scheme:dark;
/* Núcleo — azul profundo Akme/SN */
--ink-1000:#030b13;--ink-950:#061424;--ink-900:#0b2038;--ink-850:#102943;--ink-800:#12304f;
--blue-700:#174d7f;--blue-600:#1f67a5;--blue-500:#2d83c5;--blue-400:#38bdf8;--blue-300:#7dd3fc;
--ice-100:#eaf4ff;--ice-200:#cfdfed;--ice-400:#91a4b7;--ice-500:#6f8599;
/* Linhas e superfícies */
--line:rgba(145,164,183,.2);--line-strong:rgba(125,211,252,.38);
--surface-1:rgba(11,32,56,.88);--surface-2:rgba(16,41,67,.86);--surface-soft:rgba(56,189,248,.08);
/* Semântica operacional */
--success:#34d399;--warning:#fbbf24;--danger:#fb7185;--active:#e879f9;
/* Tipografia */
--font-sans:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
--font-mono:"JetBrains Mono","Cascadia Code",Consolas,monospace;
--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.375rem;
--text-2xl:clamp(1.6rem,3vw,2.35rem);--text-3xl:clamp(2.25rem,5vw,4.5rem);
/* Espaço, raio, sombra */
--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;
--space-6:2rem;--space-7:3rem;--space-8:4.5rem;--space-9:7rem;
--radius-sm:.3rem;--radius-md:.45rem;--radius-lg:.65rem;--radius-xl:.9rem;
--shadow-lg:0 24px 70px rgba(0,0,0,.3);--container:1180px;
/* Carta (basemap autoral estilo carta aeronáutica) */
--map-land:#d8c8a2;--map-veg:#adc39b;--map-urban:#c9b591;--map-water:#4e6178;
--map-road:rgba(96,84,64,.55);
--hill-shadow:#5e4a2e;--hill-light:#fffdf5;--hill-accent:#8a7147;
--map-label:#4a4436;--map-label-halo:rgba(255,250,235,.72);
/* Semântica aeronáutica */
--aero-tma:#2f6fb5;--aero-ctr:#0e8ac8;--aero-danger:#e08a2e;
--aero-airport:#15406e;--aero-airport-vfr:#b0489e;
--route-line:#ffffff;--route-casing:#12232f;
--chip-bg:#ffffff;--chip-ink:#14202b;
/* Labels/tags (apps corporativos) */
--tag-blue:#3b82f6;--tag-purple:#8b5cf6;--tag-teal:#14b8a6;
--tag-amber:#d97706;--tag-pink:#db2777;--tag-slate:#64748b;
}
/* ================= §2 BASE E TIPOGRAFIA ================= */
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ink-950);color-scheme:dark}body{margin:0;background:var(--ink-950);color:var(--ice-100);font:400 var(--text-base)/1.65 var(--font-sans);text-rendering:optimizeLegibility}img,svg{display:block;max-width:100%}button,input,textarea,select{font:inherit}a{color:inherit;text-decoration:none}p{margin:0 0 var(--space-4);color:var(--ice-200)}h1,h2,h3{margin:0 0 var(--space-4);line-height:1.08;letter-spacing:-.025em}h1{max-width:18ch;font-size:var(--text-3xl)}h2{max-width:22ch;font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}ul{padding-left:1.2rem}:focus-visible{outline:3px solid var(--blue-300);outline-offset:4px}::selection{background:var(--blue-400);color:var(--ink-950)}
/* ---- Escopo de convivência ----
Aplica a base do sistema dentro de um recorte, sem tocar em html/body do
app hospedeiro. Permite telas V3 dentro de aplicações que ainda carregam
a camada V2, Tailwind ou tema Radzen. Nada vaza para fora do recorte. */
.akme2026{background:var(--ink-950);color:var(--ice-100);font:400 var(--text-base)/1.65 var(--font-sans);-webkit-font-smoothing:antialiased;color-scheme:dark}
.akme2026 *,.akme2026 *::before,.akme2026 *::after{box-sizing:border-box}
.akme2026 h1,.akme2026 h2,.akme2026 h3{margin:0 0 var(--space-4);line-height:1.08;letter-spacing:-.025em;color:var(--ice-100)}
.akme2026 p{margin:0 0 var(--space-4);color:var(--ice-200)}
.akme2026 a{color:inherit;text-decoration:none}
.akme2026--pagina{min-height:100vh;padding:var(--space-6)}
/* Shell embutido: a pagina traz o proprio shell dentro de um app hospedeiro,
onde html/body nao tem classe de superficie. Ancora na viewport. */
.akme2026.p2{height:100vh;overflow:hidden}
/* Rolagem discreta — instrumento não tem barra de rolagem gritando. */
:is(html.app-p2,html.app-sn,html.akme-site,html.sn-site,html.hub) *,.akme2026 *{scrollbar-width:thin;scrollbar-color:var(--surface-2) transparent}
:is(html.app-p2,html.app-sn,html.akme-site,html.sn-site,html.hub) ::-webkit-scrollbar,.akme2026 ::-webkit-scrollbar{width:10px;height:10px}
:is(html.app-p2,html.app-sn,html.akme-site,html.sn-site,html.hub) ::-webkit-scrollbar-thumb,.akme2026 ::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background:var(--surface-2);background-clip:padding-box}
:is(html.app-p2,html.app-sn,html.akme-site,html.sn-site,html.hub) ::-webkit-scrollbar-track,.akme2026 ::-webkit-scrollbar-track{background:transparent}
/* ================= §3 LAYOUT E COMPONENTES NÚCLEO ================= */
.skip-link{position:fixed;z-index:999;top:var(--space-3);left:var(--space-3);transform:translateY(-160%);padding:.7rem 1rem;border-radius:var(--radius-sm);background:var(--ice-100);color:var(--ink-950);font-weight:700}.skip-link:focus{transform:translateY(0)}.container{width:min(var(--container),calc(100% - 2rem));margin-inline:auto}.section{padding-block:var(--space-9)}.section--compact{padding-block:var(--space-7)}.section-heading{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(260px,.75fr);gap:var(--space-7);align-items:end;margin-bottom:var(--space-7)}.lede{max-width:64ch;font-size:clamp(1.05rem,2vw,1.3rem);color:var(--ice-200)}.eyebrow{margin-bottom:var(--space-4);color:var(--blue-300);font-size:var(--text-xs);font-weight:600;letter-spacing:.13em;text-transform:uppercase}.mono{font-family:var(--font-mono)}.muted{color:var(--ice-400)}
/* ---- Grade de 12 colunas (mesmo modelo mental de Bootstrap/Tailwind) ----
12 é divisível por 2, 3, 4 e 6 → metades, terços, quartos e sextos exatos.
Uso:
…
…
Responsivo: col-md-* abaixo de 1100px · col-sm-* abaixo de 700px
(sem col-sm-*, tudo vira largura total no celular). */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-5)}
.row--tight{gap:var(--space-3)}.row--wide{gap:var(--space-7)}.row--flush{gap:0}
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
.offset-1{grid-column-start:2}.offset-2{grid-column-start:3}.offset-3{grid-column-start:4}
.offset-4{grid-column-start:5}.offset-6{grid-column-start:7}
/* Atalhos legados — todos múltiplos de 12: 2=col-6 · 3=col-4 · 4=col-3 */
/* Pilha — blocos empilhados na vertical com o respiro do sistema. O .card não
carrega margem DE PROPÓSITO: o espaço pertence ao layout, não à peça. Sem uma
pilha em volta, dois cartões irmãos encostam um no outro. */
.pilha{display:grid;gap:var(--space-5)}
.pilha--minima{gap:var(--space-1)}
.pilha--densa{gap:var(--space-3)}
.pilha--solta{gap:var(--space-6)}
/* Blocos de layout (.pilha, .row, .grid-*) não carregam margem — por dentro o
espaço é o gap. Só que, ao encostarem no bloco SEGUINTE, ninguém separava: o
.form-card tem margem embaixo, não em cima. Esta regra fecha essa junta, e
com o MESMO respiro que esses blocos usam internamente. */
:is(.pilha,.row,.grid-2,.grid-3,.grid-4)+:is(.card,.form-card,.tbl-wrap,.pilha,.row,.grid-2,.grid-3,.grid-4){margin-top:var(--space-5)}
.grid-2,.grid-3,.grid-4{display:grid;gap:var(--space-5)}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-1)}.card--raised{box-shadow:var(--shadow-lg)}
/* Card de navegacao — um destino, nao um enfeite: hover realca a borda. */
.card--link{display:block;color:inherit;transition:border-color .15s ease,background .15s ease}
.card--link:hover{border-color:var(--blue-400);background:var(--surface-2)}
.card--link[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.card--link>svg{width:22px;height:22px;margin-bottom:var(--space-3);fill:var(--blue-300)}
.card--link h3{display:flex;align-items:center;gap:.6rem;margin-bottom:var(--space-2);font-size:var(--text-lg)}
.card--link p{margin:0;color:var(--ice-400);font-size:var(--text-xs);line-height:1.6}.card__number{display:block;margin-bottom:var(--space-5);color:var(--blue-300);font:700 var(--text-sm)/1 var(--font-mono)}.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .7rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);color:var(--ice-200);font-size:var(--text-sm)}
.button{display:inline-flex;min-height:46px;align-items:center;justify-content:center;gap:.6rem;padding:.75rem 1.1rem;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--blue-400);color:var(--ink-950);font-weight:800;transition:.18s ease}.button:hover{transform:translateY(-2px);background:var(--blue-300)}.button--secondary{border-color:var(--line-strong);background:transparent;color:var(--ice-100)}.button--secondary:hover{background:var(--surface-soft)}.button-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}.button-row--dir{justify-content:flex-end}.text-link{color:var(--blue-300);font-weight:750}
a[aria-disabled="true"],button[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
a[aria-disabled="true"]:hover{transform:none;background:inherit}
.row-item[aria-disabled="true"]:hover{background:var(--surface-2)}
/* Moldura de screenshot (produto como imagem) */
.shot-frame{overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--ink-900);box-shadow:var(--shadow-lg)}
.shot-frame__bar{display:flex;gap:.4rem;padding:.55rem .8rem;border-bottom:1px solid var(--line);background:var(--ink-950)}
.shot-frame__bar i{width:.6rem;height:.6rem;border-radius:50%;background:var(--ice-500);opacity:.45}
.shot-frame img{display:block;width:100%}
/* Linhas de recurso alternadas (mídia + texto) */
.feature-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-7);align-items:center;padding-block:var(--space-6)}
.feature-split--flip .fs-text{order:2}
.feature-split .shot-frame img{height:340px;object-fit:cover}
.crop-left{object-position:left center}.crop-center{object-position:center}.crop-right{object-position:right center}
/* Banda fotográfica de largura total */
.photo-band{position:relative;display:grid;min-height:380px;align-items:end;overflow:hidden}
.photo-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,11,19,.15),rgba(3,11,19,.9))}
.photo-band .container{position:relative;z-index:1;padding-block:var(--space-7)}
.photo-band h2{max-width:26ch}
@media(max-width:900px){.feature-split{grid-template-columns:1fr}.feature-split--flip .fs-text{order:0}.feature-split .shot-frame img{height:240px}}
.brand-mark{display:grid;width:2.5rem;height:2.5rem;place-items:center;margin-bottom:var(--space-5);border:1px solid var(--line-strong);border-radius:.75rem;background:linear-gradient(145deg,var(--blue-600),var(--ink-900));font:800 .75rem/1 var(--font-mono);letter-spacing:.08em}.brand-mark--sn{border-radius:50%;background:radial-gradient(circle,var(--blue-500),var(--ink-900) 70%)}.site-header{position:sticky;z-index:50;top:0;border-bottom:1px solid var(--line);background:rgba(6,20,36,.88);backdrop-filter:blur(16px)}.site-header__inner{display:flex;min-height:74px;align-items:center;justify-content:space-between;gap:var(--space-4)}.site-brand{display:flex;align-items:center;gap:.75rem;font-weight:850;letter-spacing:-.015em}.site-brand .brand-mark{width:2rem;height:2rem;margin:0;border-radius:.6rem}.site-nav{display:flex;align-items:center;gap:var(--space-5)}.site-nav a{color:var(--ice-400);font-size:var(--text-sm);font-weight:650}.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ice-100)}.nav-toggle{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:var(--radius-sm);background:transparent;color:var(--ice-100)}
.hero{position:relative;overflow:hidden;padding-block:clamp(5rem,11vw,9rem)}.hero::before{position:absolute;z-index:-1;inset:-30% 35% 10% -20%;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.2),transparent 65%);content:""}.hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.8fr);gap:var(--space-8);align-items:center}.hero__meta{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-block:var(--space-6)}.metric{padding:var(--space-5);border-left:1px solid var(--line-strong)}.metric strong{display:block;color:var(--ice-100);font:700 clamp(1.5rem,3vw,2.5rem)/1 var(--font-mono)}.metric span{color:var(--ice-400);font-size:var(--text-sm)}
.site-footer{padding-block:var(--space-7);border-top:1px solid var(--line);background:var(--ink-1000)}.footer-grid{display:grid;grid-template-columns:1.2fr repeat(2,.7fr);gap:var(--space-7)}.footer-links{display:grid;gap:.5rem;color:var(--ice-400);font-size:var(--text-sm)}.footer-bottom{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--line);color:var(--ice-500);font-size:var(--text-sm)}.callout{padding:var(--space-7);border:1px solid var(--line-strong);border-radius:var(--radius-xl);background:linear-gradient(130deg,rgba(31,103,165,.24),rgba(11,32,56,.7))}.status-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--success);box-shadow:0 0 0 5px rgba(52,211,153,.1)}.legal{max-width:760px}.legal h2{margin-top:var(--space-7);font-size:var(--text-xl)}
@media(max-width:1100px){
.col-md-1{grid-column:span 1}.col-md-2{grid-column:span 2}.col-md-3{grid-column:span 3}
.col-md-4{grid-column:span 4}.col-md-5{grid-column:span 5}.col-md-6{grid-column:span 6}
.col-md-7{grid-column:span 7}.col-md-8{grid-column:span 8}.col-md-9{grid-column:span 9}
.col-md-10{grid-column:span 10}.col-md-11{grid-column:span 11}.col-md-12{grid-column:span 12}
}
@media(max-width:700px){
.row>[class*="col-"]{grid-column:span 12}
.col-sm-1{grid-column:span 1}.col-sm-2{grid-column:span 2}.col-sm-3{grid-column:span 3}
.col-sm-4{grid-column:span 4}.col-sm-6{grid-column:span 6}.col-sm-12{grid-column:span 12}
[class*="offset-"]{grid-column-start:auto}
}
@media(max-width:900px){.grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.hero__grid,.section-heading{grid-template-columns:1fr}.hero__grid{gap:var(--space-6)}.site-nav{position:fixed;inset:75px 1rem auto;display:none;padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--ink-900);box-shadow:var(--shadow-lg)}.site-nav[data-open="true"]{display:grid}.nav-toggle{display:grid;place-items:center}}@media(max-width:620px){:root{--space-9:5rem}.grid-2,.grid-3,.grid-4,.footer-grid{grid-template-columns:1fr}.metric{border-left:0;border-top:1px solid var(--line-strong)}.footer-bottom{flex-direction:column}.button-row .button{width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
/* ================= §4 EXPRESSÃO AKME (site institucional) ================= */
html.akme-site body{background:linear-gradient(180deg,var(--ink-950),#081a2d 44%,#07131f)}
.akme-word{font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.akme-word span{color:var(--blue-300)}
.akme-hero-panel{position:relative;min-height:420px;padding:var(--space-7);overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-xl);background:linear-gradient(145deg,rgba(18,48,79,.94),rgba(6,20,36,.96));box-shadow:var(--shadow-lg)}
.akme-hero-panel::before,.akme-hero-panel::after{position:absolute;border:1px solid rgba(125,211,252,.18);border-radius:50%;content:""}.akme-hero-panel::before{width:360px;height:360px;right:-110px;bottom:-130px}.akme-hero-panel::after{width:220px;height:220px;right:-40px;bottom:-60px}
.system-line{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);font:600 var(--text-xs)/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.system-line::before{width:42px;height:1px;background:var(--blue-400);content:""}
.operating-list{position:relative;z-index:1;display:grid;gap:var(--space-3);margin-top:var(--space-8)}.operating-list div{display:flex;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--line)}.operating-list span{color:var(--ice-400);font-size:var(--text-sm)}.operating-list strong{font-family:var(--font-mono);font-size:var(--text-sm)}
.proof-strip{border-block:1px solid var(--line);background:rgba(3,11,19,.5)}.proof-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.light-section{color:#0c2237;background:#edf5fb}.light-section p{color:#3d5368}.light-section .eyebrow{color:#176397}.light-section .card{border-color:rgba(23,77,127,.16);background:#fff}.light-section .card__number{color:#176397}
.product-card{position:relative;min-height:290px;padding-top:var(--space-8)}.product-card::before{position:absolute;top:var(--space-5);left:var(--space-6);width:42px;height:3px;background:var(--blue-400);content:""}.product-card--sn::before{background:var(--active)}
.process{counter-reset:step}.process .card{counter-increment:step}.process .card::before{display:block;margin-bottom:var(--space-5);color:var(--blue-300);font:700 var(--text-sm)/1 var(--font-mono);content:"0" counter(step)}
.contact-grid{display:grid;grid-template-columns:1fr .85fr;gap:var(--space-7)}.contact-list{display:grid;gap:var(--space-4)}.contact-list a{padding-bottom:var(--space-3);border-bottom:1px solid var(--line);color:var(--blue-300)}
@media(max-width:800px){.proof-grid,.contact-grid{grid-template-columns:1fr}.akme-hero-panel{min-height:340px}}
/* ================= §5 EXPRESSÃO SMART NAVIGATOR (site institucional) ================= */
html.sn-site body{background:var(--ink-1000)}.sn-word{font-weight:850;letter-spacing:-.02em}.sn-word span{color:var(--blue-300)}.sn-site .site-header{background:rgba(3,11,19,.9)}
.sn-hero{min-height:calc(100vh - 74px);display:grid;align-items:center;background:radial-gradient(circle at 75% 35%,rgba(45,131,197,.22),transparent 28%),linear-gradient(180deg,#030b13,#061424)}
.radar{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--line-strong);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 18%,rgba(125,211,252,.11) 18.5% 19%),linear-gradient(rgba(125,211,252,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.1) 1px,transparent 1px),radial-gradient(circle,#12304f,#061424 68%);background-size:auto,25% 25%,25% 25%,auto;box-shadow:inset 0 0 80px rgba(0,0,0,.5),0 0 80px rgba(56,189,248,.09)}
.radar::after{position:absolute;inset:50% 50% 0 0;background:conic-gradient(from 0deg,rgba(56,189,248,.55),transparent 35deg);transform-origin:100% 0;content:"";animation:sweep 7s linear infinite}.radar-route{position:absolute;z-index:2;inset:18%;border-top:3px solid var(--active);border-right:3px solid var(--active);transform:rotate(-18deg) skew(15deg);filter:drop-shadow(0 0 8px rgba(232,121,249,.5))}.plane-dot{position:absolute;z-index:3;top:42%;left:48%;width:14px;height:14px;border:3px solid var(--ice-100);border-radius:50%;box-shadow:0 0 0 6px rgba(56,189,248,.16)}
.cockpit-strip{border-block:1px solid var(--line);background:#050f1b}.cockpit-grid{display:grid;grid-template-columns:repeat(6,1fr)}.datum{padding:var(--space-5);border-right:1px solid var(--line)}.datum:last-child{border:0}.datum span{display:block;color:var(--ice-500);font:700 .65rem/1 var(--font-mono);letter-spacing:.13em}.datum strong{display:block;margin-top:.6rem;color:var(--blue-300);font:700 clamp(1rem,2vw,1.35rem)/1 var(--font-mono)}
.journey-card{position:relative;overflow:hidden}.journey-card::after{position:absolute;right:-30px;bottom:-45px;color:rgba(125,211,252,.08);font:900 8rem/1 var(--font-mono);content:attr(data-step)}.journey-card strong{color:var(--blue-300)}
.feature{min-height:260px}.feature .instrument-label{display:inline-block;margin-bottom:var(--space-5);color:var(--blue-300);font:700 var(--text-xs)/1 var(--font-mono);letter-spacing:.15em}.feature--active{border-color:rgba(232,121,249,.45);background:linear-gradient(145deg,rgba(232,121,249,.08),var(--surface-1))}.feature--active .instrument-label{color:var(--active)}
.surface-diagram{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--line)}.surface-diagram article{min-height:290px;padding:var(--space-6);background:var(--ink-900)}.surface-diagram article:nth-child(2){background:var(--ink-850)}.surface-diagram .mono{color:var(--blue-300);font-size:var(--text-xs)}
.map-teaser{position:relative;min-height:500px;overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--radius-xl);background-color:#071725;background-image:linear-gradient(rgba(56,189,248,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.07) 1px,transparent 1px);background-size:52px 52px}.map-teaser::before{position:absolute;inset:20% 8% 16% 14%;border-top:4px solid var(--active);border-radius:50%;transform:rotate(-12deg);filter:drop-shadow(0 0 9px rgba(232,121,249,.55));content:""}.map-teaser__panel{position:absolute;top:var(--space-5);left:var(--space-5);width:min(380px,calc(100% - 3rem));padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:rgba(3,11,19,.88);backdrop-filter:blur(14px)}
.faq details{padding:var(--space-5) 0;border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;font-weight:750}.faq details p{margin-top:var(--space-3)}
.map-teaser--shot::before{display:none}
.map-teaser__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.map-teaser__panel{z-index:1}
.sn-callout{background:radial-gradient(circle at 85% 0,rgba(232,121,249,.16),transparent 35%),linear-gradient(130deg,rgba(31,103,165,.24),rgba(11,32,56,.7))}
@keyframes sweep{to{transform:rotate(360deg)}}
@media(max-width:900px){.cockpit-grid{grid-template-columns:repeat(3,1fr)}.surface-diagram{grid-template-columns:1fr}.surface-diagram article{min-height:0}.radar{max-width:560px;margin-inline:auto}}@media(max-width:620px){.cockpit-grid{grid-template-columns:repeat(2,1fr)}.datum:nth-child(even){border-right:0}.radar{margin-top:var(--space-5)}}@media(prefers-reduced-motion:reduce){.radar::after{animation:none}}
/* ================= §6 APP SMART NAVIGATOR WEB (mapas) ================= */
html.app-sn,html.app-sn body{height:100%;overflow:hidden}
.app{display:grid;height:100%;grid-template-columns:248px 1fr;background:var(--ink-1000)}
.rail{z-index:20;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);border-right:1px solid var(--line);background:var(--ink-950)}
.rail-brand{display:flex;align-items:center;gap:.6rem;padding:.35rem .4rem;font-weight:850;letter-spacing:-.015em}
.rail-brand .brand-mark{width:2rem;height:2rem;margin:0;border-radius:50%;background:radial-gradient(circle,var(--blue-500),var(--ink-900) 70%);font-size:.62rem}
.rail-brand small{display:block;color:var(--blue-300);font:800 .6rem/1 var(--font-mono);letter-spacing:.22em}
.rail-nav{display:grid;gap:.25rem}
.rail-item{display:flex;align-items:center;gap:.75rem;min-height:44px;padding:.55rem .7rem;border:0;border-radius:var(--radius-md);background:transparent;color:var(--ice-400);font:650 var(--text-sm)/1 var(--font-sans);text-align:left;cursor:pointer}
.rail-item svg{flex:none;width:20px;height:20px;fill:currentColor}
.rail-item .lock{margin-left:auto;width:14px;height:14px;opacity:.7}
.rail-item:hover{background:var(--surface-soft);color:var(--ice-100)}
.rail-item[aria-current="page"]{background:var(--surface-2);color:var(--ice-100)}
.rail-foot{display:grid;gap:.5rem;margin-top:auto}
.rail-foot .rail-link{padding:.4rem .7rem;color:var(--ice-500);font-size:var(--text-sm)}
.rail-foot .rail-link:hover{color:var(--ice-200)}
.rail-foot .button{min-height:42px;width:100%}
.rail-copy{padding:.4rem .7rem;color:var(--ice-500);font-size:.68rem}
.stage{position:relative;min-height:0}
#map{position:absolute;inset:0;background:var(--ink-900)}
.veil{position:absolute;z-index:2;inset:0;display:grid;place-items:center;background:var(--ink-950);transition:opacity .5s}
.veil[data-off]{opacity:0;pointer-events:none}
.veil p{color:var(--ice-400);font:700 var(--text-xs)/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase}
.search{position:absolute;z-index:5;top:1rem;right:1rem;display:flex;align-items:center;gap:.5rem;width:min(360px,calc(100% - 2rem));padding:.15rem .3rem .15rem .8rem;border:1px solid var(--line);border-radius:999px;background:rgba(6,20,36,.92);backdrop-filter:blur(12px)}
.search svg{flex:none;width:16px;height:16px;fill:var(--ice-500)}
.search input{flex:1;min-width:0;padding:.55rem .2rem;border:0;background:transparent;color:var(--ice-100);font-size:var(--text-sm)}
.search input:focus{outline:none}
.maplibregl-ctrl-top-right{top:64px}
.fp{position:absolute;z-index:5;top:1rem;left:1rem;width:min(400px,calc(100% - 2rem));max-height:calc(100% - 2rem);overflow:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:rgba(4,14,25,.93);box-shadow:var(--shadow-lg);backdrop-filter:blur(14px)}
.fp-head{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.fp-head h1{margin:0;font-size:var(--text-base);letter-spacing:0}
.fp-head button{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ice-400);cursor:pointer}
.fp-head button:hover{background:var(--surface-soft);color:var(--ice-100)}
.fp-head svg{width:16px;height:16px;fill:currentColor}
.fp-body{padding:1rem;display:grid;gap:.8rem}
.fp[data-collapsed] .fp-body{display:none}
.fp-perf{display:grid;grid-template-columns:1.2fr 1fr .8fr .8fr;gap:.5rem}
.field{display:flex;align-items:center;gap:.35rem;min-height:42px;padding:0 .6rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(18,48,79,.35)}
.field input,.field select{width:100%;min-width:0;padding:.5rem 0;border:0;background:transparent;color:var(--ice-100);font:700 var(--text-sm)/1 var(--font-mono)}
.field input:focus,.field select:focus{outline:none}
.field select{cursor:pointer;font-family:var(--font-sans)}
.field select option{background:var(--ink-900)}
.field .unit{color:var(--ice-500);font:700 .58rem/1 var(--font-mono);letter-spacing:.08em}
.fp-route{position:relative}
.fp-route textarea{width:100%;min-height:74px;padding:.7rem 2.6rem .7rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(18,48,79,.35);color:var(--ice-100);font:700 var(--text-sm)/1.6 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;resize:vertical}
.fp-route textarea:focus{outline:2px solid var(--blue-300);outline-offset:0}
.fp-route-actions{position:absolute;top:.45rem;right:.45rem;display:grid;gap:.3rem}
.fp-route-actions button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ice-400);cursor:pointer}
.fp-route-actions button:hover{background:var(--surface-soft);color:var(--ice-100)}
.fp-route-actions svg{width:15px;height:15px;fill:currentColor}
.fp-time{display:grid;grid-template-columns:1.15fr .9fr auto;gap:.5rem}
.seg{display:flex;padding:.2rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(18,48,79,.35)}
.seg button{min-width:46px;padding:.35rem .5rem;border:0;border-radius:.28rem;background:transparent;color:var(--ice-400);font:800 .7rem/1 var(--font-mono);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--blue-400);color:var(--ink-950)}
.fp-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;align-items:end}
.fp-summary div span{display:block;color:var(--ice-500);font:700 .58rem/1.6 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.fp-summary div strong{color:var(--ice-100);font:700 .95rem/1.1 var(--font-mono);white-space:nowrap}
.fp-summary .button{grid-column:1/-1;min-height:44px;border-radius:var(--radius-sm)}
.fp-status{margin:0;color:var(--warning);font-size:var(--text-xs)}
.fp-status[hidden]{display:none}
.chips{position:absolute;z-index:5;bottom:5.4rem;left:50%;display:flex;gap:.45rem;transform:translateX(-50%)}
.chips button{display:flex;align-items:center;gap:.45rem;min-height:38px;padding:.45rem .85rem;border:1px solid var(--line);border-radius:999px;background:rgba(6,20,36,.92);color:var(--ice-400);font:700 var(--text-xs)/1 var(--font-sans);cursor:pointer;backdrop-filter:blur(10px)}
.chips button[aria-pressed="true"]{border-color:var(--line-strong);color:var(--ice-100)}
.chips button[aria-pressed="true"]::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--success)}
.timeline{position:absolute;z-index:5;bottom:1rem;left:50%;display:flex;align-items:center;gap:.8rem;width:min(680px,calc(100% - 2rem));padding:.55rem .9rem;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(6,20,36,.92);transform:translateX(-50%);backdrop-filter:blur(12px)}
.timeline button{display:grid;flex:none;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--blue-400);color:var(--ink-950);cursor:pointer}
.timeline button svg{width:16px;height:16px;fill:currentColor}
.timeline .mono{flex:none;color:var(--ice-200);font-size:var(--text-xs)}
.timeline input[type="range"]{flex:1;min-width:0;accent-color:var(--blue-400)}
.leg-chip{padding:.18rem .5rem;border:1px solid var(--route-casing);border-radius:.3rem;background:var(--chip-bg);color:var(--chip-ink);font:700 .66rem/1.2 var(--font-mono);white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.acft{width:26px;height:26px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.app-sn .maplibregl-ctrl-group{border:1px solid var(--line)!important;background:rgba(6,20,36,.92)!important}
.app-sn .maplibregl-ctrl button span{filter:invert(.9)}
.app-sn .maplibregl-ctrl-scale{border-color:rgba(255,255,255,.5)!important;background:rgba(6,20,36,.6)!important;color:var(--ice-200)!important;font-family:var(--font-mono)!important}
@media(max-width:900px){
.app{grid-template-columns:1fr}
.rail{position:fixed;inset:auto 0 0 0;z-index:30;flex-direction:row;align-items:center;padding:.5rem .8rem;border-top:1px solid var(--line);border-right:0}
.rail-nav{display:flex;gap:.25rem}
.rail-item span{display:none}
.rail-foot,.rail-brand small{display:none}
.fp{width:min(400px,calc(100% - 2rem));max-height:52%}
.chips{bottom:9.2rem}.timeline{bottom:4.8rem;width:min(680px,calc(100% - 2rem))}
}
/* ================= §7 APP CORPORATIVO (Portal 2) ================= */
html.app-p2,html.app-p2 body{height:100%}
html.app-p2 body{overflow:hidden;font-size:var(--text-sm)}
.p2{display:grid;height:100%;grid-template-rows:60px 1fr;grid-template-columns:272px 1fr;grid-template-areas:"top top" "side main";background:var(--ink-1000)}
.p2-top{grid-area:top;display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-4);border-bottom:1px solid var(--line);background:var(--ink-950)}
.p2-burger{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ice-200);cursor:pointer}
.p2-burger svg{width:18px;height:18px;fill:currentColor}
.p2-logo{display:flex;align-items:center;gap:.6rem;font:850 1.05rem/1 var(--font-sans);letter-spacing:.02em}
.p2-logo img{display:block;height:30px;width:auto}
.p2-mark{display:grid;grid-template-columns:repeat(2,9px);gap:2px;transform:rotate(45deg)}
.p2-mark i{width:9px;height:9px;border-radius:2px;background:var(--blue-500)}
.p2-mark i:nth-child(1){background:var(--blue-300)}
.p2-mark i:nth-child(4){background:var(--blue-700)}
.p2-top .ctx{color:var(--ice-400);font-weight:650}
.p2-user{display:flex;align-items:center;gap:.6rem;margin-left:auto;color:var(--ice-200);font-weight:650}
.p2-user a{display:inline-flex;align-items:center;gap:.6rem;color:inherit}
.p2-user a:hover{color:var(--ice-100)}
.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue-600);color:#fff;font:800 .62rem/1 var(--font-mono)}
.p2-side{grid-area:side;align-self:start;max-height:calc(100% - 2.4rem);overflow-y:auto;margin:1.2rem 0 1.2rem 1.2rem;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--ink-950)}
.p2[data-nav-closed] .p2-side{display:none}
.p2[data-nav-closed]{grid-template-columns:0 1fr}
.side-title{margin:0 0 var(--space-4);padding:0 .5rem;font-size:var(--text-lg)}
.side-nav{display:grid;gap:.15rem}
.side-nav a,.side-group-head{display:flex;align-items:center;gap:.65rem;min-height:38px;padding:.45rem .6rem;border-radius:var(--radius-sm);color:var(--ice-400);font-weight:600}
.side-nav a svg,.side-group-head svg{flex:none;width:17px;height:17px;fill:currentColor;opacity:.85}
/* Ícones por fonte (Material Icons) — menus dinâmicos legados; a fonte vem do Head do hospedeiro. */
.side-nav .material-icons{flex:none;font-size:17px;opacity:.85}
.side-nav a:hover{background:var(--surface-soft);color:var(--ice-100)}
.side-nav a[aria-current="page"]{background:var(--surface-2);color:var(--ice-100)}
.side-group-head{width:100%;border:0;background:transparent;font:600 var(--text-sm)/1 var(--font-sans);cursor:pointer}
.side-group-head .chev{margin-left:auto;transition:transform .15s}
.side-group[data-open] .chev{transform:rotate(180deg)}
.side-group ul{display:none;margin:.15rem 0 .3rem;padding:0 0 .3rem;border-bottom:1px solid var(--line);list-style:none}
.side-group[data-open] ul{display:grid;gap:.1rem}
.side-group ul a{padding-left:2.2rem;min-height:34px;font-size:.8rem}
.p2-main{grid-area:main;min-width:0;overflow-y:auto;padding:var(--space-5) var(--space-6) var(--space-8)}
.crumbs{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-bottom:var(--space-5);color:var(--ice-500);font-size:var(--text-xs)}
.crumbs a{color:var(--blue-300)}
.crumbs .sep{opacity:.5}
.crumbs strong{color:var(--ice-100)}
.p2-search{display:flex;align-items:center;gap:.6rem;width:min(720px,100%);margin:0 auto var(--space-6);padding:.2rem .4rem .2rem 1rem;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-1)}
.p2-search svg{flex:none;width:17px;height:17px;fill:var(--ice-500)}
.p2-search input{flex:1;min-width:0;padding:.7rem .2rem;border:0;background:transparent;color:var(--ice-100)}
.p2-search input:focus{outline:none}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.col-card{display:flex;flex-direction:column;min-height:0;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-1)}
.col-head{display:flex;align-items:baseline;gap:.55rem;margin-bottom:var(--space-4);padding:0 .3rem}
.col-head svg{width:18px;height:18px;align-self:center;fill:var(--blue-300)}
.col-head h2{margin:0;font-size:var(--text-lg);max-width:none}
.col-head .count{color:var(--ice-500);font:700 var(--text-xs)/1 var(--font-mono)}
.col-list{display:grid;gap:.4rem}
.row-item{display:flex;gap:.8rem;align-items:center;justify-content:space-between;padding:.65rem .8rem;border-radius:var(--radius-sm);background:var(--surface-2)}
.row-item:hover{background:var(--ink-800)}
.row-item .t{color:var(--ice-100);font-weight:650}
.row-item small{color:var(--ice-500)}
.badge{flex:none;padding:.28rem .55rem;border-radius:.35rem;font:700 .66rem/1.2 var(--font-mono);white-space:nowrap}
.badge--muted{background:rgba(111,133,153,.16);color:var(--ice-400)}
.badge--ok{background:rgba(52,211,153,.14);color:var(--success)}
.badge--warn{background:rgba(251,191,36,.14);color:var(--warning)}
.badge--err{background:rgba(251,113,133,.16);color:var(--danger)}
.badge--info{background:rgba(56,189,248,.14);color:var(--blue-300)}
.badge--solid-err{background:#b42d3f;color:#fff;font-family:var(--font-sans);font-size:.72rem;font-weight:800;letter-spacing:.04em}
.form-card{margin-bottom:var(--space-6);padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-1)}
.form-card>header{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5)}
.form-card>header h2{margin:0;font-size:var(--text-xl);letter-spacing:.02em;text-transform:uppercase}
/* Linha de formulário = row de 12 colunas com respiro inferior */
.f-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-4);margin-bottom:var(--space-4)}
/* min-width:0 é obrigatório: itens de grid nascem com min-width:auto e
controles de formulário têm largura intrínseca (size padrão ~20 chars),
o que os faz transbordar a coluna em vez de encolher. */
.f-field{display:grid;gap:.35rem;min-width:0}
.f-field>span{color:var(--ice-400);font:600 var(--text-xs)/1 var(--font-sans)}
.f-field input,.f-field textarea,.f-field select{width:100%;min-width:0;padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(18,48,79,.3);color:var(--ice-100);font:500 var(--text-xs)/1.6 var(--font-sans)}
.f-field textarea{resize:vertical;min-height:96px}
.f-field :is(input,textarea,select):focus{outline:2px solid var(--blue-300);outline-offset:0}
.form-card .button{min-height:42px;border-radius:var(--radius-sm)}
/* ---- Controles de escolha: caixa, opção e chave ---- */
.check{display:inline-flex;align-items:center;gap:.55rem;min-height:32px;color:var(--ice-200);font-size:var(--text-xs);cursor:pointer;user-select:none}
.check input{flex:none;display:grid;place-content:center;width:16px;height:16px;margin:0;padding:0;appearance:none;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:rgba(18,48,79,.4);cursor:pointer;transition:.15s ease}
.check input[type="radio"]{border-radius:50%}
.check input:hover{border-color:var(--blue-300)}
.check input:checked{border-color:var(--blue-400);background:var(--blue-400)}
.check input[type="checkbox"]:checked::after{width:10px;height:10px;background:var(--ink-950);clip-path:polygon(14% 47%,0 60%,40% 100%,100% 22%,86% 10%,38% 72%);content:""}
.check input[type="radio"]:checked::after{width:6px;height:6px;border-radius:50%;background:var(--ink-950);content:""}
.check input:disabled{opacity:.45;cursor:not-allowed}
.check:has(input:disabled){opacity:.6;cursor:not-allowed}
.check-group{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.check-group--empilhado{flex-direction:column;gap:.2rem}
.switch{display:inline-flex;align-items:center;gap:.6rem;min-height:32px;color:var(--ice-200);font-size:var(--text-xs);cursor:pointer;user-select:none}
.switch input{position:relative;flex:none;width:38px;height:20px;margin:0;appearance:none;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);cursor:pointer;transition:.18s ease}
.switch input::after{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--ice-400);transition:.18s ease;content:""}
.switch input:checked{border-color:var(--blue-400);background:var(--blue-400)}
.switch input:checked::after{left:20px;background:var(--ink-950)}
.switch input:disabled{opacity:.45;cursor:not-allowed}
.f-field select{appearance:none;padding-right:1.8rem;background-image:linear-gradient(45deg,transparent 50%,var(--ice-400) 50%),linear-gradient(135deg,var(--ice-400) 50%,transparent 50%);background-position:calc(100% - 15px) center,calc(100% - 10px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
/* O popup do select é desenhado pelo navegador: color-scheme:dark (na base e
no escopo) o põe no tema escuro; as options reforçam cor e fundo. */
.f-field select option{background:var(--ink-900);color:var(--ice-100)}
.page-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4)}
.page-head h1{margin:0;font-size:var(--text-2xl);max-width:none}
.page-head .meta{display:flex;flex-wrap:wrap;gap:var(--space-4);width:100%;color:var(--ice-400);font-size:var(--text-xs)}
.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;margin-left:auto}
.capacity{margin:var(--space-4) 0}
.capacity .cap-line{display:flex;justify-content:space-between;margin-bottom:.45rem;font-weight:700}
.capacity .cap-line b{color:var(--danger);font-family:var(--font-mono)}
.capacity .cap-line small{color:var(--ice-500)}
/* Nota sob a barra: o dado de apoio ("Disponivel: 10.7 GB", "Livre: 40.6 GB"). */
.cap-nota{display:block;margin-top:.35rem;color:var(--ice-500);font-size:var(--text-xs)}
.cap-bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.cap-bar i{display:block;height:100%;border-radius:999px;background:var(--danger)}
/* Estados do medidor — mesmo vocabulário do badge e do toast: ok · warn · err.
Os modificadores vêm DEPOIS da base de propósito: têm a mesma especificidade,
então quem vence é quem vem por último. (Antes de 24/07 o --ok estava escrito
acima da base e não pintava nada.) */
.capacity--ok .cap-line b{color:var(--success)}
.cap-bar--ok i{background:var(--success)}
.capacity--warn .cap-line b{color:var(--warning)}
.cap-bar--warn i{background:var(--warning)}
.capacity--err .cap-line b{color:var(--danger)}
.cap-bar--err i{background:var(--danger)}
.alert{display:flex;gap:.8rem;margin:var(--space-4) 0;padding:var(--space-4) var(--space-5);border:1px solid rgba(251,113,133,.35);border-radius:var(--radius-md);background:rgba(251,113,133,.07)}
.alert svg{flex:none;width:18px;height:18px;margin-top:.1rem;fill:var(--danger)}
.alert b{display:block;color:var(--danger)}
.alert p{margin:0;color:var(--ice-200)}
.alert--ok{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.08)}
.alert--ok svg,.alert--ok b{fill:var(--success);color:var(--success)}
/* --err apenas nomeia o padrão: existe para a marcação poder declarar o tom em
vez de depender da ausência de modificador (o mesmo que .cap-bar--err faz). */
.alert--err{border-color:rgba(251,113,133,.35);background:rgba(251,113,133,.07)}
.alert--err svg,.alert--err b{fill:var(--danger);color:var(--danger)}
.alert--warn{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.08)}
.alert--warn svg,.alert--warn b{fill:var(--warning);color:var(--warning)}
.alert--info{border-color:rgba(56,189,248,.35);background:rgba(56,189,248,.07)}
.alert--info svg,.alert--info b{fill:var(--blue-400);color:var(--blue-300)}
.cycle{margin:var(--space-5) 0;padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-1)}
.cycle>header{display:flex;justify-content:space-between;margin-bottom:var(--space-4)}
.cycle>header h2{margin:0;font-size:var(--text-base);letter-spacing:.06em;text-transform:uppercase}
.cycle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.cy-card{display:grid;justify-items:center;gap:.4rem;padding:var(--space-5) var(--space-4);border:1px dashed var(--line);border-radius:var(--radius-md);text-align:center}
.cy-card svg{width:22px;height:22px;fill:var(--ice-400)}
.cy-card b{color:var(--ice-100)}
.cy-card small{color:var(--ice-500);font-size:.7rem;line-height:1.45}
.cy-card--warn{border-color:rgba(251,191,36,.4)}
.cy-card--warn small{color:var(--warning)}
.cy-card--active{border-style:solid;border-color:var(--line-strong);background:var(--surface-soft)}
.cy-card--off{opacity:.55}
/* overflow-x + flex:none nos itens: sem isso, a partir de ~6 abas o conteúdo
era cortado sem chance de alcançá-lo em tela estreita. */
.tabs{display:flex;gap:.2rem;margin:var(--space-5) 0 var(--space-4);padding:.25rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-1);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:thin}
/* Aceita e