/* =============================================================================
 *  LOGIN — UNIEMPRESARIAL, Fundación Universitaria Empresarial de la Cámara de Comercio de Bogotá
 *  (INSTITUCION = uniempresarial). Misma estructura del login de TECMD/IPC/COMFANDI, con el look & feel
 *  de uniempresarial.edu.co (kit Elementor: primary #273474, secondary #EA0029, #48AAD3; Inter/Poppins):
 *    #273474 azul Uniempresarial (panel de marca, botón, títulos, enlaces 10.9:1)
 *    #1B2558 azul oscuro (hover) · #121A45 azul profundo (inicio del degradé)
 *    #EA0029 rojo Uniempresarial (acento: filete del titular, etiqueta, isotipo; no como texto pequeño)
 *    #48AAD3 celeste (solo formas decorativas) · #2B6CB0 azul de foco (5.2:1 sobre blanco)
 *    #2D3748 texto · #4A5568 texto secundario (7.5:1) · #E2E7F0 bordes
 *    Tipografía Poppins (titulares) + Inter (texto), las del portal
 * ============================================================================= */

.uniemp-login,
.uniemp-lado-formulario,
.uniemp-lado-formulario > .x-panel-bodyWrap > .x-panel-body {
	background-color: #FFFFFF;
}

/* Inter también en los componentes html (Triton les pone Open Sans 300) */
.uniemp-login,
.uniemp-login .x-form-item-label-default,
.uniemp-login .x-form-text-default,
.uniemp-login .x-btn-inner-default-small,
.uniemp-login .uniemp-titulo h2,
.uniemp-login .uniemp-titulo p,
.uniemp-login .uniemp-separador span,
.uniemp-login .uniemp-enlace a,
.uniemp-login .uniemp-pie {
	font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

/* -----------------------------------------------------------------------------
 * PANEL DE MARCA (solo escritorio, >= 900px)
 * -------------------------------------------------------------------------- */
.uniemp-marca {
	background-color: #273474;
	background-image:
		radial-gradient(circle at 85% 15%, rgba(72, 170, 211, 0.22) 0%, rgba(72, 170, 211, 0) 45%),
		linear-gradient(155deg, #121A45 0%, #273474 55%, #2F3F8C 100%);
	color: #FFFFFF;
	overflow: hidden;
	position: relative;
}

/* Dos círculos entrelazados, eco del isotipo "ue" (rojo + azul) */
.uniemp-marca-forma {
	border-radius: 50%;
	position: absolute;
}

.uniemp-marca-forma-1 {
	border: 34px solid rgba(255, 255, 255, 0.06);
	height: 420px;
	right: -190px;
	top: -210px;
	width: 420px;
}

.uniemp-marca-forma-2 {
	background-color: rgba(234, 0, 41, 0.88);
	bottom: -150px;
	height: 330px;
	right: -110px;
	width: 330px;
}

.uniemp-marca-forma-3 {
	border: 30px solid rgba(72, 170, 211, 0.55);
	bottom: -40px;
	height: 250px;
	right: 120px;
	width: 250px;
}

.uniemp-marca-forma-4 {
	background-color: #EA0029;
	height: 14px;
	right: 22%;
	top: 34%;
	width: 14px;
}

.uniemp-marca-logo {
	left: 56px;
	position: absolute;
	top: 56px;
	z-index: 1;
}

.uniemp-marca-logo img {
	display: block;
	height: auto;
	max-width: 300px;
	width: 100%;
}

.uniemp-marca-texto {
	left: 56px;
	max-width: 440px;
	position: absolute;
	right: 56px;
	top: 50%;
	transform: translateY(-38%);
	z-index: 1;
}

.uniemp-marca-etiqueta {
	background-color: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	color: #FFFFFF;
	display: inline-block;
	font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.4px;
	margin-bottom: 18px;
	padding: 6px 14px;
	text-transform: uppercase;
}

.uniemp-marca-texto h1 {
	color: #FFFFFF;
	font-family: 'Poppins', 'Inter', Arial, sans-serif;
	font-size: 36px;
	font-weight: 600;
	letter-spacing: -0.6px;
	line-height: 1.18;
	margin: 0 0 16px 0;
}

.uniemp-marca-texto h1:after {
	background-color: #EA0029;
	border-radius: 2px;
	content: '';
	display: block;
	height: 4px;
	margin-top: 18px;
	width: 64px;
}

.uniemp-marca-texto p {
	color: rgba(255, 255, 255, 0.88);
	font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

.uniemp-marca-pie {
	bottom: 36px;
	color: rgba(255, 255, 255, 0.85);
	font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
	font-size: 13px;
	letter-spacing: 0.2px;
	left: 56px;
	position: absolute;
	z-index: 1;
	line-height: 1.5;
	max-width: 280px;
}

/* Paneles angostos (900-1199px): los círculos se corren a la derecha para no pisar el pie */
@media (max-width: 1199px) {
	.uniemp-marca-forma-3 {
		right: -60px;
	}

	.uniemp-marca-forma-2 {
		right: -190px;
	}
}

@media (min-width: 1600px) {
	.uniemp-marca-logo img {
		max-width: 360px;
	}

	.uniemp-marca-texto {
		left: 96px;
		max-width: 520px;
	}

	.uniemp-marca-logo,
	.uniemp-marca-pie {
		left: 96px;
	}

	.uniemp-marca-logo {
		top: 72px;
	}

	.uniemp-marca-texto h1 {
		font-size: 44px;
	}
}

/* En pantallas de poca altura (portátiles 1366x650) el bloque de texto no debe pisar el logo */
@media (max-height: 640px) {
	.uniemp-marca-texto {
		transform: translateY(-25%);
	}

	.uniemp-marca-texto h1 {
		font-size: 30px;
	}
}

/* -----------------------------------------------------------------------------
 * TARJETA DEL FORMULARIO
 * -------------------------------------------------------------------------- */
.uniemp-tarjeta {
	box-sizing: border-box;
	padding: 32px 24px;
}

.uniemp-logo-movil {
	display: none;
	text-align: center;
}

.uniemp-logo-movil img {
	height: auto;
	max-width: 260px;
	width: 100%;
}

@media (max-width: 899px) {
	.uniemp-logo-movil {
		display: block;
		margin-bottom: 18px;
	}

	.uniemp-titulo {
		text-align: center;
	}
}

.uniemp-titulo h2 {
	color: #273474;
	font-family: 'Poppins', 'Inter', Arial, sans-serif !important;
	font-size: 26px;
	font-weight: 600;
	margin: 0 0 8px 0;
}

/* Sin proveedores SSO (p. ej. producción con Google apagado) no hay subtítulo: separar del campo Usuario */
.uniemp-titulo h2:last-child {
	margin-bottom: 22px;
}

.uniemp-titulo p {
	color: #4A5568;
	font-size: 14px;
	font-weight: 400;
	margin: 0 0 22px 0;
}

/* Botones de proveedor (Google primero): blancos, ancho completo */
.uniemp-btn-sso.x-btn-default-small {
	background-color: #FFFFFF;
	border: 1px solid #E2E7F0;
	border-radius: 8px;
	box-shadow: none;
}

.uniemp-btn-sso.x-btn-over.x-btn-default-small,
.uniemp-btn-sso.x-btn-focus.x-btn-default-small,
.uniemp-btn-sso.x-btn-pressed.x-btn-default-small {
	background-color: #F7FAFC;
	border-color: #C3CCDA;
}

/* Foco visible con teclado (anillo azul de la espiral, >= 3:1 sobre blanco) */
.uniemp-btn-sso.x-btn-focus.x-btn-default-small {
	border-color: #2B6CB0;
	box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.35);
}

.uniemp-btn-sso .x-btn-inner-default-small {
	color: #2D3748;
	font-size: 15px;
	font-weight: 600;
}

.uniemp-btn-sso .x-btn-icon-el-default-small {
	background-size: 18px 18px;
}

/* Separador "o con usuario y contraseña" */
.uniemp-separador {
	margin: 8px 0 14px 0;
	position: relative;
	text-align: center;
}

.uniemp-separador:before {
	border-top: 1px solid #E2E7F0;
	content: '';
	left: 0;
	position: absolute;
	right: 0;
	top: 50%;
}

.uniemp-separador span {
	background-color: #FFFFFF;
	color: #4A5568;
	font-size: 13px;
	font-weight: 400;
	padding: 0 10px;
	position: relative;
}

/* Campos: etiqueta arriba, 44px de alto */
.uniemp-campo {
	margin-bottom: 14px;
}

.uniemp-campo .x-form-item-label-default {
	color: #2D3748;
	font-size: 14px;
	font-weight: 600;
	padding-bottom: 6px;
}

.uniemp-campo .x-form-trigger-wrap-default {
	border: 1px solid #CBD2DE;
	border-radius: 8px;
	overflow: hidden;
}

.uniemp-campo .x-form-text-default {
	color: #1A202C;
	font-size: 15px;
	height: 42px;
	min-height: 42px;
	padding: 0 14px;
}

.uniemp-campo .x-form-trigger-default {
	color: #718096;
	height: 42px;
	line-height: 42px;
	width: 42px;
}

.uniemp-campo .x-form-trigger-wrap-focus-default,
.uniemp-campo .x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
	border-color: #2B6CB0;
	box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.22);
}

.uniemp-campo .x-form-trigger-wrap-invalid-default,
.uniemp-campo .x-form-trigger-wrap-default.x-form-trigger-wrap-invalid {
	border-color: #C62828;
}

.uniemp-campo .x-form-empty-field-default,
.uniemp-campo .x-form-text-default.x-form-empty-field,
.uniemp-campo .x-form-text-default::placeholder {
	color: #4A5568;
	opacity: 1;
}

/* Botón principal */
.uniemp-btn-principal.x-btn-default-small {
	background-color: #273474;
	border-color: #273474;
	border-radius: 8px;
}

.uniemp-btn-principal.x-btn-over.x-btn-default-small,
.uniemp-btn-principal.x-btn-focus.x-btn-default-small,
.uniemp-btn-principal.x-btn-pressed.x-btn-default-small {
	background-color: #1B2558;
	border-color: #1B2558;
}

.uniemp-btn-principal.x-btn-focus.x-btn-default-small {
	box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #2B6CB0;
}

.uniemp-btn-principal .x-btn-inner-default-small {
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
}

.uniemp-enlace {
	margin-top: 14px;
}

.uniemp-enlace a {
	color: #273474;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.uniemp-enlace a:hover,
.uniemp-enlace a:focus {
	color: #1B2558;
	text-decoration: underline;
}

.uniemp-enlace a:focus {
	border-radius: 2px;
	outline: 2px solid #2B6CB0;
	outline-offset: 3px;
}

.uniemp-pie {
	color: #4A5568;
	font-size: 12px;
	font-weight: 400;
	margin-top: 28px;
}

.uniemp-pie b {
	color: #2D3748;
}

@media (max-width: 899px) {
	.uniemp-enlace,
	.uniemp-pie {
		text-align: center;
	}
}

/* Lado del formulario: fondo claro con un toque de la paleta y la tarjeta elevada */
.uniemp-lado-formulario > .x-panel-bodyWrap > .x-panel-body {
	background-color: #F7FAFC;
	background-image: linear-gradient(180deg, #FFFFFF 0%, #F3F6FA 100%);
}

.uniemp-tarjeta {
	background-color: #FFFFFF;
	border: 1px solid #E2E7F0;
	border-radius: 16px;
	box-shadow: 0 18px 40px -18px rgba(18, 26, 69, 0.28);
	padding: 36px 32px 28px 32px;
}

.uniemp-tarjeta:before {
	background-image: linear-gradient(90deg, #EA0029 0%, #EA0029 30%, #273474 30%, #273474 100%);
	border-radius: 16px 16px 0 0;
	content: '';
	height: 4px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

@media (max-width: 479px) {
	.uniemp-lado-formulario > .x-panel-bodyWrap > .x-panel-body {
		background-image: none;
		background-color: #FFFFFF;
	}

	.uniemp-tarjeta {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 28px 22px;
	}

	.uniemp-tarjeta:before {
		display: none;
	}
}

/* Alertas del login (Ext.Msg): encabezado azul institucional con filete rojo, botón como el principal */
.uniemp-login .x-message-box.x-window-default {
	border: 0;
	border-radius: 12px;
	box-shadow: 0 18px 40px -12px rgba(18, 26, 69, 0.45);
	overflow: hidden;
}

.uniemp-login .x-message-box .x-window-header-default {
	background-color: #273474;
	border: 0;
	box-shadow: inset 0 -3px 0 #EA0029;
}

.uniemp-login .x-message-box .x-window-header-title-default,
.uniemp-login .x-message-box .x-window-header-default .x-tool-tool-el {
	color: #FFFFFF;
	font-family: 'Poppins', 'Inter', Arial, sans-serif;
	font-weight: 600;
}

.uniemp-login .x-message-box .x-window-body-default,
.uniemp-login .x-message-box .x-toolbar-footer {
	background-color: #FFFFFF;
	border: 0;
	color: #2D3748;
	font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

.uniemp-login .x-message-box .x-btn-default-small {
	background-color: #273474;
	border-color: #273474;
	border-radius: 8px;
}

.uniemp-login .x-message-box .x-btn-over.x-btn-default-small,
.uniemp-login .x-message-box .x-btn-focus.x-btn-default-small {
	background-color: #1B2558;
	border-color: #1B2558;
}

.uniemp-login .x-message-box .x-btn-inner-default-small {
	color: #FFFFFF;
	font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
	font-weight: 600;
}