/* =====================================================
   AMO A CRISTO — REPRODUCTOR GLOBAL
   Un único diseño para todas las páginas.
   Este archivo debe cargarse después de app.css.
   ===================================================== */
.player{position:fixed;left:var(--sidebar);right:0;bottom:0;z-index:1200;min-height:var(--player);padding:10px 22px;background:rgba(5,14,25,.96);border-top:1px solid rgba(255,255,255,.09);box-shadow:0 -18px 50px rgba(0,0,0,.3);backdrop-filter:blur(18px)}
.player-main{max-width:1400px;margin:auto;display:grid;grid-template-columns:minmax(230px,1fr) minmax(350px,1.5fr) minmax(210px,1fr);gap:22px;align-items:center}
.player .now{display:flex;align-items:center;gap:11px;min-width:0}
.player .cover{width:58px;height:58px;flex:0 0 58px;border-radius:9px;background:#142b43 center/cover no-repeat;display:grid;place-items:center;color:var(--gold);font-size:22px;overflow:hidden}
.player .track-info{min-width:0;display:flex;flex-direction:column;gap:3px}
.player .track-info b,.player .track-info small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player .track-info b{font-size:13px}
.player .track-info small{font-size:11px;color:#8fa0b4}
.player-status{min-height:10px;color:var(--gold);font-size:9px}
.player .controls{display:flex;align-items:center;justify-content:center;gap:17px;margin-bottom:4px}
.player .controls button,.player .player-tools button{border:0;background:transparent;color:#cbd5e2;font-size:16px;padding:5px 7px}
.player .controls button:hover,.player .player-tools button:hover{color:var(--gold)}
.player .controls .play-main{box-sizing:border-box;width:42px;height:42px;min-width:42px;min-height:42px;padding:0;margin:0;border-radius:50%;background:var(--gold);color:#091522;font-size:15px;line-height:1;display:grid;place-items:center;flex:0 0 42px}
.player .timeline{display:flex;align-items:center;gap:8px;color:#718298;font-size:9px}
.player .progress-wrap{position:relative;flex:1;height:14px;display:flex;align-items:center}
.player #progress{position:relative;z-index:2;width:100%;height:14px;margin:0;appearance:none;background:transparent;cursor:pointer}
.player #progress::-webkit-slider-runnable-track{height:3px;background:#34485d;border-radius:5px}
.player #progress::-webkit-slider-thumb{appearance:none;width:11px;height:11px;margin-top:-4px;border-radius:50%;background:var(--gold)}
.player #progress::-moz-range-track{height:3px;background:#34485d;border-radius:5px}
.player #progress::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--gold)}
.player .progress-fill{position:absolute;left:0;top:5.5px;height:3px;width:0;background:var(--gold);border-radius:5px;pointer-events:none}
.player .player-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.player .player-tools input{width:85px;accent-color:var(--gold)}
.player .yt{position:absolute;width:1px;height:1px;left:-9999px;top:-9999px;overflow:hidden}
@media(max-width:1100px){.player-main{grid-template-columns:minmax(200px,1fr) minmax(300px,1.3fr) 150px}.player .player-tools input{display:none}}
@media(max-width:800px){.player{left:0;padding:8px 10px}.player-main{grid-template-columns:1fr auto;gap:5px 10px}.player .now{grid-column:1}.player-center{grid-column:1/-1;grid-row:2}.player .player-tools{grid-column:2;grid-row:1}.player .player-tools #volume,.player .player-tools #expandPlayer{display:none}.player .cover{width:44px;height:44px;flex-basis:44px}.player .controls{gap:13px}}
@media(max-width:520px){.player .controls button:nth-child(1),.player .controls button:nth-child(3){font-size:13px}.player-main{grid-template-columns:minmax(0,1fr) auto}}

/* Queue is part of the global player component. The list button is intentionally hidden. */
#showQueue{display:none!important}
.queue-panel{position:absolute;right:18px;bottom:84px;width:340px;max-height:410px;overflow:auto;background:#0a1b2d;border:1px solid var(--line-gold);border-radius:14px;box-shadow:var(--shadow);display:none}
.queue-panel.open{display:block}
.queue-head{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-bottom:1px solid var(--line)}
.queue-head button{border:0;background:none;color:#aebacc;font-size:20px}
.queue-list{padding:6px}
.queue-item{display:flex;align-items:center;gap:9px;padding:9px;border-radius:9px;background:transparent;color:#fff;border:0;width:100%;text-align:left}
.queue-item:hover,.queue-item.active{background:rgba(242,200,75,.08)}
.queue-meta{min-width:0;display:flex;flex-direction:column}
.queue-meta b,.queue-meta small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue-meta b{font-size:11px}.queue-meta small{font-size:9px;color:#7f91a7}
@media(max-width:800px){.player{left:0;padding:8px 10px}.player-main{grid-template-columns:1fr auto;gap:5px 10px}.player .now{grid-column:1}.player-center{grid-column:1/-1;grid-row:2}.player .player-tools{grid-column:2;grid-row:1}.player .player-tools #volume,.player .player-tools #expandPlayer{display:none}.player .cover{width:44px;height:44px;flex-basis:44px}.player .controls{gap:13px}.queue-panel{right:8px;bottom:94px;width:calc(100% - 16px);max-height:45vh}}

/* AMO A CRISTO — ajustes táctiles y safe-area para móvil */
@media (max-width: 800px) {
  .player { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .player-main, .player .now, .player .player-center, .player .player-tools { min-width: 0; }
  .player .track-info { overflow: hidden; }
  .player .track-info b, .player .track-info small, .player-status { max-width: 100%; }
  .player .controls button, .player .player-tools button { touch-action: manipulation; }
  .queue-panel { bottom: calc(104px + env(safe-area-inset-bottom)); }
}
@media (max-width: 520px) {
  .player { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .player-main { grid-template-columns: minmax(0, 1fr) auto; }
  .player .now { overflow: hidden; }
  .player .track-info b { font-size: 11px; }
  .player .controls button { min-width: 34px; min-height: 36px; }
  .player .controls .play-main { min-width: 42px; min-height: 42px; }
}