/* =========================================================
   Pantalla de acceso (login) — patrón del design-system.
   Tarjeta centrada, acento de marca por inquilino (body.brand-*).
   ========================================================= */

/* en login montamos un layout en columna que ocupa EXACTAMENTE el viewport
   (sin scroll): wrapper/contenedor crecen, el crédito queda anclado abajo.
   Además neutralizamos el fondo oscuro (#222d32) del skin-blue. */
body.skin-blue {
	background: #eef1f5;
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
body.skin-blue .wrapper {
	background: #eef1f5;
	min-height: 0 !important;   /* anula el min-height inline que pone adminlte.js */
	flex: 1 1 auto;
	display: flex;
}
body.skin-blue .wrapper > .container-fluid {
	flex: 1 1 auto;
	display: flex;
	padding: 0;
}

.login-screen {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: #eef1f5;
}

.login-card {
	width: 100%;
	max-width: 380px;
	background: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 14px;
	box-shadow: 0 10px 34px rgba(22, 34, 51, .12);
	overflow: hidden;
	border-top: 4px solid var(--brand);   /* franja de marca, alto contraste */
}

/* cabecera blanca: el logo a color resalta y el texto oscuro se lee bien */
.login-card .login-head {
	background: #fff;
	padding: 28px 28px 20px;
	text-align: center;
	border-bottom: 1px solid #eef0f3;
}
.login-card .login-head .login-logo {
	height: 64px;
	width: auto;
	margin-bottom: 10px;
}
.login-card .login-head h1 {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .3px;
	color: #2b3340;
}
.login-card .login-head p {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: #6b7480;
}

.login-card .login-body {
	padding: 26px 28px 28px;
}

/* alerta de error */
.login-card .login-error {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	background: #fdecec;
	border: 1px solid #f3c0bb;
	color: #c0392b;
	border-radius: 9px;
	padding: 10px 12px;
	font-size: 13px;
	margin-bottom: 18px;
}
.login-card .login-error .fa { margin-top: 2px; }
.login-card .login-error p { margin: 2px 0 0; font-size: 12px; color: #a93226; }

/* campos */
.login-card .login-field { margin-bottom: 16px; }
.login-card .login-field label {
	display: block;
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #6b7480;
}
.login-card .login-field input {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #dfe3e8;
	border-radius: 10px;
	background: #f7f8fa;
	font-size: 14.5px;
	color: #2b3340;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.login-card .login-field input::placeholder { color: #9aa3ad; }
.login-card .login-field input:focus {
	outline: none;
	background: #fff;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-soft);
}

/* botón acceder */
.login-card .login-btn {
	width: 100%;
	height: 46px;
	margin-top: 4px;
	border: 0;
	border-radius: 10px;
	background: var(--brand);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .3px;
	cursor: pointer;
	transition: filter .15s ease, box-shadow .15s ease, transform .12s ease;
}
.login-card .login-btn:hover {
	filter: brightness(1.05);
	box-shadow: 0 6px 16px var(--brand-soft);
}
.login-card .login-btn:active { transform: translateY(1px); }