/* Reproductor incrustable (/embed/<ID>). Tiene que verse bien en 220 px de alto y entre 280 y 1200
   de ancho: la cabecera siempre visible, la lista con scroll INTERNO y nunca scroll de la página
   (el iframe lleva scrolling="no"). Claro/oscuro según el sistema. */
:root{
  --bg:#F6F6F1; --surface:#FFFFFF; --raised:#ECECE4; --line:#DCDCD2;
  --fg:#1C1C22; --muted:#5E5E57; --faint:#8C8C84;
  --accent:#4A6325; --accent-solid:#5A762D;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#1C1C22; --surface:#24242C; --raised:#2E2E38; --line:#3A3A46;
  --fg:#F2F2EE; --muted:#A3A39B; --faint:#6E6E78;
  --accent:#9CC45A; --accent-solid:#5A762D;
  color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--bg);color:var(--fg);font:14px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
img{display:block}

.em{height:100%;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}

/* cabecera: carátula · play · texto · logo */
.cab{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:10px 12px;position:relative;
  background:var(--surface);border-bottom:1px solid var(--line)}
.portada{width:64px;height:64px;border-radius:8px;overflow:hidden;background:var(--raised);flex:0 0 auto}
.portada img{width:100%;height:100%;object-fit:cover}
.play{width:42px;height:42px;border-radius:50%;background:var(--accent-solid);color:#fff;flex:0 0 auto;
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.play svg{width:16px;height:16px;fill:currentColor;margin-left:2px}
.play.sonando svg{margin-left:0}
.girando{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
  display:block;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.tx{min-width:0;flex:1;padding-right:104px}  /* sitio para el logo (95 px a 14 de alto), arriba a la derecha */
.linea{margin:0;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titulo{margin:1px 0 0;font-size:15.5px;font-weight:700;line-height:1.2;letter-spacing:-.01em;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.titulo a:hover{color:var(--accent)}
.prog{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:10.5px;color:var(--faint);
  font-variant-numeric:tabular-nums;margin-right:-104px}
.prog .t{flex:0 0 auto;min-width:28px}
.prog .t:last-child{text-align:right}
.barra{flex:1;height:4px;border-radius:3px;background:var(--raised);overflow:hidden;cursor:pointer;position:relative}
.barra::before{content:"";position:absolute;inset:-6px 0}   /* zona de clic más alta que la barra */
.barra i{display:block;height:100%;width:0;background:var(--accent-solid)}
.aviso{margin:4px 0 0;font-size:11px;color:var(--muted);min-height:0}
.aviso:empty{display:none}
.logo{position:absolute;top:10px;right:12px;opacity:.9}
.logo:hover{opacity:1}
.logo .ancho{height:14px;width:auto}
.logo .estrecho{display:none;width:22px;height:22px}
/* en oscuro, el mismo realce que en la web para que la hoja del logo no se pierda */
@media (prefers-color-scheme:dark){.logo img{filter:drop-shadow(0 0 .6px rgba(242,242,238,.55)) drop-shadow(0 0 5px rgba(242,242,238,.10))}}

/* lista de coplas: ocupa el resto y hace scroll por dentro */
.lista{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:4px 0}
.pista{display:flex;align-items:center;gap:10px;width:100%;padding:7px 12px;text-align:left;min-height:34px}
.pista:hover{background:var(--surface)}
.pista .n{width:20px;flex:0 0 auto;font-size:11.5px;color:var(--faint);text-align:right;font-variant-numeric:tabular-nums}
.pista .eq{display:none;color:var(--accent)}
.pista .eq svg{width:10px;height:10px;fill:currentColor}
.pista .nom{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pista .dur{flex:0 0 auto;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.pista.activa .num{display:none}
.pista.activa .eq{display:inline-block}
.pista.activa .nom{color:var(--accent);font-weight:600}

/* copla: solo la cabecera, centrada y algo más grande */
.tipo-single .em{justify-content:center}
.tipo-single .cab{flex:1 1 auto;border-bottom:0}
.tipo-single .portada{width:clamp(64px,22vw,120px);height:clamp(64px,22vw,120px)}
.tipo-single .titulo{font-size:17px}

/* estrecho (280-399 px): carátula y play más pequeños, el logo pasa a ser solo el icono */
@media (max-width:399px){
  .cab{gap:9px;padding:9px 10px}
  .portada{width:52px;height:52px}
  .play{width:38px;height:38px}
  .tx{padding-right:26px}
  .prog{margin-right:-26px}
  .logo{top:8px;right:9px}
  .logo .ancho{display:none}
  .logo .estrecho{display:block}
  .titulo{font-size:14px}
  .tipo-single .portada{width:64px;height:64px}
}
/* ancho (>= 700 px): un poco más de aire */
@media (min-width:700px){
  .cab{padding:12px 16px;gap:14px}
  .portada{width:72px;height:72px}
  .pista{padding:7px 16px}
  .logo .ancho{height:16px}
  .tx{padding-right:120px}
  .prog{margin-right:-120px}
}

/* no disponible */
.nodisp{display:grid;place-items:center;text-align:center;padding:16px}
.nodisp-caja{max-width:320px}
.nodisp .logo{position:static;display:inline-block;margin-bottom:10px}
.nodisp .logo img{height:18px;width:auto}
.nodisp p{margin:4px 0;color:var(--muted);font-size:13px}
.nodisp strong{color:var(--fg);font-size:15px}