/* ==========================================================================
   POP-UP DE "MAS INFORMACION" DE LOS ITEMS DEL LISTADO

   Lo emite xsl/themes/default/_common/experiences/more-info-dialog.xsl, solo
   cuando algun item del listado tiene relleno el campo 'otra informacion'. Por
   eso NO se registra en etc/theme-config.php.

   El <dialog> es nativo: cerrado es display:none por UA, y abierto se
   promociona al top layer, asi que ni el overflow ni el position:sticky de
   #experiencesSec lo recortan y no hace falta z-index.
   ========================================================================== */

/* El UA da al <dialog> un ancho/alto de contenido y margen auto; aqui se
   convierte en una caja centrada con tope de alto para que un texto largo
   scrollee DENTRO en vez de desbordar la ventana. */
.moreInfoDialog {
	width: min(45rem, calc(100vw - 2.5rem));
	max-width: none;
	max-height: min(80vh, 45rem);
	padding: 0;
	border: none;
	border-radius: 0.25rem;
	background-color: #ffffff;
	color: #1A1A1A;
	overflow: hidden;
	/* El widget NeoLoyalty (neoloyaltywidget.neobookings.com) inyecta en runtime
	   un <style> con el Preflight de Tailwind v4 ("*,:after,:before,::backdrop{
	   margin:0}"). Al ser CSS de origen AUTOR, ese "*" pisa el margin:auto que
	   la hoja de estilos del user-agent aplica por defecto a dialog:modal, y el
	   dialogo pierde su centrado nativo (queda arriba a la izquierda). Se repone
	   aqui explicitamente: el selector de clase (0,1,0) ya gana por especificidad
	   al universal "*" (0,0,0), asi que no hace falta !important. Si anades otro
	   <dialog> al proyecto, dale el mismo margin:auto o le pasara lo mismo. */
	margin: auto;
}

.moreInfoDialog::backdrop {
	background-color: rgba(26, 26, 26, 0.7);
}

/* showModal() deja inerte el contenido de detras, pero NO bloquea su scroll:
   sin esto la pagina sigue desplazandose con la rueda por debajo del pop-up.
   Va en <html> y no en <body>: solo el overflow del elemento raiz se propaga
   al viewport (mismo criterio que html.no-scroll en fenix-sevilla-hotel.css). */
html:has(.moreInfoDialog[open]) {
	overflow: hidden;
}

.moreInfoDialog .moreInfoDialogBox {
	position: relative;
	max-height: inherit;
	padding: 3.5rem 3rem 3rem;
	overflow-y: auto;
}

.moreInfoDialog .moreInfoDialogClose {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: transparent;
	cursor: pointer;
	transition: background-color .3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.moreInfoDialog .moreInfoDialogClose:hover {
	background-color: #F4C670;
}

/* close-modal-icon.svg es un asset COMPARTIDO (tambien lo usa la mascara de
   reservas en booking-mask.xsl, dos veces), asi que el SVG no se toca: el fix
   de contraste va scopeado aqui. Causa real (WCAG 1.4.11, <3:1 en ambos
   estados): el trazo del SVG es de 1 unidad sobre un viewBox de 38, y a 16px
   renderiza como una linea de menos de medio pixel; el antialiasing la
   difumina a un gris casi invisible por muy oscuro que sea el color declarado
   en el SVG. Se combina subir el tamano renderizado (el trazo deja de ser
   sub-pixel) con forzar el trazo a negro solido via filter (brightness(0)
   fuerza el color a negro puro; no toca el canal alpha, por eso hace falta
   tambien el tamano: sin suficiente cobertura de trazo seguiria diluyendose). */
.moreInfoDialog .moreInfoDialogClose img {
	width: 1.25rem;
	height: 1.25rem;
	filter: brightness(0);
}

/* Contenido tal cual lo escribe el editor en el CMS: parrafos y listas. Se
   replica el ritmo tipografico de los paneles del listado (experiences.css)
   para que el pop-up no parezca de otro sitio. */
.moreInfoDialog .moreInfoDialogContent p {
	margin-bottom: 1.25rem;
	font-weight: 400;
	line-height: 1.5rem;
}

.moreInfoDialog .moreInfoDialogContent p:last-child {
	margin-bottom: 0;
}

.moreInfoDialog .moreInfoDialogContent p strong {
	font-weight: 600;
}

.moreInfoDialog .moreInfoDialogContent ul,
.moreInfoDialog .moreInfoDialogContent ol {
	margin-bottom: 1.25rem;
	padding-left: 1.25rem;
}

.moreInfoDialog .moreInfoDialogContent li {
	margin-bottom: 0.5rem;
	line-height: 1.5rem;
}

.moreInfoDialog .moreInfoDialogContent a {
	color: #800033;
	text-decoration: underline;
}

/* #Tablet y movil (max-width: 991px) — el pop-up ocupa casi toda la ventana y
   afloja el padding, que a 48px se come el ancho util en pantallas pequenas. */
@media only screen and (max-width: 991px) {
	.moreInfoDialog {
		width: calc(100vw - 2rem);
		max-height: 85vh;
	}
	.moreInfoDialog .moreInfoDialogBox {
		padding: 3.5rem 1.5rem 2rem;
	}
}
