/* ==========================================================================
   SGC - pantalla de login moderna y responsive (views/jsp/login.jsp).
   Se carga despues de login.css y lo pisa.
   ========================================================================== */

:root {
	--sgc-azul: #4689c9;
	--sgc-azul-oscuro: #2f6aa5;
	--sgc-azul-claro: #eaf2fb;
	--sgc-fondo: #f3f5f8;
	--sgc-borde: #dde3ea;
	--sgc-borde-campo: #c9d2dc;
	--sgc-texto: #2b3440;
	--sgc-texto-suave: #5f6b7a;
	--sgc-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {
	font-family: var(--sgc-fuente);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-width: 0;
	background: linear-gradient(180deg, var(--sgc-azul) 0, var(--sgc-azul) 220px, var(--sgc-fondo) 220px);
	color: var(--sgc-texto);
	font-family: var(--sgc-fuente);
	line-height: 1.4;
}

header#login-header {
	height: auto;
	padding: 14px 24px;
	border: none;
	background: transparent;
}

section#logo-header {
	padding: 0;
}

/* el logo de BHK es oscuro: sobre el azul se ve en blanco */
.logo {
	float: none;
	height: 26px;
	margin: 0;
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

section#main {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 40px;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: 960px;
	margin: 0 auto;
	padding: 24px 24px 32px;
	flex: 1 0 auto;
}

/* tarjeta de login */
section#content-login {
	float: none;
	box-sizing: border-box;
	width: 380px;
	max-width: 100%;
	padding: 32px 32px 28px;
	border: none;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.06);
}

header#header-login {
	margin: 0;
	text-align: center;
}

.logo-app {
	width: 190px;
	margin: 0;
}

section#content-login-box {
	margin: 24px 0 0;
}

section#content-login-box h2 {
	margin: 0 0 20px;
	color: var(--sgc-texto);
	font-size: 18px;
	font-weight: 600;
	text-align: center;
}

section#content-login-box label {
	margin: 0 0 16px;
}

.user-label,
.passwd-label {
	margin: 0 0 6px;
	color: var(--sgc-texto-suave);
	font-size: 13px;
	font-weight: 600;
}

section#content-login-box input[type="password"],
section#content-login-box input[type="text"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--sgc-borde-campo);
	border-radius: 8px;
	color: var(--sgc-texto);
	font-family: inherit;
	font-size: 16px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

section#content-login-box input[type="password"]:focus,
section#content-login-box input[type="text"]:focus {
	outline: none;
	border-color: var(--sgc-azul);
	box-shadow: 0 0 0 3px rgba(70, 137, 201, 0.2);
}

/* boton Ingresar (jQuery UI lo convierte en .ui-button) */
section#form-login input[type="submit"],
section#form-login input[type="submit"].ui-button,
section#form-login input[type="submit"].ui-state-default,
section#form-login input[type="submit"].ui-state-hover,
section#form-login input[type="submit"].ui-state-focus {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	margin: 8px 0 0;
	padding: 0 16px;
	border: 1px solid var(--sgc-azul);
	border-radius: 8px;
	background: var(--sgc-azul);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

section#form-login input[type="submit"]:hover,
section#form-login input[type="submit"].ui-state-hover {
	border-color: var(--sgc-azul-oscuro);
	background: var(--sgc-azul-oscuro);
}

/* error de login */
section#form-login .ui-state-error {
	margin: 0 0 16px;
	padding: 10px 12px;
	border: 1px solid #f0c4bf;
	border-left: 4px solid #c0392b;
	border-radius: 6px;
	background: #fdf3f2;
	color: #7d2016;
	font-size: 13px;
	line-height: 1.4;
}

section#form-login .ui-state-error p {
	margin: 0;
}

section#form-login .ui-state-error .ui-icon {
	display: none;
}

section#form-login .ui-state-error + br {
	display: none;
}

/* beneficios */
section#content-features {
	box-sizing: border-box;
	width: 400px;
	max-width: 100%;
	margin: 0;
	padding-top: 16px;
	color: #fff;
	font-size: 15px;
}

header#content-features-box {
	margin: 0 0 20px;
	line-height: 1.5;
	font-size: 17px;
}

header#content-features-box strong {
	color: #fff;
}

section#features-description,
section#features-description-middle {
	display: flex;
	align-items: center;
	gap: 16px;
	width: auto;
	height: auto;
	margin: 0 0 14px;
	padding: 14px 16px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
}

article#features-img {
	float: none;
	flex: 0 0 auto;
	line-height: 0;
}

.img-features {
	width: 44px;
	height: 44px;
	border-radius: 8px;
}

article#features-text {
	width: auto;
	padding: 0;
	color: var(--sgc-azul-oscuro);
	font-weight: 600;
	line-height: 1.35;
}

article#features-text span {
	color: var(--sgc-texto-suave);
	font-size: 13px;
}

/* pie */
footer#footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: 960px;
	margin: 0 auto;
	padding: 16px 24px 24px;
	color: var(--sgc-texto-suave);
	font-size: 13px;
}

section#content-footer-web,
section#content-footer-mail {
	float: none;
	width: auto;
	margin: 0;
}

footer#footer a {
	color: var(--sgc-azul-oscuro);
}

/* celular */
@media (max-width: 768px) {

	body {
		background: linear-gradient(180deg, var(--sgc-azul) 0, var(--sgc-azul) 160px, var(--sgc-fondo) 160px);
	}

	header#login-header {
		padding: 12px 16px;
	}

	section#main {
		gap: 24px;
		padding: 8px 16px 24px;
	}

	section#content-login {
		padding: 24px 20px 20px;
	}

	.logo-app {
		width: 160px;
	}

	/* los beneficios quedan abajo del login, compactos */
	section#content-features {
		padding-top: 0;
		color: var(--sgc-texto);
	}

	header#content-features-box {
		font-size: 15px;
	}

	header#content-features-box strong {
		color: var(--sgc-azul-oscuro);
	}

	section#features-description,
	section#features-description-middle {
		padding: 10px 12px;
		margin-bottom: 10px;
	}

	.img-features {
		width: 36px;
		height: 36px;
	}

	footer#footer {
		flex-direction: column;
		padding: 8px 16px 24px;
	}
}