/* ------------------------------------------------------------------
   Labotal — Shell del portal público (split-screen)
   Extraído del <style> inline de index.php (regla 05: 2do uso -> se extrae).
   Lo consumen: index.php (login) y cambio_pass.php (cambio de contraseña).
   Lo específico de cada vista (toggle de ambiente, medidor de contraseña)
   se queda inline en la vista que lo usa.
   Tokens: STYLE_GUIDE.md sección 2.
   ------------------------------------------------------------------ */
:root{
	--verde:#3aa635;
	--verde-osc:#2c7f29;
	--verde-claro:#5cc457;
	--gris:#58595b;
	--gris-claro:#8a8c8f;
	--linea:#e6e8ea;
	--bg-card:#ffffff;
	--txt:#2b2c2e;
	--azul:#1f7bd6;
	--rojo:#d64541;
	--font-display:'Sora','Segoe UI',Tahoma,sans-serif;
	--font-body:'Manrope','Segoe UI',Tahoma,sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body.login-page{
	font-family:var(--font-body);
	color:var(--txt);
	background:#f3f5f6;
	-webkit-font-smoothing:antialiased;
}
.lb-wrap{
	display:flex;
	min-height:100vh;
	width:100%;
}

/* ---------- Panel marca (izquierda) ---------- */
.lb-brand{
	position:relative;
	flex:0 0 44%;
	max-width:44%;
	background:linear-gradient(150deg,var(--verde-osc) 0%,var(--verde) 55%,var(--verde-claro) 130%);
	color:#fff;
	padding:64px 56px;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	overflow:hidden;
}
/* textura: líneas diagonales tipo "carretera" del logo */
.lb-brand::before{
	content:"";
	position:absolute;inset:0;
	background-image:
		repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 26px);
	pointer-events:none;
}
/* franja punteada diagonal decorativa */
.lb-brand::after{
	content:"";
	position:absolute;
	top:-15%;right:-8%;
	width:60%;height:130%;
	background:repeating-linear-gradient(160deg,rgba(255,255,255,.16) 0 6px,transparent 6px 24px);
	transform:rotate(2deg);
	-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
	mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
	pointer-events:none;
}
.lb-brand>*{position:relative;z-index:1;}
.lb-logo-card{
	display:inline-flex;
	align-items:center;
	background:#fff;
	border-radius:14px;
	padding:18px 26px;
	box-shadow:0 18px 40px -18px rgba(0,0,0,.45);
	width:max-content;
	max-width:100%;
}
.lb-logo-card img{display:block;height:72px;width:auto;max-width:100%;}
	/* pantallas grandes: logo más grande */
	@media (min-width:1200px){
		.lb-logo-card img{height:92px;}
	}
.lb-brand-body{max-width:430px;}
.lb-eyebrow{
	font-family:var(--font-display);
	font-weight:600;
	letter-spacing:.32em;
	text-transform:uppercase;
	font-size:12px;
	opacity:.82;
	margin:0 0 18px;
}
.lb-headline{
	font-family:var(--font-display);
	font-weight:800;
	font-size:42px;
	line-height:1.08;
	margin:0 0 18px;
	text-wrap:balance;
}
.lb-headline em{font-style:normal;color:#eafbe8;}
.lb-sub{
	font-size:16px;
	line-height:1.6;
	opacity:.9;
	margin:0;
	max-width:380px;
}
.lb-pillars{
	display:flex;
	gap:26px;
	flex-wrap:wrap;
	font-size:13px;
	font-weight:600;
	letter-spacing:.02em;
}
.lb-pillars span{display:inline-flex;align-items:center;gap:8px;opacity:.92;}
.lb-pillars i{color:#eafbe8;}

/* ---------- Panel de contenido (derecha) ---------- */
.lb-auth{
	flex:1 1 56%;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:48px 32px;
}
.lb-card{
	width:100%;
	max-width:412px;
}
.lb-card h1{
	font-family:var(--font-display);
	font-weight:700;
	font-size:27px;
	margin:0 0 6px;
	color:var(--txt);
}
.lb-card .lb-lead{
	color:var(--gris-claro);
	font-size:14.5px;
	margin:0 0 26px;
}

/* campos */
.lb-field{position:relative;margin-bottom:16px;}
.lb-field>i{
	position:absolute;
	top:50%;left:16px;
	transform:translateY(-50%);
	color:var(--gris-claro);
	font-size:15px;
	pointer-events:none;
}
.lb-field input{
	width:100%;
	height:52px;
	border:1.5px solid var(--linea);
	border-radius:11px;
	background:#fafbfb;
	padding:0 16px 0 44px;
	font-family:var(--font-body);
	font-size:15px;
	color:var(--txt);
	transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.lb-field input::placeholder{color:#aeb1b4;}
.lb-field input:focus{
	outline:none;
	border-color:var(--verde);
	background:#fff;
	box-shadow:0 0 0 4px rgba(58,166,53,.13);
}

.lb-submit{
	width:100%;
	height:52px;
	border:0;
	border-radius:11px;
	background:linear-gradient(135deg,var(--verde) 0%,var(--verde-osc) 100%);
	color:#fff;
	font-family:var(--font-display);
	font-weight:600;
	font-size:15.5px;
	letter-spacing:.02em;
	cursor:pointer;
	margin-top:6px;
	transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;
	box-shadow:0 14px 28px -12px rgba(44,127,41,.75);
}
.lb-submit:hover{transform:translateY(-1px);filter:brightness(1.04);}
.lb-submit:active{transform:translateY(0);}
.lb-submit[disabled]{opacity:.65;cursor:default;transform:none;filter:none;}

.lb-msg{
	margin-top:18px;
	font-size:13.5px;
	text-align:center;
	color:var(--rojo);
	min-height:18px;
}
.lb-msg:empty{margin-top:0;}
.lb-msg.is-ok{color:var(--verde-osc);}
.lb-foot{
	margin-top:30px;
	text-align:center;
	font-size:12.5px;
	color:var(--gris-claro);
}
.lb-foot a{color:var(--azul);text-decoration:none;}

/* ---------- Responsive ---------- */
@media (max-width:880px){
	.lb-wrap{flex-direction:column;}
	.lb-brand{
		flex:none;max-width:100%;
		padding:38px 30px 30px;
		justify-content:center;
		align-items:center;
		text-align:center;
	}
	.lb-logo-card{margin-left:auto;margin-right:auto;}
	.lb-brand-body{display:none;}
	.lb-pillars{display:none;}
	.lb-headline{font-size:30px;}
	.lb-auth{padding:34px 22px 50px;}
}
@media (max-width:520px){
	.lb-logo-card{padding:14px 18px;}
	.lb-logo-card img{height:54px;}
}

/* animación de entrada escalonada */
@keyframes lbIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.lb-card>*{animation:lbIn .55s both;}
.lb-card>*:nth-child(1){animation-delay:.05s;}
.lb-card>*:nth-child(2){animation-delay:.10s;}
.lb-card>*:nth-child(3){animation-delay:.16s;}