/* ============================================================================
   OTTO HUB — SISTEMA DE DESIGN (fonte única da verdade)
   Extraído de design/PROTOTIPO_APROVADO_painel.html (aprovado em 13/07/2026).

   NÃO redesenhar aqui. Este arquivo TRANSCREVE o protótipo:
     · Vermelho da marca sobre grafite quente.
     · Franklin Gothic no texto/rótulos · Cascadia Mono em TODO número.
     · Zero webfont — só stacks que já existem no Windows.
     · Fundo vivo: grade apagada que ACENDE sob o cursor.
     · Tema claro E escuro (data-theme vence prefers-color-scheme).
     · Menu sem emoji: SVG monocromático, traço 1,5px.

   ORDEM DO ARQUIVO
     1. Tokens
     2. Ponte pro Tailwind + pro otto.css legado
     3. Fundo vivo (.rig)
     4. Casca (menu lateral, wrap, topo mobile)
     5. Componentes (card, kpi, número, mostrador, funil, tabela, badge, botão, modal)
     6. Correções de tema claro nas classes legadas
     7. prefers-reduced-motion
   ========================================================================== */

@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* ============================================================================
   1. TOKENS
   Cores que o Tailwind precisa consumir com opacidade (bg-ottored/90) são
   guardadas como TRIPLA RGB — sem isso, toda classe com "/alpha" quebra.
   ========================================================================== */
:root {
  /* --- marca --- */
  --brand-rgb: 192 57 43;          /* #C0392B — ele quis manter. Não trocar. */
  --neon-rgb: 255 58 36;
  --neon2-rgb: 255 138 61;
  --deep-rgb: 110 26 18;

  /* --- semânticas --- */
  --pos-rgb: 11 143 94;            /* verde  (retunado por tema) */
  --warn-rgb: 224 138 0;           /* âmbar  (retunado por tema) */
  --neg-rgb: 192 57 43;            /* erro/queda */

  /* --- neutros de placa (viés quente, escolhidos, não herdados) --- */
  --bg-rgb: 242 238 235;
  --bg2-rgb: 251 248 246;
  --card-rgb: 255 255 255;
  --side-rgb: 255 255 255;
  --line-rgb: 213 209 206;
  --line2-rgb: 229 225 222;
  --ink-rgb: 21 14 12;
  --ink2-rgb: 107 90 85;
  --ink3-rgb: 156 138 132;

  /* tinta de quem senta em fundo NEUTRO. Fundo colorido re-declara pra branco
     (ver seção 6) — é o que salva os 49 botões vermelhos no tema claro. */
  --on-surface-rgb: var(--ink-rgb);

  /* --- derivadas (use estas no CSS; as triplas são só pra ponte) --- */
  --brand: rgb(var(--brand-rgb));
  --neon: rgb(var(--neon-rgb));
  --neon-2: rgb(var(--neon2-rgb));
  --deep: rgb(var(--deep-rgb));
  --signal: rgb(var(--pos-rgb));
  --amber: rgb(var(--warn-rgb));
  --signal-glow: rgb(var(--pos-rgb) / .32);

  --bg: rgb(var(--bg-rgb));
  --bg-2: rgb(var(--bg2-rgb));
  --card: rgb(var(--card-rgb));
  --side: rgb(var(--side-rgb));
  --side-2: rgb(24 14 12 / .035);
  --line: rgb(var(--line-rgb));
  --line-2: rgb(var(--line2-rgb));
  --ink: rgb(var(--ink-rgb));
  --ink-2: rgb(var(--ink2-rgb));
  --ink-3: rgb(var(--ink3-rgb));

  /* --- fundo vivo --- */
  --grid-1: rgb(28 18 16 / .06);
  --grid-2: rgb(192 57 43 / .42);
  --spot: rgb(192 57 43 / .14);
  --scan: rgb(28 18 16 / .028);

  /* --- relevo: no CLARO o neon vira SOMBRA COLORIDA SATURADA (não neon apagado) --- */
  --shadow: 0 2px 3px rgb(24 14 12 / .05), 0 20px 40px -24px rgb(192 57 43 / .55);
  --shadow-hi: 0 4px 8px rgb(24 14 12 / .07), 0 44px 70px -30px rgb(192 57 43 / .85);
  --edge-dim: rgb(192 57 43 / .22);
  --num-shadow: 0 8px 22px rgb(192 57 43 / .26);

  /* --- o palco do funil é escuro nos DOIS temas: néon precisa de noite --- */
  --stage: #120D0C;
  --stage-2: #1C1413;
  --stage-ink: #F6EBE8;
  --stage-ink-2: #A08D88;
  --stage-line: rgb(255 120 100 / .16);

  /* --- tipografia: REGRA. Franklin no texto, Cascadia no número. Zero webfont. --- */
  --mono: "Cascadia Mono", "Cascadia Code", "Consolas", ui-monospace, monospace;
  --text: "Franklin Gothic Medium", "Franklin Gothic", "Segoe UI", system-ui, sans-serif;
  --display: "Impact", "Franklin Gothic Heavy", "Haettenschweiler", "Arial Narrow Bold", "Arial Narrow", sans-serif;

  --e: cubic-bezier(.18,.82,.28,1);
  --sb: 268px;              /* largura do menu lateral */

  /* posição do cursor (o JS da casca alimenta) */
  --mx: 50vw;
  --my: 30vh;
}

/* ---- ESCURO: por preferência do sistema... ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --pos-rgb: 0 217 138;
    --warn-rgb: 255 194 75;
    --neg-rgb: 255 58 36;
    --bg-rgb: 12 9 8;
    --bg2-rgb: 19 14 13;
    --card-rgb: 23 17 16;
    --side-rgb: 16 12 11;
    --line-rgb: 54 41 39;
    --line2-rgb: 37 28 27;
    --ink-rgb: 248 238 235;
    --ink2-rgb: 171 153 148;
    --ink3-rgb: 122 104 98;
    --side-2: rgb(255 205 195 / .05);
    --signal-glow: rgb(var(--pos-rgb) / .45);
    --grid-1: rgb(255 214 204 / .05);
    --grid-2: rgb(255 75 51 / .75);
    --spot: rgb(255 75 51 / .16);
    --scan: rgb(255 255 255 / .018);
    --shadow: 0 1px 0 rgb(255 255 255 / .05) inset, 0 26px 60px -34px #000;
    --shadow-hi: 0 1px 0 rgb(255 255 255 / .08) inset, 0 40px 80px -28px rgb(255 58 36 / .5);
    --edge-dim: rgb(255 58 36 / .30);
    --num-shadow: 0 0 34px rgb(255 58 36 / .45);
    --stage: #0A0706;
    --stage-2: #150F0E;
  }
}

/* ---- ...mas o BOTÃO vence a preferência do sistema, nos dois sentidos ---- */
:root[data-theme="light"] {
  --pos-rgb: 11 143 94;
  --warn-rgb: 224 138 0;
  --neg-rgb: 192 57 43;
  --bg-rgb: 242 238 235;
  --bg2-rgb: 251 248 246;
  --card-rgb: 255 255 255;
  --side-rgb: 255 255 255;
  --line-rgb: 213 209 206;
  --line2-rgb: 229 225 222;
  --ink-rgb: 21 14 12;
  --ink2-rgb: 107 90 85;
  --ink3-rgb: 156 138 132;
  --side-2: rgb(24 14 12 / .035);
  --signal-glow: rgb(var(--pos-rgb) / .32);
  --grid-1: rgb(28 18 16 / .06);
  --grid-2: rgb(192 57 43 / .42);
  --spot: rgb(192 57 43 / .14);
  --scan: rgb(28 18 16 / .028);
  --shadow: 0 2px 3px rgb(24 14 12 / .05), 0 20px 40px -24px rgb(192 57 43 / .55);
  --shadow-hi: 0 4px 8px rgb(24 14 12 / .07), 0 44px 70px -30px rgb(192 57 43 / .85);
  --edge-dim: rgb(192 57 43 / .22);
  --num-shadow: 0 8px 22px rgb(192 57 43 / .26);
  --stage: #120D0C;
  --stage-2: #1C1413;
}
:root[data-theme="dark"] {
  --pos-rgb: 0 217 138;
  --warn-rgb: 255 194 75;
  --neg-rgb: 255 58 36;
  --bg-rgb: 12 9 8;
  --bg2-rgb: 19 14 13;
  --card-rgb: 23 17 16;
  --side-rgb: 16 12 11;
  --line-rgb: 54 41 39;
  --line2-rgb: 37 28 27;
  --ink-rgb: 248 238 235;
  --ink2-rgb: 171 153 148;
  --ink3-rgb: 122 104 98;
  --side-2: rgb(255 205 195 / .05);
  --signal-glow: rgb(var(--pos-rgb) / .45);
  --grid-1: rgb(255 214 204 / .05);
  --grid-2: rgb(255 75 51 / .75);
  --spot: rgb(255 75 51 / .16);
  --scan: rgb(255 255 255 / .018);
  --shadow: 0 1px 0 rgb(255 255 255 / .05) inset, 0 26px 60px -34px #000;
  --shadow-hi: 0 1px 0 rgb(255 255 255 / .08) inset, 0 40px 80px -28px rgb(255 58 36 / .5);
  --edge-dim: rgb(255 58 36 / .30);
  --num-shadow: 0 0 34px rgb(255 58 36 / .45);
  --stage: #0A0706;
  --stage-2: #150F0E;
}

/* ============================================================================
   2. BASE + PONTE
   ========================================================================== */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  line-height: 1.5;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
button, input, select, textarea { font-family: inherit; }
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 4px;
}

/* TIPOGRAFIA — a regra das duas fontes.
   Título-pôster (h1) no display; rótulos de seção em Franklin travado.
   Bebas Neue e DM Sans MORRERAM: nada de webfont. */
h1, h1.font-titulo, h1.font-display, .otto-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: .95;
}
.font-titulo, .font-display, h2, h3 {
  font-family: var(--text);
  font-weight: 700;
  letter-spacing: .06em;
}
h1 em, .otto-title em { font-style: normal; color: var(--brand); text-shadow: var(--num-shadow); }
:root[data-theme="dark"] h1 em { color: var(--neon); }

/* TODO NÚMERO é Cascadia + tabular. Sem exceção.

   O seletor é `.num.num` (peso dobrado) DE PROPÓSITO: o Tailwind injeta o CSS
   dele em runtime, DEPOIS desta folha. Como `.font-display` e `.num` têm a
   mesma especificidade, o Tailwind vencia o desempate por ordem e o número
   saía em Impact — cujo zero é um oval sólido que lê como borrão. Dobrando a
   classe, o número ganha de qualquer utilitário de fonte que passe por cima. */
.num.num, .kpi-valor, .cell-input, table.tbl td, .datepick input {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.num { letter-spacing: -.01em; }

/* ============================================================================
   3. FUNDO VIVO — a grade que acende sob o cursor (copiada do Telemetria).
   Fica quase invisível em repouso; o halo do ponteiro é que a revela.
   ========================================================================== */
.rig { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.rig .base {
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--grid-1) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, var(--grid-1) 1px, transparent 1px) 0 0 / 46px 100%;
}
.rig .live {
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--grid-2) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, var(--grid-2) 1px, transparent 1px) 0 0 / 46px 100%;
  -webkit-mask-image: radial-gradient(320px circle at var(--mx) var(--my), #000 0%, rgb(0 0 0 / .35) 45%, transparent 72%);
  mask-image: radial-gradient(320px circle at var(--mx) var(--my), #000 0%, rgb(0 0 0 / .35) 45%, transparent 72%);
  opacity: .45;   /* .9 do original ficou forte demais */
}
.rig .spot {
  position: absolute; inset: 0;
  background: radial-gradient(520px circle at var(--mx) var(--my), var(--spot), transparent 62%);
}
.rig .horizon {
  position: absolute; left: -10%; right: -10%; bottom: -30vh; height: 60vh;
  background: radial-gradient(ellipse at 50% 100%, var(--brand) 0%, transparent 62%);
  opacity: .22; filter: blur(30px);
}
.rig .scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, var(--scan) 0 1px, transparent 1px 4px);
}
.rig .sweep {
  position: absolute; left: 0; right: 0; height: 220px; top: -220px;
  background: linear-gradient(180deg, transparent, rgb(255 75 51 / .055), transparent);
  animation: sweep 7.5s linear infinite;
  will-change: transform;
}
@keyframes sweep { to { transform: translateY(calc(100vh + 440px)); } }

/* ============================================================================
   4. CASCA — mesmos nomes de classe de sempre (.sb/.wrap/.mbar), pele nova.
   Mantidos de propósito: os templates e o onclick inline dependem deles.
   ========================================================================== */

/* .wrap fica POSITION:RELATIVE sem z-index de propósito: sobe acima da grade
   sem criar contexto de empilhamento (senão modal de tela some atrás do menu). */
.wrap { margin-left: var(--sb); min-height: 100vh; position: relative; }

.sb {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb); z-index: 50;
  background: var(--side); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform .22s ease;
}
.sb-brand {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  padding: 24px 22px 20px; border-bottom: 1px solid var(--line-2);
  color: var(--ink);
}
.sb-brand .mark {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  box-shadow: 0 0 22px -5px var(--neon);
  animation: markpulse 2.4s ease-in-out infinite;
}
@keyframes markpulse {
  0%, 100% { box-shadow: 0 0 22px -5px var(--neon); }
  50% { box-shadow: 0 0 34px -2px var(--neon); }
}
.sb-brand .word {
  font-family: var(--text); font-weight: 600; font-size: 15px;
  letter-spacing: .26em; text-transform: uppercase; line-height: 1;
  animation: wordpulse 2.4s ease-in-out infinite;
}
@keyframes wordpulse {
  0%, 100% { opacity: .82; text-shadow: none; }
  50% { opacity: 1; text-shadow: 0 0 18px var(--edge-dim); }
}
.sb-brand .word b { color: var(--brand); font-weight: 600; }
:root[data-theme="dark"] .sb-brand .word b { color: var(--neon); }

.sb-nav { flex: 1; overflow-y: auto; padding: 14px 12px 8px; scrollbar-width: thin; }
.sb-nav::-webkit-scrollbar { width: 6px; }
.sb-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

.sb-grp {
  margin: 16px 0 6px; padding: 0 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3);
}
.sb-nav .sb-grp:first-child { margin-top: 2px; }

.sb-link, .sb-parent {
  position: relative; width: 100%;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border: 0; background: transparent;
  border-radius: 8px; text-align: left;
  color: var(--ink-2); text-decoration: none;
  font-size: 14px; font-weight: 500; line-height: 1.2;
  cursor: pointer; user-select: none;
  transition: background .18s, color .18s;
}
.sb-link:hover, .sb-parent:hover { background: var(--side-2); color: var(--ink); }
.sb-link svg, .sb-parent svg { width: 17px; height: 17px; flex: none; stroke-width: 1.5; }

/* item ativo: barra de néon na borda do menu */
.sb-link.on {
  color: var(--ink); font-weight: 600;
  background: color-mix(in srgb, var(--neon) 10%, transparent);
}
.sb-link.on::before {
  content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--brand);
  box-shadow: 0 0 14px 0 var(--neon);
}
.sb-link.on svg { color: var(--brand); }
:root[data-theme="dark"] .sb-link.on svg { color: var(--neon); }

/* "em breve" */
.sb-link.soon { color: var(--ink-3); cursor: default; opacity: .6; }
.sb-link.soon:hover { background: transparent; color: var(--ink-3); }
.sb-link.soon em {
  font-style: normal; font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  margin-left: auto; color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  border-radius: 5px; padding: 1px 5px;
}

/* aba expansível */
.sb-parent .chev {
  margin-left: auto; width: 12px; height: 12px; stroke-width: 2;
  color: var(--ink-3); transition: transform .22s var(--e);
}
.sb-parent.open .chev { transform: rotate(90deg); }
.sb-parent.open { color: var(--ink); }

/* submenu: sem ícone, só um trilho fino — hierarquia sem ruído */
.sb-sub {
  display: none; margin: 2px 0 6px 20px; padding-left: 12px;
  border-left: 1px solid var(--line-2);
}
.sb-sub.open { display: block; animation: slide .2s var(--e); }
@keyframes slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sb-sub .sb-link { font-size: 13.5px; padding: 7px 10px; color: var(--ink-3); }
.sb-sub .sb-link::after {
  content: ""; position: absolute; left: -13px; top: 50%; width: 6px; height: 1px;
  background: var(--line); transform: translateY(-50%);
}
.sb-sub .sb-link:hover { color: var(--ink); }
.sb-sub .sb-link.on::before { left: -13px; }

/* rodapé do menu: os 2 botões de tema + sair */
.sb-foot {
  border-top: 1px solid var(--line-2); padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 10px;
}
.sb-foot a {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border-radius: 8px; color: var(--ink-3); text-decoration: none; font-size: 14px;
  transition: background .18s, color .18s;
}
.sb-foot a:hover { background: var(--side-2); color: var(--brand); }
:root[data-theme="dark"] .sb-foot a:hover { color: var(--neon); }
.sb-foot svg { width: 17px; height: 17px; stroke-width: 1.5; }

/* seletor de tema: UM botão que alterna. O ícone mostra o tema ATUAL —
   sol no claro, lua no escuro. Sem texto: só o ícone, na mesma linguagem do menu. */
.sb-tema {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .2s var(--e);
}
.sb-tema:hover {
  color: var(--brand); border-color: var(--brand); background: var(--side-2);
  transform: translateY(-1px);
}
:root[data-theme="dark"] .sb-tema:hover { color: var(--neon); border-color: var(--neon); }
.sb-tema svg { width: 17px; height: 17px; stroke-width: 1.5; grid-area: 1 / 1; }

/* qual ícone aparece. Cobre os 3 casos: tema forçado no botão (data-theme)
   e o caso "sem escolha ainda", em que vale a preferência do sistema. */
.sb-tema .ic-lua { display: none; }
.sb-tema .ic-sol { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .sb-tema .ic-sol { display: none; }
  :root:not([data-theme]) .sb-tema .ic-lua { display: block; }
}
:root[data-theme="dark"] .sb-tema .ic-sol { display: none; }
:root[data-theme="dark"] .sb-tema .ic-lua { display: block; }
:root[data-theme="light"] .sb-tema .ic-sol { display: block; }
:root[data-theme="light"] .sb-tema .ic-lua { display: none; }

/* o rodapé vira uma linha só: botão de tema + sair */
.sb-foot { flex-direction: row; align-items: center; gap: 8px; }
.sb-foot a { flex: 1; }

/* overlay do off-canvas */
.sb-ov {
  position: fixed; inset: 0; z-index: 45; display: none;
  background: rgb(8 5 4 / .5); backdrop-filter: blur(3px);
}
.sb-ov.show { display: block; }

/* topo mobile */
.mbar { display: none; }
.burger-top {
  display: none; background: none; border: none; color: var(--ink);
  padding: 4px; margin-right: 6px; cursor: pointer;
}

@media (max-width: 860px) {
  .sb { transform: translateX(-100%); box-shadow: 0 0 80px -20px #000; }
  .sb.open { transform: translateX(0); }
  .wrap { margin-left: 0; }
  .mbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 40;
    background: var(--side); border-bottom: 1px solid var(--line);
    padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
  .mbar .burger { background: none; border: none; color: var(--ink); padding: 4px; cursor: pointer; }
  .mbar .mb-o, .mbar .mb-v {
    font-family: var(--text); font-weight: 600; font-size: 15px;
    letter-spacing: .26em; text-transform: uppercase; line-height: 1;
  }
  .mbar .mb-o { color: var(--ink); }
  .mbar .mb-v { color: var(--brand); }
  .burger-top { display: inline-flex; align-items: center; }
}
:root[data-theme="dark"] .mbar .mb-v { color: var(--neon); }

/* ============================================================================
   5. COMPONENTES
   ========================================================================== */

/* ---- cartão: borda de néon que gira no hover (do Circuito) ---- */
.otto-card {
  position: relative; border-radius: 16px; background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: box-shadow .35s var(--e);
}
.otto-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--ang),
    transparent 0deg, transparent 200deg,
    var(--neon) 268deg, var(--neon-2) 300deg, transparent 340deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s;
  animation: spin 4.5s linear infinite paused;
  pointer-events: none;
}
@keyframes spin { to { --ang: 360deg; } }
.otto-card:hover, .otto-card:focus-within { box-shadow: var(--shadow-hi); }
.otto-card:hover::before, .otto-card:focus-within::before { opacity: 1; animation-play-state: running; }

/* rótulo miúdo travado */
.lab {
  font-size: 10px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ---- badge / selo ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; border: 1px solid currentColor;
}
.badge.ok { color: var(--signal); box-shadow: 0 0 20px -6px var(--signal-glow); }
.badge.hot { color: var(--brand); }
.badge.warn { color: var(--amber); }
:root[data-theme="dark"] .badge.hot { color: var(--neon); }

/* ---- botões ---- */
.otto-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink);
  font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .25s var(--e), box-shadow .25s, color .2s, border-color .2s;
}
.otto-btn:hover { transform: translateY(-1px); color: var(--neon); border-color: var(--neon); }
.otto-btn--primary {
  background: var(--brand); color: #fff; border-color: transparent;
}
.otto-btn--primary:hover { color: #fff; box-shadow: 0 0 30px -6px var(--neon); }

/* o "?" das telas do Vendas: ancorado no topo-direita da coluna de conteúdo
   (<main class="tela">), na mesma posição do protótipo. Fica ao lado do título
   sem empurrar nada — não entra no fluxo. */
.tela { position: relative; }
.ajuda-tela { position: absolute; top: 24px; right: 16px; z-index: 20; }
@media (max-width: 680px) {
  .ajuda-tela { top: 16px; right: 12px; width: 36px; height: 36px; font-size: 15px; }
}

/* botão "?" — todo aviso e instrução mora no modal, não na tela */
.help {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-family: var(--mono); font-size: 17px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .25s var(--e), box-shadow .25s, color .2s, border-color .2s;
}
.help:hover {
  color: var(--neon); border-color: var(--neon); transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--neon), 0 0 32px -6px var(--neon);
}

/* ---- KPI ---- */
.otto-kpi { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; min-height: 132px; }
.otto-kpi .v {
  font-family: var(--mono); font-weight: 700; font-size: clamp(20px, 1.9vw, 27px);
  letter-spacing: -.03em; line-height: 1.05; margin-top: auto;
  font-variant-numeric: tabular-nums;
}
.otto-kpi .v s { text-decoration: none; font-size: .6em; font-weight: 400; color: var(--ink-3); margin-right: .22em; }
.otto-kpi .h { font-size: 12px; color: var(--ink-3); }
.otto-kpi.hero .v { color: var(--brand); text-shadow: var(--num-shadow); }
:root[data-theme="dark"] .otto-kpi.hero .v { color: var(--neon); }

/* ---- CABEÇALHO DE TELA (título-pôster + controles) ---- */
.top { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 4px 0 22px; }
.top .id { margin-right: auto; min-width: 0; }
.top h1 { font-size: clamp(30px, 4vw, 52px); margin: 0; color: var(--ink); }
.ctrl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* "ao vivo" discreto, no canto do cabeçalho */
.live-note {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--ink-3); white-space: nowrap; padding-right: 4px;
}
.live-note i {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--signal); box-shadow: 0 0 8px var(--signal);
  animation: pulse 2.4s ease-in-out infinite;
}

.datepick {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow);
  color: var(--ink-2);
}
.datepick svg { width: 15px; height: 15px; stroke-width: 1.5; flex: none; }
.datepick input {
  border: 0; background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums;
  padding: 0; width: 118px;
}
.datepick input:focus { outline: none; }
.datepick input::-webkit-calendar-picker-indicator { filter: grayscale(1); opacity: .5; cursor: pointer; }
:root[data-theme="dark"] .datepick input::-webkit-calendar-picker-indicator { filter: invert(1) grayscale(1); opacity: .45; }

/* ---- 3 MOSTRADORES EM ARCO (da Telemetria) ---- */
.gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gauge { padding: 20px 22px; display: flex; align-items: center; gap: 18px; }
.dial { position: relative; width: 104px; height: 104px; flex: none; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dial .bgarc { stroke: var(--line-2); }
.dial .arc {
  stroke-linecap: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: draw 1.4s .25s var(--e) forwards;
  filter: drop-shadow(0 0 7px currentColor);
}
@keyframes draw { to { stroke-dashoffset: var(--off); } }
.dial .center { position: absolute; inset: 0; display: grid; place-items: center; }
.dial .center b {
  font-family: var(--mono); font-weight: 700; font-size: 24px; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.dial .center b u { text-decoration: none; font-size: .58em; font-weight: 400; }
.gauge .meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gauge .meta strong { font-size: 16px; font-weight: 600; letter-spacing: .01em; }
.gauge .meta span { font-size: 12.5px; color: var(--ink-2); }
.gauge .meta .num { font-size: 12px; color: var(--ink-2); }
.gauge.win .dial .center b { color: var(--signal); }

/* ---- PALCO DO FUNIL — o coração (do Circuito).
   Escuro nos DOIS temas de propósito: néon precisa de noite. ---- */
.stage {
  position: relative; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 90% at 12% 0%, var(--stage-2), var(--stage) 65%);
  border: 1px solid rgb(255 120 100 / .18);
  box-shadow: 0 30px 70px -34px rgb(255 58 36 / .55), 0 0 0 1px rgb(255 120 100 / .06) inset;
  color: var(--stage-ink);
}
.stage-h { display: flex; align-items: center; gap: 14px; padding: 20px 24px 0; flex-wrap: wrap; }
.stage-h h2 {
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  margin: 0; color: var(--stage-ink);
}
.stage-h .legend { margin-left: auto; display: flex; gap: 16px; font-size: 11px; color: var(--stage-ink-2); }
.stage-h .legend b { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.stage-h .legend i { width: 7px; height: 7px; border-radius: 50%; }
.flow { position: relative; padding: 8px 24px 0; }
.flow canvas { display: block; width: 100%; height: 250px; }
.flow .nodes {
  position: absolute; inset: 8px 24px 0; display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center; pointer-events: none;
}
.node { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.node .v {
  font-family: var(--mono); font-weight: 700; font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1; letter-spacing: -.03em; color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px var(--neon), 0 0 6px rgb(255 58 36 / .7);
  opacity: 0; transform: translateY(10px);
  animation: rise .7s var(--e) forwards;
}
@keyframes rise { to { opacity: 1; transform: none; } }
.node .k { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--stage-ink-2); }
.node .r {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgb(255 120 100 / .28); color: #FFB9A8;
  opacity: 0; animation: rise .7s .35s var(--e) forwards;
}
.node .r.good { color: #00D98A; border-color: rgb(0 217 138 / .4); box-shadow: 0 0 20px -6px #00D98A; }
.stage-foot {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 14px 24px 20px; border-top: 1px solid var(--stage-line); margin-top: 10px;
  font-size: 12.5px; color: var(--stage-ink-2);
}
.stage-foot .hot { color: #FF9E86; font-family: var(--mono); }

@media (max-width: 1180px) { .gauges { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
  .gauge { flex-direction: column; align-items: flex-start; }
  .flow canvas { height: 200px; }
  .node .k { display: none; }
}

/* ---- eyebrow / ponto pulsante ---- */
.eyebrow {
  display: flex; align-items: center; gap: 9px; margin-bottom: 7px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-3);
}
.eyebrow i {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--brand); box-shadow: 0 0 10px var(--brand);
  animation: pulse 1.8s ease-in-out infinite;
}
:root[data-theme="dark"] .eyebrow i { background: var(--neon); box-shadow: 0 0 12px var(--neon); }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } }

/* ---- TABELAS: célula alinhada à direita é NÚMERO (convenção do Hub inteiro).
   Assim as colunas de dinheiro alinham na vírgula sem ter que marcar célula a
   célula em dezenas de tabelas. ---- */
table.otto-tabela td.text-right,
table.otto-tabela th.text-right,
table.otto-tabela td[class*="text-right"] {
  font-variant-numeric: tabular-nums;
}
table.otto-tabela td[class*="text-right"] { font-family: var(--mono); }
table.otto-tabela th[class*="text-right"] { font-family: var(--text); }

/* ícone dentro de botão (ex.: "Copiar") — no lugar do emoji */
.ic-btn {
  width: 14px; height: 14px; flex: none; stroke-width: 1.6;
  fill: none; stroke: currentColor;
  display: inline-block; vertical-align: -2px; margin-right: 6px;
}
/* ícone miúdo em rótulo (Central de Config: fonte do dado, botão de editar) */
.ic-mini {
  width: 11px; height: 11px; flex: none; stroke-width: 1.7;
  fill: none; stroke: currentColor;
  display: inline-block; vertical-align: -1px; margin-right: 4px;
}
/* o ícone do card de sistema, na Central de Config */
.cc-head .ic svg {
  width: 19px; height: 19px; stroke-width: 1.5;
  fill: none; stroke: currentColor; color: var(--brand);
}
:root[data-theme="dark"] .cc-head .ic svg { color: var(--neon); }
.cc-obs .ponto { margin-right: 5px; vertical-align: 1px; }

/* ---- PONTO DE ESTADO (alarmes) ----
   Regra da casa: vai pro "?" o que EXPLICA; fica na tela o que ALERTA.
   Por isso o alarme de captura continua na tela, vermelho, doendo — só trocou
   o emoji por um ponto que pulsa quando é alarme de verdade. */
.ponto { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.ponto.alerta {
  background: var(--brand); box-shadow: 0 0 10px var(--brand);
  animation: pulse 1.8s ease-in-out infinite;
}
:root[data-theme="dark"] .ponto.alerta { background: var(--neon); box-shadow: 0 0 12px var(--neon); }
.ponto.ok { background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.ponto.warn { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.ponto.neutro, .ponto.sem { background: var(--ink-3); }

/* ---- controles de formulário que seguem o tema ----
   O seletor de data nascia com `filter: invert(1)` cravado (feito pro tema
   escuro): no claro ele invertia ao contrário e o ícone sumia. */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: grayscale(1); opacity: .5; cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) grayscale(1); opacity: .45;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) grayscale(1); opacity: .45;
  }
}
select[multiple] option:checked {
  background: var(--brand) linear-gradient(0deg, var(--brand) 0%, var(--brand) 100%);
  color: #fff;
}

/* ---- modal (o destino de todo aviso) ---- */
.scrim {
  position: fixed; inset: 0; z-index: 150; display: none;
  background: rgb(8 5 4 / .62); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 24px;
}
.scrim[open] { display: flex; animation: fade .2s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  width: min(580px, 100%); max-height: 84vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px; box-shadow: 0 50px 100px -34px #000;
  animation: pop .28s var(--e);
}
@keyframes pop { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet h3 { font-size: 22px; font-weight: 600; letter-spacing: .01em; margin: 0 0 6px; }
.sheet .lead { font-size: 14px; color: var(--ink-2); margin: 0 0 22px; }
.sheet dl { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.sheet dt { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
:root[data-theme="dark"] .sheet dt { color: var(--neon); }
.sheet dd { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.sheet .close {
  margin-top: 26px; width: 100%; padding: 13px; border: 0; border-radius: 12px;
  background: var(--brand); color: #fff; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  transition: transform .2s var(--e), box-shadow .2s;
}
.sheet .close:hover { transform: translateY(-1px); box-shadow: 0 0 30px -6px var(--neon); }

/* ============================================================================
   6. TEMA CLARO NAS CLASSES LEGADAS
   O pulo do gato: fundo sólido COLORIDO re-declara --on-surface-rgb como
   branco. Como o Tailwind agora resolve `text-white` para essa variável, os
   49 botões vermelhos continuam com texto branco no tema claro, e os 133
   text-white em fundo neutro viram tinta escura. Sem !important, sem :not().
   Só classes de fundo SÓLIDO entram aqui — as com /alpha (bg-ottored/10) não
   casam com o seletor exato, e por isso mantêm a tinta normal.
   ========================================================================== */
.bg-ottored,
.bg-otto-vermelho,
.bg-otto-vermelhoescuro,
.bg-otto-vermelhoclaro,
.bg-green-600, .bg-green-700,
.bg-red-600, .bg-red-700,
.bg-gray-600, .bg-gray-700,
.btn-primario, .btn-excluir, .btn-excluir-grande,
.filtro-btn.ativo, .rel-aba.ativa, .toast, .card-alerta,
.seg button[aria-pressed="true"],
.otto-btn--primary, .sheet .close, .sb-brand .mark {
  --on-surface-rgb: 255 255 255;
}

/* verde/amarelo/vermelho de status seguem o tema (senão somem no claro) */
.cel-ok      { background: rgb(var(--pos-rgb) / .18); }
.cel-atencao { background: rgb(var(--warn-rgb) / .18); }
.cel-ruim    { background: rgb(var(--neg-rgb) / .16); }
.tag-ok      { background: rgb(var(--pos-rgb) / .16); color: var(--signal); }
.tag-atencao { background: rgb(var(--warn-rgb) / .16); color: var(--amber); }
.tag-ruim    { background: rgb(var(--neg-rgb) / .16); color: var(--brand); }
.tag-neutra  { background: var(--line-2); color: var(--ink-2); }
:root[data-theme="dark"] .tag-ruim { color: var(--neon); }

.caixa-verde    { background: rgb(var(--pos-rgb) / .12); border-color: var(--signal); }
.caixa-vermelha { background: rgb(var(--neg-rgb) / .12); border-color: var(--brand); }
.caixa-amarela  { background: rgb(var(--warn-rgb) / .12); border-color: var(--amber); }

/* ============================================================================
   7. MOVIMENTO: quem pediu pra parar, para.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rig .sweep { display: none; }
  /* o que entra por animação tem que ficar VISÍVEL, não sumir */
  .node .v, .node .r { opacity: 1 !important; transform: none !important; }
  .dial .arc { stroke-dashoffset: var(--off) !important; }
  .uf .bar i { transform: scaleX(1) !important; }
}

/* ============================================================================
   8. SEMÂNTICA DO DINHEIRO (usada no Painel e nos dashboards)
   Entra = âmbar · Sai = vermelho da marca · Sobra = verde.
   Eram 3 hex cravados no template (#E0B24E/#C67C72/#5FB98A) — viraram tokens,
   então seguem o tema em vez de sumir no claro.
   ========================================================================== */
.n-main   { color: var(--amber); }
.n-cost   { color: var(--brand); }
.n-profit { color: var(--signal); }
:root[data-theme="dark"] .n-cost { color: var(--neon); }