/*
 * PDS - Pantalla de ingreso del campus (mu-plugins/pds-login-campus.php).
 * Todo cuelga de body.pds-login, que solo se agrega en /cuenta-de-usuario/ sin sesión.
 * authorization.css de MasterStudy se imprime DESPUÉS de este archivo (en el footer),
 * así que cada regla que lo pisa tiene que ser más específica que la original.
 */

body.pds-login {
	--pds-acento: var(--accent-100, #227aff);
	--pds-amarillo: #ffc83d;
	--pds-texto: #0d1b36;
	--pds-gris: #5d6b82;
	--pds-gris-claro: #8a97ab;
	--pds-borde: #dde3ec;
	--pds-campo: #f6f8fb;
	background: #fff;
	font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body.pds-login #header,
body.pds-login #header-mobile,
body.pds-login .stm_lms_breadcrumbs {
	display: none !important;
}

body.pds-login #main > .container {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ---------- Grilla: marca | formulario ---------- */

body.pds-login .post_type_exist {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	grid-template-rows: 1fr auto auto auto 1fr auto;
	min-height: 100vh;
	min-height: 100dvh;
}

body.pds-login .post_type_exist::before,
body.pds-login .post_type_exist::after {
	display: none;
}

body.pds-login .pds-login-marca        { grid-column: 1; grid-row: 1 / -1; }
body.pds-login .pds-login-intro        { grid-column: 2; grid-row: 2; }
body.pds-login .masterstudy__login-page { grid-column: 2; grid-row: 3; }
body.pds-login .pds-login-ayuda        { grid-column: 2; grid-row: 4; }
body.pds-login .pds-login-pie          { grid-column: 2; grid-row: 6; }

body.pds-login .pds-login-intro,
body.pds-login .masterstudy__login-page,
body.pds-login .pds-login-ayuda {
	justify-self: center;
	width: calc(100% - 48px);
	max-width: 410px;
}

/* ---------- Panel de marca ---------- */

body.pds-login .pds-login-marca {
	position: relative;
	z-index: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 40px clamp(32px, 5vw, 80px) 72px;
	color: #fff;
	background:
		radial-gradient(900px 600px at 105% 110%, rgba(34, 122, 255, .55), transparent 60%),
		radial-gradient(600px 420px at -10% -15%, rgba(255, 200, 61, .13), transparent 60%),
		linear-gradient(155deg, #0a1733 0%, #0d2552 52%, #123a85 100%);
}

body.pds-login .pds-login-marca::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.5px);
	background-size: 24px 24px;
	-webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 60%);
	mask-image: linear-gradient(160deg, #000 0%, transparent 60%);
}

body.pds-login .pds-login-marca::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -170px;
	bottom: -190px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .09);
	box-shadow: 0 0 0 70px rgba(255, 255, 255, .025), 0 0 0 140px rgba(255, 255, 255, .018);
}

body.pds-login .pds-login-marca__top {
	display: flex;
	align-items: center;
	gap: 12px;
}

body.pds-login .pds-login-logo {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(3, 10, 30, .35);
}

body.pds-login .pds-login-logo img {
	display: block;
	width: 34px;
	height: 34px;
}

body.pds-login .pds-login-nombre {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #fff;
}

body.pds-login .pds-login-marca__cuerpo {
	margin: auto 0;
	max-width: 520px;
}

body.pds-login .pds-login-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 14px 7px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .07);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .86);
}

body.pds-login .pds-login-chip::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pds-amarillo);
	box-shadow: 0 0 0 4px rgba(255, 200, 61, .2);
}

body.pds-login .pds-login-titular {
	margin: 22px 0 18px;
	font-size: clamp(34px, 3.3vw, 50px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -.028em;
	color: #fff;
}

body.pds-login .pds-login-titular span {
	color: var(--pds-amarillo);
}

body.pds-login .pds-login-bajada {
	max-width: 440px;
	margin: 0 0 38px;
	font-size: 17px;
	line-height: 1.6;
	font-weight: 400;
	color: rgba(255, 255, 255, .72);
}

body.pds-login .pds-login-lista {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pds-login .pds-login-lista li {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 500;
	color: rgba(255, 255, 255, .92);
}

body.pds-login .pds-login-lista li::before {
	display: none;
}

body.pds-login .pds-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .07);
	color: var(--pds-amarillo);
}

body.pds-login .pds-ico svg {
	width: 19px;
	height: 19px;
}

/* ---------- Columna del formulario ---------- */

body.pds-login .pds-login-intro {
	margin-bottom: 30px;
}

body.pds-login .pds-login-intro h1 {
	margin: 0 0 10px;
	padding: 0;
	font-family: inherit;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--pds-texto);
}

body.pds-login .pds-login-intro p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--pds-gris);
}

body.pds-login .masterstudy__login-page {
	display: block;
	padding: 0;
}

body.pds-login .masterstudy__login-page .masterstudy__login-page-form {
	max-width: none;
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__wrapper,
body.pds-login .masterstudy-authorization .masterstudy-authorization__restore,
body.pds-login .masterstudy-authorization .masterstudy-authorization__switch {
	padding: 0;
}

/* El título "Ingresar" del plugin lo reemplaza la intro de arriba. */
body.pds-login .masterstudy-authorization_login .masterstudy-authorization__header,
body.pds-login .masterstudy-authorization_new-pass .masterstudy-authorization__header {
	display: none;
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__restore-header {
	align-items: center;
	margin-bottom: 18px;
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__restore-header-title {
	font-size: 22px;
	letter-spacing: -.01em;
	color: var(--pds-texto);
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__form-field {
	margin-bottom: 16px;
}

body.pds-login .masterstudy-authorization__form input.masterstudy-authorization__form-input {
	height: 52px;
	padding: 0 18px;
	border: 1px solid var(--pds-borde);
	border-radius: 12px;
	background: var(--pds-campo);
	font-family: inherit;
	font-size: 15px;
	color: var(--pds-texto);
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}

body.pds-login .masterstudy-authorization__form input.masterstudy-authorization__form-input::placeholder {
	font-size: 15px;
	color: var(--pds-gris-claro);
}

body.pds-login .masterstudy-authorization__form input.masterstudy-authorization__form-input:hover {
	border-color: #c8d1de;
}

body.pds-login .masterstudy-authorization__form input.masterstudy-authorization__form-input:focus {
	border-color: var(--pds-acento);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(34, 122, 255, .14);
}

body.pds-login .masterstudy-authorization__form .masterstudy-authorization__form-field_has-error input.masterstudy-authorization__form-input {
	border-color: var(--danger-100, #ff3945);
}

body.pds-login .masterstudy-authorization__form .masterstudy-authorization__form-field_has-error input.masterstudy-authorization__form-input:focus {
	box-shadow: 0 0 0 4px rgba(255, 57, 69, .12);
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__form-field-error {
	font-size: 13px;
	line-height: 1.45;
}

/* Íconos dentro de los campos. Van en el ::before del contenedor y no como
   fondo del input porque el autocompletado de Chrome borra el background-image. */
body.pds-login #masterstudy-authorization-form-login input.masterstudy-authorization__form-input,
body.pds-login #masterstudy-authorization-form-restore input.masterstudy-authorization__form-input,
body.pds-login #masterstudy-authorization-form-new-pass input.masterstudy-authorization__form-input {
	padding-left: 48px;
}

body.pds-login #masterstudy-authorization-form-login input.masterstudy-authorization__form-input.masterstudy-authorization__form-input_pass,
body.pds-login #masterstudy-authorization-form-new-pass input.masterstudy-authorization__form-input.masterstudy-authorization__form-input_pass {
	padding-right: 52px;
}

body.pds-login #masterstudy-authorization-form-login .masterstudy-authorization__form-field::before,
body.pds-login #masterstudy-authorization-form-restore .masterstudy-authorization__form-field::before,
body.pds-login #masterstudy-authorization-form-new-pass .masterstudy-authorization__form-field::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 16px;
	left: 16px;
	width: 20px;
	height: 20px;
	pointer-events: none;
	background: no-repeat center / 20px 20px;
}

/* usuario */
body.pds-login #masterstudy-authorization-form-login .masterstudy-authorization__form-field:nth-child(1)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a97ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
body.pds-login #masterstudy-authorization-form-login .masterstudy-authorization__form-field:nth-child(1):focus-within::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23227aff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* candado */
body.pds-login #masterstudy-authorization-form-login .masterstudy-authorization__form-field:nth-child(2)::before,
body.pds-login #masterstudy-authorization-form-new-pass .masterstudy-authorization__form-field::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a97ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
body.pds-login #masterstudy-authorization-form-login .masterstudy-authorization__form-field:nth-child(2):focus-within::before,
body.pds-login #masterstudy-authorization-form-new-pass .masterstudy-authorization__form-field:focus-within::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23227aff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* sobre */
body.pds-login #masterstudy-authorization-form-restore .masterstudy-authorization__form-field::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a97ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}
body.pds-login #masterstudy-authorization-form-restore .masterstudy-authorization__form-field:focus-within::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23227aff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__form-show-pass {
	width: 52px;
	height: 52px;
}

/* Recordarme */
body.pds-login .masterstudy-authorization .masterstudy-authorization__checkbox-wrapper {
	width: 20px;
	height: 20px;
	border: 1.5px solid #c8d1de;
	border-radius: 6px;
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__checkbox-wrapper.masterstudy-authorization__checkbox-wrapper_checked {
	border-color: var(--pds-acento);
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__checkbox-title {
	padding-left: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--pds-gris);
}

/* Botones */
body.pds-login .masterstudy-authorization .masterstudy-authorization__actions {
	flex-wrap: wrap;
	row-gap: 22px;
	margin-top: 4px;
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__actions-remember {
	order: 1;
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__actions a.masterstudy-button {
	order: 2;
	flex: 1 0 100%;
	height: 52px;
	padding: 0 24px;
	border-radius: 12px;
	background: linear-gradient(180deg, #3489ff 0%, var(--pds-acento) 100%);
	box-shadow: 0 10px 22px -10px rgba(34, 122, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .18);
	transition: transform .15s, box-shadow .2s, filter .2s;
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__actions a.masterstudy-button:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
	box-shadow: 0 14px 26px -10px rgba(34, 122, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .18);
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__actions a.masterstudy-button:active {
	transform: translateY(0);
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__actions a.masterstudy-button .masterstudy-button__title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
}

/* "¿Olvidaste la contraseña?" */
body.pds-login .masterstudy-authorization .masterstudy-authorization__switch {
	margin-top: 20px;
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__switch-wrapper {
	justify-content: center;
	padding: 0;
	border-top: 0;
}

body.pds-login .masterstudy-authorization_login .masterstudy-authorization__switch-account {
	display: none;
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__switch-lost-pass {
	max-width: none;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	color: var(--pds-acento);
}

body.pds-login .masterstudy-authorization .masterstudy-authorization__switch-lost-pass:hover {
	color: #0f5fd6;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Ayuda y pie */
body.pds-login .pds-login-ayuda {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 32px;
	padding: 14px 16px;
	border: 1px solid #e6ebf3;
	border-radius: 12px;
	background: #f5f7fb;
}

body.pds-login .pds-login-ayuda svg {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--pds-acento);
}

body.pds-login .pds-login-ayuda p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--pds-gris);
}

body.pds-login .pds-login-ayuda strong {
	font-weight: 600;
	color: var(--pds-texto);
}

body.pds-login .pds-login-pie {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	justify-self: center;
	gap: 6px 22px;
	padding: 28px 24px;
	font-size: 13px;
	color: var(--pds-gris-claro);
}

body.pds-login .pds-login-pie a {
	font-weight: 500;
	text-decoration: none;
	color: var(--pds-gris);
}

body.pds-login .pds-login-pie a:hover {
	color: var(--pds-acento);
}

/* Si el alumno pasa a "Restablecer la contraseña", la intro de ingreso sobra. */
body.pds-login .post_type_exist:has(.masterstudy-authorization__restore_show) .pds-login-intro,
body.pds-login .post_type_exist:has(.masterstudy-authorization_register) .pds-login-intro {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	body.pds-login .pds-login-intro,
	body.pds-login .masterstudy__login-page,
	body.pds-login .pds-login-ayuda {
		animation: pds-login-sube .55s cubic-bezier(.2, .7, .2, 1) both;
	}
	body.pds-login .masterstudy__login-page { animation-delay: .06s; }
	body.pds-login .pds-login-ayuda { animation-delay: .12s; }
}

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

/* ---------- Celular y tablet: la marca pasa arriba ---------- */

@media (max-width: 991px) {
	body.pds-login .post_type_exist {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto auto 1fr auto;
	}

	body.pds-login .pds-login-marca        { grid-column: 1; grid-row: 1; }
	body.pds-login .pds-login-intro        { grid-column: 1; grid-row: 2; }
	body.pds-login .masterstudy__login-page { grid-column: 1; grid-row: 3; }
	body.pds-login .pds-login-ayuda        { grid-column: 1; grid-row: 4; }
	body.pds-login .pds-login-pie          { grid-column: 1; grid-row: 6; }

	/* Mismo ancho que el formulario (410 px centrado), así en tablet la franja y el formulario quedan alineados. */
	body.pds-login .pds-login-marca {
		gap: 26px;
		padding: 22px max(24px, calc(50% - 205px)) 58px;
	}

	body.pds-login .pds-login-marca::after {
		right: -140px;
		bottom: -210px;
		width: 340px;
		height: 340px;
	}

	body.pds-login .pds-login-logo {
		width: 42px;
		height: 42px;
		border-radius: 12px;
	}

	body.pds-login .pds-login-logo img {
		width: 30px;
		height: 30px;
	}

	body.pds-login .pds-login-nombre {
		font-size: 17px;
	}

	body.pds-login .pds-login-marca__cuerpo {
		margin: 0;
	}

	body.pds-login .pds-login-chip,
	body.pds-login .pds-login-lista {
		display: none;
	}

	body.pds-login .pds-login-titular {
		margin: 0 0 8px;
		font-size: 27px;
	}

	body.pds-login .pds-login-bajada {
		margin: 0;
		font-size: 14.5px;
	}

	/* La intro es la "hoja" blanca que se monta sobre la franja azul. */
	body.pds-login .pds-login-intro {
		position: relative;
		z-index: 1;
		width: 100%;
		max-width: none;
		margin-top: -26px;
		margin-bottom: 26px;
		padding: 30px max(24px, calc(50% - 205px)) 0;
		border-radius: 24px 24px 0 0;
		background: #fff;
	}

	body.pds-login .pds-login-intro h1 {
		font-size: 25px;
	}

	body.pds-login .pds-login-intro p {
		font-size: 14.5px;
	}

	body.pds-login .pds-login-ayuda {
		margin-top: 28px;
	}

	/* Sin la intro (restablecer contraseña) el formulario queda pegado a la franja. */
	body.pds-login .post_type_exist:has(.masterstudy-authorization__restore_show) .masterstudy__login-page {
		margin-top: 30px;
	}

	/* Lugar para la burbuja del chatbot, que va fija abajo a la izquierda. */
	body.pds-login .pds-login-pie {
		padding-bottom: 96px;
	}

	/* Burbuja del chatbot (AI Engine) más chica y más al borde, para que no tape
	   "Recordarme" ni "Ingresar". Solo cerrada: abierta ocupa toda la pantalla. */
	body.pds-login .mwai-chatbot.mwai-bubble:not(.mwai-open) {
		bottom: 14px !important;
		left: 14px !important;
	}

	body.pds-login .mwai-chatbot.mwai-bubble:not(.mwai-open) .mwai-trigger,
	body.pds-login .mwai-chatbot.mwai-bubble:not(.mwai-open) .mwai-trigger .mwai-icon-container {
		width: 46px !important;
		height: 46px !important;
	}
}

/* Celulares bajos (iPhone SE y parecidos): franja más corta para que el botón entre sin scroll. */
@media (max-width: 991px) and (max-height: 740px) {
	body.pds-login .pds-login-marca {
		gap: 18px;
		padding-top: 18px;
		padding-bottom: 50px;
	}

	body.pds-login .pds-login-titular {
		margin: 0;
		font-size: 24px;
	}

	body.pds-login .pds-login-bajada {
		display: none;
	}
}