/* estilos.css — Hache Play.
   Temas: todos los colores salen de variables; cada tema solo las redefine.
   "Hache X" es el predeterminado (decisión de Hache, 8-oct-2026).
   Una sola estructura: en el celular es lista + mini reproductor abajo; desde
   900 px de ancho, barra lateral + lista + barra de reproducción; desde 1200,
   además el panel de la derecha con la carátula, el ecualizador y la cola. */

:root {
  --bg: #07070f;
  --superficie: #0d0d1a;
  --tarjeta: #111122;
  --tarjeta-2: #17172c;
  --borde: rgba(255, 255, 255, 0.06);
  --borde-fuerte: rgba(255, 255, 255, 0.12);
  --acento-1: #ff2d78;
  --acento-2: #9b00ff;
  --acento-3: #00e5ff;
  --texto-fuerte: #ffffff;
  --texto: rgba(255, 255, 255, 0.55);
  --texto-suave: rgba(255, 255, 255, 0.38);
  --velo-1: rgba(255, 255, 255, 0.04);
  --velo-2: rgba(255, 255, 255, 0.09);
  --velo-3: rgba(255, 255, 255, 0.16);
  --acento-fondo: rgba(0, 229, 255, 0.09);
  --acento-borde: rgba(0, 229, 255, 0.45);
  --resplandor: rgba(155, 0, 255, 0.24);
  --perilla: #ffffff;
  --blanco: #ffffff; /* blanco de verdad: íconos sobre degradado */
  --grad: linear-gradient(135deg, var(--acento-1), var(--acento-2));
  --grad2: linear-gradient(135deg, var(--acento-2), var(--acento-3));
  --alto-fila: 56px;
  --radio: 12px;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
:root[data-tema="medianoche"] {
  --bg: #050a14; --superficie: #0a1222; --tarjeta: #0f1a2e; --tarjeta-2: #15233b;
  --acento-1: #3d7bff; --acento-2: #00a6ff; --acento-3: #00ffd5;
  --acento-fondo: rgba(0, 255, 213, 0.09); --acento-borde: rgba(0, 255, 213, 0.45); --resplandor: rgba(61, 123, 255, 0.26);
}
:root[data-tema="esmeralda"] {
  --bg: #04100b; --superficie: #091811; --tarjeta: #0e2118; --tarjeta-2: #142b20;
  --acento-1: #00e676; --acento-2: #00bfa5; --acento-3: #c6ff00;
  --acento-fondo: rgba(198, 255, 0, 0.08); --acento-borde: rgba(198, 255, 0, 0.42); --resplandor: rgba(0, 230, 118, 0.2);
}
:root[data-tema="atardecer"] {
  --bg: #120806; --superficie: #1a0d0a; --tarjeta: #22120e; --tarjeta-2: #2d1813;
  --acento-1: #ff2d55; --acento-2: #ff6b35; --acento-3: #ffc145;
  --acento-fondo: rgba(255, 193, 69, 0.09); --acento-borde: rgba(255, 193, 69, 0.45); --resplandor: rgba(255, 107, 53, 0.24);
}
:root[data-tema="oro"] {
  --bg: #0a0906; --superficie: #12100b; --tarjeta: #191610; --tarjeta-2: #221e15;
  --acento-1: #b8860b; --acento-2: #d4af37; --acento-3: #ffe08a;
  --acento-fondo: rgba(255, 224, 138, 0.08); --acento-borde: rgba(255, 224, 138, 0.42); --resplandor: rgba(212, 175, 55, 0.2);
}
:root[data-tema="claro"] {
  --bg: #f4f4f9; --superficie: #ffffff; --tarjeta: #ececf4; --tarjeta-2: #e2e2ee;
  --borde: rgba(0, 0, 0, 0.07); --borde-fuerte: rgba(0, 0, 0, 0.14);
  --acento-1: #e6005c; --acento-2: #7a00cc; --acento-3: #0090a8;
  --texto-fuerte: #14141f; --texto: rgba(20, 20, 31, 0.64); --texto-suave: rgba(20, 20, 31, 0.44);
  --velo-1: rgba(0, 0, 0, 0.04); --velo-2: rgba(0, 0, 0, 0.08); --velo-3: rgba(0, 0, 0, 0.15);
  --acento-fondo: rgba(0, 144, 168, 0.1); --acento-borde: rgba(0, 144, 168, 0.5); --resplandor: rgba(122, 0, 204, 0.12);
  --perilla: #14141f;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--texto-fuerte);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic .r, symbol .r { fill: currentColor; stroke: none; }

/* ---------- estructura ---------- */
.app { display: flex; flex-direction: column; height: 100dvh; }
.lateral, .derecha { display: none; }
.central { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 16px 8px; }
.marca-movil { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; flex: 1; min-width: 0; letter-spacing: -0.01em; }
.marca-movil img, .marca img { width: 30px; height: 30px; border-radius: 8px; }
.cabecera .buscador { order: 3; flex-basis: 100%; } /* en el celular el buscador va en su propia fila */
.buscador { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 999px; padding: 0 14px; height: 40px; color: var(--texto); }
.buscador:focus-within { border-color: var(--acento-borde); }
.buscador input { flex: 1; min-width: 0; background: none; border: 0; outline: none; height: 100%; color: var(--texto-fuerte); }
.buscador input::placeholder { color: var(--texto-suave); }
.buscador .ic { width: 18px; height: 18px; }

.boton-icono { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--texto); position: relative; flex-shrink: 0; }
.boton-icono:hover { color: var(--texto-fuerte); background: var(--velo-1); }
.boton-icono.activo { color: var(--acento-3); }
.boton-icono .marca-una { display: none; position: absolute; top: 6px; right: 5px; font-size: 9px; font-weight: 800; color: var(--bg); background: var(--acento-3); border-radius: 50%; width: 13px; height: 13px; line-height: 13px; text-align: center; }
.boton-icono.una .marca-una { display: block; }
.fav.activo { color: var(--acento-1); }
.fav.activo .ic { fill: var(--acento-1); }

.boton-play { width: 48px; height: 48px; border-radius: 50%; background: var(--grad); color: var(--blanco); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.boton-play .ic { width: 24px; height: 24px; }
.boton-chico { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--tarjeta-2); border: 1px solid var(--borde-fuerte); font-size: 13px; font-weight: 600; white-space: nowrap; }
.boton-chico:hover { border-color: var(--acento-borde); }
.boton-chico .ic { width: 16px; height: 16px; }
.boton-chico.principal { background: var(--grad); border: 0; color: var(--blanco); }
.pastilla { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--borde-fuerte); font-size: 12px; color: var(--texto); white-space: nowrap; }
.pastilla .ic { width: 15px; height: 15px; }
.pastilla.activo { color: var(--acento-3); border-color: var(--acento-borde); background: var(--acento-fondo); }

.pestanas { display: flex; gap: 8px; padding: 4px 16px 10px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borde-fuerte); color: var(--texto); font-size: 13px; white-space: nowrap; }
.pestanas button.activo { background: var(--grad); border-color: transparent; color: var(--blanco); font-weight: 600; }

.aviso-permiso, .progreso-importar { margin: 0 16px 10px; padding: 10px 14px; border-radius: var(--radio); background: var(--acento-fondo); border: 1px solid var(--acento-borde); display: flex; align-items: center; gap: 12px; font-size: 13px; flex-shrink: 0; }
.aviso-permiso span { flex: 1; }
.progreso-importar { flex-direction: column; align-items: stretch; gap: 8px; }
.barrita { height: 4px; border-radius: 2px; background: var(--velo-2); overflow: hidden; }
.barrita i { display: block; height: 100%; width: 0; background: var(--grad2); }

.ruta { display: flex; align-items: center; gap: 8px; padding: 0 12px 10px 8px; flex-shrink: 0; }
.ruta-texto { flex: 1; min-width: 0; }
.ruta-titulo { font-weight: 700; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ruta-sub { color: var(--texto); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- lista (solo se dibujan las filas visibles) ---------- */
.encabezado-tabla { display: none; }
.lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.lista-relleno { position: relative; }
.lista-filas { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }

.fila { height: var(--alto-fila); display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 36px; align-items: center; gap: 12px; padding: 0 8px 0 16px; cursor: pointer; }
.fila:hover { background: var(--velo-1); }
.fila .num, .fila .col-artista, .fila .col-album { display: none; }
.fila .principal { min-width: 0; }
.fila .t { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila .s { font-size: 12.5px; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila .dur { font-size: 12.5px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.fila .fav { width: 36px; height: 36px; color: var(--texto-suave); }
.fila .fav .ic { width: 18px; height: 18px; }
.fila.sonando .t { color: var(--acento-3); }
.fila.fallida { opacity: 0.45; }
.fila.grupo { grid-template-columns: 44px minmax(0, 1fr) auto; }
.fila.grupo .flecha { color: var(--texto-suave); font-size: 18px; padding-right: 8px; }

.caratula { background: var(--tarjeta-2); color: var(--texto-suave); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.caratula img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fila .caratula { width: 44px; height: 44px; border-radius: 8px; }
.fila .caratula.redonda { border-radius: 50%; }
.fila .caratula .ic { width: 20px; height: 20px; }

.vacio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 6px; }
.vacio-icono { width: 72px; height: 72px; border-radius: 22px; background: var(--grad); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.vacio-icono .ic { width: 34px; height: 34px; color: var(--blanco); }
.vacio h2 { margin: 0; font-size: 20px; }
.vacio p { margin: 0 0 12px; color: var(--texto); max-width: 360px; font-size: 14px; }
.vacio-botones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- barra de reproducción (mini reproductor en el celular) ---------- */
.barra { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 8px calc(8px + var(--seguro-abajo)); padding: 8px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; flex-shrink: 0; }
.barra-progreso-movil { position: absolute; left: 12px; right: 12px; top: -1px; height: 3px; background: var(--velo-2); border-radius: 2px; overflow: hidden; }
.barra-progreso-movil i { display: block; height: 100%; width: 0; }
.barra-actual { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.caratula.chica { width: 44px; height: 44px; border-radius: 8px; }
.barra-textos { min-width: 0; }
.b-titulo { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-artista { font-size: 12px; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controles { display: flex; align-items: center; gap: 4px; }
.barra .boton-play { width: 42px; height: 42px; }
@media (max-width: 899px) { .solo-pc { display: none !important; } }

/* ---------- ecualizador animado ---------- */
.visual { display: block; width: 100%; height: 64px; }

/* ---------- reproductor a pantalla completa ---------- */
.completa { position: fixed; inset: 0; z-index: 20; background: radial-gradient(120% 70% at 50% 0%, var(--resplandor), transparent 62%), var(--bg); display: flex; flex-direction: column; padding: 8px 16px calc(12px + var(--seguro-abajo)); }
.completa-cabeza { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--texto); flex-shrink: 0; }
/* "safe center": centrado, pero si no cabe (pantalla baja) arranca arriba y se desplaza, sin montarse nada. */
.completa-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: safe center; gap: 12px; width: 100%; max-width: 440px; margin: 0 auto; overflow-y: auto; scrollbar-width: none; }
.completa-cuerpo::-webkit-scrollbar { display: none; }
.completa-cuerpo > * { flex-shrink: 0; }
.caratula.enorme { width: min(100%, 44vh); aspect-ratio: 1; border-radius: 18px; align-self: center; }
@media (max-height: 700px) { .caratula.enorme { width: min(100%, 34vh); } }
.caratula.enorme .ic { width: 64px; height: 64px; }
.completa .visual { height: 58px; margin: -4px 0 -6px; }
.completa-textos { display: flex; align-items: center; gap: 10px; }
.completa-textos > div { flex: 1; min-width: 0; }
.c-titulo { font-size: 21px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-artista { color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.completa-tiempos { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-suave); margin-top: -8px; font-variant-numeric: tabular-nums; }
.controles.grandes { justify-content: space-between; }
.controles.grandes .boton-icono { width: 48px; height: 48px; }
.controles.grandes .boton-icono .ic { width: 26px; height: 26px; }
.controles.grandes .boton-play { width: 66px; height: 66px; }
.controles.grandes .boton-play .ic { width: 30px; height: 30px; }
.completa-pastillas { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.completa-sigue { font-size: 12.5px; color: var(--texto-suave); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--borde); padding-top: 10px; }
.completa-cola { flex: 1; min-height: 0; overflow-y: auto; width: 100%; max-width: 440px; margin: 0 auto; }
.completa .sello-hx { margin-top: 8px; flex-shrink: 0; }

/* ---------- deslizadores ---------- */
.deslizador { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; --p: 0%; }
.deslizador::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--acento-3) var(--p), var(--velo-3) var(--p)); }
.deslizador::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--acento-3) var(--p), var(--velo-3) var(--p)); }
.deslizador::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--perilla); margin-top: -5px; border: 0; }
.deslizador::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--perilla); border: 0; }
.deslizador:focus-visible { outline: 2px solid var(--acento-borde); outline-offset: 2px; border-radius: 4px; }

/* ---------- barra de avance, animada (pedido de Hache, 8-oct-2026) ----------
   El relleno es un degradado con los acentos del tema (en el tema Hache X:
   rosa, morado y cian) que fluye mientras suena y se queda quieto en pausa.
   La baldosa del degradado tiene ancho fijo y empieza y termina en el mismo
   color: así el movimiento no "salta" al repetirse, mida lo que mida la barra. */
.progreso { position: relative; display: flex; align-items: center; height: 18px; width: 100%; flex: 1; --p: 0%; }
.progreso::before { content: ""; position: absolute; left: 0; right: 0; height: 5px; border-radius: 3px; background: var(--velo-3); }
.progreso-relleno, .barra-progreso-movil i {
  background-image: linear-gradient(90deg, var(--acento-1), var(--acento-2) 33%, var(--acento-3) 66%, var(--acento-1));
  background-size: 240px 100%;
  background-repeat: repeat-x;
}
.progreso-relleno { position: absolute; left: 0; width: var(--p); height: 5px; border-radius: 3px; pointer-events: none; box-shadow: 0 0 10px color-mix(in srgb, var(--acento-2) 55%, transparent); }
body.sonando .progreso-relleno, body.sonando .barra-progreso-movil i { animation: fluir 2.4s linear infinite; }
@keyframes fluir { from { background-position: 0 0; } to { background-position: 240px 0; } }
.progreso .deslizador { position: relative; z-index: 1; }
.progreso .deslizador::-webkit-slider-runnable-track { background: transparent; }
.progreso .deslizador::-moz-range-track { background: transparent; }
.progreso .deslizador::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento-3) 35%, transparent), 0 0 10px var(--acento-3); }
.progreso .deslizador::-moz-range-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento-3) 35%, transparent), 0 0 10px var(--acento-3); }

/* ---------- cola ---------- */
.d-cola-titulo { font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.08em; margin: 18px 0 6px; }
.item-cola { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; cursor: pointer; min-width: 0; }
.item-cola:hover { background: var(--velo-1); }
.item-cola .caratula { width: 36px; height: 36px; border-radius: 6px; }
.item-cola .caratula .ic { width: 16px; height: 16px; }
.item-cola .t { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-cola .s { font-size: 11.5px; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-cola > div:last-child { min-width: 0; }
.cola-vacia { font-size: 13px; color: var(--texto-suave); padding: 6px 4px; }

/* ---------- hojas (ajustes y ecualizador) ---------- */
.hoja-fondo { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.6); display: flex; align-items: flex-end; justify-content: center; }
.hoja { width: 100%; max-width: 560px; max-height: 90dvh; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: 20px 20px 0 0; padding-bottom: var(--seguro-abajo); }
.hoja-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 6px 20px; }
.hoja-cabeza h2 { margin: 0; font-size: 18px; }
.hoja-cuerpo { overflow-y: auto; padding: 0 20px 20px; }
.grupo { padding: 14px 0; border-top: 1px solid var(--borde); }
.grupo:first-child { border-top: 0; }
.grupo-titulo { font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.fila-ajuste { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 12px; }
.fila-ajuste span { display: flex; justify-content: space-between; gap: 12px; }
.fila-ajuste b { color: var(--acento-3); font-weight: 600; }
.fila-ajuste small { display: block; color: var(--texto); font-size: 12px; margin-top: 2px; }
.fila-ajuste.interruptor { flex-direction: row; align-items: center; justify-content: space-between; }
.fila-ajuste.interruptor span { display: block; }
.fila-ajuste input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 44px; height: 26px; border-radius: 13px; background: var(--velo-3); position: relative; cursor: pointer; flex-shrink: 0; }
.fila-ajuste input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--blanco); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: left 0.15s; }
.fila-ajuste input[type="checkbox"]:checked { background: var(--grad); }
.fila-ajuste input[type="checkbox"]:checked::after { left: 21px; }
.fila-boton { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 0 12px; text-align: left; }
.fila-boton small { display: block; color: var(--texto); font-size: 12px; margin-top: 2px; }
.fila-boton .flecha { color: var(--texto-suave); font-size: 20px; }
.nota { font-size: 12.5px; color: var(--texto); margin: 8px 0 0; }
.origen { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.origen .ic { color: var(--texto); }
.origen > div { flex: 1; min-width: 0; }
.origen > .origen-botones { flex-basis: 100%; display: flex; gap: 8px; flex-wrap: wrap; padding-left: 32px; }
.origen .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.origen .s { font-size: 12px; color: var(--texto); }
.botones-fila { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.atajos { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--texto); }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--borde-fuerte); background: var(--tarjeta); color: var(--texto-fuerte); font: 12px/1.5 inherit; text-align: center; }

/* ---------- temas ---------- */
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.tema { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px 10px; border-radius: 14px; border: 1px solid var(--borde-fuerte); font-size: 12.5px; color: var(--texto); }
.tema.activo { border-color: var(--acento-3); color: var(--texto-fuerte); background: var(--acento-fondo); font-weight: 600; }
.muestra { width: 42px; height: 42px; border-radius: 50%; display: block; border: 2px solid rgba(255, 255, 255, 0.12); }
.muestra-hachex { background: conic-gradient(from 200deg, #ff2d78, #9b00ff, #00e5ff, #ff2d78); }
.muestra-medianoche { background: conic-gradient(from 200deg, #3d7bff, #00a6ff, #00ffd5, #3d7bff); }
.muestra-esmeralda { background: conic-gradient(from 200deg, #00e676, #00bfa5, #c6ff00, #00e676); }
.muestra-atardecer { background: conic-gradient(from 200deg, #ff2d55, #ff6b35, #ffc145, #ff2d55); }
.muestra-oro { background: conic-gradient(from 200deg, #b8860b, #d4af37, #ffe08a, #b8860b); }
.muestra-claro { background: conic-gradient(from 200deg, #e6005c, #7a00cc, #0090a8, #e6005c); box-shadow: inset 0 0 0 9px #f4f4f9; }

/* ---------- panel del ecualizador ---------- */
.eq-curva { display: block; width: 100%; height: 120px; border-radius: 14px; background: var(--tarjeta); border: 1px solid var(--borde); }
.eq-bandas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; height: 230px; margin: 14px 0 10px; }
.eq-banda { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; }
.eq-banda b { font-size: 13px; font-weight: 700; color: var(--texto-fuerte); font-variant-numeric: tabular-nums; min-width: 28px; text-align: center; }
.eq-banda span { font-size: 11px; color: var(--texto); }
.deslizador.vertical { writing-mode: vertical-lr; direction: rtl; flex: 1; min-height: 0; width: 40px; height: auto; --a: 50%; --b: 50%; }
.deslizador.vertical::-webkit-slider-runnable-track { width: 8px; height: 100%; border-radius: 4px; background: linear-gradient(to top, var(--velo-3) var(--a), var(--acento-2) var(--a), var(--acento-3) var(--b), var(--velo-3) var(--b)); }
.deslizador.vertical::-moz-range-track { width: 8px; height: 100%; border-radius: 4px; background: linear-gradient(to top, var(--velo-3) var(--a), var(--acento-2) var(--a), var(--acento-3) var(--b), var(--velo-3) var(--b)); }
.deslizador.vertical::-webkit-slider-thumb { width: 22px; height: 22px; margin: 0 0 0 -7px; background: var(--perilla); box-shadow: 0 0 0 4px var(--acento-fondo), 0 2px 6px rgba(0, 0, 0, 0.35); }
.deslizador.vertical::-moz-range-thumb { width: 22px; height: 22px; background: var(--perilla); box-shadow: 0 0 0 4px var(--acento-fondo); }
.eq-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }

/* ---------- géneros ---------- */
.caratula.genero { font-size: 22px; border-radius: 12px; color: #fff; }
.g-salsa { background: linear-gradient(135deg, #ff6b35, #c2410c); }
.g-vallenato { background: linear-gradient(135deg, #ffd000, #d97706); }
.g-reggaeton { background: linear-gradient(135deg, #ff2d78, #9b00ff); }
.g-merengue { background: linear-gradient(135deg, #ff9500, #ff2d55); }
.g-bachata { background: linear-gradient(135deg, #e91e8c, #7b1fa2); }
.g-cumbia { background: linear-gradient(135deg, #00bcd4, #00796b); }
.g-popular { background: linear-gradient(135deg, #d97706, #78350f); }
.g-balada { background: linear-gradient(135deg, #818cf8, #4338ca); }
.g-ranchera { background: linear-gradient(135deg, #84cc16, #3f6212); }
.g-bolero { background: linear-gradient(135deg, #ec4899, #831843); }
.g-champeta { background: linear-gradient(135deg, #f59e0b, #dc2626); }
.g-salsachoke { background: linear-gradient(135deg, #ea580c, #7c2d12); }
.g-tropical { background: linear-gradient(135deg, #10b981, #065f46); }
.g-pop { background: linear-gradient(135deg, #c026d3, #7e22ce); }
.g-rock { background: linear-gradient(135deg, #64748b, #1e293b); }
.g-urbano { background: linear-gradient(135deg, #7c3aed, #1e1b4b); }
.g-electronica { background: linear-gradient(135deg, #00e5ff, #2563eb); }
.g-sin { background: var(--tarjeta-2); }
.fila { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* mantener presionado abre el género, no selecciona texto */

.mezcla { margin: 0 16px 10px; padding: 12px; border-radius: var(--radio); background: var(--tarjeta); border: 1px solid var(--borde); display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.mezcla-titulo { font-size: 13px; font-weight: 700; }
.mezcla-titulo small { font-weight: 400; color: var(--texto-suave); margin-left: 6px; }
.mezcla-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mezcla-chips::-webkit-scrollbar { display: none; }
.mezcla-chips .pastilla small { color: var(--texto-suave); margin-left: 2px; }
.mezcla .boton-chico { align-self: flex-start; }

.generos-elegir { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 12px 0 14px; }
.genero-opcion { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; color: #fff; font-size: 13.5px; font-weight: 600; border: 2px solid transparent; text-align: left; }
.genero-opcion span { font-size: 18px; }
.genero-opcion.activo { border-color: var(--texto-fuerte); box-shadow: 0 0 0 3px var(--acento-fondo); }

/* ---------- sello de la marca ---------- */
.sello-hx { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11.5px; color: var(--texto-suave); letter-spacing: 0.02em; user-select: none; }
.sello-hx .hx { font-weight: 900; font-size: 10.5px; letter-spacing: 0.06em; padding: 3px 6px; border-radius: 6px; color: #fff; background: linear-gradient(135deg, #ff2d78, #9b00ff); }
.sello-hx b { color: var(--texto); font-weight: 700; }
.hoja .sello-hx { padding: 18px 0 4px; border-top: 1px solid var(--borde); }

.aviso { position: fixed; left: 50%; bottom: calc(96px + var(--seguro-abajo)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 40; background: var(--tarjeta-2); border: 1px solid var(--borde-fuerte); color: var(--texto-fuerte); padding: 10px 16px; border-radius: 12px; font-size: 13.5px; max-width: calc(100% - 32px); transition: opacity 0.2s, transform 0.2s; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- PC ---------- */
@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 230px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .lateral { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; border-right: 1px solid var(--borde); background: var(--superficie); overflow-y: auto; }
  .lateral .sello-hx { margin-top: auto; padding-top: 16px; }
  .marca { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; padding: 0 8px 14px; letter-spacing: -0.01em; }
  .menu { display: flex; flex-direction: column; gap: 2px; }
  .menu-titulo { font-size: 11.5px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 10px 6px; }
  .menu button, .origenes-lateral .o { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; color: var(--texto); font-size: 14px; text-align: left; width: 100%; }
  .origenes-lateral .o { cursor: default; height: auto; min-height: 32px; font-size: 13px; }
  .origenes-lateral .o span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu button .ic, .origenes-lateral .ic, .boton-agregar .ic { width: 18px; height: 18px; }
  .menu button:hover { background: var(--velo-1); color: var(--texto-fuerte); }
  .menu button.activo { background: var(--acento-fondo); color: var(--acento-3); }
  .boton-agregar { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; margin-top: 4px; border-radius: 8px; color: var(--texto); font-size: 13px; border: 1px dashed var(--borde-fuerte); }
  .boton-agregar:hover { color: var(--texto-fuerte); border-color: var(--acento-borde); }
  .marca-movil, .pestanas { display: none; }
  .cabecera { padding: 14px 20px 12px; flex-wrap: nowrap; }
  .cabecera .buscador { order: 0; flex-basis: auto; max-width: 520px; }
  .aviso-permiso, .progreso-importar, .mezcla { margin: 0 20px 12px; }
  .ruta { padding: 0 20px 12px 14px; }

  .encabezado-tabla, .fila:not(.grupo) { display: grid; grid-template-columns: 30px 40px minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) 52px 36px; gap: 12px; padding: 0 12px 0 20px; }
  .encabezado-tabla { height: 34px; align-items: center; font-size: 12px; color: var(--texto-suave); border-bottom: 1px solid var(--borde); flex-shrink: 0; }
  .encabezado-tabla.oculto { display: none; }
  .encabezado-tabla .der, .fila .dur { text-align: right; }
  .fila .num { display: block; font-size: 12.5px; color: var(--texto-suave); text-align: right; font-variant-numeric: tabular-nums; }
  .fila .num .ic { width: 16px; height: 16px; color: var(--acento-3); }
  .fila .col-artista, .fila .col-album { display: block; font-size: 13.5px; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fila .caratula { width: 40px; height: 40px; }
  .fila:not(.grupo) .s { display: none; }
  .fila.grupo { padding: 0 20px; }

  .barra { grid-column: 1 / -1; margin: 0; border-radius: 0; border: 0; border-top: 1px solid var(--borde); background: var(--superficie); padding: 10px 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
  .barra-progreso-movil { display: none; }
  .barra-centro { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .barra-centro .controles { gap: 10px; }
  .tiempo { width: 100%; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
  .tiempo span { min-width: 38px; text-align: center; }
  .barra-derecha { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
  .volumen { display: flex; align-items: center; gap: 8px; color: var(--texto); width: 130px; }
  .volumen .ic { width: 20px; height: 20px; }
  .caratula.chica { width: 52px; height: 52px; }

  .hoja-fondo { align-items: center; }
  .hoja { border-radius: 20px; max-height: 86dvh; }
  .aviso { bottom: 100px; }
  .completa { padding: 16px 24px 20px; }
}

@media (min-width: 1200px) {
  .app { grid-template-columns: 230px minmax(0, 1fr) 290px; }
  .derecha { display: flex; flex-direction: column; padding: 20px 18px; border-left: 1px solid var(--borde); background: var(--superficie); overflow-y: auto; min-height: 0; }
  .caratula.grande { width: 100%; aspect-ratio: 1; border-radius: 14px; }
  .caratula.grande .ic { width: 52px; height: 52px; }
  .derecha .visual { margin-top: 10px; height: 56px; }
  .d-titulo { font-weight: 700; font-size: 16px; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .d-artista { color: var(--texto); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  body.sonando .progreso-relleno, body.sonando .barra-progreso-movil i { animation: none; }
}