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

/*****************************************
CSS EXCLUSIVO DE index.php (login)
Independiente de otros módulos: no compartir
este archivo con registro.php, dashboard, etc.
******************************************/

/*****************************************
RESET
******************************************/

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

/*****************************************
BODY
******************************************/

body{

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

	height:100vh;
	overflow:hidden;

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

	position:relative;

	/* Imagen de fondo (img/system/fondos/fondo_index.jpg) con
	efecto "marca de agua"/desvanecido MUY tenue (casi blanco,
	pidido por el usuario 2026-07-05): cada color del degradado
	se aclara primero mezclándolo con blanco (color-mix interno,
	12% color / 88% blanco) y ese resultado casi-blanco se aplica
	luego con alta opacidad (color-mix externo, 82% opaco / 18%
	transparent) — así se ve mayormente blanco pero deja asomar
	la foto de fondo debajo, sin perder la referencia a los
	colores de config/colores.php. Solo esta pantalla (index.php)
	usa imagen — el resto de páginas del flujo de acceso usan
	degradado + textura, ver registro.css/recovery.css/
	cambiar_pass.css/index_m.css.

	La foto va por var(--fondo-index) (definida en
	config/colores.php con URL absoluta) para que la ruta no
	dependa de la profundidad de esta carpeta. Ver colores.php. */

	background:
	linear-gradient(
		135deg,
		color-mix(in srgb, color-mix(in srgb, var(--color-fondo-degradado-inicio) 12%, white) 82%, transparent) 0%,
		color-mix(in srgb, color-mix(in srgb, var(--color-fondo-degradado-medio) 12%, white) 82%, transparent) 55%,
		color-mix(in srgb, color-mix(in srgb, var(--color-fondo-degradado-fin) 12%, white) 82%, transparent) 100%
	),
	var(--fondo-index);

	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

/*****************************************
OVERLAY
(efecto "spotlight": zona clara detrás del
modal + viñeta oscura en los bordes, para
que la tarjeta de login resalte más sobre
la imagen/degradado del body)
******************************************/

.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%
	);
}

/*****************************************
WRAPPER
******************************************/

.login-wrapper{

	position:relative;
	z-index:2;

	width:100%;

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

	padding:20px;
}

/*****************************************
CARD LOGIN
******************************************/

.login-card{

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

	padding:45px 40px;

	border-radius:28px;

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

	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;
}

/*****************************************
LOGO EMPRESA
******************************************/

.company-logo img{

	width:220px;

	margin-bottom:18px;
}

/*****************************************
TITULO DE PLATAFORMA
(solo se muestra cuando se usa el logo de
la empresa en vez del logo por defecto,
ver index.php / config/config.ini)
******************************************/

.titulo-plataforma{

	margin:-8px 0 18px 0;

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

	letter-spacing:.4px;

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

	text-transform:uppercase;
}

/*****************************************
TEXTOS
******************************************/

.login-card h1{

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

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

	margin-bottom:8px;
}

.subtitle{

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

	font-size:14px;

	margin-bottom:35px;
}

/*****************************************
INPUTS
******************************************/

.input-group{

	position:relative;

	/* Aire ARRIBA desde que las etiquetas viven fuera del campo
	   (2026-09-04): la del primer input se montaba sobre el texto
	   "Ingrese sus credenciales…", que antes le quedaba lejos porque la
	   etiqueta empezaba dentro. */
	margin-top:14px;

	margin-bottom:25px;
}

.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)

Eran flotantes: nacían dentro del campo y subían al enfocarlo o al
tener valor (`:focus` / `:valid`). Con el AUTOCOMPLETADO DEL NAVEGADOR
eso se rompe — y no hay forma de evitarlo desde el código, por más
`autocomplete="off"` que se ponga: Chrome y Edge rellenan usuario y
contraseña igual, y lo hacen sin disparar la re-evaluación de `:valid`.
Resultado: la etiqueta se quedaba abajo, encima del texto rellenado, y
el login se veía con las dos cosas superpuestas (Dora, con captura).

La salida es dejar de pelear: si el navegador va a rellenar, que la
etiqueta ya esté arriba desde el primer momento. Es el estado que antes
solo se veía al escribir, ahora fijo — así el campo se ve igual esté
vacío, enfocado o autocompletado, que es lo único que el navegador no
puede desbaratar.

El fondo blanco sólido de la etiqueta es lo que "corta" el borde del
input y hace que se lea como una pestaña sobre él; la tarjeta es
translúcida, así que un fondo heredado dejaría ver la línea por detrás.
******************************************/

.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;

	/* Solo el color transiciona: ya no hay movimiento que animar. */
	transition:color .3s;
}

/* Enfocar ya no MUEVE la etiqueta, solo la enciende en el color de
   marca: sigue señalando en qué campo se está escribiendo, que era la
   otra mitad de lo que aportaba el efecto flotante. */
.input-group input:focus + label{

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

/*****************************************
PASSWORD TOGGLE
******************************************/

.password-group{
	position:relative;
}

.password-group input{
	padding-right:55px;
}

.toggle-password{

	position:absolute;

	right:14px;
	top:50%;

	transform:translateY(-50%);

	width:36px;
	height:36px;

	border:none;
	outline:none;

	background:transparent;

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

	cursor:pointer;

	color:#7a8b8b;

	border-radius:50%;

	transition:.25s;
}

.toggle-password:hover{

	background:color-mix(in srgb, var(--color-boton-fondo) 8%, transparent);

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

.toggle-password svg{

	width:20px;
	height:20px;
}

/*****************************************
BOTON LOGIN
******************************************/

.btn-login{

	width:100%;
	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;

	cursor:pointer;

	transition:.3s;
}

.btn-login:hover{

	transform:translateY(-2px);

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

	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;

	transform:none;
}

/*****************************************
LOADER BOTON (usado por JS al enviar el form)
******************************************/

.loader{

	width:20px;
	height:20px;

	border:3px solid rgba(255,255,255,.3);

	border-top-color:white;

	border-radius:50%;

	animation:spin .8s linear infinite;

	margin:auto;
}

@keyframes spin{

	to{
		transform:rotate(360deg);
	}
}

/*****************************************
LINKS
******************************************/

.links{

	margin-top:25px;

	display:flex;
	justify-content:center;
	align-items:center;
	gap:10px;

	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);
}

.links span{

	color:#9aa8a8;
}

/*****************************************
FOOTER
******************************************/

.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;

	transition:.3s;
}

.footer a:hover{

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

/*****************************************
ANIMACION CARD
******************************************/

@keyframes fadeIn{

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

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

/*****************************************
TABLETS
******************************************/

@media(max-width:768px){

	.login-card{

		max-width:400px;

		padding:40px 32px;
	}

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

/*****************************************
MOBILE
******************************************/

@media(max-width:480px){

	body{
		padding:15px;
	}

	.login-card{

		padding:32px 24px;

		border-radius:24px;
	}

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

	.login-card h1{
		font-size:24px;
	}

	.subtitle{
		font-size:13px;
		margin-bottom:24px;
	}

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

	.input-group input{
		height:52px;
	}

	.btn-login{
		height:52px;
	}

	.footer{
		font-size:10px;
		margin-top:20px;
	}
}

/*****************************************
HD 1280x720
******************************************/

@media (max-height:720px){

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

	.login-card{

		max-width:390px;

		padding:
			28px
			35px;
	}

	.login-card h1{
		font-size:24px;
		margin-bottom:5px;
	}

	.subtitle{
		margin-bottom:22px;
	}

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

	.footer{
		margin-top:18px;
		font-size:10px;
	}
}