/* ForTraffic · Interiorismo Estratégico [INES] — hub de ciclos */
*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#F4F4F7;--surface:#FFFFFF;--surface-2:#F8F8FB;--sidebar:#FBFBFD;
  --border:#EAEAEF;--border-2:#DEDEE6;
  --text:#17181D;--text-2:#63646E;--text-3:#9A9AA6;
  --accent:#5B54D6;--accent-2:#7A73F0;--accent-soft:#ECEBFB;--accent-ink:#4A43BE;
  --amber:#B26800;--amber-soft:#FDF4E5;--bad:#B4342A;--bad-soft:#FCECEA;
  --good:#1B6F47;--good-soft:#E9F5EF;--muted-bar:#CBCCD6;
  --disp:'Inter Tight',system-ui,-apple-system,'Segoe UI Variable','Segoe UI',Roboto,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI Variable','Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(23,24,40,.04),0 2px 6px rgba(23,24,40,.05);
}
@media(prefers-color-scheme:dark){:root{
  --bg:#0C0C0F;--surface:#151519;--surface-2:#1B1B21;--sidebar:#111116;
  --border:#26262E;--border-2:#323240;
  --text:#EDEDF2;--text-2:#A2A2AE;--text-3:#70707E;
  --accent:#8B85F2;--accent-2:#A9A4F7;--accent-soft:#1E1B36;--accent-ink:#B8B2FA;
  --amber:#E0A24A;--amber-soft:#2A2013;--bad:#F0827A;--bad-soft:#2C1614;
  --good:#63C494;--good-soft:#12251C;--muted-bar:#3A3A46;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.35);
}}
:root[data-theme=dark]{
  --bg:#0C0C0F;--surface:#151519;--surface-2:#1B1B21;--sidebar:#111116;
  --border:#26262E;--border-2:#323240;
  --text:#EDEDF2;--text-2:#A2A2AE;--text-3:#70707E;
  --accent:#8B85F2;--accent-2:#A9A4F7;--accent-soft:#1E1B36;--accent-ink:#B8B2FA;
  --amber:#E0A24A;--amber-soft:#2A2013;--bad:#F0827A;--bad-soft:#2C1614;
  --good:#63C494;--good-soft:#12251C;--muted-bar:#3A3A46;
}
:root[data-theme=light]{
  --bg:#F4F4F7;--surface:#FFFFFF;--surface-2:#F8F8FB;--sidebar:#FBFBFD;
  --border:#EAEAEF;--border-2:#DEDEE6;
  --text:#17181D;--text-2:#63646E;--text-3:#9A9AA6;
  --accent:#5B54D6;--accent-2:#7A73F0;--accent-soft:#ECEBFB;--accent-ink:#4A43BE;
  --amber:#B26800;--amber-soft:#FDF4E5;--bad:#B4342A;--bad-soft:#FCECEA;
  --good:#1B6F47;--good-soft:#E9F5EF;--muted-bar:#CBCCD6;
}

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ================= LAYOUT COM MENU LATERAL ================= */
.app{display:grid;grid-template-columns:246px minmax(0,1fr);min-height:100vh;transition:grid-template-columns .18s ease}
.app.recolhido{grid-template-columns:62px minmax(0,1fr)}
.side{background:var(--sidebar);border-right:1px solid var(--border);padding:14px 12px 16px;position:sticky;top:0;height:100vh;
  overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:16px}
.main{min-width:0;padding:clamp(26px,3.4vw,44px) clamp(18px,3.4vw,46px) 96px;max-width:1140px}

/* topo: marca + botão recolher */
.side-top{display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);min-width:0;flex:1}
.brand .dot{width:34px;height:24px;border-radius:7px;background:var(--accent);flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:9.5px;color:#fff;letter-spacing:.03em}
.brand .bt{font-family:var(--disp);font-weight:660;font-size:14px;letter-spacing:-.015em;line-height:1.15;white-space:nowrap}
.brand .bs{font-size:10.5px;color:var(--text-3);line-height:1.3;white-space:nowrap}
.btn-ic{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--text-3);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0}
.btn-ic:hover{color:var(--text);border-color:var(--border-2);background:var(--surface-2)}
.btn-ic svg{width:14px;height:14px}
.app.recolhido .btn-ic svg{transform:scaleX(-1)}

.side nav{display:flex;flex-direction:column;gap:14px}
.side .grupo{display:flex;flex-direction:column;gap:1px}
.side .gt{font-family:var(--body);font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding:0 8px 6px;white-space:nowrap}
.side nav a{display:flex;align-items:center;gap:10px;font-size:13.2px;color:var(--text-2);text-decoration:none;
  padding:7px 8px;border-radius:7px;line-height:1.3;white-space:nowrap}
.side nav a:hover{background:var(--surface-2);color:var(--text)}
.side nav a.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:580}
.side nav a .ic{width:17px;height:17px;flex:none;color:var(--text-3);display:flex;align-items:center;justify-content:center}
.side nav a .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.side nav a:hover .ic,.side nav a.on .ic{color:var(--accent)}
.side nav a.fut .ic{color:var(--amber)}
.side nav a .rot{overflow:hidden;text-overflow:ellipsis}
.side nav a .sufixo{margin-left:auto;font-family:var(--body);font-size:10px;color:var(--text-3);letter-spacing:.04em}

/* rodapé: voltar */
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--border);padding-top:12px}
.voltar{display:flex;align-items:center;gap:10px;font-size:12.8px;color:var(--text-2);text-decoration:none;
  padding:7px 8px;border-radius:7px;border:1px solid var(--border);background:var(--surface);white-space:nowrap}
.voltar:hover{color:var(--text);border-color:var(--accent-2);background:var(--surface-2)}
.voltar .ic{width:17px;height:17px;flex:none;display:flex;align-items:center;justify-content:center}
.voltar .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side-nota{font-size:10px;color:var(--text-3);line-height:1.55;padding:0 8px}

/* estado recolhido */
.app.recolhido .brand .txt,
.app.recolhido .side .gt,
.app.recolhido .side nav a .rot,
.app.recolhido .side nav a .sufixo,
.app.recolhido .voltar span:not(.ic),
.app.recolhido .side-nota{display:none}
.app.recolhido .side{padding:14px 8px 16px;align-items:center}
.app.recolhido .side-top{justify-content:center}
.app.recolhido .brand{flex:none}
.app.recolhido .side nav{align-self:stretch}
.app.recolhido .side nav a,.app.recolhido .voltar{justify-content:center;padding:8px 0}
.app.recolhido .side .grupo{gap:2px}
.app.recolhido .side .grupo+.grupo{border-top:1px solid var(--border);padding-top:10px}
.app.recolhido .side-foot{align-self:stretch}

@media(max-width:860px){
  .app,.app.recolhido{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--border);padding:14px 16px 16px}
  .side nav{flex-direction:row;flex-wrap:wrap;gap:12px}
  .side .grupo{flex-direction:row;flex-wrap:wrap;gap:2px}
  .side .gt{padding:6px 4px 6px 0;align-self:center}
  .side-nota{display:none}
  .btn-ic{display:none}
  .side-foot{margin-top:0;border-top:none;padding-top:0;flex-direction:row}
}

/* ================= TIPOGRAFIA ================= */
.kicker{font-family:var(--body);font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
h1{font-family:var(--disp);font-size:clamp(25px,3.6vw,36px);font-weight:660;letter-spacing:-.028em;line-height:1.08;margin-bottom:9px;text-wrap:balance}
.sub{color:var(--text-2);max-width:76ch;font-size:15px}
.phead{border-bottom:1px solid var(--border-2);padding-bottom:20px;margin-bottom:24px}
h2{font-family:var(--disp);font-size:clamp(17px,2.2vw,21px);font-weight:640;letter-spacing:-.02em;margin:40px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border-2)}
h3{font-family:var(--disp);font-size:15.5px;font-weight:640;margin:22px 0 8px;letter-spacing:-.015em}
h4{font-size:14.2px;font-weight:640;line-height:1.4}
p{max-width:80ch;margin-bottom:9px}
.lead{color:var(--text-2);font-size:14.4px}
ul{margin:7px 0 7px 20px}
li{margin-bottom:4px;color:var(--text-2);font-size:14px}
li b,p b,td b{color:var(--text)}
code{font-family:var(--mono);font-size:12px;background:var(--surface-2);border:1px solid var(--border);padding:1px 5px;border-radius:4px}

/* ================= HUB (só links) ================= */
.hubband{background:var(--accent-ink);color:#fff;padding:20px clamp(18px,4vw,32px)}
@media(prefers-color-scheme:dark){.hubband{background:#1E1A3C}}
:root[data-theme=dark] .hubband{background:#1E1A3C}
:root[data-theme=light] .hubband{background:var(--accent-ink)}
.hubband .in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:12px}
.hubband .mk{width:46px;height:38px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:14px;color:#fff;flex:none;letter-spacing:-.02em}
.hubband .bt{font-family:var(--disp);font-weight:620;font-size:19px;line-height:1.12;letter-spacing:-.02em;color:#fff}
.hubband .bs{font-size:12.5px;color:#B9B5EE;line-height:1.35}
.hubwrap{max-width:1180px;margin:0 auto;padding:26px clamp(18px,4vw,32px) 64px}
.hubh{font-family:var(--disp);font-size:15.5px;font-weight:520;color:var(--text-2);letter-spacing:0;margin-bottom:2px}
.hubs{color:var(--text-3);font-size:13px;margin-bottom:22px}
.gt2{font-family:var(--body);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin:24px 0 10px}
.gt2:first-of-type{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:19px 20px 17px;text-decoration:none;color:inherit;display:grid;gap:4px;box-shadow:var(--shadow);transition:transform .13s,border-color .13s,box-shadow .13s}
.card:hover,.card:focus-visible{transform:translateY(-2px);border-color:var(--accent-2)}
.card .bt{font-family:var(--disp);font-size:17.5px;font-weight:650;letter-spacing:-.022em;line-height:1.15}
.card .bs{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.card .desc{font-size:12.8px;color:var(--text-2);margin-top:4px;line-height:1.45}
.card .ir{font-size:12.3px;color:var(--accent);font-weight:560;margin-top:9px}
.card.fut{border-style:dashed;border-color:var(--amber);background:var(--amber-soft)}
.card.fut .ir{color:var(--amber)}
.card.fut .bs{color:var(--amber)}

/* ================= KPIs ================= */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:16px 0}
.kpi{background:var(--surface);padding:14px 16px;display:grid;gap:3px}
.kpi dt{font-family:var(--body);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.kpi dd{font-family:var(--disp);font-size:22px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.028em;line-height:1.15}
.kpi dd small{display:block;font-family:var(--body);font-size:11.3px;font-weight:400;color:var(--text-3);letter-spacing:0;margin-top:3px;line-height:1.4}
.kpi.hl dd{color:var(--accent)}
.kpi.miss dd{color:var(--text-3);font-size:14px;font-style:italic;font-weight:450}

/* ================= TABELAS ================= */
.tw{overflow-x:auto;border:1px solid var(--border);border-radius:10px;background:var(--surface);margin:14px 0}
table{width:100%;border-collapse:collapse;font-size:13.4px}
th,td{text-align:left;padding:10px 15px;border-bottom:1px solid var(--border);vertical-align:top}
thead th{font-family:var(--body);font-size:10px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);font-weight:500;background:var(--surface-2);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right;font-family:var(--disp);font-weight:500;letter-spacing:-.005em;font-variant-numeric:tabular-nums;white-space:nowrap}
td.k{font-weight:600;white-space:nowrap}
.win{color:var(--good);font-weight:650}
.neg{color:var(--bad);font-weight:650}
.warn{color:var(--amber);font-weight:650}
.nd{color:var(--text-3);font-style:italic}

/* ================= GRÁFICOS ================= */
.chart{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px 20px;margin:14px 0}
.chart .ct{font-family:var(--disp);font-size:14px;font-weight:640;letter-spacing:-.012em;margin-bottom:3px}
.chart .cs{font-size:12.2px;color:var(--text-3);margin-bottom:15px}

/* barras horizontais */
.hbars{display:grid;gap:9px}
.hbar{display:grid;grid-template-columns:minmax(58px,auto) 1fr minmax(64px,auto);align-items:center;gap:11px}
.hbar .lb{font-size:12.6px;color:var(--text-2);white-space:nowrap}
.hbar .lb b{color:var(--text);font-weight:600}
.hbar .tk{height:9px;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;overflow:hidden;min-width:40px}
.hbar .fl{height:100%;border-radius:99px;background:var(--accent);display:block}
.hbar .fl.g{background:var(--good)}
.hbar .fl.b{background:var(--bad)}
.hbar .fl.a{background:var(--amber)}
.hbar .fl.m{background:var(--muted-bar)}
.hbar .vl{font-family:var(--disp);font-weight:500;font-size:12.6px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* colunas verticais */
.cols{display:flex;align-items:flex-end;gap:clamp(8px,2.4vw,26px);height:170px;padding:0 4px;border-bottom:1px solid var(--border-2);margin-bottom:9px}
.col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%;min-width:0}
.col .cv{font-family:var(--disp);font-weight:500;font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-2);white-space:nowrap}
.col .cb{width:100%;max-width:66px;background:var(--accent);border-radius:5px 5px 0 0;min-height:3px}
.col .cb.g{background:var(--good)}
.col .cb.b{background:var(--bad)}
.col .cb.a{background:var(--amber)}
.col .cb.m{background:var(--muted-bar)}
.col .cb.fut{background:transparent;border:1.5px dashed var(--amber)}
.collabs{display:flex;gap:clamp(8px,2.4vw,26px);padding:0 4px}
.collabs div{flex:1;text-align:center;font-size:11.6px;color:var(--text-3);min-width:0}
.collabs div b{display:block;color:var(--text-2);font-size:12.4px;font-weight:600}

/* barras empilhadas */
.stack{display:flex;height:26px;border-radius:6px;overflow:hidden;border:1px solid var(--border);margin:5px 0}
.stack span{display:block;height:100%}
.leg{display:flex;flex-wrap:wrap;gap:14px;margin-top:11px;font-size:12.2px;color:var(--text-2)}
.leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* ================= CARDS DE CONTEÚDO ================= */
.cards{display:grid;gap:10px;margin:12px 0}
.cbox{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:14px 18px;display:grid;gap:5px}
.cbox p{font-size:13.3px;color:var(--text-2);margin:0;max-width:82ch}
.cbox.p{border-left:3px solid var(--bad)}
.cbox.m{border-left:3px solid var(--accent)}
.cbox.c{border-left:3px solid var(--amber)}

.flag{background:var(--amber-soft);border:1px solid var(--amber);border-radius:9px;padding:13px 17px;font-size:13.4px;color:var(--text-2);margin:14px 0;max-width:88ch}
.flag b{color:var(--text)}
.nota{background:var(--accent-soft);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:13px 17px;font-size:13.4px;color:var(--text-2);margin:16px 0 26px;max-width:88ch}
.nota b{color:var(--text)}
.frase{font-family:var(--disp);font-size:17px;font-weight:560;color:var(--accent-ink);max-width:62ch;margin:12px 0 14px;line-height:1.42;letter-spacing:-.012em}
.src{font-size:12.2px;color:var(--text-3);font-family:var(--body);margin-top:10px;line-height:1.55}
.rodape{margin-top:52px;padding-top:18px;border-top:1px solid var(--border-2);font-size:12.4px;color:var(--text-3)}
section{scroll-margin-top:20px}

/* mini-barra inline (dentro de tabela) */
.minibar{display:inline-flex;align-items:center;gap:8px;min-width:118px;width:100%}
.minibar .tk{flex:1;height:7px;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;overflow:hidden;min-width:36px}
.minibar .fl{height:100%;border-radius:99px;background:var(--accent);display:block}
.minibar .fl.g{background:var(--good)}.minibar .fl.b{background:var(--bad)}.minibar .fl.a{background:var(--amber)}
.minibar .vl{font-family:var(--disp);font-weight:500;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:46px;text-align:right}

/* ================= SUBMENU DE SEÇÕES (dentro da página) ================= */
.subnav{position:sticky;top:0;z-index:15;display:flex;gap:5px;overflow-x:auto;scrollbar-width:thin;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  margin:0 calc(-1*clamp(18px,3.4vw,46px)) 26px;padding:9px clamp(18px,3.4vw,46px)}
.subnav a{font-size:12.8px;color:var(--text-2);text-decoration:none;padding:5px 12px;border-radius:99px;
  white-space:nowrap;border:1px solid transparent;line-height:1.35}
.subnav a:hover{background:var(--surface-2);color:var(--text)}
.subnav a.on{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-2);font-weight:560}
@media(max-width:860px){.subnav{top:0}}

/* ================= TROCA DE IDIOMA ================= */
body{opacity:0}
body.i18n{opacity:1;transition:opacity .12s ease}
@media(scripting:none){body{opacity:1}}  /* sem JS, mostra em português */
.lang{display:flex;gap:2px;border:1px solid var(--border);border-radius:8px;padding:2px;background:var(--surface);flex:none;align-self:stretch}
.lang button{flex:1;font-family:var(--body);font-size:10.5px;font-weight:500;letter-spacing:.05em;padding:4px 8px;border-radius:6px;
  border:none;background:transparent;color:var(--text-3);cursor:pointer;line-height:1.3}
.lang button:hover{color:var(--text)}
.lang button.on{background:var(--accent-soft);color:var(--accent-ink)}
.app.recolhido .lang{display:none}
.hubband .lang{margin-left:auto;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.hubband .lang button{color:#C9C5F2}
.hubband .lang button:hover{color:#fff}
.hubband .lang button.on{background:rgba(255,255,255,.9);color:var(--accent-ink)}