:root {
    --color-fondo-oscuro: #1a1a2e; /* Azul oscuro/morado */
    --color-acento: #e94560; /* Rojo vibrante */
    --color-texto-claro: #e0e0e0; /* Gris claro */
    --color-tarjeta-fondo: #2a2a4a; /* Tono oscuro para tarjetas */
    --color-publicidad-fondo: #3a3a5a; /* Tono para fondos de publicidad */
    --color-publicidad-borde: #5a5a7a; /* Tono para bordes de publicidad */
}

body {
    font-family: sans-serif; /* Fuente moderna */
    background-color: var(--color-fondo-oscuro); /* Fondo principal oscuro */
    color: var(--color-texto-claro); /* Color de texto predeterminado */
    line-height: 1.6;
}

/* Estilos del Navbar */
.navbar {
    background-color: var(--color-tarjeta-fondo); /* Fondo del navbar */
    border-bottom: 2px solid var(--color-acento); /* Borde inferior de acento */
}

.navbar .navbar-brand {
    color: var(--color-texto-claro); /* Color de la marca */
    font-weight: bold;
    display: flex; /* Usar flexbox para alinear logo y texto */
    align-items: center; /* Centrar verticalmente */
}

/* Estilo para el logo en el navbar */
.navbar-brand .navbar-logo {
    height: 40px; /* Ajusta la altura del logo según necesites */
    margin-right: 10px; /* Espacio entre el logo y el texto */
}


.navbar .nav-link {
    color: var(--color-texto-claro); /* Color de los enlaces */
    transition: color 0.3s ease-in-out;
}

.navbar .nav-link:hover {
    color: var(--color-acento); /* Color al pasar el ratón */
}

.navbar .nav-link.active {
    color: var(--color-acento); /* Color del enlace activo */
    font-weight: bold;
}

/* Estilo para el icono del toggler en modo hamburguesa */
/* Opcionalmente, añade un borde al botón para hacerlo más visible */
.navbar-toggler {
    border: 2px solid #ff0000;
  }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }


/* Estilos de la sección principal (hero section) */
.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/1500x800') no-repeat center center/cover; /* Imagen de fondo con overlay oscuro */
    color: white;
    padding: 25px 0;
    text-align: center;
}

.hero-section h1 {
    color: #fff;
    font-size: 3.5rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-section p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/* Estilos para tarjetas o secciones de contenido */
.card {
    background-color: var(--color-tarjeta-fondo); /* Fondo de tarjeta oscuro */
    color: var(--color-texto-claro); /* Texto de tarjeta claro */
    border: none; /* Sin borde */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

.card-title {
    color: var(--color-acento); /* Título de tarjeta con color de acento */
}

/* Estilos del reproductor personalizado */
.player-container {
    background-color: var(--color-tarjeta-fondo);
    padding: 20px;
    border-radius: 10px;
    margin-top: 30px;
    text-align: center;
}

/* Estilo para el reproductor de audio HTML5 (oculto por defecto) */
.player-container audio {
    display: none; /* Ocultamos los controles nativos */
}

.custom-player {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre controles */
    margin-top: 15px;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    justify-content: center; /* Centra los controles */
}

.player-button {
    background-color: var(--color-acento);
    color: white;
    border: none;
    border-radius: 50%; /* Botones redondos */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.player-button:hover {
    background-color: #c43b52; /* Tono más oscuro al pasar el ratón */
}

.progress-bar-container {
    flex-grow: 1; /* La barra de progreso ocupa el espacio disponible */
    height: 8px;
    background-color: #4a4a6e; /* Fondo de la barra de progreso */
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden; /* Asegura que la barra de progreso no se salga */
    max-width: 300px; /* Ancho máximo para la barra en pantallas grandes */
}

.progress-bar {
    height: 100%;
    width: 0%; /* Se actualizará con JavaScript */
    background-color: var(--color-acento); /* Color de la barra de progreso */
    border-radius: 4px;
    transition: width 0.1s linear; /* Transición suave para el progreso */
}

.time-display {
    font-size: 0.9rem;
    color: var(--color-texto-claro);
}

.volume-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.volume-slider {
    width: 80px; /* Ancho del slider de volumen */
    cursor: pointer;
}

/* Estilos para secciones de publicidad */
.ad-section {
    background-color: var(--color-publicidad-fondo); /* Fondo para la sección de publicidad */
    border: 1px dashed var(--color-publicidad-borde); /* Borde punteado para destacar */
    padding: 20px;
    margin-bottom: 30px; /* Espacio debajo de la sección de publicidad */
    border-radius: 8px;
    text-align: center;
}

.ad-section h4 {
    color: var(--color-acento); /* Título de la sección de publicidad */
    margin-bottom: 15px;
}

.ad-slot {
    background-color: rgba(255, 255, 255, 0.05); /* Fondo ligero para cada espacio de anuncio */
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px; /* Espacio entre anuncios */
    /* Si usas imágenes, puedes necesitar estilos adicionales para img */
}

.ad-slot:last-child {
    margin-bottom: 0; /* No hay margen en el último anuncio */
}

.ad-slot img {
    max-width: 100%; /* Asegura que la imagen no se desborde */
    height: auto;
    display: block; /* Elimina espacio extra debajo de la imagen */
    margin: 0 auto; /* Centra la imagen */
}


/* Estilos del Footer */
.footer {
    background-color: var(--color-tarjeta-fondo); /* Fondo del footer */
    color: var(--color-texto-claro); /* Texto del footer */
    padding: 30px 0;
    margin-top: 40px;
    border-top: 2px solid var(--color-acento); /* Borde superior de acento */
}

.footer a {
    color: var(--color-texto-claro); /* Enlaces del footer */
    text-decoration: none;
}

.footer a:hover {
    color: var(--color-acento); /* Enlaces del footer al pasar el ratón */
}

/* PROGRAMACION EMISORA */
.programa-actual {
    /* background-color: #ffffcc; Un amarillo pálido */
    color: #ffcc00;
}

/* NOTICIAS */
.noticias {
background-color: #3E3E6C;
}

/* WHATSAPP */
.whatsapp-float {
    position: fixed; /* Posicionamiento fijo relativo al viewport */
    width: 33px;     /* Ancho del botón */
    height: 33px;    /* Alto del botón */
    bottom: 60px;    /* Distancia desde abajo */
    right: 10px;     /* Distancia desde la derecha */
    background-color: #25d366; /* Color de fondo de WhatsApp */
    color: #FFF;     /* Color del ícono (si usas un ícono de fuente) o no se usa si es imagen */
    border-radius: 50px; /* Para hacerlo circular */
    text-align: center;
    font-size: 30px; /* Tamaño del ícono (si usas un ícono de fuente) */
    box-shadow: 2px 2px 6px rgba(0,0,0,0.3); /* Sombra sutil */
    z-index: 1000;   /* Asegura que esté por encima de otros elementos */
    display: flex;   /* Para centrar la imagen fácilmente */
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease-in-out; /* Transición suave para hover */
}

.whatsapp-float:hover {
    transform: scale(1.1); /* Efecto de zoom al pasar el mouse */
    background-color: #128C7E; /* Color un poco más oscuro al hacer hover */
}

.whatsapp-float img {
    width: 35px; /* Ajusta el tamaño de tu logo SVG/PNG dentro del círculo */
    height: 35px;
}

/* PUBLICIDAD */

.fondo-azul {
    background-color: #2a2a4a;
    color: #ffcc00;
}