/* =============================================================================
 *  LOGIN — FUNDACIÓN UNIVERSITARIA COMFAMILIAR RISARALDA (INSTITUCION = uc)
 *  Misma estructura del login de COMFANDI (css/Login/comfandi/style.css), con el look & feel de uc.edu.co:
 *    #1D2B50 azul marino del portal (panel de marca, hover) · #17375F azul del logo (botón)
 *    #1989C9 / #2576A6 azules del logo (mosaico, foco, enlaces) · #009CD9 cian del portal (acento)
 *    Tipografía Open Sans (la del portal) · #1B2432 texto · #5B6B82 texto secundario · #D0D9E2 bordes
 * ============================================================================= */

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

.uc-login,
.uc-login .x-form-item-label-default,
.uc-login .x-form-text-default,
.uc-login .x-btn-inner-default-small {
	font-family: 'Open Sans', Arial, sans-serif;
}

/* -----------------------------------------------------------------------------
 * PANEL DE MARCA (solo escritorio, >= 900px)
 * -------------------------------------------------------------------------- */
.uc-marca {
	background-color: #1D2B50;
	color: #FFFFFF;
	overflow: hidden;
	position: relative;
}

/* Franja de mosaico de la identidad UC (cuadros en tonos azules, como en uc.edu.co) */
.uc-marca-mosaico {
	background-color: #2C3F66;
	background-image:
		linear-gradient(90deg, transparent 0, transparent 56px, rgba(29, 43, 80, 0.55) 56px, rgba(29, 43, 80, 0.55) 112px, transparent 112px),
		linear-gradient(90deg, rgba(25, 137, 201, 0.85) 0, rgba(25, 137, 201, 0.85) 56px, transparent 56px, transparent 168px, rgba(37, 118, 166, 0.85) 168px, rgba(37, 118, 166, 0.85) 224px, transparent 224px);
	background-position: 0 0, 112px 56px;
	background-repeat: repeat-x;
	background-size: 280px 56px, 336px 56px;
	height: 112px;
	left: 0;
	opacity: 0.9;
	position: absolute;
	right: 0;
	top: 0;
}

/* Círculo decorativo cian, esquina inferior derecha (eco de la "c" del logo) */
.uc-marca:after {
	background-color: rgba(0, 156, 217, 0.22);
	border-radius: 50%;
	bottom: -140px;
	content: '';
	height: 360px;
	position: absolute;
	right: -120px;
	width: 360px;
}

/* Logo a color sobre bloque blanco, como en la portada institucional */
.uc-marca-logo {
	background-color: #FFFFFF;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	left: 48px;
	padding: 16px 20px;
	position: absolute;
	top: 152px;
	z-index: 1;
}

.uc-marca-logo img {
	display: block;
	max-height: 76px;
	max-width: 280px;
}

.uc-marca-texto {
	left: 48px;
	max-width: 360px;
	position: absolute;
	right: 48px;
	top: 50%;
	transform: translateY(10%);
	z-index: 1;
}

.uc-marca-texto h1 {
	color: #FFFFFF;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.2;
	margin: 0 0 14px 0;
}

.uc-marca-texto h1:after {
	background-color: #009CD9;
	content: '';
	display: block;
	height: 4px;
	margin-top: 14px;
	width: 56px;
}

.uc-marca-texto p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
}

.uc-marca-pie {
	bottom: 36px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
	left: 48px;
	letter-spacing: 0.3px;
	position: absolute;
	z-index: 1;
}

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

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

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

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

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

.uc-titulo h2 {
	color: #1B2432;
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 6px 0;
}

.uc-titulo p {
	color: #5B6B82;
	font-size: 14px;
	margin: 0 0 22px 0;
}

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

.uc-btn-sso.x-btn-over.x-btn-default-small,
.uc-btn-sso.x-btn-focus.x-btn-default-small,
.uc-btn-sso.x-btn-pressed.x-btn-default-small {
	background-color: #F5F7FA;
	border-color: #B8C4D1;
}

.uc-btn-sso .x-btn-inner-default-small {
	color: #1B2432;
	font-size: 15px;
	font-weight: 600;
}

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

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

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

.uc-separador span {
	background-color: #FFFFFF;
	color: #8A96A8;
	font-size: 13px;
	padding: 0 10px;
	position: relative;
}

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

.uc-campo .x-form-item-label-default {
	color: #1B2432;
	font-size: 14px;
	font-weight: 600;
	padding-bottom: 6px;
}

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

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

.uc-campo .x-form-trigger-default {
	color: #5B6B82;
	line-height: 42px;
	height: 42px;
	width: 42px;
}

.uc-campo .x-form-trigger-wrap-focus-default,
.uc-campo .x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
	border-color: #2576A6;
	box-shadow: 0 0 0 3px rgba(25, 137, 201, 0.20);
}

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

.uc-campo .x-form-empty-field-default,
.uc-campo .x-form-text-default.x-form-empty-field {
	color: #8A96A8;
}

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

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

.uc-btn-principal.x-btn-focus.x-btn-default-small {
	box-shadow: 0 0 0 3px rgba(25, 137, 201, 0.35);
}

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

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

.uc-enlace a {
	color: #2576A6;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.uc-enlace a:hover,
.uc-enlace a:focus {
	color: #17375F;
	text-decoration: underline;
}

.uc-pie {
	color: #8A96A8;
	font-size: 12px;
	margin-top: 28px;
}

.uc-pie b {
	color: #5B6B82;
}

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