/* ══════════════════════════════════════════════════════════════════════════
   GexVision · capa "aurora + cristal"
   ──────────────────────────────────────────────────────────────────────────
   Se carga DESPUES del <style> de cada pagina y sólo reescribe superficie:
   fondo, color de panel, brillo y tipografia de titulares. No toca ni una
   sola regla de posicion, tamaño o rejilla, asi que ninguna maquetacion se
   mueve. Las dos paginas usan nombres de token distintos (el dashboard usa
   --page/--pos/--neg, la landing y los tutoriales usan --bg/--call/--put),
   por eso se redefinen los dos juegos.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root,
:root[data-theme="dark"] {
  /* Los cuatro focos de la aurora */
  --au-1: 30, 27, 75;      /* indigo profundo */
  --au-2: 76, 29, 149;     /* violeta         */
  --au-3: 190, 24, 93;     /* magenta         */
  --au-4: 14, 116, 144;    /* teal            */

  /* Cristal */
  --glass:        rgba(255, 255, 255, .042);
  --glass-hi:     rgba(255, 255, 255, .070);
  --glass-ring:   rgba(255, 255, 255, .105);
  --glass-ring-hi: rgba(255, 255, 255, .190);
  --glass-blur:   22px;

  --au-shadow: 0 18px 50px -12px rgba(0, 0, 0, .70),
               0 2px 10px -2px rgba(0, 0, 0, .45);
}

/* Dashboard (index.html) */
:root[data-theme="dark"] {
  --page: #07070c;
  --surface: var(--glass);
  --surface-2: rgba(255, 255, 255, .058);
  --surface-3: rgba(255, 255, 255, .085);
  --ring: var(--glass-ring);
  --grid: rgba(255, 255, 255, .075);
  --axis: rgba(255, 255, 255, .155);
  --shadow: var(--au-shadow);
}

/* Landing y tutoriales (landing.html / docs.html y sus versiones .en) */
:root:not([data-theme]) {
  --bg: #07070c;
  --surface: var(--glass);
  --surface-2: rgba(255, 255, 255, .058);
  --ring: var(--glass-ring);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-2: var(--au-shadow);
}

/* ── 2. El fondo ───────────────────────────────────────────────────────── */
html {
  background: #06060f;
}

body {
  background: transparent !important;
  position: relative;
  isolation: isolate;
}

/* Capa de aurora: manchas de color que se desplazan muy despacio.
   Van fuertes a proposito: al pasar por debajo del cristal de los paneles
   pierden casi toda la intensidad, asi que si aqui se ven suaves, en la
   pagina no se ven. */
body::before {
  content: "";
  position: fixed;
  inset: -30vmax;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(44vmax 36vmax at 10%  4%, rgba(var(--au-2), .95), transparent 58%),
    radial-gradient(38vmax 32vmax at 92% 10%, rgba(var(--au-3), .72), transparent 60%),
    radial-gradient(50vmax 40vmax at 78% 92%, rgba(var(--au-4), .78), transparent 58%),
    radial-gradient(42vmax 34vmax at 16% 88%, rgba(var(--au-1), .98), transparent 60%),
    radial-gradient(30vmax 26vmax at 50% 50%, rgba(var(--au-2), .45), transparent 66%);
  filter: blur(8px) saturate(150%);
  animation: au-drift 38s ease-in-out infinite alternate;
  will-change: transform;
}

/* Segunda capa, mas rapida y en modo pantalla: da el "brillo" de aurora real
   en vez de un degradado plano. */
body::after {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .55;
  background:
    conic-gradient(from 210deg at 30% 20%,
      rgba(var(--au-3), .00) 0deg,
      rgba(var(--au-3), .40) 60deg,
      rgba(var(--au-2), .00) 150deg,
      rgba(var(--au-4), .34) 250deg,
      rgba(var(--au-3), .00) 360deg);
  filter: blur(50px);
  animation: au-swirl 52s linear infinite;
  will-change: transform;
}

/* Grano fino sobre todo: quita el bandeado y da textura de papel caro. */
body > .au-grain,
.au-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='160' height='160' filter='url(%23n)'/></svg>");
}

@keyframes au-swirl {
  from { transform: rotate(0deg)   scale(1.05); }
  to   { transform: rotate(360deg) scale(1.05); }
}

@keyframes au-drift {
  0%   { transform: translate3d(0, 0, 0)      scale(1)    rotate(0deg); }
  50%  { transform: translate3d(-3%, 2.5%, 0) scale(1.09) rotate(2deg); }
  100% { transform: translate3d(3.5%, -2%, 0) scale(1.04) rotate(-2deg); }
}

/* ── 3. Cristal esmerilado ─────────────────────────────────────────────── */
.card,
.plan,
.faq-item,
.regime-card,
.read,
.mkt,
.step,
.plat,
.note,
.alert,
.qa,
.sidebar,
details.method,
.toast {
  background: var(--glass) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-ring) !important;
  box-shadow: var(--au-shadow);
}

/* OJO: 'position: relative' NO puede ir en la regla de arriba. La barra lateral
   de los tutoriales es 'position: fixed' y el aviso flotante tambien; ponerles
   'relative' los devuelve al flujo y descuadra la pagina entera. Solo lo llevan
   los paneles que necesitan anclar su filo de luz. */
.card,
.plan,
.regime-card,
.read {
  position: relative;
}

/* Filo de luz en el borde superior: es lo que hace que parezca vidrio real
   y no un rectangulo gris con transparencia. */
.card::before,
.plan::before,
.regime-card::before,
.read::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, .32) 22%,
    rgba(255, 255, 255, .32) 78%, transparent);
  pointer-events: none;
}

.card:hover,
.plan:hover {
  border-color: var(--glass-ring-hi) !important;
  background: var(--glass-hi) !important;
}

/* Los paneles con grafico llevan algo mas de cuerpo: un SVG de datos sobre
   cristal muy translucido se lee peor. */
.card:has(svg.chart),
.card:has(.chart),
.card:has(table) {
  background: rgba(10, 10, 18, .58) !important;
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
}

/* ── 4. Titulares con degradado ────────────────────────────────────────── */
.hero-title,
.sec-title,
h1.big-title {
  background: linear-gradient(103deg, #ffffff 8%, #d6d2ff 46%, #f0aecd 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* El <span class="accent"> dentro del titular conserva su azul de marca,
   pero con brillo. */
.hero-title .accent {
  background: linear-gradient(103deg, #5aa2ff, #a78bfa 60%, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(120, 90, 255, .40));
}

/* ── 5. Brillo en las cifras ───────────────────────────────────────────── */
.card .hero-num,
.card .big,
.plan-price {
  text-shadow: 0 0 32px rgba(150, 160, 255, .30);
}

/* Cada cifra clave hereda el brillo de su propio color semantico. */
.num.pos, .pos > .num, .lvl.call   { text-shadow: 0 0 22px rgba(57, 135, 229, .45); }
.num.neg, .neg > .num, .lvl.put    { text-shadow: 0 0 22px rgba(230, 103, 103, .45); }

/* ── 6. Botones ────────────────────────────────────────────────────────── */
.btn.primary,
.btn-primary,
button.primary {
  background: linear-gradient(135deg, #3b82f6, #6d5ef6 55%, #a855f7) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: 0 10px 30px -8px rgba(99, 91, 255, .65),
              inset 0 1px 0 rgba(255, 255, 255, .28);
  color: #fff !important;
}

.btn.primary:hover,
.btn-primary:hover,
button.primary:hover {
  filter: brightness(1.10) saturate(1.06);
  box-shadow: 0 14px 38px -8px rgba(99, 91, 255, .80),
              inset 0 1px 0 rgba(255, 255, 255, .34);
}

.btn,
.chip {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── 7. Cabecera pegajosa de cristal ───────────────────────────────────── */
header.top,
header.nav-wrap,
.topbar {
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* ── 8. Barras de acento de las tarjetas del hero ──────────────────────── */
.hero .card::after {
  filter: drop-shadow(0 0 12px currentColor);
}

/* ── 9. Tema claro: misma idea, mucho mas suave ────────────────────────── */
:root[data-theme="light"] {
  --glass: rgba(255, 255, 255, .68);
  --glass-hi: rgba(255, 255, 255, .82);
  --glass-ring: rgba(12, 12, 30, .10);
  --glass-ring-hi: rgba(12, 12, 30, .20);
  --page: #eceaf6;
  --au-shadow: 0 16px 40px -14px rgba(40, 30, 90, .28);
}

:root[data-theme="light"] body::before {
  filter: blur(30px) saturate(105%);
  opacity: .38;
}

:root[data-theme="light"] body::after { opacity: .22; }
:root[data-theme="light"] .au-grain { opacity: .10; }

:root[data-theme="light"] .hero-title,
:root[data-theme="light"] .sec-title {
  background: linear-gradient(103deg, #14122b 10%, #3b2f7a 55%, #8d2f63 98%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

:root[data-theme="light"] .card:has(svg.chart),
:root[data-theme="light"] .card:has(.chart),
:root[data-theme="light"] .card:has(table) {
  background: rgba(255, 255, 255, .86) !important;
}

/* ── 10. Accesibilidad y equipos lentos ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

/* Si el navegador no soporta backdrop-filter (Firefox antiguo), el cristal
   se cae a un panel solido legible en vez de quedar transparente. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .plan, .faq-item, .regime-card, .read, .sidebar, .note, .alert, .qa {
    background: rgba(16, 16, 28, .92) !important;
  }
  :root[data-theme="light"] .card,
  :root[data-theme="light"] .plan { background: rgba(255, 255, 255, .95) !important; }
}

/* En pantallas pequeñas el desenfoque cuesta bateria y no se aprecia. */
@media (max-width: 720px) {
  :root { --glass-blur: 12px; }
  body::before { animation-duration: 60s; }
  body::after  { animation-duration: 90s; opacity: .40; }
}