/* 6. Estilos para la Página de Reproducción (reproduccion.index.html) */

.reproduction-page {
    padding: 40px;
    min-height: 80vh; 
}

/* Modificado: Añadir flex-wrap para permitir que el contenido relacionado salte de línea */
.reproduction-container {
    display: flex;
    flex-wrap: wrap; 
    gap: 40px; 
    max-width: 1200px;
    margin: 0 auto; 
}

/* El área del reproductor (izquierda) ocupará más espacio */
.player-area {
    flex: 3; 
    background-color: #1F1F1F;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    /* Importante: centrar el contenido (el h2 y la imagen) */
    text-align: center;
}

.cover-area {
    flex: 2; 
    background-color: #1F1F1F;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* 🎧 Estilos para el nuevo contenido relacionado */
.related-content-area {
    width: 100%;
    margin-top: 40px; 
    background-color: #1F1F1F;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.reproduction-page h2 {
    color: var(--color-primary);
    margin-bottom: 20px;
    font-size: 1.8em;
    text-align: left;
}

/* 🖼️ Estilos específicos para la imagen de Portada */
.player-area img {
    /* Estas dos propiedades centran un elemento de bloque de ancho limitado */
    display: block; 
    margin: 0 auto;
    
    width: 100%;
    height: auto;
    max-width: 350px; /* Limita el tamaño para que no se expanda demasiado */
    border-radius: 4px;
}

/* Estilo del reproductor de audio */
.audio-player {
    width: 100%;
    margin-bottom: 20px; 
    filter: invert(100%) hue-rotate(180deg);
}

.metadata p {
    margin-bottom: 5px;
    padding: 5px 0;
    border-bottom: 1px dashed #333;
}

.metadata p:last-child {
    border-bottom: none;
}

/* Responsividad para la página de reproducción */
@media (max-width: 1024px) {
    .reproduction-container {
        flex-direction: column; 
        gap: 30px;
    }

    .reproduction-page {
        padding: 20px;
    }
}