/* --- css/custom.css --- */
/* Hoja de Estilos Personalizada y Unificada para Latina Live */

/* === CONFIGURACIÓN GLOBAL DE LA PÁGINA (body) === */
/* Aquí combinamos los colores de fondo y el tamaño de fuente base. */
body {
  /* --- Color y Fondo --- */
  background-color: #2b9ece; /* Fondo azul oscuro y vibrante */
  color: #000000;             /* Texto principal en negro puro para máximo contraste */
  
  /* --- Tamaño de Fuente Base --- */
  font-size: 1.15rem; /* ~18.4px, un tamaño cómodo para la lectura */
}

/* === TIPOGRAFÍA: TÍTULOS Y JERARQUÍA === */
/* Mantenemos el amarillo brillante para los títulos, ya que se leen bien */
h1, h2, h3, h4, h5, h6 {
  color: #ffd500;
}

/* Ajustamos los tamaños de fuente para que sean proporcionales al nuevo texto base */
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }


/* === ESTILOS PARA ENLACES (Links) === */
/* Abordamos la sugerencia de usar un color más legible que el amarillo brillante */
a {
  color: #f7a600; /* Amarillo anaranjado (#f7a600) para un contraste mucho mejor */
  text-decoration: underline; /* Mantenemos el subrayado por accesibilidad */
}

a:hover {
  color: #df6c02; /* Naranja oscuro al pasar el cursor para un feedback claro */
}


/* === ESTILOS PARA BOTONES === */
/* Combinamos todas las reglas de los botones en un solo lugar */
button, input[type="submit"] {
  /* --- Apariencia --- */
  background-color: #ffd500; /* Fondo amarillo brillante para que destaquen */
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;

  /* --- Texto del Botón --- */
  color: #212121; /* Texto muy oscuro para máximo contraste sobre el amarillo */
  font-weight: bold;
  font-size: 1rem; /* Tamaño de fuente estándar y legible */
}

button:hover, input[type="submit"]:hover {
  background-color: #fbba00; /* Un amarillo ligeramente más oscuro al pasar el ratón */
}


/* === ESTILOS PARA SECCIONES Y CONTENEDORES === */
/* Aseguramos que las áreas principales tengan un fondo diferenciado y agradable */
section, aside, main {
  background-color: #5bc5f2; /* Azul más claro para las áreas de contenido */
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}


/* === AJUSTES FINOS PARA COMPONENTES ESPECÍFICOS === */

/* --- Reproductor de Audio --- */
/* Texto "Escuchando: ..." */
#track-info {
  font-size: 1rem;
  font-style: italic;
  color: #000000; /* Aseguramos que sea negro y legible */
}

/* Texto "Volumen: ..." */
#volume-display {
  font-size: 0.9rem;
  color: #403e3e; /* Usamos un gris oscuro, como se sugirió, para información secundaria */
}

/* --- Pie de página --- */
.site-footer p {
  font-size: 1rem;
  color: #000000;
}