/* =====================================================================
   base.css — Variables de diseño, reset ligero y tipografía.
   Es la base de toda la app. Los colores de marca (--color-primario, etc.)
   los sobrescribe el layout con los valores de la tabla `branding`.
   ===================================================================== */

:root {
  /* Marca (se sobrescriben desde Branding) */
  --color-primario: #1E3A8A;
  --color-secundario: #1D4ED8;
  --color-acento: #F59E0B;

  /* Neutros (paleta "slate" que usa la app actual) */
  --gris-50: #f8fafc;  --gris-100: #f1f5f9; --gris-200: #e2e8f0; --gris-300: #cbd5e1;
  --gris-400: #94a3b8; --gris-500: #64748b; --gris-600: #475569; --gris-700: #334155;
  --gris-800: #1e293b; --gris-900: #0f172a;

  /* Semánticos */
  --verde: #16a34a; --verde-suave: #dcfce7;
  --rojo: #dc2626;  --rojo-suave: #fee2e2;
  --ambar: #d97706; --ambar-suave: #fef3c7;
  --azul: #2563eb;  --azul-suave: #dbeafe;
  --morado: #7c3aed; --morado-suave: #ede9fe;
  --naranja: #ea580c; --naranja-suave: #ffedd5;

  /* Superficies y texto */
  --fondo: #f6f8fb;
  --superficie: #ffffff;
  --texto: var(--gris-900);
  --texto-suave: var(--gris-500);
  --borde: var(--gris-200);

  /* Forma y sombra */
  --radio: 12px;
  --radio-chico: 8px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06);
  --sombra-fuerte: 0 10px 40px rgba(15, 23, 42, .18);

  /* Tipografía y espaciado */
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tam-base: 14px;
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px;

  --sidebar-ancho: 260px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--tam-base);
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
}
h1, h2, h3, h4 { margin: 0 0 var(--esp-2); line-height: 1.25; color: var(--gris-900); }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 600; }
p { margin: 0 0 var(--esp-3); }
a { color: var(--color-secundario); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: inline-block; vertical-align: middle; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding-left: 20px; }
table { border-collapse: collapse; width: 100%; }

.icono { width: 20px; height: 20px; flex-shrink: 0; }
.texto-suave { color: var(--texto-suave); }
.texto-centro { text-align: center; }
.oculto { display: none !important; }
.lista-simple { list-style: none; padding: 0; margin: 0 0 var(--esp-3); }
.lista-simple li { padding: var(--esp-1) 0; border-bottom: 1px solid var(--gris-100); }

/* El atributo hidden debe ganar a cualquier display de clase (.campo es flex, etc.) */
[hidden] { display: none !important; }