/**
 * Visores animados por tipo de consulta (inc/visores.php).
 * El estado base de cada pieza es el "visible": si no hay animación
 * (movimiento reducido o sin JS), el visor se ve completo y quieto.
 */

.ul-visor {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid rgba(120, 150, 255, 0.22);
	border-radius: 16px;
	background: radial-gradient(120% 120% at 50% 35%, #17266a 0%, #0a1230 52%, #060a1c 100%);
	isolation: isolate;
	transition: border-color 0.5s var(--ula-ease, ease), box-shadow 0.5s var(--ula-ease, ease);
}

.ul-visor::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(120, 150, 255, 0.09) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120, 150, 255, 0.09) 1px, transparent 1px);
	background-size: 20px 20px;
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 35%, transparent 80%);
	mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 35%, transparent 80%);
}

/* Líneas de barrido tipo monitor */
.ul-visor::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
}

.ul-visor > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ul-visor svg * {
	transform-box: view-box;
}

.ul-visor__hud,
.ul-visor__dato {
	position: absolute;
	z-index: 1;
	font-family: var(--ula-mono, ui-monospace, Menlo, monospace);
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ul-visor__hud,
.ul-visor__dato {
	padding: 4px 7px;
	border-radius: 6px;
	background: rgba(6, 10, 28, 0.62);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.ul-visor__hud {
	top: 7%;
	left: 7%;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #35e0d8;
}

.ul-visor__hud i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ff5d73;
	box-shadow: 0 0 8px #ff5d73;
	animation: ulv-rec 1.6s steps(2, jump-none) infinite;
}

.ul-visor__dato {
	right: 7%;
	bottom: 7%;
	color: rgba(200, 211, 245, 0.85);
	letter-spacing: 0.08em;
}

.ul-visor--hero {
	aspect-ratio: 16 / 11;
	border-radius: 24px;
	border-color: rgba(53, 224, 216, 0.35);
	box-shadow: 0 40px 90px -40px rgba(53, 224, 216, 0.45), inset 0 0 60px rgba(61, 123, 255, 0.15);
}

.ul-visor--hero .ul-visor__hud,
.ul-visor--hero .ul-visor__dato {
	font-size: 12px;
}

/* Fuera de pantalla: en pausa (solo si hay JS). */
.ul-js .ul-visor:not(.is-vivo) *,
.ul-js .ul-visor:not(.is-vivo)::after {
	animation-play-state: paused !important;
}

/* ---------- Piezas comunes ---------- */

.ul-visor .v-esq {
	opacity: 0.85;
}

.ul-visor .v-giro {
	transform-origin: 160px 100px;
	animation: ulv-giro 18s linear infinite;
}

.ul-visor .v-giro-lento {
	transform-origin: 160px 100px;
	animation: ulv-giro 40s linear infinite;
}

.ul-visor .v-pulso {
	transform-origin: 160px 100px;
	opacity: 0;
	animation: ulv-pulso 2.8s ease-out infinite;
}

/* ---------- Agudeza ---------- */

.ul-visor--agudeza .v-giro,
.ul-visor--agudeza .v-eje,
.ul-visor--agudeza .v-pulso {
	transform-origin: 236px 100px;
}

.ul-visor--agudeza .v-carta {
	animation: ulv-enfoque 6s ease-in-out infinite;
}

.ul-visor--agudeza .v-lectura {
	animation: ulv-lectura 6s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}

.ul-visor--agudeza .v-eje {
	animation: ulv-eje 6s ease-in-out infinite;
}

/* ---------- Retina ---------- */

.ul-visor--retina .v-vaso {
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
	animation: ulv-dibujar 7s ease-out infinite;
	animation-delay: calc(var(--i, 0) * 0.12s);
}

.ul-visor--retina .v-radar {
	transform-origin: 160px 100px;
	animation: ulv-giro 3.6s linear infinite;
}

.ul-visor--retina .v-marca rect {
	transform-box: fill-box;
	transform-origin: center;
	animation: ulv-marca 3.6s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * 1.2s);
}

/* ---------- OCT ---------- */

.ul-visor--oct .v-capas {
	animation: ulv-revela 5s linear infinite;
}

.ul-visor--oct .v-barrido {
	transform: translateX(302px);
	animation: ulv-barrido 5s linear infinite;
}

.ul-visor--oct .v-medida {
	animation: ulv-aparece 5s ease infinite;
}

/* ---------- Láser ---------- */

.ul-visor--laser .v-impacto {
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0.9;
	animation: ulv-impacto 6s ease-out infinite;
	animation-delay: calc(var(--i, 0) * 0.16s);
}

.ul-visor--laser .v-haz {
	animation: ulv-haz 0.6s linear infinite;
}

/* ---------- Campo visual ---------- */

.ul-visor--campo .v-estimulo {
	transform-box: fill-box;
	transform-origin: center;
	animation: ulv-estimulo 5.4s ease-out infinite;
	animation-delay: var(--t, 0s);
}

.ul-visor--campo .v-fijacion {
	animation: ulv-parpadeo 1.2s steps(2, jump-none) infinite;
}

/* ---------- Córnea ---------- */

.ul-visor--cornea .v-curva {
	transform-origin: 160px 100px;
	animation: ulv-onda 4s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -0.25s);
}

.ul-visor--cornea .v-eje-k {
	transform-origin: 160px 100px;
	animation: ulv-eje-k 8s ease-in-out infinite;
}

.ul-visor--cornea .v-placido {
	transform-origin: 160px 100px;
	animation: ulv-pulso-suave 4s ease-in-out infinite;
}

/* ---------- Electrofisiología ---------- */

.ul-visor--onda .v-traza {
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
	animation: ulv-traza 4s linear infinite;
	filter: drop-shadow(0 0 3px rgba(53, 224, 216, 0.8));
}

.ul-visor--onda .v-traza--b {
	animation-delay: 0.35s;
	filter: drop-shadow(0 0 3px rgba(107, 91, 255, 0.9));
}

.ul-visor--onda .v-cursor {
	animation: ulv-cursor 4s linear infinite;
}

/* ---------- Cirugía ---------- */

.ul-visor--cirugia .v-rexis {
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
	animation: ulv-rexis 5s ease-in-out infinite;
	filter: drop-shadow(0 0 4px rgba(53, 224, 216, 0.9));
}

.ul-visor--cirugia .v-faco {
	transform-origin: 160px 100px;
	animation: ulv-faco 5s ease-in-out infinite;
}

.ul-visor--cirugia .v-particula {
	animation: ulv-particula 2.4s ease-in infinite;
	animation-delay: calc(var(--i, 0) * 0.24s);
}

/* ---------- Párpados: el párpado baja y el ojo se cierra ---------- */

.ul-visor--parpado .v-parpado {
	transform-origin: 160px 40px;
	transform: scaleY(0.16);
	animation: ulv-cierre 5.4s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

@keyframes ulv-cierre {
	0%,
	58%,
	100% {
		transform: scaleY(0.16);
	}
	68%,
	76% {
		transform: scaleY(1);
	}
	84% {
		transform: scaleY(0.16);
	}
	90%,
	94% {
		transform: scaleY(0.62);
	}
}

/* ---------- Vía lagrimal: la sonda recorre el conducto ---------- */

.ul-visor--lagrimal .v-via {
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
	animation: ulv-via-avanza 4.8s ease-in-out infinite;
}

.ul-visor--lagrimal .v-sonda {
	offset-path: path("M178 86C202 98 220 92 226 112C232 134 218 156 210 170");
	offset-rotate: 0deg;
	animation: ulv-sonda-recorre 4.8s ease-in-out infinite;
}

.ul-visor--lagrimal .v-lagrima {
	opacity: 0.9;
	animation: ulv-lagrima 2.8s ease-in infinite;
	animation-delay: calc(var(--i, 0) * 0.9s);
}

@keyframes ulv-lagrima {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	16% {
		opacity: 0.95;
	}
	100% {
		transform: translate(-4px, 46px);
		opacity: 0;
	}
}

@keyframes ulv-via-avanza {
	0%,
	10% {
		stroke-dashoffset: 100;
	}
	64%,
	80% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 100;
	}
}

@keyframes ulv-sonda-recorre {
	0%,
	10% {
		offset-distance: 0%;
		opacity: 0;
	}
	18% {
		opacity: 1;
	}
	64%,
	80% {
		offset-distance: 100%;
		opacity: 1;
	}
	100% {
		offset-distance: 0%;
		opacity: 0;
	}
}

/* ---------- Binocular ---------- */

.ul-visor--binocular .v-mirada,
.ul-visor--binocular .v-objetivo {
	animation: ulv-mirada 6s ease-in-out infinite;
}

.ul-visor--binocular .v-objetivo {
	animation-name: ulv-objetivo;
}

.ul-visor--binocular .v-oclusor {
	transform: translateX(-180px);
	animation: ulv-oclusor 6s ease-in-out infinite;
}

/* ---------- Integración en tarjetas ---------- */

.ul-linea .ul-visor {
	margin: -8px -6px 4px;
	width: calc(100% + 12px);
}

.ul-serv-card .ul-visor,
.ul-v2 .ul-grid .ul-card .ul-visor {
	margin-bottom: 6px;
}

.ul-linea:hover .ul-visor,
.ul-serv-card:hover .ul-visor,
.ul-card:hover .ul-visor {
	border-color: rgba(53, 224, 216, 0.6);
	box-shadow: 0 0 0 1px rgba(53, 224, 216, 0.25), 0 18px 40px -20px rgba(53, 224, 216, 0.6);
}

/* Ficha de servicio y listado por línea: visor grande a la derecha */
.ul-v2 .ul-ficha__hero-inner--visor,
.ul-v2 .ul-archivo__hero-inner--visor {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.ul-v2 .ul-ficha__hero:has(.ul-visor--hero)::after,
.ul-v2 .ul-archivo__hero:has(.ul-visor--hero)::after {
	display: none;
}

@media (max-width: 900px) {
	.ul-v2 .ul-ficha__hero-inner--visor,
	.ul-v2 .ul-archivo__hero-inner--visor {
		grid-template-columns: minmax(0, 1fr);
	}

	.ul-visor--hero {
		max-width: 520px;
	}
}

/* ---------- Keyframes ---------- */

@keyframes ulv-rec {
	50% {
		opacity: 0.2;
	}
}

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

@keyframes ulv-pulso {
	0% {
		opacity: 0.8;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.5);
	}
}

@keyframes ulv-pulso-suave {
	0%,
	100% {
		opacity: 0.6;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.03);
	}
}

@keyframes ulv-enfoque {
	0%,
	8% {
		filter: blur(3px);
		opacity: 0.6;
	}
	30%,
	88% {
		filter: blur(0);
		opacity: 1;
	}
	100% {
		filter: blur(3px);
		opacity: 0.6;
	}
}

@keyframes ulv-lectura {
	0%,
	12% {
		transform: translateY(-36px) scaleY(1.6);
	}
	22%,
	32% {
		transform: translateY(0);
	}
	42%,
	52% {
		transform: translateY(22px);
	}
	62%,
	70% {
		transform: translateY(40px);
	}
	80%,
	100% {
		transform: translateY(56px);
	}
}

@keyframes ulv-eje {
	0%,
	100% {
		transform: rotate(-35deg);
	}
	50% {
		transform: rotate(55deg);
	}
}

@keyframes ulv-dibujar {
	0% {
		stroke-dashoffset: 100;
	}
	35%,
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes ulv-marca {
	0%,
	100% {
		opacity: 0.25;
		transform: scale(0.8);
	}
	50% {
		opacity: 1;
		transform: scale(1.25);
	}
}

@keyframes ulv-revela {
	0% {
		clip-path: inset(0 100% 0 0);
	}
	65%,
	100% {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes ulv-barrido {
	0% {
		transform: translateX(22px);
		opacity: 1;
	}
	65% {
		transform: translateX(302px);
		opacity: 1;
	}
	75%,
	100% {
		transform: translateX(302px);
		opacity: 0;
	}
}

@keyframes ulv-aparece {
	0%,
	60% {
		opacity: 0;
	}
	72%,
	100% {
		opacity: 1;
	}
}

@keyframes ulv-impacto {
	0% {
		opacity: 0;
		transform: scale(0.2);
		fill: #fff;
	}
	3% {
		opacity: 1;
		transform: scale(1.7);
		fill: #fff;
	}
	9% {
		transform: scale(1);
		fill: #35e0d8;
	}
	85% {
		opacity: 0.9;
	}
	100% {
		opacity: 0;
	}
}

@keyframes ulv-haz {
	to {
		stroke-dashoffset: -12;
	}
}

@keyframes ulv-estimulo {
	0%,
	100% {
		fill: rgba(233, 240, 255, 0.28);
		transform: scale(1);
	}
	4% {
		fill: #fff;
		transform: scale(2.4);
	}
	12%,
	80% {
		fill: #35e0d8;
		transform: scale(1.1);
	}
}

@keyframes ulv-parpadeo {
	50% {
		opacity: 0.35;
	}
}

@keyframes ulv-onda {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.04);
	}
}

@keyframes ulv-eje-k {
	0%,
	100% {
		transform: rotate(-20deg);
	}
	50% {
		transform: rotate(70deg);
	}
}

@keyframes ulv-traza {
	0% {
		stroke-dashoffset: 100;
	}
	70%,
	88% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
	100% {
		stroke-dashoffset: 0;
		opacity: 0;
	}
}

@keyframes ulv-cursor {
	0% {
		transform: translateX(0);
	}
	70%,
	100% {
		transform: translateX(260px);
		opacity: 0;
	}
}

@keyframes ulv-rexis {
	0%,
	10% {
		stroke-dashoffset: 100;
	}
	60%,
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes ulv-faco {
	0%,
	100% {
		transform: rotate(-6deg);
	}
	50% {
		transform: rotate(14deg);
	}
}

@keyframes ulv-particula {
	0% {
		opacity: 0;
		transform: translate(0, 0);
	}
	30% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate(14px, -6px);
	}
}

@keyframes ulv-mirada {
	0%,
	100% {
		transform: translate(0, 0);
	}
	20% {
		transform: translate(-9px, -3px);
	}
	45% {
		transform: translate(9px, -4px);
	}
	70% {
		transform: translate(4px, 4px);
	}
}

@keyframes ulv-objetivo {
	0%,
	100% {
		transform: translate(0, 0);
	}
	20% {
		transform: translate(-48px, 0);
	}
	45% {
		transform: translate(48px, -4px);
	}
	70% {
		transform: translate(22px, 10px);
	}
}

@keyframes ulv-oclusor {
	0%,
	30% {
		transform: translateX(-180px);
	}
	42%,
	58% {
		transform: translateX(0);
	}
	70%,
	100% {
		transform: translateX(-180px);
	}
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
	.ul-visor *,
	.ul-visor::after {
		animation: none !important;
	}
}