/*
 * ============================================================
 * ESBELLA
 * LOGIN STYLE
 * ============================================================
 *
 * Hoja de estilos completamente local.
 *
 * No utiliza:
 *
 * - Google Fonts
 * - Font Awesome
 * - CDN
 * - imágenes externas
 * - frameworks CSS
 *
 * ============================================================
 */


/*
 * ============================================================
 * CONFIGURACION GENERAL
 * ============================================================
 */

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


html{
	width: 100%;
	min-height: 100%;
}


body{
	width: 100%;
	min-height: 100vh;
}


body.login-page{

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	background:
		#eef2f7;

	color:
		#111827;

	-webkit-font-smoothing:
		antialiased;

	-moz-osx-font-smoothing:
		grayscale;
}



/*
 * ============================================================
 * FONDO
 * ============================================================
 */

.login-background{

	width: 100%;

	min-height: 100vh;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 30px 20px;

	background:
		linear-gradient(
			135deg,
			#eef2f7 0%,
			#dfe7f1 100%
		);
}



/*
 * ============================================================
 * CONTENEDOR
 * ============================================================
 */

.login-container{

	width: 100%;

	max-width: 440px;

	margin: 0 auto;
}



/*
 * ============================================================
 * TARJETA
 * ============================================================
 */

.login-card{

	width: 100%;

	background:
		#ffffff;

	border:
		1px solid
		#e2e8f0;

	border-radius:
		18px;

	box-shadow:
		0 15px 45px
		rgba(
			15,
			23,
			42,
			0.14
		);

	overflow: hidden;
}



/*
 * ============================================================
 * CABECERA
 * ============================================================
 */

.login-header{

	background:
		#1f2937;

	color:
		#ffffff;

	text-align:
		center;

	padding:
		32px 25px 28px 25px;
}



.login-logo{

	width: 68px;

	height: 68px;

	margin:
		0 auto 15px auto;

	padding: 4px;

	border-radius:
		50%;

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

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.20
		);
}



.login-logo-inner{

	width: 100%;

	height: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius:
		50%;

	background:
		#2563eb;

	color:
		#ffffff;

	font-size:
		30px;

	font-weight:
		700;

	user-select:
		none;
}



.login-header h1{

	margin: 0;

	font-size:
		27px;

	line-height:
		1.2;

	font-weight:
		700;

	letter-spacing:
		1.5px;
}



.login-header p{

	margin:
		7px 0 0 0;

	font-size:
		14px;

	color:
		#cbd5e1;
}



/*
 * ============================================================
 * CONTENIDO
 * ============================================================
 */

.login-content{

	padding:
		32px;
}



.login-title{

	margin-bottom:
		6px;

	font-size:
		22px;

	line-height:
		1.3;

	font-weight:
		700;

	color:
		#111827;
}



.login-subtitle{

	margin-bottom:
		26px;

	font-size:
		14px;

	line-height:
		1.5;

	color:
		#64748b;
}



/*
 * ============================================================
 * FORMULARIO
 * ============================================================
 */

.form-group{

	margin-bottom:
		20px;
}



.form-group label{

	display:
		block;

	margin-bottom:
		7px;

	font-size:
		14px;

	font-weight:
		600;

	color:
		#475569;
}



/*
 * ============================================================
 * INPUT
 * ============================================================
 */

.input-wrapper{

	position:
		relative;

	display:
		flex;

	width:
		100%;

	height:
		50px;

	background:
		#ffffff;

	border:
		1px solid
		#cbd5e1;

	border-radius:
		9px;

	overflow:
		hidden;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}



.input-wrapper:focus-within{

	border-color:
		#2563eb;

	box-shadow:
		0 0 0 3px
		rgba(
			37,
			99,
			235,
			0.13
		);
}



/*
 * ============================================================
 * ICONOS
 * ============================================================
 *
 * Los SVG se encuentran directamente dentro del HTML.
 * No dependen de Font Awesome ni de ningún servidor externo.
 * ============================================================
 */

.input-icon{

	flex:
		0 0 50px;

	width:
		50px;

	height:
		100%;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	background:
		#f8fafc;

	border-right:
		1px solid
		#e2e8f0;

	pointer-events:
		none;
}



.input-icon svg{

	width:
		19px;

	height:
		19px;

	fill:
		#64748b;
}



/*
 * ============================================================
 * INPUT REAL
 * ============================================================
 */

.input-wrapper input{

	flex: 1;

	width: 100%;

	min-width: 0;

	height: 100%;

	padding:
		0 14px;

	border:
		none;

	outline:
		none;

	background:
		transparent;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size:
		15px;

	color:
		#111827;
}



.input-wrapper input::placeholder{

	color:
		#94a3b8;

	opacity:
		1;
}



/*
 * Evitamos colores extraños del navegador al autocompletar.
 */

.input-wrapper input:-webkit-autofill,
.input-wrapper input:-webkit-autofill:hover,
.input-wrapper input:-webkit-autofill:focus{

	-webkit-text-fill-color:
		#111827;

	-webkit-box-shadow:
		0 0 0 1000px
		#ffffff inset;

	transition:
		background-color 9999s ease-out 0s;
}



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

.login-button{

	display:
		block;

	width:
		100%;

	min-height:
		50px;

	margin-top:
		6px;

	padding:
		13px 18px;

	border:
		none;

	border-radius:
		9px;

	background:
		#2563eb;

	color:
		#ffffff;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size:
		16px;

	font-weight:
		700;

	cursor:
		pointer;

	transition:
		background-color 0.2s ease,
		transform 0.05s ease;
}



.login-button:hover{

	background:
		#1d4ed8;
}



.login-button:active{

	transform:
		translateY(1px);
}



.login-button:focus-visible{

	outline:
		3px solid
		rgba(
			37,
			99,
			235,
			0.25
		);

	outline-offset:
		2px;
}



/*
 * ============================================================
 * MENSAJES
 * ============================================================
 */

.login-message{

	width:
		100%;

	margin-bottom:
		20px;

	padding:
		12px 14px;

	border-radius:
		8px;

	font-size:
		14px;

	line-height:
		1.45;
}



.login-message strong{

	display:
		block;

	margin-bottom:
		3px;
}



.login-message span{

	display:
		block;
}



.login-error{

	background:
		#fee2e2;

	border:
		1px solid
		#fca5a5;

	color:
		#991b1b;
}



/*
 * ============================================================
 * AVISO DE SEGURIDAD
 * ============================================================
 */

.security-notice{

	margin-top:
		27px;

	padding:
		15px;

	background:
		#f8fafc;

	border:
		1px solid
		#e2e8f0;

	border-radius:
		9px;
}



.security-notice-title{

	margin-bottom:
		5px;

	font-size:
		13px;

	font-weight:
		700;

	color:
		#334155;
}



.security-notice p{

	margin:
		0;

	font-size:
		12px;

	line-height:
		1.55;

	color:
		#64748b;
}



/*
 * ============================================================
 * FOOTER
 * ============================================================
 */

.login-footer{

	padding:
		15px 20px;

	background:
		#f8fafc;

	border-top:
		1px solid
		#e2e8f0;

	text-align:
		center;

	font-size:
		11px;

	font-weight:
		600;

	letter-spacing:
		1px;

	color:
		#94a3b8;
}



/*
 * ============================================================
 * SELECCION DE TEXTO
 * ============================================================
 */

::selection{

	background:
		rgba(
			37,
			99,
			235,
			0.18
		);
}



/*
 * ============================================================
 * MOVIL
 * ============================================================
 */

@media(
	max-width: 520px
){

	.login-background{

		align-items:
			flex-start;

		padding:
			15px 10px;
	}


	.login-card{

		border-radius:
			14px;
	}


	.login-header{

		padding:
			27px 20px 24px 20px;
	}


	.login-logo{

		width:
			60px;

		height:
			60px;
	}


	.login-logo-inner{

		font-size:
			26px;
	}


	.login-header h1{

		font-size:
			24px;
	}


	.login-content{

		padding:
			25px 20px;
	}


	.login-title{

		font-size:
			20px;
	}

}



/*
 * ============================================================
 * PANTALLAS MUY BAJAS
 * ============================================================
 */

@media(
	max-height: 650px
){

	.login-background{

		align-items:
			flex-start;

		padding-top:
			15px;

		padding-bottom:
			15px;
	}


	.login-header{

		padding-top:
			22px;

		padding-bottom:
			20px;
	}


	.login-logo{

		width:
			54px;

		height:
			54px;

		margin-bottom:
			10px;
	}


	.login-logo-inner{

		font-size:
			23px;
	}


	.login-content{

		padding-top:
			23px;

		padding-bottom:
			23px;
	}


	.login-subtitle{

		margin-bottom:
			20px;
	}

}