:root {
    --icon-color: #eee;
    --icon-color-hover: #fff;
    --icon-color-active: #f00;
}

/* ================================================= */
/* === ESTILOS GENERALES Y CORRECCIÓN DE BASE === */
/* ================================================= */
.reproductor-container {
    display: block;
    font-family: sans-serif;
    color: #eee;
    overflow: hidden;
    box-sizing: border-box;
    position: relative !important;
}

.reproductor-background-blur {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.reproductor-container > *,
.reproductor-container canvas {
    position: absolute;
    z-index: 1;
}

.logo-emisora-container, .caratula-cancion-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.logo-emisora-img, .caratula-cancion-img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: cover;
}

.emisora-nombre {
    z-index: 10;
    color: #fff;
    text-align: left;
    font-size: 1.2em;
    font-weight: bold;
}

.controles-container {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
}

.play-pause-btn,
.mute-btn {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
    transition: color 0.2s ease-in-out;
}

.play-pause-btn:hover, .mute-btn:hover { color: var(--icon-color-hover); }
.play-pause-btn:active, .mute-btn:active { color: var(--icon-color-active); }

.en-vivo-container {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 0.8em;
}

.live-icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 1.5s infinite alternate;
}
.live-icon.live { background-color: #3bff05; }
.live-icon.offline { background-color: #888; animation: none; }

@keyframes pulse { from { opacity: 1; } to { opacity: 0.5; } }

.visualizer-canvas {
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.suena-en-radio-container,
.titulo-cancion-container {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%; 
    z-index: 10;
}

.titulo-cancion {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline;
}
.titulo-cancion.scrolling {
    text-overflow: clip;
    padding-left: 100%;
    animation: var(--scroll-animation-name, scroll-horizontal) linear infinite;
}
@keyframes scroll-horizontal { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes scroll-horizontal-reverse { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.mrs-credit-link {
    font-size: 10px;
    color: #FFFFFF;
    text-decoration: none;
    z-index: 10;
    font-family: sans-serif;
    white-space: nowrap;
}
.mrs-credit-link:hover { color: #ffffff; text-decoration: underline; }

/* ========================================================================= */
/* === REGLAS PARA PC DE ESCRITORIO (769px a 1440px) === */
/* ========================================================================= */
@media (min-width: 769px) and (max-width: 1440px) {
    .reproductor-container { width: var(--pc-ancho); height: var(--pc-alto); }
    .logo-emisora-container { top: var(--pc-logo-top); left: var(--pc-logo-left); width: var(--pc-logo-ancho); height: var(--pc-logo-alto); }
    .caratula-cancion-container { top: var(--pc-caratula-top); left: var(--pc-caratula-left); width: var(--pc-caratula-ancho); height: var(--pc-caratula-alto); }
    .suena-en-radio-container { top: var(--pc-suena-top); left: var(--pc-suena-left); }
    .titulo-cancion-container { top: var(--pc-titulo-top); left: var(--pc-titulo-left); }
    .en-vivo-container { top: var(--pc-en-vivo-top); left: var(--pc-en-vivo-left); }
    .visualizer-canvas { top: var(--pc-animacion-top); left: var(--pc-animacion-left); }
    .emisora-nombre { top: var(--pc-emisora-top); left: var(--pc-emisora-left); }
    .controles-container { top: var(--pc-controles-top); left: var(--pc-controles-left); width: var(--pc-controles-ancho); }
    .volumen-slider { width: var(--pc-controles-slider-ancho) !important; }
}

/* ========================================================================= */
/* === REGLAS PARA PANTALLAS GRANDES (+1441px) === */
/* ========================================================================= */
@media (min-width: 1441px) {
    .reproductor-container { width: var(--lg-ancho); height: var(--lg-alto); }
    .logo-emisora-container { top: var(--lg-logo-top); left: var(--lg-logo-left); width: var(--lg-logo-ancho); height: var(--lg-logo-alto); }
    .caratula-cancion-container { top: var(--lg-caratula-top); left: var(--lg-caratula-left); width: var(--lg-caratula-ancho); height: var(--lg-caratula-alto); }
    .suena-en-radio-container { top: var(--lg-suena-top); left: var(--lg-suena-left); }
    .titulo-cancion-container { top: var(--lg-titulo-top); left: var(--lg-titulo-left); }
    .en-vivo-container { top: var(--lg-en-vivo-top); left: var(--lg-en-vivo-left); }
    .visualizer-canvas { top: var(--lg-animacion-top); left: var(--lg-animacion-left); }
    .emisora-nombre { top: var(--lg-emisora-top); left: var(--lg-emisora-left); }
    .controles-container { top: var(--lg-controles-top); left: var(--lg-controles-left); width: var(--lg-controles-ancho); }
    .volumen-slider { width: var(--lg-controles-slider-ancho) !important; }
}

/* ========================================================================= */
/* === REGLAS PARA MÓVILES (HASTA 768px) === */
/* ========================================================================= */
@media (max-width: 768px) {
    /* --- MODO DE POSICIONAMIENTO MANUAL (CUANDO "FULL RESPONSIVE" ESTÁ DESACTIVADO) --- */
    .reproductor-container[data-full-responsive="desactivado"] {
        width: var(--movil-ancho, 95%);
        height: var(--movil-alto, 300px);
    }
    
    .reproductor-container[data-full-responsive="desactivado"] > [data-movil-align-x] {
        position: absolute !important;
        bottom: auto !important;
    }

    .reproductor-container[data-full-responsive="desactivado"] > [data-movil-align-x="left"] {
        left: 15px !important; right: auto !important; transform: none !important;
    }
    .reproductor-container[data-full-responsive="desactivado"] > [data-movil-align-x="center"] {
        left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
    }
    .reproductor-container[data-full-responsive="desactivado"] > [data-movil-align-x="right"] {
        left: auto !important; right: 15px !important; transform: none !important;
    }

    /* Posicionamiento Vertical (Altura en PX) */
    .reproductor-container[data-full-responsive="desactivado"] .logo-emisora-container { top: var(--movil-logo-top); }
    .reproductor-container[data-full-responsive="desactivado"] .caratula-cancion-container { top: var(--movil-caratula-top); }
    .reproductor-container[data-full-responsive="desactivado"] .suena-en-radio-container { top: var(--movil-suena-top); }
    .reproductor-container[data-full-responsive="desactivado"] .titulo-cancion-container { top: var(--movil-titulo-top); }
    .reproductor-container[data-full-responsive="desactivado"] .en-vivo-container { top: var(--movil-en-vivo-top); }
    .reproductor-container[data-full-responsive="desactivado"] .visualizer-canvas { top: var(--movil-animacion-top); }
    .reproductor-container[data-full-responsive="desactivado"] .emisora-nombre { top: var(--movil-emisora-top); }
    .reproductor-container[data-full-responsive="desactivado"] .controles-container { top: var(--movil-controles-top); }
    
    /* Dimensiones de elementos internos en móvil - CORRECCIÓN AÑADIDA */
    .reproductor-container[data-full-responsive="desactivado"] .logo-emisora-container {
        width: var(--movil-logo-ancho);
        height: var(--movil-logo-alto);
    }
    .reproductor-container[data-full-responsive="desactivado"] .caratula-cancion-container {
        width: var(--movil-caratula-ancho);
        height: var(--movil-caratula-alto);
    }
    .reproductor-container[data-full-responsive="desactivado"] .controles-container { width: var(--movil-controles-ancho); }
    .reproductor-container[data-full-responsive="desactivado"] .volumen-slider { width: var(--movil-controles-slider-ancho) !important; }

    /* --- MODO AUTOMÁTICO (CUANDO "FULL RESPONSIVE" ESTÁ ACTIVADO) --- */
    .reproductor-container[data-full-responsive="activado"] {
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        gap: 10px; box-shadow: none !important; border: 2px solid rgba(255, 255, 255, 0.2) !important;
        padding: 15px 0; height: auto !important;
    }
    .reproductor-container[data-full-responsive="activado"] > * {
        position: relative !important; top: auto !important; left: auto !important;
        transform: none !important; width: 90% !important; height: auto !important;
        margin: 0 !important;
    }
    .reproductor-container[data-full-responsive="activado"] .logo-emisora-container {
        width: var(--movil-logo-ancho) !important; height: var(--movil-logo-alto) !important;
    }
    .reproductor-container[data-full-responsive="activado"] .caratula-cancion-container {
        width: var(--movil-caratula-ancho) !important; height: var(--movil-caratula-alto) !important;
    }
}