/* Versión web (25-sep-2026): encima de app.css. Sin lo que es de escritorio y usable en el celular. */
#barra-titulo { padding-right:12px; -webkit-app-region:no-drag; }
#btn-compa, #btn-fijar, #aviso-plugins, #aviso-actualizacion { display:none !important; }
#btn-menu { display:none; background:none; border:1px solid var(--linea); border-radius:7px; width:34px; height:28px; font-size:16px; }
/* Dirección de prueba (?prueba=1, 26-sep-2026): el reproductor oficial incrustado, SIEMPRE visible y sin nada encima.
   Audioteca = recuadro flotante (mínimo 200×200); Videoteca = grande en el panel de video. */
#inc-audio { position:fixed; right:14px; bottom:90px; width:320px; z-index:50; background:#000; border:1px solid var(--linea); border-radius:10px; overflow:hidden; box-shadow:0 8px 30px #000a; }
#inc-audio.arriba { bottom:auto; top:50px; }
#inc-audio .inc-barra { display:flex; align-items:center; gap:6px; height:28px; padding:0 6px 0 8px; background:#0d0f13; }
#inc-audio .inc-barra .hueco { flex:1; }
#inc-audio .inc-mover { background:none; border:1px solid var(--linea); border-radius:6px; color:var(--texto); width:28px; height:22px; font-size:13px; }
#inc-audio .incrustado { width:100%; height:200px; }
#inc-video { height:max(200px, min(42vh, 56.25vw)); aspect-ratio:16 / 9; max-width:100%; flex:none; }
#panel-video:has(#inc-video:not(.oculto)) { max-height:none; }
#inc-video .incrustado { width:100%; height:100%; }
#inc-audio iframe, #inc-video iframe { display:block; width:100%; height:100%; border:0; }
/* Los avisos nunca encima del reproductor incrustado. */
body:has(#inc-video:not(.oculto)) #nota, body:has(#inc-audio.arriba:not(.oculto)) #nota { top:auto; bottom:92px; }
@media (max-width: 820px) {
  #inc-audio { right:8px; bottom:80px; width:240px; }
  #inc-audio.arriba { top:46px; }
  body:has(#inc-video:not(.oculto)) #nota, body:has(#inc-audio.arriba:not(.oculto)) #nota { bottom:80px; }
  #btn-menu { display:inline-block; }
  #barra-titulo { grid-template-columns:auto minmax(0,1fr) auto; }
  #barra-titulo .bt-izq > span, .beta { display:none; }
  #buscador { flex:1; min-width:0; }
  #lateral { position:fixed; top:38px; bottom:0; left:-270px; width:260px; z-index:45; transition:left .2s; box-shadow:0 0 30px #000a; }
  body.menu-abierto #lateral { left:0; }
  body.menu-abierto #app::after { content:""; position:fixed; inset:38px 0 0 0; background:#0006; z-index:40; }
  #vista { padding:0 12px 24px; overflow-y:auto; }
  .estante > .carrusel { margin:0 -12px; padding:6px 12px; }
  .heroe, .aviso-mac { margin-left:0; margin-right:0; }
  .heroe .contenido { padding:16px; gap:14px; }
  .heroe .contenido > img { width:110px; height:110px; }
  .heroe h1 { font-size:28px; }
  .heroe .botones .mac-b { padding:0 14px; }
  .rejilla-top { grid-template-columns:1fr; margin:0; }
  .tarjeta-pl { width:150px; }
  .cab-pl { flex-direction:column; align-items:flex-start; }
  .cab-pl h1 { font-size:30px; }
  .fila .mono { display:none; }
  .fila .etis span:not(.eti) { display:none; }
  .variaciones { padding-left:12px; }
  .baldosa, .baldosa .caja { width:136px; }
  .baldosa .caja { height:136px; }
  #reproductor { height:70px; padding:0 8px; gap:8px; }
  #app { bottom:70px; }
  .rp-tema { width:auto; flex:1; }
  .rp-tema img { width:42px; height:42px; }
  .rp-der, .rp-linea, .rp-tema a { display:none; }
  .rp-centro { flex:none; }
  .rp-botones { gap:10px; }
  #modal .caja { width:94vw; padding:16px; }
  .aviso-inicio { flex-wrap:wrap; }
}
/* 0.9.23 (30-sep-2026, dirección de prueba): la pantalla del teléfono de punta a punta (notch y barra de abajo del iPhone),
   el aviso de la pantalla apagada junto al reproductor incrustado y lo de ♥ Me gusta en pantallas chicas. */
html, body { height:100%; height:100dvh; }
#reproductor { padding-bottom:env(safe-area-inset-bottom); height:calc(78px + env(safe-area-inset-bottom)); }
#app { top:calc(38px + env(safe-area-inset-top)); bottom:calc(78px + env(safe-area-inset-bottom)); }
#app.sin-reproductor { bottom:0; }
#entrada { top:calc(38px + env(safe-area-inset-top)); }
#barra-titulo { padding-top:env(safe-area-inset-top); height:calc(38px + env(safe-area-inset-top)); }
.inc-aviso { font-size:11px; color:var(--suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
#inc-video .inc-aviso { padding:4px 8px; background:#0d0f13; }
#inc-video { display:flex; flex-direction:column; }
#inc-video .incrustado { flex:1; min-height:0; }
@media (max-width: 820px) {
  #reproductor { height:calc(70px + env(safe-area-inset-bottom)); }
  #app { bottom:calc(70px + env(safe-area-inset-bottom)); }
  #app.sin-reproductor { bottom:0; }
  #lateral { top:calc(38px + env(safe-area-inset-top)); }
  #inc-audio .inc-aviso { display:none; }
  .cab-mipl .botones { flex-wrap:wrap; }
  .buscar-mg { width:100%; order:9; }
  #rp-solo-audio { padding:3px 6px; font-size:11px; }
  .fila .btn-pre { display:none; }   /* en el teléfono un toque ya toca: 🎧 sobra y así cabe el ♡ */
}
/* En la web «Se abre lacasadeldj.com en tu navegador…» no aplica: ya estás en el navegador. */
#entrada .pie-entrada { display:none; }

/* ── 8-oct-2026 (Alex desde el iPad: «los botones se ven trivi, como iconos… no hay cola, ni playlist, ni me gusta abajo, y
   no puedo poner el video en pantalla grande»). El reproductor de la web con botones de verdad: ▶ en círculo dorado,
   ♥ Me gusta · ＋ Playlist · Cola · Pantalla grande como píldoras con su nombre (solo el icono en pantallas angostas), y el
   panel «A continuación». En el iPad y el teléfono el volumen es el de los botones del aparato: no se enseña la barrita. */
#reproductor { background:linear-gradient(180deg,#1d212a,#15181e); border-top:1px solid rgba(255,255,255,.08); }
.rp-botones { gap:14px; }
.rp-botones button { width:38px; height:38px; border-radius:50%; font-size:16px; color:#d9dbe0; transition:background .15s, transform .1s; }
.rp-botones button:hover { background:rgba(255,255,255,.08); color:#fff; }
.rp-botones button:active { transform:scale(.94); opacity:1; }
.rp-botones .play { width:46px; height:46px; border-radius:50%; background:var(--pool); color:#1a1300; font-size:18px; box-shadow:0 4px 14px rgba(242,179,61,.28); }
.rp-botones .play:hover { background:#ffc65a; color:#1a1300; }
.rp-botones .play .sf { margin-left:2px; }
body:not(.pausado) .rp-botones .play .sf { margin-left:0; }
#reproductor { height:calc(84px + env(safe-area-inset-bottom)); }
#app { bottom:calc(84px + env(safe-area-inset-bottom)); }
.rp-der { width:auto; flex:none; gap:8px; }
.rp-acc, #rp-mg { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:7px; height:36px; min-width:36px; padding:0 13px;
  border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11); color:#e3e5ea; font-size:12.5px; font-weight:600;
  white-space:nowrap; opacity:1; transition:background .15s, border-color .15s, color .15s; cursor:pointer; }
.rp-acc .sf, #rp-mg .sf { width:17px; height:17px; }
.rp-acc:hover, #rp-mg:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff; }
.rp-acc:disabled { opacity:.35; pointer-events:none; }
#rp-mg { padding:0; width:36px; font-size:17px; }
#rp-mg.on { color:var(--tubo); background:rgba(255,89,89,.14); border-color:rgba(255,89,89,.45); }
#rp-cola.on { color:var(--pool); background:rgba(242,179,61,.14); border-color:rgba(242,179,61,.5); }
#rp-grande { color:#fff; background:rgba(122,162,255,.16); border-color:rgba(122,162,255,.45); }
.rp-num { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--pool); color:#1a1300;
  font:700 10.5px/18px system-ui,sans-serif; font-style:normal; text-align:center; box-shadow:0 0 0 2px #191c23; }
#rp-mudo { width:30px; height:30px; justify-content:center; border-radius:50%; }
#rp-vol { width:96px; }
/* Pantallas medianas: solo el icono. */
@media (max-width: 1280px) { .rp-acc-t { display:none; } .rp-acc { padding:0; width:36px; } .rp-tema { width:260px; } }
/* Táctil (iPad, teléfono): el volumen es el del aparato; el ♡ de cada fila siempre a la vista (no hay «pasar el ratón»). */
@media (hover: none) {
  #rp-mudo, #rp-vol { display:none !important; }
  .btn-mg { opacity:.6; }
  .btn-mg.on { opacity:1; }
  .rp-acc, #rp-mg, .rp-botones button { min-width:40px; height:40px; }
  #rp-mg { width:40px; }
  .rp-acc { width:40px; }
}
@media (max-width: 820px) {
  #reproductor { height:calc(78px + env(safe-area-inset-bottom)); gap:8px; padding:0 10px env(safe-area-inset-bottom); }
  #app { bottom:calc(78px + env(safe-area-inset-bottom)); }
  .rp-der { display:flex; gap:6px; }
  .rp-der > #rp-agarradera, .rp-der > #rp-pantalla-hueco { display:none; }
  .rp-tema { width:auto; flex:1; min-width:0; }
  .rp-botones { gap:6px; }
  .rp-botones .play { width:44px; height:44px; }
}
/* iPad de pie (y tabletas): la barra del tiempo también, debajo de los botones. */
@media (min-width: 600px) and (max-width: 820px) {
  .rp-centro { flex:none; width:230px; }
  .rp-linea { display:flex; }
}
@media (max-width: 599px) {
  #rp-pl { display:none; }
  .rp-botones #rp-ant { display:none; }
  .rp-acc, #rp-mg { min-width:38px; width:38px; height:38px; }
}

/* «A continuación» (la cola): panel a la derecha, encima de la lista y nunca encima del reproductor. */
#panel-cola { position:fixed; right:0; top:calc(38px + env(safe-area-inset-top)); bottom:calc(84px + env(safe-area-inset-bottom)); width:380px; z-index:46;
  display:flex; flex-direction:column; background:#171a21; border-left:1px solid rgba(255,255,255,.09); box-shadow:-18px 0 40px rgba(0,0,0,.45);
  animation:pcEntra .18s ease-out; user-select:none; }
@keyframes pcEntra { from { transform:translateX(16px); } to { transform:none; } }
#panel-cola .pc-cab { display:flex; align-items:center; justify-content:space-between; padding:16px 14px 10px 18px; }
#panel-cola h2 { margin:0; font-size:19px; font-weight:800; letter-spacing:-.2px; }
#panel-cola .pc-cerrar { width:34px; height:34px; border-radius:50%; border:0; background:rgba(255,255,255,.07); color:#ddd; display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
#panel-cola .pc-cerrar:hover { background:rgba(255,255,255,.14); }
#panel-cola .pc-cuerpo { flex:1; overflow-y:auto; padding:0 10px 20px; -webkit-overflow-scrolling:touch; }
#panel-cola .pc-k { display:flex; align-items:center; justify-content:space-between; margin:16px 8px 6px; font-size:11px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--suave); }
#panel-cola .pc-vaciar { border:1px solid rgba(255,255,255,.14); background:none; color:#ddd; border-radius:13px; padding:3px 11px; font-size:11.5px; font-weight:600; text-transform:none; letter-spacing:0; }
#panel-cola .pc-vaciar:hover { border-color:#ff7b7b; color:#ff9b9b; }
#panel-cola .pc-vacio { margin:4px 8px; color:var(--suave); font-size:12.5px; line-height:1.5; }
#panel-cola .cf { display:flex; align-items:center; gap:11px; padding:7px 8px; border-radius:9px; cursor:pointer; }
#panel-cola .cf:hover { background:rgba(255,255,255,.05); }
#panel-cola .cf.ahora { cursor:default; background:rgba(242,179,61,.08); }
#panel-cola .cf.ahora b { color:var(--pool); }
#panel-cola .cf-portada { width:44px; height:44px; border-radius:6px; object-fit:cover; background:#222; flex:none; }
#panel-cola .cf-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
#panel-cola .cf-info b, #panel-cola .cf-info span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#panel-cola .cf-info b { font-size:13px; font-weight:600; }
#panel-cola .cf-info span { font-size:11.5px; color:var(--suave); }
#panel-cola .cf-botones { display:flex; gap:2px; flex:none; }
#panel-cola .cf-b { width:32px; height:32px; border:0; border-radius:50%; background:none; color:var(--suave); display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
#panel-cola .cf-b:hover { background:rgba(255,255,255,.08); color:#fff; }
#panel-cola .cf-b.quitar:hover { color:#ff8080; }
#panel-cola .cf-b:disabled { opacity:.25; pointer-events:none; }
body.con-cola #inc-audio { right:394px; }
@media (max-width: 820px) {
  #panel-cola { width:100%; bottom:calc(78px + env(safe-area-inset-bottom)); border-left:0; }
  body.con-cola #inc-audio { right:8px; top:auto; bottom:calc(86px + env(safe-area-inset-bottom)); }
}

/* 8-oct-2026 (Alex: «los tiles de Lo nuevo para abajo están muy grandes y uno encima del otro; los de Lo más Hot y el
   Top 50 están bien»). La tarjeta de playlist medía 150 en el iPad pero su mosaico seguía en 180 → se montaban unas
   sobre otras. Ahora el mosaico llena la tarjeta y la tarjeta mide lo mismo que las baldosas de Lo más Hot. */
.tarjeta-pl { width:164px; }
.tarjeta-pl .mosaico { width:100% !important; height:auto !important; aspect-ratio:1 / 1; border-radius:10px !important; }
.tarjeta-pl .mosaico img { border-radius:0; }   /* una sola carátula de 4, no 4 cuadritos sueltos */
.tarjeta-pl .mosaico .nom { font-size:16px !important; padding:10px !important; }
.tarjeta-pl .play-b { width:38px; height:38px; right:8px; bottom:8px; }
@media (hover: none) { .tarjeta-pl .play-b { opacity:1; transform:none; } }
@media (max-width: 820px) {
  .tarjeta-pl { width:136px; }
  .tarjeta-pl .mosaico .nom { font-size:14px !important; padding:8px !important; }
  .tarjeta-pl .t { font-size:12.5px; }
}

/* 8-oct-2026 (Alex: «la barra de la izquierda se mueve de izquierda a derecha cuando subo o bajo»): solo sube y baja. */
#lateral { overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y; }

/* 8-oct-2026: sin sesión, «Crea tu cuenta gratis» y «Ver planes» debajo de «Entrar con mi cuenta». */
#entrada .entrada-sec { background:transparent; color:var(--texto); border:1px solid rgba(255,255,255,.28); margin-top:-6px; }
#entrada .entrada-sec:hover { border-color:var(--pool); color:#fff; }
#entrada .entrada-planes { color:var(--pool); font-weight:600; text-decoration:none; font-size:14px; }
#entrada .entrada-planes:hover { text-decoration:underline; }