/* assets/css/style.css */
/* Paleta de colores basada en el logo */
:root {
    --brand-color: #008C99; /* Azul verdoso principal del logo */
    --brand-color-hover: #006F7A;
}

/* --- ESTILOS GENERALES Y LAYOUT --- */
main {
    flex-grow: 1; /* Asegura que el contenido principal ocupe el espacio disponible */
}

/* --- MARQUESINA DE EVENTOS DESTACADOS --- */
.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    background-color: #f8f9fa;
    /* AJUSTE: Reducimos el padding para achicar la marquesina */
    padding: 0.5rem 0; 
    border-bottom: 1px solid #dee2e6;
}

/* CORRECCIÓN DEFINITIVA */
.marquee-inner {
    display: flex; /* Fuerza a los elementos a estar en una línea horizontal */
    flex-wrap: nowrap; /* Evita que los elementos salten a la siguiente línea */
    width: fit-content; /* Se ajusta al ancho total de todos los eventos */
    /* Un número más alto hace la animación más lenta. */
    animation: scroll 40s linear infinite;
}

/* Animación de desplazamiento de derecha a izquierda */
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%); /* Se desplaza la mitad (la copia original) */
    }
}


/* --- ESTILOS DE COMPONENTES --- */
/* Botón de "Me Gusta" */
.like-btn {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
    color: #cbd5e1; /* Color gris claro para el corazón inactivo */
}

.like-btn:hover {
    transform: scale(1.2);
}

.like-btn.liked {
    color: var(--brand-color); /* Usa el color de la marca cuando está activo */
    animation: heart-beat 0.5s ease;
}

@keyframes heart-beat {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Estilos para el overlay de búsqueda */
#search-overlay {
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}