/**
 * Portal Qvinto — variables.css
 * Sistema de diseño: todas las variables CSS.
 * NUNCA usar valores hex directos en otros archivos CSS — siempre var(--xxx)
 */

:root {
  /* ─── Marca ─────────────────────────────────────────────────────────────── */
  --navy:       #011E41;
  --navy-light: #0a2d5a;
  --navy-dark:  #010f21;
  --cyan:       #63CFE3;
  --cyan-dark:  #3AB8D0;
  --cyan-light: #8ddde8;

  /* ─── Fondos ─────────────────────────────────────────────────────────────── */
  --white: #FFFFFF;
  --bg:    #F4F6F9;   /* Fondo página */
  --bg2:   #EEF1F5;   /* Fondo banners, insight, bloques secundarios */

  /* ─── Texto ──────────────────────────────────────────────────────────────── */
  --text:  #1A2340;   /* Texto principal */
  --text2: #4A5568;   /* Texto secundario */
  --text3: #718096;   /* Texto muted / timestamps / placeholders */

  /* ─── Bordes ─────────────────────────────────────────────────────────────── */
  --border:  #D1D9E6;  /* Borde estándar */
  --border2: #E2E8F0;  /* Borde suave (tarjetas) */

  /* ─── Semánticos ─────────────────────────────────────────────────────────── */
  --green:  #22C55E;  /* Éxito / EN VIVO / stock OK */
  --red:    #EF4444;  /* Error / Crítico / alerta */
  --orange: #F59E0B;  /* Aviso / Bajo mínimo */

  --green-text:  #16A34A;
  --red-text:    #DC2626;
  --orange-text: #D97706;

  --green-bg:  rgba(34, 197, 94, 0.10);
  --red-bg:    rgba(239, 68, 68, 0.10);
  --orange-bg: rgba(245, 158, 11, 0.10);

  /* ─── Tipografía ─────────────────────────────────────────────────────────── */
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;

  /* ─── Espaciado y radio ──────────────────────────────────────────────────── */
  --radius:    10px;  /* Tarjetas estándar */
  --radius-sm:  6px;  /* Botones, inputs, badges */
  --radius-lg: 14px;  /* Login card, modales */

  /* ─── Sombras ────────────────────────────────────────────────────────────── */
  --shadow:    0 1px 4px rgba(1, 30, 65, 0.08), 0 2px 12px rgba(1, 30, 65, 0.04);
  --shadow-lg: 0 4px 24px rgba(1, 30, 65, 0.12);

  /* ─── Sidebar ────────────────────────────────────────────────────────────── */
  --sidebar-width: 220px;

  /* ─── Transiciones ───────────────────────────────────────────────────────── */
  --transition: 0.15s ease;
}