/*
 * ════════════════════════════════════════════════════════════
 *  PLSAT Telemetría — Design Tokens
 * ════════════════════════════════════════════════════════════
 *  Fuente única de verdad para colores, tipografía, espaciado.
 *  Cualquier valor visual nuevo debe agregarse aquí primero.
 * ════════════════════════════════════════════════════════════
 */

:root {
  /* ── Paleta corporativa PLSAT ─────────────────────────── */
  --plsat-green:        #9BCB3C;
  --plsat-green-dark:   #7AA92F;
  --plsat-green-soft:   rgba(155, 203, 60, 0.15);

  --plsat-brand-blue:        #005C8A;
  --plsat-brand-blue-light:  #0078B5;
  --plsat-brand-blue-soft:   rgba(0, 92, 138, 0.15);

  --plsat-navy-dark:    #0F2B5C;
  --plsat-navy-darker:  #0f172a;
  --plsat-navy-deep:    #020617;

  /* ── Fondos glassmorphism ─────────────────────────────── */
  --bg-deep:            var(--plsat-navy-darker);
  --bg-app:             linear-gradient(180deg, var(--plsat-navy-darker) 0%, var(--plsat-navy-deep) 100%);
  --bg-card:            rgba(15, 23, 42, 0.7);
  --bg-card-solid:      #1e293b;
  --bg-card-hover:      rgba(15, 23, 42, 0.85);
  --bg-elevated:        rgba(30, 41, 59, 0.85);
  --glass-blur:         12px;
  --glass-border:       rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(255, 255, 255, 0.16);

  /* ── Acentos semánticos ───────────────────────────────── */
  --accent-primary:     var(--plsat-brand-blue);
  --accent-primary-hover: var(--plsat-brand-blue-light);
  --accent-secondary:   var(--plsat-green);
  --accent-secondary-hover: var(--plsat-green-dark);

  /* Estados */
  --success:            var(--plsat-green);
  --success-soft:       var(--plsat-green-soft);
  --warning:            #f59e0b;
  --warning-soft:       rgba(245, 158, 11, 0.15);
  --danger:             #ef4444;
  --danger-soft:        rgba(239, 68, 68, 0.15);
  --info:               #38bdf8;
  --info-soft:          rgba(56, 189, 248, 0.15);

  /* ── Tipografía ───────────────────────────────────────── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, Oxygen, Ubuntu, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
                      Monaco, Consolas, monospace;

  --font-size-xs:   0.75rem;     /* 12px */
  --font-size-sm:   0.875rem;    /* 14px */
  --font-size-base: 1rem;        /* 16px */
  --font-size-lg:   1.125rem;    /* 18px */
  --font-size-xl:   1.5rem;      /* 24px */
  --font-size-2xl:  2rem;        /* 32px */
  --font-size-3xl:  2.5rem;      /* 40px */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;

  --line-height-tight:  1.2;
  --line-height-base:   1.5;
  --line-height-relaxed: 1.7;

  /* ── Texto ────────────────────────────────────────────── */
  --text-main:    #f8fafc;
  --text-muted:   #cbd5e1;
  --text-dim:     #94a3b8;
  --text-disabled: #64748b;
  --text-inverse: #0f172a;

  /* ── Espaciado (escala 4) ─────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ── Bordes ──────────────────────────────────────────── */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  --border-width:   1px;
  --border-color:   var(--glass-border);

  /* ── Sombras ─────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.15);
  --shadow-sm:  0 2px 4px 0 rgba(0,0,0,0.2);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.2);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.25);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.5), 0 10px 10px -5px rgba(0,0,0,0.3);
  --shadow-glow-green: 0 0 16px var(--plsat-green-soft);
  --shadow-glow-blue:  0 0 16px var(--plsat-brand-blue-soft);

  /* ── Transiciones ────────────────────────────────────── */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 320ms ease-out;

  /* ── Z-index ─────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ── Layout ──────────────────────────────────────────── */
  --sidebar-width:        260px;
  --sidebar-collapsed:    64px;
  --header-height:        56px;
  --alerts-panel-width:   320px;
  --content-max-width:    1600px;
}

/* Dark por defecto — el dashboard es premium glassmorphism */
:root {
  color-scheme: dark;
}

/* ── Tema CLARO (opt-in vía <html data-theme="light">) ─────────────────
   El toggle de auth-ui.js pone data-theme en <html> y lo persiste. Para tema
   claro se INVIERTEN los roles de marca: el verde #b7df4b toma el lugar de
   acento primario (lo que antes era azul ahora es verde) y el azul #094d8c
   queda reservado para títulos, texto sobre verde y acento secundario.
   El tema oscuro NO se toca. */
:root[data-theme="light"] {
  color-scheme: light;

  /* ── Paleta corporativa ajustada al tema claro ── */
  --plsat-green:             #b7df4b;
  --plsat-green-dark:        #9ec73d;
  --plsat-green-soft:        rgba(183, 223, 75, 0.20);

  --plsat-brand-blue:        #094d8c;
  --plsat-brand-blue-light:  #0a5ba8;
  --plsat-brand-blue-soft:   rgba(9, 77, 140, 0.12);

  /* Roles semánticos: verde = primario, azul = secundario/títulos. */
  --accent-primary:          var(--plsat-green);
  --accent-primary-hover:    var(--plsat-green-dark);
  --accent-secondary:        var(--plsat-brand-blue);
  --accent-secondary-hover:  var(--plsat-brand-blue-light);

  --success:                 var(--plsat-green);
  --success-soft:            var(--plsat-green-soft);

  --shadow-glow-green: 0 0 16px rgba(183, 223, 75, 0.35);
  --shadow-glow-blue:  0 0 16px rgba(9, 77, 140, 0.20);

  /* ── Fondos / texto / bordes ── */
  --bg-deep:             #eef2f7;
  --bg-app:              linear-gradient(180deg, #f8fafc 0%, #eaeef3 100%);
  --bg-card:             #ffffff;
  --bg-card-solid:       #ffffff;
  --bg-card-hover:       #f1f5f9;
  --bg-elevated:         #ffffff;
  --glass-border:        rgba(15, 23, 42, 0.10);
  --glass-border-strong: rgba(15, 23, 42, 0.18);

  --text-main:     #0f172a;
  --text-muted:    #334155;
  --text-dim:      #64748b;
  --text-disabled: #94a3b8;
  --text-inverse:  #f8fafc;

  --shadow-xs: 0 1px 2px 0 rgba(15,23,42,0.06);
  --shadow-sm: 0 2px 4px 0 rgba(15,23,42,0.08);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.10), 0 2px 4px -1px rgba(15,23,42,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.12), 0 4px 6px -2px rgba(15,23,42,0.07);
  --shadow-xl: 0 20px 25px -5px rgba(15,23,42,0.15), 0 10px 10px -5px rgba(15,23,42,0.08);
}

/* ── Tema claro: títulos en azul corporativo ───────────────────────────── */
:root[data-theme="light"] h1, :root[data-theme="light"] .h1,
:root[data-theme="light"] h2, :root[data-theme="light"] .h2,
:root[data-theme="light"] h3, :root[data-theme="light"] .h3,
:root[data-theme="light"] h4, :root[data-theme="light"] .h4,
:root[data-theme="light"] h5, :root[data-theme="light"] .h5 {
  color: var(--plsat-brand-blue);
}

/* ── Tema claro: header verde con texto azul ──────────────────────────── */
:root[data-theme="light"] plsat-header {
  background: var(--plsat-green);
  border-bottom-color: var(--plsat-green-dark);
}
:root[data-theme="light"] plsat-header .topbar-title,
:root[data-theme="light"] plsat-header .topbar-title > span,
:root[data-theme="light"] plsat-header .topbar-subtitle,
:root[data-theme="light"] plsat-header .connection-status,
:root[data-theme="light"] plsat-header .user-area,
:root[data-theme="light"] plsat-header .user-area *,
:root[data-theme="light"] plsat-header .topbar-pill-btn {
  color: var(--plsat-brand-blue);
}
:root[data-theme="light"] plsat-header .topbar-subtitle,
:root[data-theme="light"] plsat-header .connection-status {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(9, 77, 140, 0.25);
}
:root[data-theme="light"] plsat-header .btn-ghost,
:root[data-theme="light"] plsat-header .btn-back,
:root[data-theme="light"] plsat-header .btn {
  color: var(--plsat-brand-blue);
  border-color: rgba(9, 77, 140, 0.25);
  background: rgba(255, 255, 255, 0.40);
}
:root[data-theme="light"] plsat-header .btn-ghost:hover,
:root[data-theme="light"] plsat-header .btn-back:hover,
:root[data-theme="light"] plsat-header .btn:hover {
  background: rgba(255, 255, 255, 0.70);
}
/* Punto del indicador "En línea": azul sobre el verde del header. */
:root[data-theme="light"] plsat-header .connection-status::before {
  background: var(--plsat-brand-blue);
  box-shadow: 0 0 6px var(--plsat-brand-blue);
}
:root[data-theme="light"] plsat-header .connection-status.is-down::before {
  background: var(--danger);
  box-shadow: 0 0 6px var(--danger);
}

/* ── Tema claro: topbar legacy (index.html / styles.css) ──────────────── */
:root[data-theme="light"] .topbar {
  background: var(--plsat-green);
  color: var(--plsat-brand-blue);
  border-bottom: 1px solid var(--plsat-green-dark);
}
:root[data-theme="light"] .topbar h1,
:root[data-theme="light"] .topbar .h1 {
  color: var(--plsat-brand-blue);
}
:root[data-theme="light"] .topbar select {
  color: var(--plsat-brand-blue);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(9, 77, 140, 0.25);
}

/* ── Tema claro: botones primarios → verde con texto azul ─────────────── */
:root[data-theme="light"] .btn-primary {
  color: var(--plsat-brand-blue);
  font-weight: var(--font-weight-semibold);
}
:root[data-theme="light"] .btn-primary:hover {
  color: var(--plsat-brand-blue);
}

/* ── Tema claro: campana de alertas con fondo azul corporativo ──────────
   El resto de íconos del header (☰, ← Volver) conservan fondo claro;
   solo la campana toma protagonismo en azul para destacar.
   Cubre ambos headers: <plsat-header> (#toggle-alerts) y el legacy
   index.html (.topbar #toggleRight). */
:root[data-theme="light"] plsat-header #toggle-alerts,
:root[data-theme="light"] .topbar #toggleRight {
  background: var(--plsat-brand-blue);
  border-color: var(--plsat-brand-blue);
  color: #fff;
}
:root[data-theme="light"] plsat-header #toggle-alerts:hover,
:root[data-theme="light"] .topbar #toggleRight:hover {
  background: var(--plsat-brand-blue-light);
  border-color: var(--plsat-brand-blue-light);
  color: #fff;
}

/* ── Tema claro: enlaces "VER ANÁLISIS →" del panel de alertas en azul ── */
:root[data-theme="light"] plsat-alerts-panel .pa-sec a {
  color: var(--plsat-brand-blue);
}
:root[data-theme="light"] plsat-alerts-panel .pa-sec a:hover {
  color: var(--plsat-brand-blue-light);
}