/* =============================================================================
   EventsPredict PRO · Premium Overrides v8
   Tokens canónicos del sistema + capas premium encima.
   Importado DESPUÉS del CSS bundled → gana en cascada.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   1. TOKENS CANÓNICOS — fuente de verdad del sistema
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Superficies */
  --bg:          #070b15;
  --bg-2:        #0a1020;
  --card:        #0f1728;
  --card-hover:  #141f32;
  --card-raised: #1a2840;
  --card-overlay:#1e2d42;

  /* Bordes */
  --border:   #1e3050;
  --border-2: #2a4168;
  --border-3: #375580;
  --border-bright: rgba(124,109,246,0.38);

  /* Texto */
  --text:        #edf2fd;
  --text-bright: #c8d8ef;
  --muted:       #6b82a8;
  --text-dim:    #3e5470;

  /* Marca */
  --primary:     #7c6df6;
  --primary-2:   #a89ef8;
  --primary-3:   #5f50e0;
  --primary-dim: rgba(124,109,246,0.13);

  /* Acento */
  --accent:      #ec4899;
  --accent-2:    #f472b6;
  --accent-dim:  rgba(236,72,153,0.11);
  --accent-bg:   rgba(236,72,153,0.11);

  /* Semánticos */
  --good:   #22c55e;   --good-2:  #4ade80;
  --warn:   #f59e0b;   --warn-2:  #fbbf24;
  --bad:    #ef4444;   --bad-2:   #f87171;
  --info:   #22d3ee;
  --hot:    #ef4444;
  --warm:   #f59e0b;
  --cold:   #64748b;

  /* Gradientes */
  --grad-text:  linear-gradient(90deg,  #a89ef8 0%, #ec4899 100%);
  --grad-brand: linear-gradient(135deg, #7c6df6 0%, #5f50e0 100%);
  --grad-btn:   linear-gradient(135deg, #7c6df6 0%, #5f50e0 100%);
  --grad-bar:   linear-gradient(90deg,  #7c6df6 0%, #a89ef8 100%);
  --grad-gold:  linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
  --grad-rec:   linear-gradient(135deg, rgba(124,109,246,.08) 0%, rgba(236,72,153,.06) 100%);
  --grad-card-shine: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0) 1px);
  --grad-separator:  linear-gradient(90deg,
    transparent 0%,
    rgba(124,109,246,0.35) 25%,
    rgba(168,158,248,0.22) 50%,
    rgba(236,72,153,0.22) 75%,
    transparent 100%);

  /* Wash de fondo */
  --wash-page:
    radial-gradient(ellipse 1400px 700px at 10% -8%,  rgba(124,109,246,0.09), transparent 55%),
    radial-gradient(ellipse 1000px 500px at 90%  0%,  rgba(236,72,153,0.06),  transparent 48%),
    radial-gradient(ellipse  800px 500px at 50% 105%, rgba(124,109,246,0.05), transparent 60%);

  /* Tipografía */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter Tight', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --fs-hero:  40px;
  --fs-h1:    26px;
  --fs-h2:    18px;
  --fs-h3:    14px;
  --fs-body:  13px;
  --fs-sm:    12px;
  --fs-small: 12px;
  --fs-micro: 11px;
  --fs-nano:  10px;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;
  --fw-black:    900;

  --ls-display: -1.5px;
  --ls-h1:      -0.8px;
  --ls-logo:    -1.0px;
  --ls-tight:   -0.3px;
  --ls-label:    0.055em;
  --ls-badge:    0.07em;

  /* Radii */
  --r-xs:   4px;
  --r-chip: 6px;
  --r-ctl:  8px;
  --r-sm:   10px;
  --r-well: 12px;
  --r-card: 16px;
  --r-lg:   20px;
  --r-pill: 999px;

  /* Espaciado */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px;

  /* Elevaciones */
  --elev-0: none;
  --elev-1: 0 1px 4px  rgba(0,0,0,.50), 0 1px 2px  rgba(0,0,0,.35);
  --elev-2: 0 4px 16px rgba(0,0,0,.42), 0 2px 6px  rgba(0,0,0,.30);
  --elev-3: 0 8px 30px rgba(0,0,0,.50), 0 3px 10px rgba(0,0,0,.36);
  --elev-4: 0 18px 52px rgba(0,0,0,.60), 0 6px 20px rgba(0,0,0,.40);

  /* Sombras especializadas */
  --shadow-card-hover: 0 6px 28px rgba(0,0,0,.48), 0 0 0 1px var(--border-2);
  --shadow-btn:        0 1px 3px rgba(0,0,0,.38);
  --shadow-btn-hover:  0 4px 18px rgba(124,109,246,.45);
  --shadow-gold-hover: 0 4px 16px rgba(236,72,153,.40);
  --ring-primary:      0 0 0 3px rgba(124,109,246,.32);
  --ring-gold:         0 0 0 3px rgba(236,72,153,.28);
  --ring-good:         0 0 0 3px rgba(34,197,94,.28);

  /* Glow effects */
  --glow-btn: 0 4px 20px rgba(124,109,246,.45), inset 0 1px rgba(255,255,255,.18);

  /* Motion */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  .14s;
  --dur-med:   .22s;
  --dur-slow:  .38s;
  --t-fast: all var(--dur-fast) var(--ease-spring);
  --t-med:  all var(--dur-med)  var(--ease-spring);

  /* Layout */
  --nav-height: 62px;
  --container-max: 1440px;
  --container-pad-x: 40px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. BASE
   ───────────────────────────────────────────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  background: var(--wash-page), var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-3); }

::selection { background: rgba(124,109,246,.30); color: var(--text); }

:focus-visible {
  outline: 2px solid rgba(124,109,246,.65);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   3. TIPOGRAFÍA
   ───────────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.22;
}
.hero h1, h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-heavy);       /* 800 */
  letter-spacing: var(--ls-display);  /* -1.5px */
  line-height: 1.10;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

/* Gradient text */
.t-grad, .grad, .text-grad {
  display: inline-block;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Label / nano */
.t-label {
  font-size: var(--fs-nano);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
}

/* Números — siempre tabular */
.kpi-value, .score-circle span, .opp-metrics b,
.strategy-metrics b, [class*="-value"], [class*="-count"] {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.mono-data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. AMBIENT BLOBS
   ───────────────────────────────────────────────────────────────────────────── */
.ambient-blob:nth-child(1) { opacity: .10; --dur: 22s; }
.ambient-blob:nth-child(2) { opacity: .07; --dur: 28s; }
.ambient-blob:nth-child(3) { opacity: .05; --dur: 20s; }

/* ─────────────────────────────────────────────────────────────────────────────
   5. NAVBAR — panel vertical derecho, estilos gestionados en Navbar.jsx
   ───────────────────────────────────────────────────────────────────────────── */
/* Scrollbar del panel de navegación */
.nav-mobile-toggle { display: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   5b. PAGE SAFE-AREA — clearance for fixed hamburger (top:14 h:34) + right cluster
       hamburger bottom edge: 14+34 = 48px → safe-area top = 62px (14px gap)
   ───────────────────────────────────────────────────────────────────────────── */

/* All standard pages — override styles.css paddingTop:28 */
.container {
  padding-top: 62px;
}

/* RadarLocal and any future page using .page-main */
.page-main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 62px var(--container-pad-x) 72px;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.page-title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-h1);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. CARDS — 1px shine + hover lift
   ───────────────────────────────────────────────────────────────────────────── */
.card {
  background: var(--grad-card-shine), var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 22px 24px;
  box-shadow: var(--elev-1);
  transition: border-color var(--dur-med) var(--ease),
              box-shadow    var(--dur-med) var(--ease),
              transform     var(--dur-med) var(--ease);
  position: relative;
}
.card:hover {
  border-color: var(--border-2);
  box-shadow: var(--elev-2), inset 0 0 0 1px rgba(124,109,246,.06);
  transform: translateY(-1px);
}
.card.interactive:active { transform: scale(.99); }

/* Featured — accent top line */
.card.featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-brand);
  border-radius: var(--r-card) var(--r-card) 0 0;
  opacity: .85;
  pointer-events: none;
}

/* Opp cards */
.opp-card {
  background: var(--grad-card-shine), var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--elev-1);
}
.opp-card:hover {
  border-color: var(--border-2);
  box-shadow: 0 6px 24px rgba(0,0,0,.45),
              0 0 0 1px var(--border-2),
              0 0 18px rgba(124,109,246,.10);
  transform: translateY(-1px) translateX(2px);
}
.opp-card:active { transform: scale(.98); }

/* Rec card */
.rec-card {
  background: var(--grad-rec);
  border: 1px solid rgba(124,109,246,.28);
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. KPI CARDS
   ───────────────────────────────────────────────────────────────────────────── */
.kpi {
  background: var(--grad-card-shine), var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--elev-1);
  transition: var(--t-med);
}
.kpi-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--fw-heavy);
  letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
  line-height: 1.12;
  color: var(--text);
}
.kpi-value.grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.kpi:hover { transform: translateY(-2px); }
.kpi:nth-child(1):hover { box-shadow: var(--elev-3), 0 0 24px rgba(124,109,246,.18); }
.kpi:nth-child(2):hover { box-shadow: var(--elev-3), 0 0 20px rgba(34,197,94,.16);   }
.kpi:nth-child(3):hover { box-shadow: var(--elev-3), 0 0 20px rgba(236,72,153,.16);  }
.kpi:nth-child(4):hover { box-shadow: var(--elev-3), 0 0 18px rgba(34,211,238,.14);  }

/* ─────────────────────────────────────────────────────────────────────────────
   8. BOTONES
   ───────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: .015em;
  cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text-bright);
  font-family: inherit;
  white-space: nowrap;
  transition: var(--t-fast);
  user-select: none;
}
.btn:hover   { border-color: var(--border-2); background: rgba(255,255,255,.06); color: var(--text); }
.btn:active  { transform: translateY(1px); }

/* Primary */
.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-btn), var(--glow-btn);
  font-weight: var(--fw-bold);
  letter-spacing: .025em;
}
.btn-primary:hover {
  filter: brightness(1.12);
  box-shadow: var(--shadow-btn-hover), inset 0 1px rgba(255,255,255,.20);
  transform: translateY(-1px);
  border: none;
}
.btn-primary:active { transform: scale(.97); filter: brightness(.94); }

/* Gold */
.btn-gold {
  background: var(--grad-gold);
  color: #fff;
  border: none;
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-btn);
}
.btn-gold:hover { box-shadow: var(--shadow-gold-hover); filter: brightness(1.07); border: none; }

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: rgba(124,109,246,.08);
  border-color: rgba(124,109,246,.30);
  color: var(--primary-2);
}

/* Danger */
.btn-danger {
  background: rgba(239,68,68,.10);
  color: var(--bad-2);
  border: 1px solid rgba(239,68,68,.24);
  font-weight: var(--fw-semibold);
}
.btn-danger:hover {
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.40);
  color: #fca5a5;
  box-shadow: 0 0 16px rgba(239,68,68,.20);
}
.btn-danger:active { transform: scale(.97); }

/* Tamaños */
.btn-sm { padding: 5px 11px; font-size: 11px; border-radius: var(--r-ctl); }
.btn-lg { padding: 11px 24px; font-size: 13px; border-radius: var(--r-sm); }

/* ─────────────────────────────────────────────────────────────────────────────
   9. DATATABLE — headers sticky + blur, primera columna
   ───────────────────────────────────────────────────────────────────────────── */
.datatable th {
  background: rgba(255,255,255,.022);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--muted);
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .07em;
  border-bottom: 1px solid var(--border-2);
  padding: 10px 14px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.datatable td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(30,48,80,.55);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-fast) var(--ease);
}
.datatable td:first-child  { font-weight: var(--fw-semibold); color: var(--text-bright); }
.datatable tbody tr:nth-child(even) td { background: rgba(255,255,255,.016); }
.datatable tbody tr:hover td           { background: rgba(124,109,246,.07); }
.datatable a       { color: var(--primary-2); font-weight: var(--fw-semibold); }
.datatable a:hover { color: var(--accent-2); }

/* ─────────────────────────────────────────────────────────────────────────────
   10. SCORE PILLS & RISK BADGES
   ───────────────────────────────────────────────────────────────────────────── */
.score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 2px 7px;
  border-radius: var(--r-chip);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.score-hot,  .score-pill.hot  { background: rgba(239,68,68,.14);   color: #fca5a5; border: 1px solid rgba(239,68,68,.28);   }
.score-warm, .score-pill.warm { background: rgba(234,179,8,.14);   color: #fde047; border: 1px solid rgba(234,179,8,.28);   }
.score-cold, .score-pill.cold { background: rgba(100,116,139,.14); color: #94a3b8; border: 1px solid rgba(100,116,139,.26); }
             .score-pill.good { background: rgba(34,197,94,.14);   color: #86efac; border: 1px solid rgba(34,197,94,.26);   }

.risk       { padding: 2px 8px; border-radius: var(--r-xs); font-size: var(--fs-nano); font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; display: inline-block; }
.risk-bajo  { background: rgba(34,197,94,.12);  color: var(--good-2); border: 1px solid rgba(34,197,94,.25);   }
.risk-medio { background: rgba(234,179,8,.12);  color: var(--warn-2); border: 1px solid rgba(234,179,8,.25);   }
.risk-alto  { background: rgba(239,68,68,.12);  color: var(--bad-2);  border: 1px solid rgba(239,68,68,.25);   }

/* ─────────────────────────────────────────────────────────────────────────────
   11. BADGE SYSTEM — chips semánticos unificados
   ───────────────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-chip);
  font-size: var(--fs-nano);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-badge);
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-primary { background: var(--primary-dim);         color: var(--primary-2); border: 1px solid rgba(124,109,246,.22); }
.badge-good    { background: rgba(34,197,94,.11);         color: var(--good-2);   border: 1px solid rgba(34,197,94,.22);   }
.badge-warn    { background: rgba(245,158,11,.11);        color: var(--warn-2);   border: 1px solid rgba(245,158,11,.22);  }
.badge-bad     { background: rgba(239,68,68,.11);         color: var(--bad-2);    border: 1px solid rgba(239,68,68,.22);   }
.badge-info    { background: rgba(34,211,238,.10);        color: var(--info);     border: 1px solid rgba(34,211,238,.20);  }

/* Tag */
.tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--primary-dim);
  color: var(--primary-2);
  border: 1px solid rgba(124,109,246,.22);
  border-radius: var(--r-xs);
  font-size: var(--fs-nano);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
}

/* Live dot */
.live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 9px rgba(34,197,94,.75);
  animation: pulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. FILTROS & INPUTS
   ───────────────────────────────────────────────────────────────────────────── */
.filters {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--elev-1);
}
.filters select,
.filters input[type=text] {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  min-height: 34px;
  transition: var(--t-fast);
}
.filters select:hover,
.filters input:hover { border-color: var(--border-2); }
.filters select:focus,
.filters input:focus {
  border-color: var(--primary);
  box-shadow: var(--ring-primary);
  outline: none;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(124,109,246,.55) !important;
  box-shadow: var(--ring-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. SECTION DIVIDER & SECTION HEADER
   ───────────────────────────────────────────────────────────────────────────── */
.section-divider {
  height: 1px;
  background: var(--grad-separator);
  margin: 28px 0;
  border: none;
  opacity: .75;
}
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.section-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 40px; height: 1px;
  background: var(--primary);
  opacity: .75;
  border-radius: 1px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. BARRAS DE PROGRESO
   ───────────────────────────────────────────────────────────────────────────── */
.bar { background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; }
.bar-fill { background: var(--grad-bar); border-radius: 99px; transition: width var(--dur-slow) var(--ease); }

.progress-track { height: 6px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.progress-fill  { height: 100%; border-radius: 99px; background: var(--grad-bar); position: relative; transition: width 600ms cubic-bezier(.4,0,.2,1); }
.progress-fill.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. LOGIN
   ───────────────────────────────────────────────────────────────────────────── */
.lg-btn-primary {
  background: linear-gradient(135deg,#6B18E0 0%,#E8189A 100%) !important;
  box-shadow: 0 4px 24px rgba(107,24,224,.45), inset 0 1px rgba(255,255,255,.22) !important;
  transition: all .2s ease !important;
}
.lg-btn-primary:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.10);
  box-shadow: 0 8px 36px rgba(107,24,224,.60), inset 0 1px rgba(255,255,255,.28) !important;
}
.lg-btn-primary:active { transform: translateY(0) scale(.97) !important; filter: brightness(.93); }

.lg-pill-input:focus {
  border-color: rgba(124,109,246,.50) !important;
  box-shadow: 0 0 0 3px rgba(124,109,246,.14) !important;
  background: rgba(255,255,255,.07) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. MODO CLARO — tokens canónicos light
   ───────────────────────────────────────────────────────────────────────────── */
html.light {
  --bg:          #f9fafb;
  --bg-2:        #f3f4f6;
  --card:        #ffffff;
  --card-hover:  #fafafa;
  --card-raised: #f3f4f6;
  --card-overlay:#e5e7eb;

  --border:   #e5e7eb;
  --border-2: #d1d5db;
  --border-3: #9ca3af;

  --text:        #111827;
  --text-bright: #030712;
  --muted:       #6b7280;
  --text-dim:    #9ca3af;

  --primary:     #3d15ce;
  --primary-2:   #6b3dd4;
  --primary-3:   #2d0f9e;
  --primary-dim: rgba(61,21,206,.08);

  --accent:      #9046ea;
  --accent-2:    #a78bfa;
  --accent-dim:  rgba(144,70,234,.08);
  --accent-bg:   rgba(144,70,234,.08);

  --good:   #15803d;  --good-2:  #16a34a;
  --warn:   #b45309;  --warn-2:  #a16207;
  --bad:    #dc2626;  --bad-2:   #b91c1c;
  --info:   #0891b2;

  --grad-text:  linear-gradient(135deg, #3d15ce 0%, #9046ea 100%);
  --grad-brand: linear-gradient(135deg, #3d15ce 0%, #2d0f9e 100%);
  --grad-btn:   linear-gradient(135deg, #3d15ce 0%, #2d0f9e 100%);
  --grad-bar:   linear-gradient(90deg,  #3d15ce 0%, #6b3dd4 100%);

  --wash-page:
    radial-gradient(ellipse 1400px 600px at 0%   0%,  rgba(61,21,206,.03),  transparent 60%),
    radial-gradient(ellipse 1000px 500px at 100% 0%,  rgba(144,70,234,.02), transparent 55%);

  --shadow-card-hover: 0 4px 6px rgba(0,0,0,.04), 0 12px 30px rgba(0,0,0,.10);
  --shadow-btn-hover:  0 6px 16px rgba(61,21,206,.36);
  --shadow-gold-hover: 0 6px 16px rgba(144,70,234,.32);
  --ring-primary: 0 0 0 3px rgba(61,21,206,.12);
  --ring-gold:    0 0 0 3px rgba(144,70,234,.14);
  --glow-btn: 0 4px 18px rgba(61,21,206,.38), inset 0 1px rgba(255,255,255,.18);

  --elev-1: 0 1px 3px rgba(0,0,0,.06), 0 0 0 1px var(--border);
  --elev-2: 0 4px 12px rgba(0,0,0,.08), 0 0 0 1px var(--border);
  --elev-3: 0 8px 24px rgba(0,0,0,.12), 0 0 0 1px var(--border-2);
  --grad-separator: linear-gradient(90deg, transparent 0%, rgba(61,21,206,.20) 35%, rgba(144,70,234,.16) 65%, transparent 100%);
  --grad-card-shine: none;
}

html.light body { background: var(--wash-page), var(--bg); }

html.light .card      { background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px var(--border); }
html.light .card:hover { background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.10), 0 0 0 1px var(--border-2); }
html.light .opp-card  { background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 0 0 1px var(--border); }
html.light .kpi       { background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px var(--border); }
html.light .kpi:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10), 0 0 0 1px var(--border-2); }

html.light .btn         { background: #fff; border-color: var(--border); color: #374151; }
html.light .btn:hover   { background: var(--bg-2); border-color: var(--border-2); color: #111827; }
html.light .btn-primary { background: var(--grad-brand); color: #fff; border: none; }
html.light .btn-primary:hover { box-shadow: 0 6px 18px rgba(61,21,206,.40); filter: brightness(1.08); }
html.light .btn-ghost   { background: #fff; color: #6b7280; border-color: var(--border); }
html.light .btn-ghost:hover { background: var(--bg-2); border-color: var(--border-2); color: #3d15ce; }
html.light .btn-link    { color: #3d15ce; }
html.light .btn-link:hover { color: #2d0f9e; }
html.light .btn-danger  { background: rgba(220,38,38,.08); color: #dc2626; border-color: rgba(220,38,38,.22); }
html.light .btn-danger:hover { background: rgba(220,38,38,.14); }

html.light .datatable th                            { background: var(--bg-2); color: #374151; border-color: var(--border); backdrop-filter: none; }
html.light .datatable td                            { border-color: rgba(229,231,235,.70); }
html.light .datatable td:first-child               { color: #111827; }
html.light .datatable tbody tr:nth-child(even) td  { background: rgba(0,0,0,.018); }
html.light .datatable tbody tr:hover td            { background: rgba(61,21,206,.04); }
html.light .datatable a                            { color: #3d15ce; }
html.light .datatable a:hover                      { color: #9046ea; }

html.light .filters                        { background: rgba(255,255,255,.92); box-shadow: 0 1px 0 var(--border); }
html.light .filters select,
html.light .filters input[type=text]       { background: #fff; border-color: var(--border); color: var(--text); }
html.light .filters select:focus,
html.light .filters input[type=text]:focus { border-color: #3d15ce; box-shadow: 0 0 0 3px rgba(61,21,206,.10); }

html.light input:focus, html.light select:focus, html.light textarea:focus {
  border-color: rgba(61,21,206,.50) !important;
  box-shadow: 0 0 0 3px rgba(61,21,206,.10) !important;
}
html.light :focus-visible { outline: 2px solid rgba(61,21,206,.55); }

html.light .badge-primary { background: rgba(61,21,206,.08);  color: #3d15ce; border-color: rgba(61,21,206,.18); }
html.light .badge-good    { background: rgba(21,128,61,.09);  color: #15803d; border-color: rgba(21,128,61,.18); }
html.light .badge-warn    { background: rgba(180,83,9,.09);   color: #b45309; border-color: rgba(180,83,9,.18);  }
html.light .badge-bad     { background: rgba(220,38,38,.09);  color: #dc2626; border-color: rgba(220,38,38,.18); }
html.light .badge-info    { background: rgba(8,145,178,.09);  color: #0891b2; border-color: rgba(8,145,178,.18); }

html.light .section-header { border-color: var(--border); }
html.light .section-header::after { background: #3d15ce; }

html.light .score-circle::before { background: #ffffff; }
html.light .strategy-metrics     { background: var(--bg-2); border-color: var(--border); }
html.light .strategy-card.is-rec { background: linear-gradient(160deg, rgba(61,21,206,.04) 0%, #fff 100%); }
html.light .bar                  { background: rgba(61,21,206,.09); }
html.light .rec-card             { background: linear-gradient(135deg, rgba(61,21,206,.04) 0%, rgba(144,70,234,.025) 100%); }
html.light .live-badge           { background: rgba(255,255,255,.90); border-color: var(--border); }
html.light .tag                  { background: rgba(61,21,206,.07); border-color: rgba(61,21,206,.18); color: #3d15ce; }
html.light .live-dot             { box-shadow: 0 0 8px rgba(21,128,61,.65); }
html.light .grad                 { background: linear-gradient(135deg, #3d15ce 0%, #9046ea 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

html.light ::-webkit-scrollbar-thumb       { background: var(--border-2); }
html.light ::-webkit-scrollbar-thumb:hover { background: var(--primary-3); }
html.light ::selection { background: rgba(61,21,206,.18); color: var(--text); }

html.light .ambient-blob:nth-child(1) { opacity: .04; }
html.light .ambient-blob:nth-child(2) { opacity: .03; }
html.light .ambient-blob:nth-child(3) { opacity: .02; }

/* ─────────────────────────────────────────────────────────────────────────────
   17. UTILIDADES
   ───────────────────────────────────────────────────────────────────────────── */
.tabular    { font-variant-numeric: tabular-nums; }
.glass      { background: rgba(255,255,255,.06); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.09); }
.hover-lift { transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE & MULTIPLATFORM OVERRIDES
   Appended to premium-overrides.css — do not edit directly, regenerated by deploy
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Safe area padding for notch / Dynamic Island / home bar ─────────────── */
body {
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── KPI cards: 2-col grid on mobile ─────────────────────────────────────── */
@media (max-width: 640px) {
  .kpi-grid,
  .kpis-row,
  [class*="kpi-row"],
  .metrics-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .kpi, .kpi-card, .metric-card, .stat-card {
    min-width: 0 !important;
    padding: 12px !important;
  }

  .kpi .kpi-value,
  .kpi-card .kpi-value {
    font-size: 1.4rem !important;
  }
}

/* ── Tables: horizontal scroll wrapper on mobile ─────────────────────────── */
@media (max-width: 768px) {
  .datatable-wrap,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .datatable {
    min-width: 560px;
  }

  .datatable th,
  .datatable td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}

/* ── Footer: hidden on mobile to save space ──────────────────────────────── */
@media (max-width: 640px) {
  .footer { display: none !important; }
}

/* ── Page content: reduce side padding on mobile ─────────────────────────── */
@media (max-width: 640px) {
  .page-content,
  .content-area,
  .dashboard-content,
  .section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Headings */
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.2rem !important; }
}

/* ── Cards: full-width stacking on mobile ────────────────────────────────── */
@media (max-width: 640px) {
  .card-grid,
  .opp-grid,
  .pipeline-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .card, .opp-card {
    border-radius: 12px !important;
  }
}

/* ── Chat IA: keyboard-safe input area on mobile ─────────────────────────── */
@media (max-width: 640px) {
  .cia-input-row,
  .chat-input-bar,
  [class*="input-row"] {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  /* Push chat container above mobile keyboard using dvh */
  .cia-container,
  .chat-container {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

/* ── Modals / drawers: safe bottom padding ───────────────────────────────── */
@media (max-width: 640px) {
  .modal-footer,
  .drawer-footer,
  .sheet-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}

/* ── Buttons: minimum 44×44 touch target ─────────────────────────────────── */
@media (max-width: 640px) {
  button, .btn, [role="button"] {
    min-height: 44px;
  }

  /* Small icon buttons keep size but expand hit area */
  .btn-icon {
    position: relative;
  }
  .btn-icon::after {
    content: '';
    position: absolute;
    inset: -8px;
  }
}

/* ── Filters / toolbar: wrap on mobile ───────────────────────────────────── */
@media (max-width: 640px) {
  .filters,
  .toolbar,
  .filter-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .filters select,
  .filters input[type="text"],
  .filter-bar input {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ── Oportunidades cards on mobile ───────────────────────────────────────── */
@media (max-width: 640px) {
  .opp-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Pipeline: scrollable kanban on mobile ───────────────────────────────── */
@media (max-width: 768px) {
  .pipeline-board,
  .kanban-board {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
  }

  .pipeline-col,
  .kanban-col {
    min-width: 260px !important;
    flex-shrink: 0 !important;
  }
}

/* ── Smooth scrolling (respects reduced motion) ──────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Touch: remove hover-only color changes ──────────────────────────────── */
@media (hover: none) {
  .hover-lift:hover { transform: none !important; box-shadow: none !important; }
  .card:hover { box-shadow: var(--elev-1) !important; }
}