/* ══════════════════════════════════════════════════════════
   BASE.CSS — Estilos globais, reset e variáveis do sistema
   ══════════════════════════════════════════════════════════ */

/* ── Reset básico ── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--page-bg);
  color: var(--text-color);
  transition: background 0.3s, color 0.3s;
}

/* ── Variáveis globais — Tema claro (padrão) ── */
:root {
  



  --border:       #e5e7eb;
  --field-bg:     #ffffff;
  --field-border: #d1d5db;
  --text:         #1e1b4b;
  --danger:       #b91c1c;

  --badge-bg:     #ede9fe;
  --badge-color:  #5b21b6;

  --ativo-bg:     #dcfce7;
  --ativo-color:  #15803d;
  --ativo-border: #86efac;

  /* Página */
  --page-bg: #f8fafc;
  --text-color: #0f172a;
  
  /* Chip (contexto de usuário/escola) */
  --chip-bg: #f1f5f9;
  --chip-border: #e2e8f0;
  
  /* Brand — Essas variáveis são sobrescritas pelo theme-colors.js */
  --brand: #7c3aed;
  --brand-faded: rgba(124, 58, 237, 0.12);
  --brand-border: #c4b5fd;
  --brand-text: #7c3aed;

--primary: var(--brand);
  --primary-faded: var(--brand-faded);
  --primary-border: var(--brand-border);
  --primary-text: var(--brand-text);
  
  /* ✅ ADICIONAR: --bg era usado em pesquisa.css mas nunca definido */
  --bg: var(--field-bg);

  --card-bg:      #ffffff;
  --card-border:  var(--brand-border);

  --field-bg:     #ffffff;
  --field-border: var(--brand-border);

  --shadow:       0 4px 20px rgba(0,0,0,0.06);
}

/* ── Variáveis globais — Tema escuro ── */
html[data-theme="dark"] {
  --page-bg: #0f1829;
  --text-color: #e2e8f0;
  
  --chip-bg: #1a2540;
  --chip-border: #2a3a5c;
  
  /* Brand dark — Sobrescritas pelo theme-colors.js */
  --brand-d: #a78bfa;
  --brand-faded-d: rgba(124, 58, 237, 0.28);
  --brand-border-d: #4c1d95;
  --brand-text-d: #c4b5fd;

  --border:       #1e2540;
  --field-bg:     #0f1829;
  --field-border: #2a3a5c;
  --text:         #e2e8f0;
  --danger:       #fca5a5;

  --badge-bg:     rgba(124,58,237,0.28);
  --badge-color:  #c4b5fd;

  --ativo-bg:     rgba(21,128,61,0.18);
  --ativo-color:  #86efac;
  --ativo-border: rgba(134,239,172,0.35);
--primary: var(--brand-d);
  --primary-faded: var(--brand-faded-d);
  --primary-border: var(--brand-border-d);
  --primary-text: var(--brand-text-d);

  --bg: var(--field-bg);

  --card-bg:      #131c2e;
  --card-border:  #2a3a5c;
  --field-bg:     #0a1426;
  --field-border: #1e2540;
  --shadow:       0 4px 24px rgba(0,0,0,0.4);
}


/* ── Links básicos ── */
a {
  color: var(--brand);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--brand-text);
}

html[data-theme="dark"] a {
  color: var(--brand-d);
}

html[data-theme="dark"] a:hover {
  color: var(--brand-text-d);
}

/* ── Botões básicos ── */
button {
  font-family: inherit;
  cursor: pointer;
}

button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}


/* ── Header placeholder ──────────────────────────────────────────────────────
   display:contents faz o placeholder "desaparecer" do layout,
   permitindo que o .app-header filho use position:sticky normalmente.
   ─────────────────────────────────────────────────────────────────────────── */
#header-placeholder {
  display: contents;
}

/* ── Offset de scroll para âncoras ──────────────────────────────────────────
   Compensa o header fixo (72px) + barra gradiente (2px) ao navegar por âncoras.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --header-height: 74px; /* 72px header + 2px .l-bar */
}

html {
  scroll-padding-top: var(--header-height);
}