/* =============================================================================
 *  LOGIN — CORPORACIÓN EDUCATIVA INDOAMERICANA (INSTITUCION = indoamericana)
 *  Misma estructura de los logins de COMFANDI y UC (css/Login/comfandi, css/Login/uc), con el look & feel
 *  de indoamericana.edu.co (institucional aeronáutico / marítimo):
 *    #0B1751 azul marino primario · #061748 / #050B28 azul profundo · #001F54 azul alterno
 *    #FFD500 dorado de acento (#EAD406 / #FFDF00 variantes) · #ECEEF3 neutro · #32373C texto
 *    Tipografía del portal: Cera (comercial) → pila "Montserrat", "Segoe UI", sans-serif (sin fuentes externas)
 * ============================================================================= */

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

.indo-login,
.indo-login .x-component,
.indo-login h1,
.indo-login h2,
.indo-login p,
.indo-login .x-form-item-label-default,
.indo-login .x-form-text-default,
.indo-login .x-btn-inner-default-small {
	font-family: 'Montserrat', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* -----------------------------------------------------------------------------
 * PANEL DE MARCA (solo escritorio, >= 900px)
 * -------------------------------------------------------------------------- */
.indo-marca {
	background-color: #0B1751;
	background-image:
		radial-gradient(ellipse at 85% 10%, rgba(0, 31, 84, 0.95) 0, rgba(0, 31, 84, 0) 55%),
		linear-gradient(160deg, #0B1751 0%, #061748 55%, #050B28 100%);
	color: #FFFFFF;
	overflow: hidden;
	position: relative;
}

/* Rutas de vuelo / navegación: arcos punteados concéntricos, muy sutiles */
.indo-marca-rutas {
	border: 2px dashed rgba(255, 213, 0, 0.18);
	border-radius: 50%;
	height: 760px;
	position: absolute;
	right: -380px;
	top: -300px;
	width: 760px;
}

.indo-marca-rutas:before,
.indo-marca-rutas:after {
	border-radius: 50%;
	content: '';
	position: absolute;
}

.indo-marca-rutas:before {
	border: 1px solid rgba(255, 255, 255, 0.08);
	bottom: 110px;
	left: 110px;
	right: 110px;
	top: 110px;
}

.indo-marca-rutas:after {
	border: 1px dashed rgba(255, 255, 255, 0.10);
	bottom: 220px;
	left: 220px;
	right: 220px;
	top: 220px;
}

/* Franja dorada inferior (eco de las alas y del acento amarillo del portal) */
.indo-marca-franja {
	background: linear-gradient(90deg, #FFD500 0, #FFD500 62%, #EAD406 62%, #EAD406 78%, transparent 78%);
	bottom: 0;
	height: 6px;
	left: 0;
	position: absolute;
	right: 0;
}

.indo-marca:after {
	background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0.22) 28px, transparent 28px, transparent 52px);
	bottom: 22px;
	content: '';
	height: 3px;
	left: 48px;
	position: absolute;
	width: 236px;
}

/* Logo a color sobre bloque blanco (el logo institucional trae texto azul marino) */
.indo-marca-logo {
	background-color: #FFFFFF;
	border-bottom: 4px solid #FFD500;
	border-radius: 6px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
	left: 48px;
	padding: 14px 22px;
	position: absolute;
	top: 56px;
	z-index: 1;
}

.indo-marca-logo img {
	display: block;
	max-height: 96px;
	max-width: 200px;
}

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

.indo-marca-kicker {
	color: #FFD500;
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	margin-bottom: 14px;
	text-transform: uppercase;
}

.indo-marca-texto h1 {
	color: #FFFFFF;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.18;
	margin: 0 0 16px 0;
}

.indo-marca-texto h1:after {
	background-color: #FFD500;
	content: '';
	display: block;
	height: 4px;
	margin-top: 16px;
	width: 64px;
}

.indo-marca-texto p {
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

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

@media (max-height: 640px) {
	.indo-marca-logo {
		top: 28px;
	}

	.indo-marca-logo img {
		max-height: 64px;
	}

	.indo-marca-texto {
		transform: translateY(-20%);
	}
}

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

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

.indo-logo-movil img {
	max-height: 96px;
	max-width: 100%;
}

@media (max-width: 899px) {
	.indo-lado-formulario,
	.indo-lado-formulario > .x-panel-bodyWrap > .x-panel-body {
		background-color: #ECEEF3;
	}

	.indo-tarjeta {
		background-color: #FFFFFF;
		border-radius: 10px;
		border-top: 5px solid #0B1751;
		box-shadow: 0 6px 22px rgba(11, 23, 81, 0.12);
	}

	.indo-logo-movil {
		display: block;
		margin-bottom: 18px;
	}

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

@media (max-width: 479px) {
	.indo-tarjeta {
		border-radius: 0;
		box-shadow: none;
	}
}

.indo-titulo h2 {
	color: #0B1751;
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 6px 0;
}

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

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

.indo-btn-sso.x-btn-over.x-btn-default-small,
.indo-btn-sso.x-btn-focus.x-btn-default-small,
.indo-btn-sso.x-btn-pressed.x-btn-default-small {
	background-color: #ECEEF3;
	border-color: #0B1751;
}

.indo-btn-sso .x-btn-inner-default-small {
	color: #32373C;
	font-size: 15px;
	font-weight: 600;
}

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

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

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

.indo-separador span {
	background-color: #FFFFFF;
	color: #858B9C;
	font-size: 13px;
	padding: 0 10px;
	position: relative;
}

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

.indo-campo .x-form-item-label-default {
	color: #32373C;
	font-size: 14px;
	font-weight: 600;
	padding-bottom: 6px;
}

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

.indo-campo .x-form-text-default {
	color: #32373C;
	font-size: 15px;
	height: 42px;
	min-height: 42px;
	padding: 0 14px;
}

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

.indo-campo .x-form-trigger-wrap-focus-default,
.indo-campo .x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
	border-color: #0B1751;
	box-shadow: 0 0 0 3px rgba(255, 213, 0, 0.45);
}

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

.indo-campo .x-form-empty-field-default,
.indo-campo .x-form-text-default.x-form-empty-field {
	color: #858B9C;
}

/* Botón principal: azul marino con texto blanco; al pasar, dorado con texto azul */
.indo-btn-principal.x-btn-default-small {
	background-color: #0B1751;
	border-color: #0B1751;
	border-radius: 8px;
}

.indo-btn-principal.x-btn-over.x-btn-default-small,
.indo-btn-principal.x-btn-pressed.x-btn-default-small {
	background-color: #FFD500;
	border-color: #FFD500;
}

.indo-btn-principal.x-btn-over .x-btn-inner-default-small,
.indo-btn-principal.x-btn-pressed .x-btn-inner-default-small {
	color: #0B1751;
}

.indo-btn-principal.x-btn-focus.x-btn-default-small {
	box-shadow: 0 0 0 3px rgba(255, 213, 0, 0.55);
}

.indo-btn-principal .x-btn-inner-default-small {
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.3px;
}

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

.indo-enlace a {
	color: #001F54;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.indo-enlace a:hover,
.indo-enlace a:focus {
	color: #0B1751;
	text-decoration: underline;
}

.indo-pie {
	color: #858B9C;
	font-size: 12px;
	margin-top: 28px;
}

.indo-pie b {
	color: #5A6072;
}

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