/* =========================
   ESTILO GENERAL DE LA PAGINA
========================= */

body{
margin:0; /* elimina márgenes del navegador */
font-family:Arial, Helvetica, sans-serif; /* fuente principal */
color:white; /* color del texto */
overflow:hidden; /* evita scroll */
}


/* =========================
   FONDO DINAMICO
========================= */

.background{

position:fixed; /* fija el fondo en pantalla */
width:100%; /* ocupa todo el ancho */
height:100%; /* ocupa todo el alto */

background-size:cover; /* imagen cubre toda la pantalla */
background-position:center; /* centra la imagen */

transition:all 3s ease-in-out; /* transición suave entre fondos */

}


/* =========================
   CONTENEDOR DEL REPRODUCTOR
========================= */

.player{

position:absolute; /* posicion libre dentro de la pantalla */

top:50%; /* baja al centro vertical */
left:50%; /* mueve al centro horizontal */

transform:translate(-50%,-50%); /* centra exactamente el reproductor */

background:rgba(0,0,0,0.65); /* fondo oscuro transparente */

padding:40px; /* espacio interno */

border-radius:20px; /* bordes redondeados */

text-align:center; /* centra texto y elementos */

width:360px; /* ancho del reproductor */

backdrop-filter:blur(8px); /* efecto vidrio moderno */

}


/* =========================
   LOGO DE LA RADIO
========================= */

.logo{

width:160px; /* ancho del logo */
height:80px; /* alto del logo */

border-radius:50%; /* lo hace circular */

object-fit:cover; /* evita deformación de imagen */

margin-bottom:15px; /* espacio debajo del logo */

border:3px solid red; /* borde rojo */

}


/* animación del logo cuando suena la radio */

.logo.playing{

animation:pulse 2s infinite; /* animación infinita */

}

/* efecto de pulso */

@keyframes pulse{

0%{transform:scale(1)} /* tamaño normal */
50%{transform:scale(1.05)} /* crece un poco */
100%{transform:scale(1)} /* vuelve al tamaño original */

}


/* =========================
   TEXTO DE ESTADO EN VIVO
========================= */

.live{

color:red; /* color rojo */
font-weight:bold; /* texto en negrita */
margin-bottom:10px; /* espacio inferior */

}


/* =========================
   TITULO Y SUBTITULO
========================= */

.title{

font-size:24px; /* tamaño grande */
font-weight:bold; /* negrita */

}

.subtitle{

font-size:14px; /* tamaño pequeño */
color:#ddd; /* gris claro */
margin-bottom:20px; /* espacio inferior */

}


/* =========================
   BOTON PLAY / PAUSA
========================= */

.playButton{

background:red; /* fondo rojo */

border:none; /* elimina borde */

width:80px; /* ancho del botón */
height:80px; /* alto del botón */

border-radius:50%; /* botón circular */

cursor:pointer; /* cambia cursor al pasar mouse */

display:flex; /* activa flexbox */

align-items:center; /* centra verticalmente el icono */

justify-content:center; /* centra horizontalmente el icono */

margin:auto; /* centra el botón */

margin-top:15px; /* espacio superior */

transition:0.3s; /* animación suave */

}


/* efecto al pasar el mouse */

.playButton:hover{

transform:scale(1.1); /* aumenta tamaño */

background:#ff3b3b; /* rojo más claro */

}


/* evita que el svg interfiera con el click */

.playButton svg{

pointer-events:none;

}


/* =========================
   CONTROL DE VOLUMEN
========================= */

.volume{

width:100%; /* ocupa todo el ancho */

margin-top:20px; /* espacio superior */

}


/* =========================
   CONTADOR DE TIEMPO
========================= */

.timer{

margin-top:15px; /* separación */

font-size:14px; /* tamaño del texto */

}