html:has(.treedimensional-visor-page),
body.treedimensional-visor-page {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: #fffaf0;
}

html:has(body.treedimensional-visor-page) { margin-top: 0 !important; }
body.treedimensional-visor-page #wpadminbar { display: none !important; }
body.treedimensional-visor-page { padding-top: 0; }

.treedimensional-visor {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	width: 100%;
	height: 100dvh;
	min-height: 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 42%, rgba(255, 146, 44, .13), transparent 46%),
		#fffaf0;
	color: var(--color-azul-verde-oscuro);
}

.treedimensional-visor:fullscreen { height: 100vh; }

.treedimensional-visor__cabecera {
	position: relative;
	z-index: 10;
	display: grid;
	grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
	align-items: center;
	gap: 20px;
	min-height: 66px;
	box-sizing: border-box;
	padding: 8px clamp(16px, 3vw, 40px);
	border-bottom: 1px solid rgba(17, 56, 65, .14);
	background: rgba(255, 250, 240, .97);
}

.treedimensional-visor__marca {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 9px;
	min-width: 0;
	font: 700 var(--fs-300)/1 'Elza Text', sans-serif;
	color: var(--color-azul-verde-oscuro);
}

.treedimensional-visor__marca img {
	display: block;
	width: auto;
	height: 44px;
	object-fit: contain;
}

.treedimensional-visor__descargar {
	justify-self: end;
	padding: 9px 15px;
	border-radius: 9px;
	background: var(--color-rojo);
	color: var(--color-blanco);
	font: 700 var(--fs-200)/1 'Elza Text', sans-serif;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.treedimensional-visor__descargar:hover,
.treedimensional-visor__descargar:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
}

.treedimensional-visor__lector {
	position: relative;
	min-width: 0;
	min-height: 0;
	padding: 14px;
	overflow: hidden;
}

.treedimensional-visor__estado {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	width: min(calc(100% - 32px), 560px);
	max-width: 560px;
	padding: 28px 34px;
	border: 1px solid rgba(17, 56, 65, .14);
	border-radius: 18px;
	background: #fffaf0;
	color: var(--color-azul-verde-oscuro);
	font: 500 var(--fs-400)/1.45 'Elza Text', sans-serif;
	text-align: center;
}

.treedimensional-visor__estado.is-error { border-color: rgba(255, 86, 49, .7); }

.treedimensional-visor__escenario {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	box-sizing: border-box;
	overflow: hidden;
	overscroll-behavior: contain;
}

.treedimensional-visor__escenario.is-ampliado {
	align-items: flex-start;
	justify-content: flex-start;
	overflow: auto;
}

.treedimensional-visor__escenario.is-preparando { visibility: hidden; }

.treedimensional-visor__superficie {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	height: 100%;
}

.treedimensional-visor__libro {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: 0 0;
	transition: transform .2s ease;
	will-change: transform;
}

.treedimensional-visor__hoja {
	overflow: hidden;
	background: var(--color-blanco);
}

.treedimensional-visor__hoja.is-error::after {
	content: 'No fue posible mostrar esta página';
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 24px;
	color: #7a2c20;
	font: 600 16px/1.4 'Elza Text', sans-serif;
	text-align: center;
}

.treedimensional-visor__hoja canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

.treedimensional-visor__controles {
	display: flex;
	align-items: center;
	justify-content: center;
	justify-self: center;
	gap: 7px;
	padding: 6px 9px;
	border: 1px solid rgba(17, 56, 65, .16);
	border-radius: 999px;
	background: #eeeee7;
	color: var(--color-azul-verde-oscuro);
	font: 600 var(--fs-200)/1 'Elza Text', sans-serif;
}

.treedimensional-visor__controles[hidden],
.treedimensional-visor__escenario[hidden],
.treedimensional-visor__estado[hidden] { display: none !important; }

.treedimensional-visor__controles button {
	display: grid;
	place-items: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 0;
	border-radius: 50%;
	background: rgba(17, 56, 65, .08);
	color: var(--color-azul-verde-oscuro);
	font: inherit;
	font-size: 17px;
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease;
}

.treedimensional-visor__controles button:hover,
.treedimensional-visor__controles button:focus-visible {
	transform: scale(1.08);
	background: var(--color-rojo);
	color: var(--color-blanco);
}

.treedimensional-visor__controles button:disabled {
	opacity: .35;
	cursor: not-allowed;
	transform: none;
}

.treedimensional-visor__pagina {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.treedimensional-visor__pagina input {
	width: 44px;
	box-sizing: border-box;
	padding: 5px;
	border: 1px solid rgba(17, 56, 65, .22);
	border-radius: 6px;
	background: #fffaf0;
	color: var(--color-azul-verde-oscuro);
	font: inherit;
	text-align: center;
}

.treedimensional-visor__pagina input:focus-visible { outline: 2px solid var(--color-rojo); }

.treedimensional-visor__separador {
	width: 1px;
	height: 22px;
	margin: 0 2px;
	background: rgba(17, 56, 65, .2);
}

.treedimensional-visor__zoom {
	min-width: 39px;
	text-align: center;
}

@media (max-width: 820px) {
	.treedimensional-visor__cabecera {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			'marca descargar'
			'controles controles';
		gap: 7px 16px;
		padding-block: 7px;
	}

	.treedimensional-visor__marca { grid-area: marca; }
	.treedimensional-visor__descargar { grid-area: descargar; }
	.treedimensional-visor__controles { grid-area: controles; }
	.treedimensional-visor__marca img { height: 34px; }
	.treedimensional-visor__lector { padding: 10px; }
}

@media (max-width: 430px) {
	.treedimensional-visor__cabecera { padding-inline: 10px; }
	.treedimensional-visor__marca { font-size: var(--fs-200); }
	.treedimensional-visor__marca img { height: 30px; }
	.treedimensional-visor__descargar { padding: 8px 11px; }
	.treedimensional-visor__controles { gap: 4px; max-width: 100%; box-sizing: border-box; padding-inline: 6px; }
	.treedimensional-visor__controles button { min-width: 29px; height: 29px; padding-inline: 6px; }
	.treedimensional-visor__pagina { gap: 4px; }
	.treedimensional-visor__pagina input { width: 39px; }
	.treedimensional-visor__separador { margin-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.treedimensional-visor__libro,
	.treedimensional-visor__controles button,
	.treedimensional-visor__descargar { transition: none; }
}