/* ============================================================
   Manual de Identidad Visual — Azul Marino v1.0
   Paleta de Colores y Sistema Tipográfico
   Fuente: Manual_Identidad_Visual_Azul_Marino_v1.0.docx
   Todo el código debe referenciar estas variables.
   Prohibido usar valores hex o de fuente directos.
   ============================================================ */

:root {
  /* --- Colores Primarios (estructura y navegación) --- */
  --color-sidebar-base:   #0F2D5E; /* Azul Profundo — sidebar base, títulos, logo */
  --color-sidebar-mid:    #1A3A6B; /* Azul Medio — sidebar mid-tone, subtítulos H2 */
  --color-sidebar-light:  #1E4A85; /* Azul Claro — degradado inferior sidebar, hover */
  --color-text-primary:   #0F2D5E; /* Títulos principales */

  /* --- Colores de Acento (interacción y CTAs) --- */
  --color-accent:         #1A6DDD; /* Acento principal — botones CTA, links */
  --color-accent-light:   #4A9EFF; /* Acento claro — hover, ícono activo sidebar, badges info */

  /* --- Colores de Superficie (fondos, cards, bordes) --- */
  --color-bg-shell:         #F4F7FC; /* Fondo del área de contenido */
  --color-bg-card:          #FFFFFF; /* Fondo de cards, tablas, modales */
  --color-bg-table-header:  #EEF3FB; /* Encabezados de tabla, filas alternas */
  --color-border:           #D1DCF0; /* Borde estándar de componentes */

  /* --- Colores de Texto --- */
  --color-text-body:       #334466; /* Texto principal en tablas y formularios */
  --color-text-secondary:  #6B7A99; /* Labels, placeholders, breadcrumbs, fechas */
  --color-text-label:      #4A6090; /* Headers de columna en tablas (caps) */

  /* --- Colores Semánticos (solo estados funcionales, nunca decorativos) --- */
  --color-success:     #2E7D32; /* Éxito / Activo */
  --color-success-bg:  #EBF5EB; /* Fondo badge éxito */
  --color-warning:     #B45309; /* Alerta / Warning */
  --color-warning-bg:  #FFFBEB; /* Fondo badge pendiente/warning */
  --color-error:       #B91C1C; /* Error / Danger */
  --color-error-bg:    #FEF3F2; /* Fondo badge inactivo/error */

  /* --- Tipografía: familias --- */
  --font-primary: 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* --- Tipografía: escala de tamaños --- */
  --text-xs:   10px; /* Etiquetas tabla caps, badges, versiones */
  --text-sm:   12px; /* Submenús, breadcrumbs, textos de ayuda */
  --text-base: 13px; /* Ítems de menú, cuerpo de tabla, datos */
  --text-md:   14px; /* Cuerpo principal, descripciones en cards */
  --text-lg:   15px; /* Subtítulos de card, nombres en listados */
  --text-xl:   18px; /* Encabezado H3, nombre de sección */
  --text-2xl:  22px; /* Encabezado H2, nombre de módulo activo */
  --text-3xl:  28px; /* Encabezado H1, título de página */
  --text-4xl:  36px; /* Valores KPI grandes en cards de métricas */

  /* --- Tipografía: pesos permitidos (400–700 únicamente) --- */
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* --- Tipografía: interlineado --- */
  --leading-tight:   1.15; /* H1, H2, H3, encabezados de sección */
  --leading-normal:  1.6;  /* Párrafos, datos de tabla, ítems de lista */
  --leading-compact: 1.3;  /* Menús, submenús, badges, botones */

  /* --- Espaciado y layout --- */
  --sidebar-width:   220px;
  --topbar-height:   52px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --border-width:  0.5px;
  --border-active: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
}

body {
  font-family: var(--font-primary);
  font-weight: var(--font-regular);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  background: var(--color-bg-shell);
}

code, pre, .mono {
  font-family: var(--font-mono);
}