/* ══════════════════════════════════════════════════════════════════════
   FAROL — base RRooster (Manual de Identidade Visual v1.1, seção 10)
   ══════════════════════════════════════════════════════════════════════
   Valores tirados do Kit de implementação do Manual (10.1–10.6), não
   aproximados. Substitui a base vendorizada do Códice, que já divergia
   do Manual.

   DUAS DECISÕES DE MARCA DE 28/jul QUE ESTA BASE IMPLEMENTA:

   1. SISTEMAS EM TEMA CLARO por padrão (site segue escuro). Revoga o
      "nunca tema claro" do uso_por_ia. Leitura prolongada no escuro cansa.

   2. FAROL = A LUZ. Único produto sem matiz: branco #FFFFFF com glow
      mais forte que o dos demais (.46 vs .34, alcance 74% vs 65%, duas
      paradas) — porque nos outros o glow é ornamento e aqui ele É o
      produto. No claro fica negativo (#1F2430) e o glow vira elevação:
      luz sobre luz não aparece.

   ⚠️ Cores de produto NÃO servem sobre branco (dourado 1,85:1). O tema
   claro usa a rampa "ink" validada — ver `--ink-*`.
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Roboto+Mono:wght@400;500&family=Roboto+Slab:wght@500;700&display=swap');

/* ── 10.1 · tokens ─────────────────────────────────────────────────── */
:root {
  /* fundos espaciais (marca) */
  --bg: #07071C; --bg-deep: #04040F; --bg-elev: #0C0E2A;
  /* glass */
  --glass: rgba(122,140,255,.045); --glass-strong: rgba(122,140,255,.085);
  --glass-border: rgba(140,150,255,.13); --glass-border-strong: rgba(150,165,255,.26);
  /* acentos primários */
  --blue: #4285F4; --blue-soft: #6FA8FF; --purple: #7A37DB; --purple-soft: #A573FF; --cyan: #38E0D4;
  /* reservados */
  --red: #DB212A; --red-soft: #FF4B54; --gold: #F4B400; --gold-soft: #FFD24A;
  --green: #25D366; --green-soft: #4DE89A; --orange: #FF7A18; --orange-soft: #FFB066;
  /* texto */
  --m-text: #ECECF6; --m-mute: #A6A6C8; --m-dim: #8A8AB0; --m-faint: #63638A;
  /* tipografia */
  --font: 'Roboto', system-ui, sans-serif;
  --font-slab: 'Roboto Slab', Georgia, serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
  /* escala fluida — o Manual proíbe `ch` */
  --fs-h1: clamp(2rem, 5.5vw, 3.25rem); --fs-h2: clamp(1.6rem, 4vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 2.6vw, 1.6rem); --fs-lead: clamp(1.05rem, 2.2vw, 1.3rem);
  --fs-body: 1rem; --fs-sm: .875rem; --fs-xs: .75rem;
  --medida: 62rem;                    /* largura de leitura — substitui o `ch` */
  /* layout */
  --container: 1180px; --gutter: 20px;
  --radius: 20px; --radius-lg: 28px; --radius-sm: 12px; --radius-pill: 999px;
  --ease: cubic-bezier(.22,1,.36,1);
  --sidebar-w: 268px;
  /* glow do Farol — .46/74%/duas paradas: a única exceção autorizada */
  --glow-farol: radial-gradient(circle at center, rgba(255,255,255,.46) 0%, rgba(255,255,255,.16) 34%, transparent 74%);
  --glow-blue: radial-gradient(circle at center, rgba(66,133,244,.34) 0%, transparent 65%);
  --glow-purple: radial-gradient(circle at center, rgba(122,55,219,.34) 0%, transparent 65%);

  /* ── superfícies do TEMA (claro = padrão dos sistemas) ───────────── */
  --s-base: #F4F5FB; --s-card: #FFFFFF; --s-raised: #FFFFFF; --s-sunken: #EDEFF7;
  --s-border: #E2E5F0; --s-border-strong: #CFD4E6;
  --t-text: #14152E; --t-body: #3A3E57; --t-mute: #4A4E6B; --t-dim: #6A6E86;
  /* rampa ink — cores de produto legíveis no claro (validadas ≥3:1) */
  --ink-codice: #2B7DF0; --ink-trafego: #9E1019; --ink-sonar: #A88000;
  --ink-guardalead: #0B6E36; --ink-internos: #7433CC; --ink-forja: #CC5F00;
  --ink-farol: #1F2430;
  /* cor do produto neste app */
  --produto: var(--ink-farol);
  --produto-on: #FFFFFF;
  --sombra-card: 0 1px 2px rgba(20,21,46,.05), 0 8px 24px -14px rgba(20,21,46,.18);
  --sombra-alta: 0 4px 12px rgba(20,21,46,.07), 0 24px 60px -28px rgba(20,21,46,.30);
  color-scheme: light;
}

/* ── tema escuro (aplicação pontual) ───────────────────────────────── */
:root[data-theme="dark"] {
  --s-base: var(--bg); --s-card: var(--bg-elev); --s-raised: #12142F; --s-sunken: var(--bg-deep);
  --s-border: var(--glass-border); --s-border-strong: var(--glass-border-strong);
  --t-text: var(--m-text); --t-body: var(--m-mute); --t-mute: var(--m-mute); --t-dim: var(--m-dim);
  --ink-codice: var(--blue); --ink-trafego: var(--red); --ink-sonar: var(--gold);
  --ink-guardalead: var(--green); --ink-internos: var(--purple); --ink-forja: var(--orange);
  --ink-farol: #FFFFFF;
  --produto: #FFFFFF; --produto-on: #07071C;
  --sombra-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --sombra-alta: 0 10px 30px -10px rgba(0,0,0,.6), 0 40px 80px -30px rgba(0,0,0,.85);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; height: 100%; overflow: hidden; }
body {
  font-family: var(--font); color: var(--t-body); background: var(--s-base);
  line-height: 1.65; -webkit-font-smoothing: antialiased; height: 100%; overflow: hidden;
}
svg { display: block; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }

/* ── 10.3 · fundo espacial ─────────────────────────────────────────────
   No ESCURO: as 3 camadas do Manual (glows + grid + rede).
   No CLARO: só os glows, a ~1/3 da intensidade — grid de pontos e rede
   neural sobre fundo claro viram sujeira visual, não atmosfera. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 15% -5%, rgba(66,133,244,.055), transparent 60%),
    radial-gradient(ellipse 60% 45% at 90% 5%, rgba(122,55,219,.05), transparent 58%);
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 70% 50% at 15% -5%, rgba(66,133,244,.16), transparent 60%),
    radial-gradient(ellipse 60% 45% at 90% 5%, rgba(122,55,219,.16), transparent 58%),
    linear-gradient(180deg, var(--bg), var(--bg-deep));
}
body::after { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; }
:root[data-theme="dark"] body::after {
  background-image: radial-gradient(rgba(140,150,255,.05) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000, transparent 75%);
}

/* ── superfície padrão (glass no escuro, cartão sólido no claro) ───── */
.glass, .card {
  position: relative; background: var(--s-card); border: 1px solid var(--s-border);
  border-radius: var(--radius); box-shadow: var(--sombra-card);
}
:root[data-theme="dark"] .glass, :root[data-theme="dark"] .card {
  background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: hidden;
}
/* borda iluminada — só faz sentido sobre o escuro */
:root[data-theme="dark"] .glass::before, :root[data-theme="dark"] .card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(160deg, var(--glass-border-strong), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* ── 10.4 · eyebrow · grad-text · títulos ──────────────────────────── */
.eyebrow, .fx-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue-soft);
}
:root:not([data-theme="dark"]) .eyebrow,
:root:not([data-theme="dark"]) .fx-eyebrow { color: var(--ink-codice); }
.eyebrow::before, .fx-eyebrow::before {
  content: ''; width: 22px; height: 1px; flex-shrink: 0;
  background: linear-gradient(90deg, var(--purple-soft), transparent);
}
.grad-text {
  background: linear-gradient(100deg, var(--blue-soft), var(--purple-soft) 75%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
:root:not([data-theme="dark"]) .grad-text {
  background: linear-gradient(100deg, var(--ink-codice), var(--ink-internos) 75%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
h1, h2, h3, h4 { font-family: var(--font-slab); font-weight: 700; letter-spacing: -.01em; line-height: 1.08; color: var(--t-text); }

/* ── 10.5 · botões pill neon ───────────────────────────────────────────
   No escuro: neon do Manual (borda + glow sobre vidro).
   No claro: neon não aparece (glow sobre branco some) — mesma degradação
   que o Manual já prescreve para e-mail: sólido na cor do produto. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 14px 26px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: .98rem; border: 1px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 3px solid var(--produto); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .fx-ic { width: 18px; height: 18px; }

.btn--primary { background: var(--produto); color: var(--produto-on); border-color: transparent; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(20,21,46,.35); }
.btn--ghost { background: transparent; color: var(--t-text); border-color: var(--s-border-strong); }
.btn--ghost:hover { background: var(--s-sunken); border-color: var(--produto); transform: translateY(-2px); }
.btn--danger { background: transparent; color: var(--ink-trafego); border-color: color-mix(in srgb, var(--ink-trafego) 42%, transparent); }
.btn--danger:hover { background: color-mix(in srgb, var(--ink-trafego) 8%, transparent); border-color: var(--ink-trafego); }

/* neon do Manual — só no escuro, e o do Farol brilha mais que os outros */
:root[data-theme="dark"] .btn--primary {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.72); color: #FFFFFF;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 26px rgba(255,255,255,.30), inset 0 0 18px rgba(255,255,255,.10);
}
:root[data-theme="dark"] .btn--primary:hover {
  background: rgba(255,255,255,.2); box-shadow: 0 0 38px rgba(255,255,255,.48); transform: translateY(-2px);
}
:root[data-theme="dark"] .btn--ghost { background: var(--glass-strong); border-color: var(--glass-border-strong); color: var(--m-text); }
:root[data-theme="dark"] .btn--danger { color: #FF8088; border-color: rgba(255,75,84,.7); background: rgba(219,33,42,.12); }

/* ── shell ─────────────────────────────────────────────────────────── */
.app-shell { display: flex; height: 100dvh; overflow: hidden; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; padding: 20px 14px;
  display: flex; flex-direction: column; height: 100dvh;
  background: var(--s-card); border-right: 1px solid var(--s-border);
}
:root[data-theme="dark"] .sidebar { background: rgba(12,14,42,.72); backdrop-filter: blur(18px) saturate(140%); }
.sidebar__logo { padding: 2px 8px 4px; position: relative; }
.sidebar__logo img { height: 30px; width: auto; }
.brand-logo { display: block; }
.logo-light { display: none; }
:root:not([data-theme="dark"]) .logo-dark { display: none; }
:root:not([data-theme="dark"]) .logo-light { display: block; }
/* o facho: o glow do produto atrás da marca — mais forte que o dos outros */
.sidebar__logo::before {
  content: ''; position: absolute; left: -10%; top: -70%; width: 120%; height: 260%;
  pointer-events: none; opacity: 0;
}
:root[data-theme="dark"] .sidebar__logo::before { background: var(--glow-farol); opacity: .5; }

.sidebar__product {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--t-dim); padding: 0 8px 16px;
}
.sidebar__product::before { content: '// '; }
.nav { display: flex; flex-direction: column; gap: 1px; flex: 1; min-height: 0; }
/* SEM barra de rolagem na sidebar: com o teto de 8 setores a lista cabe.
   Se um dia não couber, o certo é reduzir setor — não rolar o painorama. */
.sidebar { overflow: hidden; }
.nav__item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 11px; min-height: 40px; border-radius: var(--radius-sm);
  color: var(--t-mute); font-size: 14px; font-weight: 500; text-align: left;
  border: none; background: none; cursor: pointer;
  transition: background var(--ease) .15s, color var(--ease) .15s;
}
.nav__item:hover { background: var(--s-sunken); color: var(--t-text); }
.nav__item.is-active { background: color-mix(in srgb, var(--produto) 10%, transparent); color: var(--t-text); font-weight: 700; }
.nav__item.is-active::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  background: var(--produto); border-radius: 0 3px 3px 0;
}
:root[data-theme="dark"] .nav__item.is-active { background: rgba(255,255,255,.10); }
:root[data-theme="dark"] .nav__item.is-active::before { box-shadow: 0 0 12px rgba(255,255,255,.8); }
.nav__item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav__num { font-family: var(--font-mono); font-size: 11px; color: var(--t-dim); font-variant-numeric: tabular-nums; }
.nav__sep { height: 1px; background: var(--s-border); margin: 10px 8px; }
/* a sidebar fica parada; quem rola é o centro */
.main { flex: 1; min-width: 0; height: 100dvh; overflow-y: auto; overflow-x: hidden; padding: 36px 40px; }
.main > .fx { max-width: var(--container); margin: 0 auto; }
.hamburger { display: none; }
@media (max-width: 1024px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .3s var(--ease); z-index: 60; }
  .sidebar.is-open { transform: translateX(0); }
  .hamburger {
    display: inline-flex; background: var(--s-card); border: 1px solid var(--s-border-strong);
    color: var(--t-text); border-radius: var(--radius-sm); padding: 10px; cursor: pointer; margin-bottom: 20px;
  }
  .main { padding: 24px 20px; }
}

/* ── 7.11 · "a prova" — toda métrica com legenda ───────────────────────
   Componente-assinatura da RRooster. Não é enfeite: é o que faz
   "sem caixa-preta" virar tela em vez de slogan. */
.kpi-strip { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.kpi {
  background: var(--s-card); border: 1px solid var(--s-border);
  border-left: 3px solid var(--c, var(--produto));
  border-radius: var(--radius-sm); padding: 16px 18px; box-shadow: var(--sombra-card);
}
:root[data-theme="dark"] .kpi { background: var(--glass); }
.kpi__label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t-dim);
  display: flex; align-items: center; gap: 6px;
}
.kpi__value { font-family: var(--font-slab); font-weight: 700; font-size: 26px; color: var(--t-text); margin-top: 6px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi__hint { font-size: 11.5px; color: var(--t-dim); margin-top: 4px; line-height: 1.4; }

/* ── ponte de nomes ───────────────────────────────────────────────────
   O `style.css` do Farol foi escrito sobre os tokens do Códice. Em vez
   de renomear 900 linhas (churn sem ganho visual), os nomes antigos
   apontam para os do Manual. Ao reescrever o style.css, usar os de cima. */
:root {
  --surface-base: var(--s-base);
  --surface: var(--s-card);
  --surface-raised: var(--s-raised);
  --surface-overlay: var(--s-sunken);
  --border: var(--s-border);
  --border-strong: var(--s-border-strong);
  --text: var(--t-text);
  --text-body: var(--t-body);
  --text-muted: var(--t-dim);
  --primary: var(--produto);          /* CTA = cor do PRODUTO (Farol), não azul do Códice */
  --accent: var(--ink-internos);
  --danger: var(--ink-trafego);
  --success: var(--ink-guardalead);
  --radius-sm: 12px;
  --dur-fast: 150ms; --dur-mid: 300ms; --ease-spring: var(--ease); --ease-out: var(--ease);
  --gap: 16px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --shadow-card: var(--sombra-card);
  --mono-rr: var(--font-mono);
  --slab: var(--font-slab);
  /* status do painel — rampa validada nos dois temas */
  --st-travada: #B07E00; --st-atrasada: #96121C;
}
:root[data-theme="dark"] { --st-travada: var(--gold); --st-atrasada: var(--red); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }