/**
 * Sils Addons — visor de imágenes (assets/front/js/visor.js, PhotoSwipe 5 de Bricks).
 *
 * Mismo aire que la ampliación que había antes: velo oscuro con el color del texto,
 * botones claros y, debajo, el nombre y «Ver obra». Variables del sistema (--sils-*).
 *
 * @package SilsAddons
 */
.pswp.sils-visor {
	--pswp-bg: var(--sils-texto, #2C2C2C);
	--pswp-placeholder-bg: var(--sils-texto, #2C2C2C);
	--pswp-icon-color: var(--sils-blanco, #FFFFFF);
	--pswp-icon-color-secondary: var(--sils-texto, #2C2C2C);
	--pswp-icon-stroke-color: var(--sils-texto, #2C2C2C);
	--pswp-icon-stroke-width: 1px;
	--pswp-error-text-color: var(--sils-blanco, #FFFFFF);
	font-family: var(--sils-fuente-thoren, "Thoren Sans"), Sans-serif;
}

/* Mismo peso que la regla de Bricks (.pswp.brx .pswp__counter), que si no gana. */
.pswp.sils-visor .pswp__counter {
	color: var(--sils-blanco, #FFFFFF);
	font-size: var(--sils-txt-3xs, 12px);
	font-weight: 300;
	letter-spacing: 1.6px;
	text-shadow: none;
	opacity: 1;
}

/* Pie: nombre y enlace a la obra, centrados bajo la imagen. */
.sils-visor .sils-visor__pie {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	display: flex;
	align-items: baseline;
	gap: var(--sils-esp-s, 16px);
	max-width: calc(100% - 32px);
	color: var(--sils-blanco, #FFFFFF);
	font-size: var(--sils-txt-2xs, 14px);
	font-weight: 300;
	letter-spacing: 0.6px;
	white-space: nowrap;
	pointer-events: auto;
}
.sils-visor .sils-visor__pie[hidden] { display: none; }
.sils-visor .sils-visor__titulo {
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 400;
}
.sils-visor a.sils-visor__ver,
.sils-visor a.sils-visor__ver:visited {
	color: var(--sils-blanco, #FFFFFF);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--sils-blanco, #FFFFFF) 50%, transparent);
	text-underline-offset: 4px;
}
.sils-visor a.sils-visor__ver:hover { text-decoration-color: var(--sils-blanco, #FFFFFF); }

/* Botones con el sistema de la web: círculo blanco de 40 px con el icono Themify de línea
   fina (como las flechas de los carruseles y la ampliación de antes), no los iconos
   gruesos de PhotoSwipe. Las reglas de Bricks para :hover/:focus pesan más, por eso se
   repiten aquí con el mismo peso. */
.pswp.sils-visor .pswp__top-bar {
	height: 64px;
	padding: 0 var(--sils-esp-s, 16px);
	gap: var(--sils-esp-xs, 12px);
}
.pswp.sils-visor .pswp__button,
.pswp.sils-visor .pswp__button:hover,
.pswp.sils-visor .pswp__button:focus,
.pswp.sils-visor .pswp__button:active,
.pswp.sils-visor .pswp__top-bar .pswp__button--close {
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sils-blanco, #FFFFFF) 92%, transparent);
	color: var(--sils-texto, #2C2C2C);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--sils-principal, #000000) 20%, transparent);
	opacity: 1;
	transition: background-color .2s ease, color .2s ease;
}
.pswp.sils-visor .pswp__button:hover,
.pswp.sils-visor .pswp__button:focus-visible {
	background: var(--sils-blanco, #FFFFFF);
	color: var(--sils-principal, #000000);
}
.pswp.sils-visor .pswp__button:focus-visible { outline: 1px solid var(--sils-blanco, #FFFFFF); outline-offset: 3px; }
.pswp.sils-visor .pswp__button i {
	font-size: var(--sils-txt-2xs, 14px);
	line-height: 1;
}
.pswp.sils-visor .pswp__button--arrow {
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
}
.pswp.sils-visor .pswp__button--arrow--prev { left: 16px; }
.pswp.sils-visor .pswp__button--arrow--next { right: 16px; }
@media (prefers-reduced-motion: reduce) {
	.pswp.sils-visor .pswp__button { transition: none; }
}