html, body {
margin: 0;
padding: 0;
height: 100%;
}

body {
display: flex;
flex-direction: column;
background-color: #1f2937; /* Gris oscuro */
color: white;
overflow-x: hidden;
}

#mainContent {
flex: 1;
overflow: hidden;
}

#iframeContainer {
width: 100%;
height: 100%;
border: none;
}

#radioPlayer {
position: sticky;
bottom: 0;
background-color: #111827;
z-index: 40;
padding: 10px;
}

/* Preloader Styles */
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro */
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 1;
transition: opacity 1s ease-in-out;
}

/* Animación del logo */
.preloader-logo {
width: 150px; /* Tamaño del logo */
height: 150px;
background: linear-gradient(90deg, #34d399, #7dd3fc, #f59e0b); /* Gradiente de colores */
background-size: 300% 100%;
background-clip: text;
color: transparent;
animation: paintLogo 3s forwards;
}

/* Animación de pintura del logo */
@keyframes paintLogo {
0% {
    background-position: 300% 0;
}
100% {
    background-position: -300% 0;
}
}

/* Mensaje de texto */
.preloader-text {
font-size: 2rem;
font-weight: bold;
color: #34d399;
margin-left: 20px;
animation: fadeInText 1.5s ease-out;
}

@keyframes fadeInText {
0% { opacity: 0; }
100% { opacity: 1; }
}