/*********************
	ESTILOS ADMIN
**********************/
.div-editor {
	border: 1px solid orange; 
	background-color: yellow; 
	padding: 1px;
	display: none;
	z-index: 10;
	font-size: 9px;
}
.div-editor a {
	padding:1px !important;
}
.editor-mostrar {
	display: inline;
}
.tabla-0 {
	padding: 0;
	margin: 0;		
	BORDER-COLLAPSE: collapse;
	empty-cells: hide;
}
.encabezado {
	width: 100%;
	margin-bottom:5px;
}
#editor_previsualizacion {
	position: fixed;
	width: 100%;
	_position: absolute;
	left: 0px;
	bottom: 0px;
	background-color: white;
	border: 1px solid gray;
	padding: 6px;
	padding-left: 0;
	text-align: right;
	vertical-align:middle;
}
#editor_previsualizacion a {
	text-decoration: none;
}
#editor_previsualizacion img {
	vertical-align: middle;
	margin-left: 7px;	
}
#vinculo_logger {
	white-space: nowrap;
	text-decoration: none;
	color: white;
}
#editor_previsualizacion_cont * {
	font-size: 9px;
}
#editor_previsualizacion_vis {
	display: block;
	float: left;
}
#editor_previsualizacion_acc {
	display: block;
	padding-right: 5px;
}


/*************************************
			Estilos Generales
**************************************/

form {
	padding: 0;
	margin: 0;
}
img {
	margin: 0;
	border: none;
}
.div-esperar {
	border: 1px solid black; 
	position: absolute; 
	text-align: center; 
	background-color: white; 
	width: 100px;
	right: 0px;
	font-weight: bold;
}

html {
    font-size: 62.5%; /* 16px =~ 1em entonces 0.625em =~ 10px http://pxtoem.com/ */
}

body {
	padding: 0px;
	margin: 0px;
    height: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

body > .div-esperar { position: fixed; }

.ayuda {
	cursor: help;
}
a .ayuda, a.ayuda {
	cursor: pointer;
	_cursor: auto;
}
button.ayuda, button .ayuda {
	cursor: auto;
}
legend {
	font-weight: bold;
	font-size: 1.1em;
	color: #333333;
}
.enc-logo {
}
.enc-cambio-proy {
	float: right;
	margin: 5px;
	margin-right: 20px;
}
.enc-cambio-proy img {
	vertical-align:middle;
	margin-right: 5px;
}
.enc-usuario {
	float: right;
	margin-top: 5px;
	text-align: right;
}
.enc-version {
	padding: 4px; 
	float: right;
	text-align: right;
}
.enc-usuario-nom {
	display: block;
	    color: #078fc4 !important;
	font-weight: bold;
}
.enc-usuario-id {
}
.enc-botonera {
	clear: none !important;
	margin-top:2px;
}
.enc-botonera .ei-boton-izq {
	float:none;
}
.enc-salir {
	float: right;
	margin: 5px;
	margin-top: 5px;
}
.cuerpo {
	margin-top: 15px; 
	margin-bottom: 15px;
}
.logo {
	text-align: center;
	margin-top: 100px;
}
.menu-link-nueva-ventana {
	padding: 2px 2px 2px 0px;
}

#capa_espera {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     z-index: 1000;
}

#capa_espera div {
	text-align:center; 
	padding: 30px; 
	border-color: #f1e5dd; 
	border: 1px solid; 
	z-index: 1000;	
	background-color: white;
    margin: 100px auto;
    font-weight: bold;
    width: 500px;	
	
}

.icono-utileria img {
	vertical-align: top;
	margin-right: 3px;
}

/*************************************
		Elementos de Interface
**************************************/
.ei-base {
	padding: 0;
	margin: 0;	
	border-collapse: collapse;
	text-align: left;
	empty-cells: hide;
}
.ei-cuerpo {}
.ei-barra-sup {
	text-align: left;
	min-height: 24px;	
	_height:24px;
	padding-top:4px;
}
.ei-barra-sup-sin-botonera {
	min-height: 18px;
	_height:18px;
	padding:0;
}
.ei-barra-sup-desc {
	float: right;
}
.ei-barra-sup-tit {
	font-weight: bold;
	margin-left: 4px;
	margin-right: 4px;
}
.ei-barra-sup-iconos {
	float: left;
}
.ei-barra-colapsar {}
.ei-barra-mensajeria {
padding-left:4px;
}
.ei-botonera {
	clear: both;
	text-align: right;
	padding-right:5px;
	padding-left:5px;
	min-height: 25px;
}
/* La botonera dentro de la barra superior flota para que se vea al mismo nivel */
.ei-barra-sup .ei-botonera {
	float: right;
}
/* Excepto que no tenga titulo */
.ei-barra-sup-sin-tit .ei-botonera {
	float:none;
}
.ei-boton, .ei-boton-centro, .ei-boton-izq, .ei-boton-alta, .ei-boton-mod, .ei-boton-canc, .ei-boton-filtrar, .ei-boton-limpiar, .ei-boton-baja {
	white-space: nowrap;	
}

.ei-boton-izq {
	float: left;
	margin-right: 3px;
}
.ei-boton-centro {
	margin-right: 30%;

}
.ei-boton-defecto {}

.ei-boton-fila {}

.ei-archivos-listado {
	clear: left;
	min-height: 25px;
	display: block;	
}
.ei-archivos-carpeta {
	margin-left: 10px;
}
/*************************
		Form. Com n
**************************/

.ei-form-base {
}
.ei-form-cuerpo {
	padding-top:2px;
}

.ei-form-cuerpo td {
	vertical-align: top;
}
.ei-form-fila {
	padding: 0px 10px 5px 8px;
	margin: 0;
	text-align: left;
	clear:both;
	white-space: nowrap;
	vertical-align: middle;
}
.ei-form-fila-desc {
	display:block;
	margin-left: 20px;
	padding-bottom: 10px;
	color: #6c6c6c;
	white-space: normal;		
}
.ei-form-fila-oculta, .ei-form-fila-filtrada {
}
.ei-form-expansion {
	text-align:center;
}
.ei-form-etiq, .ei-form-etiq-oblig {
	float: left;
	margin-right: 4px;
	line-height: 23px;
}
.ei-form-etiq-oblig, .ei-filtro-etiq-oblig {
	font-weight: bold;
}

/*************************
		Form. ML
**************************/

.ei-ml-base {}
.ei-ml-grilla, .ei-filtro-grilla {
	padding: 0;
	margin: 0;		
	BORDER-COLLAPSE: collapse;
	empty-cells: hide;
	margin-bottom: 5px;
}
.ei-ml-botonera {
	text-align:left;
	padding-top:4px;
	padding-left:5px;
	min-height:30px;
}
.ei-ml-botonera-exportar {
	text-align:left;
	padding-top:4px;
	padding-left:5px;
	min-height:25px;
}
.ei-ml-botonera-exportar img{
	float: left;
	padding: 2px;
}
.ei-ml-botonera button {
	padding:0;
	margin:1px;
}
.ei-ml-columna, .ei-filtro-columna {
	padding: 2px 2px 4px 2px;
	vertical-align: bottom;
	text-align: center;
	font-weight: normal;
}
.ei-ml-columna-evt {
	text-align: right;
}
.ei-ml-fila, .ei-ml-fila-selec, .ei-filtro-fila, .ei-filtro-fila-selec {
	padding: 0px 3px 0px 3px;
	margin: 0px;
}
.ei-ml-fila-selec {
}
.ei-ml-fila-total {
	padding: 2px 0px 2px 0px;
	text-align: center;
}
.ei-ml-etiq, .ei-ml-etiq-oblig {
	text-align: center;
}
.ei-ml-etiq-oblig {
	font-weight: bold;
}

/*****************
	filtro
******************/
.ei-filtro-valor {
}
.ei-filtro-cond {
	text-align: right;
}
.ei-filtro-col {
	white-space: nowrap;
}
.ei-filtro-borrar {
	text-align: right;
}


/*****************
		EFS
******************/

.ef-input, .ef-upload {
}
.ef-multi-check, .ef-radio, .ef-fecha, .ef-popup{
	white-space: nowrap;
	display: block;
}
.ef-fecha img, .ef-popup img {
	vertical-align: top;
	margin-left: 2px;
}
.ef-fijo {
	text-align: left;
}
.ef-multi-sel-todos {
	font-size: 0.9em;
	white-space: nowrap;
}
.ef-multi-sel-lista {
}
.ef-multi-sel-check {
}
.ef-multi-sel-doble {
	font-weight:normal;
}
.ef-multi-doble-boton {
	cursor: pointer;
	cursor: hand;	
}
.ef-barra-divisora {
	text-align: left;
	padding-left:10px;
	margin-bottom: 2px;
	margin: 8px 5px 5px 2px;
	font-weight: bold;
}
.ef-numero {
	text-align: right
}

.ef-upload {
	display: block;
}
.ef-upload-desc {
	white-space: nowrap;
}
.ef-textarea {
}
.ef-combo {
}
.ef-combo-editable {
}
.ef-combo-editable-ayuda {
	color: #AAAAAA;
	display: block;
	font-style: italic;
	top: -16px;
	left: 8px;
	height: 0px;
	position: relative;		
	z-index: 99;
}
.ef-checkbox {
}
.ef-cuit {
	white-space:nowrap;
}
.ef-captcha{
	margin-bottom: 5px;
	margin-left: 4px;
}
.ef-captcha img {
	vertical-align: middle;
}
.ef-popup a {
	margin-right:5px;
}
.ef-html {
	font-family: Arial, Verdana, Sans-Serif;
	padding: 5px 5px 5px 5px;
	margin: 0px;
	border-style: none;
	background-color: #ffffff;	
}
.ef-editable-unidad {
	white-space: nowrap;
	margin-right: 5px;
}
.ef-fecha-hora img {
	vertical-align: middle;
	margin-left: 2px;
}
.ef-editable-clave-barra-info {
	width: 100px;
	float: right;
	position: relative;
	top: -10px;
	left: 10px;
}
.ef-editable-clave-fortaleza {
	font-size: 1px;
	height: 3px;
	width: 0px;
	border: 1px solid white;
}

/***************************
		FECHA
****************************/
.cpYearNavigation,.cpMonthNavigation { background-color:#C0C0C0; text-align:center; vertical-align:center; text-decoration:none; color:#000000; font-weight:bold; }
.cpDayColumnHeader, .cpYearNavigation,.cpMonthNavigation,.cpCurrentMonthDate,.cpCurrentMonthDateDisabled,.cpOtherMonthDate,.cpOtherMonthDateDisabled,.cpCurrentDate,.cpCurrentDateDisabled,.cpTodayText,.cpTodayTextDisabled,.cpText { font-family:arial; font-size:8pt; }
TD.cpDayColumnHeader { text-align:right; border:solid thin #C0C0C0;border-width:0px 0px 1px 0px; }
.cpCurrentMonthDate, .cpOtherMonthDate, .cpCurrentDate  { text-align:right; text-decoration:none; }
.cpCurrentMonthDateDisabled, .cpOtherMonthDateDisabled, .cpCurrentDateDisabled { color:#D0D0D0; text-align:right; text-decoration:line-through; }
.cpCurrentMonthDate, .cpCurrentDate { color:#000000; }
.cpOtherMonthDate { color:#808080; }
TD.cpCurrentDate { color:white; background-color: #C0C0C0; border-width:1px; border:solid thin #800000; }
TD.cpCurrentDateDisabled { border-width:1px; border:solid thin #FFAAAA; }
TD.cpTodayText, TD.cpTodayTextDisabled { border:solid thin #C0C0C0; border-width:1px 0px 0px 0px;}
A.cpTodayText, SPAN.cpTodayTextDisabled { height:20px; }
A.cpTodayText { color:black; }
.cpTodayTextDisabled { color:#D0D0D0; }
.cpBorder { border:solid thin #808080; }



/*************************
		EI - CUADRO
**************************/

.ei-cuadro-base {

}
.ei-cuadro-cuerpo {
	width: 100%;
}
.ei-cuadro-scroll {
	overflow: auto;
}
.ei-cuadro-cabecera, .ei-cuadro-pie {
	 empty-cells: hide
}
.ei-cuadro-cabecera img {
	float: left;
	padding: 2px;
}
.ei-cuadro-fila {
	padding: 2px;
	margin: 0px;
}
.ei-cuadro-celda-evt {
}
.ei-cuadro-fila-evt {
	white-space: nowrap;
}
.ei-cuadro-fila-sel {
}
.ei-cuadro-pag {
	 text-align: center;
}
.ei-cuadro-pag-total {}

.ei-cuadro-orden {
	float: right;
}
.ei-cuadro-col-tit, .ei-ml-col-tit {
	vertical-align: bottom;
	text-align: center;
	font-weight: normal;
}
.ei-cuadro-col-tit {
	font-weight: bold;
}
.ei-cuadro-agrupador-filas {
	padding: 0;
	margin: 0;		
	BORDER-COLLAPSE: collapse;
	empty-cells: hide;
	margin-right: 10px;
	margin-left: 10px;
}

/* Tabla de sumarizaciones ad-hoc */
.ei-cuadro-cc-tabla-sum {
	padding: 5px;
	MARGIN: 5px;
	BORDER-COLLAPSE: collapse;
	empty-cells: hide
}

.ei-cuadro-cc-resumen {
	margin-bottom: 3px;
}

.ei-cuadro-cc-fondo {
	padding: 0px;
}


/*-- NIVEL 0 --*/
.ei-cuadro-cc-colapsable {
	cursor: pointer;
	_cursor: auto;
}

.ei-cuadro-cc-tit-nivel-0{
	border: 1px solid #231f20;
	background-color: #514a84;
	color: #ffffff;
	vertical-align: bottom;
	padding: 5px;
}
.ei-cuadro-cc-pie-nivel-0{
	background-color: #FFD87C;
	color: #231f20;
	font-style: italic;
}
.ei-cuadro-cc-pie-cab-nivel-0{
	background-color: #514a84;
	color: #ffffff;
	MARGIN: 4px;
	padding: 3px;
	width: auto;
}
.ei-cuadro-cc-sum-nivel-0 {
	border: 1px solid #4f4c4d;
	background-color: #FFD87C;
	color: #231f20;
	margin: 0px;
	padding: 2px;
	text-align: right
}

/*-- NIVEL 1 --*/

.ei-cuadro-cc-tit-nivel-1{
	border-top: #000000 1px solid;
	border-left: #231f20 1px solid;
	border-bottom: #000000 1px solid;
	border-right: #231f20 1px solid;
	background-color: #999999;
	color: #ffffff;
	MARGIN: 0px;
	padding: 2px;
}
.ei-cuadro-cc-pie-nivel-1{
	COLOR: #231f20;
	BACKGROUND-COLOR: #FFFAAF;
}
.ei-cuadro-cc-pie-cab-nivel-1{
	background-color: #999999;
	color: #ffffff;
	MARGIN: 4px;
	padding: 3px;
	width: auto;
}

.ei-cuadro-cc-sum-nivel-1 {
	border: 1px solid #4f4c4d;
	color: #231f20;
	background-color: #FFFAAF;
	margin: 0px;
	text-align: right
}

/*-- NIVEL 2 --*/

.ei-cuadro-cc-tit-nivel-2{
	border-bottom: #000000  1px solid;
	border-top: #000000  1px solid;
	border-left: #231f20 1px solid;
	border-right: #231f20  1px solid;
	font-size: 1.1em;
	background-color: #d4d0c8;
	vertical-align: bottom;
	text-align: left;
	padding: 5px;
	color: #000000;
}

.ei-cuadro-cc-pie-nivel-2{
	color: #231f20;
	background-color: #ffffff;
}

.ei-cuadro-cc-pie-cab-nivel-2{
	background-color: #d4d0c8;
	color: #000000;
	margin: 4px;
	width: auto;
}

.ei-cuadro-cc-sum-nivel-2 {
	border: 1px solid #4f4c4d;
	color: #231f20;
	background-color: white;
	text-align: right;
	margin: 0px;
	padding: 2px;
}


/*************************
		filtro
***************************/
.ei-filtro-botonera {
	float:left;
	padding-top: 4px;
}

/*************************
	 Formateo de Columnas
**************************/

.col-num-p1, .col-num-p2, .col-num-p3, .col-num-p4 {
	text-align: right;
}
.col-tex-p1, .col-tex-p2, .col-tex-p3, .col-tex-p4 {
	text-align: left;
}
.col-cen-s1, .col-cen-s2, .col-cen-s3, .col-cen-s4  {
	text-align: center;
}
/*************************
		CI
**************************/
.ci-base {
}
.ci-barra-sup {
}
.ci-simple-cont {
}
.ci-botonera {
	padding: 3px;
}
.ci-cuerpo {
	padding:2px;
	vertical-align: top;
	color: #000000;
	text-align: left;
	height: 100%;
}
.ci-wiz-enc {
	font-size: 1.1em;
	text-align: left;
	padding: 5px;
}
.ei-barra-sup-desc-info, .ei-barra-sup-desc-warning, .ei-barra-sup-desc-error {
	text-align: left;
	padding: 5px;
	width: 100%;	
}
.ei-barra-sup-desc-info td, .ei-barra-sup-desc-warning td, .ei-barra-sup-desc-error td {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}
.ei-barra-sup-desc-img {
	width: 20px;
	vertical-align: top;
}

/*** Wizard ***/
.ci-wiz-titulo {
	font-weight: bold;
}
.ci-wiz-descr {
	padding-left: 15px
}
.ci-wiz-toc {
	height: 100%;
	padding: 1px;
	vertical-align: top;
}
.ci-wiz-toc-lista {
	padding-right: 10px;
	padding-left: 0px;
	padding-bottom: 5px;
	padding-top: 15px;	
	margin-left: 10px;
	vertical-align: top;
	white-space: nowrap;
	text-align: left;
	height: 100%;
	list-style-type: none;
}
.ci-wiz-toc-pant-pasada, .ci-wiz-toc-pant-futuro {
	color: gray;
}
.ci-wiz-toc-pant-actual {
	font-weight: bold;
}


/*** Tabs verticales ***/
.ci-tabs-v-lista {
	vertical-align: top;
	height: 100%;
}
.ci-tabs-v-cont {
	padding: 6px 2px 6px 2px;
	margin: 0px;
	vertical-align: top;
	text-align: left;
}
.ci-tabs-v-solapa {
	padding: 2px 10px 2px 2px;
	white-space: nowrap;
	text-align: left;
}
.ci-tabs-v-solapa-sel {
	padding-right: 10px;
	padding-left: 3px;
	white-space: nowrap;
	text-align: left;
}
.ci-tabs-v-boton-sel {
	border: medium none;	
	padding: 2px;
	font-size: 1.1em;
	white-space: nowrap;
}
/*** Tabs horizontales ***/
.ci-tabs-h-lista {
	float:left;
	width:100%;
	line-height:normal;
	padding: 0;
}
.ci-tabs-h-lista ul {
	margin:0;
	padding:3px 3px 0;
	list-style:none;
}
.ci-tabs-h-lista li {
	float:left;
	margin:0;
	padding:0 0 0 9px;
	list-style:none;	
}
.ci-tabs-h-lista img {
	border: none;
	vertical-align: middle;
}
.ci-tabs-h-lista a {
	float:left;
	display:block;
	padding:5px 15px 4px 6px;
	text-decoration:none;
	font-weight:bold;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
.ci-tabs-h-lista a {float:none;}
/* End IE5-Mac hack */
.ci-tabs-h-lista a:hover {
}
.ci-tabs-h-solapa-sel {
}
.ci-tabs-h-solapa-sel a {
	padding-bottom:5px;
}
.ci-tabs-h-cont, .ci-wiz-cont {
	height: 100%;
	width: 100%;
	padding: 6px 2px 6px 6px;
	margin: 0px;
	vertical-align: top;
}


a.ci-tabs-boton-desact {
}
a.ci-tabs-boton-desact:hover {
}
/*************************
	Clase ei_arbol
**************************/
.ei-arbol-cuerpo {
	width: 100%;				/** BUG DEL IE en el mouseover */
}
.ei-arbol-rama {
	list-style-type: none;  
	margin-left: 20px;
	padding-left: 0px;
	white-space: nowrap;
	 vertical-align: middle;
}
.ei-arbol-raiz {
	list-style-type: none; 
	white-space: nowrap;
	margin:0px; 
	padding: 0px;
}
.ei-arbol-ver-prop {
	text-decoration: none;
}
.ei-arbol-ver-prop:hover {
	text-decoration: underline;
}
.ei-arbol-nodo {
	border-top: 1px dotted #BBBBBB;
	vertical-align: middle;
	clear: right;
}
.ei-arbol-nombre {
}
.ei-arbol-exp-contr {
	cursor: pointer;
	cursor: hand;	
}
.ei-arbol-barra-path {
	font-weight: bold;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}
.ei-arbol-filtro {
	text-align:left;
	padding-left: 40px;
	padding-top: 10px;
}
.ei-arbol-filtro input {
	color: #5F6E7C;
	width: 100px;
}

/*************************
	Funcion ei_arbol
**************************/

.arbol-titulo {
	border: 1px solid #231f20;
	padding: 8px 4px 4px 10px;
	font-weight: bold;
	font-size: 1.2em;
	color: #e9e8e8;
	background-color: #231f20;
	text-align: left;
}
.arbol-cuerpo {
	border: 1px solid #231f20;
	padding: 1px;
	color: #e9e8e8;
	background-color: #4f4c4d;
	text-align: center;
}
.arbol-etiqueta1 {
	border-right: #231f20 4px solid;
	border-top: #000000 2px solid;	
	border-left: #231f20 1px solid;	
	border-bottom: #231f20 1px solid;	
	padding: 0px 5px 2px 5px;
	font-weight: bold;
	color: #231f20;
	background-color: #fffc10;
	text-align: left
}
.arbol-etiqueta2 {
	border-right: #231f20 4px solid;
	border-top: #000000 2px solid;
	border-left: #231f20 1px solid;	
	border-bottom: #231f20 1px solid;	
	padding: 0px 5px 2px 5px;
	font-weight: bold;
	color: #000000;
	background-color: #ffeb10;
	text-align: left;
}
.arbol-valor {
	border: 1px solid #231f20;
	padding: 0px 3px 0px 3px;
	color: #000000;
	background-color: #ffffff;
	text-align: left
}
.arbol-valor-array {
	border: 1px solid #231f20;
	padding: 1px 3px 0px 3px;
	color: #000000;
	background-color: #ff0000;
	text-align: left;
}
.arbol-valor-objeto {
	border: 1px solid #231f20;
	padding: 0px 3px 0px 3px;
	color: #000000;
	background-color: #ffffff;
	text-align: left
}
.arbol-valor-null {
	border: 1px solid #231f20;
	padding: 0px 3px 0px 3px;
	color: #ffffff;
	background-color: #555555;
	text-align: left;
}

/*************************
	Varios
**************************/
.mensaje {
	border: 1px solid gray;
}
.mensaje-cuerpo-info, .mensaje-cuerpo-error {
	text-align:left;
	font-weight: bold;
	padding: 10px;
}
.mensaje-titulo-error {
	font-color: red;
	font-weight: bold;
	border-bottom: 1px solid gray;
	padding: 5px;	
}
.mensaje-titulo-error img {
	vertical-align:middle;
}
.barra-separador {
	padding: 5px;
	font-weight: bold;
	font-size: 1.1em;
	text-align: left;
}
.item-barra {
	float: left;
	padding: 3px;
}
.item-barra-tit {
	font-weight: bold;
	font-size: 1.1em;
	display: inline;
	margin-left: 5px;
	vertical-align: top;
}
.item-barra-ayuda {
	display: inline;
}
/*************************
	ZONA
**************************/
.zona-barra-sup {
	text-align: center;	
}
.zona-barra-desc {
	padding-top: 5px;
	font-weight: bold;
}
.zona-barra-id {
	color: gray;
}
.zona-items {
	float: right;
	border: gray solid 1px;	
	padding: 3px;
	text-align:right;	
	
}
.zona-items a {
	padding-right: 4px;
}

.zona-items a.active {

}

.zona-items img {
	vertical-align:middle;
	margin-right: 5px;	
}


/*************************
		Ventana Modal
**************************/

#tipclick_div{
	position:absolute;
	visibility:hidden;
	background-color: lightyellow;			 
	padding: 2px;
	border: 1px solid black;
	line-height:18px;
	z-index:100;
	max-width: 200px;
	font: normal normal normal 11px Verdana, Arial, Helvetica, sans-serif; 
}			
#div_calendario {
	visibility:hidden;
	position:absolute;
	background-color: white;
	z-index:1000;
}

/*************************
		Ventana Modal
**************************/

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     z-index: 1000;
}
#overlay_contenido {
     width:400px;
     margin: 100px auto;
     padding:15px;
}
.overlay-mensaje {
     max-height: 300px;
     overflow: auto;
}
.overlay-mensaje img {
	vertical-align: middle;
}
.overlay-debug{
	 display: none;
}
.overlay-titulo {
	padding-bottom: 10px;
	margin-bottom: 10px;
	font-weight: bold;
}
.overlay-cerrar {
	float:right;
	cursor: pointer;
	_cursor: hand;
}
.overlay-botonera {
	padding-top: 10px;
	margin-top: 10px;
	text-align: center;
}




/*************************
		CALENDARIO
**************************/

.year, .month {
	border-style: outset;
	text-align: center;
}
.year {	border-width: 1px; }
.yearname {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}
.monthname {
	text-align: center;
	font-size: 14px;
	font-weight: bold;
}
.dayname td {
	text-align: center;
	font-size: 12px;
	font-weight: bold;
}
.yearnavigation {
	font-size: 12px;
}
.datepicker {
}
.datepickerform {
	margin: 0px;
}
.monthnavigation {
	font-family: Tahoma, Arial, sans-serif;
}
.monthpicker, .yearpicker, .pickerbutton {
	font-size: 11px;
}
.pickerbutton {
}
.nomonthday {
	height:20px;
	width:20px;
}
.nomonthdayevents {
	height:60px;
	width:60px;
}
.monthday, .weeknumber, .weeknoselec {
	text-align: center;
	font-size: 11px;
	height:20px;									
	width:20px;
}
.monthday {	
	font-weight: bold;
}
.weeknumber {
	font-weight: bold;
}
.weeknoselec {
}
.monthdayevents, .weeknumberevents, .weeknoselecevents {
	text-align: center;
	font-size: 11px;
	height:60px;
	width:60px;
	vertical-align: top;
}
.weeknoselecevents {
}
.monthdayevents { 
	font-weight: bold; 
}
.weeknumberevents {
	font-weight: bold;
}
.today, .todayevents {
	text-align: center;
	font-size: 11px;
	font-weight: bold;
}
.today {
	height:20px;
	width:20px;
}
.todayevents {
	height:60px;
	width:60px;
	vertical-align: top;
}
.selectedday, .selecteddayevents {
	text-align: center;
	font-size: 11px;
	font-weight: bold;
}
.selectedday {	
	height:20px;
	width:20px;
}
.selecteddayevents {
	height:60px;
	width:60px;
	vertical-align: top;
}
.sunday, .sundayevents {
	text-align: center;
	font-size: 11px;
}
.sunday {
	height:20px;
	width:20px;
}
.sundayevents {
	height:60px;
	width:60px;
	vertical-align: top;
}
.sunday a, .saturday a {
}
.saturday, .saturdayevents {
	text-align: center;
	font-size: 11px;
}
.saturday{
	height:20px;
	width:20px;
}
.saturdayevents {
	height:60px;
	width:60px;
	vertical-align: top;
}
.event, .eventevents {
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: red;
}
.event {
	height:20px;
	width:20px;
}
.eventevents {
	height:60px;
	width:60px;
	vertical-align: top;
}
.event a {
}
.selectedevent, .selectedeventevents {
	text-align: center;
	font-size: 11px;
	font-weight: bold;
}
.seelctedevent {
	height:20px;
	width:20px;
}
.selectedeventevents {
	height:60px;
	width:60px;
	vertical-align: top;
}
.selectedevent a {
	color: red;
}
.todayevent, .todayeventevents {
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: red;
}
.todayevent {
	height:20px;
	width:20px;
}
.todayeventevents {
	height:60px;
	width:60px;
	vertical-align: top;
}
.todayevent a {
}
.eventcontent {
	font-size: 9px;
	border-style: outset;
	border-width: 1px;
	width: 100%;
}

/*************************
		LOGIN
**************************/
.login-titulo {
	padding-top: 10px;
	padding-bottom: 25px;
	text-align: center;
	font-weight: bold;
}
.login-pie {
	margin-top: 25px;
	text-align: center;
}


/*************************
		Bordes redondeados
**************************/

.barra-redondeada {}
.c {width: 4px; height: 4px;}
.tl {padding: 0; width: 4px; text-align: left; vertical-align: top !important;}
.tr {padding: 0; width: 4px; text-align: right; vertical-align: top;}
.bl {padding: 0; width: 4px; text-align: left; vertical-align: bottom;}
.br {padding: 0; width: 4px; text-align: right; vertical-align: bottom;}


/***************************************
	Controlador de Layers en ei-mapa
****************************************/
.layer-ctrl {
	background-color: #EFFFE1;
	border: 1px solid black;
	padding: 5px;
	position: relative;
	top: 0;
}
.layer-selector{
	font-variant: italic;
}
.layer-grupo{
	font-variant:small-caps;
	font-size: 1.2em;
	color: #F9F9F9;
}

/***************************************
	Estilos Codemirror
****************************************/
.CodeMirror-wrapping {
	background-color: #fff;
}
.CodeMirror-line-numbers {
	background-color:#EEEEEE;
	color:#AAAAAA;
	font-family:monospace;
	font-size:10pt;
	line-height:1.1em;
	margin:0;
	padding:0.4em;
	text-align:right;
	width:2.2em;
}

/* -- ACCESIBILIDAD -- */

div.zoom-fuente {
	float: right; 
	margin-top: 8px; 
	margin-right: 15px;
}

div.zoom-fuente a:first-child {
	margin-right: 5px;
}
/* ==========================================================
   PORTAL IUSP - TEMA MODERNO
   Agregado al final para sobrescribir estilos heredados
   ========================================================== */

:root {
    --iusp-azul: #173f69;
    --iusp-azul-2: #245b8f;
    --iusp-celeste: #eaf3fb;
    --iusp-fondo: #f4f7fb;
    --iusp-blanco: #ffffff;
    --iusp-texto: #1f2937;
    --iusp-texto-suave: #64748b;
    --iusp-borde: #d8e1eb;
    --iusp-exito: #198754;
    --iusp-peligro: #c0392b;
    --iusp-sombra: 0 8px 24px rgba(15, 45, 75, 0.10);
    --iusp-radio: 12px;
}

html {
    font-size: 62.5%;
    min-height: 100%;
}

body {
    min-height: 100vh;
    background: var(--iusp-fondo);
    color: var(--iusp-texto);
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 1.35rem;
    line-height: 1.45;
}

/* Encabezado y navegación */
.encabezado,
.zona-barra-sup {
    background: var(--iusp-blanco);
    border-bottom: 1px solid var(--iusp-borde);
    box-shadow: 0 2px 10px rgba(15, 45, 75, 0.06);
}

.enc-logo,
.enc-usuario,
.enc-version {
    color: var(--iusp-texto);
}

.enc-usuario {
    padding-right: 14px;
}

.enc-usuario-nom {
    color: var(--iusp-azul);
    font-size: 1.25rem;
}

.enc-usuario-id {
    color: var(--iusp-texto-suave);
}

.zona-items {
    float: none;
    border: 0;
    padding: 0 12px;
    text-align: left;
    background: transparent;
}

.zona-items a,
.menu-link-nueva-ventana,
.ci-tabs-h-lista a {
    color: var(--iusp-azul);
    text-decoration: none;
    border-radius: 8px;
    transition: background-color .18s ease, color .18s ease;
}

.zona-items a:hover,
.menu-link-nueva-ventana:hover,
.ci-tabs-h-lista a:hover {
    background: var(--iusp-celeste);
    color: var(--iusp-azul-2);
}

/* Fondo y contenedores */
.cuerpo,
.ci-cuerpo {
    background: transparent;
}

.ci-cuerpo {
    padding: 22px;
}

.ci-base,
.ei-base,
.ei-form-base,
.ei-cuadro-base {
    border: 0;
}

.ci-simple-cont,
.ei-form-cuerpo,
.ei-filtro-grilla,
.ei-cuadro-cuerpo {
    background: var(--iusp-blanco);
}

/* Títulos */
.barra-separador,
.zona-barra-desc,
.ci-barra-sup,
.ei-barra-sup {
    color: var(--iusp-azul);
    font-weight: 700;
}

.barra-separador,
.zona-barra-desc {
    padding: 12px 18px;
    background: var(--iusp-azul);
    color: var(--iusp-blanco);
    border: 0;
    box-shadow: none;
}

/* Tarjetas de formularios y filtros */
.ei-form-base,
.ei-filtro-grilla,
.ci-simple-cont {
    border: 1px solid var(--iusp-borde);
    border-radius: var(--iusp-radio);
    box-shadow: var(--iusp-sombra);
}

.ei-form-cuerpo,
.ei-filtro-grilla {
    padding: 18px 20px;
    border-radius: var(--iusp-radio);
}

.ei-form-fila {
    padding: 6px 10px 8px 8px;
}

.ei-form-etiq,
.ei-form-etiq-oblig,
.ei-filtro-etiq-oblig,
.ei-ml-etiq,
.ei-ml-etiq-oblig {
    color: #334155;
    font-weight: 600;
    line-height: 34px;
}

/* Campos */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
select,
textarea,
.ef-input,
.ef-combo,
.ef-textarea {
    box-sizing: border-box;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: var(--iusp-blanco);
    color: var(--iusp-texto);
    font-family: inherit;
    font-size: 1.3rem;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
    border-color: var(--iusp-azul-2);
    box-shadow: 0 0 0 3px rgba(36, 91, 143, 0.16);
}

input[readonly],
input:disabled,
select:disabled,
textarea:disabled {
    background: #f1f5f9;
    color: #475569;
}

/* Botones */
button,
input[type="button"],
input[type="submit"],
.ei-boton,
.ei-boton-centro,
.ei-boton-izq,
.ei-boton-alta,
.ei-boton-mod,
.ei-boton-canc,
.ei-boton-filtrar,
.ei-boton-limpiar,
.ei-boton-baja {
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--iusp-azul-2);
    color: var(--iusp-blanco);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 45, 75, 0.14);
    transition: transform .12s ease, filter .18s ease, box-shadow .18s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.ei-boton:hover,
.ei-boton-alta:hover,
.ei-boton-mod:hover,
.ei-boton-filtrar:hover {
    filter: brightness(1.06);
    box-shadow: 0 4px 10px rgba(15, 45, 75, 0.18);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active {
    transform: translateY(1px);
}

.ei-boton-canc,
.ei-boton-limpiar {
    background: #64748b;
}

.ei-boton-baja {
    background: var(--iusp-peligro);
}

.ei-boton-alta {
    background: var(--iusp-exito);
}

/* Cuadros / tablas */
.ei-cuadro-base {
    margin-top: 16px;
    background: var(--iusp-blanco);
    border: 1px solid var(--iusp-borde);
    border-radius: var(--iusp-radio);
    box-shadow: var(--iusp-sombra);
    overflow: hidden;
}

.ei-cuadro-scroll {
    overflow-x: auto;
    overflow-y: auto;
}

.ei-cuadro-cuerpo,
.ei-cuadro-cabecera,
.ei-cuadro-pie {
    border-collapse: collapse;
    border-spacing: 0;
}

.ei-cuadro-col-tit,
.ei-ml-col-tit,
.ei-cuadro-cabecera th,
.ei-cuadro-cabecera td {
    padding: 10px 9px;
    background: var(--iusp-azul);
    color: var(--iusp-blanco);
    border: 0;
    border-right: 1px solid rgba(255,255,255,.14);
    font-weight: 700;
    text-align: left;
}

.ei-cuadro-fila,
.ei-cuadro-cuerpo td {
    padding: 9px;
    border-bottom: 1px solid #e7edf4;
    vertical-align: middle;
}

.ei-cuadro-cuerpo tr:nth-child(even) td {
    background: #f8fafc;
}

.ei-cuadro-cuerpo tr:hover td {
    background: #eef6fd;
}

.ei-cuadro-fila-evt,
.ei-cuadro-celda-evt {
    text-align: center;
    white-space: nowrap;
}

/* Botón de descarga en el cuadro */
.ei-cuadro-fila-evt a,
.ei-cuadro-celda-evt a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid #b8d1e7;
    border-radius: 8px;
    background: #eef6fd;
    color: var(--iusp-azul);
    text-decoration: none;
    font-weight: 700;
}

.ei-cuadro-fila-evt a:hover,
.ei-cuadro-celda-evt a:hover {
    background: #dcecf9;
}

/* Mensajes y modales */
.mensaje,
#overlay_contenido {
    border: 1px solid var(--iusp-borde);
    border-radius: 12px;
    background: var(--iusp-blanco);
    box-shadow: 0 18px 50px rgba(15, 45, 75, 0.20);
}

.mensaje-cuerpo-info,
.mensaje-cuerpo-error {
    padding: 14px 16px;
    font-weight: 600;
}

.overlay-titulo {
    color: var(--iusp-azul);
    font-size: 1.5rem;
}

/* Login */
.login-titulo {
    padding: 22px 0 18px;
    color: var(--iusp-azul);
    font-size: 2rem;
}

.login-pie {
    color: var(--iusp-texto-suave);
}

body.login,
body:has(.login-titulo) {
    background: linear-gradient(135deg, #edf5fb 0%, #dfeaf5 100%);
}

.login-titulo + .ei-form-base,
.login-titulo ~ .ei-form-base {
    max-width: 420px;
    margin: 0 auto;
}

/* Adaptación móvil */
@media (max-width: 760px) {
    body {
        font-size: 1.3rem;
    }

    .ci-cuerpo {
        padding: 12px;
    }

    .enc-usuario {
        float: none;
        text-align: left;
        padding: 8px 12px;
    }

    .zona-items {
        overflow-x: auto;
        white-space: nowrap;
    }

    .ei-form-cuerpo,
    .ei-filtro-grilla {
        padding: 12px;
    }

    .ei-form-fila {
        white-space: normal;
    }

    .ei-form-etiq,
    .ei-form-etiq-oblig {
        float: none;
        display: block;
        line-height: 1.4;
        margin-bottom: 4px;
    }

    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="email"],
    select,
    textarea {
        width: 100% !important;
        max-width: 100%;
    }

    .ei-cuadro-base {
        border-radius: 8px;
    }
}
/* ==========================================================
   IDENTIDAD VISUAL IUSP
   Inspirada en el sitio institucional
   ========================================================== */

:root {
    --iusp-celeste: #0789bf;
    --iusp-celeste-claro: #16a2d6;
    --iusp-azul: #00638f;
    --iusp-azul-oscuro: #004b70;
    --iusp-amarillo: #f5cf18;
    --iusp-fondo: #f3f7fa;
    --iusp-texto: #17354c;
    --iusp-borde: #d5e3ec;
}

/* Fondo general */
html,
body {
    min-height: 100%;
    background: var(--iusp-fondo) !important;
    color: var(--iusp-texto);
    font-family: Arial, Helvetica, sans-serif !important;
}

/* ==========================================================
   CABECERA INSTITUCIONAL
   ========================================================== */

.encabezado {
    min-height: 92px;
    margin: 0 !important;
    padding: 0 42px !important;
    box-sizing: border-box;

    background: linear-gradient(
        110deg,
        var(--iusp-celeste),
        var(--iusp-celeste-claro)
    ) !important;

    border: none !important;
    border-bottom: 4px solid var(--iusp-amarillo) !important;

    box-shadow: 0 3px 12px rgba(0, 73, 108, 0.22);

    display: flex;
    align-items: center;
}

/* Logo o nombre del sistema */
.enc-logo {
    display: flex;
    align-items: center;
    min-width: 380px;
}

.enc-logo a,
.enc-logo {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

/* Texto alternativo cuando todavía dice LOGO */
.enc-logo::after {
    content: "Instituto Universitario de Seguridad Pública";
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.15;
    max-width: 330px;
}

/* Oculta el texto LOGO si aparece como texto */
.enc-logo > a {
    font-size: 0 !important;
}

/* Usuario conectado */
.enc-usuario {
    margin-left: auto !important;
    margin-top: 0 !important;
    padding: 10px 16px !important;
    text-align: right;

    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
}

.enc-usuario-nom {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

.enc-usuario-id {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 12px !important;
}

/* Botón salir */
.enc-salir {
    margin-left: 12px !important;
}

.enc-salir a {
    color: #ffffff !important;
    font-weight: 600;
}

/* ==========================================================
   MENÚ PRINCIPAL
   ========================================================== */

.zona-items {
    float: none !important;
    width: 100%;
    box-sizing: border-box;

    min-height: 58px;
    padding: 0 42px !important;

    background: var(--iusp-azul) !important;
    border: none !important;

    display: flex;
    align-items: center;
    gap: 4px;

    box-shadow: 0 3px 8px rgba(0, 65, 95, 0.16);
}

.zona-items a {
    display: inline-flex;
    align-items: center;

    min-height: 58px;
    padding: 0 18px !important;

    color: #ffffff !important;
    background: transparent !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;

    border: none !important;
    border-bottom: 4px solid transparent !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.zona-items a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-bottom-color: var(--iusp-amarillo) !important;
}

.zona-items a.active {
    background: var(--iusp-azul-oscuro) !important;
    border-bottom-color: var(--iusp-amarillo) !important;
}

/* ==========================================================
   TÍTULO DE CADA PANTALLA
   ========================================================== */

.barra-separador,
.ci-barra-sup,
.zona-barra-sup {
    min-height: auto !important;
    padding: 22px 42px 12px !important;

    background: transparent !important;
    border: none !important;

    color: var(--iusp-azul-oscuro) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

/* ==========================================================
   ÁREA CENTRAL
   ========================================================== */

.ci-cuerpo {
    max-width: 1120px;
    margin: 0 auto !important;
    padding: 16px 28px 50px !important;
    box-sizing: border-box;
}

/* Tarjetas */
.ei-base,
.ei-form-base,
.ei-cuadro-base,
.ei-filtro-grilla {
    background: #ffffff !important;
    border: 1px solid var(--iusp-borde) !important;
    border-radius: 12px !important;

    box-shadow:
        0 7px 22px rgba(18, 74, 106, 0.08) !important;
}

/* ==========================================================
   CAMPOS Y FORMULARIOS
   ========================================================== */

.ei-form-fila {
    padding: 7px 12px !important;
}

.ei-form-etiq,
.ei-form-etiq-oblig,
.ei-filtro-etiq,
.ei-filtro-etiq-oblig {
    color: var(--iusp-texto) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 38px !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
    min-height: 39px;
    padding: 8px 11px !important;

    border: 1px solid #b7ccd9 !important;
    border-radius: 5px !important;

    background: #ffffff !important;
    color: #183b53 !important;

    font-size: 14px !important;
    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--iusp-celeste) !important;
    box-shadow: 0 0 0 3px rgba(7, 137, 191, 0.14) !important;
}

/* Campos que no deberían editarse */
input[readonly],
input[disabled],
select[disabled] {
    background: #eef4f7 !important;
    color: #597184 !important;
    border-color: #d2dfe7 !important;
}

/* ==========================================================
   BOTONES
   ========================================================== */

button,
input[type="button"],
input[type="submit"],
.ei-boton,
.ei-boton-alta,
.ei-boton-mod,
.ei-boton-filtrar,
.ei-boton-limpiar,
.ei-boton-canc,
.ei-boton-baja {
    min-height: 38px;

    padding: 8px 17px !important;

    border: none !important;
    border-radius: 6px !important;

    background: linear-gradient(
        135deg,
        var(--iusp-celeste),
        var(--iusp-azul)
    ) !important;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    cursor: pointer;

    box-shadow: 0 3px 8px rgba(0, 94, 139, 0.24);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0, 94, 139, 0.3);
}

.ei-boton-canc {
    background: #617b8d !important;
}

/* ==========================================================
   TABLA DE BONOS
   ========================================================== */

.ei-cuadro-base {
    overflow: hidden;
}

.ei-cuadro-cuerpo {
    width: 100% !important;
    border-collapse: collapse !important;
}

.ei-cuadro-col-tit {
    padding: 14px 12px !important;

    background: var(--iusp-azul) !important;
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: left !important;

    border: none !important;
}

.ei-cuadro-fila,
.ei-cuadro-fila-sel {
    padding: 13px 12px !important;

    background: #ffffff !important;
    color: var(--iusp-texto) !important;

    font-size: 13px !important;

    border-bottom: 1px solid #dde8ee !important;
}

.ei-cuadro-cuerpo tr:nth-child(even) td {
    background: #f4f9fc !important;
}

.ei-cuadro-cuerpo tr:hover td {
    background: #e7f4fa !important;
}

/* Botón Descargar */
.ei-cuadro-celda-evt button,
.ei-cuadro-fila-evt button {
    background: #ffffff !important;
    color: var(--iusp-azul) !important;

    border: 1px solid #82b9d3 !important;

    box-shadow: none !important;
}

.ei-cuadro-celda-evt button:hover,
.ei-cuadro-fila-evt button:hover {
    background: #e9f7fc !important;
}

/* ==========================================================
   LOGIN
   ========================================================== */

.login-titulo {
    color: var(--iusp-azul-oscuro) !important;
    font-size: 21px !important;
    font-weight: 700 !important;
}

.login-pie {
    color: #637b8d !important;
    font-size: 13px !important;
    line-height: 1.6;
}

body:has(.login-titulo) {
    background:
        linear-gradient(
            rgba(243, 249, 252, 0.94),
            rgba(235, 245, 250, 0.94)
        ),
        var(--iusp-fondo) !important;
}

body:has(.login-titulo) .ei-form-base {
    padding: 25px 28px !important;
    border-top: 5px solid var(--iusp-celeste) !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media screen and (max-width: 800px) {
    .encabezado {
        min-height: 72px;
        padding: 0 15px !important;
    }

    .enc-logo {
        min-width: 0;
    }

    .enc-logo::after {
        font-size: 14px;
        max-width: 220px;
    }

    .enc-usuario {
        padding: 7px 9px !important;
    }

    .zona-items {
        padding: 0 8px !important;
        overflow-x: auto;
    }

    .zona-items a {
        min-height: 50px;
        padding: 0 11px !important;
        white-space: nowrap;
    }

    .barra-separador,
    .ci-barra-sup,
    .zona-barra-sup {
        padding: 18px 15px 8px !important;
    }

    .ci-cuerpo {
        padding: 12px !important;
    }

    .ei-cuadro-scroll {
        overflow-x: auto !important;
    }
}

body:has(.login-titulo) .logo {
    margin-top: 24px !important;
    margin-bottom: 10px !important;
    text-align: center;
}

body:has(.login-titulo) .logo img {
    width: 420px !important;
    max-width: 90vw !important;
    height: auto !important;
    object-fit: contain;
}

@media screen and (max-width: 520px) {
    body:has(.login-titulo) .logo img {
        width: 280px !important;
        max-width: 92vw !important;
    }
}

/* Logo del login: forzar tamaño */
.logo {
    width: 100% !important;
    margin: 22px auto 28px !important;
    text-align: center !important;
}



/* En celulares */
@media screen and (max-width: 520px) {
    .logo img,
    img.logo {
        width: 270px !important;
        max-width: 90vw !important;
    }
}

.logo img,
img.logo {
    width: 430px !important;
    max-width: 90vw !important;
    height: auto !important;
}
/* ==========================================================
   PORTAL IUSP - INICIO DE SESIÓN INSTITUCIONAL
   ========================================================== */

:root {
    --iusp-celeste: #078fc4;
    --iusp-celeste-oscuro: #006b99;
    --iusp-azul: #064e76;
    --iusp-azul-profundo: #063b59;
    --iusp-amarillo: #f4d21f;
    --iusp-fondo: #eef6fb;
    --iusp-blanco: #ffffff;
    --iusp-texto: #17384e;
    --iusp-texto-suave: #647d8f;
    --iusp-borde: #d4e2eb;
}

/* Oculta márgenes heredados del login */
body:has(.iusp-login-page) {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    background: var(--iusp-fondo) !important;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
}

/* Contenedor completo */
.iusp-login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(
            180deg,
            #ffffff 0,
            #ffffff 160px,
            var(--iusp-fondo) 160px,
            var(--iusp-fondo) 100%
        );
}

/* ==========================================================
   CABECERA
   ========================================================== */

.iusp-login-header {
    min-height: 155px;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #e5edf2;
}

.iusp-login-header-contenido {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 22px;
}

/* Imagen del logo */
.iusp-login-logo {
    flex: 0 0 auto;
}

.iusp-login-logo img {
    display: block !important;
    width: 125px !important;
    height: 125px !important;
    object-fit: contain !important;
    margin: 0 !important;
}

/* Nombre institucional */
.iusp-login-marca {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
    text-transform: uppercase;
}

.iusp-login-marca-superior {
    color: var(--iusp-celeste-oscuro);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.iusp-login-marca-inferior {
    color: var(--iusp-azul);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

/* ==========================================================
   ZONA PRINCIPAL
   ========================================================== */

.iusp-login-principal {
    width: 100%;
    min-height: 500px;
    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(390px, 0.75fr);

    background:
        linear-gradient(
            110deg,
            #078fc4 0%,
            #0787bb 55%,
            #057ba9 100%
        );
}

/* ==========================================================
   BIENVENIDA
   ========================================================== */

.iusp-login-bienvenida {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 60px 70px 60px 40px;
}

.iusp-login-bienvenida-contenido {
    width: min(680px, 100%);
    color: #ffffff;
}

.iusp-login-etiqueta {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.iusp-login-bienvenida h1 {
    max-width: 650px;
    margin: 0 0 20px;
    color: #ffffff;
    font-size: clamp(32px, 3vw, 46px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.6px;
}

.iusp-login-introduccion {
    max-width: 620px;
    margin: 0 0 30px;
    color: rgba(255, 255, 255, 0.94);
    font-size: 18px;
    line-height: 1.55;
}

/* Opciones del portal */
.iusp-login-informacion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.iusp-login-informacion-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
}

.iusp-login-icono {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--iusp-amarillo);
    color: var(--iusp-azul-profundo);
    font-size: 14px;
    font-weight: 900;
}

.iusp-login-informacion-item strong {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 15px;
}

.iusp-login-informacion-item p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.45;
}

.iusp-login-aviso {
    max-width: 620px;
    padding: 13px 16px;
    border-left: 4px solid var(--iusp-amarillo);
    background: rgba(1, 63, 95, 0.28);
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
}

/* ==========================================================
   PANEL DE ACCESO
   ========================================================== */

.iusp-login-acceso {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 70px 48px 45px;
    background: rgba(0, 72, 105, 0.2);
}

.iusp-login-acceso-encabezado {
    width: 380px;
    max-width: 100%;
    margin: 0 auto 18px;
}

.iusp-login-acceso-encabezado > span {
    color: var(--iusp-amarillo);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.iusp-login-acceso-encabezado h2 {
    margin: 6px 0;
    color: #ffffff;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 750;
}

.iusp-login-acceso-encabezado p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
}

/* Tarjeta del formulario */
.iusp-login-formulario {
    width: 380px;
    max-width: 100%;
    margin: 0 auto;
    padding: 28px 30px 25px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-top: 5px solid var(--iusp-amarillo);
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(0, 46, 71, 0.27);
}

/* Oculta el título duplicado generado por Toba */
.iusp-login-formulario > .login-titulo {
    display: none !important;
}

/* Elimina bordes y cajas heredadas */
.iusp-login-formulario .ei-base,
.iusp-login-formulario .ei-form-base,
.iusp-login-formulario .ei-form-cuerpo,
.iusp-login-formulario table,
.iusp-login-formulario tbody,
.iusp-login-formulario tr,
.iusp-login-formulario td {
    width: auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Formulario */
.iusp-login-formulario .ei-form-cuerpo {
    padding: 0 !important;
}

.iusp-login-formulario .ei-form-fila {
    display: grid;
    grid-template-columns: 95px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 0 !important;
    white-space: normal !important;
}

.iusp-login-formulario .ei-form-etiq,
.iusp-login-formulario .ei-form-etiq-oblig {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    color: #29475d !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: normal !important;
}

/* Campos */
.iusp-login-formulario input[type="text"],
.iusp-login-formulario input[type="password"] {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 8px 11px !important;
    box-sizing: border-box;
    border: 1px solid #b6cbd8 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #17384e !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 15px !important;
}

.iusp-login-formulario input[type="text"]:focus,
.iusp-login-formulario input[type="password"]:focus {
    outline: none !important;
    border-color: var(--iusp-celeste) !important;
    box-shadow: 0 0 0 3px rgba(7, 143, 196, 0.15) !important;
}

/* Botonera */
.iusp-login-formulario .ei-botonera {
    min-height: auto !important;
    padding: 18px 0 0 !important;
    text-align: right !important;
}

/* Botón ingresar */
.iusp-login-formulario button,
.iusp-login-formulario input[type="button"],
.iusp-login-formulario input[type="submit"] {
    min-width: 115px !important;
    height: 42px !important;
    padding: 8px 20px !important;
    border: none !important;
    border-radius: 6px !important;
    background:
        linear-gradient(
            135deg,
            var(--iusp-celeste),
            var(--iusp-celeste-oscuro)
        ) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    box-shadow: 0 4px 10px rgba(0, 101, 145, 0.25) !important;
    cursor: pointer;
}

.iusp-login-formulario button:hover,
.iusp-login-formulario input[type="submit"]:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* Seguridad */
.iusp-login-seguridad {
    width: 380px;
    max-width: 100%;
    margin: 15px auto 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    text-align: center;
}

.iusp-login-candado {
    margin-right: 4px;
}

/* ==========================================================
   PIE
   ========================================================== */

.iusp-login-footer {
    min-height: 110px;
    padding: 22px 20px;
    box-sizing: border-box;
    background: #ffffff;
    color: var(--iusp-texto-suave);
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
}

.iusp-login-footer strong {
    color: var(--iusp-azul);
}

.iusp-login-footer-siu {
    margin-top: 8px;
    font-size: 12px;
}

/* Evitar que el CSS anterior del login interfiera */
body:has(.iusp-login-page) > .logo,
body:has(.iusp-login-page) > .login-pie {
    display: none !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media screen and (max-width: 900px) {
    .iusp-login-principal {
        grid-template-columns: 1fr;
    }

    .iusp-login-bienvenida {
        justify-content: center;
        padding: 45px 24px 35px;
    }

    .iusp-login-acceso {
        padding: 38px 24px 48px;
    }

    .iusp-login-informacion {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 600px) {
    .iusp-login-header {
        min-height: 125px;
    }

    .iusp-login-header-contenido {
        width: calc(100% - 28px);
        gap: 12px;
    }

    .iusp-login-logo img {
        width: 84px !important;
        height: 84px !important;
    }

    .iusp-login-marca-superior {
        font-size: 16px;
    }

    .iusp-login-marca-inferior {
        font-size: 17px;
    }

    .iusp-login-bienvenida h1 {
        font-size: 29px;
    }

    .iusp-login-introduccion {
        font-size: 16px;
    }

    .iusp-login-formulario {
        padding: 23px 20px 21px;
    }

    .iusp-login-formulario .ei-form-fila {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .iusp-login-acceso-encabezado h2 {
        font-size: 23px;
    }
}/* ==========================================================
   AGRANDAR PANEL DE AUTENTICACIÓN
   ========================================================== */

/* Dar más espacio a la columna derecha */
.iusp-login-principal {
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(480px, 0.9fr) !important;
}

/* Contenedor derecho */
.iusp-login-acceso {
    padding: 55px 70px !important;
}

/* Encabezado del acceso */
.iusp-login-acceso-encabezado {
    width: 460px !important;
    max-width: 100% !important;
    margin-bottom: 22px !important;
}

.iusp-login-acceso-encabezado h2 {
    font-size: 30px !important;
}

/* Tarjeta del formulario */
.iusp-login-formulario {
    width: 460px !important;
    max-width: 100% !important;
    padding: 34px 38px 32px !important;
}

/* Título interno de Toba */
.iusp-login-formulario .login-titulo {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin-bottom: 22px !important;
}

/* Filas del formulario */
.iusp-login-formulario .ei-form-fila {
    grid-template-columns: 120px minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 11px 0 !important;
}

/* Etiquetas */
.iusp-login-formulario .ei-form-etiq,
.iusp-login-formulario .ei-form-etiq-oblig {
    font-size: 15px !important;
}

/* Campos */
.iusp-login-formulario input[type="text"],
.iusp-login-formulario input[type="password"] {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 16px !important;
}

/* Botón */
.iusp-login-formulario button,
.iusp-login-formulario input[type="button"],
.iusp-login-formulario input[type="submit"] {
    min-width: 135px !important;
    height: 46px !important;
    font-size: 15px !important;
}

/* Texto inferior de seguridad */
.iusp-login-seguridad {
    width: 460px !important;
    font-size: 13px !important;
}

/* Adaptación para pantallas medianas */
@media screen and (max-width: 1100px) {
    .iusp-login-principal {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(420px, 0.85fr) !important;
    }

    .iusp-login-formulario,
    .iusp-login-acceso-encabezado,
    .iusp-login-seguridad {
        width: 420px !important;
    }

    .iusp-login-acceso {
        padding: 45px 35px !important;
    }
}

/* En celular sigue apilado */
@media screen and (max-width: 900px) {
    .iusp-login-principal {
        grid-template-columns: 1fr !important;
    }

    .iusp-login-formulario,
    .iusp-login-acceso-encabezado,
    .iusp-login-seguridad {
        width: 100% !important;
        max-width: 480px !important;
    }
}
/* ==========================================================
   LOGIN IUSP — FORMULARIO SIN DESBORDAMIENTO
   ========================================================== */

.iusp-login-formulario {
    width: 500px !important;
    max-width: 100% !important;
    padding: 34px 40px 30px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* El cuerpo debe ocupar el espacio interior, no 440 px fijos */
.iusp-login-formulario .ei-form-cuerpo,
.iusp-login-formulario div[id^="cuerpo_js_form_"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Tabla generada por Toba */
.iusp-login-formulario table,
.iusp-login-formulario tbody,
.iusp-login-formulario tr,
.iusp-login-formulario td {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    table-layout: auto !important;
}

/* Fila: etiqueta + campo */
.iusp-login-formulario .ei-form-fila {
    display: grid !important;
    grid-template-columns: 105px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 16px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 10px 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
}

/* Etiquetas */
.iusp-login-formulario .ei-form-etiq,
.iusp-login-formulario .ei-form-etiq-oblig {
    display: block !important;
    float: none !important;

    width: 105px !important;
    min-width: 105px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #17384e !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    white-space: nowrap !important;
}

/* Toba agrega margin-left inline; hay que anularlo */
.iusp-login-formulario div[id^="cont_ef_"] {
    display: block !important;
    float: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Usuario y contraseña */
.iusp-login-formulario input[type="text"],
.iusp-login-formulario input[type="password"] {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 46px !important;
    padding: 8px 12px !important;

    margin: 0 !important;
    box-sizing: border-box !important;

    border: 1px solid #b7c8d6 !important;
    border-radius: 7px !important;
    background: #ffffff !important;

    color: #17384e !important;
    font-size: 15px !important;
}

.iusp-login-formulario input[type="text"]:focus,
.iusp-login-formulario input[type="password"]:focus {
    outline: none !important;
    border-color: #078fc4 !important;
    box-shadow: 0 0 0 3px rgba(7, 143, 196, 0.16) !important;
}

/* Botonera: elimina desplazamientos heredados */
.iusp-login-formulario .ei-botonera {
    display: flex !important;
    justify-content: flex-end !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 20px 0 0 !important;
    box-sizing: border-box !important;
}

/* Botón ingresar */
.iusp-login-formulario button,
.iusp-login-formulario input[type="button"],
.iusp-login-formulario input[type="submit"] {
    width: auto !important;
    min-width: 130px !important;
    max-width: 100% !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 8px 20px !important;
    box-sizing: border-box !important;
}

/* Adaptación móvil */
@media screen and (max-width: 600px) {
    .iusp-login-formulario {
        width: 100% !important;
        padding: 26px 20px !important;
    }

    .iusp-login-formulario .ei-form-fila {
        grid-template-columns: 1fr !important;
        row-gap: 7px !important;
    }

    .iusp-login-formulario .ei-form-etiq,
    .iusp-login-formulario .ei-form-etiq-oblig {
        width: auto !important;
        min-width: 0 !important;
    }
}/* ==========================================================
   LOGIN IUSP - VERSIÓN MÓVIL
   ========================================================== */

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .iusp-login-page {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Encabezado */
    .iusp-login-header {
        min-height: auto !important;
        padding: 18px 16px !important;
    }

    .iusp-login-header-contenido {
        width: 100% !important;
        margin: 0 !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .iusp-login-logo img {
        width: 80px !important;
        height: 80px !important;
    }

    .iusp-login-marca-superior,
    .iusp-login-marca-inferior {
        font-size: 14px !important;
        line-height: 1.15 !important;
    }

    /* Una sola columna */
    .iusp-login-principal {
        display: block !important;
        width: 100% !important;
        min-height: auto !important;
    }

    /* Bienvenida */
    .iusp-login-bienvenida {
        display: block !important;
        width: 100% !important;
        padding: 30px 20px !important;
        box-sizing: border-box !important;
    }

    .iusp-login-bienvenida-contenido {
        width: 100% !important;
        max-width: none !important;
    }

    .iusp-login-bienvenida h1 {
        margin-bottom: 16px !important;
        font-size: 30px !important;
        line-height: 1.12 !important;
    }

    .iusp-login-introduccion {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .iusp-login-informacion {
        display: block !important;
        margin-bottom: 20px !important;
    }

    .iusp-login-informacion-item {
        width: 100% !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
    }

    .iusp-login-aviso {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Sector de autenticación */
    .iusp-login-acceso {
        display: block !important;
        width: 100% !important;
        padding: 32px 20px 40px !important;
        box-sizing: border-box !important;
    }

    .iusp-login-acceso-encabezado {
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto 18px !important;
    }

    .iusp-login-acceso-encabezado h2 {
        font-size: 25px !important;
    }

    /* Tarjeta */
    .iusp-login-formulario {
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto !important;
        padding: 28px 22px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .iusp-login-formulario .ei-form-cuerpo,
    .iusp-login-formulario div[id^="cuerpo_js_form_"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Etiqueta arriba y campo abajo */
    .iusp-login-formulario .ei-form-fila {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
    }

    .iusp-login-formulario .ei-form-etiq,
    .iusp-login-formulario .ei-form-etiq-oblig {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 7px !important;
        line-height: normal !important;
    }

    .iusp-login-formulario div[id^="cont_ef_"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .iusp-login-formulario input[type="text"],
    .iusp-login-formulario input[type="password"] {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 46px !important;
        box-sizing: border-box !important;
    }

    .iusp-login-formulario .ei-botonera {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        padding-top: 8px !important;
    }

    .iusp-login-formulario button,
    .iusp-login-formulario input[type="button"],
    .iusp-login-formulario input[type="submit"] {
        width: 100% !important;
        max-width: 220px !important;
        height: 46px !important;
    }

    .iusp-login-seguridad {
        width: 100% !important;
        max-width: 480px !important;
        margin: 14px auto 0 !important;
    }

    /* Pie */
    .iusp-login-footer {
        min-height: auto !important;
        padding: 22px 16px !important;
    }
}
/* ==========================================================
   PÁGINA DE INICIO DEL PORTAL
   ========================================================== */

.iusp-home {
    min-height: calc(100vh - 165px);
    padding: 46px 24px 60px;
    background:
        linear-gradient(
            180deg,
            #eef6fb 0%,
            #f7fafc 100%
        );
    box-sizing: border-box;
}

.iusp-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr);
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto 28px;
}

.iusp-home-presentacion {
    padding: 44px;
    border-radius: 20px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #1297c7 0%,
            #087aa8 100%
        );
    box-shadow: 0 16px 38px rgba(16, 78, 111, .18);
}

.iusp-home-etiqueta {
    display: inline-block;
    padding: 8px 15px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
}

.iusp-home-presentacion h1 {
    max-width: 750px;
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.08;
    color: #ffffff;
}

.iusp-home-introduccion {
    max-width: 760px;
    margin: 0 0 30px;
    font-size: 18px;
    line-height: 1.55;
}

.iusp-home-accesos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.iusp-home-acceso {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 13px;
    background: rgba(255, 255, 255, .1);
    color: #ffffff !important;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: .2s ease;
}

.iusp-home-acceso:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .12);
}

.iusp-home-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffd522;
    color: #07577c;
    font-size: 12px;
    font-weight: 900;
}

.iusp-home-acceso-texto {
    display: block;
}

.iusp-home-acceso-texto strong {
    display: block;
    margin-bottom: 5px;
    font-size: 17px;
}

.iusp-home-acceso-texto small {
    display: block;
    color: rgba(255, 255, 255, .92);
    font-size: 13px;
    line-height: 1.4;
}

.iusp-home-perfil {
    padding: 32px 28px;
    border-top: 5px solid #ffd522;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(16, 78, 111, .14);
    text-align: center;
}

.iusp-home-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #1198c8,
            #075b87
        );
    color: #ffffff;
    font-size: 31px;
    font-weight: 800;
}

.iusp-home-perfil h2 {
    margin: 0 0 25px;
    color: #074f76;
    font-size: 22px;
    line-height: 1.3;
}

.iusp-home-dato {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 0;
    border-bottom: 1px solid #e2ebf1;
    color: #526b7a;
    text-align: left;
}

.iusp-home-dato strong {
    color: #113d55;
}

.iusp-home-estado {
    margin-top: 24px;
    padding: 12px;
    border-radius: 9px;
    background: #e8f7ed;
    color: #237242;
    font-size: 13px;
    font-weight: 700;
}

.iusp-home-ayuda {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
}

.iusp-home-ayuda > div {
    padding: 24px;
    border: 1px solid #d9e7ef;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(16, 78, 111, .07);
}

.iusp-home-ayuda strong {
    display: block;
    margin-bottom: 8px;
    color: #075b87;
    font-size: 17px;
}

.iusp-home-ayuda p {
    margin: 0;
    color: #536b7b;
    font-size: 14px;
    line-height: 1.55;
}
/* ==========================================================
   CABECERA Y MENÚ SUPERIOR
   ========================================================== */

/* Quitar líneas amarillas del encabezado y del menú */
#barra_superior,
#encabezado,
.encabezado,
.cabecera,
.menu-principal,
.barra-menu,
.toba-barra-superior,
.toba-menu,
.toba-item-titulo,
.toba-area-trabajo {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Quitar específicamente cualquier borde amarillo */
div[style*="border-bottom"],
div[style*="border-top"] {
    border-color: transparent !important;
}

/* Franja donde aparece "Inicio" */
.toba-item-titulo,
.item-titulo,
#item_titulo,
div[class*="item-titulo"] {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Menú principal */
.toba-menu,
.menu-principal,
ul.menu {
    border-bottom: none !important;
}

/* ==========================================================
   USUARIO LOGUEADO ARRIBA A LA DERECHA
   ========================================================== */

/* Contenedor del usuario */
#usuario,
.usuario,
.usuario-logueado,
.usuario-info,
div[id*="usuario"],
div[class*="usuario"] {
    background: #ffffff !important;
    color: #0a4f74 !important;
    border-radius: 10px !important;
    padding: 7px 12px !important;
    margin: 5px 12px 5px 5px !important;
    box-shadow: 0 2px 8px rgba(0, 70, 110, 0.10) !important;
    border: 1px solid #d4e3ec !important;
    line-height: 1.25 !important;
}

/* Nombre */
#usuario strong,
.usuario strong,
.usuario-logueado strong,
.usuario-info strong,
div[id*="usuario"] strong,
div[class*="usuario"] strong {
    color: #084f75 !important;
    font-weight: 700 !important;
}

/* CUIL */
#usuario span,
#usuario small,
.usuario span,
.usuario small,
.usuario-logueado span,
.usuario-logueado small,
.usuario-info span,
.usuario-info small,
div[id*="usuario"] span,
div[id*="usuario"] small,
div[class*="usuario"] span,
div[class*="usuario"] small {
    color: #526f80 !important;
    font-weight: 500 !important;
}

/* Enlaces dentro del bloque usuario */
#usuario a,
.usuario a,
.usuario-logueado a,
.usuario-info a,
div[id*="usuario"] a,
div[class*="usuario"] a {
    color: #084f75 !important;
    text-decoration: none !important;
}

/* Evitar texto blanco heredado */
div[id*="usuario"] *,
div[class*="usuario"] * {
    text-shadow: none !important;
}
/* ==========================================================
   MENÚ SUPERIOR IUSP
   ========================================================== */

#menu,
.menu,
.menu-principal,
.toba-menu {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    min-height: 58px !important;
    padding: 0 28px !important;

    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(7, 79, 118, 0.08) !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    box-sizing: border-box !important;
}

/* Enlaces */
#menu a,
.menu a,
.menu-principal a,
.toba-menu a {
    display: inline-flex !important;
    align-items: center !important;

    min-height: 38px !important;
    padding: 0 16px !important;

    color: #17384e !important;
    background: transparent !important;

    border: none !important;
    border-radius: 8px !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;

    text-decoration: none !important;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease !important;
}

/* Hover */
#menu a:hover,
.menu a:hover,
.menu-principal a:hover,
.toba-menu a:hover {
    color: #067ca9 !important;
    background: #e9f5fa !important;
    transform: translateY(-1px) !important;
}

/* Opción activa */
#menu a.activo,
.menu a.activo,
.menu-principal a.activo,
.toba-menu a.activo,
#menu .seleccionado a,
.menu .seleccionado a,
.toba-menu .seleccionado a {
    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        #1497c7 0%,
        #087ca9 100%
    ) !important;

    box-shadow: 0 4px 10px rgba(8, 124, 169, 0.22) !important;
}

/* Eliminar estilos viejos de listas */
#menu ul,
.menu ul,
.menu-principal ul,
.toba-menu ul {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#menu li,
.menu li,
.menu-principal li,
.toba-menu li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}/* ==========================================================
   MENÚ SUPERIOR IUSP
   ========================================================== */

#menu,
.menu,
.menu-principal,
.toba-menu {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    min-height: 58px !important;
    padding: 0 28px !important;

    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(7, 79, 118, 0.08) !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    box-sizing: border-box !important;
}

/* Enlaces */
#menu a,
.menu a,
.menu-principal a,
.toba-menu a {
    display: inline-flex !important;
    align-items: center !important;

    min-height: 38px !important;
    padding: 0 16px !important;

    color: #17384e !important;
    background: transparent !important;

    border: none !important;
    border-radius: 8px !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;

    text-decoration: none !important;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease !important;
}

/* Hover */
#menu a:hover,
.menu a:hover,
.menu-principal a:hover,
.toba-menu a:hover {
    color: #067ca9 !important;
    background: #e9f5fa !important;
    transform: translateY(-1px) !important;
}

/* Opción activa */
#menu a.activo,
.menu a.activo,
.menu-principal a.activo,
.toba-menu a.activo,
#menu .seleccionado a,
.menu .seleccionado a,
.toba-menu .seleccionado a {
    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        #1497c7 0%,
        #087ca9 100%
    ) !important;

    box-shadow: 0 4px 10px rgba(8, 124, 169, 0.22) !important;
}

/* Eliminar estilos viejos de listas */
#menu ul,
.menu ul,
.menu-principal ul,
.toba-menu ul {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#menu li,
.menu li,
.menu-principal li,
.toba-menu li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
/* ==========================================================
   CUADRO DE BONOS — ENCABEZADO REAL GENERADO POR TOBA
   ========================================================== */

/* Celdas de títulos del cuadro */
.ei-cuadro-cuerpo td.ei-cuadro-col-tit,
.ei-cuadro-cuerpo tr:nth-child(odd) td.ei-cuadro-col-tit,
.ei-cuadro-cuerpo tr:nth-child(even) td.ei-cuadro-col-tit {
    background: #075b87 !important;
    color: #ffffff !important;

    padding: 14px 12px !important;
    border: 0 !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    vertical-align: middle !important;
}

/* Elementos internos de los títulos */
.ei-cuadro-cuerpo td.ei-cuadro-col-tit *,
.ei-cuadro-cuerpo td.ei-cuadro-col-tit a,
.ei-cuadro-cuerpo td.ei-cuadro-col-tit span,
.ei-cuadro-cuerpo td.ei-cuadro-col-tit div {
    background: transparent !important;
    color: #ffffff !important;
    border: 0 !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

/* La alternancia solo debe aplicarse a filas de datos */
.ei-cuadro-cuerpo tr:nth-child(even) td:not(.ei-cuadro-col-tit) {
    background: #f4f9fc !important;
    color: #17384e !important;
}

.ei-cuadro-cuerpo tr:nth-child(odd) td:not(.ei-cuadro-col-tit) {
    background: #ffffff !important;
    color: #17384e !important;
}

/* Fila al pasar el mouse */
.ei-cuadro-cuerpo tr:hover td:not(.ei-cuadro-col-tit) {
    background: #e7f3f9 !important;
}

/* Celdas normales */
.ei-cuadro-cuerpo td:not(.ei-cuadro-col-tit) {
    padding: 13px 10px !important;
    border-bottom: 1px solid #dce8ef !important;
    vertical-align: middle !important;
}
/* ==========================================================
   PORTAL IUSP — ADAPTACIÓN COMPLETA PARA CELULAR
   Pegarlo al final de toba.css
   ========================================================== */

@media screen and (max-width: 768px) {

    /* Evita que la página sea más ancha que el celular */
    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    * {
        box-sizing: border-box !important;
    }

    /* ------------------------------------------------------
       ENCABEZADO SUPERIOR
       ------------------------------------------------------ */

    .encabezado {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: auto !important;

        margin: 0 !important;
        padding: 8px 10px !important;
    }

    .enc-logo {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .enc-logo img {
        max-width: 150px !important;
        height: auto !important;
    }

    .enc-usuario {
        float: none !important;
        flex: 0 1 auto !important;

        margin: 0 !important;
        padding: 6px 8px !important;

        text-align: right !important;
        font-size: 11px !important;
    }

    .enc-usuario-nom {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    .enc-usuario-id {
        font-size: 10px !important;
    }

    .enc-salir {
        margin: 0 0 0 4px !important;
    }

    /* ------------------------------------------------------
       MENÚ
       ------------------------------------------------------ */

    .zona-items {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 4px 8px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;

        -webkit-overflow-scrolling: touch;
    }

    .zona-items a,
    .menu-link-nueva-ventana {
        display: inline-flex !important;
        align-items: center !important;

        min-height: 40px !important;
        padding: 0 11px !important;

        font-size: 13px !important;
        white-space: nowrap !important;
    }

    /* Título azul: Bonos de sueldo / Datos personales */
    .barra-separador,
    .zona-barra-desc,
    .ci-barra-sup,
    .zona-barra-sup {
        width: 100% !important;
        min-height: auto !important;

        margin: 0 !important;
        padding: 14px 15px !important;

        font-size: 14px !important;
    }

    /* ------------------------------------------------------
       CONTENIDO GENERAL
       ------------------------------------------------------ */

    .cuerpo,
    .ci-base,
    .ci-cuerpo,
    .ci-simple-cont {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .ci-cuerpo {
        padding: 10px !important;
    }

    .ci-simple-cont {
        margin: 0 auto !important;
        padding: 0 !important;

        border-radius: 10px !important;
        overflow: hidden !important;
    }

    /* ------------------------------------------------------
       FILTRO DE MES Y AÑO
       ------------------------------------------------------ */

    .ei-filtro-grilla,
    .ei-form-base,
    .ei-form-cuerpo {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 12px !important;
    }

    .ei-filtro-grilla table,
    .ei-form-cuerpo table {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ei-form-fila {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 6px 0 !important;

        white-space: normal !important;
    }

    .ei-form-etiq,
    .ei-form-etiq-oblig,
    .ei-filtro-etiq,
    .ei-filtro-etiq-oblig {
        display: block !important;
        float: none !important;

        width: 100% !important;
        margin: 0 0 5px !important;

        line-height: 1.4 !important;
        font-size: 13px !important;
    }

    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="email"],
    select,
    textarea,
    .ef-input,
    .ef-combo,
    .ef-textarea {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        min-height: 42px !important;
        margin: 0 !important;
        padding: 8px 10px !important;

        font-size: 16px !important;
    }

    /*
     * Evita que iPhone y Android hagan zoom
     * automático al tocar un campo.
     */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .ei-filtro-botonera,
    .ei-botonera {
        display: flex !important;
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
        gap: 8px !important;

        float: none !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 10px 0 0 !important;
    }

    button,
    input[type="button"],
    input[type="submit"],
    .ei-boton,
    .ei-boton-filtrar,
    .ei-boton-mod,
    .ei-boton-canc {
        min-height: 42px !important;
        padding: 9px 15px !important;
        font-size: 14px !important;
    }

    /* ------------------------------------------------------
       CUADRO DE BONOS
       Mantiene las columnas y permite desplazar horizontalmente
       ------------------------------------------------------ */

    .ei-cuadro-base {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 12px 0 0 !important;
        border-radius: 9px !important;
        overflow: hidden !important;
    }

    .ei-cuadro-scroll {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto !important;
        overflow-y: visible !important;

        -webkit-overflow-scrolling: touch;
    }

    .ei-cuadro-cuerpo {
        width: 100% !important;
        min-width: 690px !important;

        border-collapse: collapse !important;
        table-layout: auto !important;
    }

    .ei-cuadro-cuerpo td.ei-cuadro-col-tit {
        padding: 11px 9px !important;

        font-size: 12px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
    }

    .ei-cuadro-cuerpo td:not(.ei-cuadro-col-tit) {
        padding: 11px 9px !important;

        font-size: 12px !important;
        line-height: 1.35 !important;
        vertical-align: middle !important;
    }

    /* El archivo puede dividirse en varias líneas */
    .ei-cuadro-cuerpo td {
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* Botón descargar */
    .ei-cuadro-fila-evt,
    .ei-cuadro-celda-evt {
        min-width: 145px !important;
        white-space: nowrap !important;
    }

    .ei-cuadro-fila-evt a,
    .ei-cuadro-celda-evt a,
    .ei-cuadro-fila-evt button,
    .ei-cuadro-celda-evt button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 135px !important;
        min-height: 40px !important;

        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
}


/* ==========================================================
   CELULARES PEQUEÑOS
   ========================================================== */

@media screen and (max-width: 480px) {

    .encabezado {
        padding: 6px 8px !important;
    }

    .enc-logo img {
        max-width: 115px !important;
    }

    .enc-usuario {
        max-width: 130px !important;
        font-size: 10px !important;
    }

    .zona-items a,
    .menu-link-nueva-ventana {
        padding: 0 9px !important;
        font-size: 12px !important;
    }

    .ci-cuerpo {
        padding: 7px !important;
    }

    .ei-filtro-grilla,
    .ei-form-cuerpo {
        padding: 10px !important;
    }

    .ei-cuadro-cuerpo {
        min-width: 650px !important;
    }
}
/* ==========================================================
   INICIO DEL PORTAL EN CELULAR
   ========================================================== */

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    .iusp-home {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 20px 14px 40px !important;
        margin: 0 !important;
    }

    .iusp-home-hero {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 16px !important;
        margin: 0 0 16px !important;
    }

    .iusp-home-presentacion,
    .iusp-home-perfil {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .iusp-home-presentacion {
        padding: 26px 19px !important;
        border-radius: 16px !important;
    }

    .iusp-home-etiqueta {
        margin-bottom: 16px !important;
        font-size: 11px !important;
    }

    .iusp-home-presentacion h1 {
        margin: 0 0 16px !important;

        font-size: 29px !important;
        line-height: 1.12 !important;
        text-align: left !important;
    }

    .iusp-home-introduccion {
        margin-bottom: 22px !important;

        font-size: 15px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    .iusp-home-accesos {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        gap: 11px !important;
    }

    .iusp-home-acceso {
        width: 100% !important;
        min-height: 76px !important;

        padding: 14px !important;
    }

    .iusp-home-perfil {
        padding: 25px 20px !important;
        border-radius: 16px !important;
    }

    .iusp-home-avatar {
        width: 68px !important;
        height: 68px !important;
        font-size: 27px !important;
    }

    .iusp-home-perfil h2 {
        font-size: 20px !important;
    }

    .iusp-home-ayuda {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 13px !important;
        margin: 0 !important;
    }

    .iusp-home-ayuda > div {
        width: 100% !important;
        padding: 20px 17px !important;
        box-sizing: border-box !important;
    }
}
/* Todo el CSS actual de Toba */
/* ... */

/* Tus estilos del portal */
/* ... */

/* ==========================================================
   LOGIN EN UNA COLUMNA PARA CELULAR
   PEGAR AL FINAL DEL ARCHIVO
   ========================================================== */

@media screen and (max-width: 768px) {

    .iusp-login-principal {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .iusp-login-bienvenida,
    .iusp-login-acceso {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 28px 20px !important;
        box-sizing: border-box !important;
    }

    .iusp-login-informacion {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .iusp-login-informacion-item {
        width: 100% !important;
    }

    .iusp-login-formulario {
        width: 100% !important;
        max-width: 460px !important;
        margin: 0 auto !important;
        padding: 23px 18px !important;
        box-sizing: border-box !important;
    }

    .iusp-login-formulario .ei-form-fila {
        display: block !important;
        width: 100% !important;
        padding: 7px 0 !important;
    }

    .iusp-login-formulario .ei-form-etiq,
    .iusp-login-formulario .ei-form-etiq-oblig {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 0 6px !important;
    }

    .iusp-login-formulario div[id^="cont_ef_"] {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    .iusp-login-formulario input[type="text"],
    .iusp-login-formulario input[type="password"] {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 46px !important;
        padding: 8px 10px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }
}
/* Quitar la línea celeste del campo Usuario */
#nodo_ef_form_28000218_datosusuario,
#nodo_ef_form_28000218_datosusuario .ei-form-fila,
#nodo_ef_form_28000218_datosusuario div[id^="cont_ef_"] {
    border-top: none !important;
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
}
/* ==========================================================
   PORTAL IUSP — LOGIN RESPONSIVE
   ========================================================== */

.iusp-login-page {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    background: #eef7fb;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #ffffff;
    box-sizing: border-box;
}

.iusp-login-page *,
.iusp-login-page *::before,
.iusp-login-page *::after {
    box-sizing: border-box;
}

/* ----------------------------------------------------------
   CABECERA
   ---------------------------------------------------------- */

.iusp-login-header {
    width: 100%;
    background: #ffffff;
    padding: 24px 20px;
}

.iusp-login-header-contenido {
    display: flex;
    align-items: center;
    gap: 22px;

    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.iusp-login-logo img {
    display: block;
    width: 78px;
    height: auto;
}

.iusp-login-marca {
    display: flex;
    flex-direction: column;
    color: #005681;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.iusp-login-marca-superior,
.iusp-login-marca-inferior {
    display: block;
    font-size: 23px;
}

/* ----------------------------------------------------------
   CONTENIDO PRINCIPAL
   ---------------------------------------------------------- */

.iusp-login-principal {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(380px, 0.75fr);

    width: 100%;
    min-height: 510px;

    background: linear-gradient(
        90deg,
        #0d98c7 0%,
        #0d98c7 58%,
        #087ca5 58%,
        #087ca5 100%
    );
}

.iusp-login-bienvenida,
.iusp-login-acceso {
    min-width: 0;
}

/* ----------------------------------------------------------
   BIENVENIDA
   ---------------------------------------------------------- */

.iusp-login-bienvenida {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    padding: 48px 55px 48px 25px;
}

.iusp-login-bienvenida-contenido {
    width: 100%;
    max-width: 650px;
}

.iusp-login-etiqueta {
    display: inline-block;

    margin-bottom: 18px;
    padding: 7px 14px;

    border: 1px solid rgba(255, 255, 255, 0.40);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.08);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.iusp-login-bienvenida h1 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: 43px;
    line-height: 1.08;
    font-weight: 800;
}

.iusp-login-introduccion {
    max-width: 610px;
    margin: 0 0 25px;

    font-size: 17px;
    line-height: 1.5;
}

.iusp-login-informacion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;

    margin-bottom: 22px;
}

.iusp-login-informacion-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    min-width: 0;
    padding: 16px;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.08);
}

.iusp-login-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    border-radius: 50%;
    background: #ffd225;
    color: #075477;

    font-size: 10px;
    font-weight: 800;
}

.iusp-login-informacion-item strong {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}

.iusp-login-informacion-item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

.iusp-login-aviso {
    padding: 15px 17px;

    border-left: 4px solid #ffd225;
    background: rgba(1, 87, 124, 0.38);

    font-size: 13px;
    line-height: 1.5;
}

/* ----------------------------------------------------------
   ACCESO
   ---------------------------------------------------------- */

.iusp-login-acceso {
    display: flex;
    align-items: center;

    padding: 42px 38px;
}

.iusp-login-acceso-contenido {
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
}

.iusp-login-acceso-encabezado {
    margin-bottom: 17px;
}

.iusp-login-acceso-encabezado > span {
    display: block;
    margin-bottom: 6px;

    color: #ffd225;

    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.iusp-login-acceso-encabezado h2 {
    margin: 0 0 7px;

    color: #ffffff;

    font-size: 28px;
    line-height: 1.2;
}

.iusp-login-acceso-encabezado p {
    margin: 0;
    font-size: 14px;
}

/* ----------------------------------------------------------
   FORMULARIO TOBA
   ---------------------------------------------------------- */

.iusp-login-formulario {
    width: 100%;
    padding: 30px 28px;

    border-top: 4px solid #ffd225;
    border-radius: 12px;

    background: #ffffff;
    box-shadow: 0 12px 26px rgba(0, 58, 85, 0.20);

    color: #073e5d;
}

.iusp-login-formulario .ei-titulo {
    margin-bottom: 20px;
    color: #073e5d;
    font-size: 21px;
    font-weight: 800;
    text-align: center;
}

/* Eliminar líneas celestes de Toba */
.iusp-login-formulario table,
.iusp-login-formulario tbody,
.iusp-login-formulario tr,
.iusp-login-formulario td,
.iusp-login-formulario .ei-form-base,
.iusp-login-formulario .ei-form-cuerpo,
.iusp-login-formulario .ei-form-fila,
.iusp-login-formulario div[id^="nodo_ef_"],
.iusp-login-formulario div[id^="cont_ef_"] {
    border: 0 !important;
    outline: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
}

.iusp-login-formulario .ei-form-fila {
    display: grid !important;
    grid-template-columns: 105px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 14px !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 8px 0 !important;
}

.iusp-login-formulario .ei-form-etiq,
.iusp-login-formulario .ei-form-etiq-oblig {
    display: block !important;
    float: none !important;

    width: auto !important;
    margin: 0 !important;

    color: #073e5d !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}

.iusp-login-formulario div[id^="cont_ef_"] {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
}

.iusp-login-formulario input[type="text"],
.iusp-login-formulario input[type="password"] {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 8px 11px !important;

    border: 1px solid #b9d3e1 !important;
    border-radius: 8px !important;

    background: #ffffff !important;
    color: #17384e !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 16px !important;

    box-shadow: none !important;
}

.iusp-login-formulario input[type="text"]:focus,
.iusp-login-formulario input[type="password"]:focus {
    border-color: #0694c4 !important;
    outline: none !important;

    box-shadow: 0 0 0 3px rgba(6, 148, 196, 0.15) !important;
}

.iusp-login-formulario .ei-botonera {
    display: flex !important;
    justify-content: flex-end !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 18px 0 0 !important;
}

.iusp-login-formulario button,
.iusp-login-formulario input[type="button"],
.iusp-login-formulario input[type="submit"],
.iusp-login-formulario .ei-boton {
    min-height: 43px !important;
    padding: 9px 22px !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: #0789b9 !important;
    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    box-shadow: 0 5px 12px rgba(0, 108, 151, 0.22) !important;
}

.iusp-login-seguridad {
    margin-top: 13px;
    text-align: center;
    font-size: 12px;
}

/* ----------------------------------------------------------
   PIE
   ---------------------------------------------------------- */

.iusp-login-footer {
    width: 100%;
    padding: 20px;

    background: #ffffff;
    color: #55758a;

    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}

.iusp-login-footer-siu {
    margin-top: 8px;
}

/* ==========================================================
   CELULAR
   ========================================================== */

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
    }

    .iusp-login-page {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Cabecera móvil */

    .iusp-login-header {
        padding: 14px 16px !important;
    }

    .iusp-login-header-contenido {
        justify-content: center !important;
        gap: 11px !important;
    }

    .iusp-login-logo img {
        width: 95px !important;
    }

    .iusp-login-marca-superior,
    .iusp-login-marca-inferior {
        font-size: 14px !important;
    }

    /* Una sola columna */

    .iusp-login-principal {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        min-height: 0 !important;

        background: #0d98c7 !important;
    }

    .iusp-login-bienvenida,
    .iusp-login-acceso {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 28px 18px !important;
    }

    .iusp-login-bienvenida-contenido,
    .iusp-login-acceso-contenido {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
    }

    .iusp-login-bienvenida h1 {
        font-size: 30px !important;
        line-height: 1.12 !important;
    }

    .iusp-login-introduccion {
        font-size: 15px !important;
    }

    /* Tarjetas una debajo de otra */

    .iusp-login-informacion {
        display: flex !important;
        flex-direction: column !important;
        gap: 11px !important;
    }

    .iusp-login-informacion-item {
        width: 100% !important;
    }

    /* Fondo del sector acceso */

    .iusp-login-acceso {
        background: #087ca5 !important;
        padding-top: 25px !important;
        padding-bottom: 34px !important;
    }

    .iusp-login-acceso-encabezado h2 {
        font-size: 24px !important;
    }

    /* Formulario móvil */

    .iusp-login-formulario {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 24px 18px !important;
    }

    .iusp-login-formulario .ei-form-fila {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 7px 0 !important;
    }

    .iusp-login-formulario .ei-form-etiq,
    .iusp-login-formulario .ei-form-etiq-oblig {
        display: block !important;
        float: none !important;

        width: 100% !important;
        margin: 0 0 6px !important;

        font-size: 14px !important;
    }

    .iusp-login-formulario div[id^="cont_ef_"] {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
    }

    .iusp-login-formulario input[type="text"],
    .iusp-login-formulario input[type="password"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 47px !important;

        /*
         * 16px impide que el navegador móvil
         * haga zoom al tocar el campo.
         */
        font-size: 16px !important;
    }

    .iusp-login-formulario .ei-botonera {
        justify-content: center !important;
        padding-top: 16px !important;
    }

    .iusp-login-formulario button,
    .iusp-login-formulario input[type="button"],
    .iusp-login-formulario input[type="submit"],
    .iusp-login-formulario .ei-boton {
        width: 100% !important;
        max-width: 230px !important;
        min-height: 46px !important;
    }

    .iusp-login-footer {
        padding: 18px 14px !important;
        font-size: 11px !important;
    }
}

/* ==========================================================
   CELULARES PEQUEÑOS
   ========================================================== */

@media screen and (max-width: 420px) {

    .iusp-login-header-contenido {
        justify-content: flex-start !important;
    }

    .iusp-login-logo img {
        width: 150px !important;
    }

    .iusp-login-marca-superior,
    .iusp-login-marca-inferior {
        font-size: 12px !important;
    }

    .iusp-login-bienvenida,
    .iusp-login-acceso {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .iusp-login-bienvenida h1 {
        font-size: 27px !important;
    }

    .iusp-login-formulario {
        padding: 22px 15px !important;
    }
}
/* ==========================================================
   AJUSTE ESCRITORIO: TODO VISIBLE SIN SCROLL VERTICAL
   ========================================================== */


   @media screen and (min-width: 769px) {
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

    .iusp-login-page {
        min-height: 100vh !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Cabecera más compacta */
    .iusp-login-header {
        flex: 0 0 auto !important;
        padding: 14px 20px !important;
    }

    .iusp-login-header-contenido {
        min-height: 72px !important;
    }

    .iusp-login-logo img {
        width: 98px !important;
    }

    .iusp-login-marca-superior,
    .iusp-login-marca-inferior {
        font-size: 20px !important;
    }

    /* Zona principal ocupa el espacio disponible */
    .iusp-login-principal {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .iusp-login-bienvenida {
        padding: 28px 42px 28px 25px !important;
    }

    .iusp-login-bienvenida h1 {
        font-size: 38px !important;
        margin-bottom: 12px !important;
    }

    .iusp-login-introduccion {
        margin-bottom: 18px !important;
        font-size: 16px !important;
    }

    .iusp-login-informacion {
        margin-bottom: 16px !important;
    }

    .iusp-login-informacion-item {
        padding: 13px !important;
    }

    .iusp-login-aviso {
        padding: 12px 15px !important;
    }

    .iusp-login-acceso {
        padding: 26px 30px !important;
    }

    .iusp-login-acceso-encabezado {
        margin-bottom: 12px !important;
    }

    .iusp-login-acceso-encabezado h2 {
        font-size: 25px !important;
    }

    .iusp-login-formulario {
        padding: 22px 24px !important;
    }

    .iusp-login-formulario .ei-titulo {
        margin-bottom: 12px !important;
        font-size: 20px !important;
    }

    .iusp-login-formulario .ei-form-fila {
        padding: 6px 0 !important;
    }

    .iusp-login-formulario input[type="text"],
    .iusp-login-formulario input[type="password"] {
        height: 42px !important;
    }

    .iusp-login-formulario .ei-botonera {
        padding-top: 12px !important;
    }

    .iusp-login-seguridad {
        margin-top: 9px !important;
    }

    /* Pie más bajo */
    .iusp-login-footer {
        flex: 0 0 auto !important;
        padding: 10px 20px !important;
        line-height: 1.35 !important;
    }

    .iusp-login-footer-siu {
        margin-top: 4px !important;
    }
}
/* Ocultar la cruz roja del campo Usuario en el login */
.iusp-login-formulario img[src*="error"],
.iusp-login-formulario img[src*="estado"],
.iusp-login-formulario .ei-estado,
.iusp-login-formulario .ef-error,
.iusp-login-formulario .ei-form-estado {
    display: none !important;
}

/* Evitar que quede el espacio reservado para la cruz */
.iusp-login-formulario .ei-form-fila {
    padding-left: 0 !important;
}

.iusp-login-formulario div[id^="cont_ef_"] {
    margin-left: 0 !important;
}
html {
    scroll-behavior: auto !important;
}
/* ==========================================================
   CABECERA MÓVIL: MENÚ COMPLETO + USUARIO DEBAJO
   ========================================================== */

@media screen and (max-width: 768px) {

    .iusp-cabecera-movil {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 7px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 7px !important;

        background: #eef7fb !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* ======================================================
       MENÚ: las tres opciones en una sola fila
       ====================================================== */

    .iusp-cabecera-movil #menu-h,
    .iusp-cabecera-movil #menu-h.horizontal,
    .iusp-cabecera-movil #menu-h.iusp-menu-movil {
        grid-row: 1 !important;

        display: grid !important;
        grid-template-columns:
            minmax(0, 0.70fr)
            minmax(0, 1.15fr)
            minmax(0, 1.25fr) !important;

        gap: 4px !important;

        position: static !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
        background: transparent !important;

        box-sizing: border-box !important;
    }

    .iusp-cabecera-movil #menu-h > li {
        display: block !important;
        float: none !important;
        position: static !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    .iusp-cabecera-movil #menu-h > li > a.nivel-0 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 43px !important;

        margin: 0 !important;
        padding: 6px 2px !important;

        background: #ffffff !important;
        color: #064b70 !important;

        border: 1px solid #c5dce7 !important;
        border-radius: 7px !important;

        font-family: "Segoe UI", Arial, sans-serif !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.08 !important;
        text-align: center !important;
        text-decoration: none !important;

        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;

        box-sizing: border-box !important;
    }

    .iusp-cabecera-movil #menu-h img {
        display: none !important;
    }
@media screen and (max-width: 768px) {

    .iusp-cabecera-movil {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 8px !important;

        width: 100% !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
    }

    /* Usuario arriba y a la derecha */
    .iusp-cabecera-movil .enc-usuario {
        grid-row: 1 !important;
        justify-self: end !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 30px !important;
        grid-template-areas:
            "nombre salir"
            "dni salir" !important;

        align-items: center !important;
        column-gap: 8px !important;
        row-gap: 1px !important;

        width: auto !important;
        min-width: 170px !important;
        max-width: 230px !important;

        margin: 0 !important;
        padding: 8px 8px 8px 12px !important;

        background: #078fc4 !important;
        border: 1px solid #d4e4ec !important;
        border-radius: 10px !important;

        box-shadow: 0 2px 7px rgba(6, 75, 112, 0.08) !important;
        box-sizing: border-box !important;
    }

    .iusp-cabecera-movil .enc-usuario-nom {
        grid-area: nombre !important;

        display: block !important;
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        text-align: center !important;

        white-space: normal !important;
    }

    .iusp-cabecera-movil .enc-usuario-id {
        grid-area: dni !important;

        display: block !important;
        color: #ffffff !important;

        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 1.15 !important;
        text-align: center !important;

        white-space: nowrap !important;
    }

    .iusp-cabecera-movil .enc-salir,
    .iusp-cabecera-movil .iusp-boton-salir {
        grid-area: salir !important;

        position: static !important;
        transform: none !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 28px !important;
        height: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #e8f3f8 !important;
        border: 0 !important;
        border-radius: 50% !important;
    }

    /* Menú debajo, ocupando todo el ancho */
    .iusp-cabecera-movil #menu-h,
    .iusp-cabecera-movil #menu-h.horizontal,
    .iusp-cabecera-movil #menu-h.iusp-menu-movil {
        grid-row: 2 !important;
        width: 100% !important;
        margin: 0 !important;
    }
}
@media screen and (max-width: 768px) {

    /* Contenedor general */
    .iusp-cabecera-movil {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 7px !important;

        width: 100% !important;
        padding: 8px 10px 10px !important;

        background: #eef7fb !important;
        border-bottom: 1px solid #d6e6ee !important;

        box-sizing: border-box !important;
    }

    /* Usuario arriba */
    .iusp-cabecera-movil .enc-usuario {
        grid-row: 1 !important;
        justify-self: end !important;

        width: auto !important;
        min-width: 180px !important;
        max-width: 230px !important;

        margin: 0 !important;
    }

    /* Barra de menú */
    .iusp-cabecera-movil #menu-h,
    .iusp-cabecera-movil #menu-h.horizontal,
    .iusp-cabecera-movil #menu-h.iusp-menu-movil {
        grid-row: 2 !important;

        display: grid !important;
        grid-template-columns:
            0.72fr
            1.16fr
            1.30fr !important;

        gap: 0 !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 4px !important;

        background: #ffffff !important;
        border: 1px solid #c9dfe9 !important;
        border-radius: 12px !important;

        list-style: none !important;

        box-shadow: 0 3px 10px rgba(6, 75, 112, 0.08) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .iusp-cabecera-movil #menu-h > li {
        display: block !important;
        float: none !important;
        position: static !important;

        left: auto !important;
        right: auto !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    .iusp-cabecera-movil #menu-h > li:not(:last-child) {
        border-right: 1px solid #e1edf2 !important;
    }

    .iusp-cabecera-movil #menu-h > li > a.nivel-0 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 7px 3px !important;

        background: transparent !important;
        color: #075174 !important;

        border: 0 !important;
        border-radius: 8px !important;

        font-family: "Segoe UI", Arial, sans-serif !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        text-decoration: none !important;

        white-space: normal !important;

        box-shadow: none !important;
        box-sizing: border-box !important;

        transition:
            background-color 0.2s ease,
            color 0.2s ease !important;
    }

    .iusp-cabecera-movil #menu-h > li > a.nivel-0:hover,
    .iusp-cabecera-movil #menu-h > li > a.nivel-0:focus {
        background: #e5f3f8 !important;
        color: #043f5e !important;
        outline: none !important;
    }

    /* Opción seleccionada */
    .iusp-cabecera-movil #menu-h > li > a.nivel-0.activo,
    .iusp-cabecera-movil #menu-h > li > a.nivel-0.seleccionado,
    .iusp-cabecera-movil #menu-h > li.actual > a.nivel-0 {
        background: #0b8fbd !important;
        color: #ffffff !important;
    }

    .iusp-cabecera-movil #menu-h img {
        display: none !important;
    }
}
/* ==========================================================
   FILTRO DE BONOS RESPONSIVE - CORREGIDO
   ========================================================== */

@media screen and (max-width: 768px) {

    /*
     * Tabla de Toba que contiene el filtro.
     * :has permite seleccionar la tabla padre.
     */
    table.ei-base:has(#cuerpo_js_form_28000229_filtro),
    table.ei-base:has(#cuerpo_js_form_28000229_filtro) > tbody,
    table.ei-base:has(#cuerpo_js_form_28000229_filtro) > tbody > tr,
    table.ei-base:has(#cuerpo_js_form_28000229_filtro) > tbody > tr > td {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Contenedor del filtro */
    #cuerpo_js_form_28000229_filtro {
        display: block !important;
        position: static !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 14px !important;

        background: #ffffff !important;
        border: 1px solid #d4e4ec !important;
        border-radius: 10px !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Mes y Año */
    #cuerpo_js_form_28000229_filtro .ei-form-fila {
        display: grid !important;
        grid-template-columns: 65px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;

        position: static !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 0 12px !important;
        padding: 0 !important;

        white-space: normal !important;
        box-sizing: border-box !important;
    }

    /* Etiquetas */
    #cuerpo_js_form_28000229_filtro .ei-form-fila > label {
        display: block !important;
        float: none !important;

        width: auto !important;
        max-width: 65px !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #064b70 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    /* Contenedores de los inputs */
    #cuerpo_js_form_28000229_filtro div[id^="cont_ef_form_"] {
        display: block !important;
        position: static !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Campos */
    #cuerpo_js_form_28000229_filtro input[type="text"],
    #cuerpo_js_form_28000229_filtro input[type="number"],
    #cuerpo_js_form_28000229_filtro select {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;

        margin: 0 !important;
        padding: 7px 10px !important;

        border: 1px solid #b8d2df !important;
        border-radius: 7px !important;
        background: #ffffff !important;

        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    /* Botonera */
    #cuerpo_js_form_28000229_filtro .ei-botonera {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;

        float: none !important;
        clear: both !important;

        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;

        margin: 2px 0 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    #cuerpo_js_form_28000229_filtro .ei-botonera input,
    #cuerpo_js_form_28000229_filtro .ei-botonera button,
    #cuerpo_js_form_28000229_filtro .ei-botonera .ei-boton {
        width: auto !important;
        min-width: 105px !important;
        height: 40px !important;

        margin: 0 !important;
        padding: 8px 15px !important;
    }
}
/* ==========================================================
   OCUPAR TODO EL ANCHO DEL CELULAR
   ========================================================== */

@media screen and (max-width: 768px) {

    html {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
    }

    body {
        position: relative !important;
        left: 0 !important;
        right: auto !important;

        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Estructura principal generada por Toba */
    form#formulario_toba,
    body > form,
    div.cuerpo,
    .cuerpo,
    .ci-cuerpo,
    .ci-simple-cont,
    .simple-cont,
    .contenido,
    #contenido {
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        float: none !important;

        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
    }

    /* Cabecera, título y contenido */
    .iusp-cabecera-movil,
    .item-barra,
    .titulo-item,
    .ci-cuerpo,
    .ci-simple-cont {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }

    /* Filtro */
    #cuerpo_js_form_28000229_filtro {
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;

        margin: 6px !important;
        box-sizing: border-box !important;
    }

    /* Cuadro de bonos */
    .ei-cuadro,
    .ei-cuadro-base,
    .ei-cuadro-scroll,
    .ei-cuadro-cuerpo {
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
        min-width: 0 !important;

        margin: 6px !important;

        box-sizing: border-box !important;
    }
}

/* ==========================================================
   DATOS PERSONALES - DISEÑO MÓVIL MODERNO
   Formulario: 28000233_formulario
   ========================================================== */

@media screen and (max-width: 768px) {

    /* Fondo de la pantalla */
    body {
        background: #eef7fb !important;
    }

    /* Contenedor principal */
    #cuerpo_js_form_28000233_formulario {
        display: block !important;
        position: static !important;
        float: none !important;

        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 10px !important;
        padding: 8px 16px 16px !important;

        background: #ffffff !important;
        border: 1px solid #d2e3eb !important;
        border-radius: 16px !important;

        box-shadow:
            0 8px 22px rgba(6, 75, 112, 0.10),
            0 2px 6px rgba(6, 75, 112, 0.05) !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Cada fila */
    #cuerpo_js_form_28000233_formulario .ei-form-fila {
        display: grid !important;
        grid-template-columns: 120px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;

        position: static !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 13px 0 !important;

        background: transparent !important;
        border-bottom: 1px solid #e6eff4 !important;

        white-space: normal !important;
        box-sizing: border-box !important;
    }

    /* Última fila sin línea */
    #cuerpo_js_form_28000233_formulario .ei-form-fila:last-of-type {
        border-bottom: 0 !important;
    }

    /* Etiquetas */
    #cuerpo_js_form_28000233_formulario .ei-form-fila > label,
    #cuerpo_js_form_28000233_formulario .ei-form-etiq,
    #cuerpo_js_form_28000233_formulario .ei-form-etiqueta {
        display: block !important;
        float: none !important;

        width: auto !important;
        max-width: 120px !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #075174 !important;

        font-family: "Segoe UI", Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: left !important;

        box-sizing: border-box !important;
    }

    /* Contenedor de cada valor */
    #cuerpo_js_form_28000233_formulario div[id^="cont_ef_form_"] {
        display: block !important;
        position: static !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Valores no editables */
    #cuerpo_js_form_28000233_formulario .ef-fijo {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 7px 10px !important;

        color: #17384e !important;
        background: #f4f9fc !important;

        border: 1px solid #e0ebf1 !important;
        border-radius: 8px !important;

        font-family: "Segoe UI", Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        text-align: left !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;

        box-sizing: border-box !important;
    }

    /* Campos editables */
    #cuerpo_js_form_28000233_formulario input[type="text"],
    #cuerpo_js_form_28000233_formulario input[type="email"],
    #cuerpo_js_form_28000233_formulario input[type="tel"],
    #cuerpo_js_form_28000233_formulario input[type="number"],
    #cuerpo_js_form_28000233_formulario select,
    #cuerpo_js_form_28000233_formulario textarea {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 9px 12px !important;

        color: #17384e !important;
        background: #ffffff !important;

        border: 1px solid #b8d2df !important;
        border-radius: 9px !important;

        font-family: "Segoe UI", Arial, sans-serif !important;
        font-size: 14px !important;
        line-height: 1.2 !important;

        box-shadow:
            inset 0 1px 2px rgba(6, 75, 112, 0.03) !important;

        transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease !important;

        box-sizing: border-box !important;
    }

    /* Foco de los campos */
    #cuerpo_js_form_28000233_formulario input:focus,
    #cuerpo_js_form_28000233_formulario select:focus,
    #cuerpo_js_form_28000233_formulario textarea:focus {
        border-color: #0798c7 !important;
        outline: none !important;

        box-shadow:
            0 0 0 3px rgba(7, 152, 199, 0.14) !important;
    }

    /* Botonera */
    #cuerpo_js_form_28000233_formulario .ei-botonera {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 10px !important;

        float: none !important;
        clear: both !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 16px 0 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Botón Guardar */
    #cuerpo_js_form_28000233_formulario .ei-botonera input,
    #cuerpo_js_form_28000233_formulario .ei-botonera button,
    #cuerpo_js_form_28000233_formulario .ei-botonera .ei-boton {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 125px !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 10px 18px !important;

        color: #ffffff !important;
        background: linear-gradient(
            180deg,
            #0798c7 0%,
            #067da7 100%
        ) !important;

        border: 0 !important;
        border-radius: 9px !important;

        font-family: "Segoe UI", Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-align: center !important;

        box-shadow:
            0 5px 12px rgba(6, 125, 167, 0.24) !important;

        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    #cuerpo_js_form_28000233_formulario .ei-botonera input:hover,
    #cuerpo_js_form_28000233_formulario .ei-botonera button:hover,
    #cuerpo_js_form_28000233_formulario .ei-botonera .ei-boton:hover {
        background: #066f95 !important;
    }
}
.iusp-aviso-datos {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    width: calc(100% - 20px);
    max-width: 780px;

    margin: 10px auto 12px;
    padding: 13px 15px;

    background: #fff9e8;
    border: 1px solid #f1d87a;
    border-left: 5px solid #f4d21f;
    border-radius: 10px;

    color: #435563;
    font-family: "Segoe UI", Arial, sans-serif;

    box-shadow: 0 3px 10px rgba(6, 75, 112, 0.06);
    box-sizing: border-box;
}

.iusp-aviso-datos-icono {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 28px;
    width: 28px;
    height: 28px;

    background: #f4d21f;
    color: #064b70;

    border-radius: 50%;

    font-size: 16px;
    font-weight: 800;
}

.iusp-aviso-datos-texto {
    min-width: 0;
}

.iusp-aviso-datos-texto strong {
    display: block;
    margin-bottom: 3px;

    color: #064b70;
    font-size: 14px;
    font-weight: 700;
}

.iusp-aviso-datos-texto p {
    margin: 0;

    font-size: 13px;
    line-height: 1.45;
}

@media screen and (max-width: 768px) {

    .iusp-aviso-datos {
        width: calc(100% - 16px);
        margin: 8px;
        padding: 12px;
        gap: 10px;
    }

    .iusp-aviso-datos-texto strong {
        font-size: 14px;
    }

    .iusp-aviso-datos-texto p {
        font-size: 12px;
        line-height: 1.4;
    }
}

/* ==========================================================
   AVISO INFORMATIVO - BONOS DE SUELDO
   ========================================================== */

.iusp-aviso-bonos {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    width: calc(100% - 20px);
    max-width: 780px;

    margin: 10px auto 12px;
    padding: 13px 15px;

    background: #eef8fd;
    border: 1px solid #b9ddeb;
    border-left: 5px solid #0798c7;
    border-radius: 10px;

    color: #435563;
    font-family: "Segoe UI", Arial, sans-serif;

    box-shadow: 0 3px 10px rgba(6, 75, 112, 0.06);
    box-sizing: border-box;
}

.iusp-aviso-bonos-icono {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 28px;
    width: 28px;
    height: 28px;

    background: #0798c7;
    color: #ffffff;

    border-radius: 50%;

    font-size: 16px;
    font-weight: 800;
}

.iusp-aviso-bonos-texto {
    min-width: 0;
}

.iusp-aviso-bonos-texto strong {
    display: block;
    margin-bottom: 3px;

    color: #064b70;
    font-size: 14px;
    font-weight: 700;
}

.iusp-aviso-bonos-texto p {
    margin: 0;

    font-size: 13px;
    line-height: 1.45;
}

@media screen and (max-width: 768px) {

    .iusp-aviso-bonos {
        width: calc(100% - 16px);
        margin: 8px;
        padding: 12px;
        gap: 10px;
    }

    .iusp-aviso-bonos-texto strong {
        font-size: 14px;
    }

    .iusp-aviso-bonos-texto p {
        font-size: 12px;
        line-height: 1.4;
    }
}
@media screen and (max-width: 768px) {

    /* Filas de Usuario y Clave */
    #nodo_ef_form_28000218_datosusuario,
    #nodo_ef_form_28000218_datosclave {
        display: grid !important;
        grid-template-columns: 105px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 0 14px !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Etiquetas */
    #nodo_ef_form_28000218_datosusuario > label,
    #nodo_ef_form_28000218_datosclave > label {
        display: block !important;
        float: none !important;

        width: auto !important;
        max-width: 105px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #064b70 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    /* Contenedores de los campos */
    #cont_ef_form_28000218_datosusuario,
    #cont_ef_form_28000218_datosclave {
        display: block !important;
        position: relative !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Inputs */
    #ef_form_28000218_datosusuario,
    #ef_form_28000218_datosclave {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;

        margin: 0 !important;
        padding: 9px 11px !important;

        color: #17384e !important;
        background: #ffffff !important;

        border: 1px solid #b8d2df !important;
        border-radius: 8px !important;

        font-size: 15px !important;
        box-sizing: border-box !important;
    }

    /* Ícono rojo de obligatorio */
    #cont_ef_form_28000218_datosusuario img,
    #cont_ef_form_28000218_datosclave img {
        position: absolute !important;
        top: 50% !important;
        left: -18px !important;
        transform: translateY(-50%) !important;

        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
    }
}
@media screen and (max-width: 768px) {

    /* Contenedor del formulario de login */
    .iusp-login-formulario,
    .ci-simple-cont {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* La tabla interna del formulario */
    .iusp-login-formulario table,
    .iusp-login-formulario tbody,
    .iusp-login-formulario tr,
    .iusp-login-formulario td,
    .ei-form-base,
    .ei-form-base tbody,
    .ei-form-base tr,
    .ei-form-base td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Cada fila */
    .iusp-login-formulario .ei-form-fila,
    .ei-form-fila[id*="datosusuario"],
    .ei-form-fila[id*="datosclave"] {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto 14px auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Etiquetas */
    .iusp-login-formulario label,
    .ei-form-etiq {
        display: block !important;
        width: 100% !important;
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        text-align: left !important;
        color: #0b4f73 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        border: 0 !important;
        background: transparent !important;
    }

    /* Contenedor del input */
    .iusp-login-formulario [id^="cont_ef_"],
    .iusp-login-formulario .ef-editable,
    .ei-form-contenedor {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Inputs */
    .iusp-login-formulario input[type="text"],
    .iusp-login-formulario input[type="password"],
    input[id*="datosusuario"],
    input[id*="datosclave"] {
        display: block !important;
        width: 100% !important;
        max-width: 280px !important;
        height: 44px !important;
        margin: 0 auto !important;
        padding: 10px 12px !important;
        border: 1px solid #c7dbe6 !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        color: #17384e !important;
        font-size: 15px !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
    }

    /* Saca iconitos o marcas mal posicionadas */
    .iusp-login-formulario img[src*="error"],
    .iusp-login-formulario img[src*="warning"] {
        position: static !important;
        margin: 0 0 6px 0 !important;
        display: none !important;
    }

    /* Botonera */
    .iusp-login-formulario .ei-botonera {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 18px 0 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Botón ingresar */
    .iusp-login-formulario .ei-botonera input,
    .iusp-login-formulario .ei-botonera button,
    .iusp-login-formulario .ei-botonera a,
    .iusp-login-formulario input[type="submit"] {
        min-width: 140px !important;
        height: 42px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        border-radius: 10px !important;
    }

    /* Título interno del formulario */
    .iusp-login-formulario .ef-form-titulo,
    .iusp-login-formulario h3,
    .iusp-login-formulario legend {
        text-align: center !important;
        margin-bottom: 14px !important;
        border: 0 !important;
    }
}
@media screen and (max-width: 768px) {
    .iusp-login-formulario .ci-simple-cont,
    .iusp-login-formulario .ei-form-base {
        border-top: 0 !important;
        box-shadow: none !important;
    }
}

.iusp-login-page {
    min-height: 100vh;
    background: #ffffff;
}

.iusp-login-header {
    background: #ffffff;
    padding: 25px 20px;
}

.iusp-login-header-contenido {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.iusp-login-logo img {
    max-width: 100px;
    height: auto;
}

.iusp-login-marca {
    display: flex;
    flex-direction: column;
    color: #00547e;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.05;
}

.iusp-login-marca-superior,
.iusp-login-marca-inferior {
    display: block;
    font-size: 23px;
}

.iusp-login-principal {
    background: linear-gradient(
        135deg,
        #149fc7 0%,
        #087da2 100%
    );
    padding: 45px 20px;
}

.iusp-login-contenido {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.iusp-login-presentacion {
    color: #ffffff;
    text-align: center;
    margin-bottom: 35px;
}

.iusp-login-etiqueta {
    display: inline-block;
    padding: 9px 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.iusp-login-presentacion h1 {
    max-width: 750px;
    margin: 0 auto 15px auto;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.15;
    font-weight: 800;
}

.iusp-login-introduccion {
    max-width: 700px;
    margin: 0 auto;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.6;
}

.iusp-login-acceso {
    max-width: 560px;
    margin: 0 auto;
}

.iusp-login-acceso-encabezado {
    margin-bottom: 15px;
    color: #ffffff;
}

.iusp-login-acceso-encabezado > span {
    color: #ffd400;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.iusp-login-acceso-encabezado h2 {
    margin: 8px 0;
    color: #ffffff;
    font-size: 28px;
}

.iusp-login-acceso-encabezado p {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
}

.iusp-login-formulario {
    padding: 30px;
    background: #ffffff;
    border-top: 4px solid #ffd400;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.iusp-login-seguridad {
    margin-top: 14px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
}

.iusp-login-candado {
    margin-right: 5px;
}

.iusp-login-footer {
    padding: 16px 20px;
    background: #ffffff;
    color: #587084;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
}

.iusp-login-footer strong {
    color: #00547e;
}

.iusp-login-footer-siu {
    margin-top: 8px;
}

@media (max-width: 768px) {

    .iusp-login-header {
        padding: 18px 15px;
    }

    .iusp-login-header-contenido {
        justify-content: center;
    }

    .iusp-login-logo img {
        max-width: 75px;
    }

    .iusp-login-marca-superior,
    .iusp-login-marca-inferior {
        font-size: 16px;
    }

    .iusp-login-principal {
        padding: 30px 15px;
    }

    .iusp-login-presentacion h1 {
        font-size: 29px;
    }

    .iusp-login-introduccion {
        font-size: 16px;
    }

    .iusp-login-acceso-encabezado h2 {
        font-size: 24px;
    }

    .iusp-login-formulario {
        padding: 20px 15px;
    }
}

@media (max-width: 480px) {

    .iusp-login-header-contenido {
        gap: 10px;
    }

    .iusp-login-logo img {
        max-width: 60px;
    }

    .iusp-login-marca-superior,
    .iusp-login-marca-inferior {
        font-size: 13px;
    }

    .iusp-login-presentacion h1 {
        font-size: 25px;
    }
}
/* ==========================================================
   LOGIN TOBA IUSP - ÚNICA CONFIGURACIÓN VÁLIDA
   ========================================================== */

body:has(#login-iusp-final) {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow-x: hidden !important;
}

/* Eliminar estilos generales de tarjeta dentro del login */
body:has(#login-iusp-final) .ei-form-base,
body:has(#login-iusp-final) .ei-form-cuerpo,
body:has(#login-iusp-final) .ci-simple-cont {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
}

/* Ocultar completamente el título duplicado de Toba */
body:has(#login-iusp-final) .login-titulo {
    display: none !important;
}

/* Formulario */
#login-iusp-final .login-final-formulario {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Tabla interna */
#login-iusp-final .login-final-formulario table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

/* Filas */
#login-iusp-final .login-final-formulario tr {
    display: grid !important;
    grid-template-columns: 110px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 14px !important;

    width: 100% !important;
    margin: 0 0 14px !important;

    background: transparent !important;
}

/* Celdas */
#login-iusp-final .login-final-formulario td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
}

/* Ocultar la celda del ícono obligatorio */
#login-iusp-final .login-final-formulario td:has(img) {
    display: none !important;
}

/* Cuando hay tres celdas, el campo debe ocupar la última */
#login-iusp-final .login-final-formulario tr:has(td:nth-child(3)) {
    grid-template-columns: 110px minmax(0, 1fr) !important;
}

#login-iusp-final
.login-final-formulario
tr:has(td:nth-child(3))
td:nth-child(3) {
    grid-column: 2 !important;
}

/* Etiquetas */
#login-iusp-final .login-final-formulario label,
#login-iusp-final .login-final-formulario .ei-form-etiq,
#login-iusp-final .login-final-formulario .ei-form-etiq-oblig {
    float: none !important;

    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #17394f !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Contenedores internos de los campos */
#login-iusp-final .login-final-formulario [id^="cont_ef_"],
#login-iusp-final .login-final-formulario .ef-editable {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;
    float: none !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
}

/* Ocultar imágenes de validación mal posicionadas */
#login-iusp-final .login-final-formulario img {
    display: none !important;
}

/* Usuario y clave */
#login-iusp-final .login-final-formulario input[type="text"],
#login-iusp-final .login-final-formulario input[type="password"] {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 10px 13px !important;

    border: 1px solid #b9d2e0 !important;
    border-radius: 9px !important;

    background: #ffffff !important;
    color: #17394f !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;

    box-sizing: border-box !important;
    outline: none !important;
}

#login-iusp-final .login-final-formulario input[type="text"]:focus,
#login-iusp-final .login-final-formulario input[type="password"]:focus {
    border-color: #159fc7 !important;
    box-shadow: 0 0 0 3px rgba(21, 159, 199, 0.16) !important;
}

/* Botonera */
#login-iusp-final .login-final-formulario .ei-botonera {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 0 !important;

    margin: 6px 0 0 !important;
    padding: 0 !important;

    clear: both !important;
    background: transparent !important;
}

/* Botón */
#login-iusp-final .login-final-formulario button,
#login-iusp-final .login-final-formulario input[type="button"],
#login-iusp-final .login-final-formulario input[type="submit"] {
    width: 160px !important;
    min-width: 160px !important;
    height: 44px !important;

    margin: 0 auto !important;
    padding: 9px 20px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: #159fc7 !important;
    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    box-shadow: 0 8px 18px rgba(0, 85, 125, 0.18) !important;
}

/* Celular */
@media screen and (max-width: 600px) {

    #login-iusp-final .login-final-formulario tr {
        display: block !important;
        margin-bottom: 14px !important;
    }

    #login-iusp-final .login-final-formulario td {
        display: block !important;
        width: 100% !important;
    }

    #login-iusp-final
    .login-final-formulario
    td:first-child {
        margin-bottom: 6px !important;
    }

    #login-iusp-final .login-final-formulario button,
    #login-iusp-final .login-final-formulario input[type="button"],
    #login-iusp-final .login-final-formulario input[type="submit"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}/* ==========================================================
   AJUSTE PARA QUE SE VEA COMPLETO AL 100% EN COMPUTADORA
   ========================================================== */

@media screen and (min-width: 901px) {

    html,
    body {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #login-iusp-final {
        width: 100% !important;
        height: 100vh !important;
        min-height: 0 !important;

        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }

    /* Encabezado más compacto */
    #login-iusp-final .login-final-header {
        padding: 9px 20px !important;
    }

    #login-iusp-final .login-final-header-contenido {
        max-width: 1080px !important;
        gap: 13px !important;
    }

    #login-iusp-final .login-final-logo img {
        max-width: 62px !important;
    }

    #login-iusp-final .login-final-marca span {
        font-size: 15px !important;
        line-height: 1.02 !important;
    }

    /* Zona azul ocupando el espacio disponible */
    #login-iusp-final .login-final-principal {
        min-height: 0 !important;
        height: auto !important;

        padding: 15px 20px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
    }

    #login-iusp-final .login-final-contenido {
        width: 100% !important;
        max-width: 680px !important;
        margin: 0 auto !important;
    }

    /* Presentación */
    #login-iusp-final .login-final-presentacion {
        margin: 0 auto 13px !important;
    }

    #login-iusp-final .login-final-etiqueta {
        margin-bottom: 8px !important;
        padding: 5px 13px !important;
        font-size: 10px !important;
    }

    #login-iusp-final .login-final-presentacion h1 {
        margin: 0 0 6px !important;
        font-size: 28px !important;
        line-height: 1.08 !important;
    }

    #login-iusp-final .login-final-presentacion p {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    /* Tarjeta */
    #login-iusp-final .login-final-tarjeta {
        width: 100% !important;
        max-width: 450px !important;

        margin: 0 auto !important;
        padding: 16px 22px 17px !important;

        border-top-width: 4px !important;
        border-radius: 13px !important;
    }

    /* Encabezado de la tarjeta */
    #login-iusp-final .login-final-encabezado {
        margin-bottom: 12px !important;
    }

    #login-iusp-final .login-final-encabezado span {
        margin-bottom: 3px !important;
        font-size: 10px !important;
    }

    #login-iusp-final .login-final-encabezado h2 {
        margin: 0 0 3px !important;
        font-size: 22px !important;
    }

    #login-iusp-final .login-final-encabezado p {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    /* Ocultar definitivamente el título duplicado de Toba */
    #login-iusp-final .login-final-formulario .login-titulo,
    #login-iusp-final .login-final-formulario > .login-titulo,
    #login-iusp-final .login-final-formulario h1.login-titulo,
    #login-iusp-final .login-final-formulario h2.login-titulo,
    #login-iusp-final .login-final-formulario div.login-titulo {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Filas más compactas */
    #login-iusp-final .login-final-formulario tr,
    #login-iusp-final .login-final-formulario .ei-form-fila {
        margin-bottom: 9px !important;
        gap: 4px !important;
    }

    /* Etiquetas */
    #login-iusp-final .login-final-formulario label,
    #login-iusp-final .login-final-formulario .ei-form-etiq,
    #login-iusp-final .login-final-formulario .ei-form-etiq-oblig {
        margin-bottom: 4px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    /* Usuario y clave */
    #login-iusp-final .login-final-formulario input[type="text"],
    #login-iusp-final .login-final-formulario input[type="password"],
    #login-iusp-final .login-final-formulario input[id*="datosusuario"],
    #login-iusp-final .login-final-formulario input[id*="datosclave"] {
        height: 38px !important;
        min-height: 38px !important;
        padding: 7px 10px !important;
        font-size: 14px !important;
    }

    /* Botonera */
    #login-iusp-final .login-final-formulario .ei-botonera {
        margin-top: 2px !important;
    }

    #login-iusp-final .login-final-formulario button,
    #login-iusp-final .login-final-formulario input[type="button"],
    #login-iusp-final .login-final-formulario input[type="submit"] {
        width: 140px !important;
        min-width: 140px !important;
        height: 37px !important;
        min-height: 37px !important; 

        padding: 6px 16px !important;
        font-size: 13px !important;
    }

    /* Seguridad */
    #login-iusp-final .login-final-seguridad {
        margin-top: 8px !important;
        font-size: 10px !important;
    }

    /* Pie compacto */
    #login-iusp-final .login-final-footer {
        padding: 5px 14px !important;
        font-size: 9px !important;
        line-height: 1.25 !important;
    }

    #login-iusp-final .login-final-footer-siu {
        margin-top: 2px !important;
    }
}
/* ==========================================================
   AVISO BONOS DE SUELDO
   ========================================================== */

#iusp-aviso-bonos {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;

    width: calc(100% - 32px) !important;
    max-width: 650px !important;

    margin: 14px auto 18px !important;
    padding: 15px 18px !important;

    background: #f1f9fc !important;

    border: 1px solid #b9dce9 !important;
    border-left: 5px solid #0798c7 !important;
    border-radius: 12px !important;

    box-shadow: 0 4px 14px rgba(6, 75, 112, 0.10) !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    box-sizing: border-box !important;
}

/* Ícono */
#iusp-aviso-bonos .iusp-aviso-bonos-icono {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;

    margin: 0 !important;

    color: #ffffff !important;
    background: #0798c7 !important;

    border-radius: 50% !important;

    font-size: 18px !important;
    font-weight: 800 !important;
    font-family: Arial, sans-serif !important;
    line-height: 1 !important;
}

/* Texto */
#iusp-aviso-bonos .iusp-aviso-bonos-texto {
    flex: 1 1 auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Título */
#iusp-aviso-bonos .iusp-aviso-bonos-texto strong {
    display: block !important;

    margin: 0 0 5px !important;

    color: #064b70 !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

/* Descripción */
#iusp-aviso-bonos .iusp-aviso-bonos-texto p {
    margin: 0 !important;

    color: #456374 !important;

    font-size: 13px !important;
    line-height: 1.45 !important;
}

/* Destacar mes y año */
#iusp-aviso-bonos .iusp-aviso-bonos-texto b {
    color: #064b70 !important;
    font-weight: 700 !important;
}

/* ==========================================================
   CELULAR
   ========================================================== */

@media screen and (max-width: 768px) {

    #iusp-aviso-bonos {
        align-items: flex-start !important;

        width: calc(100% - 16px) !important;
        max-width: none !important;

        margin: 8px !important;
        padding: 12px !important;
        gap: 10px !important;

        border-left-width: 4px !important;
        border-radius: 10px !important;
    }

    #iusp-aviso-bonos .iusp-aviso-bonos-icono {
        flex-basis: 28px !important;

        width: 28px !important;
        height: 28px !important;

        font-size: 15px !important;
    }

    #iusp-aviso-bonos .iusp-aviso-bonos-texto strong {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    #iusp-aviso-bonos .iusp-aviso-bonos-texto p {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
}
/* ==========================================================
   LOGIN RESPONSIVE PARA CUALQUIER CELULAR
   Colocar al FINAL de toba.css
   ========================================================== */

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    * {
        box-sizing: border-box !important;
    }

    .iusp-login-page {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    /* ======================================================
       CABECERA Y LOGO
       ====================================================== */

    .iusp-login-header {
        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
    }

    .iusp-login-header-contenido {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 18px 16px !important;

        gap: 10px !important;
    }

    .iusp-login-logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 330px !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    .iusp-login-logo img {
        display: block !important;

        width: 100% !important;
        max-width: 330px !important;
        height: auto !important;
        max-height: 85px !important;

        margin: 0 auto !important;

        object-fit: contain !important;
    }

    /*
     * Se oculta la marca escrita cuando el archivo del logo
     * ya contiene el nombre completo de la institución.
     */
    .iusp-login-marca {
        display: none !important;
    }

    /* ======================================================
       CONTENIDO PRINCIPAL
       ====================================================== */

    .iusp-login-principal {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    .iusp-login-bienvenida,
    .iusp-login-acceso {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    /* ======================================================
       SECCIÓN DE BIENVENIDA
       ====================================================== */

    .iusp-login-bienvenida {
        padding: 28px 18px 24px !important;
    }

    .iusp-login-bienvenida-contenido {
        width: 100% !important;
        max-width: 520px !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    .iusp-login-etiqueta {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        max-width: 100% !important;

        margin: 0 0 20px !important;
        padding: 8px 18px !important;

        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .iusp-login-bienvenida h1 {
        width: 100% !important;

        margin: 0 0 14px !important;
        padding: 0 !important;

        font-size: clamp(29px, 8vw, 40px) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.5px !important;

        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    .iusp-login-introduccion {
        width: 100% !important;

        margin: 0 0 18px !important;
        padding: 0 !important;

        font-size: 15px !important;
        line-height: 1.5 !important;

        text-align: left !important;
    }

    /* ======================================================
       TARJETAS DE INFORMACIÓN
       ====================================================== */

    .iusp-login-informacion {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;

        width: 100% !important;

        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    .iusp-login-informacion-item {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 14px !important;

        border-radius: 11px !important;
    }

    .iusp-login-icono {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;

        margin: 0 !important;

        font-size: 11px !important;
        line-height: 1 !important;
    }

    .iusp-login-informacion-item > div {
        min-width: 0 !important;
    }

    .iusp-login-informacion-item strong {
        display: block !important;

        margin: 0 0 4px !important;

        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    .iusp-login-informacion-item p {
        margin: 0 !important;

        font-size: 12px !important;
        line-height: 1.45 !important;

        overflow-wrap: anywhere !important;
    }

    .iusp-login-aviso {
        width: 100% !important;

        margin: 0 !important;
        padding: 14px 14px 14px 16px !important;

        font-size: 12px !important;
        line-height: 1.5 !important;

        border-left-width: 4px !important;
        overflow-wrap: anywhere !important;
    }

    /* ======================================================
       SECCIÓN DE ACCESO
       ====================================================== */

    .iusp-login-acceso {
        padding: 26px 16px 28px !important;
    }

    .iusp-login-acceso-contenido {
        width: 100% !important;
        max-width: 520px !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    .iusp-login-acceso-encabezado {
        width: 100% !important;

        margin: 0 0 16px !important;
        padding: 0 !important;
    }

    .iusp-login-acceso-encabezado > span {
        display: block !important;

        margin: 0 0 6px !important;

        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .iusp-login-acceso-encabezado h2 {
        margin: 0 0 6px !important;
        padding: 0 !important;

        font-size: clamp(24px, 6.5vw, 31px) !important;
        line-height: 1.15 !important;

        overflow-wrap: anywhere !important;
    }

    .iusp-login-acceso-encabezado p {
        margin: 0 !important;

        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    /* ======================================================
       TARJETA DEL FORMULARIO
       ====================================================== */

    .iusp-login-formulario {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 auto !important;
        padding: 0 !important;

        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .iusp-login-formulario table,
    .iusp-login-formulario tbody,
    .iusp-login-formulario tr,
    .iusp-login-formulario td,
    .iusp-login-formulario .ci-cuerpo,
    .iusp-login-formulario .ci-simple-cont,
    .iusp-login-formulario .ei-form-cuerpo {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        box-sizing: border-box !important;
    }

    .iusp-login-formulario .ci-simple-cont {
        padding: 18px !important;
    }

    /* Título interior de la tarjeta */

    .iusp-login-formulario .ei-barra-sup,
    .iusp-login-formulario .ei-barra-sup-tit,
    .iusp-login-formulario h3 {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 0 18px !important;
        padding: 0 0 14px !important;

        text-align: center !important;
        font-size: 15px !important;
        line-height: 1.3 !important;

        border-bottom: 1px solid #e2edf2 !important;
    }

    /* ======================================================
       USUARIO Y CLAVE EN LA MISMA FILA
       ====================================================== */

    .iusp-login-formulario .ei-form-fila {
        display: grid !important;
        grid-template-columns: 92px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;

        width: 100% !important;
        max-width: 360px !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 auto 14px !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
    }

    .iusp-login-formulario .ei-form-fila > label,
    .iusp-login-formulario .ei-form-etiq {
        display: block !important;
        float: none !important;

        width: auto !important;
        max-width: 92px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #064b70 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: right !important;
    }

    .iusp-login-formulario div[id^="cont_ef_"] {
        display: block !important;
        position: relative !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    .iusp-login-formulario input[type="text"],
    .iusp-login-formulario input[type="password"] {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;

        margin: 0 !important;
        padding: 9px 11px !important;

        border: 1px solid #bfd5e0 !important;
        border-radius: 9px !important;

        font-size: 16px !important;
        line-height: 1.2 !important;

        box-shadow: none !important;
    }

    .iusp-login-formulario input[type="text"]:focus,
    .iusp-login-formulario input[type="password"]:focus {
        border-color: #0798c7 !important;
        box-shadow: 0 0 0 3px rgba(7, 152, 199, 0.15) !important;
        outline: none !important;
    }

    /* Ocultar la cruz roja de validación si aparece desalineada */

    .iusp-login-formulario img[src*="error"],
    .iusp-login-formulario img[src*="warning"] {
        display: none !important;
    }

    /* ======================================================
       BOTÓN INGRESAR
       ====================================================== */

    .iusp-login-formulario .ei-botonera {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 18px 0 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
    }

    .iusp-login-formulario .ei-botonera input,
    .iusp-login-formulario .ei-botonera button,
    .iusp-login-formulario input[type="submit"] {
        display: block !important;

        width: min(100%, 280px) !important;
        max-width: 280px !important;
        min-height: 46px !important;

        margin: 0 auto !important;
        padding: 10px 20px !important;

        border-radius: 10px !important;
    }

    .iusp-login-seguridad {
        width: 100% !important;

        margin: 16px auto 0 !important;
        padding: 0 8px !important;

        font-size: 12px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    /* ======================================================
       PIE DE PÁGINA
       ====================================================== */

    .iusp-login-footer {
        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 18px 14px calc(18px + env(safe-area-inset-bottom)) !important;

        font-size: 11px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    .iusp-login-footer > div {
        margin: 0 0 3px !important;
    }
}

/* ==========================================================
   CELULARES MUY ANGOSTOS
   ========================================================== */

@media screen and (max-width: 380px) {

    .iusp-login-header-contenido {
        padding: 15px 12px !important;
    }

    .iusp-login-logo,
    .iusp-login-logo img {
        max-width: 290px !important;
    }

    .iusp-login-bienvenida {
        padding: 24px 14px 22px !important;
    }

    .iusp-login-acceso {
        padding: 24px 12px 26px !important;
    }

    .iusp-login-bienvenida h1 {
        font-size: 28px !important;
    }

    .iusp-login-formulario .ci-simple-cont {
        padding: 16px 12px !important;
    }

    .iusp-login-formulario .ei-form-fila {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .iusp-login-formulario .ei-form-fila > label,
    .iusp-login-formulario .ei-form-etiq {
        max-width: 82px !important;
        font-size: 12px !important;
    }
}