/* --- Importación de la fuente de Google --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* --- Estilos generales del cuerpo de la página --- */
body {
    background-color: #121212; /* Fondo oscuro principal de Spotify */
    color: #ffffff; /* Texto blanco */
    font-family: 'Montserrat', sans-serif; /* Fuente similar a la de Spotify */
    margin: 0;
    padding: 24px;
}

/* --- Título principal --- */
h1 {
    text-align: center;
    font-size: 2.5rem; /* Tamaño grande para el título */
    margin-bottom: 40px;
}
a {
    text-align: center;
    color: #ffffff;
    
}
/* --- Cuadrícula para las canciones --- */
.music-grid {
    display: grid;
    /* Crea columnas flexibles que se adaptan al espacio disponible */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px; /* Espacio entre las tarjetas */
    max-width: 1200px; /* Ancho máximo para la cuadrícula */
    margin: 0 auto; /* Centra la cuadrícula en la página */
}

/* --- Tarjeta individual de cada canción --- */
.song-card {
    background-color: #181818; /* Fondo de la tarjeta, un poco más claro */
    border-radius: 8px; /* Bordes redondeados */
    padding: 16px;
    transition: background-color 0.3s ease; /* Transición suave para el hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra sutil */
}

/* --- Efecto al pasar el ratón por encima de la tarjeta --- */
.song-card:hover {
    background-color: #282828; /* Se aclara al pasar el ratón */
    cursor: pointer;
}

/* --- Imagen de la portada --- */
.song-card img {
    width: 100%;
    border-radius: 4px; /* Bordes ligeramente redondeados para la imagen */
    margin-bottom: 16px;
}

/* --- Título de la canción (H2) --- */
.song-card h2 {
    font-size: 1rem;
    font-weight: 700; /* Texto en negrita */
    margin: 0 0 8px 0;
    /* Evita que el texto se parta en varias líneas */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Añade "..." si el texto es muy largo */
}

/* --- Nombre del artista (P) --- */
.song-card p {
    font-size: 0.875rem;
    color: #b3b3b3; /* Color gris claro para el texto secundario */
    margin: 0;
}

/* --- Reproductor de audio --- */
audio {
    width: 100%;
    margin-top: 16px;
    /* Truco para invertir los colores del reproductor y que se vea oscuro */
    filter: invert(1) sepia(1) saturate(0) hue-rotate(0deg) brightness(0.8);
}