/* =========================
   VARIABLES BASE (NEUTRO + AZUL TECNOLÓGICO)
========================= */
:root {
  /* Fondos (se quedan neutros) */
  --bg: #f4f4f5;
  --bg-header: #f4f4f5;
  --bg-footer: #dfecff;
  --card: #ffffff;
  --border: #e4e4e7;

  /* Texto */
  --text: #18181b;
  --text-secondary: #2563eb;
  /* azul tecnológico suave */

  /* Acento principal */
  --primary: #2563eb;
  /* azul moderno */
  --primary-hover: #1d4ed8;

  /* Estados (alineados al azul) */
  --success: #0ea5e9;
  /* azul claro */
  --error: #1e40af;
  /* azul profundo */
  --warning: #3b82f6;
  --gm-alert-item-bg: color-mix(in srgb, var(--card) 45%, var(--border));
  --gm-panel-card-bg: var(--card);
  /* azul medio */
}

/* =========================
   MODO OSCURO
========================= */
@media (prefers-color-scheme: dark) {
  :root {
    /* Fondos (neutros) */
    --bg: #09090b;
    --bg-header: #09090b;
    --bg-footer: #0c1a30;
    --card: #18181b;
    --border: #3b3b3f;

    /* Texto */
    --text: #fafafa;
    --text-secondary: #60a5fa;

    /* Acento */
    --primary: #3b82f6;
    --primary-hover: #60a5fa;

    /* Estados */
    --success: #38bdf8;
    --error: #1d4ed8;
    --warning: #2563eb;
    --gm-alert-item-bg: transparent;
    --gm-panel-card-bg: color-mix(in srgb, var(--border) 55%, var(--bg-header));
  }
}