/* =============================================================================
   Sistema Sterling — variables de diseño
   =============================================================================
   Un único lugar donde viven los colores, tamaños y espaciados. Cambiar el
   aspecto del sistema es cambiar este archivo, no buscar valores sueltos por
   todas las hojas de estilo.

   La paleta prioriza la lectura rápida de tablas con muchos números: fondo
   claro, texto de alto contraste y color reservado para los estados.
   ========================================================================== */

:root {
  /* --- Superficies ------------------------------------------------------ */
  --fondo: #f4f6f9;
  --superficie: #ffffff;
  --superficie-suave: #f8fafc;
  --superficie-hover: #eef2f7;

  /* --- Texto ------------------------------------------------------------ */
  --texto: #16202e;
  --texto-suave: #55637a;
  --texto-tenue: #8593a8;
  --texto-invertido: #ffffff;

  /* --- Bordes ----------------------------------------------------------- */
  --borde: #dde3ec;
  --borde-fuerte: #c3ccda;

  /* --- Marca ------------------------------------------------------------ */
  /* Azules de la interfaz: botones, enlaces y estados. No son los colores del
     logo —el azul #313494 y el rojo #DD372B viven dentro de los SVG de
     app/static/brand y no se recolorean desde el CSS—; el rojo de la marca en
     particular queda reservado a la regla del logo y no se usa en la UI. */
  --marca: #1f4e79;
  --marca-oscura: #16385a;
  --marca-clara: #e8f0f8;
  --marca-acento: #2b74ad;
  /* "Sistema de administración", la línea bajo el logo sobre fondo oscuro. */
  --marca-subtitulo: #93a7c0;

  /* --- Estados ---------------------------------------------------------- */
  --exito: #1a7f4b;
  --exito-fondo: #e6f5ed;
  --alerta: #a86412;
  --alerta-fondo: #fdf2e0;
  --peligro: #b3261e;
  --peligro-fondo: #fdecea;
  --info: #1f5f9e;
  --info-fondo: #e8f1fa;
  --neutro: #55637a;
  --neutro-fondo: #eef1f6;

  /* --- Barra lateral ---------------------------------------------------- */
  --lateral-fondo: #14263c;
  --lateral-fondo-hover: #1d3654;
  --lateral-activo: #2b74ad;
  --lateral-texto: #c3d2e3;
  --lateral-texto-activo: #ffffff;
  --lateral-ancho: 232px;

  /* --- Tipografía ------------------------------------------------------- */
  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
    sans-serif;
  --fuente-numeros: "Consolas", "SF Mono", "Menlo", monospace;

  --texto-xs: 0.75rem;
  --texto-sm: 0.8125rem;
  --texto-base: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.375rem;
  --texto-2xl: 1.75rem;

  /* --- Espaciado -------------------------------------------------------- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;

  /* --- Formas ----------------------------------------------------------- */
  --radio-sm: 4px;
  --radio: 6px;
  --radio-lg: 10px;

  --sombra-sm: 0 1px 2px rgba(20, 38, 60, 0.06);
  --sombra: 0 1px 3px rgba(20, 38, 60, 0.08), 0 1px 2px rgba(20, 38, 60, 0.04);
  --sombra-lg: 0 8px 24px rgba(20, 38, 60, 0.12);

  --ancho-max: 1560px;
}