:root{color-scheme:dark;--gold:#f6d365;--gold2:#fda085;--muted:#d1d5db;--line:rgba(255,255,255,.13);--player:132px}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px 16px;font-family:system-ui,sans-serif;color:#fff;background:radial-gradient(circle at 15% 5%,rgba(246,211,101,.12),transparent 28%),linear-gradient(135deg,#0f172a,#1f2937,#111827)}.card,.app{width:min(94vw,760px);margin:auto;padding:32px;border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.08);backdrop-filter:blur(14px);box-shadow:0 20px 60px rgba(0,0,0,.35);text-align:center}.series{color:var(--gold);font-size:.82rem;font-weight:750;letter-spacing:.16em;text-transform:uppercase}.icon{width:68px;height:68px;margin:0 auto 18px;padding:9px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,var(--gold),var(--gold2))}.icon img{width:100%;height:100%;object-fit:contain}h1{font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.08}.muted{color:var(--muted)}form{display:grid;gap:14px;max-width:440px;margin:28px auto 0}input,button{width:100%;min-height:50px;border-radius:14px;font:inherit}input{padding:12px 15px;border:1px solid var(--line);background:rgba(0,0,0,.23);color:#fff}button{border:0;padding:12px 16px;font-weight:750;cursor:pointer;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#17120a}.message{max-width:520px;margin:18px auto;padding:12px;border-radius:12px;background:rgba(255,255,255,.08)}.error{color:#ffd0d0}.app{height:calc(100vh - var(--player) - 50px);display:flex;flex-direction:column;overflow:hidden}.header{flex:none}.playlist-wrap{min-height:0;flex:1;overflow-y:auto;padding-right:9px;scrollbar-color:var(--gold) rgba(255,255,255,.08)}.playlist{display:grid;gap:10px}.track{text-align:left;color:#fff;background:rgba(255,255,255,.055);border:1px solid var(--line)}.track.active{color:#17120a;background:linear-gradient(135deg,var(--gold),var(--gold2))}.bottom-player{position:fixed;z-index:1000;left:0;right:0;bottom:0;min-height:var(--player);display:grid;align-content:center;gap:8px;padding:15px max(18px,calc((100vw - 760px)/2));background:rgba(7,12,24,.94);border-top:1px solid var(--line);backdrop-filter:blur(18px)}audio{width:100%}.logout{position:fixed;top:12px;right:12px;width:auto;min-height:auto;padding:8px 12px;font-size:.82rem}footer{margin-top:24px;color:#cbd5e1;font-size:.86rem}@media(max-width:560px){:root{--player:128px}body{padding:10px 8px}.card,.app{padding:20px 14px;border-radius:20px}.app{height:calc(100dvh - var(--player) - 38px);max-height:calc(100vh - var(--player) - 38px)}}.checking-message{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;color:var(--gold)}.checking-message[hidden]{display:none}.rotating-dots{display:inline-flex;align-items:center;gap:4px;height:18px}.rotating-dots i{display:block;width:6px;height:6px;border-radius:50%;background:currentColor;animation:dot-spin 1.05s infinite ease-in-out}.rotating-dots i:nth-child(2){animation-delay:.14s}.rotating-dots i:nth-child(3){animation-delay:.28s}@keyframes dot-spin{0%,80%,100%{transform:rotate(0deg) translateY(0);opacity:.35}40%{transform:rotate(180deg) translateY(-5px);opacity:1}}button:disabled{cursor:wait;opacity:.72}

/* Página de alta */
.signup-page{padding-top:34px;padding-bottom:34px}.signup-card{width:min(94vw,880px);text-align:center}.signup-card h1{max-width:720px;margin:18px auto 24px}.signup-copy{text-align:left;max-width:720px;margin:0 auto;color:#eef2f7;line-height:1.72}.signup-copy h2,.signup-box h2{margin:38px 0 18px;text-align:center;color:var(--gold);font-size:clamp(1.35rem,4vw,2rem);letter-spacing:.025em}.signup-copy em,.signup-box em{color:#fff}.review-steps{display:grid;gap:10px;margin:18px 0 24px;padding-left:25px}.qr-wrap{width:min(100%,280px);margin:26px auto;text-align:center}.qr-wrap img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 14px 38px rgba(0,0,0,.35)}.qr-wrap figcaption{margin-top:9px;color:var(--muted);font-size:.82rem}.signup-box{max-width:680px;margin:42px auto 8px;padding:28px;border:1px solid var(--line);border-radius:22px;background:rgba(0,0,0,.18)}.signup-box h2{margin-top:0}.signup-box form{margin-top:22px}.privacy-note{max-width:500px;margin:14px auto 0;color:#cbd5e1;font-size:.82rem;line-height:1.45}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.confirmation-card{max-width:680px}.confirmation-message{text-align:left;line-height:1.65;padding:20px 22px}.button-link{display:inline-flex;align-items:center;justify-content:center;min-height:50px;margin:18px auto 0;padding:12px 22px;border-radius:14px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#17120a;text-decoration:none;font-weight:800}.small-text{max-width:530px;margin:18px auto 0;font-size:.86rem;line-height:1.5}@media(max-width:560px){.signup-box{padding:20px 14px}.signup-copy{line-height:1.62}.review-steps{padding-left:22px}}


/* Ajustes de maquetación de la página de alta */
.signup-card h1{font-size:clamp(1.55rem,3.3vw,2.05rem);line-height:1.18}
.signup-copy p,.signup-copy li,.signup-box>p{text-align:justify;text-justify:inter-word;hyphens:auto}
.signup-copy h2,.signup-box h2,.qr-wrap,form,.message,.privacy-note{text-align:center}
.signup-copy h2,.signup-box h2{font-size:clamp(1.35rem,2.8vw,1.75rem)}
.review-steps li{text-align:justify}
@media(max-width:560px){.signup-card h1{font-size:1.55rem}.signup-copy h2,.signup-box h2{font-size:1.35rem}}


/* Corrección definitiva de maquetación de la página de alta */
.signup-card > h1 {
    max-width: 720px !important;
    margin: 18px auto 24px !important;
    font-size: 1.62rem !important;
    line-height: 1.22 !important;
    text-align: center !important;
}

.signup-copy h2,
.signup-box h2 {
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

.signup-copy p,
.signup-copy li,
.signup-box > p,
.privacy-note {
    text-align: justify !important;
    text-justify: inter-word !important;
    hyphens: auto;
}

.signup-copy p,
.signup-box > p {
    width: 100%;
}

.qr-wrap,
.qr-wrap figcaption,
.signup-box form,
.signup-box form label,
.signup-box form input,
.signup-box form button,
.signup-box .message {
    text-align: center !important;
}

@media (max-width: 560px) {
    .signup-card > h1 {
        font-size: 1.48rem !important;
    }

    .signup-copy h2,
    .signup-box h2 {
        font-size: 1.34rem !important;
    }
}


/* Revisión final: color de titulares de la página de registro */
.signup-copy > h2 {
    color: #fff !important;
}
.signup-box > h2 {
    color: var(--gold) !important;
}

/* Botón de cierre de sesión enviado mediante formulario seguro */
.logout-form{position:fixed;top:12px;right:12px;z-index:1100;margin:0;display:block;width:auto}
.logout-form .logout{position:static;width:auto;min-height:auto;padding:8px 12px;font-size:.82rem}

/* Barras de desplazamiento de la lista de canciones: escritorio y móvil */
.playlist-area{
  min-height:0;
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  overflow:hidden;
}
.playlist-wrap{
  min-width:0;
  min-height:0;
  height:100%;
  overflow-y:scroll;
  overscroll-behavior:contain;
  scrollbar-width:auto;
  scrollbar-color:var(--gold) rgba(255,255,255,.16);
}
.playlist-wrap::-webkit-scrollbar{width:16px}
.playlist-wrap::-webkit-scrollbar-track{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
}
.playlist-wrap::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold),var(--gold2));
  border:3px solid rgba(22,28,42,.92);
  border-radius:10px;
}
.playlist-wrap::-webkit-scrollbar-thumb:hover{background:var(--gold)}
.mobile-scrollbar{display:none}

@media(max-width:560px){
  .playlist-area{
    grid-template-columns:minmax(0,1fr) 52px;
    column-gap:14px;
  }
  .playlist-wrap{
    padding-right:0;
    overflow-y:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
  }
  .playlist-wrap::-webkit-scrollbar{display:none;width:0}
  .mobile-scrollbar{
    display:grid;
    grid-template-rows:42px minmax(80px,1fr) 42px;
    gap:8px;
    min-height:0;
    padding:5px;
    border:1px solid rgba(255,255,255,.32);
    border-radius:16px;
    background:rgba(255,255,255,.09);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
    user-select:none;
    -webkit-user-select:none;
  }
  .scroll-arrow{
    width:100%;
    min-height:42px;
    padding:0;
    border:1px solid rgba(255,255,255,.22);
    border-radius:11px;
    font-size:1rem;
    line-height:1;
    background:rgba(255,255,255,.18);
    color:#fff;
    touch-action:manipulation;
  }
  .scroll-arrow:active{background:rgba(246,211,101,.42)}
  .scroll-track{
    position:relative;
    min-height:80px;
    margin:0 8px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    background:rgba(0,0,0,.28);
    touch-action:none;
  }
  .scroll-thumb{
    position:absolute;
    top:0;
    left:-8px;
    right:-8px;
    min-height:48px;
    border:2px solid rgba(255,255,255,.48);
    border-radius:999px;
    background:linear-gradient(180deg,var(--gold),var(--gold2));
    box-shadow:0 3px 10px rgba(0,0,0,.48);
    cursor:grab;
    touch-action:none;
  }
  .scroll-thumb:active{cursor:grabbing}
  .track{min-height:54px;padding-right:14px}
}

/* Ajuste móvil: separa el contenido del botón de cierre sin alterar el resto */
@media(max-width:560px){
  .app > .header{margin-top:34px}
}


/* Avisos de sesión: modal centrado sin alterar la maquetación existente */
.session-notice-overlay{
  position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:22px;
  background:rgba(4,8,17,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.session-notice-card{
  width:min(92vw,430px);padding:30px 28px 26px;border:1px solid rgba(255,255,255,.16);
  border-radius:22px;background:linear-gradient(145deg,rgba(30,41,59,.98),rgba(15,23,42,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.52);text-align:center;
  animation:session-notice-in .22s ease-out both
}
.session-notice-icon{
  width:52px;height:52px;margin:0 auto 14px;display:grid;place-items:center;border-radius:15px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#17120a;font-size:1.45rem;
  box-shadow:0 10px 24px rgba(246,211,101,.18)
}
.session-notice-card h2{margin:0 0 12px;color:#fff;font-size:1.28rem;line-height:1.25}
.session-notice-card p{margin:0 auto 20px;color:#dbe2ea;line-height:1.55}
.session-notice-card button{width:auto;min-width:150px;min-height:46px;padding:10px 20px}
@keyframes session-notice-in{
  from{opacity:0;transform:translateY(10px) scale(.975)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.signup-copy .review-separator{width:100%;margin:34px 0 26px;border:0;border-top:1px solid rgba(255,255,255,.18)}
.signup-copy .qr-note h3{margin:26px 0 12px;color:#fff;font-size:1.05rem;text-align:left}
.signup-copy .qr-note p,.signup-copy .qr-note li{text-align:justify!important;text-justify:inter-word!important}
.signup-copy sup a{color:var(--gold);text-decoration:none}
.signup-copy sup a:hover,.signup-copy sup a:focus{text-decoration:underline}












/* Ajuste v6 — únicamente los dos elementos solicitados */
.header p.muted.now-playing-label{
    position:relative !important;
    top:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    transform:translateY(18px) !important;
}
.header p.muted.album-subtitle{
    position:relative !important;
    top:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    transform:translateY(16px) !important;
}
.playlist-area{
    transform:none !important;
    margin-top:42px !important;
}


/* Corrección exclusiva para Firefox:
   evita que el reproductor fijo reserve una banda inferior excesiva. */
@-moz-document url-prefix() {
  .bottom-player{
    min-height:0 !important;
    height:auto !important;
    padding-top:12px !important;
    padding-bottom:12px !important;
    align-content:normal !important;
  }

  .bottom-player audio{
    display:block !important;
    height:40px !important;
    min-height:40px !important;
  }

  .bottom-player #note:empty{
    display:none !important;
  }
}

/* Recuadro central: se alarga SOLO hacia abajo para mostrar 4 canciones completas.
   No cambia la posición de ningún elemento existente. */
@media (min-width:561px){
  .app{
    height:calc(100vh - var(--player) + 18px) !important;
  }
}


/* Reproductor inferior compacto en todos los navegadores */
.bottom-player{
  min-height:0 !important;
  height:auto !important;
  padding-top:12px !important;
  padding-bottom:12px !important;
  align-content:normal !important;
}
.bottom-player audio{
  display:block !important;
  height:40px !important;
  min-height:40px !important;
}
.bottom-player #note:empty{
  display:none !important;
}


/* Fondo inferior integrado en el azul marino de la página */
.bottom-player{
  background:transparent !important;
  border-top:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 max(18px,calc((100vw - 760px)/2)) 24px !important;
  align-content:normal !important;
}

/* El audio queda directamente sobre el fondo azul, sin banda propia */
.bottom-player audio{
  display:block !important;
  width:100% !important;
  height:40px !important;
  min-height:40px !important;
  margin:0 !important;
}

/* No reservar espacio cuando no hay mensaje */
.bottom-player #note:empty{
  display:none !important;
}

/* Escritorio: alarga exclusivamente el borde inferior del recuadro central.
   La parte superior y todos los elementos internos conservan su posición. */
@media (min-width:561px){
  .app{
    height:calc(100vh - 96px) !important;
  }
}


/* Ajuste final: mismo espacio (24px) arriba del recuadro y debajo hasta la línea de tiempo */
@media (min-width:561px){
  .app{
    height:calc(100vh - 112px) !important;
  }
}

/* Se elimina por completo el rótulo auxiliar bajo el reproductor */
.bottom-player #note{
  display:none !important;
}


/* Scroll móvil definitivo: geometría contenida y flechas siempre visibles */
@media(max-width:560px){
  .playlist-area{
    min-height:0 !important;
    overflow:hidden !important;
  }

  .playlist-wrap{
    min-height:0 !important;
    height:100% !important;
  }

  .mobile-scrollbar{
    display:grid !important;
    grid-template-rows:42px minmax(0,1fr) 42px !important;
    gap:8px !important;
    min-height:0 !important;
    height:100% !important;
    max-height:100% !important;
    padding:5px !important;
    overflow:hidden !important;
    align-self:stretch !important;
  }

  .scroll-track{
    min-height:0 !important;
    height:auto !important;
    margin:0 8px !important;
  }

  .scroll-arrow{
    display:grid !important;
    place-items:center !important;
    width:100% !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    padding:0 !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#fff !important;
    background:rgba(255,255,255,.18) !important;
    border:1px solid rgba(255,255,255,.22) !important;
    border-radius:11px !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    font-size:0 !important;
    line-height:1 !important;
  }

  #scrollUp::before{
    content:"▲";
    display:block;
    font-size:16px;
    line-height:1;
    color:#fff;
    opacity:1;
  }

  #scrollDown::before{
    content:"▼";
    display:block;
    font-size:16px;
    line-height:1;
    color:#fff;
    opacity:1;
  }

  .scroll-arrow[aria-disabled="true"]{
    opacity:.55 !important;
  }

  .scroll-arrow:hover,
  .scroll-arrow:focus,
  .scroll-arrow:active{
    visibility:visible !important;
  }
}

/* Firefox: no permitir que el tema nativo o el estado de botón oculten las flechas */
@-moz-document url-prefix(){
  @media(max-width:560px){
    #scrollUp,
    #scrollDown,
    #scrollUp::before,
    #scrollDown::before{
      visibility:visible !important;
      opacity:1 !important;
      color:#fff !important;
    }
    #scrollUp[aria-disabled="true"],
    #scrollDown[aria-disabled="true"]{
      opacity:.55 !important;
    }
  }
}


/* Firefox escritorio: usar scrollbar personalizado con flechas siempre visibles */
@-moz-document url-prefix(){
  @media(min-width:561px){
    .playlist-area{
      grid-template-columns:minmax(0,1fr) 38px !important;
      column-gap:10px !important;
      overflow:hidden !important;
    }

    .playlist-wrap{
      overflow-y:auto !important;
      scrollbar-width:none !important;
      -ms-overflow-style:none !important;
      padding-right:0 !important;
    }

    .playlist-wrap::-webkit-scrollbar{
      display:none !important;
      width:0 !important;
    }

    .mobile-scrollbar{
      display:grid !important;
      grid-template-rows:34px minmax(0,1fr) 34px !important;
      gap:6px !important;
      width:38px !important;
      height:100% !important;
      min-height:0 !important;
      max-height:100% !important;
      padding:3px !important;
      align-self:stretch !important;
      overflow:hidden !important;
      border:1px solid rgba(255,255,255,.28) !important;
      border-radius:12px !important;
      background:rgba(255,255,255,.08) !important;
      visibility:visible !important;
      opacity:1 !important;
    }

    .scroll-arrow{
      display:grid !important;
      place-items:center !important;
      width:100% !important;
      height:34px !important;
      min-height:34px !important;
      max-height:34px !important;
      padding:0 !important;
      margin:0 !important;
      visibility:visible !important;
      opacity:1 !important;
      color:#fff !important;
      background:rgba(255,255,255,.18) !important;
      border:1px solid rgba(255,255,255,.22) !important;
      border-radius:9px !important;
      appearance:none !important;
      -moz-appearance:none !important;
      font-size:0 !important;
    }

    #scrollUp::before{
      content:"▲" !important;
      display:block !important;
      font-size:13px !important;
      line-height:1 !important;
      color:#fff !important;
      visibility:visible !important;
      opacity:1 !important;
    }

    #scrollDown::before{
      content:"▼" !important;
      display:block !important;
      font-size:13px !important;
      line-height:1 !important;
      color:#fff !important;
      visibility:visible !important;
      opacity:1 !important;
    }

    .scroll-arrow[aria-disabled="true"]{
      opacity:.55 !important;
      visibility:visible !important;
    }

    .scroll-track{
      position:relative !important;
      min-height:0 !important;
      height:auto !important;
      margin:0 7px !important;
      border:1px solid rgba(255,255,255,.2) !important;
      border-radius:999px !important;
      background:rgba(0,0,0,.28) !important;
    }

    .scroll-thumb{
      position:absolute !important;
      top:0 !important;
      left:-7px !important;
      right:-7px !important;
      min-height:42px !important;
      border:2px solid rgba(255,255,255,.48) !important;
      border-radius:999px !important;
      background:linear-gradient(180deg,var(--gold),var(--gold2)) !important;
      box-shadow:0 3px 10px rgba(0,0,0,.48) !important;
      visibility:visible !important;
      opacity:1 !important;
    }
  }
}




/* ÚNICO CAMBIO v2: controles de audio con el azul de los botones inactivos */
.bottom-player audio{
  background:#334155 !important;
  border-radius:999px !important;
  color-scheme:dark !important;
}

/* Brave / Chrome / Edge / Safari: el gris estaba en este panel interno */
.bottom-player audio::-webkit-media-controls-enclosure{
  background:#334155 !important;
  border-radius:999px !important;
}
.bottom-player audio::-webkit-media-controls-panel{
  background:#334155 !important;
  border-radius:999px !important;
}

/* Evita una segunda capa gris alrededor del panel en Chromium/WebKit */
.bottom-player audio::-webkit-media-controls{
  background:#334155 !important;
}