@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/*****************************************
CSS EXCLUSIVO DE recovery.php + recovery_exito.php
(mismo módulo: recuperación de contraseña)
Independiente de index.php/index_m.php/registro,
ver regla de independencia JS/CSS por módulo.

Escrito DESKTOP-FIRST a propósito: esta pantalla
está atada al login y NO se permite desde celular
(a diferencia del registro), ver
feedback-gestor-solo-pc-no-movil.
******************************************/

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{

	font-family:'Poppins', sans-serif;

	min-height:100vh;
	overflow:hidden;

	display:flex;
	align-items:center;
	justify-content:center;

	position:relative;

	/* Fondo muy claro ("casi blanco"), mismo criterio del login
	pero SIN imagen (2026-07-05): tanto los blobs de textura como
	el degradado base se aclaran mezclando cada color de la
	paleta con blanco (color-mix anidado) antes de aplicarlos, así
	el fondo se ve mayormente blanco conservando el matiz de cada
	color de config/paleta.php (mismo criterio en registro.css/
	cambiar_pass.css/index_m.css). */

	background:
	radial-gradient(circle at 12% 18%, color-mix(in srgb, color-mix(in srgb, var(--color-fondo-degradado-inicio) 15%, white) 60%, transparent) 0%, transparent 42%),
	radial-gradient(circle at 88% 12%, color-mix(in srgb, color-mix(in srgb, var(--color-boton-fondo) 15%, white) 55%, transparent) 0%, transparent 38%),
	radial-gradient(circle at 85% 88%, color-mix(in srgb, color-mix(in srgb, var(--color-fondo-degradado-fin) 15%, white) 60%, transparent) 0%, transparent 42%),
	radial-gradient(circle at 15% 85%, color-mix(in srgb, color-mix(in srgb, var(--color-fondo-degradado-medio) 15%, white) 55%, transparent) 0%, transparent 38%),
	linear-gradient(
		135deg,
		color-mix(in srgb, var(--color-fondo-degradado-inicio) 15%, white) 0%,
		color-mix(in srgb, var(--color-fondo-degradado-medio) 15%, white) 55%,
		color-mix(in srgb, var(--color-fondo-degradado-fin) 15%, white) 100%
	);
}

.background-overlay{

	position:absolute;
	inset:0;

	background:
	radial-gradient(
		circle at 50% 42%,
		rgba(255,255,255,0.22) 0%,
		rgba(255,255,255,0.05) 32%,
		rgba(0,0,0,0) 55%,
		rgba(0,0,0,0.22) 100%
	);
}

.recovery-wrapper{

	position:relative;
	z-index:2;

	width:100%;

	display:flex;
	flex-direction:column;
	align-items:center;

	padding:20px;
}

.recovery-card{

	width:100%;
	max-width:440px;

	padding:45px 40px;

	border-radius:28px;

	background:rgba(255,255,255,0.9);

	border:1px solid rgba(255,255,255,0.55);

	backdrop-filter:blur(18px);

	box-shadow:0 15px 45px rgba(0,0,0,.12);

	text-align:center;

	animation:fadeIn .7s ease;
}

.company-logo img{
	width:200px;
	margin-bottom:16px;
}

.titulo-plataforma{

	margin:-6px 0 16px 0;

	font-size:11px;
	font-weight:600;

	letter-spacing:.4px;

	color:var(--color-texto-secundario);

	text-transform:uppercase;
}

.recovery-icono,
.exito-icono{

	display:flex;
	justify-content:center;

	margin-bottom:14px;

	color:var(--color-boton-fondo);
}

.exito-icono{

	width:74px;
	height:74px;

	margin:0 auto 16px auto;

	border-radius:50%;

	background:var(--color-exito);

	align-items:center;

	box-shadow:0 10px 25px color-mix(in srgb, var(--color-exito) 45%, transparent);
}

h1{

	font-size:26px;
	font-weight:600;

	color:var(--color-texto-titulo);

	margin-bottom:12px;
}

.subtitle{

	font-size:14px;
	line-height:1.6;

	color:var(--color-texto-secundario);

	margin-bottom:30px;
}

.input-group{
	position:relative;

	/* Aire arriba: las etiquetas ya no nacen dentro del campo (2026-09-04). */
	margin-top:14px;

	margin-bottom:25px;
	text-align:left;
}

.input-group input{

	width:100%;
	height:56px;

	border:none;
	outline:none;

	padding:0 18px;

	border-radius:14px;

	background:#f5f7f8;

	color:#134040;

	font-size:15px;

	border:1px solid #d9e3e3;

	transition:.3s;
}

.input-group input:focus{

	border:1px solid var(--color-boton-fondo);

	background:white;

	box-shadow:0 0 0 4px color-mix(in srgb, var(--color-boton-fondo) 10%, transparent);
}

/* ETIQUETAS SIEMPRE ARRIBA (2026-09-04, Dora) — mismo cambio que en el
   login (css/index.css): el autocompletado rellena el campo sin disparar
   `:valid` y la etiqueta se quedaba montada sobre el texto. Nace arriba;
   enfocar solo la enciende en el color de marca. */
.input-group label{

	position:absolute;

	left:12px;
	top:-10px;

	font-size:12px;

	padding:0 6px;

	background:white;

	border-radius:20px;

	color:#6b7d7d;

	pointer-events:none;

	transition:color .3s;
}

.input-group input:focus + label{

	color:var(--color-boton-fondo);
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
	-webkit-appearance:none;
	margin:0;
}

input[type=number]{
	-moz-appearance:textfield;
}

.btn-login{

	display:inline-block;

	width:100%;

	height:56px;

	line-height:56px;

	border:none;
	border-radius:14px;

	background:linear-gradient(
		135deg,
		var(--color-boton-fondo),
		color-mix(in srgb, var(--color-boton-fondo) 70%, white)
	);

	color:var(--color-boton-texto);

	font-size:16px;
	font-weight:600;

	text-align:center;
	text-decoration:none;

	cursor:pointer;

	transition:.3s;
}

.btn-login:hover{
	background:linear-gradient(
		135deg,
		var(--color-boton-fondo-hover),
		color-mix(in srgb, var(--color-boton-fondo-hover) 70%, white)
	);
	color:var(--color-boton-texto-hover);
}

.btn-login:disabled{
	opacity:.75;
	cursor:not-allowed;
}

.links{
	margin-top:22px;
	font-size:13px;
}

.links a{
	color:var(--color-texto-titulo);
	text-decoration:none;
	font-weight:500;
	transition:.3s;
}

.links a:hover{
	color:var(--color-boton-fondo-hover);
}

.footer{

	margin-top:28px;

	font-size:11px;

	color:var(--color-texto-secundario);

	line-height:1.6;
}

.footer a{
	color:inherit;
	font-weight:600;
	text-decoration:underline;
}

.footer a:hover{
	color:var(--color-boton-fondo-hover);
}

@keyframes fadeIn{

	from{
		opacity:0;
		transform:translateY(20px);
	}

	to{
		opacity:1;
		transform:translateY(0);
	}
}

/*****************************************
HD 1280x720 (mismo criterio que css/index.css)
******************************************/

@media (max-height:720px){

	.company-logo img{
		width:160px;
		margin-bottom:10px;
	}

	.recovery-card{
		max-width:400px;
		padding:28px 35px;
	}

	h1{
		font-size:22px;
	}

	.subtitle{
		margin-bottom:20px;
	}

	.input-group{
		margin-bottom:18px;
	}
}

/*****************************************
TABLETS/DESKTOP ANGOSTO
(no mobile-first: esta pantalla no se ve en
celular, solo se ajusta para resoluciones
pequeñas de escritorio/laptop)
******************************************/

@media(max-width:768px){

	.recovery-card{
		max-width:400px;
		padding:35px 28px;
	}

	.company-logo img{
		width:170px;
	}
}