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

:root {
  /* ── PALETA ───────────────────────────────────────────────────────────
     Todos los colores de la app salen de aquí. En las demás hojas de estilo no se escriben
     colores a mano (#rrggbb): se usa var(--nombre). Así todo combina y un cambio se hace en un lugar.

     1) MARCA. Los tres colores vienen de Catálogos → Branding (el layout los sobrescribe). */
  --color-primario: #1E3A8A;
  --color-secundario: #1D4ED8;
  --color-acento: #F59E0B;
  /* Texto que va ENCIMA de un fondo de marca (encabezados con degradado, botón primario, menú activo).
     El layout lo calcula según qué tan claros u oscuros son los colores de Branding: blanco o casi negro. */
  --sobre-marca: #ffffff;
  --degradado-marca: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
  /* Tintes claros de la marca para fondos y bordes suaves (se recalculan solos si cambia Branding) */
  --marca-tenue: color-mix(in srgb, var(--color-primario) 5%, #fff);
  --marca-suave: color-mix(in srgb, var(--color-primario) 11%, #fff);
  --marca-borde: color-mix(in srgb, var(--color-primario) 24%, #fff);

  /* 2) NEUTROS (grises azulados). Texto, bordes y fondos. */
  --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;

  /* 3) TONOS. Cada tono tiene los mismos 5 pasos, siempre con el mismo uso:
        --tono          color pleno: íconos, puntos, botones, bordes de acento
        --tono-texto    texto sobre el fondo suave del mismo tono (pasa contraste)
        --tono-suave    fondo de etiquetas e íconos
        --tono-borde    borde de etiquetas y tarjetas
        --tono-tenue    fondo muy claro de paneles y filas
     Significado fijo: azul = información / nuevo · índigo = asignado · ámbar = en curso / atención ·
     amarillo = prioridad media · naranja = espera de alguien / prioridad alta · verde = bien / terminado · rojo = error / urgente / rechazo ·
     morado = autorización · turquesa = almacén / surtido · rosa = cancelado. */
  --azul: #2563eb;     --azul-texto: #1d4ed8;     --azul-suave: #dbeafe;     --azul-borde: #bfdbfe;     --azul-tenue: #eff6ff;
  --indigo: #4f46e5;   --indigo-texto: #4338ca;   --indigo-suave: #e0e7ff;   --indigo-borde: #c7d2fe;   --indigo-tenue: #eef2ff;
  --morado: #7c3aed;   --morado-texto: #6d28d9;   --morado-suave: #ede9fe;   --morado-borde: #ddd6fe;   --morado-tenue: #f5f3ff;
  --verde: #16a34a;    --verde-texto: #15803d;    --verde-suave: #dcfce7;    --verde-borde: #bbf7d0;    --verde-tenue: #f0fdf4;
  --turquesa: #0d9488; --turquesa-texto: #0f766e; --turquesa-suave: #ccfbf1; --turquesa-borde: #99f6e4; --turquesa-tenue: #f0fdfa;
  --ambar: #d97706;    --ambar-texto: #b45309;    --ambar-suave: #fef3c7;    --ambar-borde: #fde68a;    --ambar-tenue: #fffbeb;
  --amarillo: #ca8a04; --amarillo-texto: #a16207; --amarillo-suave: #fef9c3; --amarillo-borde: #fde047; --amarillo-tenue: #fefce8;
  --naranja: #ea580c;  --naranja-texto: #c2410c;  --naranja-suave: #ffedd5;  --naranja-borde: #fed7aa;  --naranja-tenue: #fff7ed;
  --rojo: #dc2626;     --rojo-texto: #b91c1c;     --rojo-suave: #fee2e2;     --rojo-borde: #fecaca;     --rojo-tenue: #fef2f2;
  --rosa: #db2777;     --rosa-texto: #be185d;     --rosa-suave: #fce7f3;     --rosa-borde: #fbcfe8;     --rosa-tenue: #fdf2f8;

  /* 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);
}
/* Los títulos heredan el color de su contenedor (antes tenían uno fijo y se perdían sobre los fondos de marca) */
h1, h2, h3, h4 { margin: 0 0 var(--esp-2); line-height: 1.25; color: inherit; }
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-ambar { color: var(--ambar-texto); }
.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; }