/* imeba-login.css */

:root{
	--imeba-red:#d71920;
	--imeba-red-dark:#ae1117;
	--imeba-black:#0d0f11;
	--imeba-dark:#15181b;
	--imeba-text:#171a1d;
	--imeba-muted:#687078;
	--imeba-line:#dce1e5;
	--imeba-soft:#f5f6f7;
	--imeba-white:#ffffff;
}

*{
	box-sizing:border-box;
}

html,
body{
	min-height:100%;
}

body{
	margin:0;
	background:var(--imeba-soft);
	color:var(--imeba-text);
	font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
	-webkit-font-smoothing:antialiased;
}

a{
	color:inherit;
	text-decoration:none;
}

button,
input{
	font:inherit;
}

.imeba-client-login{
	display:grid;
	grid-template-columns:minmax(500px,48%) minmax(0,52%);
	min-height:100vh;
}

/* PANEL CORPORATIVO */

.imeba-login-brand{
	position:relative;
	min-height:100vh;
	overflow:hidden;
	background:var(--imeba-black);
}

.imeba-login-brand-bg,
.imeba-login-brand-overlay{
	position:absolute;
	inset:0;
}

.imeba-login-brand-bg{
	background-image:url('../../../web/img/index/robotica.webp');
	background-position:center;
	background-size:cover;
}

.imeba-login-brand-overlay{
	background:
		linear-gradient(90deg,rgba(8,10,12,.97) 0%,rgba(8,10,12,.84) 58%,rgba(8,10,12,.48) 100%),
		linear-gradient(0deg,rgba(8,10,12,.25),rgba(8,10,12,.25));
}

.imeba-login-brand-content{
	position:relative;
	z-index:2;
	display:flex;
	flex-direction:column;
	min-height:100vh;
	padding:54px 64px 34px;
}

.imeba-login-logo{
	display:inline-flex;
	align-self:flex-start;
}

.imeba-login-logo img{
	display:block;
	width:205px;
	max-width:100%;
	height:auto;
}

.imeba-login-brand-copy{
	width:100%;
	max-width:610px;
	margin:auto 0;
	padding:70px 0;
}

.imeba-login-kicker{
	display:block;
	margin-bottom:14px;
	color:var(--imeba-red);
	font-size:13px;
	font-weight:700;
	letter-spacing:1.8px;
	text-transform:uppercase;
}

.imeba-login-brand-copy h1{
	margin:0 0 20px;
	color:var(--imeba-white);
	font-size:64px;
	font-weight:800;
	letter-spacing:-1.8px;
	line-height:1;
	text-transform:uppercase;
}

.imeba-login-brand-copy > p{
	max-width:570px;
	margin:0;
	color:rgba(255,255,255,.76);
	font-size:18px;
	line-height:1.7;
}

.imeba-login-divider{
	width:64px;
	height:3px;
	margin:34px 0;
	background:var(--imeba-red);
}

.imeba-login-feature{
	display:flex;
	align-items:center;
	max-width:510px;
}

.imeba-login-feature-icon{
	display:flex;
	flex:0 0 62px;
	align-items:center;
	justify-content:center;
	width:62px;
	height:62px;
	margin-right:20px;
	border:1px solid rgba(215,25,32,.75);
	color:var(--imeba-red);
}

.imeba-login-feature-icon svg{
	width:31px;
	height:31px;
	fill:none;
	stroke:currentColor;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:1.7;
}

.imeba-login-feature strong,
.imeba-login-feature span{
	display:block;
}

.imeba-login-feature strong{
	margin-bottom:5px;
	color:var(--imeba-white);
	font-size:18px;
	font-weight:700;
}

.imeba-login-feature span{
	color:rgba(255,255,255,.68);
	font-size:14px;
	line-height:1.5;
}

.imeba-login-brand-footer{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding-top:24px;
	border-top:1px solid rgba(255,255,255,.12);
	color:rgba(255,255,255,.48);
	font-size:12px;
}

.imeba-login-brand-footer a{
	color:rgba(255,255,255,.76);
	font-weight:700;
	text-transform:uppercase;
}

.imeba-login-brand-footer a:hover{
	color:var(--imeba-red);
}

/* ACCESO */

.imeba-login-access{
	display:flex;
	flex-direction:column;
	min-height:100vh;
	background:
		linear-gradient(rgba(255,255,255,.96),rgba(255,255,255,.96)),
		linear-gradient(135deg,#ffffff 0%,#eef1f3 100%);
}

.imeba-login-access-inner{
	display:flex;
	flex:1;
	align-items:center;
	justify-content:center;
	padding:64px;
}

.imeba-login-card{
	width:100%;
	max-width:560px;
	padding:52px 52px 44px;
	border:1px solid rgba(13,15,17,.08);
	background:var(--imeba-white);
	box-shadow:0 24px 60px rgba(13,15,17,.10);
}

.imeba-login-card-header{
	margin-bottom:34px;
	text-align:center;
}

.imeba-login-card-header > span{
	display:block;
	margin-bottom:9px;
	color:var(--imeba-red);
	font-size:11px;
	font-weight:700;
	letter-spacing:1.5px;
	text-transform:uppercase;
}

.imeba-login-card-header h2{
	margin:0 0 10px;
	color:var(--imeba-black);
	font-size:34px;
	font-weight:800;
	letter-spacing:-.7px;
	line-height:1.15;
}

.imeba-login-card-header p{
	margin:0;
	color:var(--imeba-muted);
	font-size:14px;
	line-height:1.6;
}

.imeba-login-alert{
	margin-bottom:24px;
	padding:13px 15px;
	border-left:4px solid var(--imeba-red);
	background:#fff1f1;
	color:#8e1116;
	font-size:13px;
	font-weight:700;
	line-height:1.45;
}

.imeba-login-field{
	margin-bottom:22px;
}

.imeba-login-field label{
	display:block;
	margin-bottom:8px;
	color:var(--imeba-black);
	font-size:13px;
	font-weight:700;
}

.imeba-login-input{
	position:relative;
}

.imeba-login-input input{
	display:block;
	width:100%;
	height:58px;
	padding:0 54px 0 17px;
	border:1px solid var(--imeba-line);
	border-radius:0;
	outline:0;
	background:var(--imeba-white);
	color:var(--imeba-black);
	font-size:14px;
	transition:border-color .2s ease,box-shadow .2s ease;
}

.imeba-login-input input::placeholder{
	color:#9aa1a8;
}

.imeba-login-input input:focus{
	border-color:var(--imeba-red);
	box-shadow:0 0 0 3px rgba(215,25,32,.09);
}

.imeba-login-input > svg{
	position:absolute;
	top:50%;
	right:18px;
	width:22px;
	height:22px;
	transform:translateY(-50%);
	fill:none;
	stroke:#929aa2;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:1.6;
	pointer-events:none;
}

.imeba-login-submit{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:58px;
	margin-top:30px;
	border:0;
	background:var(--imeba-red);
	color:var(--imeba-white);
	font-size:13px;
	font-weight:800;
	letter-spacing:.5px;
	text-transform:uppercase;
	cursor:pointer;
	transition:background .2s ease,transform .2s ease;
}

.imeba-login-submit:hover{
	background:var(--imeba-red-dark);
}

.imeba-login-submit:active{
	transform:translateY(1px);
}

.imeba-login-submit svg{
	width:20px;
	height:20px;
	margin-left:10px;
	fill:none;
	stroke:currentColor;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:2;
}

.imeba-login-help{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:7px 14px;
	margin-top:30px;
	padding-top:24px;
	border-top:1px solid var(--imeba-line);
	font-size:12px;
}

.imeba-login-help span{
	width:100%;
	color:var(--imeba-muted);
	text-align:center;
	text-transform:uppercase;
}

.imeba-login-help a{
	color:var(--imeba-black);
	font-weight:700;
}

.imeba-login-help a:hover{
	color:var(--imeba-red);
}

.imeba-login-footer{
	display:flex;
	align-items:center;
	justify-content:space-between;
	min-height:72px;
	padding:0 42px;
	border-top:1px solid var(--imeba-line);
	color:var(--imeba-muted);
	font-size:11px;
}

.imeba-login-footer div{
	display:flex;
	gap:20px;
}

.imeba-login-footer a:hover{
	color:var(--imeba-red);
}

/* RESPONSIVE */

@media(max-width:1100px){
	.imeba-client-login{
		grid-template-columns:minmax(420px,44%) minmax(0,56%);
	}

	.imeba-login-brand-content{
		padding:42px 38px 30px;
	}

	.imeba-login-brand-copy h1{
		font-size:52px;
	}

	.imeba-login-access-inner{
		padding:44px;
	}

	.imeba-login-card{
		padding:44px 38px 38px;
	}
}

@media(max-width:850px){
	.imeba-client-login{
		display:block;
	}

	.imeba-login-brand{
		min-height:420px;
	}

	.imeba-login-brand-content{
		min-height:420px;
	}

	.imeba-login-brand-copy{
		margin:auto 0 0;
		padding:48px 0 32px;
	}

	.imeba-login-brand-copy h1{
		font-size:44px;
	}

	.imeba-login-brand-copy > p{
		font-size:16px;
	}

	.imeba-login-brand-footer{
		display:none;
	}

	.imeba-login-access{
		min-height:auto;
	}

	.imeba-login-access-inner{
		padding:42px 22px;
	}

	.imeba-login-footer{
		padding:0 22px;
	}
}

@media(max-width:520px){
	.imeba-login-brand{
		min-height:370px;
	}

	.imeba-login-brand-content{
		min-height:370px;
		padding:28px 20px 24px;
	}

	.imeba-login-logo img{
		width:165px;
	}

	.imeba-login-brand-copy{
		padding:36px 0 20px;
	}

	.imeba-login-brand-copy h1{
		font-size:36px;
	}

	.imeba-login-brand-copy > p{
		font-size:14px;
	}

	.imeba-login-divider{
		margin:24px 0;
	}

	.imeba-login-feature-icon{
		flex-basis:52px;
		width:52px;
		height:52px;
		margin-right:14px;
	}

	.imeba-login-feature strong{
		font-size:16px;
	}

	.imeba-login-feature span{
		font-size:12px;
	}

	.imeba-login-access-inner{
		padding:26px 14px;
	}

	.imeba-login-card{
		padding:32px 20px 28px;
	}

	.imeba-login-card-header h2{
		font-size:29px;
	}

	.imeba-login-footer{
		flex-direction:column;
		justify-content:center;
		gap:8px;
		padding:18px 14px;
		text-align:center;
	}
}

/* MOSTRAR / OCULTAR CONTRASEÑA */

.imeba-login-password{
	position:relative;
}

.imeba-login-password input{
	padding-right:62px;
}

/* Oculta los controles nativos de algunos navegadores */
.imeba-login-password input::-ms-reveal,
.imeba-login-password input::-ms-clear{
	display:none;
}

.imeba-password-toggle{
	position:absolute;
	top:50%;
	right:11px;
	z-index:5;

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

	width:38px;
	height:38px;
	margin:0;
	padding:0;

	transform:translateY(-50%);

	border:0;
	border-radius:4px;
	outline:0;
	background:transparent;
	box-shadow:none;

	color:#929aa2;
	cursor:pointer;

	appearance:none;
	-webkit-appearance:none;
}

.imeba-password-toggle:hover{
	background:rgba(215,25,32,.07);
	color:var(--imeba-red);
}

.imeba-password-toggle:focus-visible{
	outline:2px solid var(--imeba-red);
	outline-offset:1px;
}

.imeba-password-toggle svg{
	position:static;
	display:block;

	width:22px;
	height:22px;

	transform:none;

	fill:none;
	stroke:currentColor;
	stroke-width:1.7;
	stroke-linecap:round;
	stroke-linejoin:round;

	pointer-events:none;
}