/* Visuales de Música del Tío IA (visuales.js): adornos de la portada, visualizadores, modo fiesta y lámpara de noche.
   El personaje (#bailarin) nunca se mueve: todo esto va detrás o alrededor. */

/* ---------- Portada del reproductor ---------- */
.player-arte .bailarin{position:relative;z-index:1}
.player-arte>.sticker{z-index:3}
.vis-fondo{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:calc(var(--r-grande) - 2px);pointer-events:none}
.vis-lienzo{position:absolute;inset:0;width:100%;height:100%;display:none}
.player:not([data-vis="barras"]) .vis-lienzo{display:block}
.player[data-vis="fuegos"] .vis-fondo{
  background-color:var(--tinta);
  background-image:radial-gradient(circle at 18% 22%,#fff 1px,transparent 1.8px),radial-gradient(circle at 72% 14%,#fff 1.2px,transparent 2px),
    radial-gradient(circle at 86% 64%,#fff .9px,transparent 1.6px),radial-gradient(circle at 34% 58%,#fff .8px,transparent 1.5px);
  background-size:120px 120px,150px 150px,90px 90px,110px 110px;
}

/* Halo de rayos que "respira" con el bajo (solo con Barras) */
.vis-halo{
  position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%);border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,255,255,.55) 0 22%,rgba(255,255,255,0) 46%),
    repeating-conic-gradient(rgba(255,255,255,.26) 0 9deg,rgba(255,255,255,0) 9deg 22.5deg);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 68%);mask:radial-gradient(circle,#000 30%,transparent 68%);
}
.player:not([data-vis="barras"]) .vis-halo{display:none}
.player.noche .vis-halo{opacity:.45}

/* Destello: cruza la portada una sola vez al empezar una canción */
.vis-destello{position:absolute;inset:-10% -60%;opacity:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%)}
.vis-destello.activo{animation:vis-destello 1.2s ease-out .25s 1 both}
@keyframes vis-destello{from{opacity:1;transform:translateX(-45%)}to{opacity:1;transform:translateX(45%)}}

/* Notas musicales que suben despacio desde la portada */
.vis-notas{position:absolute;inset:0;z-index:2;pointer-events:none}
.vis-nota{position:absolute;bottom:14%;width:36px;height:36px;opacity:0;animation:vis-nota 4.6s ease-out forwards}
.vis-nota svg{width:100%;height:100%;fill:var(--c,var(--chicle));stroke:var(--tinta);stroke-width:1.6;stroke-linejoin:round}
.vis-nota svg path{fill:none;stroke-width:2.6;stroke-linecap:round}
.player.noche .vis-nota svg{stroke:#fff}
.player.noche .vis-nota svg path{stroke:var(--c)}
@keyframes vis-nota{
  0%{opacity:0;transform:translate(0,0) rotate(0) scale(.6)}
  15%{opacity:1;transform:translate(calc(var(--x) * .3),-40px) rotate(var(--r)) scale(1)}
  100%{opacity:0;transform:translate(var(--x),calc(-1 * min(78vw,340px) * .95)) rotate(calc(var(--r) * -1)) scale(.9)}
}
.vis-pausa .vis-nota,.vis-pausa .vis-destello{animation-play-state:paused}

/* Botones del reproductor */
.vis-barra{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:6px 0 2px}
.vis-barra .vis-boton{min-height:48px;padding:0 14px;font-size:.9rem}
.vis-boton .ico{width:20px;height:20px}
.vis-boton[aria-pressed="true"]{background:var(--limon);color:var(--tinta)}
.portada-acciones .vis-boton{margin-left:auto}

/* ---------- Modo fiesta: focos de colores que laten suave con la música ---------- */
.vis-fiesta{display:none;position:fixed;inset:0;width:auto !important;max-width:none !important;z-index:-1;overflow:hidden;pointer-events:none}
.player.vis-fiesta-on{isolation:isolate}
.player.vis-fiesta-on .vis-fiesta{display:block}
.vis-fiesta i{position:absolute;width:90vmax;height:90vmax;margin:-45vmax 0 0 -45vmax;border-radius:50%;opacity:.16;
  transition:opacity .35s ease;will-change:transform,opacity}
.vis-fiesta i:nth-child(1){left:15%;top:20%;background:radial-gradient(circle,var(--chicle) 0,transparent 60%)}
.vis-fiesta i:nth-child(2){left:85%;top:25%;background:radial-gradient(circle,var(--cielo) 0,transparent 60%)}
.vis-fiesta i:nth-child(3){left:50%;top:85%;background:radial-gradient(circle,var(--limon) 0,transparent 60%)}
.vis-fiesta i:nth-child(4){left:80%;top:80%;background:radial-gradient(circle,var(--papaya) 0,transparent 60%)}
.vis-fiesta i:nth-child(5){left:20%;top:75%;background:radial-gradient(circle,var(--azul) 0,transparent 60%)}
.vis-fiesta i:nth-child(6){left:50%;top:10%;background:radial-gradient(circle,#B07CFF 0,transparent 60%)}
.vis-fiesta b{position:absolute;left:50%;top:-12vh;width:160vmax;height:130vh;transform:translateX(-50%);transform-origin:50% 0;
  background:repeating-conic-gradient(from 160deg at 50% 0,rgba(255,255,255,.07) 0 4deg,transparent 4deg 13deg);
  -webkit-mask:linear-gradient(#000 20%,transparent 85%);mask:linear-gradient(#000 20%,transparent 85%)}

/* ---------- Ajustes ---------- */
#ajuste-visualizador .modos{flex-wrap:wrap}
#ajuste-visualizador .modos .chip{flex:1 1 40%}
.ajuste .papitos-nota .ico{width:18px;height:18px;vertical-align:-3px}
.ajuste .modos .boton{flex:1 1 auto}

/* ---------- Lámpara de noche ---------- */
.lampara{
  --luz-1:#FFE7B8; --luz-2:#F6A944; --halo:rgba(255,166,77,.5);
  position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;align-items:center;justify-content:safe center;overflow-y:auto;overflow-x:hidden;
  padding:max(14px,env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom));
  background:radial-gradient(120% 70% at 50% 46%,#2A1D24 0,#120F1F 55%,#08070F 100%);color:#F4DFC2;
  font-family:var(--cuerpo);
}
.lampara[data-color="rosado"]{--luz-1:#FFE1E4; --luz-2:#F28FA0; --halo:rgba(240,128,150,.45)}
.lampara[data-color="luna"]{--luz-1:#FFF8DD; --luz-2:#EBD58C; --halo:rgba(240,220,150,.4)}
.lampara>*{position:relative;width:100%;max-width:420px}
body.con-lampara{overflow:hidden}

/* Brillo: una capa oscura encima (deja pasar los toques) */
.lampara-brillo{position:fixed;inset:0;max-width:none;z-index:5;pointer-events:none;background:#000;opacity:0;transition:opacity 1.2s ease}
.lampara[data-brillo="media"] .lampara-brillo{opacity:.35}
.lampara[data-brillo="baja"] .lampara-brillo{opacity:.62}
.lampara.apagando .lampara-brillo{opacity:.92;transition:opacity 25s ease}

.lampara-cielo{position:fixed;inset:0;max-width:none;pointer-events:none}
.lampara-cielo i{position:absolute;width:var(--t);height:var(--t);border-radius:50%;background:#FFF1D6;opacity:.55;
  animation:lampara-titila 7s ease-in-out var(--d) infinite}
.lampara-cielo i:nth-child(3n){opacity:.3}
@keyframes lampara-titila{50%{opacity:.15}}
.lampara-cielo.quieta i{animation:none}

.lampara-top{position:absolute !important;top:max(14px,env(safe-area-inset-top));left:20px;right:20px;width:auto !important;max-width:none !important;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:6}
.lampara-redondo{display:grid;place-items:center;width:52px;height:52px;border:2px solid rgba(244,223,194,.35);border-radius:50%;color:#F4DFC2}
.lampara-colores{display:flex;gap:12px}
.lampara-color{width:40px;height:40px;border-radius:50%;border:2px solid rgba(244,223,194,.3);
  background:radial-gradient(circle at 40% 35%,#FFE7B8,#F6A944)}
.lampara-color[data-vis-color="rosado"]{background:radial-gradient(circle at 40% 35%,#FFE1E4,#F28FA0)}
.lampara-color[data-vis-color="luna"]{background:radial-gradient(circle at 40% 35%,#FFF8DD,#EBD58C)}
.lampara-color[aria-pressed="true"]{border-color:#F4DFC2;box-shadow:0 0 0 3px rgba(244,223,194,.25)}

/* La escena: una lámpara-luna sobre su base, con el personaje en silueta delante (quieto) */
.lampara-escena{flex:none;height:min(64vw,270px);margin:70px 0 6px;display:grid;place-items:center}
.lampara-halo{position:absolute;left:50%;top:44%;width:min(130vw,560px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,var(--halo) 0,rgba(0,0,0,0) 62%);animation:lampara-respira 6s ease-in-out infinite}
@keyframes lampara-respira{50%{opacity:.8}}
.lampara-escena.quieta .lampara-halo,.lampara-escena.quieta .lampara-z b,.lampara-escena.quieta .lampara-z{animation:none}
.lampara-luna{position:absolute;left:50%;top:6%;width:min(46vw,190px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 38% 34%,var(--luz-1) 0,var(--luz-1) 30%,var(--luz-2) 100%);
  box-shadow:0 0 50px 8px var(--halo),inset -10px -14px 26px rgba(120,60,20,.25)}
.lampara-luna i{position:absolute;border-radius:50%;background:rgba(150,90,30,.12)}
.lampara-luna i:nth-child(1){width:22%;height:22%;left:22%;top:48%}
.lampara-luna i:nth-child(2){width:13%;height:13%;left:60%;top:26%}
.lampara-luna i:nth-child(3){width:10%;height:10%;left:58%;top:64%}
.lampara-base{position:absolute;left:50%;top:calc(6% + min(46vw,190px) - 6px);width:min(26vw,108px);height:22px;transform:translateX(-50%);
  border-radius:12px 12px 6px 6px;background:linear-gradient(#6B4A33,#3D2A1E);box-shadow:0 -2px 10px rgba(255,170,90,.25)}
.lampara-pj{position:absolute;right:4%;bottom:0;width:min(34vw,140px);filter:brightness(0);opacity:.92}
.lampara-z{position:absolute;right:2%;bottom:66%;font:800 1.3rem/1 var(--titular);color:var(--luz-1);opacity:.55;animation:lampara-z 5s ease-in-out infinite}
.lampara-z b{display:inline-block;margin-left:2px;font-size:.8em;transform:translateY(-10px)}
.lampara-z b+b{font-size:.65em;transform:translateY(-20px)}
@keyframes lampara-z{50%{opacity:.25}}

.lampara-cancion{margin:4px 0 6px;text-align:center;font:700 1rem/1.3 var(--cuerpo);opacity:.75;min-height:1.3em}
.lampara-musica{display:flex;justify-content:center;min-height:64px}
.lampara-play{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:2px solid rgba(244,223,194,.4);color:#F4DFC2}
.lampara-play .ico{width:30px;height:30px}
.lampara-poner{display:inline-flex;align-items:center;gap:8px;min-height:56px;padding:0 20px;border-radius:999px;
  border:2px solid rgba(244,223,194,.4);color:#F4DFC2;font:700 1rem/1 var(--cuerpo)}
.lampara-temporizador{margin:10px 0 0;text-align:center;font-size:.9rem;opacity:.9}
.lampara-chips{display:flex;gap:6px;margin-top:8px}
.lampara-chip{flex:1 1 0;min-height:48px;border-radius:999px;border:2px solid rgba(244,223,194,.3);color:#F4DFC2;font:700 .9rem/1 var(--cuerpo);white-space:nowrap}
.lampara-chip[aria-pressed="true"]{background:var(--luz-2);border-color:var(--luz-2);color:#2A1A10}
.lampara-restante{margin:8px 0 0;min-height:1.2em;font-variant-numeric:tabular-nums;opacity:.8}
.lampara-durmio{display:flex;align-items:center;justify-content:center;gap:10px;min-height:68px;margin:14px 0 0;border-radius:999px;
  background:rgba(244,223,194,.1);border:2px solid rgba(244,223,194,.35);color:#F4DFC2;font:800 1.25rem/1 var(--titular)}
.lampara-durmio:disabled{opacity:.7}
.lampara-crono,.lampara-historial{margin:10px 0 0;text-align:center;font-size:.88rem;line-height:1.4;opacity:.65}
.lampara-historial{opacity:.55}
.lampara :focus-visible{outline:3px dashed var(--luz-2)}

/* ---------- Modo calma y movimiento reducido: todo quieto ---------- */
[data-calma="si"] .vis-notas,[data-calma="si"] .vis-destello,[data-calma="si"] .vis-fiesta,[data-calma="si"] .vis-lienzo{display:none}
@media (prefers-reduced-motion:reduce){
  .vis-notas,.vis-destello,.vis-fiesta,.vis-lienzo{display:none !important}
  .lampara-cielo i,.lampara-halo,.lampara-z{animation:none !important}
}