/**
 * Sección «detalle» de la página «evento».
 *
 * Reconstruida desde los `sx` de `components/Event/EventDetailModal.jsx`, no
 * clonada: el modal solo existe montado en React. Los tamaños son los de las
 * variantes de tipografía de MUI que usa el componente (`h6`, `subtitle2`,
 * `body2`) y los márgenes, su `spacing` de 8 px por unidad.
 */

/* `variant="h6" fontWeight="bold"` */
.icasa-evento-h1{margin: 0px; font-family: Poppins, sans-serif; font-size: 1.25rem; line-height: 1.6; font-weight: 700;}

/* `variant="subtitle2" fontWeight="bold"` — la fecha, la ciudad y el «Organiza». */
.icasa-evento-dato{margin: 8px 0px 0px; font-family: Poppins, sans-serif; font-size: 0.875rem; line-height: 1.57; font-weight: 700;}

/* `variant="body2" color="text.secondary" mt={2}` */
.icasa-evento-texto{margin-top: 16px; font-family: Poppins, sans-serif; font-size: 0.875rem; line-height: 1.43; color: rgba(0, 0, 0, 0.6);}
.icasa-evento-texto p{margin: 0 0 12px;}
.icasa-evento-texto p:last-child{margin-bottom: 0;}
.icasa-evento-texto img{max-width: 100%; height: auto; display: block; margin: 1rem 0px;}

/* `<Divider sx={{ my: 2 }} />` */
.icasa-evento-linea{border: 0; border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 16px 0;}

/* `variant="body2"` sin color: la dirección. */
.icasa-evento-direccion{margin: 0px; font-family: Poppins, sans-serif; font-size: 0.875rem; line-height: 1.43;}

/*
 * El mapa. En producción es un `<img>` con un PNG genérico y el botón encima;
 * aquí es el mapa de verdad y el botón va debajo, que es donde no tapa nada.
 */
.icasa-evento-mapa{position: relative; width: 100%; margin: 8px 0 0; border-radius: 4px; overflow: hidden; line-height: 0;}
.icasa-evento-mapa iframe{display: block; width: 100%; height: 260px; border: 0;}

/* `variant="contained" size="small"` con `borderRadius: 8` (=64px, una píldora). */
.icasa-evento-mapa-boton{display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; padding: 4px 10px; border: 0; border-radius: 64px; background-color: rgb(25, 118, 210); color: rgb(255, 255, 255); font-family: Poppins, sans-serif; font-size: 0.8125rem; font-weight: 700; line-height: 1.75; text-decoration: none; text-transform: uppercase; 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;}
.icasa-evento-mapa-boton:hover{background-color: rgb(21, 101, 192);}

/* `<Box mt={3}>` */
.icasa-evento-organiza{margin-top: 24px;}

/* `variant="body2" color="primary" fontWeight="medium"` */
.icasa-evento-organizador{margin: 0px; font-family: Poppins, sans-serif; font-size: 0.875rem; line-height: 1.43; font-weight: 500; color: rgb(25, 118, 210);}