/* assets/css/style.css */
/* Define la fuente Inter para todo el cuerpo del documento. */
body {
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased; /* Mejora el suavizado de fuentes en WebKit/Blink */
    -moz-osx-font-smoothing: grayscale;  /* Mejora el suavizado de fuentes en Firefox */
    overflow-x: hidden; /* Asegura que el cuerpo no tenga un scroll horizontal innecesario. */
    /* Transición suave para el padding-bottom */
    transition: padding-bottom 0.3s ease-in-out;
}

/* Estilos generales para todos los input[type="range"] */
input[type="range"] {
    position: relative; /* Mantener */
    -webkit-appearance: none; /* Mantener */
    width: 100%; /* El ancho lo manejará su contenedor flex */
    margin: 0; /* Mantener */
    padding: 0; /* Mantener */
    height: 5px; /* Altura de la barra (Mantener) */
    float: left; /* Mantener */
    outline: none; /* Mantener */
    border-radius: 5px; /* Mantener */
    /* TU BACKGROUND ORIGINAL: Color de la pista no rellenada (Tailwind gray-700) */
    background: #4B5563; /* LO MANTENEMOS, esto será el fondo principal */
}

/* Estilos para el "thumb" (indicador) de WebKit (Chrome, Safari, Edge) */
input[type="range"]::-webkit-slider-thumb {
    position: relative; /* Mantener */
    -webkit-appearance: none; /* Mantener */
    box-sizing: content-box; /* Mantener */
    height: 15px;      /* Tamaño del thumb (Mantener) */
    width: 15px;       /* Tamaño del thumb (Mantener) */
    border-radius: 50%; /* Mantener */
    cursor: pointer; /* CAMBIO: de pointer a grab para mejor UX */
    margin-top: -5px;  /* TU VALOR ORIGINAL (-5px), crucial para la bolita */
    background-color: #6D28D9; /* CAMBIO: De negro a nuestro morado principal */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Mantener */
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Mantener */
}

input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.2); /* Mantener */
    background: #8B5CF6; /* CAMBIO: De negro a morado más claro */
    cursor: grabbing; /* CAMBIO: de pointer a grabbing */
}
input[type="range"]:hover::-webkit-slider-thumb {
    transform: scale(1.2); /* Mantener */
    background: #8B5CF6; /* CAMBIO: De negro a morado más claro */
}


/* Estilos para la "track" (la barra) de WebKit */
/* AQUÍ APLICAREMOS EL BUFFERING CON UN GRADIENTE, como en tu ejemplo */
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%; /* Mantener */
    height: 5px; /* Altura de la barra (Mantener) */
    cursor: pointer; /* Mantener */
    border-radius: 5px; /* Mantener */
    /* TU GRADIENTE ORIGINAL PARA BUFFERING/NO CARGADO (ADAPTADO A VAR) */
    background: linear-gradient(to right, rgba(199, 199, 199, 0.6) var(--buffered-width, 0%), rgba(199, 199, 199, 0.2) var(--buffered-width, 0%));
}

/* Pseudo-elemento para el progreso rellenado (parte ya reproducida) */
/* ESTE ES EL COLOR SÓLIDO MORADO QUE SE MUEVE CON LA BOLITA */
input[type="range"]::before {
    position: absolute; /* Mantener */
    content: ""; /* Mantener */
    top: 0px; /* Mantener */
    left: 0; /* Mantener */
    width: var(--progress-width, 0%); /* CAMBIO: Usa --progress-width para el JS */
    height: 5px; /* Altura de la barra (Mantener) */
    border-radius: 5px; /* Mantener */
    background-color: #6D28D9; /* CAMBIO: De negro a nuestro morado principal */
    cursor: pointer; /* Mantener */
    z-index: 1; /* Asegura que esté sobre el track, debajo del thumb */
    pointer-events: none; /* Crucial para permitir interacción con el thumb */
}


/* Estilos para el "thumb" de Firefox */
input[type="range"]::-moz-range-thumb {
    box-sizing: content-box; /* Mantener */
    height: 15px; /* Mantener */
    width: 15px; /* Mantener */
    border-radius: 50%; /* Mantener */
    background-color: #6D28D9; /* CAMBIO: De negro a nuestro morado principal */
    cursor: pointer; /* CAMBIO: de pointer a grab */
    border: 1px solid #A78BFA; /* CAMBIO: De #ffeb00 a nuestro morado más claro */
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Mantener */
}

input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.2); /* Mantener */
    background: #8B5CF6; /* CAMBIO: De negro a morado más claro */
}

/* Estilos para la "track" de Firefox */
input[type="range"]::-moz-range-track {
    width: 100%; /* Mantener */
    height: 5px; /* Mantener */
    border-radius: 5px; /* Mantener */
    cursor: pointer; /* Mantener */
    /* TU GRADIENTE ORIGINAL PARA BUFFERING/NO CARGADO (ADAPTADO A VAR) */
    background: linear-gradient(to right, rgba(199, 199, 199, 0.6) var(--buffered-width, 0%), rgba(199, 199, 199, 0.2) var(--buffered-width, 0%));
}

/* Estilos para la parte rellenada de la pista en Firefox (específico) */
/* Este es el progreso ya reproducido para Firefox */
input[type="range"]::-moz-range-progress {
    background-color: #6D28D9; /* CAMBIO: De negro a nuestro morado principal */
    border-radius: 5px; /* Mantener */
    height: 5px; /* Asegurar que la altura coincida (Mantener) */
}

/* Eliminar el contorno de enfoque por defecto en Firefox */
input[type="range"]::-moz-focus-outer {
    border: 0; /* Mantener */
}


/* Estilos para el "track" de MS Edge/IE */
input[type="range"]::-ms-track {
    width: 100%; /* Mantener */
    height: 5px; /* CAMBIO: De 3px a 5px para consistencia */
    cursor: pointer; /* Mantener */
    background: transparent; /* Mantener */
    border: solid transparent; /* Mantener */
    color: transparent; /* Mantener */
}

/* Estilos para la parte rellenada de la pista en MS Edge/IE (progreso) */
input[type="range"]::-ms-fill-lower {
    background-color: #6D28D9; /* CAMBIO: De negro a nuestro morado principal */
}
/* Estilos para la parte no rellenada de la pista en MS Edge/IE (buffering/no cargado) */
input[type="range"]::-ms-fill-upper {
    background: linear-gradient(to right, rgba(199, 199, 199, 0.6) var(--buffered-width, 0%), rgba(199, 199, 199, 0.2) var(--buffered-width, 0%)); /* CAMBIO: Tu gradiente original */
    border-radius: 5px; /* Mantener */
}

/* Estilos para el "thumb" de MS Edge/IE */
input[type="range"]::-ms-thumb {
    box-sizing: content-box; /* Mantener */
    border: 1px solid #A78BFA; /* CAMBIO: De #ffeb00 a nuestro morado más claro */
    height: 15px; /* Mantener */
    width: 15px; /* Mantener */
    border-radius: 50%; /* Mantener */
    background-color: #6D28D9; /* CAMBIO: De negro a nuestro morado principal */
    cursor: pointer; /* CAMBIO: de pointer a grab */
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Mantener */
}

input[type="range"]:active::-ms-thumb {
    transform: scale(1.2); /* Mantener */
    background: #8B5CF6; /* CAMBIO: De negro a morado más claro */
}


/* Animación de entrada para el contenedor del reproductor de audio de ESCRITORIO. */
/* Asegura transiciones suaves para la visibilidad controlada por JS */
#audio-player-container {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    /* Las propiedades de transform y opacity iniciales se definen en el HTML */
}

/* Asegura que todos los contenedores de reproductor respeten su padding/border en el tamaño */
#audio-player-container,
#mobile-mini-player-container,
#mobile-full-player-modal {
    box-sizing: border-box;
}

/* Esconder el elemento de audio HTML por defecto */
#audio-player {
    display: none !important;
}

/* Estilos para el scrollbar personalizado en el modal de la lista */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px; /* Ancho del scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #4B5563; /* Color de la pista */
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #8B5CF6; /* Color del "thumb" (la barra arrastrable) */
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #6D28D9; /* Color del "thumb" al pasar el ratón */
}

/* --- ESTILOS ESPECÍFICOS PARA EL DISEÑO MÓVIL (MENOS DE 640px) --- */
@media (max-width: 639px) { /* Este media query aplica solo a pantallas pequeñas (móviles) */
    /* Ajusta el padding inferior del cuerpo para dejar espacio para el mini-reproductor y la nav inferior */
    body {
        /* Altura de mobile-mini-player-container (4.5rem = 72px) + Altura de mobile-bottom-nav (4rem = 64px) */
        padding-bottom: calc(4.5rem + 4rem); 
    }

    /* Posiciona el mini-reproductor móvil justo encima de la navegación inferior */
    #mobile-mini-player-container {
        bottom: 4rem; /* 4rem es la altura de #mobile-bottom-nav */
    }

    /* Oculta la navegación del header en móvil (AHORA QUE EL BUSCADOR ESTÁ FUERA DE ELLA) */
    header nav {
        display: none !important;
    }

    /* Oculta el pie de página de escritorio en móvil */
    footer {
        display: none !important;
    }

    /* Define las transiciones y estados iniciales para los elementos móviles */
    #mobile-mini-player-container,
    #mobile-full-player-modal { 
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        transform: translateY(100%); /* Comienza oculto, se hará visible con JS */
        opacity: 0;
    }

    /* Clase para mostrar las barras móviles (excepto nav inferior, que es siempre visible) */
    #mobile-mini-player-container.show {
        transform: translateY(0);
        opacity: 1;
    }

    /* El menú de navegación inferior móvil SIEMPRE VISIBLE en móvil */
    #mobile-bottom-nav {
        transform: translateY(0) !important; 
        opacity: 1 !important; 
        transition: none; /* Asegura que no haya transiciones indeseadas para su visibilidad base */
    }


    /* Estado inicial oculto del modal de reproductor completo móvil */
    #mobile-full-player-modal {
        transform: translateY(100%); /* Deslizado hacia abajo fuera de la vista */
        opacity: 0;
        pointer-events: none; /* No interactuable cuando está oculto */
    }

    /* Estado visible del modal de reproductor completo móvil */
    #mobile-full-player-modal.show-full-player {
        transform: translateY(0); /* Se desliza hacia arriba */
        opacity: 1;
        pointer-events: auto; /* Interactuable cuando está visible */
    }

    /* --- REGLAS ADICIONALES PARA LA PAGINACIÓN EN MÓVIL --- */
    /* Permite que los botones de paginación se envuelvan y añade margen entre ellos */
    #pagination {
        flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea */
        justify-content: center; /* Centra los botones cuando se envuelven */
        gap: 0.5rem; /* Espacio entre los botones, ajusta según sea necesario */
        padding: 0 0.5rem; /* Pequeño padding horizontal para que no se peguen a los bordes */
    }

    /* Ajusta el padding de los botones para que no sean demasiado grandes en móvil */
    #pagination button {
        padding: 0.75rem 1rem; /* Ajusta el padding vertical y horizontal */
        font-size: 0.875rem; /* Tamaño de fuente más pequeño para móvil (sm:text-sm) */
    }
}

/* --- ESTILOS ESPECÍFICOS PARA EL DISEÑO DE ESCRITORIO (640px y más) --- */
@media (min-width: 640px) { /* Este media query aplica a pantallas grandes (escritorio) */
    /* Restablece el padding inferior del body para escritorio por defecto */
    body {
        padding-bottom: 0; /* Sin padding si no hay reproductor activo */
    }

    /* Aumenta el padding-bottom del body cuando el reproductor de escritorio está activo */
    body.desktop-player-active {
        /* Altura aproximada del reproductor de escritorio: 60px (imagen/alturas) + 16px*2 (p-4 vertical) = ~92px
           Redondeamos a 100px para asegurar espacio. Ajusta este valor si es necesario. */
        padding-bottom: 100px; /* Esto empujará el contenido hacia arriba */
    }


    /* Oculta la navegación inferior y el mini-reproductor en escritorio */
    #mobile-bottom-nav,
    #mobile-mini-player-container {
        display: none !important;
    }

    /* Asegura que el reproductor de ESCRITORIO se muestre como un bloque normal */
    #audio-player-container {
        position: fixed; /* Mantiene la posición fija en la parte inferior */
        bottom: 0;
        left: 0;
        right: 0;
        transform: translateY(100%); /* Oculto inicialmente, se muestra con JS */
        opacity: 0; /* Oculto inicialmente, se muestra con JS */
        pointer-events: none; /* No clickeable inicialmente */
        display: block !important; 
    }
    
    /* Clase para mostrar el reproductor de escritorio */
    #audio-player-container.show-player {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* El modal de reproductor completo móvil debe estar oculto en escritorio */
    #mobile-full-player-modal {
        display: none !important;
    }

    /* Restablece la paginación para escritorio */
    #pagination {
        flex-wrap: nowrap; /* Los botones no se envuelven en escritorio */
        gap: 0.5rem; /* Espacio entre botones */
        padding: 0; /* Sin padding adicional */
    }
}

/* Estilos para los enlaces activos de navegación (tanto escritorio como móvil) */
/* La clase 'font-bold' y 'text-purple-200' se añaden/quitan con JS. */
/* Asegúrate de que estos estilos sobrescriban los normales cuando están presentes. */
a.font-bold.text-purple-200 {
    font-weight: bold;
    color: #A78BFA; /* Un morado claro para el estado activo */
}

/* Los enlaces que son 'pointer-events-none' no deben cambiar al hacer hover */
a.pointer-events-none:hover {
    color: inherit; /* Mantiene el color actual (el morado activo) */
    cursor: default; /* Mantiene el cursor por defecto */
}


/* === REGLA ESPECÍFICA PARA LA BARRA DE PROGRESO MÓVIL (para evitar conflictos de touch/scroll) === */
#mobile-full-player-progress-bar {
    touch-action: none;
}