/*
 * AB - Recursos Somos Bosques: visor de PDF en ventana modal.
 * Paleta de «Somos Bosques»: tinta #18231f, bosque #163c28, lima #bcc852, neblina #eef3ed.
 */
html.abrsb-visor-abierto,
html.abrsb-visor-abierto body {
	overflow: hidden;
}

.abrsb-visor {
	--abrsb-v-tinta: #18231f;
	--abrsb-v-bosque: #163c28;
	--abrsb-v-lima: #bcc852;
	--abrsb-v-niebla: #eef3ed;
	--abrsb-v-linea: #d6dfd7;
	align-items: center;
	background: rgba(24, 35, 31, 0.86);
	bottom: 0;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	left: 0;
	padding: 24px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 100000;
}

.abrsb-visor *,
.abrsb-visor *::before,
.abrsb-visor *::after {
	box-sizing: border-box;
}

.abrsb-visor__panel {
	background: var(--abrsb-v-niebla);
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
	color: var(--abrsb-v-tinta);
	display: flex;
	flex-direction: column;
	height: 100%;
	max-width: 1120px;
	overflow: hidden;
	width: 100%;
}

/* ---------------------------------------------------------------- barra superior */
.abrsb-visor__barra {
	align-items: center;
	background: var(--abrsb-v-bosque);
	color: #ffffff;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	padding: 10px 14px;
}

.abrsb-visor__titulo {
	color: #ffffff;
	flex: 1 1 240px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	padding: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.abrsb-visor__grupo {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 4px;
}

.abrsb-visor__boton,
.abrsb-visor__enlace {
	align-items: center;
	appearance: none;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 8px;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	gap: 6px;
	justify-content: center;
	line-height: 1;
	margin: 0;
	min-height: 40px;
	min-width: 40px;
	padding: 8px 12px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.abrsb-visor__boton:hover:not(:disabled),
.abrsb-visor__enlace:hover {
	background: rgba(255, 255, 255, 0.24);
	color: #ffffff;
}

.abrsb-visor__boton:disabled {
	cursor: default;
	opacity: 0.4;
}

.abrsb-visor__boton:focus-visible,
.abrsb-visor__enlace:focus-visible,
.abrsb-visor__aviso a:focus-visible {
	outline: 3px solid var(--abrsb-v-lima);
	outline-offset: 2px;
}

.abrsb-visor__boton--cerrar {
	background: var(--abrsb-v-lima);
	border-color: var(--abrsb-v-lima);
	color: var(--abrsb-v-tinta);
	font-size: 22px;
	padding: 0;
	width: 40px;
}

.abrsb-visor__boton--cerrar:hover:not(:disabled) {
	background: #ced863;
	color: var(--abrsb-v-tinta);
}

.abrsb-visor .abrsb-visor__pagina,
.abrsb-visor .abrsb-visor__enlace,
.abrsb-visor .abrsb-visor__titulo {
	color: #ffffff;
}

.abrsb-visor__pagina {
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	min-width: 104px;
	text-align: center;
	white-space: nowrap;
}

.abrsb-visor__icono {
	display: block;
	fill: none;
	height: 18px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 18px;
}

/* ---------------------------------------------------------------- contenido */
.abrsb-visor__cuerpo {
	-webkit-overflow-scrolling: touch;
	flex: 1 1 auto;
	outline-offset: -3px;
	overflow: auto;
	padding: 16px;
	position: relative;
}

.abrsb-visor__cuerpo:focus-visible {
	outline: 3px solid var(--abrsb-v-bosque);
}

.abrsb-visor__paginas {
	margin: 0 auto;
	position: relative;
}

.abrsb-visor__hoja {
	background: #ffffff;
	box-shadow: 0 2px 10px rgba(24, 35, 31, 0.18);
	margin: 0 auto 14px;
	max-width: none;
	overflow: hidden;
	position: relative;
}

.abrsb-visor__hoja canvas {
	display: block;
	height: 100%;
	width: 100%;
}

.abrsb-visor__estado {
	align-items: center;
	color: var(--abrsb-v-bosque);
	display: flex;
	flex-direction: column;
	font-size: 16px;
	gap: 14px;
	justify-content: center;
	min-height: 60%;
	padding: 32px 16px;
	text-align: center;
}

.abrsb-visor__giro {
	animation: abrsb-visor-giro 0.9s linear infinite;
	border: 4px solid var(--abrsb-v-linea);
	border-radius: 50%;
	border-top-color: var(--abrsb-v-bosque);
	height: 44px;
	width: 44px;
}

.abrsb-visor__aviso {
	color: var(--abrsb-v-tinta);
}

.abrsb-visor__aviso a {
	background: var(--abrsb-v-bosque);
	border-radius: 8px;
	color: #ffffff;
	display: inline-block;
	font-weight: 700;
	padding: 12px 18px;
	text-decoration: none;
}

.abrsb-visor__aviso a:hover {
	background: var(--abrsb-v-tinta);
	color: #ffffff;
}

.abrsb-visor__solo-lectores {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@keyframes abrsb-visor-giro {
	to {
		transform: rotate(360deg);
	}
}

/* ---------------------------------------------------------------- celulares y tabletas */
@media (max-width: 720px) {
	.abrsb-visor {
		padding: 0;
	}

	.abrsb-visor__panel {
		border-radius: 0;
		max-width: none;
	}

	.abrsb-visor__barra {
		gap: 6px 8px;
		padding: 8px 10px;
	}

	/* Fila 1: título, descargar, abrir y cerrar. Fila 2: páginas y zoom. */
	.abrsb-visor__titulo {
		flex: 1 1 0;
		font-size: 15px;
		min-width: 0;
		order: 1;
	}

	/* Salto de fila entre «título y acciones» y «páginas y zoom». */
	.abrsb-visor__barra::after {
		content: "";
		flex: 0 0 100%;
		height: 0;
		margin-top: -6px;
		order: 3;
	}

	.abrsb-visor__grupo--acciones {
		order: 2;
	}

	.abrsb-visor__boton--cerrar {
		order: 3;
	}

	.abrsb-visor__grupo--paginas {
		order: 4;
	}

	.abrsb-visor__grupo--zoom {
		margin-left: auto;
		order: 5;
	}

	.abrsb-visor__pagina {
		min-width: 92px;
	}

	.abrsb-visor__cuerpo {
		padding: 8px;
	}

	.abrsb-visor__texto-boton {
		font-size: 13px;
	}
}

@media (max-width: 720px) {
	/* En celulares las acciones solo muestran el ícono (siguen teniendo nombre accesible). */
	.abrsb-visor__grupo--acciones .abrsb-visor__texto-boton {
		border: 0;
		clip: rect(0, 0, 0, 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.abrsb-visor__giro {
		animation-duration: 3s;
	}

	.abrsb-visor__boton {
		transition: none;
	}
}