/* Estilos generales (sin cambios) */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #121212;
    color: #e0e0e0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

.app {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Fondo dinámico (sin cambios) */
.dynamic-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(5px);
    z-index: -1;
    opacity: 0.6;
    transition: background-image 0.7s ease-in-out;
}

.app-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px; /* Reducir el padding del header en general */
    box-sizing: border-box;
    z-index: 10; /* Asegurar que esté por encima del player */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 95%; /* Ajustar el ancho máximo para móviles */
    margin: 0 auto;
}

.header-logo-container {
    text-align: left;
    flex-grow: 1; /* El logo ocupa más espacio */
}

.header-logo {
    display: block;
    width: 160px; /* Reducir ligeramente el tamaño del logo en general */
    height: auto;
}

.header-actions {
    text-align: right;
}

.history-btn {
    background-color: transparent;
    color: #bdbdbd;
    border: none; /* Eliminar el borde */
    padding: 8px; /* Reducir el padding */
    border-radius: 50%; /* Hacerlo circular */
    width: 36px; /* Definir un ancho */
    height: 36px; /* Definir una altura */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 2.2em; /* Tamaño del icono */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.history-btn span {
    display: none; /* Ocultar el texto "Historial" en pantallas más pequeñas */
}

.history-btn i {
    margin-right: 50px; /* Eliminar el margen del icono */
}

.history-btn:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Un fondo sutil al pasar el ratón */
    color: #fdd835;
}

.player {
    width: 95%; /* Ajustar el ancho del reproductor para móviles */
    height: auto; /* Ajustar la altura automáticamente */
    padding: 30px; /* Reducir el padding del reproductor para móviles */
    border-radius: 12px; /* Reducir ligeramente el radio del borde */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Alineación superior para mejor flujo */
    position: relative;
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.station-name-overlay {
    top: -45px; /* Ajustar la posición para más espacio */
    font-size: 2.3em; /* Reducir ligeramente el tamaño de la fuente */
    font-weight: 800; /* Un peso de fuente más ligero */
    font-family: 'akira expanded', sans-serif; /* [MODIFICADO] Usar akira expanded */
}

.player-cover-section {
    width: 350px; /* Duplicar el ancho de la sección del cover (220px * 2) */
    margin-bottom: 1px; /* Aumentar ligeramente el margen inferior */
    position: relative;
}

.player-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px; /* Reducir el radio del borde del cover */
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); /* Ajustar la sombra */
    position: relative;
}

.cover-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
}

#audio-visualizer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6; /* Ligeramente más visible */
    pointer-events: none;
    border-radius: 8px; /* Reducir el radio del borde del visualizador */
}

.player-details {
    text-align: center;
    margin-bottom: 25px; /* Aumentar ligeramente el margen inferior */
    width: 85%;
}

.song-title {
    font-size: 1.3em; /* Ajustar el tamaño de la fuente */
    margin: 0 0 8px; /* Ajustar el margen inferior */
    font-weight: 600;
    color: #f5f5f5;
}

.song-artist {
    font-size: 1.1em; /* Ajustar el tamaño de la fuente */
    margin: 0;
    color: #9e9e9e;
    font-style: normal;
}

.additional-info {
    font-size: 0.9em; /* Ajustar el tamaño de la fuente */
    margin-top: 8px; /* Ajustar el margen superior */
    color: #757575;
}

.player-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px; /* Ajustar el espacio entre controles y sociales */
    width: 100%;
}

.controls-container {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px; /* Reducir el radio del borde */
    padding: 10px 15px; /* Ajustar el padding del contenedor de controles */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Ajustar el espacio entre botones */
    width: auto;
}

.control-button {
    background-color: transparent;
    color: #e0e0e0;
    border: none;
    border-radius: 50%;
    width: 40px; /* Ajustar el ancho de los botones */
    height: 40px; /* Ajustar la altura de los botones */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1em; /* Ajustar el tamaño del icono */
    transition: color 0.3s ease, transform 0.3s ease;
}

.control-button:hover {
    color: #fdd835;
    transform: scale(1.05);
}

.play-pause-button {
    font-size: 1.6em; /* Ajustar el tamaño del icono play/pause */
    width: 45px; /* Ajustar el ancho */
    height: 45px; /* Ajustar la altura */
}

.play-icon,
.pause-icon {
    display: none;
}

.play-pause-button.playing .pause-icon {
    display: block;
}

.play-pause-button:not(.playing) .play-icon {
    display: block;
}

.volume-controls {
    display: flex;
    align-items: center;
    gap: 10px; /* Ajustar el espacio entre controles de volumen */
    width: auto;
    justify-content: center;
}

.volume-slider-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    min-width: 100px; /* Ajustar el ancho mínimo del slider */
}

.volume-icon {
    font-size: 0.8em; /* Ajustar el tamaño del icono de volumen */
    color: #bdbdbd;
}

.volume-slider {
    height: 6px; /* Ajustar la altura del slider */
    margin: 0 6px; /* Ajustar el margen del slider */
}

.volume-slider::-webkit-slider-thumb {
    width: 14px; /* Ajustar el tamaño del thumb */
    height: 14px; /* Ajustar el tamaño del thumb */
}

.volume-slider::-moz-range-thumb {
    width: 14px; /* Ajustar el tamaño del thumb */
    height: 14px; /* Ajustar el tamaño del thumb */
}

.volume-level-indicator {
    display: none;
}

.social-buttons {
    display: flex;
    gap: 20px; /* Ajustar el espacio entre botones sociales */
    margin-top: 25px; /* Ajustar el margen superior */
}

.social-btn {
    color: #fff; /* Color blanco inicial */
    font-size: 2.1em; /* Ajustar el tamaño de los iconos sociales */
    text-decoration: none;
    transition: color 0.3s ease;
    width: 40px; /* Ancho del círculo */
    height: 40px; /* Alto del círculo */
    border-radius: 50%; /* Hacerlo circular */
    background-color: rgba(255, 255, 255, 0.1); /* Fondo sutil para destacar el círculo */
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-btn:hover {
    color: #fdd835; /* Mantener el color al pasar el mouse */
    background-color: rgba(255, 255, 255, 0.2); /* Fondo sutilmente más oscuro al pasar el mouse */
}

.social-btn i {
    /* Los iconos ya deberían estar centrados por el display flex y align-items */
}

.loading-indicator {
    padding: 10px 20px; /* Ajustar el padding */
    border-radius: 6px; /* Reducir el radio del borde */
    font-size: 0.8em; /* Ajustar el tamaño de la fuente */
}

.player-cover.loading .loading-indicator {
    display: block;
}

.player-cover.loading .cover-image,
.player-cover.loading #audio-visualizer {
    opacity: 0.4;
}

.player-footer {
    bottom: 30px; /* Ajustar el margen inferior */
    left: 30px; /* Ajustar el margen izquierdo */
    right: 30px; /* Ajustar el margen derecho */
    font-size: 0.95em; /* Ajustar el tamaño de la fuente del footer */
}

/* Media query para pantallas más pequeñas (móviles) */
@media (max-width: 600px) {
    .header-logo {
        width: 60px; /* Aún más pequeño en móviles */
    }

    .player-cover-section {
        width: 260px; /* Ajustar el tamaño del cover para móviles */
    }

    .station-name-overlay {
        font-size: 1.8em; /* Ajustar aún más */
        top: -35px;
    }

    .song-title {
        font-size: 1.4em; /* Ajustar aún más */
    }

    .song-artist {
        font-size: 1em; /* Ajustar aún más */
    }

    .control-button {
        width: 35px; /* Botones un poco más grandes en móviles */
        height: 35px; /* Botones un poco más grandes en móviles */
        font-size: 1em; /* Iconos un poco más grandes en móviles */
    }

    .play-pause-button {
        font-size: 1.6em; /* Ajustar aún más */
        width: 40px;
        height: 40px;
    }

    .volume-icon {
        font-size: 0.8em; /* Icono de volumen un poco más grande en móviles */
    }

    .volume-slider-container {
        min-width: 80px; /* Slider un poco más pequeño en móviles */
    }

    .social-buttons {
        gap: 15px; /* Ajustar el espacio entre iconos sociales en móviles */
    }

    .social-btn {
        font-size: 1.8em; /* Iconos sociales un poco más grandes en móviles */
        width: 35px;
        height: 35px;
    }

    .player-footer {
        font-size: 0.8em; /* Footer un poco más grande en móviles */
    }
}