@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- Color base ---- */
  --color-bg: #EEF2F8;
  --color-surface: #FFFFFF;
  --color-ink: #0F1E3D;
  --color-ink-muted: #5B6B85;
  --color-border: #DDE4EF;
  --color-accent: #1F5FBF;
  --color-accent-light: #56A6E0;
  --color-status-good: #1E9E5A;
  --color-status-warning: #F28C28;
  --color-status-critical: #D64545;
  --color-status-neutral: #8A94A6;
  --color-dark-bg: #0F2A5C;

  /* Tintes derivados (fondos suaves de badge/chip/panel destacado) — mismo
     criterio que ya usaba el sitio (un tinte claro del color base), ahora
     calculado desde los tokens en vez de un hex propio por módulo. */
  --color-tint: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  --color-tint-good: color-mix(in srgb, var(--color-status-good) 16%, var(--color-surface));
  --color-tint-warning: color-mix(in srgb, var(--color-status-warning) 18%, var(--color-surface));
  --color-tint-critical: color-mix(in srgb, var(--color-status-critical) 14%, var(--color-surface));
  --color-tint-neutral: color-mix(in srgb, var(--color-status-neutral) 14%, var(--color-surface));
  --color-surface-muted: color-mix(in srgb, var(--color-border) 45%, var(--color-surface));

  /* Bordes tenues por estado, para acompañar los tintes de arriba en cajas
     tipo "mensaje" (ok/alerta/crítico). */
  --color-border-good: color-mix(in srgb, var(--color-status-good) 40%, var(--color-surface));
  --color-border-warning: color-mix(in srgb, var(--color-status-warning) 45%, var(--color-surface));
  --color-border-critical: color-mix(in srgb, var(--color-status-critical) 40%, var(--color-surface));

  --font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --text-xs: 12px;       /* auxiliar / badges — antes 14px */
  --text-table: 14px;    /* texto de tabla — antes 16px */
  --text-body: 16px;     /* texto de cuerpo — antes 18px */
  --text-subtitle: 18px; /* subtítulo / valor de tarjeta — antes 22px */
  --text-section: 22px;  /* título de sección — antes 28px */
  --text-screen: 28px;   /* título de pantalla — antes 36px */

  /* ---- Bordes y sombras ---- */
  --radius-control: 6px;
  --radius-inner: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;
  /* La sombra es SÓLO para lo que se abre por encima de la página (menús, avisos, diálogos) — nunca en tarjetas estáticas. */
  --shadow-float: 0 2px 8px rgba(0, 0, 0, .08);
  --shadow-card: none;

  /* ---- Espaciado ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
}