:root {
    --color-black: #202020;
    --color-white: #FFFFFF;
    --color-yellow: #EBD661;
    --color-gray: #C5C5C5;
    --color-gray-light: #F2F2F2;
    /* Altura real del dock del reproductor persistente (T-541: ya sin tab
       bar, que compartía este dock), actualizada por
       `bottom_dock_controller.js` (T-062) vía `ResizeObserver` sobre
       `#bottom-dock`. El valor por defecto de 56px es solo un fallback
       hasta que JS la calcula tras el primer render. */
    --player-dock-height: 56px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* T-082: `min-height` en vez de `height` fijo — con `height: 100%` el
   `body` quedaba limitado a la altura del viewport y, en páginas donde el
   contenido (p. ej. la sección "Reseñas" del álbum, T-079) supera esa
   altura, el `padding-bottom: var(--player-dock-height)` de más abajo no
   garantizaba espacio real de scroll bajo el dock fijo en todos los
   motores/navegadores. `min-height: 100%` permite que el documento crezca
   con su contenido real sin perder el centrado vertical de las pantallas
   cortas que dependen de esta altura (`.half-screen`). */
body, html {
    min-height: 100%;
    margin: 0;
    background-color: var(--color-gray-light);
    display: flex;
    flex-direction: column;
}

.btn-primary {
    background-color: var(--color-yellow) !important;
    border-color: var(--color-yellow) !important;
    color: var(--color-black) !important;
}

.btn-primary:hover {
    background-color: var(--color-white) !important;
    border-color: var(--color-black) !important;
    color: var(--color-black) !important;
}

/** Nav - Menú **/
.navbar {
    background-color: #000000 !important;
}
.navbar .nav-link {
    color: #FFFFFF !important;
}
.navbar-toggler {
    background-color: #EEE;
}
.navbar-toggler-icon {
    width: 100px;
    background-color: #EEE !important;
    border: 1px solid #999;
}

/** Form Código **/
.half-screen {
    height: 50%; /* Cada mitad ocupa la mitad de la pantalla */
}

.top-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #f8f9fa; /* Color claro para la parte superior */
}

.bottom-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #e9ecef; /* Color claro para la parte inferior */
}

.instructions {
    font-size: 0.9rem;
    color: #6c757d; /* Texto gris para las instrucciones */
    margin-bottom: 1rem;
}

.error {
    font-size: 0.9rem;
    color: #900000;
    margin-bottom: 1rem;
}

.form-container {
    max-width: 300px;
    width: 100%;
}

.btn-primary {
    width: 100%; /* Botón ocupa todo el ancho del formulario */
}

/* Estilo para la imagen circular */
.rounded-circle {
    width: 40px;
    height: 40px;
    object-fit: cover;
}
.dropdown-menu {
    min-width: 200px;
}

.display-4 {
    font-size: 1.8rem;
}

.display-5 {
    font-size: 1.1rem;
}

/* Ajustes para móviles y pantallas pequeñas */
@media (max-width: 576px) {
    .display-4 {
        font-size: 1.2rem; /* Reduce el tamaño del título en pantallas pequeñas */
    }
    .display-5 {
        font-size: 0.8rem; /* Reduce el tamaño en pantallas pequeñas */
    }    
    .rounded-circle {
        width: 35px;
        height: 35px;
    }
}

.modal-footer {
    border: 0px;
}

#header-sub {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    text-align: center;
}

.demo {
    background-color: var(--color-yellow);
    padding: 10px;
    border-radius: 10px;
}

#header-logged {
    background-color: #020202;
}

#header-logged h1 {
    color: #FFF;
}

.btn-menu {
    background-color: var(--color-yellow);
    color: var(--color-black);
    border-radius: 0;
    border: 2px solid black;
    padding: 10px 15px;
    font-weight: bold;
}

.mosaic {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.mosaic-anon {
    display: grid;
    grid-template-columns: repeat(2, 2fr);
}

.mosaic-videos {
    display: grid;
    grid-template-columns: repeat(1, 1fr);    
    gap: 15px;
    padding: 20px;
}

@media (min-width: 768px) {
    .mosaic {
      grid-template-columns: repeat(3, 1fr);
    }
    .mosaic-videos {
      grid-template-columns: repeat(2, 1fr);
    }    
}

@media (min-width: 1200px) {
    .mosaic {
        grid-template-columns: repeat(4, 1fr);
    }
    .mosaic-videos {
        grid-template-columns: repeat(3, 1fr);
    }    
}

#sw-progress-container {
    width: 100%;
    max-width: 300px;
    background: var(--color-white);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 999999;
}
  
#sw-progress-container progress {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}

#sw-progress-container progress::-webkit-progress-bar {
    background: var(--color-white);
}

#sw-progress-container progress::-webkit-progress-value {
    background: var(--color-yellow);
}

/* Contenedor común fijo al fondo de la pantalla (reproductor persistente) —
   T-061. Único elemento `fixed-bottom`/con `z-index` real del dock; el
   reproductor vive en flujo normal dentro de él, sin `bottom`/`z-index`
   independiente propio. T-541 (Fase 50): eliminada la tab bar inferior que
   compartía este dock con el reproductor. */
#bottom-dock {
    z-index: 9999;
}

/* Reproductor persistente del sitio público — T-059.
   Rediseño visual T-063: fondo negro real, portada cuadrada redondeada,
   controles centrados y volumen a la derecha, alineado con
   `.claude/screenshots/Album.png`/`Inicio.png`. */
.persistent-player {
    padding: 6px 12px;
    gap: 8px;
    background-color: #000000;
    color: #ffffff;
}

.persistent-player-cover {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.persistent-player-info {
    min-width: 0;
    flex: 1 1 auto;
}

.persistent-player-title {
    font-weight: 600;
    color: #ffffff;
}

.persistent-player-subtitle {
    color: #b3b3b3;
}

.persistent-player-controls {
    flex: 1 1 auto;
    justify-content: center;
}

/* T-197/F2,F4: en móvil, barra de progreso es la primera fila del dock (solo
   la barra, sin etiquetas de tiempo) y el volumen queda oculto (volumen del sistema). */
@media (max-width: 767px) {
    .persistent-player-time {
        display: none;
    }

    .persistent-player-progress {
        margin-top: 0;
        margin-bottom: 0;
    }

    .persistent-player-volume {
        display: none !important;
    }
}

/* T-082: en desktop, grid de 3 columnas (info | controles | volumen)
   para que los controles queden centrados matemáticamente en el dock.
   La fila de progreso (T-197/F2) ocupa todo el ancho como primera fila. */
@media (min-width: 768px) {
    .persistent-player {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .persistent-player-progress {
        grid-column: 1 / -1;
    }

    .persistent-player-expand-trigger {
        grid-column: 1;
    }

    .persistent-player-controls {
        grid-column: 2;
        flex: 0 0 auto;
    }

    .persistent-player-volume {
        grid-column: 3;
        justify-self: end;
    }
}

.persistent-player-btn {
    padding: 4px 6px;
    font-size: 1.3rem;
    line-height: 1;
    color: #ffffff;
}

.persistent-player-btn-play {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 4px;
}

.persistent-player-btn-play:hover,
.persistent-player-btn-play:focus {
    color: #000000;
    /* Forzar el fondo del círculo: al llevar también la clase Bootstrap
       `btn btn-link`, `.btn:hover` aplica `--bs-btn-hover-bg: transparent`
       y vaciaba el círculo blanco, dejando el icono negro invisible sobre
       el dock oscuro (parecía "desaparecer"). */
    background-color: #e6e6e6;
}

.persistent-player-volume {
    flex-shrink: 0;
    gap: 6px;
    color: #ffffff;
}

.persistent-player-volume input[type="range"] {
    width: 70px;
}

/* Disparador del overlay a pantalla completa (T-078): envuelve portada +
   info dentro de un `<button>` sin perder el layout flex existente
   (`.persistent-player-cover`/`.persistent-player-info` se mantienen
   intactos visualmente, solo se hacen pulsables como unidad). */
.persistent-player-expand-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

/* Barra de progreso/seek del reproductor persistente — T-071.
   Fila propia a lo largo de todo el ancho del dock (de ahí el `flex-wrap`
   en `.persistent-player` y el `w-100` en el markup), debajo de la fila de
   info/controles/volumen, con los tiempos actual/total a los lados del
   range central. */
.persistent-player-progress {
    gap: 8px;
    margin-bottom: 4px;
}

.persistent-player-time {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #b3b3b3;
    min-width: 2.5em;
    text-align: center;
}

.persistent-player-seek {
    flex: 1 1 auto;
    width: auto;
}

/* Overlay a pantalla completa del reproductor persistente — T-078.
   Vive dentro de `#bottom-dock` (mismo `z-index: 9999` ya fijado ahí),
   por encima del dock compacto mediante `position: fixed` propio cubriendo
   todo el viewport, sin colisionar con las reglas del dock compacto
   (`.persistent-player*`, líneas ~318-412) ni con `#bottom-dock` (líneas
   ~298-306): este sigue existiendo debajo, en el flujo normal del
   documento. Layout basado en `.claude/screenshots/Canción2.png`: fondo
   oscuro, portada grande centrada, info, barra de progreso y controles. */
.player-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: #0b0b0b;
    color: #ffffff;
    /* T-103: el overlay cubre TODO el viewport (no hay dock compacto
       visible detrás que evitar mientras está abierto), así que no debe
       reservar `--player-dock-height` en su padding-bottom — esa
       variable mide el dock compacto (puede superar 190px en móvil con
       varias filas de controles) y se pensó para el
       `padding-bottom` del `body` en páginas normales, no para el
       espaciado interno de este overlay. Reutilizarla aquí inflaba el
       hueco inferior y empujaba la cola/controles fuera de pantalla en
       viewports cortos. */
    padding: 16px 24px 24px;
    overflow-y: auto;
}

.player-overlay-header {
    flex-shrink: 0;
}

.player-overlay-close {
    color: #ffffff;
    font-size: 1.5rem;
    padding: 4px;
    line-height: 1;
}

.player-overlay-cover-wrapper {
    width: 100%;
    max-width: 360px;
    margin: 16px auto 0;
}

.player-overlay-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

.player-overlay-info {
    margin-top: 24px;
}

.player-overlay-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
}

.player-overlay-subtitle {
    color: #b3b3b3;
    margin-top: 4px;
}

.player-overlay-progress {
    gap: 8px;
    margin-top: 24px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.player-overlay-controls {
    gap: 16px;
    margin-top: 24px;
}

.player-overlay-btn {
    color: #ffffff;
    font-size: 1.8rem;
    padding: 6px 10px;
    line-height: 1;
}

.player-overlay-btn-play {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.player-overlay-btn-play:hover,
.player-overlay-btn-play:focus {
    color: #000000;
    /* Mismo bug que T-090 en el dock compacto: al llevar también la
       clase Bootstrap `btn btn-link`, `.btn:hover` aplica
       `--bs-btn-hover-bg: transparent` y vaciaba el círculo blanco. */
    background-color: #e6e6e6;
}

/* Carrusel automático de fondos del overlay — T-087.
   Capa de fondo a pantalla completa, detrás del resto del contenido del
   overlay (z-index negativo respecto a `.player-overlay`, que no declara
   `z-index` propio en sus hijos salvo `position: fixed` en el contenedor
   raíz, así que basta con `position: absolute` + `z-index: -1` dentro de
   él). La imagen se asigna vía `background-image` inline desde
   `renderBackgroundCarousel()` (player_controller.js), con transición
   simple de opacidad entre imágenes consecutivas. */
.player-overlay-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.35;
    transition: background-image 0.8s ease-in-out;
}

/* Toggle "Modo Radio" del dock compacto — T-087. Mismo tamaño/color que
   el resto de `.persistent-player-btn`; el estado activo se distingue con
   un fondo circular blanco translúcido, sin depender de JS adicional más
   allá del toggle de clase ya hecho en `toggleRadioMode()`. */
.player-radio-toggle {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-right: 4px;
}

.player-radio-toggle-active {
    background-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Bounce sutil del icono cuando el Modo Radio está activo (T-163).
   Amplitud mínima (2px) y duración lenta para que se perciba sin
   resultar molesto ni interferir con el resto de controles del dock;
   se anima solo el icono interior (no el botón completo) para no
   desplazar el fondo circular ni el resto del layout del dock. */
.player-radio-toggle-active i {
    display: inline-block;
    animation: radioToggleBounce 2.4s ease-in-out infinite;
}

@keyframes radioToggleBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}


/* Desplegable de cola pendiente del overlay — T-162. Sustituye al panel
   colapsable fijo de T-087/T-095 (`.player-overlay-queue*`, eliminado por
   romper la visualización a pantalla completa): ahora es un `dropdown`
   Bootstrap igual que el menú de 3 puntos contiguo, con scroll propio
   para no crecer sin límite si hay muchas pistas en cola. */
.player-overlay-header-actions {
    gap: 4px;
}

.player-overlay-queue-dropdown-menu {
    max-height: 320px;
    overflow-y: auto;
    min-width: 220px;
}

.player-overlay-queue-dropdown-empty {
    padding: 4px 16px;
}

/* `<div>` dentro del `<ul>` del dropdown que actúa de contenedor para los
   `<li>` de pistas pendientes inyectados por `renderQueueList()` —
   `display: contents` lo hace transparente al layout de la lista (sin
   anidar un elemento extra entre el `<ul>` y sus `<li>`). */
.player-overlay-queue-dropdown-list {
    display: contents;
}

.player-queue-item {
    background: none;
    border: none;
    color: inherit;
    text-align: left;
    width: 100%;
}

.player-overlay-queue-radio-item {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Home global con grid de álbumes por categoría — T-017, grid responsive T-154 */
.home-carousel-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Ficha de álbum/campaña — T-019 */
.album-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

@media (max-width: 767px) {
    .album-cover {
        max-width: 60vw;
        display: block;
        margin: 0 auto;
    }
}

.artist-photo {
    width: 56px;
    height: 56px;
    object-fit: cover;
}

/* Numeración de pista a la izquierda de la carátula — T-949 */
.album-track-number {
    width: 1.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

/* Imagen + overlay de Play por fila de pista — T-055 */
.album-track-cover-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
}

.album-track-cover {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
}

.album-track-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    border-color: transparent;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.album-track-cover-wrapper:hover .album-track-play-overlay,
.album-track-play-overlay:focus {
    opacity: 1;
}

.album-track-playing .album-track-play-overlay {
    opacity: 1;
}

/* T-081: el overlay de "Desbloquear" (pista bloqueada, `<a>` hacia
   "Apoyar") es siempre clicable, pero por defecto queda con opacity: 0
   hasta :hover/:focus, que no existen en touch — en móvil el enlace
   funciona pero es invisible, dando la impresión de que el botón no
   responde. Se fuerza visible siempre para esta variante concreta. */
a.album-track-play-overlay {
    opacity: 1;
}

/* Reserva exactamente la altura real del dock combinado (T-062), medida
   en JS (`bottom_dock_controller.js`) en vez de un valor fijo. */
body {
    padding-bottom: var(--player-dock-height, 56px);
}

/* Toast de confirmación al compartir (T-152): feedback visible global cuando
   se copia un enlace al portapapeles, tanto desde el menú de 3 puntos por
   pista (`track_options_controller`) como desde el overlay del reproductor
   (`player_controller`). Autogestionado por `assets/lib/share.js`: se crea
   bajo demanda, nunca acumula duplicados y se elimina solo. */
.share-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--player-dock-height, 56px) + 16px);
    transform: translateX(-50%) translateY(12px);
    z-index: 1080;
    background: #0b0b0b;
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.share-toast.share-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* T-165: bloque de addon comprable en /apoyar — todo el <label> es
   clicable (gracias a .list-group-item-action de Bootstrap, que ya da
   hover/cursor:pointer) y el precio se destaca como pastilla/botón para
   que se perciba claramente como una acción, no solo como texto. */
.addon-block {
    cursor: pointer;
}
.addon-price-pill {
    display: inline-block;
    background-color: #0b0b0b;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
}