/* =========================================================================
   Himnos Score Viewer
   Mobile-first. El pianista de iglesia lee desde el móvil apoyado en el atril:
   ese es el caso de uso principal, no el escritorio.
   ========================================================================= */

.hsv-viewer {
	/* Paleta. Se sobrescribe desde Ajustes y, por bloque, desde Elementor. */
	--hsv-accent: #2e9de1;
	--hsv-accent-dark: #1b7fbd;
	--hsv-icon: #0f4c75;
	--hsv-track: #cfe7f8;
	--hsv-watermark: #2e9de1;
	--hsv-watermark-rgb: 46, 157, 225;
	--hsv-page-bg: transparent;
	--hsv-border: #e3e6ea;
	--hsv-bg: transparent;
	--hsv-text: #1f2933;
	--hsv-muted: #5b6570;

	/* Medidas. 44px es el mínimo táctil accesible. */
	--hsv-tap: 44px;
	--hsv-radius: 10px;
	--hsv-gap: 6px;

	position: relative;
	/* Sin caja propia: el visor vive sobre el fondo de la web. */
	background: var(--hsv-page-bg);
	font-family: inherit;
	color: var(--hsv-text);
	outline: none;

	/* Permite consultas por tamaño del contenedor, no de la ventana:
	   el visor se adapta igual dentro de una columna estrecha de Elementor. */
	container-type: inline-size;
	container-name: hsv;
}

.hsv-viewer *,
.hsv-viewer *::before,
.hsv-viewer *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Barra de controles
   ------------------------------------------------------------------------- */

.hsv-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hsv-gap);
	padding: 6px 4px 10px;
	background: var(--hsv-bg);
	flex-wrap: nowrap;

	/* En móvil la barra sigue accesible al desplazarse por la partitura. */
	position: sticky;
	top: 0;
	z-index: 5;
}

.hsv-toolbar-group {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.hsv-toolbar-group.hsv-pager {
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
}

/* Botones tipo píldora, al estilo de los controles de Musicnotes. */

.hsv-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	color: var(--hsv-icon);
	border-radius: 999px;
	min-width: var(--hsv-tap);
	height: var(--hsv-tap);
	padding: 0 10px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, border-color .15s ease, color .15s ease;

	/* Evita el zoom accidental por doble toque en iOS. */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.hsv-btn:hover:not(:disabled),
.hsv-btn:focus-visible {
	background: rgba(var(--hsv-watermark-rgb), .12);
	color: var(--hsv-accent-dark);
}

.hsv-btn:active:not(:disabled) {
	background: rgba(var(--hsv-watermark-rgb), .2);
}

.hsv-btn:focus-visible {
	outline: 2px solid var(--hsv-accent-dark);
	outline-offset: 2px;
}

.hsv-btn:disabled {
	opacity: .35;
	cursor: default;
}

.hsv-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	display: block;
}

.hsv-page-label {
	font-size: 17px;
	font-weight: 600;
	min-width: 76px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var(--hsv-icon);
	white-space: nowrap;
	user-select: none;
}

.hsv-zoom-label {
	font-size: 13px;
	font-weight: 600;
	min-width: 50px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var(--hsv-muted);
	white-space: nowrap;
	user-select: none;
}

/* -------------------------------------------------------------------------
   Barra de páginas segmentada
   Un segmento por página, como la de Musicnotes. Hoy navega; cuando llegue
   el audio, será además la barra de reproducción.
   ------------------------------------------------------------------------- */

.hsv-segments {
	display: flex;
	gap: 5px;
	padding: 0 10px 12px;
	align-items: center;
}

.hsv-segments:empty {
	display: none;
}

.hsv-segment {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	padding: 0;
	flex: 1 1 0;
	height: 8px;
	min-width: 0;
	border-radius: 999px;
	background: var(--hsv-track);
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* Área táctil invisible: 8px de alto son imposibles de acertar con el dedo. */
.hsv-segment::before {
	content: '';
	display: block;
	height: 28px;
	margin-top: -10px;
}

.hsv-segment:hover {
	background: var(--hsv-accent);
	transform: scaleY(1.35);
}

.hsv-segment.is-active {
	background: var(--hsv-accent);
}

.hsv-segment.is-seen {
	background: var(--hsv-accent);
	opacity: .55;
}

.hsv-segment:focus-visible {
	outline: 2px solid var(--hsv-accent-dark);
	outline-offset: 3px;
}

.hsv-badge {
	display: inline-block;
	background: var(--hsv-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

/* En contenedores estrechos, el zoom y la etiqueta sobran: gana la partitura. */

@container hsv (max-width: 520px) {
	.hsv-zoom-label { display: none; }
	.hsv-badge-group { display: none; }
	.hsv-page-label { min-width: 48px; font-size: 12px; }
	.hsv-btn { padding: 0 6px; }
}

@container hsv (max-width: 380px) {
	.hsv-zoom { display: none; }
}

/* Respaldo para navegadores sin soporte de container queries. */

@supports not (container-type: inline-size) {
	@media (max-width: 520px) {
		.hsv-zoom-label,
		.hsv-badge-group { display: none; }
	}
	@media (max-width: 380px) {
		.hsv-zoom { display: none; }
	}
}

/* -------------------------------------------------------------------------
   Escenario
   ------------------------------------------------------------------------- */

.hsv-stage {
	position: relative;
	padding: 0 6px 6px;
	min-height: 260px;
	display: flex;
	align-items: flex-start;
	gap: 4px;
}

/*
 * La hoja: tarjeta blanca con sombra, flotando sobre el fondo de tu web.
 * Es lo que hace que se lea como papel y no como un bloque más de la página.
 */
.hsv-sheet {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06),
		0 8px 24px rgba(16, 24, 40, .10);
	padding: 10px;

	/*
	 * Sin scroll interno: se muestra una página completa y ya.
	 * Con overflow:auto, la capa de reproducción —posicionada en absoluto
	 * y con la altura del render de OSMD— generaba un área desplazable
	 * fantasma dentro de la hoja al pulsar Play.
	 */
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   Flechas grandes al borde
   ------------------------------------------------------------------------- */

.hsv-nav {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	color: #b9bfc7;
	cursor: pointer;
	flex: 0 0 auto;
	width: 34px;
	align-self: center;
	padding: 0;
	transition: color .15s ease, opacity .15s ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.hsv-nav svg {
	width: 100%;
	height: auto;
	display: block;
}

.hsv-nav:hover:not(:disabled) {
	color: var(--hsv-accent);
}

.hsv-nav:disabled {
	opacity: .25;
	cursor: default;
}

.hsv-nav:focus-visible {
	outline: 2px solid var(--hsv-accent-dark);
	outline-offset: 2px;
	border-radius: 6px;
}

/* En pantallas estrechas las flechas roban ancho a la partitura:
   ahí manda el deslizamiento con el dedo y la barra de segmentos. */

@container hsv (max-width: 560px) {
	.hsv-nav { display: none; }
	.hsv-stage { padding: 0 4px 4px; }
	.hsv-sheet { border-radius: 10px; padding: 6px; }
}

@supports not (container-type: inline-size) {
	@media (max-width: 560px) {
		.hsv-nav { display: none; }
	}
}

.hsv-osmd {
	position: relative;
	z-index: 1;
	transition: width .15s ease;
}

.hsv-osmd svg {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Páginas SVG exportadas desde Sibelius. */

.hsv-svg-page {
	width: 100%;
	line-height: 0;
}

.hsv-svg-page + .hsv-svg-page {
	margin-top: 12px;
}

/*
 * Con la partitura incrustada en el HTML, todas las páginas existen desde el
 * primer pintado. Sin esta regla se verían apiladas durante unos milisegundos,
 * hasta que el JS ocultara las demás. Se muestra solo la primera desde el
 * principio y el JS toma el relevo sin que se note nada.
 */
.hsv-viewer[data-inline="1"] .hsv-osmd > .hsv-svg-page:not(:first-child) {
	display: none;
}

.hsv-svg-page svg {
	width: 100%;
	height: auto;
	display: block;
}

.hsv-viewer.is-preview .hsv-sheet {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* -------------------------------------------------------------------------
   Pantalla completa: el modo real de lectura en móvil y tablet
   ------------------------------------------------------------------------- */

.hsv-viewer.is-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 999999;
	border-radius: 0;
	border: 0;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.hsv-viewer.is-fullscreen .hsv-stage {
	flex: 1 1 auto;
	min-height: 0;
}

.hsv-viewer.is-fullscreen .hsv-sheet {
	max-height: 100%;
	box-shadow: none;
	border-radius: 0;
}

.hsv-viewer.is-fullscreen .hsv-paywall {
	flex-shrink: 0;
}

/* En horizontal, cada milímetro de alto cuenta. */

@media (orientation: landscape) and (max-height: 520px) {
	.hsv-viewer.is-fullscreen {
		--hsv-tap: 38px;
	}
	.hsv-viewer.is-fullscreen .hsv-toolbar {
		padding: 3px 6px;
	}
	.hsv-viewer.is-fullscreen .hsv-paywall-card {
		padding: 10px 16px 12px;
	}
	.hsv-viewer.is-fullscreen .hsv-paywall-note,
	.hsv-viewer.is-fullscreen .hsv-paywall-text {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Carga y error
   ------------------------------------------------------------------------- */

.hsv-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 240px;
	color: var(--hsv-muted);
	font-size: 14px;
}

.hsv-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--hsv-border);
	border-top-color: var(--hsv-accent);
	border-radius: 50%;
	animation: hsv-spin .8s linear infinite;
	flex-shrink: 0;
}

@keyframes hsv-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.hsv-spinner { animation-duration: 2s; }
	.hsv-osmd, .hsv-cta { transition: none; }
}

.hsv-error {
	padding: 40px 20px;
	text-align: center;
	color: #b32d2e;
	font-size: 14px;
}

/* -------------------------------------------------------------------------
   Marca de agua
   ------------------------------------------------------------------------- */

.hsv-watermark {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	justify-content: space-around;
	overflow: hidden;
}

.hsv-watermark span {
	transform: rotate(-28deg);
	font-size: clamp(11px, 2.2vw, 20px);
	font-weight: 700;
	color: rgba(var(--hsv-watermark-rgb), .12);
	white-space: nowrap;
	letter-spacing: .06em;
}

/* -------------------------------------------------------------------------
   Paywall
   ------------------------------------------------------------------------- */

.hsv-paywall {
	position: relative;
	z-index: 3;
}

.hsv-paywall-fade {
	height: 80px;
	margin-top: -80px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%);
	pointer-events: none;
	position: relative;
}

.hsv-paywall-card {
	text-align: center;
	padding: 18px 18px 22px;
	background: #fff;
	border-top: 1px solid var(--hsv-border);
}

.hsv-paywall-title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.hsv-paywall-text {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--hsv-muted);
	line-height: 1.45;
}

.hsv-cta {
	display: block;
	width: 100%;
	background: var(--hsv-accent);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 16px;
	padding: 14px 24px;
	border-radius: 8px;
	min-height: var(--hsv-tap);
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
	box-shadow: 0 2px 10px rgba(46, 157, 225, .28);
	touch-action: manipulation;
}

.hsv-cta:hover {
	background: var(--hsv-accent-dark);
	transform: translateY(-1px);
	box-shadow: 0 5px 16px rgba(46, 157, 225, .36);
}

.hsv-cta:active {
	transform: translateY(0);
}

.hsv-cta .amount,
.hsv-cta bdi {
	color: #fff !important;
}

.hsv-paywall-note {
	margin: 10px 0 0;
	font-size: 12px;
	color: #7b8794;
	line-height: 1.4;
}

/* A partir de tablet el CTA no necesita ocupar todo el ancho. */

@container hsv (min-width: 560px) {
	.hsv-cta {
		display: inline-block;
		width: auto;
		min-width: 260px;
	}
	.hsv-stage { padding: 10px; }
	.hsv-toolbar { padding: 8px 12px; }
	.hsv-paywall-card { padding: 22px 26px 26px; }
}

@supports not (container-type: inline-size) {
	@media (min-width: 560px) {
		.hsv-cta {
			display: inline-block;
			width: auto;
			min-width: 260px;
		}
	}
}

/* -------------------------------------------------------------------------
   Móvil
   El pianista de iglesia lee desde el móvil apoyado en el atril, así que
   aquí manda la partitura: todo lo demás se aprieta o desaparece.
   ------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.hsv-viewer {
		max-width: 100%;
		overflow-x: hidden;
	}

	/* La barra deja de ser pegajosa: en pantallas cortas se comía la hoja
	   y la píldora de cristal quedaba flotando sobre las notas. */
	.hsv-toolbar {
		position: static;
		padding: 4px 2px 8px;
		gap: 2px;
	}

	.hsv-viewer.is-glass .hsv-toolbar {
		margin: 0 0 8px;
		padding: 4px 6px;
	}

	.hsv-stage {
		padding: 0;
	}

	.hsv-sheet {
		padding: 4px;
		border-radius: 8px;
	}

	.hsv-page-label {
		font-size: 15px;
		min-width: 62px;
	}

	.hsv-paywall-card {
		padding: 14px 12px 16px;
		border-radius: 12px;
	}

	.hsv-viewer.is-glass .hsv-paywall-card {
		margin: 8px 0 0;
	}

	.hsv-paywall-title {
		font-size: 14px;
	}

	.hsv-paywall-text {
		font-size: 13px;
	}

	.hsv-paywall-note {
		font-size: 11px;
	}
}

/*
 * La hoja mantiene su proporción de folio pase lo que pase.
 * Sin esto, un SVG con viewBox pero sin altura declarada puede colapsar
 * o estirarse en algunos navegadores móviles.
 */
.hsv-svg-page svg {
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
}

/* -------------------------------------------------------------------------
   Botón de reproducción
   ------------------------------------------------------------------------- */

.hsv-play {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: var(--hsv-accent);
	color: #fff;
	border-radius: 999px;
	height: var(--hsv-tap);
	padding: 0 18px 0 14px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, transform .12s ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 2px 8px rgba(var(--hsv-watermark-rgb), .3);
}

.hsv-play:hover {
	background: var(--hsv-accent-dark);
}

.hsv-play:active {
	transform: scale(.97);
}

.hsv-play.is-busy {
	opacity: .7;
	cursor: progress;
}

.hsv-play svg {
	width: 20px;
	height: 20px;
	display: block;
}

.hsv-play-icons {
	display: inline-flex;
	align-items: center;
}

/* Cabeza de nota iluminada sobre tu propio SVG de Sibelius. */

.hsv-nh {
	transition: fill .08s linear;
}

.hsv-nh-on {
	filter: drop-shadow(0 0 3px rgba(var(--hsv-watermark-rgb), .55));
}

/* La capa de reproducción se superpone a la hoja mientras suena. */

.hsv-playback-layer {
	position: relative;
	z-index: 4;
}

/*
 * En reposo la capa es invisible pero CONSERVA SU ANCHO.
 * Si se ocultara con display:none, OSMD mediría 0px al renderizar
 * y la partitura saldría vacía.
 */
.hsv-playback-layer.is-idle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;

	/* Altura cero: no ocupa ni genera desplazamiento. El ANCHO se conserva,
	   que es lo único que OSMD necesita para maquetar bien. */
	height: 0;
	overflow: hidden;

	opacity: 0;
	pointer-events: none;
	z-index: -1;
}

.hsv-playback-layer svg {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* El cursor de OSMD, teñido con tu color de acento. */

.hsv-viewer .cursor,
.hsv-viewer img.cursor {
	opacity: .22 !important;
	mix-blend-mode: multiply;
}

@container hsv (max-width: 440px) {
	.hsv-play-label { display: none; }
	.hsv-play { padding: 0; width: var(--hsv-tap); justify-content: center; }
}

@supports not (container-type: inline-size) {
	@media (max-width: 440px) {
		.hsv-play-label { display: none; }
		.hsv-play { padding: 0; width: var(--hsv-tap); justify-content: center; }
	}
}

/* =========================================================================
   ESTILO CRISTAL (liquid glass)
   Se activa con la clase .is-glass desde Ajustes.

   El cristal va en los CONTROLES, nunca en la hoja. Una partitura sobre
   fondo translúcido pierde contraste y se vuelve ilegible: las plicas y
   las líneas del pentagrama son trazos de menos de 1px. El papel se queda
   blanco y opaco; lo que flota es el cromo.
   ========================================================================= */

.hsv-viewer.is-glass {
	--hsv-glass-bg: rgba(255, 255, 255, .55);
	--hsv-glass-bg-strong: rgba(255, 255, 255, .72);
	--hsv-glass-border: rgba(255, 255, 255, .55);
	--hsv-glass-shadow: 0 4px 24px rgba(16, 24, 40, .10);
	--hsv-icon: #0f4c75;
}

/* Variante para sitios de fondo oscuro. */
.hsv-viewer.is-glass-dark {
	--hsv-glass-bg: rgba(22, 28, 36, .48);
	--hsv-glass-bg-strong: rgba(22, 28, 36, .66);
	--hsv-glass-border: rgba(255, 255, 255, .16);
	--hsv-glass-shadow: 0 4px 24px rgba(0, 0, 0, .35);
	--hsv-icon: #eaf2f8;
	--hsv-text: #eaf2f8;
	--hsv-muted: #aab6c2;
}

.hsv-viewer.is-glass .hsv-toolbar {
	background: var(--hsv-glass-bg);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid var(--hsv-glass-border);
	border-radius: 999px;
	box-shadow: var(--hsv-glass-shadow);
	margin: 0 6px 10px;
	padding: 5px 8px;
}

.hsv-viewer.is-glass .hsv-btn {
	background: transparent;
}

.hsv-viewer.is-glass .hsv-btn:hover:not(:disabled),
.hsv-viewer.is-glass .hsv-btn:focus-visible {
	background: var(--hsv-glass-bg-strong);
	box-shadow: inset 0 0 0 1px var(--hsv-glass-border);
}

.hsv-viewer.is-glass .hsv-segments {
	background: var(--hsv-glass-bg);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	border: 1px solid var(--hsv-glass-border);
	border-radius: 999px;
	box-shadow: var(--hsv-glass-shadow);
	margin: 0 6px 12px;
	padding: 10px 14px;
}

.hsv-viewer.is-glass .hsv-segment::before {
	height: 24px;
	margin-top: -8px;
}

/* La hoja gana un borde luminoso, pero sigue siendo papel opaco. */
.hsv-viewer.is-glass .hsv-sheet {
	border: 1px solid var(--hsv-glass-border);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05),
		0 12px 32px rgba(16, 24, 40, .13);
}

.hsv-viewer.is-glass .hsv-paywall-card {
	background: var(--hsv-glass-bg);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid var(--hsv-glass-border);
	border-top: 1px solid var(--hsv-glass-border);
	border-radius: 16px;
	box-shadow: var(--hsv-glass-shadow);
	margin: 10px 6px 6px;
}

.hsv-viewer.is-glass .hsv-paywall-fade {
	display: none;
}

.hsv-viewer.is-glass .hsv-cta {
	box-shadow: 0 2px 12px rgba(var(--hsv-watermark-rgb), .35),
		inset 0 1px 0 rgba(255, 255, 255, .25);
}

.hsv-viewer.is-glass.is-fullscreen {
	background: var(--hsv-page-bg, #fff);
}

.hsv-viewer.is-glass.is-fullscreen .hsv-sheet {
	border-radius: 12px;
}

/*
 * Respaldo: Firefox tuvo backdrop-filter desactivado por defecto durante
 * años. Sin este bloque, ahí el cromo se vería transparente y el texto
 * flotando sobre la partitura.
 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.hsv-viewer.is-glass .hsv-toolbar,
	.hsv-viewer.is-glass .hsv-segments,
	.hsv-viewer.is-glass .hsv-paywall-card {
		background: rgba(255, 255, 255, .94);
	}

	.hsv-viewer.is-glass-dark .hsv-toolbar,
	.hsv-viewer.is-glass-dark .hsv-segments,
	.hsv-viewer.is-glass-dark .hsv-paywall-card {
		background: rgba(22, 28, 36, .94);
	}
}

/* El desenfoque es costoso en móviles antiguos; con movimiento reducido
   priorizamos que la página vaya fluida. */
@media (prefers-reduced-motion: reduce) {
	.hsv-viewer.is-glass .hsv-toolbar,
	.hsv-viewer.is-glass .hsv-segments,
	.hsv-viewer.is-glass .hsv-paywall-card {
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}

/* -------------------------------------------------------------------------
   Impresión: solo el comprador imprime, y sin cromo del visor
   ------------------------------------------------------------------------- */

@media print {
	.hsv-toolbar,
	.hsv-paywall,
	.hsv-loading,
	.hsv-watermark {
		display: none !important;
	}

	.hsv-viewer.is-preview {
		display: none !important;
	}

	.hsv-viewer {
		border: 0;
		overflow: visible;
	}

	.hsv-stage {
		overflow: visible;
		padding: 0;
	}

	/* Al imprimir se muestran todas las páginas, no solo la visible. */
	.hsv-osmd svg,
	.hsv-svg-page {
		display: block !important;
		page-break-after: always;
		break-after: page;
	}
}