* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 400 var(--t-sm)/1.45 var(--font); overflow: hidden; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: var(--t-lg); font-weight: 700; margin: var(--s5) 0 var(--s3); }
h3 { font-size: var(--t-sm); margin: var(--s3) 0 var(--s2); color: var(--text-muted); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
button:disabled { opacity: .45; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#vista:focus { outline: none; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.saltar { position: fixed; left: var(--s2); top: -60px; z-index: 50; background: var(--accent); color: var(--on-accent); padding: var(--s2) var(--s3); border-radius: var(--r-sm); }
.saltar:focus { top: var(--s2); }
.ico { width: 22px; height: 22px; fill: currentColor; flex: none; }
.ico.mini { width: 13px; height: 13px; margin-right: var(--s1); color: var(--accent); }
input[type="search"], .campo input, .campo textarea, select {
  background: var(--surface-2); border: 1px solid var(--border-input); border-radius: var(--r-sm); padding: var(--s2) var(--s3); min-height: 38px;
}

/* Estructura */
#app { display: grid; height: 100dvh; gap: var(--s2); padding: var(--s2) var(--s2) 0;
  grid-template: "lat vista" 1fr "barra barra" var(--bar-h) / var(--side-w) minmax(0, 1fr); }
.panel-abierto #app { grid-template: "lat vista panel" 1fr "barra barra barra" var(--bar-h) / var(--side-w) minmax(0, 1fr) var(--panel-w); }
.caja { background: var(--surface); border-radius: var(--r-lg); padding: var(--s3); }
#lateral { grid-area: lat; display: flex; flex-direction: column; gap: var(--s2); min-height: 0; }
.crece { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#lateral-lib { flex: 1; overflow-y: auto; min-height: 0; }
.pie-lat { border-top: 1px solid var(--border); padding-top: var(--s2); display: flex; flex-wrap: wrap; }
#vista { grid-area: vista; overflow-y: auto; padding: var(--s5); min-height: 0; }
#panel { grid-area: panel; display: none; flex-direction: column; min-height: 0; }
.panel-abierto #panel { display: flex; }
#panel-cuerpo { flex: 1; overflow-y: auto; min-height: 0; }
.panel-top { display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s3); }
.cierra, .controles-movil { display: none; }
.marca { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-lg); font-weight: 800; padding: var(--s1) var(--s2) var(--s2); letter-spacing: -.02em; }
.marca:hover { text-decoration: none; }
.nav { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); font-weight: 700; color: var(--text-muted); border-radius: var(--r-sm); }
.nav:hover, .nav.on { color: var(--text); text-decoration: none; }
.nav.fino { font-weight: 500; padding: var(--s1) var(--s2); }
.cabeza-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }

/* Botones */
.ib { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-pill); color: var(--text-muted); flex: none; transition: color var(--fast); }
.ib:hover:not(:disabled) { color: var(--text); background: var(--hover); }
.ib.on { color: var(--accent); }
.ib.grande .ico { width: 28px; height: 28px; }
.corazon { color: var(--text-muted); }
.corazon .ico { fill: none; stroke: currentColor; stroke-width: 1.8; }
.corazon.on { color: var(--accent); }
.corazon.on .ico { fill: currentColor; }
#b-repeat[data-modo="one"]::after { content: "1"; font-size: 10px; font-weight: 800; margin-left: -4px; }
.boton { display: inline-flex; align-items: center; gap: var(--s2); background: var(--accent); color: var(--on-accent); font-weight: 700; border-radius: var(--r-pill); padding: var(--s2) var(--s4); min-height: 40px; cursor: pointer; }
.boton:hover { filter: brightness(1.08); text-decoration: none; }
.boton.sec { background: var(--surface-2); color: var(--text); }
.boton.fino { background: none; color: var(--text); border: 1px solid var(--border-input); min-height: 34px; padding: var(--s1) var(--s3); font-weight: 600; }
.boton.peligro { background: var(--danger); color: var(--bg); }
.boton.fino.peligro { background: none; color: var(--danger); border-color: var(--danger); }
.enlace { color: var(--text-muted); font-weight: 600; text-decoration: underline; }
.reproducir { width: 54px; height: 54px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: transform var(--fast); }
.reproducir:hover:not(:disabled) { transform: scale(1.05); }
.reproducir.peq { width: 40px; height: 40px; }
.chip { background: var(--surface-2); border-radius: var(--r-pill); padding: var(--s1) var(--s3); min-height: 32px; font-weight: 600; }
.chip.on { background: var(--text); color: var(--bg); }
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s3) 0; }

/* Portadas */
.portada { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; display: block; flex: none; background: var(--surface-2); }
.redonda { border-radius: 50%; }
.sin-imagen { display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 1.1em; background: linear-gradient(135deg, hsl(var(--h, 20) 45% 34%), hsl(calc(var(--h, 20) + 50) 45% 22%)); }
.corazon-grande { background: linear-gradient(135deg, var(--accent), hsl(330 55% 38%)); color: #fff; }

/* Filas */
.filas { display: flex; flex-direction: column; }
.fila { display: grid; grid-template-columns: 38px 44px minmax(0, 2fr) minmax(0, 1fr) auto 48px 38px; align-items: center; gap: var(--s3); min-height: var(--row-h); padding: var(--s1) var(--s2); border-radius: var(--r-sm); }
.fila:hover, .fila:focus-within { background: var(--hover); }
.fila.activa .tit { color: var(--accent); }
.num span { font-variant-numeric: tabular-nums; }
.num .ico { display: none; }
.fila:hover .num span, .num:focus-visible span { display: none; }
.fila:hover .num .ico, .num:focus-visible .ico, .num span:empty + .ico { display: block; }
.info { min-width: 0; display: flex; flex-direction: column; }
.tit, .sub, .extra, .t1, .t2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tit { font-weight: 600; font-size: var(--t-sm); }
.sub, .extra, .dur, .meta, .nota, .t2 { color: var(--text-muted); font-size: 13px; }
.dur { text-align: right; font-variant-numeric: tabular-nums; }
.fila[draggable="true"] { cursor: grab; }
#panel .fila { grid-template-columns: 34px 40px minmax(0, 1fr) 38px; gap: var(--s2); }
#panel .fila .extra, #panel .fila .dur, #panel .fila .corazon { display: none; }
#panel .portada { width: 40px; height: 40px; }

/* Portadillas */
.saludo { margin-bottom: var(--s4); }
.rapidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s2); }
.rapida { display: flex; align-items: center; gap: var(--s3); background: var(--surface-2); border-radius: var(--r-sm); overflow: hidden; text-align: left; font-weight: 700; min-height: 52px; }
.rapida:hover { background: var(--border); }
.rapida span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: var(--s2); }
.rapida .portada { border-radius: 0; width: 52px; height: 52px; }
.banda { background: var(--surface-2); border-radius: var(--r-md); padding: var(--s3) var(--s4); margin-bottom: var(--s4); }
.banda a { text-decoration: underline; font-weight: 700; }
.carril { display: grid; grid-auto-flow: column; grid-auto-columns: 164px; gap: var(--s4); overflow-x: auto; padding-bottom: var(--s2); scrollbar-width: thin; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s4); }
.tarjeta { min-width: 0; }
.tarjeta-b { display: block; position: relative; width: 100%; padding: 0; }
.tarjeta .portada { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-md); font-size: 42px; }
.tarjeta .portada.redonda { border-radius: 50%; }
.t1 { margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--text); font-weight: 600; }
.flota { position: absolute; right: var(--s2); bottom: var(--s2); width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--fast); }
.tarjeta:hover .flota, .tarjeta-b:focus-visible .flota { opacity: 1; }
.lib-item { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border-radius: var(--r-sm); width: 100%; text-align: left; }
.lib-item:hover { background: var(--hover); text-decoration: none; }

/* Cabecera de lista */
.cabecera { display: flex; align-items: flex-end; gap: var(--s5); padding: var(--s6) var(--s5) var(--s5); margin: calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s4); border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(180deg, hsl(var(--h, 20) 40% 30%), var(--surface)); color: var(--text); }
:root[data-tema="claro"] .cabecera { background: linear-gradient(180deg, hsl(var(--h, 20) 45% 82%), var(--surface)); }
.cabecera .portada { width: 180px; height: 180px; border-radius: var(--r-md); box-shadow: var(--shadow); font-size: 64px; }
.cabecera .portada.redonda { border-radius: 50%; }
.cabecera h1 { font-size: clamp(var(--t-xl), 5vw, var(--t-display)); line-height: 1.05; overflow-wrap: anywhere; margin: var(--s1) 0 var(--s2); }
.cabecera .meta, .cabecera .desc { color: var(--text); }
.cabecera .corazon-grande .ico { width: 72px; height: 72px; }
.tipo { font-weight: 700; font-size: var(--t-xs); }
.acciones { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.herramientas { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.herramientas input { flex: 1 1 200px; max-width: 320px; }
.herramientas label { display: flex; align-items: center; gap: var(--s2); color: var(--text-muted); }

/* Búsqueda */
.busca { display: flex; align-items: center; gap: var(--s2); background: var(--surface-2); border: 1px solid var(--border-input); border-radius: var(--r-pill); padding: 0 var(--s4); max-width: 520px; }
.busca input { background: none; border: 0; flex: 1; min-height: 46px; outline: none; font-size: var(--t-base); min-width: 0; }
.busca:focus-within { outline: 2px solid var(--accent); }
.generos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s3); }
.genero { display: flex; align-items: flex-end; min-height: 96px; padding: var(--s3); border-radius: var(--r-md); color: #fff; font-weight: 800; font-size: var(--t-base); background: linear-gradient(135deg, hsl(var(--h) 50% 34%), hsl(calc(var(--h) + 45) 50% 24%)); }

/* Vacíos y carga */
.vacio { text-align: center; padding: var(--s7) var(--s4); display: flex; flex-direction: column; align-items: center; gap: var(--s3); color: var(--text-muted); }
.vacio h2 { margin: 0; color: var(--text); }
.esqueleto { display: grid; gap: var(--s3); }
.esqueleto div { height: 48px; border-radius: var(--r-sm); background: var(--surface-2); animation: late 1.2s infinite alternate; }
@keyframes late { from { opacity: .45; } to { opacity: 1; } }

/* Barra */
#barra { grid-area: barra; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: var(--s4); padding: 0 var(--s3); }
#b-info { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.b-texto { display: flex; flex-direction: column; text-align: left; min-width: 0; padding: 0; color: inherit; }
#b-centro { display: flex; flex-direction: column; align-items: center; gap: var(--s1); min-width: 0; }
.grupo { display: flex; align-items: center; gap: var(--s2); }
.linea-pos { display: flex; align-items: center; gap: var(--s2); width: 100%; max-width: 620px; font-size: var(--t-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.linea-pos input { flex: 1; min-width: 0; }
#b-der { display: flex; align-items: center; justify-content: flex-end; gap: var(--s1); }
#b-vol { width: 110px; }
input[type="range"] { -webkit-appearance: none; appearance: none; height: 16px; background: none; cursor: pointer; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--p, 0%), var(--border-input) var(--p, 0%)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--text); margin-top: -4px; }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border-input); }
input[type="range"]::-moz-range-progress { height: 4px; background: var(--accent); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--text); }

/* Panel */
#panel .ahora > .portada { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-md); font-size: 72px; }
.ahora-t { margin-top: var(--s3); }
.ahora-t h2 { margin: 0; overflow-wrap: anywhere; }
.letra p { white-space: pre-wrap; line-height: 1.7; }

/* Menú, diálogos y avisos */
#menu { position: fixed; z-index: 40; min-width: 220px; max-height: 70vh; overflow: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow); padding: var(--s1); display: flex; flex-direction: column; }
#menu button { text-align: left; padding: var(--s2) var(--s3); border-radius: var(--r-sm); min-height: 38px; }
#menu button:hover, #menu button:focus { background: var(--hover); }
#menu .peligro { color: var(--danger); }
dialog { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow); }
dialog::backdrop { background: var(--overlay); }
dialog h2 { margin-top: 0; }
.campo { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s3); font-weight: 600; }
.campo textarea { resize: vertical; }
.botones { display: flex; flex-wrap: wrap; gap: var(--s2); }
.botones.fin { justify-content: flex-end; margin-top: var(--s4); }
.elegir { display: flex; flex-direction: column; gap: var(--s1); max-height: 45vh; overflow-y: auto; }
#avisos { position: fixed; left: 50%; bottom: calc(var(--bar-h) + var(--s4)); transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: var(--s2); align-items: center; width: max-content; max-width: calc(100vw - 32px); }
.aviso { background: var(--text); color: var(--bg); padding: var(--s2) var(--s4); border-radius: var(--r-md); font-weight: 600; box-shadow: var(--shadow); }
#capa-soltar { display: none; position: fixed; inset: 0; z-index: 70; background: var(--overlay); align-items: center; justify-content: center; font-size: var(--t-xl); font-weight: 800; color: #fff; pointer-events: none; }
.soltando #capa-soltar { display: flex; }

/* Vídeos */
.video-marco { aspect-ratio: 16 / 9; max-width: 760px; margin: var(--s4) 0; border-radius: var(--r-md); overflow: hidden; background: var(--bg); }
.video-marco[hidden] { display: none; }
.video-marco iframe { width: 100%; height: 100%; border: 0; display: block; }
.tarjeta.video .portada { aspect-ratio: 16 / 9; }
.carril:has(.video) { grid-auto-columns: 220px; }
.solo-movil { display: none; }

/* Otras pantallas */
.soltar { border: 2px dashed var(--border-input); border-radius: var(--r-lg); padding: var(--s5); margin: var(--s4) 0; display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.soltar p { flex: 1 1 100%; }
#progreso { flex: 1 1 100%; color: var(--text-muted); min-height: 1.4em; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: var(--s4) 0; }
.cifras div { background: var(--surface-2); border-radius: var(--r-md); padding: var(--s4); display: flex; flex-direction: column; }
.cifras strong { font-size: var(--t-xl); color: var(--accent); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.ranking { padding-left: var(--s5); margin: 0; }
.ranking li { padding: var(--s1) 0; }
.ranking li span { display: inline-block; max-width: 100%; }
.ranking .sub { display: block; }
.ajuste { max-width: 640px; margin-bottom: var(--s5); }
.linea { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.linea small { display: block; color: var(--text-muted); }
.linea input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); }
#nav-movil { display: none; }

/* Pantalla pequeña */
@media (max-width: 1000px) {
  .fila { grid-template-columns: 38px 44px minmax(0, 1fr) auto 48px 38px; }
  .fila .extra { display: none; }
}
@media (max-width: 800px) {
  #app, .panel-abierto #app { padding: 0; gap: 0; grid-template: "vista" 1fr "barra" 64px "nav" var(--nav-h) / minmax(0, 1fr); }
  #lateral { display: none; }
  #vista { border-radius: 0; padding: var(--s4); background: var(--bg); }
  .cabecera { flex-direction: column; align-items: flex-start; margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s3); padding: var(--s5) var(--s4) var(--s4); gap: var(--s3); border-radius: 0; }
  .cabecera .portada { width: 150px; height: 150px; }
  .fila { grid-template-columns: 44px minmax(0, 1fr) auto 34px; gap: var(--s2); padding: var(--s1) 0; }
  .fila .num, .fila .dur { display: none; }
  /* En móvil toda la fila reproduce */
  .fila .num { display: flex; position: absolute; width: 1px; height: 1px; opacity: 0; }
  #barra { grid-template-columns: minmax(0, 1fr) auto; padding: 0 var(--s2); background: var(--surface); gap: var(--s2); position: relative; }
  #barra.vacia { display: none; }
  #app:has(#barra.vacia) { grid-template: "vista" 1fr "nav" var(--nav-h) / minmax(0, 1fr); }
  #b-centro .linea-pos, #b-der, #b-centro .grupo .ib { display: none; }
  .solo-movil { display: flex; }
  #nav-movil { grid-area: nav; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
  #nav-movil a { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: var(--text-muted); }
  #nav-movil a.on { color: var(--text); }
  #panel, .panel-abierto #panel { display: none; }
  .ahora-abierto #panel { display: flex; position: fixed; inset: 0; z-index: 30; border-radius: 0; padding: var(--s4); }
  .cierra, .ahora-abierto .controles-movil { display: block; }
  .cierra { display: inline-flex; }
  .controles-movil .grupo { justify-content: space-between; margin-top: var(--s2); }
  .controles-movil .linea-pos { max-width: none; }
  #panel .ahora > .portada { max-width: min(100%, 46vh); margin: 0 auto; }
  .carril { grid-auto-columns: 136px; margin-right: calc(var(--s4) * -1); }
  .rapidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .generos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras, .dos { grid-template-columns: 1fr; }
  .ib { width: 44px; height: 44px; }
  #avisos { bottom: 140px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }