/* =========================================
   INDEX.CSS
   Estilos de la Cartelera Principal
   ========================================= */

/* --- Estructura Principal --- */

.billboard { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: var(--space-xl); 
    width: 100%; 
    max-width: 1200px; 
    padding: var(--space-lg); 
}

.hero { 
    width: 100%; 
    padding: 40px 20px; 
    margin-bottom: var(--space-lg); 
    background: linear-gradient(to bottom, var(--color-slate), var(--gray-800)); 
    border-radius: var(--radius-md); 
    text-align: center; 
}

/* --- Tarjeta de Evento (Card) --- */

.card { 
    display: flex; 
    flex-direction: column;
    background: var(--gray-600); 
    border-radius: var(--radius-md); 
    overflow: hidden; 
    box-shadow: var(--shadow-sm); 
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover { 
    transform: translateY(-5px); 
    box-shadow: var(--shadow-lg); 
}

.card__img { 
    width: 100%; 
    height: 200px; 
    object-fit: cover; 
    background: var(--gray-700); 
}

.card__body { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    padding: var(--space-lg); 
}

.card__title { 
    margin-bottom: var(--space-sm); 
    font-size: var(--text-lg); 
    font-weight: bold; 
    color: var(--color-cyan); 
}

.card__info { 
    flex: 1; 
    margin-bottom: var(--space-md); 
    font-size: 0.9rem; 
    color: var(--gray-200); 
}

.card__price {
    margin-top: var(--space-xs); 
    color: var(--color-green); 
    font-weight: bold;
}

/* --- Estados y Mensajes --- */

.loading-msg { 
    text-align: center; 
    width: 100%; 
    color: var(--gray-300); 
    margin-top: var(--space-lg); 
}

.empty-msg { 
    text-align: center; 
    width: 100%; 
    color: var(--gray-200); 
    margin-top: var(--space-lg); 
}

.error-msg { 
    text-align: center; 
    width: 100%; 
    color: var(--color-red); 
    margin-top: var(--space-lg); 
}