/* Música del Tío IA · estilos de app. Colores de EltioIA.cl/css/marca.css; estética de app con manchas de color,
   contornos finos y stickers inclinados (referencia elegida por el usuario, oct 2026). */
:root{
  --tinta:#1B1A3A; --papel:#EEF4FF; --linea:#C3D6F5;
  --limon:#B8EF3C; --azul:#2F5BFF; --papaya:#FF6B35; --chicle:#FF3D9A; --cielo:#22CFE3;
  --blanco:#FFFFFF; --tenue:#5B6A94;
  --limon-suave:#F1FBDD; --azul-suave:#E3EAFF; --papaya-suave:#FFEDE5; --chicle-suave:#FFE6F2; --cielo-suave:#DFF8FB;
  --titular:"Bricolage Grotesque",system-ui,sans-serif; --cuerpo:"Space Grotesk",system-ui,sans-serif;
  /* Colores de la interfaz (el modo nocturno cambia solo estos; los de la marca quedan iguales) */
  --fondo-app:var(--papel); --superficie:var(--blanco); --texto-app:var(--tinta); --trazo:var(--tinta);
  --borde:2px solid var(--trazo); --r-grande:28px; --r:22px; --r-chico:16px;
  --alto-tab:76px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;color:var(--texto-app);font-family:var(--cuerpo);background:var(--fondo-app);
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
  padding-bottom:calc(var(--alto-tab) + 28px);
}
body.con-mini{padding-bottom:calc(var(--alto-tab) + 112px)}
body[data-vista="play"]{padding-bottom:0}
#vista{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:16px 16px 8px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:disabled{cursor:default;opacity:.45}
a{color:inherit}
:focus-visible{outline:3px dashed var(--azul);outline-offset:3px}
h1,h2{font-family:var(--titular);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0}

/* Manchas de fondo: formas planas grandes, quietas, detrás de todo */
#manchas{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#manchas i{position:absolute;display:block}
#manchas i:nth-child(1){width:340px;height:300px;top:-90px;right:-120px;background:#BDEFF5;border-radius:58% 42% 47% 53% / 52% 46% 54% 48%;transform:rotate(-12deg)}
#manchas i:nth-child(2){width:260px;height:240px;bottom:120px;left:-130px;background:#FFCFE4;border-radius:42% 58% 63% 37% / 45% 52% 48% 55%}
#manchas i:nth-child(3){width:210px;height:190px;bottom:-60px;right:-60px;background:#FFC7AE;border-radius:50% 50% 38% 62% / 60% 40% 60% 40%;transform:rotate(18deg)}
#manchas i:nth-child(4){width:150px;height:150px;top:42%;right:-70px;background:#DDF5A8;border-radius:63% 37% 54% 46% / 55% 48% 52% 45%}
@media (min-width:700px){#manchas i:nth-child(1){right:8%}#manchas i:nth-child(2){left:6%}}

/* Íconos SVG: relleno por defecto; .l = línea; .c = corazón */
.ico{width:24px;height:24px;fill:currentColor;flex:none}
.ico .l{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ico .c{fill:transparent;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.on .ico .c{fill:var(--chicle);stroke:var(--tinta)}

/* Stickers inclinados: la marca visual de la app */
.sticker,.boton-limon,.chip.on,.pildora.guardada,.redondo[aria-pressed="true"],.modos .chip[aria-pressed="true"],
.tab[aria-current="page"] .ico,.papitos-tarjeta.destacada,.papitos-tarjeta.destacada .papitos-txt span,.opcion.acierto,
.kara-linea.actual .kara-p.luz,.perfil-nuevo,.avatar-op[aria-pressed="true"]{color:var(--tinta)}
.sticker{
  display:inline-block;transform:rotate(-6deg);padding:3px 9px;white-space:nowrap;vertical-align:middle;
  border:var(--borde);border-radius:10px;background:var(--limon);color:var(--tinta);
  font:800 .72rem/1.1 var(--titular);letter-spacing:.02em;text-transform:uppercase;
}
.sticker.chicle{background:var(--chicle);color:var(--blanco)}
.sticker.cielo{background:var(--cielo)}
.sticker.limon{background:var(--limon)}

/* Cielo estrellado de "Para dormir" */
.noche,.noche .album-arte,.noche .portada-arte{
  background-color:var(--texto-app) !important;
  background-image:
    radial-gradient(circle at 20% 30%,#fff 1.4px,transparent 2.4px),
    radial-gradient(circle at 70% 20%,var(--limon) 1.8px,transparent 2.8px),
    radial-gradient(circle at 85% 70%,#fff 1.1px,transparent 2.1px),
    radial-gradient(circle at 40% 80%,var(--cielo) 1.5px,transparent 2.5px) !important;
  background-size:110px 110px,160px 160px,85px 85px,130px 130px !important;
}

/* Botones */
.redondo{
  display:inline-grid;place-items:center;width:56px;height:56px;flex:none;
  border:var(--borde);border-radius:50%;background:var(--superficie);color:var(--texto-app);transition:transform .08s;
}
.redondo[aria-pressed="true"]{background:var(--limon)}
.play-grande{
  display:inline-grid;place-items:center;width:64px;height:64px;flex:none;border-radius:50%;
  border:var(--borde);background:var(--tinta);color:var(--blanco);transition:transform .08s;
}
.play-grande .ico{width:30px;height:30px}
.pildora{
  display:inline-flex;align-items:center;gap:8px;min-height:56px;padding:0 18px;border:var(--borde);border-radius:999px;
  background:var(--superficie);color:var(--texto-app);font:700 .95rem/1 var(--cuerpo);
}
.pildora[hidden]{display:none}
.pildora.guardada{background:var(--limon)}
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 22px;
  border:var(--borde);border-radius:999px;background:var(--superficie);color:var(--texto-app);font:800 1.05rem/1 var(--titular);
}
.boton-limon{background:var(--limon)}
.redondo:active,.play-grande:active,.pildora:active,.boton:active,.chip:active{transform:scale(.94)}

/* Barra superior e inicio */
.appbar{display:flex;align-items:center;gap:10px;margin:2px 0 16px}
.appbar-cara{width:40px;height:40px}
.appbar-marca{flex:1;font:800 1.4rem/1 var(--titular);letter-spacing:-.03em}
.appbar-marca .sticker{margin-left:6px;transform:rotate(8deg) translateY(-6px)}
.appbar-avatar{width:48px;height:48px;border:var(--borde);border-radius:50%;background:var(--cielo-suave);overflow:hidden;display:grid;place-items:center}
.appbar-avatar img{width:86%;height:86%;object-fit:contain}

.seccion{margin-top:24px}
.seccion h2{font-size:1.3rem;margin-bottom:12px}

/* Chips de mundos: "Todo" + uno por mundo, con la carita de su personaje */
.chips-mundos{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 16px;padding:2px 16px 4px;scrollbar-width:none}
.chips-mundos::-webkit-scrollbar{display:none}
.chip-mundo{display:flex;align-items:center;gap:6px;flex:none;min-height:46px;padding:0 16px 0 6px;white-space:nowrap;
  border:var(--borde);border-radius:999px;background:var(--superficie);font:700 .95rem/1 var(--cuerpo)}
.chip-mundo:first-child{padding:0 18px}
.chip-mundo img{width:34px;height:34px;object-fit:contain}
.chip-mundo.on{background:var(--limon);color:var(--tinta)}
.chip-mundo:active,.rapido:active{transform:scale(.96)}

/* Accesos rápidos: favoritos, la colección del momento y lo último que sonó */
.rapidos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rapido{position:relative;display:flex;align-items:center;gap:10px;min-height:62px;padding-right:10px;text-align:left;text-decoration:none;
  border:var(--borde);border-radius:var(--r-chico);background:var(--superficie)}
.rapido-arte{display:grid;place-items:center;align-self:stretch;width:58px;flex:none;border-right:var(--borde);border-radius:14px 0 0 14px;background:var(--fondo);overflow:hidden}
.rapido-arte img{width:46px;height:46px;object-fit:contain}
.rapido-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 .9rem/1.15 var(--cuerpo)}
.rapido .sticker{position:absolute;top:-11px;right:-6px;font-size:.62rem;transform:rotate(6deg)}

/* Franjas de mundo: color a todo el ancho, personaje asomado y estante que se desliza de lado */
.banda-mundo{position:relative;margin:50px -16px 0;padding:18px 0 20px 16px;scroll-margin-top:52px;
  border-top:var(--borde);border-bottom:var(--borde);background:var(--fondo);color:var(--texto)}
.banda-mundo.noche{background-color:var(--tinta) !important;color:var(--blanco)}
.banda-pj{position:absolute;right:16px;top:-44px;height:90px;width:auto;pointer-events:none}
.banda-mundo h2{padding-right:110px;font-size:1.55rem}
.banda-n{margin:4px 0 14px;font-size:.85rem;font-weight:700;opacity:.85}
.estante{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;padding:4px 16px 4px 0;scrollbar-width:none}
.estante::-webkit-scrollbar{display:none}
.estante .album{flex:0 0 148px;scroll-snap-align:start;padding:0;border:0;background:none}
.banda-mundo .album-arte{height:132px;border:var(--borde);background:var(--blanco) !important;background-image:none !important}
.banda-mundo .album-pie{padding:8px 2px 0}
.banda-mundo .album-n{color:inherit;opacity:.8}
.banda-mundo .album-offline{top:-8px;right:-6px}
@media (min-width:552px){.banda-mundo{margin-left:0;margin-right:0;border:var(--borde);border-radius:var(--r-grande)}}
.album{position:relative;display:block;padding:8px;text-decoration:none;border:var(--borde);border-radius:var(--r);background:var(--superficie)}
.album-arte{display:grid;place-items:center;height:132px;border-radius:var(--r-chico);background:var(--fondo);overflow:hidden}
.album-arte img{height:116px;width:auto;max-width:88%;object-fit:contain}
.album-pie{display:block;padding:10px 6px 4px}
.album-nombre{display:block;font:800 1.05rem/1.1 var(--titular);letter-spacing:-.02em}
.album-n{display:block;margin-top:4px;font-size:.8rem;color:var(--tenue)}
.album.noche{background:var(--superficie) !important;background-image:none !important}
.album-offline{position:absolute;top:2px;right:-4px}
.album-offline[hidden]{display:none}

/* Vistas con título (buscar, papitos) */
.titulo-vista{margin:6px 0 16px}
.titulo-vista h1{font-size:2.1rem}
.buscador{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 18px;border:var(--borde);border-radius:999px;background:var(--superficie)}
.buscador input{flex:1;min-width:0;border:0;background:none;font:500 1.05rem var(--cuerpo);color:var(--texto-app);outline:none}
.vacio{margin:24px 4px;font-size:1rem;line-height:1.45;color:var(--tenue)}

/* Colección */
.vista-top{margin-bottom:12px}
.portada{position:relative;padding:12px;border:var(--borde);border-radius:var(--r-grande);background:var(--fondo);color:var(--texto)}
.portada-arte{display:grid;place-items:center;height:200px;border:var(--borde);border-radius:var(--r);background:rgba(255,255,255,.28);overflow:hidden}
.portada-arte img{height:178px;width:auto;max-width:86%;object-fit:contain}
.portada-txt{padding:14px 6px 6px}
.portada-txt h1{font-size:2rem}
.portada-txt p{margin:6px 0 0;font-size:.92rem;opacity:.85}
.portada-acciones{display:flex;align-items:center;gap:10px;padding:8px 6px 4px}
.portada-acciones .play-grande{background:var(--superficie);color:var(--texto-app)}
.temporizador{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 4px}
.temporizador-t{flex:1 1 100%;font-weight:700;font-size:.9rem}
.chip{flex:1 1 0;min-height:56px;padding:0 6px;white-space:nowrap;border:var(--borde);border-radius:999px;background:var(--superficie);color:var(--texto-app);font:700 .95rem/1 var(--cuerpo)}
.chip.on{background:var(--limon)}
.lista{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.lista li{display:flex;align-items:center;gap:4px}
.fila{
  flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:66px;padding:9px 12px;text-align:left;
  border:var(--borde);border-radius:var(--r);background:var(--superficie);
}
.fila.sonando{background:var(--limon-suave)}
.fila-play{display:grid;place-items:center;width:42px;height:42px;flex:none;border:var(--borde);border-radius:50%;background:var(--fondo,var(--azul-suave));color:var(--texto,var(--tinta))}
.fila-play .ico{width:18px;height:18px}
.fila-txt{flex:1;min-width:0;display:grid;gap:3px}
.fila-t{font-weight:700;font-size:1.02rem;line-height:1.2;overflow-wrap:anywhere}
.fila-s{font-size:.8rem;color:var(--tenue)}
.corazon{display:grid;place-items:center;width:56px;height:56px;flex:none;color:var(--texto-app)}

/* Reproductor */
.player{
  position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;overflow-y:auto;
  padding:max(14px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));
}
.player>*{width:100%;max-width:440px}
.player.noche{color:var(--blanco)}
.player-top{display:flex;align-items:center;gap:8px}
.player-col{flex:1;text-align:center;font:800 1rem/1.1 var(--titular)}
.player-arte{
  position:relative;flex:none;display:grid;place-items:center;aspect-ratio:1;width:min(78vw,340px) !important;margin:18px 0 16px;
  border:var(--borde);border-radius:var(--r-grande);background:var(--fondo);
}
.player.noche .player-arte{border-color:var(--blanco)}
.player-arte .sticker{position:absolute;top:-12px;left:-10px;transform:rotate(-9deg);font-size:.82rem}
.bailarin{width:76%;height:auto;max-height:76%;object-fit:contain}
.player-info{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.player-titulo{font-size:1.75rem}
.player-sub{margin:6px 0 0;font-size:.9rem;opacity:.75}
.avance{
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;margin:20px 0 8px;border-radius:999px;
  background:linear-gradient(90deg,var(--tinta) var(--p,0%),var(--linea) var(--p,0%));
}
.player.noche .avance{background:linear-gradient(90deg,var(--limon) var(--p,0%),rgba(255,255,255,.3) var(--p,0%))}
.avance::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border:var(--borde);border-radius:50%;background:var(--superficie)}
.avance::-moz-range-thumb{width:20px;height:20px;border:var(--borde);border-radius:50%;background:var(--superficie)}
.tiempos{display:flex;justify-content:space-between;font-size:.82rem;font-variant-numeric:tabular-nums;opacity:.8}
.controles{display:flex;justify-content:space-between;align-items:center;margin:18px 0 6px}
.controles .play-grande{width:84px;height:84px}
.controles .play-grande .ico{width:38px;height:38px}
.player.noche .play-grande{background:var(--limon);color:var(--texto-app)}
.pildora-letra{align-self:center;width:auto !important;margin-top:10px}
.player .temporizador{justify-content:center}
.player .temporizador-t{text-align:center}
.restante{margin:8px 0 0;text-align:center;font-size:.85rem}

/* Ecualizador: en el reproductor lo mueve la música real; en el mini es una animación */
.eq{display:inline-flex;align-items:flex-end;gap:3px;height:28px;flex:none}
.eq i{display:block;width:5px;height:100%;border-radius:3px;background:var(--azul);transform-origin:50% 100%;transform:scaleY(.25)}
.player.noche .eq i{background:var(--limon)}
.mini .eq i,.eq.auto i{animation:eq 0.9s ease-in-out infinite alternate}
.mini .eq i:nth-child(2),.eq.auto i:nth-child(2){animation-delay:-.3s}
.mini .eq i:nth-child(3),.eq.auto i:nth-child(3){animation-delay:-.6s}
.mini .eq i:nth-child(4),.eq.auto i:nth-child(4){animation-delay:-.15s}
.mini .eq i:nth-child(5),.eq.auto i:nth-child(5){animation-delay:-.45s}
@keyframes eq{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.mini .eq{height:22px}

/* Cuentos interactivos */
.turno{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;justify-content:center;padding:16px 16px max(20px,env(safe-area-inset-bottom))}
.turno[hidden]{display:none}
.turno-tarjeta{
  position:relative;width:100%;max-width:460px;padding:26px 20px 20px;text-align:center;color:var(--texto-app);
  background:var(--superficie);border:var(--borde);border-radius:var(--r-grande);animation:asomar .35s cubic-bezier(.2,1.4,.4,1);
}
.turno-tarjeta .sticker{position:absolute;top:-14px;left:18px;font-size:.9rem}
.turno-texto{margin:0 0 18px;font-size:clamp(1.7rem,7vw,2.3rem)}
.turno-tarjeta .boton{width:100%;min-height:64px;font-size:1.3rem}
@keyframes asomar{from{transform:translateY(40px) scale(.96);opacity:0}to{transform:none;opacity:1}}

/* Pregunta después de la canción */
.pregunta{position:fixed;inset:0;z-index:16;display:flex;align-items:flex-end;justify-content:center;padding:16px 16px max(20px,env(safe-area-inset-bottom));background:rgba(27,26,58,.35)}
.pregunta[hidden]{display:none}
.pregunta-tarjeta{
  position:relative;width:100%;max-width:460px;padding:30px 18px 18px;text-align:center;color:var(--texto-app);overflow:hidden;
  background:var(--superficie);border:var(--borde);border-radius:var(--r-grande);animation:asomar .35s cubic-bezier(.2,1.4,.4,1);
}
.pregunta-tarjeta>.sticker{position:absolute;top:10px;left:16px;font-size:.85rem}
.pregunta-tarjeta h2{margin:14px 0 18px;font-size:clamp(1.6rem,7vw,2.2rem)}
.pregunta-opciones{display:grid;gap:10px}
.opcion{min-height:64px;padding:0 18px;border:var(--borde);border-radius:var(--r);background:var(--azul-suave);font:800 1.4rem/1.1 var(--titular);transition:transform .1s}
.opcion:active{transform:scale(.97)}
.opcion.acierto{background:var(--limon);animation:salto .5s cubic-bezier(.2,1.6,.4,1)}
.opcion.apagada{opacity:.35;text-decoration:line-through}
.opcion.acierto:disabled{opacity:1}
@keyframes salto{0%{transform:scale(1)}40%{transform:scale(1.08) rotate(-2deg)}100%{transform:scale(1)}}
.pregunta-eco{min-height:1.4em;margin:12px 0 6px;font:800 1.2rem/1.2 var(--titular)}
.pregunta-pie{display:flex;justify-content:center;gap:10px}
.pregunta-pie [hidden]{display:none}
.confeti{position:absolute;inset:0;pointer-events:none}
.confeti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:confeti 1.4s ease-in forwards}
@keyframes confeti{to{transform:translateY(520px) rotate(var(--giro));opacity:0}}

/* Karaoke */
.letra-texto.es-karaoke{display:grid;gap:14px;white-space:normal}
.kara-linea{padding:6px 10px;border-radius:var(--r-chico);color:var(--tenue);transition:opacity .2s,transform .2s;font-size:.8em}
.kara-linea.pasada{opacity:.35}
.kara-linea.actual{color:var(--texto-app);background:var(--limon-suave);font-size:1em;transform:scale(1.02)}
.kara-p{transition:background .12s}
.kara-linea.actual .kara-p.luz{background:var(--limon);border-radius:6px;box-shadow:0 0 0 2px var(--limon)}

/* Marcador */
.campo select,.campo textarea{border:var(--borde);border-radius:var(--r-chico);background:var(--superficie);font:500 1rem var(--cuerpo);color:var(--texto-app);padding:12px 14px}
.campo select{min-height:56px}
.campo textarea{resize:vertical;font-family:ui-monospace,monospace;font-size:.9rem}
.modos{display:flex;gap:10px;margin:16px 0 8px}
.modos .chip[aria-pressed="true"]{background:var(--limon)}
.marcador-panel{margin:14px 0;padding:18px;border:var(--borde);border-radius:var(--r);background:var(--superficie);text-align:center}
.marcador-t{font:800 2rem/1 var(--titular);font-variant-numeric:tabular-nums}
.marcador-linea{margin:10px 0 0;font-size:1.1rem;line-height:1.4}
.marcador-botones{display:flex;gap:10px;justify-content:center}
.marcar{display:block;width:100%;min-height:110px;margin:14px 0 18px;border:var(--borde);border-radius:var(--r-grande);background:var(--chicle);color:var(--blanco);font:800 2rem/1 var(--titular)}
.marcar:active{transform:scale(.97)}

/* Letra */
.letra{position:fixed;inset:0;z-index:20;display:flex;padding:16px;background:rgba(27,26,58,.55)}
.letra[hidden]{display:none}
.letra-tarjeta{
  position:relative;width:100%;max-width:680px;max-height:100%;margin:auto;overflow:auto;padding:72px 22px 28px;
  background:var(--superficie);border:var(--borde);border-radius:var(--r-grande);
}
.letra-tarjeta .redondo{position:absolute;right:14px;top:14px}
.letra-texto{margin:0;white-space:pre-wrap;font:700 clamp(1.75rem,6vw,2.6rem)/1.35 var(--cuerpo)}

/* Mini reproductor: tarjeta flotante sobre las pestañas */
.mini{
  position:fixed;left:12px;right:12px;bottom:calc(var(--alto-tab) + 18px + env(safe-area-inset-bottom));z-index:10;
  display:flex;align-items:center;gap:8px;max-width:496px;margin:0 auto;padding:8px;
  border:var(--borde);border-radius:var(--r);background:var(--superficie);
}
.mini[hidden]{display:none}
.mini-abrir{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:56px;text-align:left}
.mini-arte{display:grid;place-items:center;width:52px;height:52px;flex:none;border:var(--borde);border-radius:var(--r-chico);background:var(--fondo);overflow:hidden}
.mini-arte img{width:86%;height:86%;object-fit:contain}
.mini-txt{flex:1;min-width:0;display:grid;gap:2px}
.mini-t{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-s{font-size:.78rem;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .redondo{width:52px;height:52px}

/* Pestañas */
.tabbar{
  position:fixed;left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));z-index:11;
  display:grid;grid-template-columns:repeat(4,1fr);max-width:496px;height:var(--alto-tab);margin:0 auto;padding:6px;
  border:var(--borde);border-radius:var(--r-grande);background:var(--superficie);
}
body[data-vista="play"] .tabbar{display:none}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--tenue);font:700 .74rem/1 var(--cuerpo);border-radius:20px}
.tab .ico{width:26px;height:26px;padding:2px 10px;box-sizing:content-box;border-radius:999px}
.tab[aria-current="page"]{color:var(--texto-app)}
.tab[aria-current="page"] .ico{background:var(--limon)}

/* Zona de papitos */
.puerta{text-align:center;padding:8px 4px}
.puerta-pj{width:150px;margin:0 auto 6px;display:block}
.puerta p{margin:0 0 14px;color:var(--tenue);font-size:1.02rem;line-height:1.4}
.puerta h2{font-size:2rem;margin-bottom:22px}
.puerta-opciones{display:flex;gap:12px;justify-content:center}
.puerta-opciones .boton{flex:1;max-width:110px;font:800 1.6rem/1 var(--titular)}
.papitos-promesa{margin:0 0 18px;padding:14px 16px;border:var(--borde);border-radius:var(--r);background:var(--limon-suave);line-height:1.45}
.papitos-sinred{margin:0 0 14px;padding:12px 14px;border-radius:var(--r-chico);background:var(--papaya-suave);font-weight:700}
.papitos-sinred[hidden]{display:none}
.papitos-lista{display:grid;gap:12px}
.papitos-tarjeta{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px;color:var(--texto-app);text-decoration:none;border:var(--borde);border-radius:var(--r);background:var(--superficie)}
.papitos-tarjeta.destacada{background:var(--limon)}
.papitos-ico{display:grid;place-items:center;width:52px;height:52px;flex:none;border:var(--borde);border-radius:var(--r-chico);background:var(--azul);color:var(--blanco)}
.papitos-tarjeta.destacada .papitos-ico{background:var(--tinta)}
.papitos-txt{display:grid;gap:4px;line-height:1.3}
.papitos-txt strong{font:800 1.15rem/1.1 var(--titular)}
.papitos-txt span{font-size:.92rem;color:var(--tenue)}
.papitos-tarjeta.destacada .papitos-txt span{color:var(--texto-app)}

/* Modo casa: perfiles */
.centrado{text-align:center}
.quien{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;margin-top:22px}
.quien-perfil{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px}
.quien-cara{display:grid;place-items:center;width:132px;height:132px;border:var(--borde);border-radius:50%;background:var(--cielo-suave);overflow:hidden;transition:transform .12s}
.quien-cara img{width:84%;height:84%;object-fit:contain}
.quien-perfil:active .quien-cara{transform:scale(.94) rotate(-3deg)}
.quien-nombre{font:800 1.25rem/1.1 var(--titular);letter-spacing:-.02em}
.quien-profe .quien-cara{background:var(--limon-suave)}
.quien-profe .quien-nombre{color:var(--tenue);font-size:1.05rem}
.papitos-nota{margin:-4px 0 12px;color:var(--tenue);line-height:1.4}
.perfiles-lista{display:grid;gap:10px}
.perfil-fila{display:flex;align-items:center;gap:12px;min-height:68px;padding:8px 14px 8px 8px;text-decoration:none;border:var(--borde);border-radius:var(--r);background:var(--superficie)}
.perfil-cara{display:grid;place-items:center;width:50px;height:50px;flex:none;border:var(--borde);border-radius:50%;background:var(--cielo-suave);overflow:hidden}
.perfil-cara img{width:86%;height:86%;object-fit:contain}
.perfil-fila strong{flex:1;font:800 1.1rem/1.1 var(--titular)}
.perfil-editar{font-size:.85rem;color:var(--tenue)}
.perfil-nuevo{justify-content:center;text-decoration:none;background:var(--limon)}
.campo{display:grid;gap:8px;font-weight:700}
.campo input{min-height:56px;padding:0 18px;border:var(--borde);border-radius:999px;background:var(--superficie);font:600 1.1rem var(--cuerpo);color:var(--texto-app)}
.campo-t{margin:20px 0 10px;font-weight:700}
.avatares{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.avatar-op{display:grid;place-items:center;aspect-ratio:1;border:var(--borde);border-radius:50%;background:var(--superficie);overflow:hidden}
.avatar-op img{width:82%;height:82%;object-fit:contain}
.avatar-op[aria-pressed="true"]{background:var(--limon);box-shadow:0 0 0 4px var(--limon-suave),0 0 0 6px var(--tinta)}
.editor-acciones{display:grid;gap:12px;margin-top:24px}

/* Avisos */
.aviso{
  position:fixed;left:50%;top:max(16px,env(safe-area-inset-top));z-index:30;transform:translateX(-50%);
  width:max-content;max-width:min(92vw,480px);padding:14px 18px;font-weight:700;
  border:var(--borde);border-radius:var(--r-chico);background:var(--papaya-suave);
}
.aviso[hidden]{display:none}

/* Ajustes */
.ajuste{padding:16px;border:var(--borde);border-radius:var(--r);background:var(--superficie)}
.ajuste h2{display:flex;align-items:center;gap:8px;font-size:1.3rem}
.ajuste p{line-height:1.45}

/* Karaoke en modo práctica (para la sala) */
.practica{position:sticky;bottom:-28px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px -22px -28px;padding:12px;
  border-top:var(--borde);background:var(--superficie)}
.practica .pildora{font-size:.9rem}
.practica .pildora[aria-pressed="true"]{background:var(--limon);color:var(--tinta)}

/* Modo nocturno: fondo oscuro y cálido, menos brillo y menos luz azul */
:root[data-tema="noche"]{
  --fondo-app:#15132A; --superficie:#211E3A; --texto-app:#F2E9DB; --trazo:#4F4A78;
  --tenue:#A9A1C2; --linea:#38345A;
}
[data-tema="noche"] #manchas i:nth-child(1){background:#1D2944}
[data-tema="noche"] #manchas i:nth-child(2){background:#32203A}
[data-tema="noche"] #manchas i:nth-child(3){background:#3A2924}
[data-tema="noche"] #manchas i:nth-child(4){background:#283220}
[data-tema="noche"] .album-arte,[data-tema="noche"] .rapido-arte,[data-tema="noche"] .portada,[data-tema="noche"] .player-arte,
[data-tema="noche"] .mini-arte,[data-tema="noche"] .banda-mundo,[data-tema="noche"] .fila-play,[data-tema="noche"] .quien-cara,
[data-tema="noche"] .perfil-cara,[data-tema="noche"] .appbar-avatar{filter:brightness(.82) saturate(.8)}
[data-tema="noche"] .play-grande{background:var(--limon);color:var(--tinta)}
[data-tema="noche"] .portada-acciones .play-grande{background:var(--superficie);color:var(--texto-app)}
[data-tema="noche"] .avance{background:linear-gradient(90deg,var(--limon) var(--p,0%),var(--linea) var(--p,0%))}
[data-tema="noche"] .fila.sonando,[data-tema="noche"] .kara-linea.actual{background:#2C3424}
[data-tema="noche"] .papitos-promesa{background:#262F1E}
[data-tema="noche"] .aviso,[data-tema="noche"] .papitos-sinred{background:#3A2A24}
[data-tema="noche"] .opcion{background:#262A48}
[data-tema="noche"] .quien-cara,[data-tema="noche"] .appbar-avatar,[data-tema="noche"] .perfil-cara{background:#1D2944}
[data-tema="noche"] .quien-profe .quien-cara{background:#283220}
[data-tema="noche"] .letra{background:rgba(8,7,20,.7)}

/* Bienvenida (solo la primera vez) */
body[data-vista="bienvenida"] .tabbar,body[data-vista="bienvenida"] .mini{display:none}
body[data-vista="bienvenida"]{padding-bottom:0}
.bienvenida{display:flex;flex-direction:column;align-items:center;min-height:calc(100dvh - 32px);padding:28px 4px 8px;text-align:center}
.bienvenida-globo{position:relative;padding:22px 20px;border:var(--borde);border-radius:var(--r-grande);background:var(--superficie)}
.bienvenida-globo::after{content:"";position:absolute;left:50%;bottom:-13px;width:22px;height:22px;transform:translateX(-50%) rotate(45deg);
  background:var(--superficie);border-right:var(--borde);border-bottom:var(--borde)}
.bienvenida-globo h1{font-size:2rem;margin-bottom:10px}
.bienvenida-globo p{margin:0;font-size:1.1rem;line-height:1.45}
.bienvenida-pj{width:min(62vw,250px);margin:26px 0 8px}
.bienvenida-promesa{margin:6px 0 18px;color:var(--tenue);font-weight:700}
.bienvenida-boton{width:100%;max-width:400px;min-height:64px;font-size:1.25rem;margin-top:auto}

/* Mensaje del Tío IA (Zona de papitos) */
.mensaje-tio{display:grid;grid-template-columns:64px 1fr;column-gap:12px;align-items:center;margin:0 0 18px;padding:14px 16px;border:var(--borde);border-radius:var(--r);background:var(--superficie)}
.mensaje-tio>div{display:contents}
.mensaje-tio-pj{width:64px}
.mensaje-tio h2{font-size:1.2rem}
.mensaje-tio p{grid-column:1/-1}
.mensaje-tio p:first-of-type{margin-top:12px}
.mensaje-tio p{margin:0 0 8px;line-height:1.5}
.mensaje-tio-firma{font-weight:700;color:var(--tenue)}

/* Pantalla de escucha: oscura y quieta mientras suena la música */
.escucha{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:24px;background:#0E0D1E;color:rgba(255,255,255,.7);animation:apagar 1.2s ease-out}
.escucha[hidden]{display:none}
@keyframes apagar{from{opacity:0}to{opacity:1}}
.escucha-silueta{width:min(56vw,240px);filter:brightness(0) invert(1);opacity:.09}
.escucha-titulo{margin:0;font:700 1.05rem/1.3 var(--cuerpo);text-align:center;opacity:.6}
.escucha-boton{display:grid;place-items:center;width:120px;height:120px;border:2px solid rgba(255,255,255,.3);border-radius:50%;color:rgba(255,255,255,.75)}
.escucha-boton .ico{width:54px;height:54px}
.escucha-ayuda{margin:0;font-size:.85rem;opacity:.35}
body.escuchando{overflow:hidden}

/* Modo calma (DUA): colores suaves, sin movimiento, letra más grande y fácil de leer */
:root[data-calma="si"]{
  --limon:#D6EEA4; --azul:#A9B8F0; --papaya:#F6BFA6; --chicle:#F1B3CF; --cielo:#A8E0E7;
  --titular:"Atkinson Hyperlegible",system-ui,sans-serif; --cuerpo:"Atkinson Hyperlegible",system-ui,sans-serif;
  font-size:108%;
}
[data-calma="si"] *,[data-calma="si"] *::before,[data-calma="si"] *::after{animation:none !important;transition:none !important}
[data-calma="si"] h1,[data-calma="si"] h2,[data-calma="si"] .album-nombre,[data-calma="si"] .appbar-marca{letter-spacing:0}
[data-calma="si"] #manchas i{opacity:.45}
[data-calma="si"] .player .eq,[data-calma="si"] .mini .eq,[data-calma="si"] .confeti{display:none}
[data-calma="si"] .sticker{transform:none}
[data-calma="si"] .banda-mundo:not(.noche){color:var(--tinta)}

@media (prefers-reduced-motion:reduce){
  .turno-tarjeta,.eq i{animation:none !important}
  .redondo,.play-grande{transition:none}
}