/*
 * Pantallas de acceso del portal mailroom (10-nov-2026): login.php, signup.php, forgot.php,
 * forgot_change.php, mfa.php y activar_2fa.php.
 *
 * Diseño: panel oscuro a la izquierda con el logo arriba y el formulario centrado; a la
 * derecha el video design/bg.mp4 (sin texto). En pantallas angostas sólo queda el panel.
 * El marco (panel + video) lo pinta acceso_marco.php; aquí van los estilos del marco y de
 * las piezas que usan las seis pantallas (.page, .col, .head, .field, .btn, .alert, .otp…),
 * con los mismos nombres de clase que ya usaban, para no tocar su JavaScript.
 */

/* La misma Avenir del resto del portal (mailroom/estilos, la que carga main.css); un solo
   peso, las negritas son sintéticas igual que en el portal. */
@font-face {
	font-family: "avenir";
	src: url("estilos/avenir.woff2") format("woff2"), url("estilos/avenir.woff") format("woff");
	font-style: normal;
	font-weight: 400;
}

:root {
	--panel: #181b28;
	--campo: #212538;
	--campo-borde: #2a2f45;
	--campo-borde-fuerte: #3a4160;
	--tinta: #f4f6fb;
	--tinta-suave: #c3c8d6;
	--tinta-tenue: #8a90a6;
	--acento: #5679cc;
	--acento-hover: #6487da;
	--acento-claro: #86a3e6;
	--lima: #b2d115;
	--peligro: #f07aa8;
	--peligro-fondo: rgba(240, 122, 168, 0.08);
	--peligro-borde: rgba(240, 122, 168, 0.35);
	--ambar: #d9b07a;
	--ambar-fondo: rgba(217, 176, 122, 0.08);
	--ambar-borde: rgba(217, 176, 122, 0.35);
	--ok: #8fd6a0;
	--ok-fondo: rgba(143, 214, 160, 0.08);
	--ok-borde: rgba(143, 214, 160, 0.35);
	--foco: 0 0 0 2px var(--panel), 0 0 0 4px var(--acento-claro);
	--fuente: "avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color-scheme: dark;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	background: #0d0f17;
	color: var(--tinta);
	font-family: var(--fuente);
	-webkit-font-smoothing: antialiased;
}

[hidden] {
	display: none !important;
}

/* ---- Marco: panel + video ---- */

.AccesoMarco {
	display: flex;
	min-height: 100%;
}

.AccesoPanel {
	position: relative;
	z-index: 1;
	display: flex;
	/* Panel y video mitad y mitad (10-nov-2026). */
	flex: 0 0 50%;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 100vh;
	padding: 44px 56px 40px;
	background: var(--panel);
	box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04), 24px 0 60px rgba(0, 0, 0, 0.35);
}

.AccesoLogo {
	display: inline-block;
	align-self: flex-start;
	border-radius: 6px;
}

.AccesoLogo img {
	display: block;
	width: 200px;
	height: auto;
	/* En sus colores originales (10-nov-2026, a pedido de Agustín). */
}

.AccesoLogo:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--foco);
}

.AccesoVideo {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	background: #0d0f17 url("design/bg_poster.jpg") center / cover no-repeat;
}

.AccesoVideo video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo negro al 40 % sobre el video. */
.AccesoVideo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

@media (max-width: 900px) {
	.AccesoVideo {
		display: none;
	}

	.AccesoPanel {
		flex: 1 1 auto;
		padding: 32px 24px;
	}
}

/* ---- Contenido del panel ---- */

/* El formulario va centrado en el panel (el logo se queda arriba a la izquierda). */
.page {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	padding: 40px 0;
}

.col {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 360px;
}

.head {
	display: grid;
	gap: 8px;
	margin-bottom: 28px;
	text-align: left;
}

.paso {
	margin: 0 0 2px;
	color: var(--acento-claro);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 16px;
	text-transform: uppercase;
}

h1 {
	margin: 0;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.lead {
	margin: 0;
	color: var(--tinta-suave);
	font-size: 14px;
	line-height: 1.55;
}

.lead b {
	color: var(--tinta);
	font-weight: 700;
}

/* Avisos */
.alert {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 22px;
	padding: 11px 14px;
	border: 1px solid;
	border-radius: 8px;
	font-size: 13px;
	line-height: 20px;
}

.alert svg {
	flex: none;
	width: 17px;
	height: 17px;
	margin-top: 1px;
}

.alert--danger {
	border-color: var(--peligro-borde);
	background: var(--peligro-fondo);
	color: var(--peligro);
}

.alert--warning {
	border-color: var(--ambar-borde);
	background: var(--ambar-fondo);
	color: var(--ambar);
}

.alert--ok {
	border-color: var(--ok-borde);
	background: var(--ok-fondo);
	color: var(--ok);
}

.alert b {
	color: inherit;
	font-weight: 700;
}

/* Campos */
form {
	display: grid;
	gap: 18px;
}

.field {
	display: grid;
	gap: 8px;
}

.field label,
.EtiquetaFila label {
	color: var(--tinta-suave);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.EtiquetaFila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.EtiquetaFila a {
	color: var(--acento-claro);
	font-size: 12px;
	text-decoration: none;
	border-radius: 4px;
}

.EtiquetaFila a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.box {
	position: relative;
}

.box svg {
	position: absolute;
	top: 50%;
	left: 14px;
	width: 18px;
	height: 18px;
	color: var(--tinta-tenue);
	transform: translateY(-50%);
	pointer-events: none;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"] {
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--campo-borde);
	border-radius: 6px;
	background: var(--campo);
	color: var(--tinta);
	font: 400 14px/20px var(--fuente);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.box input {
	padding-left: 42px;
}

input::placeholder {
	color: var(--tinta-tenue);
	opacity: 0.8;
}

input:focus {
	outline: 2px solid transparent;
	border-color: var(--acento-claro);
	box-shadow: 0 0 0 3px rgba(86, 121, 204, 0.25);
}

input[aria-invalid="true"],
input.error {
	border-color: var(--peligro);
}

.err-msg {
	color: var(--peligro);
	font-size: 12px;
	line-height: 18px;
}

/* Botones */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	padding: 0 20px;
	border: 1px solid var(--campo-borde-fuerte);
	border-radius: 6px;
	background: transparent;
	color: var(--tinta);
	font: 700 14px/20px var(--fuente);
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn svg {
	flex: none;
	width: 19px;
	height: 19px;
}

.btn:hover {
	border-color: #4a5275;
	background: rgba(255, 255, 255, 0.04);
}

.btn:active {
	transform: translateY(1px);
}

.btn:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--foco);
}

.btn:disabled {
	cursor: default;
	opacity: 0.7;
}

.btn--primary {
	border-color: transparent;
	background: var(--acento);
	color: #ffffff;
}

.btn--primary:hover {
	border-color: transparent;
	background: var(--acento-hover);
}

.btn.is-verified {
	border-color: transparent;
	background: var(--lima);
	color: #0f1700;
}

.status {
	min-height: 20px;
	margin: 10px 0 0;
	color: var(--tinta-tenue);
	font-size: 12.5px;
	line-height: 20px;
	text-align: left;
}

.status b {
	color: var(--acento-claro);
	font-weight: 700;
}

.status.ok {
	color: var(--lima);
}

.status.err {
	color: var(--peligro);
}

.or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0 18px;
	color: var(--tinta-tenue);
	font-size: 12px;
	line-height: 18px;
}

.or::before,
.or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.07);
}

.nota {
	margin: 12px 0 0;
	color: var(--tinta-tenue);
	font-size: 12.5px;
	line-height: 1.5;
}

/* Casillas del código (6 dígitos) */
.otp {
	display: flex;
	gap: 8px;
	justify-content: flex-start;
}

.otp-box {
	box-sizing: border-box;
	width: 46px;
	height: 54px;
	padding: 0;
	border: 1px solid var(--campo-borde-fuerte);
	border-radius: 6px;
	background: var(--campo);
	color: var(--tinta);
	font: 700 20px/20px var(--fuente);
	text-align: center;
	caret-color: var(--acento-claro);
}

.otp-box:focus {
	outline: 2px solid transparent;
	border-color: var(--acento-claro);
	box-shadow: 0 0 0 3px rgba(86, 121, 204, 0.25);
}

.otp-box:disabled {
	opacity: 0.5;
}

.otp.is-ok .otp-box {
	border-color: var(--lima);
}

.otp.is-error .otp-box {
	border-color: var(--peligro);
}

.otp.is-error {
	animation: shake 0.45s ease-in-out 1;
}

.field .otp + * {
	margin-top: 4px;
}

/* Ligas */
.links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-top: 26px;
	color: var(--tinta-tenue);
	font-size: 13px;
	line-height: 20px;
}

.links a {
	color: var(--acento-claro);
	text-decoration: none;
	border-radius: 4px;
	cursor: pointer;
}

.links a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.links a:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--foco);
}

/* Marca animada de huella / Face ID (mfa.php y activar_2fa.php). Más chica y a la izquierda. */
.mark {
	position: relative;
	width: 96px;
	height: 96px;
	margin: 0 0 22px;
}

.mark svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.bracket {
	transition: stroke 0.3s ease;
}

.scan {
	opacity: 0;
}

.halo {
	animation: breathe 3.2s ease-in-out infinite;
}

.badge {
	opacity: 0;
	transform: scale(0.4);
	transform-origin: 132px 132px;
	transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.badge circle {
	fill: var(--lima);
}

.badge path {
	stroke: #0f1700;
}

.mark.is-scanning .scan {
	opacity: 1;
	animation: scan 1.6s ease-in-out infinite alternate;
}

.mark.is-scanning .brackets {
	animation: lock 1.6s ease-in-out infinite alternate;
	transform-origin: 80px 80px;
}

.mark.is-verified .bracket {
	stroke: var(--lima);
}

.mark.is-verified .badge {
	opacity: 1;
	transform: scale(1);
}

.mark.is-error .bracket {
	stroke: var(--peligro);
}

.mark.is-error svg {
	animation: shake 0.45s ease-in-out 2;
}

/* @keyframes scan va en cada página: su punto de partida depende de la marca del cliente. */
@keyframes lock {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(0.94);
	}
}

@keyframes breathe {
	0%,
	100% {
		opacity: 0.55;
	}

	50% {
		opacity: 1;
	}
}

@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-6px);
	}

	75% {
		transform: translateX(6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.halo,
	.mark.is-scanning .scan,
	.mark.is-scanning .brackets,
	.mark.is-error svg,
	.otp.is-error {
		animation: none;
	}

	.btn,
	.badge {
		transition: none;
	}
}