/* ══════════════════════════════════════════════════════════
   base.css — Reset, design tokens (variables), tipografía
   Capa 1 de 5. Define el sistema de diseño y los temas.
   ══════════════════════════════════════════════════════════ */

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
svg { display: block; }
[hidden] { display: none !important; }

/* ---------- Tokens: tema CLARO (default) ---------- */
:root {
  /* Escala de grises (usada también inline en el HTML) */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Superficies y texto */
  --bg:          var(--gray-50);
  --surface:     #ffffff;
  --surface-2:   var(--gray-100);
  --border:      var(--gray-200);
  --border-strong: var(--gray-300);
  --text:        var(--gray-900);
  --text-muted:  var(--gray-500);

  /* Estados */
  --danger:        #dc2626;
  --danger-weak:   #fee2e2;
  --success:       #16a34a;
  --success-weak:  #dcfce7;
  --warning:       #d97706;
  --warning-weak:  #fef3c7;

  /* Acento por defecto (lo sobreescribe el data-org) */
  --accent:        #0ea5e9;
  --accent-strong: #0284c7;
  --accent-weak:   #e0f2fe;
  --accent-contrast: #ffffff;

  /* Layout */
  --topbar-h:     56px;
  --sidebar-w:    240px;
  --radius:       8px;
  --radius-sm:    6px;
  --radius-lg:    12px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow:    0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .16);

  --transition: 150ms ease;
}

/* ---------- Tokens: tema OSCURO ---------- */
[data-theme="dark"] {
  --bg:          #0b1120;
  --surface:     #111827;
  --surface-2:   #1a2335;
  --border:      #273245;
  --border-strong: #374151;
  --text:        #e5e7eb;
  --text-muted:  #94a3b8;

  --gray-50:  #1a2335;
  --gray-100: #1f2a3d;
  --gray-200: #273245;
  --gray-300: #374151;
  --gray-400: #6b7280;
  --gray-500: #9ca3af;
  --gray-600: #cbd5e1;
  --gray-700: #e2e8f0;
  --gray-800: #f1f5f9;
  --gray-900: #f8fafc;

  --danger-weak:  #3b1718;
  --success-weak: #14321f;
  --warning-weak: #3a2c10;
  --accent-weak:  #0c2a3a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow:    0 4px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

/* ---------- Acento por organización ---------- */
/* SEMA — verde (medio ambiente / cabildo municipal) */
[data-org="sema"] {
  --accent:        #059669;
  --accent-strong: #047857;
  --accent-weak:   #d1fae5;
  --accent-contrast: #ffffff;
}
[data-theme="dark"][data-org="sema"] { --accent-weak: #0c2f24; }

/* SEEGRO — índigo (congreso del estado) */
[data-org="seegro"] {
  --accent:        #4f46e5;
  --accent-strong: #4338ca;
  --accent-weak:   #e0e7ff;
  --accent-contrast: #ffffff;
}
[data-theme="dark"][data-org="seegro"] { --accent-weak: #1e1b4b; }

/* ---------- Tipografía utilitaria ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; }
.page-title { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.text-muted { color: var(--text-muted); }

/* ---------- Focus visible accesible ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- Scrollbar discreta ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }