/*
 * Estilos para Mi Reproductor MP3 y Lista Blanca (V2.8 - Altura Definitiva)
 */

/* 1. Definición del color principal (ROJO) */
:root {
    --color-principal: #cc0000; /* Rojo vibrante */
}

.mrplb-contenedor {
    background-color: #ffffff;
    border: 1px solid #eeeeee; 
    padding: 15px;
    border-radius: 5px;
    font-family: sans-serif;
    margin-bottom: 20px;
}

.mrplb-reproductor {
    /* Reproductor al 100% del ancho del bloque */
    height: 30px;
    width: 100% !important; 
    margin: 0 0 15px 0;
    display: block; 
}

.mrplb-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Altura de la fila de la pista (Mínimo de 5px arriba y abajo) */
    padding: 5px 0; 
    border-bottom: 1px solid #f9f9f9; 
    transition: background-color 0.2s;
    /* Aseguramos una altura de línea consistente para la fila */
    line-height: 1.2em; 
}

.mrplb-item:last-child {
    border-bottom: none;
}

.mrplb-titulo {
    font-weight: 500;
    color: #333333; 
    flex-grow: 1; 
    padding-right: 15px;
    font-size: 0.95em; 
    /* Eliminar posibles márgenes o alturas de línea extra del título */
    margin: 0;
    line-height: 1.2em; 
}

.mrplb-btn-play {
    /* Estilos del Botón Play/Pause en la lista (ROJO) */
    background: none;
    border: 1px solid var(--color-principal); 
    color: var(--color-principal) !important; 
    cursor: pointer;
    font-size: 1.0em; 
    padding: 2px 6px; 
    border-radius: 3px;
    /* AJUSTE CLAVE: Reducimos el line-height y alineamos verticalmente */
    line-height: 0.8em; /* Hace que el contenido del botón sea más compacto */
    vertical-align: middle; /* Ayuda a centrarlo verticalmente */
    margin: 0; /* Aseguramos que no haya márgenes externos */
    min-width: 35px; 
    text-align: center;
    transition: background-color 0.2s, color 0.2s;
    font-family: Arial, sans-serif;
}

.mrplb-btn-play:hover {
    background-color: var(--color-principal); 
    color: #ffffff !important;
}

/* Evita que el texto o ícono dentro del botón capture el evento de clic */
.mrplb-btn-play * {
    pointer-events: none;
    color: inherit; 
}

/* Estilo para la pista actualmente activa (ROJO) */
.mrplb-item.active {
    background-color: #f5f5f5; 
    border-left: 3px solid var(--color-principal);
    padding-left: 12px; 
}