/* ============================================================================
   theme.css — Sistema de design do Painel CAP ("light glass premium")
   ----------------------------------------------------------------------------
   Carregado em toda página, DEPOIS do Tailwind CDN e do Font Awesome.
   Tema único, claro — sem alternador. Define:
   1) Tokens de cor/tipografia/raio via CSS custom properties.
   2) Componentes compartilhados (.glass, .field, .cta, .chip, .hairline...)
      — o mesmo vocabulário visual usado na tela de login, disponível em
      qualquer página.
   3) Uma camada de "adoção" que eleva as classes utilitárias do Tailwind que
      já existem em todo o site (bg-white, bg-gray-100, sombras, cantos
      arredondados, inputs, tabelas) para a linguagem visual nova — assim
      cada módulo ganha o novo visual sem precisar reescrever seu HTML/JS
      card a card.
   ========================================================================= */

/* ---------- 1) TOKENS ---------- */
:root {
  color-scheme: light;

  /* Fundo (mist gradient) */
  --bg-0: #F6F5FC;
  --bg-1: #EFECFA;
  --bg-2: #E6E1F7;

  /* Texto */
  --ink-0: #1C1730;
  --ink-1: #4C4768;
  --ink-2: #8B85A6;

  /* Linhas / bordas */
  --line: rgba(28, 23, 48, 0.09);
  --line-strong: rgba(28, 23, 48, 0.16);

  /* Acento — índigo/violeta profundo */
  --accent: #5B4FE0;
  --accent-strong: #4638C7;
  --accent-soft: rgba(91, 79, 224, 0.12);
  --accent-ring: rgba(91, 79, 224, 0.22);

  /* Superfícies de vidro (cartões, modais, menu — tudo branco translúcido) */
  --glass-fill: rgba(255, 255, 255, 0.62);
  --glass-fill-strong: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 24px 48px -22px rgba(45, 34, 112, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass-blur: blur(20px) saturate(150%);

  /* Rail (menu lateral) — branco/vidro, um degrau mais opaco que os cartões,
     pra se destacar do fundo nublado sem virar um bloco sólido. */
  --rail-bg: linear-gradient(180deg, #FFFFFF 0%, #FBFAFF 100%);
  --rail-fill: rgba(255, 255, 255, 0.74);
  --rail-line: rgba(28, 23, 48, 0.08);
  --rail-ink-0: var(--ink-0);
  --rail-ink-1: var(--ink-1);
  --rail-active-fill: var(--accent-soft);
  --rail-active-ring: var(--accent-ring);

  /* Placa escura fixa — só existe pra dar contraste à logomarca (que só
     existe em versão branca), independente do restante ser claro. */
  --logo-plate: linear-gradient(150deg, #2C2359 0%, #14102B 100%);
  --logo-plate-line: rgba(255, 255, 255, 0.10);

  /* Raio */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Tipografia */
  --font-display: 'Manrope', 'Inter', sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Textura de grade sutil (tela de login) */
  --grid-line: rgba(28, 23, 48, 0.045);
}

/* ---------- 2) BASE ---------- */
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--ink-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.font-display { font-family: var(--font-display); letter-spacing: -0.02em; }
.font-mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Fundo "nublado": aplica-se a qualquer body que hoje usa bg-gray-50/100
   (praticamente toda página do sistema) sem precisar editar cada HTML. */
body[class*="bg-gray-"] {
  background:
    radial-gradient(1100px 620px at 14% -8%, var(--bg-2) 0%, transparent 60%),
    radial-gradient(900px 560px at 100% 0%, var(--accent-soft) 0%, transparent 55%),
    var(--bg-0) !important;
  background-attachment: fixed, fixed, fixed;
}

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

/* Scrollbar fina, discreta */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-2); background-clip: content-box; }

/* Foco visível e acessível, consistente em toda a interface */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
  border-radius: var(--r-sm);
}

/* ---------- 3) COMPONENTES DE VIDRO ---------- */
.glass {
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.glass-strong {
  background: var(--glass-fill-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.hairline {
  background: linear-gradient(90deg, transparent 0%, var(--line-strong) 20%, var(--line-strong) 80%, transparent 100%);
  height: 1px;
}
.field {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  color: var(--ink-0);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.field::placeholder { color: var(--ink-2); }

.cta {
  background: var(--accent);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  box-shadow: 0 10px 24px -10px var(--accent-ring);
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.cta:hover:not(:disabled) { background: var(--accent-strong); box-shadow: 0 14px 30px -10px var(--accent-ring); }
.cta:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.cta:disabled { opacity: .6; cursor: not-allowed; }

.cta-outline {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-0);
  transition: background .15s ease, border-color .15s ease;
}
.cta-outline:hover { background: var(--accent-soft); border-color: var(--accent); }

.chip { transition: background .15s, border-color .15s, color .15s; }
.chip:hover { background: var(--accent-soft); border-color: var(--accent-ring); }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.rise-1 { animation: rise .6s .05s both cubic-bezier(.2,.7,.3,1); }
.rise-2 { animation: rise .6s .18s both cubic-bezier(.2,.7,.3,1); }
.rise-3 { animation: rise .6s .32s both cubic-bezier(.2,.7,.3,1); }
.rise-4 { animation: rise .6s .46s both cubic-bezier(.2,.7,.3,1); }
.rise-5 { animation: rise .6s .60s both cubic-bezier(.2,.7,.3,1); }

@keyframes blink { 0%,100% { opacity:.5; box-shadow:0 0 0 0 rgba(148,163,184,0);} 50%{opacity:1; box-shadow:0 0 0 4px rgba(148,163,184,.12);} }
.blink { animation: blink 2.6s ease-in-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation: spin .7s linear infinite; display:inline-block; }

@media (prefers-reduced-motion: reduce) {
  .blink, .spinner, [class*="rise-"] { animation: none !important; }
}

/* ---------- 4) RAIL / CABEÇALHO (usados pelo layout.js) ---------- */
.app-rail {
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-line);
  box-shadow: 6px 0 28px -12px rgba(45, 34, 112, 0.10);
}
.app-rail-fill {
  background: var(--rail-fill);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.app-logo-plate {
  background: var(--logo-plate);
  border: 1px solid var(--logo-plate-line);
  box-shadow: 0 6px 16px -6px rgba(20, 16, 43, 0.45);
}
.nav-link {
  color: var(--rail-ink-1);
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-link:hover { background: rgba(28, 23, 48, 0.045); color: var(--rail-ink-0); }
.nav-link.is-active {
  background: var(--rail-active-fill);
  color: var(--accent-strong);
  border-color: var(--rail-active-ring);
  box-shadow: 0 0 0 1px var(--rail-active-ring), 0 8px 18px -12px var(--accent-ring);
}
.nav-link.is-active .nav-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--rail-active-ring); }

.app-header {
  background: var(--glass-fill-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--line);
}

/* ---------- 5) ADOÇÃO DAS CLASSES TAILWIND JÁ USADAS NO SITE ---------- */
/* Cartões / modais / containers que hoje usam bg-white viram vidro. */
.bg-white {
  background: var(--glass-fill-strong) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
  color: var(--ink-0);
}
/* Cabeçalhos de tabela e faixas neutras (bg-gray-50) ganham leve tom de vidro
   também, um degrau abaixo do bg-white, sem depender de blur (fica melhor em
   áreas pequenas como <thead>). */
.bg-gray-50 { background-color: rgba(28, 23, 48, 0.035) !important; }

.border-gray-50, .border-gray-100, .border-gray-200 { border-color: var(--line) !important; }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line) !important; }
.text-gray-800, .text-gray-900 { color: var(--ink-0) !important; }
.text-gray-700 { color: var(--ink-1) !important; }
.text-gray-500, .text-gray-600 { color: var(--ink-2) !important; }
.text-gray-400 { color: var(--ink-2) !important; opacity: .85; }

/* Sombras — suaves, com leve tingimento violeta (ambient light) */
.shadow-sm { box-shadow: 0 1px 2px rgba(45,34,112,.05), 0 6px 16px -10px rgba(45,34,112,.10) !important; }
.shadow, .shadow-md { box-shadow: 0 2px 6px rgba(45,34,112,.06), 0 14px 30px -14px rgba(45,34,112,.18) !important; }
.shadow-lg { box-shadow: 0 8px 20px -6px rgba(45,34,112,.16), 0 24px 48px -20px rgba(45,34,112,.22) !important; }
.shadow-xl, .shadow-2xl { box-shadow: 0 16px 32px -10px rgba(45,34,112,.22), 0 34px 64px -24px rgba(45,34,112,.30) !important; }

/* Cantos um pouco mais generosos — mais "premium software", menos "planilha" */
.rounded { border-radius: var(--r-sm) !important; }
.rounded-lg { border-radius: var(--r-md) !important; }
.rounded-xl { border-radius: var(--r-lg) !important; }
.rounded-2xl { border-radius: var(--r-xl) !important; }

/* Modal overlay: preto chapado vira véu escuro com leve blur (sempre escuro,
   independente do tema — é o padrão de qualquer overlay de modal) */
.bg-black.bg-opacity-50, .bg-black\/50 {
  background: rgba(17, 12, 38, 0.45) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Campos de formulário — inputs, selects e textareas ganham o mesmo vidro
   discreto usado no login, em qualquer módulo, sem precisar tocar no HTML. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], input[type="tel"], input[type="url"],
select, textarea {
  background: var(--glass-fill);
  border-color: var(--line-strong) !important;
  color: var(--ink-0);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="date"]:focus, input[type="search"]:focus,
input[type="tel"]:focus, input[type="url"]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-ring);
}
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: .8; }

/* Tabelas — cabeçalho com tipografia mono/rastreada, linhas com hover sutil */
table thead th {
  font-family: var(--font-mono) !important;
  letter-spacing: .06em;
  color: var(--ink-2) !important;
}
table tbody tr { transition: background .12s; }
table tbody tr:hover { background: var(--accent-soft) !important; }

/* Botões — cantos e transição consistentes (a cor semântica de cada um
   permanece igual: módulo, perigo, sucesso etc.) */
button, .btn { transition: transform .1s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease; }
button:active:not(:disabled), .btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }

/* KPIs / números de destaque — assinatura mono do sistema */
.stat-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }