/**
 * Sils Addons — galería de la ficha de obra.
 *
 * La obra manda: va centrada y ocupa todo el alto y el ancho que le deja su columna,
 * con las miniaturas en vertical a la izquierda. En móvil, las miniaturas pasan a una
 * fila deslizable bajo la obra. No hay dos montajes ni visibilidad dinámica.
 *
 * Colores y tipografías con las variables del sistema (--sils-*: paleta «Cuadros Sils» de
 * Bricks), cada una con el valor que tiene hoy de respaldo, por si una página no las
 * carga. Hasta el 1-oct-2026 se leían las del kit de Elementor (--e-global-*).
 *
 * @package SilsAddons
 */

/* La columna de la imagen es más alta que la pantalla (la central manda), así que la
   galería se limita al alto visible: la obra nunca se sale, ni la de ambiente que es
   más alta. --sils-galeria-tope es lo que ocupa la cabecera. */
.sils-galeria {
	--sils-galeria-tope: 90px;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	width: 100%;
	height: 100%;
	max-height: calc(100dvh - var(--sils-galeria-tope));
	min-height: inherit;
	padding: 24px;
	box-sizing: border-box;
}

/* Miniaturas: columna estrecha a la izquierda. */
.sils-galeria__miniaturas {
	flex: 0 0 76px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	align-self: flex-start;
	max-height: 100%;
}
.sils-galeria__miniaturas::-webkit-scrollbar { display: none; }

/* Cada miniatura en su formato (como las miniaturas de «Paredes que inspiran» de la
   portada): ancho fijo y alto libre en escritorio; en el móvil, al revés. */
.sils-galeria button.sils-galeria__mini {
	flex: 0 0 auto;
	width: 76px;
	height: auto;
	padding: 0;
	/* Mismo radio que los selectores de la ficha; la seleccionada se marca sobre todo
	   con opacidad, no con un borde fuerte. */
	border: 1px solid transparent;
	border-radius: var(--sils-radio, 4px);
	background: var(--sils-blanco, #FFFFFF);
	cursor: pointer;
	overflow: hidden;
	transition: border-color .2s ease, opacity .2s ease;
	opacity: .45;
}
.sils-galeria button.sils-galeria__mini img { width: 100%; height: auto; display: block; }
.sils-galeria button.sils-galeria__mini img { border-radius: 3px; }
.sils-galeria button.sils-galeria__mini:hover { opacity: .8; }
.sils-galeria button.sils-galeria__mini.es-activa {
	opacity: 1;
	border-color: color-mix(in srgb, var(--sils-secundario, #6B6B6B) 28%, transparent);
}
.sils-galeria button.sils-galeria__mini:focus-visible { outline: 2px solid var(--sils-texto, #2C2C2C); outline-offset: 2px; }

/* La obra: centrada y lo más grande posible dentro de lo que quede. */
/* La escena se reserva por sí misma TODO el alto disponible (pantalla menos cabecera).
   Si depende del contenedor y este no tiene altura propia —como en la ficha de
   composición— la galería se queda corta: la imagen se salía por arriba y por abajo, y el
   bloque entero quedaba pegado arriba en vez de centrado. */
.sils-galeria__escena {
	position: relative;
	flex: 1 1 auto;
	align-self: stretch;
	min-width: 0;
	min-height: var(--sils-galeria-alto);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* La imagen viaja dentro de una «pieza»: una capa que ocupa toda la escena y que sí se
   puede mover, porque el marco no (su transformación es el giro que pinta el motor).
   Al cambiar de imagen se pone una copia de la anterior al lado y las dos se desplazan a
   la vez, como un carrusel: nunca se montan una sobre otra. */
.sils-galeria__pieza {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sils-galeria__pieza.desliza { transition: transform .34s cubic-bezier(.22, .61, .36, 1); }
.sils-galeria__fantasma { pointer-events: none; }
/* Solo mientras dura el movimiento: así la sombra del marco no se recorta en reposo. */
.sils-galeria__escena.en-movimiento { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.sils-galeria__pieza.desliza { transition: none; }
}
/* El marco se pinta en perspectiva y ocupa algo más que la propia imagen, así que la
   obra no puede llenar el hueco al 100 %: se deja ese margen con --sils-galeria-encaje.

   Quien manda es la IMAGEN: se le ponen los límites (alto disponible y ancho de la
   columna) y el marco no tiene medidas propias, se encoge hasta abrazarla. Antes el
   marco tenía un alto fijo en % y, cuando la imagen se estrechaba por falta de ancho,
   el marco se quedaba más alto que ella. */
.sils-galeria {
	--sils-galeria-alto: calc(100dvh - var(--sils-galeria-tope) - 48px);
	--sils-galeria-encaje: 0.76;
	--sils-galeria-encaje-ancho: 68%;
}
.sils-galeria__marco {
	display: flex;
	max-width: var(--sils-galeria-encaje-ancho);
}
.sils-galeria img.sils-galeria__obra {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(var(--sils-galeria-alto) * var(--sils-galeria-encaje));
}

/* Las demás imágenes de la galería son fotos de ambiente (composiciones): ni marco ni
   rotación ni perspectiva. Solo la primera es la obra.
   Y sin animación: el motor de marcos anima la rotación medio segundo, así que al pasar
   de la obra girada a una foto de ambiente se veía cómo «se colocaba» de frente. Estas
   imágenes nunca entran en modo marco, ni de camino. */
.sils-galeria__marco.es-ambiente,
.sils-galeria__marco.es-ambiente img.sils-galeria__obra {
	transform: none !important;
	filter: none !important;
	transition: none !important;
	animation: none !important;
}
.sils-galeria__marco.es-ambiente { max-width: 94%; }
.sils-galeria__marco.es-ambiente img.sils-galeria__obra { max-height: calc(var(--sils-galeria-alto) * 0.92); }
.sils-galeria__marco.es-ambiente > *:not(img) { display: none !important; }

/* Silencio momentáneo al cambiar de imagen: ni giro ni sombra en movimiento. */
.sils-galeria__marco.sin-anima,
.sils-galeria__marco.sin-anima * {
	transition: none !important;
	animation: none !important;
}

/* Móvil: la obra arriba y las miniaturas en una fila deslizable debajo. */
@media (max-width: 767px) {
	.sils-galeria { flex-direction: column-reverse; gap: var(--sils-esp-xs, 12px); padding: var(--sils-esp-s, 16px); height: auto; max-height: none; align-items: stretch; }
	.sils-galeria__miniaturas {
		flex: 0 0 auto; flex-direction: row; align-self: stretch; max-height: none;
		overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 2px;
	}
	.sils-galeria button.sils-galeria__mini { width: auto; height: 56px; scroll-snap-align: start; }
	.sils-galeria button.sils-galeria__mini img { width: auto; height: 100%; }
	/* La fila de miniaturas se desliza a sangre (sin flechas): llega al borde de la pantalla
	   y la primera queda alineada con el margen. */
	.sils-galeria__miniaturas {
		margin-inline: calc(-1 * var(--sils-margen-seguridad, 16px));
		padding-inline: var(--sils-margen-seguridad, 16px);
		scroll-padding-inline: var(--sils-margen-seguridad, 16px);
	}
	.sils-galeria__escena { min-height: 58vh; }
	/* En vertical el alto ya no lo limita la pantalla menos la cabecera: se deja un tope
	   propio para que la obra quepa con las miniaturas debajo. */
	/* El encaje no llega a 1: el hueco de la escena es 58vh y la obra, a 64dvh, se salía
	   por arriba y por abajo y tapaba las miniaturas (obras muy verticales, como Alo). Con
	   la perspectiva suave de abajo el borde cercano crece un 5 %: 0,86 deja que quepa
	   entera. Solo afecta a las que topan con el alto; las demás las limita el ancho. */
	.sils-galeria { --sils-galeria-alto: 64dvh; --sils-galeria-encaje: .86; --sils-galeria-encaje-ancho: 78%; }

	/* Perspectiva suave en el móvil, para todas las obras (las gráficas ya la tenían). La de
	   escritorio (70vw, 25°) en una pantalla estrecha agrandaba mucho el borde cercano: las
	   obras alargadas casi se salían y se iban a la izquierda. */
	body:not(.sils-grafica) .sils-galeria .sils-galeria__marco:not(.es-ambiente) {
		transform: perspective(200vw) rotateY(15deg);
	}
}

/* Una foto de ambiente no se gira nunca. La regla del móvil de las obras gráficas
   enmarcadas lleva !important y se imponía a la de es-ambiente: la foto salía girada y se
   salía de su hueco. Con más especificidad, gana esta. */
html body .sils-galeria .sils-galeria__marco.es-ambiente { transform: none !important; }

/* ── Ampliar (visor a pantalla completa, assets/front/js/visor.js) ─────────
   La imagen entera abre el visor. La lupa solo aparece al pasar el ratón o al llegar con
   el teclado; en pantallas táctiles no sale nunca (se toca la imagen). */
.sils-galeria__escena.es-ampliable { cursor: zoom-in; }
.sils-galeria button.sils-galeria__ampliar {
	position: absolute; top: 12px; right: 12px; z-index: 4;
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; margin: 0; padding: 0; min-height: 0;
	border: 0; border-radius: 50%; cursor: zoom-in;
	background: color-mix(in srgb, var(--sils-blanco, #FFFFFF) 88%, transparent);
	color: var(--sils-texto, #2C2C2C);
	box-shadow: 0 1px 6px color-mix(in srgb, var(--sils-principal, #000000) 14%, transparent);
	opacity: 0; transition: opacity .2s ease;
}
.sils-galeria button.sils-galeria__ampliar i { font-size: var(--sils-txt-2xs, 14px); line-height: 1; }
.sils-galeria__escena.es-ampliable:hover button.sils-galeria__ampliar,
.sils-galeria button.sils-galeria__ampliar:focus-visible { opacity: 1; }
.sils-galeria button.sils-galeria__ampliar:focus-visible { outline: 2px solid var(--sils-texto, #2C2C2C); outline-offset: 2px; }
.sils-galeria__escena.en-movimiento button.sils-galeria__ampliar { opacity: 0; }
@media (hover: none) {
	.sils-galeria button.sils-galeria__ampliar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sils-galeria button.sils-galeria__ampliar { transition: none; }
}