/***
 Login page - Diseno split premium
 Reemplaza a assets/css/pages/login.css (el viejo se conserva como respaldo)
 v1 - 2026-09-15
***/

	/* ======================================================================
	   LOGIN SPLIT - Estilos propios (ya NO depende de assets/css/pages/login.css)
	   ====================================================================== */
	html,
	body {
		height: 100%;
	}

	body.login {
		margin: 0;
		padding: 0;
		background: #0b1220;
		font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
		color: #0f172a;
		overflow: hidden;
		/* sin scroll: el alto lo maneja .login-split */
	}

	/* Clase de Metronic que usa el JS para mostrar/ocultar pasos */
	.display-hide {
		display: none;
	}

	.login-split {
		display: flex;
		height: 100vh;
		width: 100%;
	}

	/* ---------- Panel izquierdo (imagen hero) ---------- */
	.login-hero {
		flex: 1 1 58%;
		position: relative;
		background-color: #060b16;
		background-image: url("../../img/login-hero.jpg?v=1");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		display: flex;
		align-items: flex-end;
		padding: 44px 52px;
		overflow: hidden;
	}

	.login-hero:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(90deg, rgba(4, 9, 20, .90) 0%, rgba(4, 9, 20, .55) 45%, rgba(4, 9, 20, .20) 100%);
	}

	.login-hero .hero-inner {
		position: relative;
		z-index: 2;
		max-width: 560px;
		color: #fff;
	}

	.hero-eyebrow {
		display: block;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 2.4px;
		text-transform: uppercase;
		color: #f5b400;
		margin-bottom: 18px;
	}

	.hero-eyebrow:before {
		content: '';
		width: 34px;
		height: 2px;
		background: #f5b400;
		display: inline-block;
		vertical-align: middle;
		margin-right: 10px;
	}

	.hero-inner h1 {
		font-size: 44px;
		line-height: 1.08;
		font-weight: 800;
		margin: 0 0 18px;
		color: #fff;
	}

	.hero-inner h1 span {
		color: #f5b400;
		display: block;
	}

	.hero-inner p {
		font-size: 16px;
		line-height: 1.6;
		color: rgba(255, 255, 255, .78);
		margin: 0 0 30px;
		max-width: 470px;
	}

	.hero-features {
		display: flex;
		flex-wrap: wrap;
	}

	.hero-features .feat {
		font-size: 13px;
		font-weight: 500;
		color: rgba(255, 255, 255, .85);
		margin-right: 26px;
		margin-bottom: 8px;
	}

	.hero-features .feat i {
		color: #4f8cff;
		font-size: 15px;
		margin-right: 7px;
	}

	/* ---------- Panel derecho (formulario) ---------- */
	.login-panel {
		flex: 1 1 42%;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 22px 26px;
		height: 100vh;
		overflow-y: auto;
	}

	.login-panel-inner {
		width: 100%;
		max-width: 390px;
	}

	.login-panel-inner .brand {
		margin-bottom: 16px;
	}

	.login-panel-inner .brand img {
		max-width: 160px;
		height: auto;
	}

	.form-title {
		font-size: 23px;
		font-weight: 800;
		color: #0f172a;
		margin: 0 0 4px;
		line-height: 1.2;
	}

	.form-subtitle {
		font-size: 13.5px;
		color: #64748b;
		margin: 0 0 16px;
	}

	.login-panel-inner label.control-label {
		display: block;
		font-size: 12.5px;
		font-weight: 600;
		color: #334155;
		margin-bottom: 7px;
		text-transform: none;
	}

	.login-panel-inner .required {
		color: #dc2626;
		font-weight: 500;
	}

	.hint-required {
		font-size: 12px;
		color: #94a3b8;
		margin-bottom: 14px;
		font-weight: 400;
	}

	/* Input con ícono */
	.login-panel-inner .form-group {
		margin-bottom: 14px;
	}

	.login-panel-inner .input-icon {
		position: relative;
	}

	.login-panel-inner .input-icon > i {
		position: absolute;
		left: 14px;
		top: 14px;
		color: #94a3b8;
		font-size: 15px;
		z-index: 2;
	}

	.login-panel-inner .input-icon > i#show-hide-pwd {
		left: auto;
		right: 14px;
		top: 14px;
		color: #94a3b8;
		cursor: pointer;
	}

	.login-panel-inner .input-icon > i#show-hide-pwd:hover {
		color: #2563eb;
	}

	.login-panel-inner .form-control {
		height: 44px;
		border: 1px solid #e2e8f0;
		border-radius: 10px;
		background: #f8fafc;
		padding: 10px 42px 10px 42px !important;
		font-size: 14px;
		color: #0f172a;
		box-shadow: none;
		transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
		width: 100%;
	}

	.login-panel-inner .form-control::-webkit-input-placeholder {
		color: #a3aec0;
	}

	.login-panel-inner .form-control::placeholder {
		color: #a3aec0;
	}

	.login-panel-inner .form-control:focus {
		border-color: #2563eb;
		background: #fff;
		box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
		outline: none;
	}

	.login-panel-inner .has-error .form-control {
		border-color: #dc2626;
		background: #fff5f5;
	}

	.login-panel-inner .help-block {
		display: block;
		font-size: 12px;
		color: #dc2626;
		margin-top: 6px;
	}

	.login-panel-inner .input-icon a,
	.link-inline {
		display: inline-block;
		margin-top: 7px;
		font-size: 12.5px;
		color: #2563eb;
		text-decoration: none;
		font-weight: 500;
	}

	.login-panel-inner .input-icon a:hover,
	.link-inline:hover {
		text-decoration: underline;
		color: #1d4ed8;
	}

	/* Botones */
	.login-panel-inner .form-actions {
		margin-top: 16px;
	}

	.login-panel-inner .btn {
		display: block;
		width: 100%;
		height: 44px;
		border-radius: 10px;
		font-size: 14.5px;
		font-weight: 600;
		border: none;
		padding: 0 22px;
		margin-bottom: 8px;
		box-shadow: none;
		float: none !important;
		transition: all .18s ease;
	}

	.login-panel-inner .btn.btn-info {
		background: linear-gradient(90deg, #2563eb 0%, #4f46e5 100%);
		color: #fff;
	}

	.login-panel-inner .btn.btn-info:hover,
	.login-panel-inner .btn.btn-info:focus {
		background: linear-gradient(90deg, #1d4ed8 0%, #4338ca 100%);
		color: #fff;
		box-shadow: 0 8px 20px rgba(37, 99, 235, .28);
	}

	.login-panel-inner .btn.btn-info.disabled,
	.login-panel-inner .btn.btn-info[disabled] {
		opacity: .55;
		box-shadow: none;
	}

	.login-panel-inner .btn.btn-default,
	.login-panel-inner .btn.btn-warning {
		background: #f1f5f9;
		color: #334155;
	}

	.login-panel-inner .btn.btn-default:hover,
	.login-panel-inner .btn.btn-warning:hover {
		background: #e2e8f0;
		color: #0f172a;
	}

	.secure-note {
		margin-top: 10px;
		text-align: center;
		font-size: 11.5px;
		color: #94a3b8;
		line-height: 1.7;
	}

	.secure-note i {
		color: #16a34a;
	}

	.secure-note a {
		color: #2563eb;
		text-decoration: none;
	}

	/* Recuperación / OTP */
	#forget-form,
	#form-session {
		display: none;
	}

	#forget-form p,
	#form-session p {
		font-size: 13px;
		color: #64748b;
		line-height: 1.65;
		margin: 0 0 10px;
	}

	.timer {
		width: 100%;
		font-size: 12px;
		color: #fff;
		background: #2563eb;
		border-radius: 10px;
		padding: 15px;
		text-align: center;
		margin-bottom: 10px;
		float: none !important;
	}

	.help-icon {
		float: right;
		color: #94a3b8;
		font-size: 16px;
	}

	.help-icon:hover {
		color: #2563eb;
	}

	/* Copyright */
	.copyright {
		margin-top: 16px;
		text-align: center;
		font-size: 11px;
		color: #94a3b8;
		line-height: 1.55;
	}

	.footer-ssl {
		margin-top: 8px;
		text-align: center;
	}

	/* En pantallas bajas, aún más compacto para no generar scroll */
	@media (min-width: 992px) and (max-height: 760px) {
		.login-hero {
			padding: 32px 40px;
		}

		.hero-inner h1 {
			font-size: 32px;
			margin-bottom: 12px;
		}

		.hero-inner p {
			font-size: 14.5px;
			margin-bottom: 18px;
		}

		.hero-eyebrow {
			margin-bottom: 12px;
		}

		.login-panel-inner .brand {
			margin-bottom: 10px;
		}

		.login-panel-inner .brand img {
			max-width: 135px;
		}

		.form-title {
			font-size: 20px;
		}

		.form-subtitle {
			margin-bottom: 12px;
		}

		.hint-required {
			margin-bottom: 10px;
		}

		.login-panel-inner .form-group {
			margin-bottom: 11px;
		}

		.login-panel-inner .form-control,
		.login-panel-inner .btn {
			height: 40px;
		}

		.login-panel-inner .input-icon > i,
		.login-panel-inner .input-icon > i#show-hide-pwd {
			top: 12px;
		}

		.login-panel-inner .form-actions {
			margin-top: 12px;
		}

		.copyright {
			margin-top: 10px;
		}

		.footer-ssl {
			display: none;
		}
	}

	/* ---------- Responsive ---------- */
	@media (max-width: 1200px) {
		.hero-inner h1 {
			font-size: 36px;
		}

		.login-hero {
			padding: 40px;
		}
	}

	@media (max-width: 991px) {
		body.login {
			overflow: auto;
		}

		.login-split {
			flex-direction: column;
			height: auto;
			min-height: 100vh;
		}

		.login-hero {
			flex: none;
			min-height: 250px;
			padding: 28px 24px;
		}

		.hero-inner h1 {
			font-size: 28px;
		}

		.hero-inner p {
			display: none;
		}

		.login-panel {
			flex: 1 1 auto;
			height: auto;
			padding: 28px 20px;
		}
	}

	@media (max-width: 480px) {
		.login-hero {
			min-height: 170px;
		}

		.hero-features {
			display: none;
		}

		.form-title {
			font-size: 22px;
		}
	}

	/* ======================================================================
	   AJUSTES v2
	   ====================================================================== */

	/* FIX: la regla ".login-panel-inner .btn { display:block }" le ganaba a
	   ".display-hide", por eso se veian los tres botones a la vez.
	   Se sube la especificidad SIN !important para que jQuery .show() siga
	   funcionando (el display inline debe poder mandar). */
	.login-panel-inner .btn.display-hide,
	.login-panel-inner .form-group.display-hide,
	.login-panel-inner .display-hide {
		display: none;
	}

	/* Logo de la empresa centrado. El resto del panel queda alineado
	   a la izquierda, como estaba. */
	.login-panel-inner .brand {
		text-align: center;
	}

	.login-panel-inner .brand img {
		display: block;
		max-width: 200px;
		margin-left: auto;
		margin-right: auto;
	}