/* ============================================================
   ChatBuilder — Visão Futura · Design tokens
   Conceito: "central de comando noturna" — operação 24h.
   Dark-first, único e assumido. O ACENTO é da VERTICAL:
   trocar de vertical re-acende o neon da interface inteira.
   ============================================================ */

:root {
  /* Superfícies (frias, azuladas — noite) */
  --bg: #070b14;
  --s1: #0d1220;          /* cards */
  --s2: #131a2b;          /* cards elevados / chart surface */
  --s3: #1a2338;          /* hover / inset */
  --line: rgba(148, 163, 199, 0.14);
  --line-strong: rgba(148, 163, 199, 0.26);

  /* Tinta */
  --ink: #e8edf7;
  --ink-2: #93a0b8;
  --ink-3: #5c6a86;

  /* Acento da vertical (default: motel = âmbar de letreiro).
     Reescrito em runtime pelo seletor de vertical. */
  --accent: #f5a623;
  --accent-ink: #14100a;          /* texto sobre o acento */
  --accent-soft: rgba(245, 166, 35, 0.12);
  --accent-glow: rgba(245, 166, 35, 0.35);

  /* Verde WhatsApp — SEMÂNTICO, reservado ao bot/canal. Nunca é série de gráfico. */
  --wa: #25d366;
  --wa-soft: rgba(37, 211, 102, 0.12);

  /* Status (reservados — nunca viram série) */
  --ok: #2fbf5f;
  --ok-soft: rgba(47, 191, 95, 0.13);
  --warn: #fab219;
  --warn-soft: rgba(250, 178, 25, 0.13);
  --serious: #ec835a;
  --serious-soft: rgba(236, 131, 90, 0.14);
  --crit: #ef5350;
  --crit-soft: rgba(239, 83, 80, 0.14);
  --info: #58a6ff;
  --info-soft: rgba(88, 166, 255, 0.13);

  /* Séries categóricas (validadas p/ dark, ordem fixa — nunca ciclar) */
  --c1: #3987e5;
  --c2: #199e70;
  --c3: #c98500;
  --c4: #9085e9;
  --c5: #e66767;
  --c6: #d55181;

  /* Gráfico: cromo */
  --grid-line: rgba(148, 163, 199, 0.10);
  --axis: rgba(148, 163, 199, 0.28);

  /* Tipografia — sans para prosa, MONO para números/IDs/rótulos (voz de console) */
  --sans: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Geometria */
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-xs: 5px;
  --pad: 18px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Acentos por vertical — o "neon" que troca */
[data-vertical="motel"]   { --accent:#f5a623; --accent-ink:#14100a; --accent-soft:rgba(245,166,35,.12); --accent-glow:rgba(245,166,35,.35); }
[data-vertical="clinica"] { --accent:#2dd4bf; --accent-ink:#04211d; --accent-soft:rgba(45,212,191,.12); --accent-glow:rgba(45,212,191,.35); }
[data-vertical="salao"]   { --accent:#a78bfa; --accent-ink:#150f2e; --accent-soft:rgba(167,139,250,.13); --accent-glow:rgba(167,139,250,.35); }
[data-vertical="quadra"]  { --accent:#a3e635; --accent-ink:#101803; --accent-soft:rgba(163,230,53,.12);  --accent-glow:rgba(163,230,53,.32); }
[data-vertical="pousada"] { --accent:#60a5fa; --accent-ink:#081527; --accent-soft:rgba(96,165,250,.12);  --accent-glow:rgba(96,165,250,.35); }

/* Área ADMIN: neon fixo da plataforma (índigo frio), independente de vertical */
[data-area="admin"] { --accent:#818cf8; --accent-ink:#10122b; --accent-soft:rgba(129,140,248,.13); --accent-glow:rgba(129,140,248,.35); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}

/* Fundo ambiente: dois brilhos discretos, cor do acento (o letreiro à distância) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 340px at 85% -5%, var(--accent-soft), transparent 70%),
    radial-gradient(560px 300px at -10% 100%, rgba(88, 166, 255, 0.06), transparent 70%);
  transition: background 0.5s ease;
}

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}