/* Música del Tío IA · Sorpréndeme, mixes y listas de la profe. Mismo lenguaje que app.css:
   contornos de 2px, colores planos y stickers inclinados. */

/* Sorpréndeme: un botón ancho bajo los chips de mundos */
.sorprendeme{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;margin:0 0 16px;padding:8px 10px 8px 8px;text-align:left;
  border:var(--borde);border-radius:var(--r);background:var(--chicle);color:var(--blanco)}
.sorprendeme-ico{display:grid;place-items:center;width:54px;height:54px;flex:none;border:var(--borde);border-radius:var(--r-chico);background:var(--limon);color:var(--tinta);transform:rotate(-6deg)}
.sorprendeme-ico .ico{width:28px;height:28px}
.sorprendeme-txt{flex:1;min-width:0;display:grid;gap:3px}
.sorprendeme-txt strong{font:800 1.35rem/1 var(--titular);letter-spacing:-.03em}
.sorprendeme-txt span{font-size:.85rem;font-weight:700;opacity:.92}
.sorprendeme-play{display:grid;place-items:center;width:48px;height:48px;flex:none;border:var(--borde);border-radius:50%;background:var(--superficie);color:var(--texto-app)}
.sorprendeme:active{transform:scale(.98)}

/* Mixes y listas: estante horizontal de tarjetas chicas */
.mis-listas{margin-top:22px}
.mis-listas h2{font-size:1.3rem;margin-bottom:10px}
.mis-listas .estante{margin-right:-16px;padding-top:12px}
.lista-tarjeta{position:relative;flex:0 0 128px;display:flex;flex-direction:column;gap:2px;padding:0 0 6px;text-align:left;text-decoration:none;scroll-snap-align:start}
.lista-tarjeta-arte{display:grid;place-items:center;height:112px;margin-bottom:6px;border:var(--borde);border-radius:var(--r-chico);background:var(--fondo);color:var(--texto);overflow:hidden}
.lista-tarjeta-arte img{height:92px;width:auto;max-width:88%;object-fit:contain}
.lista-tarjeta-arte .ico{width:46px;height:46px}
.lista-tarjeta-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:800 .98rem/1.1 var(--titular);letter-spacing:-.02em}
.lista-tarjeta-s{font-size:.78rem;color:var(--tenue)}
.lista-tarjeta .sticker{position:absolute;top:-10px;right:-4px;font-size:.62rem;transform:rotate(7deg)}
.lista-nueva .lista-tarjeta-arte{border-style:dashed;background:var(--superficie);color:var(--texto-app)}
.lista-tarjeta:active{transform:scale(.96)}

/* Botón "+" en cada fila de canción */
.mas-lista{display:grid;place-items:center;width:44px;height:56px;flex:none;color:var(--texto-app)}
.mas-lista .ico{width:18px;height:18px;padding:6px;box-sizing:content-box;border:var(--borde);border-radius:50%}

/* Vista de una lista propia */
.lista-arte .ico{width:110px;height:110px;color:var(--texto)}
.lista-top{display:flex;align-items:center;justify-content:space-between}
.lista-top .pildora .ico,.portada-acciones .pildora .ico{width:20px;height:20px}
.lista-nombre{margin-bottom:4px}
.lista-nombre span{font-size:.85rem}
.lista-orden{display:flex;gap:4px;flex:none}
.redondo.chico{width:44px;height:44px}
.redondo.chico .ico{width:20px;height:20px}

/* Hoja "Agregar a una lista" / "Nueva lista": tarjeta que sube desde abajo */
.hoja{position:fixed;inset:0;z-index:25;display:flex;align-items:flex-end;justify-content:center;padding:16px 16px max(20px,env(safe-area-inset-bottom));background:rgba(27,26,58,.45)}
.hoja[hidden]{display:none}
.hoja-tarjeta{position:relative;width:100%;max-width:460px;max-height:86dvh;overflow:auto;padding:26px 18px 18px;color:var(--texto-app);
  background:var(--superficie);border:var(--borde);border-radius:var(--r-grande);animation:asomar .3s cubic-bezier(.2,1.4,.4,1)}
.hoja-tarjeta>.sticker{position:absolute;top:12px;left:16px}
.hoja-tarjeta h2{margin:22px 56px 14px 0;font-size:1.5rem;overflow-wrap:anywhere}
.hoja-cerrar{position:absolute;top:12px;right:12px;width:48px;height:48px}
.hoja-listas{display:grid;gap:8px;margin-bottom:16px}
.hoja-fila{display:flex;align-items:center;gap:12px;min-height:60px;padding:6px 10px 6px 6px;text-align:left;border:var(--borde);border-radius:var(--r);background:var(--superficie)}
.hoja-fila[aria-pressed="true"]{background:var(--limon-suave)}
.hoja-arte{display:grid;place-items:center;width:46px;height:46px;flex:none;border:var(--borde);border-radius:var(--r-chico);background:var(--fondo);color:var(--texto)}
.hoja-t{flex:1;min-width:0;font:800 1.05rem/1.15 var(--titular);overflow-wrap:anywhere}
.hoja-check{display:grid;place-items:center;width:38px;height:38px;flex:none;border:var(--borde);border-radius:50%}
.hoja-fila[aria-pressed="true"] .hoja-check{background:var(--limon);color:var(--tinta)}
.hoja-nueva{display:grid;gap:10px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Modo nocturno y modo calma */
[data-tema="noche"] .sorprendeme{background:#5A2346}
[data-tema="noche"] .lista-tarjeta-arte,[data-tema="noche"] .hoja-arte,[data-tema="noche"] .sorprendeme-ico{filter:brightness(.82) saturate(.8)}
[data-tema="noche"] .hoja-fila[aria-pressed="true"]{background:#2C3424}
[data-calma="si"] .sorprendeme{background:var(--chicle-suave);color:var(--tinta)}
@media (prefers-reduced-motion:reduce){.hoja-tarjeta{animation:none}}