/*
 * Responsive Stylesheet for RifasOnline.com.mx
 * Inspired by RifaFacil.com and optimized for all screen sizes.
 */

/* --- General Body and Typography --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background: #f8f9fa;
    color: #212529;
}

.container {
    width: 90%;
    max-width: 800px;
    margin: auto;
    overflow: hidden;
}

/* --- Header --- */
header {
    background: #161616;
    color: #fff;
    padding: 20px 0;
    border-bottom: #0d6efd 4px solid;
}

header a {
    color: #fff;
    text-decoration: none;
}

header #branding {
    float: left;
}

header #branding h1 {
    margin: 0;
    font-size: 28px;
}

header #branding p {
    margin: 5px 0 0 0;
    font-size: 14px;
    color: #ced4da;
}

header #branding p a {
    color: #0d6efd;
    font-weight: bold;
}

header nav {
    float: right;
    margin-top: 15px;
}

/* --- Buttons --- */
.button {
    background: #0d6efd;
    color: #fff;
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.button:hover {
    background: #0b5ed7;
}

/* --- Main Content & Song List --- */
#main {
    padding: 30px 0;
}

/* Makes the whole entry a single clickable block */
.song-entry-link {
    text-decoration: none;
    color: inherit;
    display: block;
    margin-bottom: 20px;
}

.song-entry {
    padding: 0;
    overflow: hidden;
    margin-bottom: 0;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: box-shadow 0.3s ease;
}

.song-entry:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}

.song-entry-image {
    width: 100%; /* Image will always be 100% of its container */
    height: 350px;
    object-fit: cover;
    display: block;
}

.song-entry h2 {
    padding: 25px;
    margin: 0;
    font-size: 22px;
}

/* --- Individual Song Page --- */
.song-full-image {
    width: 100%; /* Image is now responsive */
    max-height: 800px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 30px;
}

.song-full h2 {
    color: #161616;
    font-size: 36px;
    margin-bottom: 25px;
}

audio {
    width: 100%;
    margin-top: 20px;
}

.lyrics {
    background: #fff;
    padding: 30px;
    margin-top: 30px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    font-size: 18px;
    line-height: 1.7;
    font-family: 'Georgia', serif;
}

/* CRITICAL FIX FOR LYRICS: This makes the <pre> tag wrap text */
.lyrics pre {
    white-space: pre-wrap;   /* Allows preformatted text to wrap */
    word-wrap: break-word;   /* Breaks long, unbroken words if they would overflow */
}


/* --- Footer --- */
footer {
    padding: 30px;
    margin-top: 30px;
    color: #fff;
    background-color: #161616;
    text-align: center;
}

/*
=================================================================
    MOBILE RESPONSIVE STYLES (For screens 768px wide or less)
=================================================================
*/
@media (max-width: 768px) {
    .container {
        width: 95%; /* Use more of the screen on mobile */
    }

    /* --- Header --- */
    header #branding,
    header nav {
        float: none; /* Disable floats */
        text-align: center; /* Center the content */
        width: 100%;
    }

    header #branding h1 {
        font-size: 24px; /* Slightly smaller title */
    }

    header nav {
        margin-top: 20px; /* Add space between logo and button */
    }

    /* --- Images --- */
    .song-entry-image {
        height: 180px; /* Adjust image height for mobile aspect ratios */
    }

    .song-full-image {
        max-height: 250px; /* Adjust main image height for mobile */
    }

    /* --- Typography and Content --- */
    .song-full h2 {
        font-size: 28px; /* Smaller song title on its page */
    }

    .lyrics {
        padding: 20px; /* Reduce padding on smaller screens */
        font-size: 16px; /* Slightly smaller font for better readability */
    }
}

/*
=================================================================
    ESTILOS PARA EL BOTÓN DE WHATSAPP.
=================================================================
*/

.whatsapp-share-button {
    display: inline-block;
    background-color: #25D366; /* Color oficial de WhatsApp */
    color: #fff;
    padding: 12px 22px;
    margin: 25px 0 10px 0; /* Espacio arriba y abajo del botón */
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.whatsapp-share-button:hover {
    background-color: #1DA851; /* Un verde más oscuro al pasar el ratón */
    color: #fff;
    transform: scale(1.05); /* Efecto de crecimiento sutil */
}

/* Estilos para el ��cono de WhatsApp dentro del bot��n */
.whatsapp-share-button .fab {
    margin-right: 10px; /* Espacio entre el ícono y el texto */
    font-size: 22px; /* Hacer el ��cono un poco mmás grande  */
    vertical-align: middle; /* Alinea el ��cono con el texto */
}

/* En pantallas peque�0�9as, hacer que el bot��n ocupe todo el ancho */
@media (max-width: 768px) {
    .whatsapp-share-button {
        display: block; /* Ocupa todo el ancho disponible */
        width: 100%;
        box-sizing: border-box; /* Asegura que el padding no desborde el contenedor */
    }
}