/* efectos.css — luces «neón» de Murmura (bordes de luz que giran, brillo al pensar, halos) y el
   botón de tema. Solo tokens de tokens.css. Todo se detiene con prefers-reduced-motion. */

/* --- botón de tema (sol / luna) --- */
.tema-boton {
  width: 38px; height: 38px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--prim-radius-full);
  border: 1px solid var(--sem-borde-sutil);
  background: var(--sem-bg-superficie);
  color: var(--sem-texto-primario);
  cursor: pointer;
  transition: box-shadow var(--prim-duration-base) var(--prim-easing-standard), transform var(--prim-duration-fast);
}
.tema-boton:hover { box-shadow: 0 0 0 1px var(--sem-brillo), 0 0 16px var(--sem-brillo); }
.tema-boton:active { transform: scale(0.94); }
.tema-boton:focus-visible { outline: none; box-shadow: var(--sem-foco); }
.tema-boton svg { width: 18px; height: 18px; }
.tema-boton .tema-boton__sol { display: none; }
:root[data-theme="dark"] .tema-boton .tema-boton__sol { display: block; }
:root[data-theme="dark"] .tema-boton .tema-boton__luna { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema-boton .tema-boton__sol { display: block; }
  :root:not([data-theme="light"]) .tema-boton .tema-boton__luna { display: none; }
}
.tema-boton--sobre-oscuro { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #ffffff; }
.tema-boton--flotante { position: fixed; top: 12px; right: 12px; z-index: 900; }
body[data-entorno="desarrollo"] .tema-boton--flotante { top: 40px; }

/* --- borde de luz que gira (estilo Gemini) ---
   <div class="neon"> envuelve un campo: el borde es un degradado cónico animado y detrás hay
   un halo difuminado del mismo degradado, que se enciende más al enfocar. */
.neon {
  position: relative;
  isolation: isolate;
  border-radius: var(--prim-radius-full);
  padding: 2px;
  background: conic-gradient(from var(--giro), var(--sem-neon-colores));
  animation: neon-giro 6s linear infinite;
}
.neon::before {
  content: "";
  position: absolute; inset: -4px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--giro), var(--sem-neon-colores));
  filter: blur(14px);
  opacity: 0.35;
  animation: neon-giro 6s linear infinite;
  transition: opacity var(--prim-duration-base) var(--prim-easing-standard), filter var(--prim-duration-base);
}
.neon:focus-within::before { opacity: 0.75; filter: blur(18px); }
.neon:focus-within, .neon:focus-within::before { animation-duration: 3s; }
.neon > * { border-radius: calc(var(--prim-radius-full) - 2px); }
@keyframes neon-giro { to { --giro: 360deg; } }

/* --- "pensando": brillo que recorre la burbuja mientras el agente escribe --- */
.burbuja--escribiendo {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(100deg, transparent 20%, var(--sem-halo-1) 45%, var(--sem-halo-2) 55%, transparent 80%) 0 0 / 250% 100%,
    var(--sem-burbuja-agente-bg);
  animation: pensando-brillo 1.8s linear infinite;
  box-shadow: 0 0 0 1px var(--sem-brillo), 0 0 22px var(--sem-brillo);
}
.burbuja--escribiendo .punto {
  background: var(--sem-degradado-accion);
  box-shadow: 0 0 8px var(--sem-brillo-fuerte);
}
@keyframes pensando-brillo { from { background-position: 150% 0, 0 0; } to { background-position: -100% 0, 0 0; } }

/* texto con degradado neón (títulos destacados, marcas) */
.texto-neon {
  background: linear-gradient(90deg, #7c3aed, #d946ef, #ff864c, #d946ef, #7c3aed) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: texto-neon 8s linear infinite;
}
@keyframes texto-neon { to { background-position: -200% 0; } }

/* --- halos: manchas de luz difuminadas de fondo ---
   .halos: dentro de un bloque (lo recorta). .fondo-halos: capa fija detrás de toda la página. */
.halos { position: relative; isolation: isolate; overflow: hidden; }
.fondo-halos { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fondo-halos::before, .fondo-halos::after {
  content: ""; position: absolute; pointer-events: none;
  width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(60px);
  animation: halo-flotar 18s ease-in-out infinite alternate;
}
.fondo-halos::before { top: -30vmax; right: -20vmax; background: radial-gradient(circle, var(--sem-halo-1), transparent 65%); }
.fondo-halos::after { bottom: -35vmax; left: -25vmax; background: radial-gradient(circle, var(--sem-halo-2), transparent 65%); animation-delay: -9s; }
.halos::before, .halos::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(60px);
  animation: halo-flotar 18s ease-in-out infinite alternate;
}
.halos::before { top: -30vmax; right: -20vmax; background: radial-gradient(circle, var(--sem-halo-1), transparent 65%); }
.halos::after { bottom: -35vmax; left: -25vmax; background: radial-gradient(circle, var(--sem-halo-2), transparent 65%); animation-delay: -9s; }
@keyframes halo-flotar { to { transform: translate(-6vmax, 5vmax) scale(1.08); } }

/* --- botón principal con degradado y resplandor --- */
.brillo-accion {
  background: var(--sem-degradado-accion);
  color: #ffffff;
  border: 0;
  box-shadow: 0 6px 18px -6px var(--sem-brillo-fuerte);
  transition: box-shadow var(--prim-duration-base) var(--prim-easing-standard), transform var(--prim-duration-fast), filter var(--prim-duration-base);
}
.brillo-accion:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 8px 28px -4px var(--sem-brillo-fuerte); filter: saturate(1.15); }
.brillo-accion:active { transform: translateY(1px) scale(0.99); }

@media (prefers-reduced-motion: reduce) {
  .neon, .neon::before, .burbuja--escribiendo, .texto-neon, .halos::before, .halos::after, .fondo-halos::before, .fondo-halos::after { animation: none !important; }
}