/* Marca ZAPSTRAL v2 — GENERADO desde tokens.json con `python generar.py`. No editar a mano. */

:root {
  --zs-zap: #ddff38;  /* Amarillo ZAP */
  --zs-lima: #f1ffa6;  /* Lima */
  --zs-zap-prof: #b8d41f;  /* Amarillo profundo */
  --zs-oliva: #8fa80f;  /* Oliva */
  --zs-galaxia: #5400e5;  /* Morado galáctico */
  --zs-lavanda: #a98bff;  /* Lavanda */
  --zs-lav-claro: #cbb8ff;  /* Lavanda claro */
  --zs-violeta: #7a2ff0;  /* Violeta */
  --zs-morado-prof: #3a0fa8;  /* Morado profundo */
  --zs-cosmos: #181b47;  /* Azul cósmico */
  --zs-azul-noche: #23297a;  /* Azul noche */
  --zs-azul-estelar: #3346ff;  /* Azul estelar */
  --zs-azul-cielo: #6f86ff;  /* Azul cielo */
  --zs-celeste: #b3c1ff;  /* Celeste */
  --zs-cian: #38e1ff;  /* Cian */
  --zs-hielo: #f4f6ff;  /* Blanco hielo */
  --zs-fluye: 5s;
  --zs-resplandor: 4px;
  --zs-curva: cubic-bezier(.16,1,.3,1);
  --zs-entra: 80ms;
  --zs-vuelve: 420ms;
}

/* modo claro (por defecto) */
:root, [data-theme="light"] {
  --zs-fondo: #ffffff;
  --zs-superficie: #f6f6f7;
  --zs-superficie-2: #eeeef0;
  --zs-borde: #e4e4e7;
  --zs-texto: #111113;
  --zs-suave: #6b6b72;
  --zs-acento: #5400e5;
  --zs-peligro: #f04438;
  --zs-grad-eclipse: linear-gradient(in oklab 90deg,#23297a 0%,#3346ff 30%,#7a2ff0 52%,#8fa80f 66%,#ddff38 83%,#8fa80f 100%);
  --zs-grad-eclipse-espejo: linear-gradient(in oklab 90deg,#23297a 0.0%,#3346ff 15.0%,#7a2ff0 26.0%,#8fa80f 33.0%,#ddff38 41.5%,#8fa80f 50.0%,#8fa80f 50.0%,#ddff38 58.5%,#8fa80f 67.0%,#7a2ff0 74.0%,#3346ff 85.0%,#23297a 100.0%);
  --zs-grad-borde-stral: linear-gradient(in oklab 90deg,#b8d41f 0%,#5400e5 100%);
  --zs-grad-borde-stral-espejo: linear-gradient(in oklab 90deg,#b8d41f 0.0%,#5400e5 50.0%,#5400e5 50.0%,#b8d41f 100.0%);
}

/* modo oscuro: el del sistema, salvo que la página fuerce claro; y el forzado */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --zs-fondo: #0c0c0c;
  --zs-superficie: #141414;
  --zs-superficie-2: #1b1b1b;
  --zs-borde: #272727;
  --zs-texto: #ededed;
  --zs-suave: #919191;
  --zs-acento: #a98bff;
  --zs-peligro: #f04438;
  --zs-grad-eclipse: linear-gradient(in oklab 90deg,#23297a 0%,#3346ff 38%,#a98bff 64%,#ddff38 82%,#ddff38 100%);
  --zs-grad-eclipse-espejo: linear-gradient(in oklab 90deg,#23297a 0.0%,#3346ff 19.0%,#a98bff 32.0%,#ddff38 41.0%,#ddff38 50.0%,#ddff38 50.0%,#ddff38 59.0%,#a98bff 68.0%,#3346ff 81.0%,#23297a 100.0%);
  --zs-grad-borde-stral: linear-gradient(in oklab 90deg,#ddff38 0%,#5400e5 100%);
  --zs-grad-borde-stral-espejo: linear-gradient(in oklab 90deg,#ddff38 0.0%,#5400e5 50.0%,#5400e5 50.0%,#ddff38 100.0%);
  }
}
[data-theme="dark"] {
  --zs-fondo: #0c0c0c;
  --zs-superficie: #141414;
  --zs-superficie-2: #1b1b1b;
  --zs-borde: #272727;
  --zs-texto: #ededed;
  --zs-suave: #919191;
  --zs-acento: #a98bff;
  --zs-peligro: #f04438;
  --zs-grad-eclipse: linear-gradient(in oklab 90deg,#23297a 0%,#3346ff 38%,#a98bff 64%,#ddff38 82%,#ddff38 100%);
  --zs-grad-eclipse-espejo: linear-gradient(in oklab 90deg,#23297a 0.0%,#3346ff 19.0%,#a98bff 32.0%,#ddff38 41.0%,#ddff38 50.0%,#ddff38 50.0%,#ddff38 59.0%,#a98bff 68.0%,#3346ff 81.0%,#23297a 100.0%);
  --zs-grad-borde-stral: linear-gradient(in oklab 90deg,#ddff38 0%,#5400e5 100%);
  --zs-grad-borde-stral-espejo: linear-gradient(in oklab 90deg,#ddff38 0.0%,#5400e5 50.0%,#5400e5 50.0%,#ddff38 100.0%);
}

@supports not (background-image: linear-gradient(in oklab 90deg, red, blue)) {
  :root, [data-theme="light"] {
  --zs-grad-eclipse: linear-gradient(90deg,#23297a 0%,#3346ff 30%,#7a2ff0 52%,#8fa80f 66%,#ddff38 83%,#8fa80f 100%);
  --zs-grad-eclipse-espejo: linear-gradient(90deg,#23297a 0.0%,#3346ff 15.0%,#7a2ff0 26.0%,#8fa80f 33.0%,#ddff38 41.5%,#8fa80f 50.0%,#8fa80f 50.0%,#ddff38 58.5%,#8fa80f 67.0%,#7a2ff0 74.0%,#3346ff 85.0%,#23297a 100.0%);
  --zs-grad-borde-stral: linear-gradient(90deg,#b8d41f 0%,#5400e5 100%);
  --zs-grad-borde-stral-espejo: linear-gradient(90deg,#b8d41f 0.0%,#5400e5 50.0%,#5400e5 50.0%,#b8d41f 100.0%);
  }
  [data-theme="dark"] {
  --zs-grad-eclipse: linear-gradient(90deg,#23297a 0%,#3346ff 38%,#a98bff 64%,#ddff38 82%,#ddff38 100%);
  --zs-grad-eclipse-espejo: linear-gradient(90deg,#23297a 0.0%,#3346ff 19.0%,#a98bff 32.0%,#ddff38 41.0%,#ddff38 50.0%,#ddff38 50.0%,#ddff38 59.0%,#a98bff 68.0%,#3346ff 81.0%,#23297a 100.0%);
  --zs-grad-borde-stral: linear-gradient(90deg,#ddff38 0%,#5400e5 100%);
  --zs-grad-borde-stral-espejo: linear-gradient(90deg,#ddff38 0.0%,#5400e5 50.0%,#5400e5 50.0%,#ddff38 100.0%);
  }
}

/* el degradado que fluye: siempre la versión en espejo, al 200 % */
.zs-fluye {
  background-image: var(--zs-grad-eclipse-espejo);
  background-size: 200% 100%;
  animation: zs-fluye var(--zs-fluye) linear infinite;
}
@keyframes zs-fluye { from { background-position: 0% 0; } to { background-position: 200% 0; } }

/* resplandor: solo acentos (progreso, línea, separador). NUNCA botones (§5). */
.zs-resplandor { position: relative; }
.zs-resplandor::after {
  content: ""; position: absolute; inset: -1px 0; pointer-events: none;
  background: inherit; background-size: inherit; animation: inherit;
  filter: blur(var(--zs-resplandor)); opacity: .75;
}

/* texto resaltado: el Eclipse en el texto. Sin contorno en ningún modo (Seven, 2026-10-25):
   en claro el tramo amarillo va de oliva a amarillo ZAP y vuelve a oliva, así se lee sobre blanco. */
.zs-resaltado {
  background-image: var(--zs-grad-eclipse-espejo); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* barra viva: LA barra de todos los gráficos de ZAPSTRAL y las ZAPPs (Seven, 2026-10-25).
   El color lo pone barraViva() de rebajador.js: --zs-barra (degradado del comercio) y --zs-barra-luz.
   Crece desde abajo, sube un brillo cada --zs-fluye y respira un resplandor de 4 px. */
.zs-barra-viva {
  position: relative; display: block; border-radius: 10px;
  background: var(--zs-barra, var(--zs-galaxia));
  box-shadow: 0 0 var(--zs-resplandor) color-mix(in srgb, var(--zs-barra-luz, var(--zs-lavanda)) 55%, transparent);
  transform-origin: 50% 100%;
  animation: zs-crece 640ms var(--zs-curva) both, zs-respira calc(var(--zs-fluye) * .8) ease-in-out 640ms infinite;
  animation-delay: calc(var(--zs-i, 0) * 45ms), calc(640ms + var(--zs-i, 0) * 45ms);
}
.zs-barra-viva.zs-horizontal { transform-origin: 0 50%; animation-name: zs-crece-h, zs-respira; }
.zs-barra-viva::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(0deg, transparent, rgb(255 255 255 / .42), transparent) no-repeat;
  background-size: 100% 45%; background-position: 0 160%;
  mix-blend-mode: soft-light;
  animation: zs-sube var(--zs-fluye) var(--zs-curva) calc(900ms + var(--zs-i, 0) * 120ms) infinite;
}
.zs-barra-viva.zs-horizontal::before {
  background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / .42), transparent);
  background-size: 45% 100%; background-position: -60% 0; animation-name: zs-corre;
}
@keyframes zs-crece { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes zs-crece-h { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes zs-sube { 0% { background-position: 0 160%; } 45%, 100% { background-position: 0 -60%; } }
@keyframes zs-corre { 0% { background-position: -60% 0; } 45%, 100% { background-position: 160% 0; } }
@keyframes zs-respira {
  0%, 100% { box-shadow: 0 0 var(--zs-resplandor) color-mix(in srgb, var(--zs-barra-luz, var(--zs-lavanda)) 40%, transparent); }
  50% { box-shadow: 0 0 calc(var(--zs-resplandor) * 2) color-mix(in srgb, var(--zs-barra-luz, var(--zs-lavanda)) 70%, transparent); }
}

/* variante SVG: BarraViva.tsx (recharts/`<rect>`) usa un <filter> de
   desenfoque estático para el resplandor, no box-shadow — así que solo
   necesita el crecimiento inicial, sin "respira" (el loop infinito de
   box-shadow no aporta nada ahí). Antes esto se reproducía con estilos en
   línea en React, que ganan siempre a la regla de abajo; con una clase,
   prefers-reduced-motion sí la apaga. */
.zs-barra-viva-svg {
  animation: zs-crece 640ms var(--zs-curva) both;
  animation-delay: calc(var(--zs-i, 0) * 45ms);
}
.zs-barra-viva-svg.zs-horizontal { animation-name: zs-crece-h; }

@media (prefers-reduced-motion: reduce) {
  .zs-fluye, .zs-resaltado, .zs-resplandor::after, .zs-barra-viva, .zs-barra-viva::before, .zs-barra-viva-svg { animation: none; }
}