/*
Theme Name: Estilos de Radios Yaracuy
Description: Estilos CSS para el plugin Radios Yaracuy.
Version: 2.1.7 // Incrementando el número de versión
Author: Rosalbo Camargo Siliet
Author URI: https://radiosdeyaracuy.com/
*/

/* ==========================================================================
   Variables y Configuraciones Globales
   ========================================================================== */
:root {
    --primary-color: #2196F3; /* Color principal */
    --playing-color: #00c129; /* Color para estado "reproduciendo" */
    --error-color: #ff0000; /* Color de error */
    --text-light: #e0e0e0; /* Color de texto claro */
    --text-muted: #9e9e9e; /* Color de texto atenuado */
    --bg-dark: #121212; /* Color de fondo oscuro */
    --bg-transparent: rgba(18, 18, 18, 0.5); /* Color de fondo transparente */
    --bg-element: rgba(255, 255, 255, 0.08); /* Color de fondo para elementos */
    --border-radius: 8px; /* Radio del borde */
    --transition: all 0.3s ease; /* Transición suave */
    --circle-border-color: rgba(255, 255, 255, 0.2); /* Color del borde circular */
    --circle-border-size: 2px; /* Grosor del borde circular */
    --circle-padding: 8px; /* Espacio entre el botón y el círculo */
}
    /* Base para Tipografía Responsiva */
    font-size: 16px; /* Tamaño de fuente base para unidades rem */
}

/* ==========================================================================
   Estilos Base
   ========================================================================== */
* {
    box-sizing: border-box; /* Incluye padding y borde en el tamaño del elemento */
    margin: 0; /* Sin margen por defecto */
    padding: 0; /* Sin padding por defecto */
}

body {
    font-family: 'Montserrat', sans-serif; /* Fuente principal */
    background-color: var(--bg-dark); /* Color de fondo */
    color: var(--text-light); /* Color del texto */
    line-height: 1.6; /* Altura de línea */
    -webkit-font-smoothing: antialiased; /* Suavizado de fuente en WebKit */
    -moz-osx-font-smoothing: grayscale; /* Suavizado de fuente en Firefox */
    /* Usar rem también para el tamaño de fuente del body */
    font-size: 1rem; /* Tamaño de fuente base */
}

/* ==========================================================================
   Estructura Principal
   ========================================================================== */

.app {
    width: 100%;
    height: auto; /* Ajustar altura automáticamente */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Alineación al inicio para contenido extenso */
    position: relative;
    padding-bottom: 20px; /* Espacio al final si es necesario */
    box-sizing: border-box;
}

/* Fondo dinámico */
.dynamic-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(5px); /* 👈 Cambia a 0px para eliminar el desenfoque (ej: 5px para borroso) */
    z-index: -1;
    opacity: 1; /* 👈 Máxima opacidad (1 = 100%). Reduce a 0.8 o menos para atenuar */
    transition: background-image 0.7s ease-in-out;
}

/* ==========================================================================
   Header
   ========================================================================== */

.app-header {
    position: sticky; /* Mantener en la parte superior al hacer scroll */
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    z-index: 100; /* Asegurar que esté sobre otros elementos */
    background-color: rgba(18, 18, 18, 0.5); /* Fondo oscuro más transparente */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 95%;
    margin: 0 auto;
}

.header-logo-container {
    text-align: left;
    flex-grow: 1;
    display: flex; /* Para alinear logo e imagen del nombre */
    align-items: center; /* Centrar verticalmente */
}

.header-logo {
    display: block;
    width: 60px;
    height: auto;
    margin-right: 10px; /* Espacio entre logo e imagen del nombre */
}

.station-name-image {
    max-height: 30px; /* Ajusta el tamaño según necesites */
    display: inline-block; /* Para que esté en línea con el logo si es necesario */
    vertical-align: middle; /* Alinear verticalmente con el logo */
    opacity: 0.8; /* Ajusta la opacidad si lo deseas */
}

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

.website-btn {
    background-color: transparent;
    color: #bdbdbd;
    border: none;
    padding: 8px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 2.2em;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none; /* Para que el icono no tenga subrayado */
    margin-left: 5px; /* Espacio si hay otros botones en el header */
}

.website-btn span {
    display: none;
}

.website-btn i {
    margin-right: 0;
}

.website-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #2196F3; /* Un color azul distintivo para el enlace web */
}

/* ==========================================================================
   Contenedores de Reproductores
   ========================================================================== */
.radios-yaracuy-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    width: 95%;
    margin: 20px auto;
    padding-top: 70px; /* Espacio para el header sticky */
    box-sizing: border-box;
}

/* Para pantallas grandes (ej: 992px o más ancho) mostrar 4 columnas en el shortcode de múltiples radios */
@media (min-width: 992px) {
    .radios-yaracuy-container {
        grid-template-columns: repeat(4, 1fr);/* modificar el # de reproductores en cada columna */
    }
}

/* ==========================================================================
   Reproductor Individual
   ========================================================================== */
.radio-player {
    height: auto;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    width: 100%; /* Asegurar que el reproductor individual ocupe el ancho de su contenedor */
    max-width: 600px; /* O un ancho máximo deseado para reproductores individuales */
    margin: 15px auto; /* Centrar reproductores individuales y darles espacio */
    overflow: hidden;
    padding-bottom: 70px; /* Aumentamos el espacio inferior para el copyright */
}

.radio-player::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--cover-image-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(10px);
    z-index: -1;
}

.radio-player .station-name-overlay {
    font-size: 0.8em;
    font-weight: 600;
    font-family: 'akira expanded', sans-serif;
    position: absolute;
    top: 40px;
    left: 52%; /* Centrado horizontalmente */
    transform: translateX(-50%);
    z-index: 110; /* Asegura que está por encima del fondo */
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
}

/* ==========================================================================
   Sección de Portada
   ========================================================================== */
.radio-player .player-cover-section {
    width: 100%;
    max-width: 200px; /* Ajusta el tamaño máximo según necesites */
    aspect-ratio: 1 / 1; /* Mantiene la relación de aspecto 1:1 (cuadrado) */
    margin: 15px auto; /* Centra la sección y añade márgenes arriba y abajo */
    overflow: hidden;
    /* border-radius: 50%; Elimina el borde redondeado para que sea cuadrado */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    position: relative; /* Necesario para posicionar el indicador de carga */
    display: flex;
    justify-content: center; /* Centra horizontalmente el contenido dentro */
    align-items: center; /* Centra verticalmente el contenido dentro */
}

.radio-player .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; /* Establecer como contenedor relativo */
    justify-content: center;
    align-items: center;
}


.radio-player .cover-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre todo el espacio manteniendo la proporción */
    transition: opacity 0.3s ease-in-out, transform 0.05s ease-out;
}


.radio-player .visualizer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    /* border-radius: 0%; Asegura que el visualizador también sea cuadrado */
}


.radio-player .player-cover.loading .loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    /* border-radius: 0%; Asegura que el indicador también sea cuadrado */
    font-size: 0.9em;
}

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

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


/* ==========================================================================
   Detalles del Reproductor
   ========================================================================== */
.radio-player .player-details {
    padding: 10px 0;
    text-align: center; /* Asegura que el texto dentro esté centrado */
    width: 90%; /* O el ancho que prefieras */
    margin: 0 auto; /* Centra el bloque de detalles si es necesario */
}

.radio-player .song-title {
    font-size: 0.9em;
    text-transform: none; /* Elimina mayúsculas forzadas */
    font-variant: normal; /* Evita small-caps */
    margin: 0 0 4px;
    font-weight: 600;
    color: #f5f5f5;
}

.radio-player .song-artist {
    font-size: 0.7em;
    margin: 0;
    color: #9e9e9e;
    font-style: normal;
}

.radio-player .additional-info {
    font-size: 0.7em;
    margin-top: 4px;
    color: #757575;
}

/* ==========================================================================
   Controles del Reproductor
   ========================================================================== */
.radio-player .player-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.radio-player .controls-container {
    background-color: rgba(0, 0, 0, 0.4); /* Negro con 40% de opacidad */
    border-radius: 6px;
    padding: 15px 20px; /* Aumenté el padding para dar espacio a los círculos */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Aumenté el gap entre elementos */
    width: auto;
}

/* Botones de control mejorados */
.radio-player .control-button {
    background-color: transparent;
    color: #e0e0e0;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 0.8em;
    transition: all 0.3s ease;
}

.radio-player .control-button:hover {
    color: #ff0000;
    transform: scale(1.25);
}

/* ==========================================================================
   Nuevos estilos para el botón de play/pause con círculo
   ========================================================================== */
.radio-player .play-pause-button {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #0d47a1; /* Azul oscuro */
    transition: background-color 0.3s ease;
    color: white;
    border: 2px solid white; /* 🔹 Borde blanco cuando está inactivo */
    cursor: pointer;
    box-shadow: 0 0 0 rgba(33, 150, 243, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    margin: 0;
}

/* 🔹 Círculo alrededor del botón */
.play-pause-button::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--circle-padding));
    left: calc(-1 * var(--circle-padding));
    right: calc(-1 * var(--circle-padding));
    bottom: calc(-1 * var(--circle-padding));
    border: 2px solid white; /* 🔹 Blanco cuando está inactivo */
    border-radius: 50%;
    z-index: -1;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

/* 🔹 Cambia el borde y mantiene la animación cuando se está reproduciendo */
.play-pause-button.playing::before {
    border-color: #21d608 !important; /* Verde más oscuro */
    animation: circlePulse 1.5s infinite;
}

@keyframes circlePulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3); /* 🔹 Expansión más visible */
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 90, 180, 0.7); /* Azul más oscuro */
    }
    70% {
        box-shadow: 0 0 0 15px rgba(0, 90, 180, 0); /* Azul más oscuro */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 90, 180, 0); /* Azul más oscuro */
    }
}

/* Agrega esto al final de tu archivo CSS */
.radio-player .play-pause-button {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #2196F3;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(33, 150, 243, 0.4);
    transition: box-shadow 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.radio-player .play-pause-button.playing {
    background-color: #21d608; /* Verde fluorecente */
    animation: pulse 1.2s infinite;
}

/* Ajustamos el efecto de pulso para que use el verde*/
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(57, 255, 20, 1); /* 🔹 Verde fluorescente intenso */
    }
    50% {
        box-shadow: 0 0 25px 12px rgba(57, 255, 20, 0.8); /* 🔹 Más brillo y expansión */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(57, 255, 20, 0); /* 🔹 Desvanecimiento */
    }
}

/* ==========================================================================
   Control de Volumen
   ========================================================================== */
.volume-control-compact {
    position: relative;
    display: inline-block;
    margin-left: 10px;
}

.volume-btn-wrapper {
    width: 50px; /* Tamaño total incluyendo borde */
    height: 50px;
    border-radius: 50%;
    background: #333; /* Fondo gris oscuro en lugar de blanco */
    display: flex;
    justify-content: center;
    align-items: center;
}

.volume-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3); /* Fondo más oscuro y transparente */
    border: 2px solid white; /* Borde blanco cuando está inactivo */
    color: var(--text-light);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    z-index: 5;
    margin: 0;
}

/* Círculo alrededor del botón de volumen */
.volume-btn::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--circle-padding));
    left: calc(-1 * var(--circle-padding));
    right: calc(-1 * var(--circle-padding));
    bottom: calc(-1 * var(--circle-padding));
    border: var(--circle-border-size) solid var(--circle-border-color);
    border-radius: 50%;
    z-index: -1;
    transition: all 0.3s ease;
}

.volume-btn:hover::before {
    border-color: var(--primary-color);
}

@media (max-width: 600px) {
    .volume-btn {
        width: 35px;
        height: 35px;
    }
}

.volume-slider-wrapper {
    position: absolute; /* Posicionamiento absoluto */
    bottom: 100%; /* En la parte superior del botón de volumen */
    left: 50%; /* A 50% del borde izquierdo */
    transform: translateX(-50%); /* Centrar horizontalmente */
    background: rgba(40, 40, 40, 0.95); /* Fondo oscuro y semitransparente */
    padding: 15px 10px; /* Padding */
    border-radius: 30px; /* Borde redondeado */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4); /* Sombra */
    opacity: 0; /* Inicialmente oculto */
    visibility: hidden; /* Inicialmente no visible */
    transition: var(--transition); /* Transición suave */
    z-index: 10; /* Por encima de otros elementos */
    display: flex; /* Usar flexbox */
    align-items: center; /* Alinear elementos verticalmente */
    margin-bottom: 15px; /* Margen inferior */
     @media (max-width: 600px) {
         padding: 10px 8px; /* Padding en pantallas pequeñas */
         margin-bottom: 10px; /* Margen inferior en pantallas pequeñas */
      }
}

.volume-slider-wrapper.visible {
    opacity: 1; /* Visible */
    visibility: visible; /* Visible */
}

.volume-slider-compact {
    -webkit-appearance: none; /* Eliminar estilos por defecto en WebKit */
    width: 6rem; /* Ancho (aprox. 100px) */
    height: 4px; /* Alto */
    background: #555; /* Color de fondo de la barra */
    border-radius: 3px; /* Radio del borde */
    outline: none; /* Sin contorno al enfocar */
    margin: 0 10px; /* Margen a los lados */
    cursor: pointer; /* Cursor de puntero */
     @media (max-width: 600px) {
         width: 4rem; /* Ancho más pequeño */
      }
}

.volume-slider-compact::-webkit-slider-thumb {
    -webkit-appearance: none; /* Eliminar estilos por defecto en WebKit */
    width: 14px; /* Ancho del "pulgar" */
    height: 14px; /* Alto del "pulgar" */
    border-radius: 50%; /* Borde completamente redondo */
    background: var(--primary-color); /* Color del "pulgar" principal */
    cursor: pointer; /* Cursor de puntero */
    transition: var(--transition); /* Transición suave */
}

.volume-slider-compact::-webkit-slider-thumb:hover {
    transform: scale(1.3); /* Aumentar tamaño al pasar el ratón */
    background: #0d8bf2; /* Cambiar color al pasar el ratón */
}

/* Niveles de volumen con colores invertidos */
.volume-level-0 { background: rgba(249, 227, 0, 1) !important; } /* 🔹 Amarillo fuerte (volumen bajo) */
.volume-level-1 { background: rgba(255, 205, 0, 0.9) !important; } /* 🔹 Ámbar profundo */
.volume-level-2 { background: rgba(255, 131, 0, 0.85) !important; } /* 🔹 Naranja vibrante */
.volume-level-3 { background: rgba(255, 0, 0, 0.9) !important; } /* 🔹 Rojo intenso (volumen alto) */

/* ==========================================================================
   Widget Específico
   ========================================================================== */
.widget-player-controls {
    display: flex; /* Usar flexbox */
    align-items: center; /* Alinear elementos verticalmente */
    justify-content: center; /* Centrar elementos horizontalmente */
    gap: 10px; /* Espacio entre elementos */
    margin-top: 10px; /* Margen superior */
}

.widget-control-button {
    background-color: transparent; /* Fondo transparente */
    color: #bdbdbd; /* Color del icono */
    border: none; /* Sin borde */
    border-radius: 50%; /* Borde completamente redondo */
    width: 25px; /* Ancho */
    height: 25px; /* Alto */
    display: flex; /* Usar flexbox */
    justify-content: center; /* Centrar contenido horizontalmente */
    align-items: center; /* Alinear contenido verticalmente */
    cursor: pointer; /* Cursor de puntero */
    font-size: 0.8rem; /* Tamaño del icono base */
    transition: color 0.3s ease; /* Transición suave del color */
     @media (max-width: 600px) {
        font-size: 0.7rem; /* Tamaño del icono en pantallas pequeñas */
        width: 20px; /* Ancho en pantallas pequeñas */
        height: 20px; /* Alto en pantallas pequeñas */
    }
}

.widget-control-button:hover {
    color: #fdd835; /* Cambiar color al pasar el ratón */
}

.widget-social-buttons {
    display: flex; /* Usar flexbox */
    gap: 5px; /* Espacio entre elementos */
    justify-content: center; /* Centrar elementos horizontalmente */
    margin: 10px 0 15px; /* Margen superior, sin margen lateral, margen inferior */
}

.widget-social-btn {
    color: #fff; /* Color del icono */
    font-size: 1.2rem; /* Tamaño del icono base */
    text-decoration: none; /* Sin subrayado */
    transition: var(--transition); /* Transición suave */
    width: 25px; /* Ancho */
    height: 25px; /* Alto */
    border-radius: 50%; /* Borde completamente redondo */
    background-color: rgba(255, 255, 255, 0.1); /* Fondo ligeramente transparente */
    display: flex; /* Usar flexbox */
    justify-content: center; /* Centrar contenido horizontalmente */
    align-items: center; /* Alinear contenido verticalmente */
     @media (max-width: 600px) {
        font-size: 1rem; /* Tamaño del icono en pantallas pequeñas */
        width: 20px; /* Ancho en pantallas pequeñas */
        height: 20px; /* Alto en pantallas pequeñas */
    }
}

.widget-social-btn:hover {
    color: #fdd835; /* Cambiar color al pasar el ratón */
    background-color: rgba(255, 255, 255, 0.2); /* Fondo más visible al pasar el ratón */
}
/* ==========================================================================
   Botones Sociales - Mejorados
   ========================================================================== */
.social-buttons {
    display: flex; /* Usar flexbox */
    gap: 10px; /* Espacio entre elementos */
    margin: 15px 0 20px; /* Margen superior, sin margen lateral, margen inferior */
    justify-content: center; /* Centrar elementos horizontalmente */
}

.social-btn {
    color: #fff;
    font-size: 1.4rem;
    text-decoration: none;
    transition: var(--transition);
    width: 40px; /* Aumentamos tamaño para mejor visibilidad */
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid white; /* 🔹 Se asegura el borde blanco */
    box-sizing: border-box; /* Evita que el borde aumente el tamaño total */
}

/* Ajuste en pantallas pequeñas */
@media (max-width: 600px) {
    .social-btn {
        font-size: 1.2rem;
        width: 30px; /* Ajustado para móviles */
        height: 30px;
        border: 1.5px solid white; /* Borde más fino en móviles */
    }
}

/* Efecto Hover */
.social-btn:hover {
    color: #fdd835; /* Cambiar color al pasar el ratón */
    background-color: rgba(255, 255, 255, 0.3); /* Fondo más visible al pasar el ratón */
    transform: scale(1.1); /* Agrandamiento leve */
}

/* Colores específicos para redes sociales */
.social-btn.facebook-btn { background-color: #1877F2 !important; } /* Azul Facebook */
.social-btn.instagram-btn { background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5) !important; } /* Degradado Instagram */
.social-btn.telegram-btn { background-color: #0088CC !important; } /* Azul Telegram */
.social-btn.tiktok-btn { background: linear-gradient(45deg, #FF0050, #000000, #00F2EA) !important; } /* Degradado TikTok */
.social-btn.whatsapp-btn { background-color: #25D366 !important; } /* Verde WhatsApp */
.social-btn.youtube-btn { background-color: #FF0000 !important; } /* Rojo YouTube */

/* 🔹 Resaltar el botón de X con un borde más grueso y efecto de brillo */
.social-btn.x-btn { 
    background-color: #000 !important; /* Negro X */
    border: 3px solid white !important; /* 🔹 Borde más grueso */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 🔹 Brillo sutil */
}

.social-btn.x-btn:hover {
    background-color: #222 !important; /* 🔹 Gris oscuro al pasar el ratón */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); /* 🔹 Aumenta el brillo */
}

/* ==========================================================================
   Footer del Reproductor
   ========================================================================== */
.player-footer, .widget-footer {
    position: absolute; /* Posicionamiento absoluto */
    bottom: 10px; /* A 10px del borde inferior */
    left: 0; /* A 0px del borde izquierdo */
    width: 100%; /* Ancho completo */
    text-align: center; /* Centrar texto */
    font-size: 0.8rem; /* Tamaño de fuente base */
    color: #757575; /* Color del texto */
    padding: 3px 0; /* Padding superior e inferior */
     @media (max-width: 600px) {
        font-size: 0.7rem; /* Tamaño de fuente en pantallas pequeñas */
    }
}

.player-footer .copyright, .widget-footer .copyright {
    margin: 0; /* Sin margen */
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Media query para pantallas más pequeñas */
@media (max-width: 600px) {
    .header-logo-container {
        flex-direction: column; /* Apilar logo e imagen del nombre en pantallas pequeñas */
        align-items: flex-start; /* Alinear a la izquierda en pantallas pequeñas */
    }

    .header-logo {
        width: 50px;
        margin-right: 0; /* Eliminar margen derecho en pantallas pequeñas */
        margin-bottom: 5px; /* Espacio entre logo e imagen del nombre apilados */
    }

    .station-name-image {
        max-height: 25px; /* Reducir tamaño en pantallas pequeñas */
    }
}

/* Estilos para el widget */
.radios-yaracuy-widget-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Estilo por defecto */
    gap: 10px;
}

/* Para pantallas grandes (ej: 992px o más ancho) mostrar 3 columnas en el widget */
@media (min-width: 992px) {
    .radios-yaracuy-widget-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.radios-yaracuy-widget-container[style*="--grid-columns: 1"] {
    grid-template-columns: 1fr;
}

.radios-yaracuy-widget-container[style*="--grid-columns: 2"] {
    grid-template-columns: repeat(2, 1fr);
}

.radio-player-widget {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative; /* Para posicionar el footer */
    padding-bottom: 30px; /* Espacio para el copyright en el widget */
}

.widget-dynamic-background {
    /* Puedes añadir un fondo dinámico similar al del shortcode si lo deseas */
    display: none;
}

.widget-header {
    margin-bottom: 10px;
}

.widget-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.widget-logo {
    max-width: 80px;
    height: auto;
    border-radius: 5px;
    margin-bottom: 5px;
}

.widget-station-name,
.widget-station-name-image {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.9em;
    font-weight: bold;
    color: #e0e0e0;
}

.widget-station-name-image {
    max-height: 25px;
    margin-top: 5px;
}

.widget-player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.widget-control-button {
    background-color: transparent;
    color: #bdbdbd;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 0.7em;
    transition: color 0.3s ease;
}

.widget-control-button:hover {
    color: #fdd835;
}

.widget-volume-controls {
    display: flex;
    align-items: center;
    gap: 3px;
}

.widget-volume-slider-container {
    flex-grow: 1;
    max-width: 60px;
}

.widget-volume-slider {
    width: 100%;
    height: 3px;
}

.widget-volume-icon {
    font-size: 0.6em;
}

.widget-social-buttons {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 15px; /* Espacio para el copyright */
}

.widget-social-btn {
    color: #fff;
    font-size: 1.2em;
    text-decoration: none;
    transition: color 0.3s ease;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.widget-social-btn:hover {
    color: #fdd835;
    background-color: rgba(255, 255, 255, 0.2);
}

.widget-social-btn.whatsapp-btn {
    background-color: #25D366; /* Color verde de WhatsApp */
    color: #fff;
}

.widget-social-btn.whatsapp-btn:hover {
    background-color: #128C7E;
}

.widget-social-btn.youtube-btn {
    background-color: #FF0000; /* Color rojo de YouTube */
    color: #fff;
}

.widget-social-btn.youtube-btn:hover {
    background-color: #B80000;
}

.radio-player-widget .widget-footer {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.6em;
    color: #757575;
    padding: 3px 0;
}

.radio-player-widget .widget-footer .copyright {
    margin: 0;
}

/* Estilos para el botón de la web en el header del reproductor */
.header-actions .website-btn {
    margin-left: 10px; /* Ajusta el espacio con otros elementos si es necesario */
}