/*
 * PDS - Animación de ingreso del campus (13/11/2026). Ver carga.js.
 * Todo cuelga de body.pds-login-carga (sólo en el login y mientras la animación esté prendida).
 * button.css de MasterStudy se imprime después de este archivo: las reglas que lo pisan
 * tienen que ser más específicas que las suyas.
 */

/* ---------- 1. Botón mientras se verifican los datos ---------- */

body.pds-login-carga .masterstudy-authorization a.masterstudy-button.masterstudy-button_loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	pointer-events: none;
	cursor: progress;
	filter: none;
	transform: none;
	background-image:
		linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .26) 50%, transparent 70%),
		linear-gradient(180deg, #3489ff 0%, var(--pds-acento) 100%);
	background-size: 250% 100%, 100% 100%;
	background-repeat: no-repeat;
	animation: pds-carga-brillo 1.6s linear infinite;
}

/* El "pulso" de MasterStudy pasa a ser un aro que gira... */
body.pds-login-carga .masterstudy-authorization a.masterstudy-button.masterstudy-button_loading::before {
	content: "" !important;
	position: static;
	flex: none;
	display: block;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 2.5px solid rgba(255, 255, 255, .32);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 1;
	transform: none;
	animation: pds-carga-gira .7s linear infinite;
}

/* ...y el texto sigue a la vista, diciendo qué está pasando. */
body.pds-login-carga .masterstudy-authorization a.masterstudy-button.masterstudy-button_loading::after {
	content: "Procesando\2026";
	position: static;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	opacity: 1;
	transform: none;
	animation: none;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	color: #fff;
	white-space: nowrap;
}

body.pds-login-carga .masterstudy-authorization a[data-id="masterstudy-authorization-login-button"].masterstudy-button_loading::after {
	content: "Verificando tus datos\2026";
}

body.pds-login-carga .masterstudy-authorization a[data-id="masterstudy-authorization-restore-button"].masterstudy-button_loading::after {
	content: "Enviando el enlace\2026";
}

body.pds-login-carga .masterstudy-authorization a[data-id="masterstudy-authorization-new-pass-button"].masterstudy-button_loading::after {
	content: "Guardando\2026";
}

body.pds-login-carga .masterstudy-authorization a[data-id="masterstudy-authorization-register-button"].masterstudy-button_loading::after {
	content: "Creando tu cuenta\2026";
}

/* Mientras tanto los campos quedan quietos (que no se edite lo que ya se mandó). */
body.pds-login-carga .masterstudy-authorization:has(a.masterstudy-button_loading) .masterstudy-authorization__form-input,
html.pds-carga-ok body.pds-login-carga .masterstudy-authorization .masterstudy-authorization__form-input {
	pointer-events: none;
	opacity: .7;
}

/* ---------- 3. Datos incorrectos: el campo con error se sacude una vez ---------- */

@media (prefers-reduced-motion: no-preference) {
	body.pds-login-carga .masterstudy-authorization__form .masterstudy-authorization__form-field_has-error {
		animation: pds-carga-sacude .45s cubic-bezier(.36, .07, .19, .97) .4s both; /* después de que se cierra la pantalla */
	}
}

/* ---------- 4. Pantalla "Ingresando a tu campus" ---------- */

html.pds-carga-abierta,
html.pds-carga-abierta body {
	overflow: hidden;
}

.pds-carga {
	--pds-x: 50%;
	--pds-y: 50%;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	place-items: center;
	padding: 32px 20px;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-align: center;
	background:
		radial-gradient(900px 600px at 100% 110%, rgba(34, 122, 255, .55), transparent 60%),
		radial-gradient(600px 420px at 0% -10%, rgba(255, 200, 61, .13), transparent 60%),
		linear-gradient(155deg, #0a1733 0%, #0d2552 52%, #123a85 100%);
	clip-path: circle(0 at var(--pds-x) var(--pds-y));
	transition: clip-path .5s cubic-bezier(.7, 0, .3, 1); /* al cerrarse (datos mal) */
	-webkit-tap-highlight-color: transparent;
}

.pds-carga[hidden] {
	display: none;
}

.pds-carga.is-visible {
	clip-path: circle(150vmax at var(--pds-x) var(--pds-y));
	transition-duration: .75s;
}

/* Bajada: una mientras verifica y otra cuando los datos dieron bien. */
.pds-carga__si-ok {
	display: none;
}

.pds-carga.is-ok .pds-carga__si-ok {
	display: inline;
}

.pds-carga.is-ok .pds-carga__si-espera {
	display: none;
}

/* Mismo punteado y aros del panel azul del login. */
.pds-carga::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.5px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(closest-side at 50% 45%, #000 0%, transparent 100%);
	mask-image: radial-gradient(closest-side at 50% 45%, #000 0%, transparent 100%);
}

.pds-carga::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: 560px;
	height: 560px;
	margin: -330px 0 0 -280px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .07);
	box-shadow: 0 0 0 80px rgba(255, 255, 255, .022), 0 0 0 160px rgba(255, 255, 255, .014);
}

/* Barra finita arriba, de las que "avanzan" sin porcentaje. */
.pds-carga__barra {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	overflow: hidden;
	background: rgba(255, 255, 255, .08);
}

.pds-carga__barra::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40%;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(90deg, rgba(255, 200, 61, 0), #ffc83d 60%, #fff);
	box-shadow: 0 0 12px rgba(255, 200, 61, .6);
	animation: pds-carga-barra 1.5s cubic-bezier(.4, 0, .2, 1) infinite;
}

.pds-carga__caja {
	width: 100%;
	max-width: 400px;
}

.pds-carga__bajada,
.pds-carga__demora,
.pds-carga__demo {
	text-wrap: balance;
}

/* Logo con un aro que gira y un halo que respira. */
.pds-carga__logo {
	position: relative;
	width: 92px;
	height: 92px;
	margin: 0 auto 30px;
}

.pds-carga__anillo {
	position: absolute;
	inset: -12px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(255, 200, 61, 0) 0deg, rgba(255, 200, 61, .15) 90deg, #ffc83d 290deg, #fff 360deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
	animation: pds-carga-gira 1.1s linear infinite;
}

.pds-carga__anillo::after {
	/* la "cabeza" del aro: un punto que brilla */
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 3px;
	height: 3px;
	margin-left: -1.5px;
	border-radius: 50%;
	background: #fff;
}

.pds-carga__ficha {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 14px 34px rgba(3, 10, 30, .45);
	animation: pds-carga-halo 2s ease-out infinite;
}

.pds-carga__ficha img {
	display: block;
	width: 52px;
	height: 52px;
	object-fit: contain;
}

.pds-carga__titulo {
	margin: 0 0 8px;
	font-size: clamp(22px, 5.6vw, 28px);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #fff;
}

.pds-carga__bajada {
	margin: 0 0 28px;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .7);
}

/* Los 3 pasos */
.pds-carga__pasos {
	display: inline-flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 18px 24px 18px 20px;
	list-style: none;
	text-align: left;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 16px;
	background: rgba(255, 255, 255, .05);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.pds-carga__pasos li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: rgba(255, 255, 255, .45);
	transition: color .3s;
}

.pds-carga__pasos li::before {
	display: none;
}

.pds-carga__pasos li.is-activo {
	color: #fff;
	font-weight: 600;
}

.pds-carga__pasos li.is-hecho {
	color: rgba(255, 255, 255, .82);
}

.pds-carga__marca {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .2);
	transition: border-color .3s, background-color .3s;
}

.pds-carga__pasos li.is-activo .pds-carga__marca {
	border-color: rgba(255, 255, 255, .18);
	border-top-color: #ffc83d;
	animation: pds-carga-gira .75s linear infinite;
}

.pds-carga__pasos li.is-hecho .pds-carga__marca {
	border-color: #ffc83d;
	background: #ffc83d;
	animation: pds-carga-pop .4s cubic-bezier(.3, 1.6, .5, 1) both;
}

.pds-carga__pasos li.is-hecho .pds-carga__marca::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2.5px;
	width: 5px;
	height: 10px;
	border: solid #0d1b36;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.pds-carga__demora {
	max-height: 0;
	margin: 0 auto;
	overflow: hidden;
	opacity: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .7);
	transition: max-height .4s, margin .4s, opacity .4s;
}

.pds-carga.is-demorada .pds-carga__demora {
	max-height: 60px;
	margin-top: 22px;
	opacity: 1;
}

.pds-carga__demo {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 18px;
	margin: 0;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .5);
}

/* Entrada escalonada del contenido una vez que el círculo cubre la pantalla. */
@media (prefers-reduced-motion: no-preference) {
	.pds-carga.is-visible .pds-carga__logo,
	.pds-carga.is-visible .pds-carga__titulo,
	.pds-carga.is-visible .pds-carga__bajada,
	.pds-carga.is-visible .pds-carga__pasos {
		animation: pds-carga-sube .6s cubic-bezier(.2, .7, .2, 1) both;
	}
	.pds-carga.is-visible .pds-carga__logo    { animation-delay: .22s; }
	.pds-carga.is-visible .pds-carga__titulo  { animation-delay: .3s; }
	.pds-carga.is-visible .pds-carga__bajada  { animation-delay: .36s; }
	.pds-carga.is-visible .pds-carga__pasos   { animation-delay: .44s; }
}

/* Sin animaciones de más: la pantalla aparece con un fundido y sólo giran los indicadores. */
@media (prefers-reduced-motion: reduce) {
	.pds-carga {
		clip-path: none;
		opacity: 0;
		transition: opacity .2s;
	}
	.pds-carga.is-visible {
		clip-path: none;
		opacity: 1;
	}
	.pds-carga__ficha,
	html.pds-carga-ok body.pds-login-carga .masterstudy-authorization a[data-id="masterstudy-authorization-login-button"],
	.pds-carga__pasos li.is-hecho .pds-carga__marca {
		animation: none;
	}
}

@media (max-height: 560px) {
	.pds-carga__logo {
		width: 72px;
		height: 72px;
		margin-bottom: 20px;
	}
	.pds-carga__ficha img {
		width: 42px;
		height: 42px;
	}
	.pds-carga__bajada {
		margin-bottom: 18px;
	}
}

@keyframes pds-carga-gira {
	to { transform: rotate(360deg); }
}

@keyframes pds-carga-brillo {
	from { background-position: 140% 0, 0 0; }
	to   { background-position: -140% 0, 0 0; }
}

@keyframes pds-carga-pop {
	0%   { transform: scale(.85); }
	100% { transform: scale(1); }
}

@keyframes pds-carga-sube {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes pds-carga-halo {
	0%   { box-shadow: 0 14px 34px rgba(3, 10, 30, .45), 0 0 0 0 rgba(255, 200, 61, .38); }
	70%  { box-shadow: 0 14px 34px rgba(3, 10, 30, .45), 0 0 0 22px rgba(255, 200, 61, 0); }
	100% { box-shadow: 0 14px 34px rgba(3, 10, 30, .45), 0 0 0 0 rgba(255, 200, 61, 0); }
}

@keyframes pds-carga-barra {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(260%); }
}

@keyframes pds-carga-sacude {
	10%, 90%      { transform: translateX(-1px); }
	20%, 80%      { transform: translateX(3px); }
	30%, 50%, 70% { transform: translateX(-5px); }
	40%, 60%      { transform: translateX(5px); }
}