/* ============================================================
   Páginas de acceso (login, recuperar contraseña, nuevo usuario)
   Foto de oficina a pantalla completa + tarjeta centrada.
   ============================================================ */
:root{
	--navy:#1b1b82;
	--navy-deep:#12124f;
	--teal:#1fc7b6;
	--teal-dark:#159e90;
	--ink:#1b2133;
	--muted:#6b7488;
	--line:#dce0ec;
	--card:#ffffff;
	--danger:#d6324a;
	--ok:#1f9d77;
	--font:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}

/* --- Fondo a pantalla completa --- */
.auth-page{
	position:relative;min-height:100vh;min-height:100dvh;
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	padding:40px 20px;overflow:hidden;
	background:var(--navy-deep) url('/img/oficina.jpg') center/cover no-repeat fixed;
}
.auth-page::before{
	content:"";position:absolute;inset:0;
	background:linear-gradient(118deg,
		rgba(11,11,52,.94) 0%,rgba(17,17,79,.74) 44%,rgba(24,32,78,.46) 100%);
}
.auth-page::after{
	content:"";position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(120% 80% at 50% 0%,transparent 55%,rgba(8,8,38,.55) 100%);
}

/* --- Tarjeta --- */
.auth-card{
	position:relative;z-index:2;width:100%;max-width:444px;
	background:var(--card);border-radius:20px;padding:44px 44px 36px;
	box-shadow:0 36px 70px -22px rgba(6,8,40,.62);
	border-top:4px solid var(--teal);
	animation:rise .7s cubic-bezier(.2,.75,.2,1) both;
}
.auth-logo{display:block;width:206px;max-width:72%;height:auto;margin:0 auto 26px;
	animation:fade .6s ease .12s both}
.auth-eyebrow{
	font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
	color:var(--teal-dark);text-align:center;animation:fade .6s ease .2s both;
}
.auth-card h1{
	font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--navy);
	text-align:center;margin:7px 0 6px;animation:fade .6s ease .27s both;
}
.auth-sub{
	font-size:13.5px;color:var(--muted);text-align:center;line-height:1.5;
	margin-bottom:24px;animation:fade .6s ease .33s both;
}

/* --- Avisos --- */
.auth-alert{
	display:flex;gap:9px;align-items:flex-start;border-radius:11px;
	padding:11px 13px;margin-bottom:18px;font-size:13px;line-height:1.45;
	animation:fade .4s ease both;
}
.auth-alert svg{flex:none;margin-top:1px}
.auth-alert.error{background:rgba(214,50,74,.08);border:1px solid rgba(214,50,74,.28);color:var(--danger)}
.auth-alert.info{background:rgba(31,199,182,.10);border:1px solid rgba(31,199,182,.30);color:var(--teal-dark)}

/* --- Indicador de pasos --- */
.auth-steps{
	display:flex;align-items:center;gap:6px;margin-bottom:22px;
	animation:fade .6s ease .36s both;
}
.auth-steps .step{
	flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;
}
.auth-steps .dot{
	width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
	font-size:13px;font-weight:800;background:#eef0f6;color:var(--muted);
	border:2px solid #eef0f6;transition:.2s;
}
.auth-steps .step.active .dot{background:var(--navy);border-color:var(--navy);color:#fff}
.auth-steps .step.done .dot{background:var(--teal);border-color:var(--teal);color:#06201d}
.auth-steps .step .lbl{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.auth-steps .step.active .lbl{color:var(--navy)}
.auth-steps .bar{height:2px;flex:1;background:#eef0f6;margin-top:-19px;border-radius:2px}
.auth-steps .bar.done{background:var(--teal)}

/* --- Campos --- */
.field{margin-bottom:16px;animation:fade .55s ease both}
.field:nth-of-type(1){animation-delay:.42s}
.field:nth-of-type(2){animation-delay:.48s}
.field:nth-of-type(3){animation-delay:.54s}
.field:nth-of-type(4){animation-delay:.60s}
.field:nth-of-type(5){animation-delay:.66s}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.input-wrap{position:relative}
.field input{
	width:100%;font-family:inherit;font-size:14.5px;color:var(--ink);
	padding:12px 15px;border:1.5px solid var(--line);border-radius:11px;
	background:#fbfcfe;transition:border-color .16s,box-shadow .16s,background .16s;
}
.field input::placeholder{color:#aab0c0}
.field input:focus{
	outline:none;border-color:var(--teal);background:#fff;
	box-shadow:0 0 0 4px rgba(31,199,182,.16);
}
.field.is-dim{opacity:.4;pointer-events:none}
.field input[readonly]{background:#f1f2f6;color:var(--muted);cursor:not-allowed}
.field .input-wrap input{padding-right:46px}
.toggle-pass{
	position:absolute;top:50%;right:6px;transform:translateY(-50%);
	width:36px;height:36px;border:0;background:transparent;cursor:pointer;
	display:flex;align-items:center;justify-content:center;color:var(--muted);
	border-radius:8px;transition:color .15s,background .15s;
}
.toggle-pass:hover{color:var(--navy);background:#f0f2f7}
.field-hint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.4}

/* --- Botones --- */
.btn{
	font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
	border:0;border-radius:11px;padding:13px 20px;letter-spacing:.01em;
	transition:transform .14s,box-shadow .2s,background .2s,color .2s;
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn-primary{
	color:#fff;background:var(--navy);
	box-shadow:0 10px 22px -8px rgba(27,27,130,.55);
}
.btn-primary:hover{background:var(--navy-deep);transform:translateY(-1px)}
.btn-ghost{
	color:var(--navy);background:#fff;border:1.5px solid var(--line);
}
.btn-ghost:hover{border-color:var(--navy);background:#f7f8fc}
.btn-block{width:100%;margin-top:6px}
.btn-row{display:flex;gap:11px;margin-top:8px;animation:fade .6s ease .7s both}
.btn-row .btn{flex:1}

/* --- Enlaces y pie --- */
.auth-links{
	display:flex;justify-content:center;gap:18px;flex-wrap:wrap;
	margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
	animation:fade .6s ease .76s both;
}
.auth-links a{font-size:13px;font-weight:600;color:var(--navy);text-decoration:none;transition:color .15s}
.auth-links a:hover{color:var(--teal-dark)}
.auth-legal{
	position:relative;z-index:2;margin-top:24px;
	display:flex;gap:7px 16px;flex-wrap:wrap;justify-content:center;
	animation:fade .8s ease .85s both;
}
.auth-legal a{font-size:12px;color:rgba(255,255,255,.72);text-decoration:none;transition:color .15s}
.auth-legal a:hover{color:#fff}
.auth-legal span{color:rgba(255,255,255,.32);font-size:12px}

@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (max-width:480px){
	.auth-card{padding:36px 26px 30px}
	.auth-card h1{font-size:23px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}