/**
 * Sección «listado» de la página «eventos».
 *
 * Mitad clonada, mitad reconstruida:
 *
 *  · Las clases `css-…` son los hashes que genera Emotion en el sitio viejo,
 *    copiadas literales para que el render sea idéntico.
 *  · Las `icasa-evento-*` NO están clonadas. La rejilla de icasa.pe/eventos
 *    sale vacía —los 11 eventos vienen con `deleted: true`—, así que Emotion
 *    nunca inyectó las clases de la tarjeta. Los valores de abajo son los `sx`
 *    de `components/Event/EventCard.jsx` traducidos: el `spacing` de MUI son
 *    8 px por unidad (`p: 2` = 16px, `borderRadius: 3` = 12px) y las sombras,
 *    las de sus niveles de elevación.
 *
 * Generado desde https://www.icasa.pe y desde el código fuente del React.
 */

.css-62igne{margin-top: 0; margin-bottom: 48px;}
.css-16le8bk{width: 100%; margin-left: auto; box-sizing: border-box; margin-right: auto; padding: 40px 16px;}
@media (min-width: 600px){
.css-16le8bk{padding-left: 24px; padding-right: 24px;}
}
@media (min-width: 1200px){
.css-16le8bk{max-width: 1200px;}
}
.css-5isqup{margin: 0px 0px 0.35em; font-family: Poppins, sans-serif; font-size: 1.5rem; line-height: 1.334; text-align: var(--Typography-textAlign); font-weight: 700;}
.css-vwbydg{box-sizing: border-box; display: flex; flex-flow: wrap; width: calc(100% + 24px); margin-left: calc(-24px); margin-top: 32px;}
.css-vwbydg > .MuiGrid-item{padding-top: 24px;}
.css-vwbydg > .MuiGrid-item{padding-left: 24px;}

/* --- tarjeta (reconstruida) --- */

/* `xs={12} sm={6} md={4}` del Grid que envuelve a cada EventCard. */
.icasa-evento-col{box-sizing: border-box; margin: 0px; flex-direction: row; flex-basis: 100%; flex-grow: 0; max-width: 100%;}
@media (min-width: 600px){
.icasa-evento-col{flex-basis: 50%; flex-grow: 0; max-width: 50%;}
}
@media (min-width: 900px){
.icasa-evento-col{flex-basis: 33.3333%; flex-grow: 0; max-width: 33.3333%;}
}

/* `<Card sx={{ borderRadius: 3, boxShadow: 3 }}>` */
.icasa-evento{background-color: rgb(255, 255, 255); color: rgba(0, 0, 0, 0.87); transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--Paper-shadow); overflow: hidden; border-radius: 12px; height: 100%; display: flex; flex-direction: column;}

/* `<Box sx={{ position: 'relative' }}>` con el CardMedia dentro. */
.icasa-evento-foto{position: relative;}
.icasa-evento-img{display: block; width: 100%; height: 160px; object-fit: cover;}
.icasa-evento-img--vacia{background-color: rgb(240, 240, 245);}

/* El badge de la esquina: `backgroundColor: 'teal'`, `borderBottomRightRadius: '8px'`. */
.icasa-evento-badge{position: absolute; top: 0; left: 0; background-color: teal; color: white; padding: 4px 8px; border-bottom-right-radius: 8px; font-family: Poppins, sans-serif; font-size: 0.75rem; font-weight: 700; line-height: 1.66;}

/* `<CardContent>`: 16px, y 24px abajo cuando es el último hijo. */
.icasa-evento-cuerpo{padding: 16px 16px 24px; flex-grow: 1; display: flex; flex-direction: column;}

/* `variant="subtitle1" fontWeight="bold" gutterBottom` */
.icasa-evento-titulo{margin: 0px 0px 0.35em; font-family: Poppins, sans-serif; font-size: 1rem; line-height: 1.75; font-weight: 700;}

/* `<Box display="flex" alignItems="center" mb={2}>` con el icono y la fecha. */
.icasa-evento-fecha{display: flex; align-items: center; margin: 0 0 16px; font-family: Poppins, sans-serif; font-size: 0.875rem; line-height: 1.43; color: rgba(0, 0, 0, 0.6);}
.icasa-evento-icono{width: 20px; height: 20px; margin-right: 8px; flex-shrink: 0; fill: currentColor;}

/*
 * `fullWidth variant="contained" color="primary"` con `borderRadius: '30px'` y
 * `textTransform: 'none'`. El `margin-top: auto` no está en el original: aquí
 * la tarjeta es flex y de altura completa, así que empuja el botón abajo y las
 * tres de una fila quedan alineadas aunque los títulos ocupen distinto.
 */
.icasa-evento-boton{display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; margin-top: auto; padding: 6px 16px; border: 0; border-radius: 30px; background-color: rgb(25, 118, 210); color: rgb(255, 255, 255); font-family: Poppins, sans-serif; font-size: 0.875rem; font-weight: 500; line-height: 1.75; text-decoration: none; text-transform: none; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);}
.icasa-evento-boton:hover{background-color: rgb(21, 101, 192); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;}

/* Aviso de listado vacío. Producción no lo tiene: allí no se distingue un catálogo vacío de uno roto. */
.icasa-eventos-vacio{margin: 32px 0 0; font-family: Poppins, sans-serif; font-size: 0.875rem; line-height: 1.43; color: rgba(0, 0, 0, 0.6); text-align: center;}