/* ══════════════════════════════════════════════════════════════════
   AURORA GLASS — Design System do Sistema de Escala (SaaS)
   Glassmorphism + aurora + claro/escuro. Tema (acento) por empresa via
   --primary / --accent (injetados pelo tenant.js). Modo via [data-mode].
   ══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  /* Acento padrão do produto (cyan + violeta). O tenant.js sobrescreve por empresa. */
  --primary:#22d3ee;
  --accent:#7c5cff;
  --btn-ink:#04111a;
  --radius:18px;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ── TOKENS DE MODO ───────────────────────────────────────────────── */
:root,
[data-mode="dark"]{
  --bg:#070b16; --bg-2:#0b1120;
  --ink:#eaf0ff; --ink-dim:#9fb0d0; --ink-faint:#5b6b8c;
  --glass:rgba(255,255,255,.055);
  --glass-strong:rgba(255,255,255,.09);
  --hair:rgba(255,255,255,.12);
  --hair-bright:rgba(255,255,255,.22);
  --inp-bg:rgba(255,255,255,.04);
  --surface-card:rgba(255,255,255,.055);
  --surface-card-2:rgba(255,255,255,.085);
  --track:rgba(255,255,255,.08);
  --tab-hover:rgba(255,255,255,.05);
  --card-shadow:0 24px 60px -24px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
  --aurora-op:.55; --grain-op:.04; --hi-op:.6;
  --btn-ink:#04111a;
}
[data-mode="light"]{
  --bg:#e9edf8; --bg-2:#f3f6fd;
  --ink:#0e1626; --ink-dim:#48526b; --ink-faint:#8b94ad;
  --glass:rgba(255,255,255,.55);
  --glass-strong:rgba(255,255,255,.72);
  --hair:rgba(255,255,255,.85);
  --hair-bright:rgba(255,255,255,1);
  --inp-bg:rgba(255,255,255,.65);
  --surface-card:rgba(255,255,255,.72);
  --surface-card-2:rgba(255,255,255,.88);
  --track:rgba(20,30,60,.1);
  --tab-hover:rgba(20,30,60,.05);
  --card-shadow:0 24px 50px -26px rgba(30,40,90,.30), inset 0 1px 0 rgba(255,255,255,.9);
  --aurora-op:.45; --grain-op:.03; --hi-op:.9;
  --btn-ink:#ffffff;
}
/* Antes do JS rodar, respeita a preferência do SO */
@media (prefers-color-scheme: light){
  :root:not([data-mode]){
    --bg:#e9edf8; --bg-2:#f3f6fd;
    --ink:#0e1626; --ink-dim:#48526b; --ink-faint:#8b94ad;
    --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.72);
    --hair:rgba(255,255,255,.85); --hair-bright:rgba(255,255,255,1);
    --inp-bg:rgba(255,255,255,.65); --surface-card:rgba(255,255,255,.72); --surface-card-2:rgba(255,255,255,.88);
    --track:rgba(20,30,60,.1); --tab-hover:rgba(20,30,60,.05);
    --card-shadow:0 24px 50px -26px rgba(30,40,90,.30), inset 0 1px 0 rgba(255,255,255,.9);
    --aurora-op:.45; --grain-op:.03; --hi-op:.9; --btn-ink:#ffffff;
  }
}

/* ── BASE ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  font-family:var(--font-body);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;min-height:100vh;
  transition:background .4s,color .4s;
}

/* ── AURORA + GRÃO ────────────────────────────────────────────────── */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora::before,.aurora::after,.aurora .blob{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--aurora-op)}
.aurora::before{width:60vw;height:60vw;top:-20vw;left:-10vw;background:radial-gradient(circle,var(--primary),transparent 65%)}
.aurora::after{width:55vw;height:55vw;bottom:-25vw;right:-12vw;background:radial-gradient(circle,var(--accent),transparent 65%)}
.aurora .blob{width:38vw;height:38vw;top:28%;left:46%;opacity:calc(var(--aurora-op) * .55);background:radial-gradient(circle,var(--primary),transparent 60%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.app{position:relative;z-index:2}

/* ── FOCO ──────────────────────────────────────────────────────────
   Sem contorno padrão (aquele traço) ao clicar com o mouse; anel
   discreto e on-brand apenas na navegação por teclado (acessibilidade). */
:focus{outline:none}
:focus-visible{outline:2px solid color-mix(in srgb,var(--ink) 45%,transparent);outline-offset:2px;border-radius:6px}

/* ── VIDRO ────────────────────────────────────────────────────────── */
.glass{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--card-shadow);position:relative;
}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(255,255,255,.5),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;opacity:var(--hi-op)}

/* ── TIPOGRAFIA ───────────────────────────────────────────────────── */
.wordmark{font-family:var(--font-display);font-weight:700;letter-spacing:-.5px}
.grad-text{background:linear-gradient(120deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--primary)}
.mono{font-family:var(--font-mono)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.1}
.hero{font-family:var(--font-display);font-weight:700;letter-spacing:-1px;line-height:1.06}
.lead{color:var(--ink-dim);line-height:1.7}

/* ── MARK / LOGO ──────────────────────────────────────────────────── */
.mark{width:40px;height:40px;border-radius:12px;position:relative;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 0 24px -2px var(--primary);
  display:flex;align-items:center;justify-content:center}
.mark::after{content:"";position:absolute;inset:1.5px;border-radius:10px;background:var(--bg-2);opacity:.5}
.mark svg{position:relative;z-index:1}

/* ── FORM ─────────────────────────────────────────────────────────── */
.field{margin-bottom:16px}
.field>label{display:block;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
.inp{display:flex;align-items:center;gap:10px;background:var(--inp-bg);border:1px solid var(--hair);border-radius:12px;padding:13px 14px;transition:.18s}
.inp:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}
.inp>svg{flex-shrink:0;opacity:.5}
.inp>input,.inp>select{flex:1;background:none;border:none;outline:none;color:var(--ink);font-family:inherit;font-size:15px;min-width:0}
.inp>input::placeholder{color:var(--ink-faint)}
/* Lista nativa do <select>: força fundo branco e texto escuro, legível em
   qualquer tema (no modo escuro o popup do sistema é branco e o texto herdava
   a cor clara, ficando quase invisível). */
/* A lista nativa do <select> segue o tema do projeto: no modo escuro o
   menu abre escuro (texto claro), no claro abre claro. Assim fica
   consistente em todo o sistema e nada some no fundo escuro. */
select{color-scheme:light}
[data-mode="dark"] select{color-scheme:dark}
/* input "cru" (sem ícone), largura total */
.input{width:100%;background:var(--inp-bg);border:1px solid var(--hair);border-radius:12px;padding:13px 14px;color:var(--ink);font-family:inherit;font-size:15px;outline:none;transition:.18s}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}
.input::placeholder{color:var(--ink-faint)}

/* ── BOTÕES (sem setas) ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;cursor:pointer;border-radius:12px;padding:15px;
  font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--btn-ink);
  background:linear-gradient(120deg,var(--primary),var(--accent));transition:.18s}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--hair);background:var(--glass);color:var(--ink);cursor:pointer;border-radius:12px;padding:14px 18px;font-family:var(--font-display);font-weight:600;font-size:15px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:.18s}
.btn-ghost:hover{border-color:var(--hair-bright);background:var(--glass-strong)}
.btn-sm{padding:9px 14px;font-size:13px;width:auto}

a{color:inherit;text-decoration:none}
.link{color:var(--primary);font-weight:600;cursor:pointer}
.link:hover{text-decoration:underline}
.muted-link{color:var(--ink-dim)}
.muted-link b{color:var(--primary)}

/* ── PILLS / BARRAS / STATS ───────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:5px 11px;border-radius:20px;
  background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 30%,transparent)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;box-shadow:0 0 8px currentColor}
.bar{height:5px;border-radius:3px;background:var(--track);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--primary),var(--accent));box-shadow:0 0 12px var(--primary)}

/* ── TABS (header admin) ──────────────────────────────────────────── */
.tabs{display:flex;gap:6px;padding:7px}
.tab{font-size:12px;font-weight:600;padding:9px 14px;border-radius:11px;color:var(--ink-dim);cursor:pointer;display:flex;align-items:center;gap:7px;transition:.15s;white-space:nowrap;border:none;background:none;font-family:inherit}
.tab:hover{color:var(--ink);background:var(--tab-hover)}
.tab.act{color:var(--btn-ink);background:linear-gradient(120deg,var(--primary),var(--accent))}

/* ── MODE TOGGLE + SWATCH ─────────────────────────────────────────── */
.mode-toggle{display:inline-flex;align-items:center;gap:6px;background:var(--glass);border:1px solid var(--hair);border-radius:30px;padding:5px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mode-btn{border:none;background:none;cursor:pointer;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-dim);transition:.18s}
/* Ícone do toggle ativo: o fundo (degradê cyan/roxo) é sempre claro, então o
   ícone fica escuro nos dois modos para ter contraste. No claro o --btn-ink era
   branco e o ícone sumia. */
.mode-btn.act{background:linear-gradient(120deg,var(--primary),var(--accent));color:#04111a}

/* ── ÍCONES ───────────────────────────────────────────────────────── */
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── UTIL ─────────────────────────────────────────────────────────── */
.container{max-width:1080px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}