body{
	margin: 0px;
	margin-top: 72px;
	padding: 0px;
	--fondo_web: #fff;
	--texto_web: #000;
	--texto_nth: #000000;
	background-color: var(--fondo_web) !important;
	color: var(--texto_web) !important;
	font: 1em Monserrat-bold;
	overflow: hidden;
}

input:focus{
	outline:none !important;
	outline-width: 0 !important;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

input{
	outline:none !important;
	outline-width: 0 !important;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

div:focus{
	outline:none !important;
	outline-width: 0 !important;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

textarea:focus{
	outline:none !important;
	outline-width: 0 !important;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

h1{
	font: 1.3em Monserrat-Bold;
	color: #1256CC;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
}

h2{
	font: 1.2em Monserrat-Bold;
	color: #1256CC;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
}

h3{
	font: 1.1em Monserrat-Bold;
	color: #1256CC;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
}

h4{
	font: 1.05em Monserrat-Bold;
	color: #1256CC;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
}

h5{
	font: 0.95em Monserrat-Bold;
	color: #000;
	font-weight: bold;
	padding: 0px;
	margin: 3px;
}

h1>span{
	color: #1256CC;
	font: 0.6em Monserrat-Bold;
}

h2>span{
	color: #1256CC;
	font: 0.6em Monserrat-Bold;
}

h3>span{
	color: #1256CC;
	font: 0.6em Monserrat-Bold;
}

a{
	text-decoration: none;
}

.capa_top{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 70px;
	background-color: #fff;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
	z-index: 3;
}

.div0{
	vertical-align: top;
	display: inline-block;
}

.div00{
	vertical-align: top;
	display: inline-block;
}

.div4{
	vertical-align: top;
	display: inline-block;
	width: 4%;
}

.div14{
	vertical-align: top;
	display: inline-block;
	width: 14%;
}

.div15{
	vertical-align: top;
	display: inline-block;
	width: 15%;
}

.div18{
	vertical-align: top;
	display: inline-block;
	width: 18%;
}

.div24{
	vertical-align: top;
	display: inline-block;
	width: 24%;
}

.div30{
	vertical-align: top;
	display: inline-block;
	width: 30%;
}

.div32{
	vertical-align: top;
	display: inline-block;
	width: 32%;
}

.div33{
	vertical-align: top;
	display: inline-block;
	width: 33%;
}

.div39{
	vertical-align: top;
	display: inline-block;
	width: 39%;
}

.div42{
	vertical-align: top;
	display: inline-block;
	width: 42%;
}

.div43{
	vertical-align: top;
	display: inline-block;
	width: 43%;
}

.div46{
	vertical-align: top;
	display: inline-block;
	width: 46%;
}

.div49{
	vertical-align: top;
	display: inline-block;
	width: 49%;
}

.div55{
	vertical-align: top;
	display: inline-block;
	width: 55%;
}

.div56{
	vertical-align: top;
	display: inline-block;
	width: 55%;
}

.div60{
	vertical-align: top;
	display: inline-block;
	width: 60%;
}

.div61{
	vertical-align: top;
	display: inline-block;
	width: 61%;
}

.div59{
	vertical-align: top;
	display: inline-block;
	width: 59%;
}

.div66{
	vertical-align: top;
	display: inline-block;
	width: 66%;
}

.div68{
	vertical-align: top;
	display: inline-block;
	width: 68%;
}

.div70{
	vertical-align: top;
	display: inline-block;
	width: 70%;
}

.div73{
	vertical-align: top;
	display: inline-block;
	width: 73%;
}

.div74{
	vertical-align: top;
	display: inline-block;
	width: 74%;
}

.div80{
	vertical-align: top;
	display: inline-block;
	width: 80%;
}

.div83{
	vertical-align: top;
	display: inline-block;
	width: 83%;
}

.div84{
	vertical-align: top;
	display: inline-block;
	width: 84%;
}

.div90{
	vertical-align: top;
	display: inline-block;
	width: 90%;
}

.div95{
	vertical-align: top;
	display: inline-block;
	width: 95%;
}

.div98{
	vertical-align: top;
	display: inline-block;
	width: 98%;
}

.div100{
	vertical-align: top;
	display: inline-block;
	width: 100%;
}

.divleft{
	text-align: left !important;
}

.divright{
	text-align: right !important;
}

.divcenter{
	text-align: center !important;
}

.item_top{
	background-color: #fff;
	display: inline-block;
	color: #1256CC;
	padding: 4px;
	margin: 1px;
	margin-top: 16px;
	font: 1.1em Monserrat-Bold;
	cursor: pointer;
	border: 1px dotted #fff;
	border-radius: 7px;
}

.item_top_active{
	border: 1px solid #1256CC;
}

.item_top_contact{
	color: #fff;
	background-color: #1256CC;
}

.item_top:hover{
	background-color: #fff;
	border: 1px solid #1256CC;
}

.item_top_contact:hover{
	background-color: #fff;
	color: #1256CC;
}

.area_banner{
	width: 100%;
	padding-bottom: 40px;
}

.texto_banner{
	position: absolute;
	z-index: 2;
	width: 30%;
	margin: 25px;
	padding: 25px;
	background-color: #1256ccc5;
	height: 35%;
}

.texto_banner h1{
	color: #fff;
	font: 2em Montserrat-Bold;
}

.texto_banner span{
	font: 1em Montserrat-Bold;
	color: #fff;
}

.img_banner{
	position: relative;
	width: 100%;
	background-color: #1256CC;
}

.img_banner img{
	height: 100%;
	width: 100%;
}

.bottom{
	width: 96%;
	margin: 0px;
	padding: 2%;
	color: #fff;
	background: url('../images/fondo_bottom.png');
	background-size: 100% 100%;
}

.item_bottom{
	display: inline-block;
	color: #fff;
	padding: 9px;
	margin: 1px;
	margin-top: 5px;
	font: 1.3em Monserrat;
	cursor: pointer;
}

.info_index{
	width: 100%;
	clear: both;
}

.info_index > .img_info{
	width: 49%;
	display: inline-block;
	vertical-align: top;
	text-align: center;
}

.info_index > .img_info img{
	width: 70%;
	border-radius: 10px;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
}

.info_index > .texto_info{
	padding-top: 40px;
	width: 49%;
	display: inline-block;
	vertical-align: top;
}

.subtexto{
	color: #888;
	font: 1.2em Montserrat-Bold;
}

.info_index > .texto_info > .subtexto{
	color: #888;
	font: 1.4em Montserrat-Bold;
}

.area_ul{
	width: 100%;
	clear: both;
	padding-bottom: 9px;
}

.area_ul > .vineta{
	padding-top: 0.5%;
	width: 2%;
	display: inline-block;
	vertical-align: top;
}

.area_ul > .vineta img{
	width: 100%;
}

.texto{
	display: inline-block;
	margin-left: 1%;
	width: 96%;
	vertical-align: top;
	font: 1.2em Montserrat-Bold;
	color: #000;
}

.area_caracteristicas_index{
	padding-top: 35px;
	width: 100%;
	clear: both;
	background-color: #E1EFFF;
	font: 1em Montserrat-SemiBold;
}

.area_caracteristicas_index .item{
	width: 26%;
	margin: 1%;
	padding: 1%;
	border-radius: 7px;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
}

.area_caracteristicas_index .item img{
	width: 19%;
}

.item_text{
    display: inline-block;
    padding: 1%;
    margin: 1%;
    background-color: #fff;
    border-radius: 7px;
    box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
	vertical-align: text-top !important;
}

.boton_correo{
	font: 1.2em verdana;
	padding: 10px;
	margin-top: 15px;
	border-radius: 10px;
	color: #0757A5;
	border: 1px solid #0757A5;
}

.div_noticia_mini img{
	width: 100%;
}

.super_big{
	font: 3.5em verdana;
	color: #00499C;
	text-align: center;
	width: 80%;
}

.campo_correo{
	width: 95%;
	padding: 2%;
	margin: 2%;
	border-radius: 10px;
}

.bottom a{
	color: #fff;
}

.bottom a:hover{
	text-decoration: underline;
}

.div_blue{
	background-color: #1256CC;
	color: #fff;
	width: 93%;
	padding: 3.5%;
}

.div_blue h2{
	color: #fff;
}

.div_blue a{
	color: #fff;
}

.div_blue a:hover{
	text-decoration: underline;
}

.texto_margen{
	width: 70%;
	margin: 15%;
}

.select_grande{
	width: 95%;
	padding: 0.5%;
	font: 2em times new roman;
	color: #00499C;
	border: 1px solid #ccc;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
}

.texto_grande{
	font: 2em times new roman;
}

.text_gray{
	color: #aaa;
}

.capa_landing{
	width: 92%;
	padding: 1.5%;
	margin: 2.5%;
	background-color: #ffffff4e;
	text-align: center;
	border-radius: 30px;
}

.capa_landing h2{
	color: #fff;
	padding-bottom: 15px;
}

.form_landing{
	width: 90%;
	margin: 10px;
	padding: 15px;
	border-radius: 20px;
	font: 1.5em times new roman;
}

.text_blue_t{
	color: #00c3ff;
	cursor: pointer;
}

.text_blue_t:hover{
	text-decoration: underline;
}

.font_medium{
	font: 1.3em times new roman;
}

.franja_azul_claro{
	background-color: #E1EFFF;
	width: 100%;
	padding: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 0px;
	text-align: center;
}

.supertext{
	font: 1.8em georgia;
}

.wh{
	color: #fff !important;
}

.capa_acciones {
	z-index: 100 !important;

}

#mensaje{
	z-index: 131 !important;
} 

.capa_acciones{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: #c6cad3b0;
	text-align: center;
	display: none;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 95 !important;
}

.cuadro_mensaje_mini{
	margin-left: 32%;
	margin-right: 32%;
	margin-top: 5%;
	width: 36%;
}

.titulo_v{
	width: 85%;
	background-color: #0857A4;
	color: #fff;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	border-radius: 15px 15px 0px 0px;
}

.titulo_c{
	width: 97%;
	background-color: #0857A4;
	color: #fff;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	border-radius: 15px 15px 0px 0px;
	margin: 0px;
}

.cuerpo_v{
	width: 83%;
	padding: 1%;
	background-color: var(--fondo_web);
	border-radius: 0px 0px 15px 15px;
}

#capa_menus{
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: 250px;
	background: -webkit-linear-gradient(left, #2362c1, #358e94);
	vertical-align: top;
}

#capa_menus_web{
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: 290px;
	/*background-color: #ffffffb8;*/
	vertical-align: top;
	z-index: 0;
	overflow: auto;
	overflow-y: hidden;
}

#capa_top_web{
	position: fixed;
	top: 0px;
	left: 290px;
	right: 0px;
	height: 60px;
	background: -webkit-linear-gradient(left, #2362c1, #358e94);
	vertical-align: top;
	z-index: 20;
}

#capa_contenido{
	position: fixed;
	top: 0px;
	left: 251px;
	bottom: 0px;
	right: 0px;
	background-color: #fff;
	overflow-y: auto;
}

#capa_contenido_web{
	position: fixed;
	top: 61px;
	left: 291px;
	bottom: 0px;
	right: 0px;
	/*background-color: #ffffffb8;*/
	overflow-y: auto;
	overflow-x: hidden;
}

.tabla{
	margin: 0px;
	padding: 0px;
	width: 100%;
	border-spacing: 0px;
    border-collapse: separate;
    border-collapse: collapse;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    background-color: white;
}

.tabla th,
.tabla td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e1e5e9;
}

.tabla th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
}

.tabla tr:hover {
    background-color: #f8f9fa;
    transition: background-color 0.2s ease;
}

.tabla tr:last-child td {
    border-bottom: none;
}

.tr_head{
	background-color: #00499C;
	color: #fff;
}

.tr_head td, .tr_content td{
	padding: 5px;
	text-align: center;
	color: var(--texto_web);
}

.tr_content:nth-child(even) td{
	color: var(--texto_nth);
}

.tr_content{
	cursor: pointer;
	min-height: 35px;
}

.tr_content:hover{
	background-color: #0075fc;
	color: #000 !important;
}

.tr_content:active{
	background-color: #82BEFB;
}

.tr_content:nth-child(even){
	background-color: #E1EFFF;
	color: #000;
}

.tr_content:nth-child(even):hover {
	background-color: #CCE4FF;
}

.tr_content:nth-child(even):active {
	background-color: #82BEFB;
	color: var(--texto_nth);
}

.layer_adjunto{
	display: inline-block;
}
/*
.layer_adjunto{
	width: 64px;
	height: 52px;
	border: 1px dotted #102E02;
	background-color: #BBE9FF;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	vertical-align: top;
}

.layer_adjunto:hover{
	background-color: #75D2FF;
}

.layer_adjunto img{
	max-width: 100%;
}
*/

.div_ovalo{
	margin: 3px;
	padding: 5px;
	border-radius: 10px;
	display: inline-block;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
}
.borde_celda{
	vertical-align: top;
	border-top: 1px solid #cccccc;
	min-height: 23px;
}

.boton_cerrar, .boton_mini_c{
	padding: 8px;
	color: #fff;
	background-color: rgb(233, 13, 13);
	border: 1px solid #f00;
	font: 1.2em verdana;
	border-radius: 8px;
}

.boton_mini_c{
	padding: 6px;
	margin: 6px;
	font: 0.8em verdana;
	cursor: pointer;
}

.boton_ok, .boton_mini_o{
	padding: 8px;
	color: #fff;
	background-color: rgb(13, 101, 233);
	border: 1px solid rgb(41, 106, 211);
	font: 1.2em verdana;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
}

.boton_mini_o{
	padding: 6px;
	margin: 6px;
	font: 0.8em verdana;
}

.boton_cerrar:hover, .boton_mini_c:hover{
	background-color: rgb(55, 15, 15);
}

.boton_ok:hover, .boton_mini_o:hover{
	background-color: rgb(45, 45, 96);
	color: #fff;
}

.item_menu_web{
	width: 91.2%;
	padding: 4%;
	vertical-align: middle;
	clear: both;
	cursor: default;
	color: #000;
	position: relative;
	background-color: #ffffff56;
}

.item_menu_web::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 20px;
	border-bottom: 1px solid #1c329f;
}

.item_menu_web .icon_item{
	height: 34px;
	display: inline-block;
	width: 34px;
}

.item_menu_web .icon_item > img{
	height: 25px;
	background-color: #fff;
	border-radius: 20px;
	padding: 2px;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
	border: 1px solid #9085AC;
	margin-right: 2px !important;
}

.item_menu_web:first-child{
	border-radius: 15px 15px 0 0 !important;
}



.img_icon_item{
	height: 25px;
	background-color: #fff;
	border-radius: 20px;
	padding: 2px;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
	border: 1px solid #9085AC;
	margin-right: 2px !important;
}

.item_menu_web .text_item{
	display: inline-block;
	vertical-align: top;
	padding-top: 5px;
	font: 1.2em verdana;
}

.item_menu_web:hover{
	background-color: #8ecfe1;
}

.item_menu_web:active{
	background-color: #999d99;
}

.item_menu{
	width: 91.2%;
	padding: 4%;
	vertical-align: middle;
	clear: both;
	border: 1px solid #aaa;
	cursor: default;
	color: #fff;
}

.item_menu .icon_item{
	height: 25px;
	display: inline-block;
	width: 25px;
}

.item_menu .icon_item > img{
	height: 25px;
}

.item_menu .text_item{
	display: inline-block;
	vertical-align: top;
	padding-top: 5px;
}

.item_menu:hover{
	background-color: #8ecfe1;
}

.item_menu:active{
	background-color: #999d99;
}

.top_0{
	margin-top: 0px !important;
}

.boton, .boton_mini{
	padding: 0.5px;
	display: inline-block;
	margin: 0.5px;
	background-color: #fff;
	border-radius: 20px;
	color: #000000;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
	height: 22px;
}

.boton_mini{
	height: 10px;
	float: right !important;
}

.boton:active{
	border: 1px solid #1E3356;
	background-color: #cccccc;
	color: #1E3356;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
}

.boton:focus{
	border-bottom: 1px solid #FF8000;
}

.boton:hover{
	border-bottom: 1px solid #FF8000;
}

.boton_h{
	padding: 3px;
	display: inline-block;
	margin: 3px;
	background-color: #fff;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-radius: 20px;
	color: #000000;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
	height: 25px;
}

.boton_h:active{
	border: 1px solid #1E3356;
	background-color: #cccccc;
	color: #1E3356;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
}

.boton_h:focus{
	border-bottom: 1px solid #FF8000;
}

.boton_h:hover{
	border-bottom: 1px solid #FF8000;
}

.big{
	width: 80px;
	height: 80px;
	border-radius: 2px !important;
	object-fit: cover; /* Mantiene la proporción y recorta el exceso */
	object-position: center; /* Centra la imagen */
	background-color: #ffffff00;
	box-shadow: none !important;
}

.capa_archivo{
	position: relative;
	display: inline-block;
	width: 13%;
	vertical-align: top;
	cursor: pointer;
	text-align: center;
	padding: 2%;
	margin: 1%;
	font: 0.7em times new roman;
}

.capa_archivo_mini{
	position: relative;
	display: inline-block;
	width: 80px;
	vertical-align: top;
	cursor: pointer;
	text-align: center;
	padding: 20px;
	margin: 10px;
}

.miniatura_icon{
	width: 28px;
	height: 28px;
	vertical-align: top;
}

.ventana_mini{
	width: 30%;
	margin-left: 36%;
	margin-right: 20%;
	margin-top: 3%;
}

.ventana{
	width: 60%;
	margin-left: 22%;
	margin-right: 20%;
	margin-top: 3%;
}

.ventana_full{
	width: 113%;
	margin-left: 2%;
	margin-right: 20%;
	margin-top: 3%;
}

.ventana_galeria{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	overflow: hidden;
}

.ventana_galeria .titulo_v{
	width: 100% !important;
}

.ventana_galeria .cuerpo_v{
	width: 99% !important;
	height: 99vh;
}

.ventana_galeria .img_galeria{
    max-height: 100% !important;
    max-width: 110% !important;
}

.ventana_extendida{
	width: 90%;
	margin-left: 12%;
	margin-right: 5%;
	margin-top: 2%;
}

.context-menu {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	border: 1px solid #ccc;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	z-index: 1000;
}

.context-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.context-menu ul li {
	padding: 8px 12px;
	cursor: pointer;
}

.context-menu ul li:hover {
	background-color: #ddd;
}

.divpadre{
	position: relative;
	z-Index: 5;
	cursor: pointer;
}

.divhijo{
	position: absolute;
	z-Index: 15;
	transform: translate(-152px, 32px);
	border: 1px solid #cccccc;
	width: 150px;
	display: none;
	box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25);
}

.divpadre:hover > .divhijo{
	display: inline;
	z-Index: 15;
}

.check_grande{
	transform: scale(1.5);
}

.img_100{
	max-width: 100%;
	max-height: 100%;
}

.area_Archivo{
	height: 70%;
	width: 100%;
	text-align: center;
}

.formulario{
	padding: 10px;
	width: 80%;
	border: 1px solid #999;
	border-radius: 15px;
}

.vinculo{
	color: #0000ff;
	cursor: pointer;
}

.vinculo:hover{
	text-decoration: underline;
}

.text_mini{
	font: 0.7em times new roman;
	color: #ff0000;
}

.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 2px solid #ddd;
    border-radius: 10px;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
}

.slide img {
    width: 100%;
    display: block;
    border-radius: 10px;
}

.slider button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    user-select: none;
}

.slider button.prev {
    left: 10px;
}

.slider button.next {
    right: 10px;
}

.slider button:hover {
    background-color: rgba(0,0,0,0.8);
}

.icon_bottom{
	width: 18%;
	padding: 1%;
	display: inline-block;
	cursor: pointer;
}

.capa_inicio_nube{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background: 
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('../images/fondo_main.jpg');
    background-size: cover;
    background-position: center;
	background-color: #c4c4c4;
	background-size: cover;
	padding-left: 2%;
	overflow: auto;
	z-index: 21;
}

.capa_resumen_nas{
	width: 78%;
	padding: 1%;
	margin: 5%;
	background-color: #ffffffa3;
	border-radius: 20px;
	cursor: pointer;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
}

.capa_resumen_nas:hover{
	background-color: #fff !important;
}

.text_card{
	font: 1.9em times new roman;
	color: #1256CC;
}

.layer_morado{
	width: 88.5%;
	padding: 1%;
	margin: 2.5%;
	background-color: #6860ffaa;
	border-radius: 20px;
	font: 1.9em times new roman;
	color: #FFFFFF;
	text-align: center;
}

.layer_morado:hover{
	background-color: #6960FF;
}

.capa_item_archivo{
	width: 96%;
	padding: 2%;
	border-bottom: 2px solid #0000ff;
}

.capa_item_archivo .text_item{
	font: 1.1em times new roman;
	color: #00499C;
}

.barra_color_total {
	position: relative;
	width: 100%;
	height: 5px;
	/*background: -webkit-linear-gradient(right, #00D28B, #24A178, #497163, #497163, #6D404E, #871639);*/
	background: -webkit-linear-gradient(
		right,
		#871639,
		#6D404E,
		#497163,
		#497163,
		#24A178,
		#00D28B
	);
	border: 1px solid #cccccc;
}

.superpuesto_color {
	position: absolute;
	right: 0px;
	height: 5px;
	background-color: #ffffff;
}

.capa_vinculo{
	display: inline-block;
	cursor: pointer;
	color: #0000ff;
	border: 1px solid #ffffff;
}

.capa_vinculo .div00 img{
	width: 20px;
}

.capa_vinculo .div00:hover{
	text-decoration: underline;
}

.capa_opciones_archivo{
	position: fixed;
	width: 200px;
	display: none;
	box-shadow: 10px 10px 10px 5px rgba(
		150,
		148,
		148,
		0.36
	);
	background-color: #fff;
}

.capa_login_new{
	border-radius: 15px;
	top: 240px;
	right: 40px;
	position: fixed;
	width: 28%;
	z-index: 150;
	background-color: #ffffff78;
	color: #000;
	padding: 1%;
	min-width: 210px;
	box-shadow: 10px 10px 10px 5px rgba(
		150,
		148,
		148,
		0.36
	);
}

.form_grande{
	width: 90%;
	padding: 10px;
	background-color: #EBEEEF;
	border-radius: 15px;
	border: 1px solid #C1CACE;
	-webkit-user-select:'';
	-ms-user-select: '';
	-moz-user-select: '';
	-khtml-user-select: '';
	user-select: '';
	opacity: 0.6;
}

.form_grande:active{
	background-color: #D7DDDF;
	border: 1px solid #9AA9AF;
}

.capa_fija{
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

.div22{
	width: 22%;
	display: inline-block;
	margin: 0px;
	padding: 0px;
}

.divOlvide{
	vertical-align: middle;
	background: -webkit-linear-gradient(15deg, #ff0000, #ffbac8);
	display: inline-block;
	text-align: left;
	color: #ffffff;
	cursor: pointer;
}

.div19{
	width: 19%;
	display: inline-block;
	margin: 0px;
	padding: 0px;
}

.divLogin{
	padding: 8px;
	padding-left: 18px;
	padding-right: 18px;
	border-radius: 15px;
	background-color: #585858;
	display: inline-block;
	text-align: center;
	color: #ffffff;
	cursor: pointer;
}

.capa_accesos{
	position: fixed;
	padding-left: 15%;
	bottom: 100px;
	width: 50%;
	height: auto;
}

.capa_accesos img{
	width: 26%;
	padding: 2%;
	display: inline-block;
}

.texto_mini{
	font: 0.8em times new roman;
	color: #000;
}

.passwd{
	background: url('../images/view.png') no-repeat center center;
    background-size: cover;
	width: 30px; /* Ancho del botón */
	height: 30px; /* Alto del botón */
	border: none;
	cursor: pointer;
	padding: 0;
}

.capa_album{
	width: 47%;
	display: inline-block;
	border-radius: 20px;
	border: 1px solid #0000ff;
	background-color: #ffffffb8;
	vertical-align: top;
}

.no_desbordar_texto{
	white-space: nowrap; /* Evita que el texto pase a la siguiente línea */
    overflow: hidden; /* Oculta el texto que se desborda */
    text-overflow: ellipsis; /* Agrega puntos suspensivos si el texto es muy largo */
}

.romperPalabras{
	word-break: break-all;
}

.capa_album_img{
	max-width: 45%;
	max-height: 45%;
	cursor: pointer;
	padding: 1%;
	object-fit: cover; /* Mantiene la proporción y recorta el exceso */
	object-position: center; /* Centra la imagen */
}

.capa_album_img_mini{
	width: 35%;
	height: 15%;
	display: inline-block;
	cursor: pointer;
	padding: 2.5%;
	margin: 2.5%;
	object-fit: cover; /* Mantiene la proporción y recorta el exceso */
	object-position: center; /* Centra la imagen */
	border-radius: 40px !important;
}

.capa_album_img_mini_hz{
	width: 95%;
	height: 17%;
	display: inline-block;
	cursor: pointer;
	padding: 2.5%;
	margin: 2.5%;
	object-fit: cover; /* Mantiene la proporción y recorta el exceso */
	object-position: center; /* Centra la imagen */
	border-radius: 20px !important;
}

.label_new{
	width: 88%;
	margin: 3%;
	padding: 3%;
	border: 1px solid #00499C;
	border-radius: 30px;
}

.img_ficha{
	border-radius: 110px;
	border: 1px solid #00499C;
}

.boton_wh{
	background-color: #ffffff;
	border: 1px solid #00499C;
	color: #00499C;
}

.img_menu{
	width: 25px;
}

.opciones_menu{
	transform: translate(-200px, 20px);
	width: 200px;
	background-color: #ffffffcc;
}

.black{
	color: #000;
}

.ficha_index{
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
	border: 1px solid #9085AC;
	border-radius: 30px;
	padding: 3% !important;
	background-color: #ffffff67 !important;
}

.icon_preferidos{
	width: 36%;
	padding: 5%;
	display: inline-block;
}

.icon_preferidos_mini{
	width: 15%;
	padding: 4%;
	display: inline-block;
}

.capa_buscador{
	width: 70%;
	height: 45px !important;
	margin-left: 15%;
	margin-right: 15%;
}

.padding0{
	padding: 0px !important;
}

.lupa_index{
	height: 45px;
	cursor: pointer;
	transform: translate(-18px);
	background-color: #ffffff00 !important;
}

.buscador_index{
	width: 99%;
	padding-left: 1%;
	padding-right: 1%;
	font: 1.1em verdana;
	padding-top: 11px;
	padding-bottom: 11px;
	border: 0px;
	background-color: #ffffff00;
}

.boton_new{
	width: 100%;
}

.capa_img_ajustar{
	width: 24%;
	display: inline-block;
}

.img_galeria{
    /* height: 60vh; */
    max-width: 100vh;
}

.btn_dir_gal{
	width: 50px;
	margin-top: 30vh;
}

.miniatura_gal{
	width: 40px;
	height: 40px;
	object-fit: cover; /* Mantiene la proporción y recorta el exceso */
	object-position: center; /* Centra la imagen */
	cursor: pointer;
	border: 1px solid #fff;
}

.miniatura_gal:hover{
	border: 1px solid #0000ff;
}

.item_menu_seleccionado{
	background-color: #133F53 !important;
	color: #fff;
}

.capa_maximizar{
	position: fixed;
	bottom: 0px;
	right: 0px;
	width: 200px;
	display: none;
}

.divmenu{
	transform: translate(-84px, 25px);
	background-color: #617AE4;
}

.item_mn{
	color: #fff;
	text-align: left;
}

.lista_notificaciones{
	background-color: #fff;
}

.capa_visitas_hoy{
	width: 50%;
	padding-bottom: 10%;
	padding-top: 10%;
	background-color: #00c3ff;
	font: 3em tahoma;
	text-align: center;
}

.capa_botones{
	width: 86%;
	margin-left: 7%;
	margin-right: 7%;
	text-align: left;
}

.boton_inicio, .boton_inicio_g{
	margin: 10px;
	padding: 10px;
	text-align: center;
	img{
		width: 30%;
	}
	cursor: pointer;
}

.boton_inicio_g{
	height: 30% !important;
}

.gris{
	background-color: #8C9696;
	color: #fff;
}

.azul{
	background-color: #5DADE2;
	color: #fff;
}

.amarillo{
	background-color: #F2AE40;
	color: #fff;
}

.fucsia{
	background-color: #93278F;
	color: #fff;
}

.rojo{
	background-color: #E74C3C;
	color: #fff;
}

.azul_oscuro{
	background-color: #0F4864;
	color: #fff;
}

.azul_intenso{
	background-color: #00BFFE;
	color: #fff;
}

.morado{
	background-color: #352f5d;
	color: #fff;
}

.naranja{
	background-color: #F57D2F;
	color: #fff;
}

.verde_azulado{
	background-color: #2FA8A8;
	color: #fff;
}

.negro{
	background-color: #000;
	color: #fff;
}

.verde_claro{
	background-color: #7AEC8D;
	color: #fff;
}

.gris_oscuro{
	background-color: #A5A598;
	color: #fff;
}

.vino_tinto{
	background-color: #5B0303;
	color: #fff;
}

.morado_intenso{
	background-color: #2E0B5B;
	color: #fff;
}

.verde{
	background-color: #549C6E;
	color: #fff;
}

.fondo_capa{
	background: url('../images/fondo_it.jpg');
	background-size: 100% 100%;
	background-position: cover;
}

.oculto{
	display: none !important;
}

.romper_palabras{

	/* Opción 1: Rompimiento de palabras */
	word-wrap: break-word; /* Para palabras muy largas */

	/* Opción 2: Rompimiento más inteligente */
	overflow-wrap: break-word; /* Más moderno que word-wrap */

	/* Opción 3: Para romper en cualquier carácter */
	word-break: break-all; /* Rompe en cualquier punto */

	/* Otra alternativa */
	word-break: break-word; /* Equilibrado entre legibilidad y rompimiento */

	/* Para evitar desbordamiento */
	overflow: hidden; /* o auto/scroll si necesitas scroll */
}

.boton_main{
	width: 90%;
	border-radius: 20px;
	border: 1px solid #80277F;
	background-color: #fff;
	display: flex; /* ← Esto es la clave */
	align-items: center; /* ← Centrado vertical */
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 2%;
	padding-top: 2%;
	padding-bottom: 2%;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
	cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
	.icon_item{
		width: 24% !important;
		text-align: center;
		img{
			width: 50%;
			margin: 10%;
		}
	}
	.text_item{
		width: 74% !important;
		color: #000;
	}
}

.boton_main:hover{
	background-color: #b2b2ca;
}

.boton_main:active{
	background-color: #bdbdbd;
}

.divformularioExterno{
	width: 76%;
	margin-left: 10%;
	margin-right: 10%;
	padding: 2%;
	border: 1px solid #ccc;
	background-color: #fff;
}

.fondo_pagina{
	background: -webkit-linear-gradient(top, #ccc, #fff);
}

.btn-enviar-respuesta {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.btn-enviar-respuesta:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.btn-enviar-respuesta:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.btn-enviar-respuesta:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


.sombrearHover{
	border: 2px dotted var(--texto_web);
	margin-top: 5px;
	margin-bottom: 5px;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

.sombrearHover:hover{
	background-color: #eaeaf5;
}

.capa_bottom{
	position: fixed;
	bottom: 0px;
	width: 290px;
}

/* Formateamos el label que servirá de contenedor */
.switch {
	margin-top: 10px;
	position: relative;
	display: inline-block;
	width: 35px;
	height: 15px;
}

/* Ocultamos el checkbox html */
.switch input {
	display:none;
}

/* Formateamos la caja del interruptor sobre la cual se deslizará la perilla de control o slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

/* Pintamos la perilla de control o slider usando el selector before */
.slider:before {
	position: absolute;
	content: "";
	height: 13px;
	width: 13px;
	left: 4px;
	bottom: 1px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

/* Cambiamos el color de fondo cuando el checkbox esta activado */
input:checked + .slider {
	background-color: #000;
}

/* Deslizamos el slider a la derecha cuando el checkbox esta activado */ 
input:checked + .slider:before {
	-webkit-transform: translateX(14px);
	-ms-transform: translateX(14px);
	transform: translateX(14px);
}

/* Aplicamos efecto de bordes redondeados en slider y en el fondo del slider */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

.botonMenuUser{
	position: fixed;
	top: 0px;
	right: 0px;
	height: 60px;
	z-index: 3;
	cursor: pointer;
	img{
		height: 95%;
		padding-right: 10px;
		border-radius: 30px;
	}
}

.botonMenuUserini{
	height: 60px;
	z-index: 3;
	cursor: pointer;
	display: inline-block;
	img{
		height: 95%;
		padding-right: 10px;
		border-radius: 30px;
	}
}

.itemMenu{
	background-color: #fff;
	display: flex; /* ← Esto es la clave */
	align-items: center; /* ← Centrado vertical */
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 2%;
	padding-top: 2%;
	padding-bottom: 2%;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	.itemMenuIcon{
		width: 10%;
		img{
			width: 90%;
		}
	}
	.itemMenuText{
		width: 90%;
		color: #000;
	}
	z-index: 13 !important;
}

.itemMenu:hover{
	background-color: #eaeaf5;
}

.contenedor-uso {
    font-family: Arial, sans-serif;
    max-width: 400px;
    margin: 10px 0;
}

.info-uso {
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
}

.barra-contenedor {
    width: 100%;
    height: 20px;
    background-color: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.barra-progreso {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #45a049);
    border-radius: 10px;
    transition: width 0.3s ease;
    position: relative;
}

.barra-progreso::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);
    background-size: 10px 10px;
}

.estado-uso {
    margin-top: 5px;
    font-size: 12px;
    font-weight: bold;
}

/* Colores según el nivel de uso */
.barra-contenedor .barra-progreso[style*="width: 8"] {
    background: linear-gradient(90deg, #FF9800, #F57C00);
}

.barra-contenedor .barra-progreso[style*="width: 9"] {
    background: linear-gradient(90deg, #F44336, #D32F2F);
}

.barra-contenedor .barra-progreso[style*="width: 10"] {
    background: linear-gradient(90deg, #D32F2F, #B71C1C);
}

.capa_formularios_mosaico{
	width: 45%;
	border: 1px solid #cfc;
	display: inline-block;
	vertical-align: top;
	margin: 1%;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
	border-radius: 10px;
	cursor: pointer;
	opacity: 0.8;
	.area_titulo{
		white-space: nowrap; /* Evita que el texto haga saltos de línea */
		overflow: hidden;    /* Oculta el texto que exceda el ancho del contenedor */
		text-overflow: ellipsis; /* Agrega puntos suspensivos (...) al final si el texto es demasiado largo */
		width: 100%;        /* Define un ancho fijo para el contenedor */
	}
	.area_imagen{
		display: block;
		width: 100%;
		overflow: hidden;
		height: 100px;
		img{
			width: 100%;
		}
	}
	.area_info{
		width: 100%;
		background-color: #ECF0F1;
		.numero{
			color: #3498DB;
			font: 1.3em Montserrat-Bold;
			text-align: center;
		}
		.text{
			color: #464646;
			font: 1em Montserrat;
			text-align: center;
		}
	}
	&:hover{
		opacity: 1.0;
	}
	&:active{
		filter: contrast(130%);
	}
}

.encabezado_ficha{
	height: 60px !important;
	background-color: #2C3E50;
	color: #fff;
	border-radius: 10px 10px 0px 0px;
	text-align: center;
	width: 96%;
	padding: 2%;
	font: 1.2em Montserrat-Bold;
	text-align: left;
	.fecha{
		float: right;
		font: 0.8em Montserrat-Bold;
	}
	hr{
		border: 0;
		height: 1px;
		background-image: linear-gradient(to right, rgba(223, 216, 216, 0), rgba(165, 156, 156, 0.75), rgba(253, 253, 253, 0));
	}
}

.boton_gris, .boton_azul{
	background-color: #dfdbdb !important;
	&:hover{
		background-color: #95A5A6 !important;
	}
	text-align: center;
	border-radius: 1px solid #636262;
	color: #636262 !important;
	font: 1.2em Montserrat-Bold;
	display: inline-block;
	padding: 3%;
	border-radius: 10px;
	cursor: pointer;
}

.boton_azul{
	background-color: #1566b8 !important;
	color: #fff !important;
	&:hover{
		background-color: #006fdf !important;
	}

}

.contenedor-mosaico {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    padding: 20px;
    background: #f8f9fa;
}

.ficha-mosaico {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
	display: inline-block !important;
	white-space: nowrap; /* Evita que el texto haga saltos de línea */
	overflow: hidden;    /* Oculta el texto que exceda el ancho del contenedor */
	text-overflow: ellipsis; /* Agrega puntos suspensivos (...) al final si el texto es demasiado largo */
	width: 26%;        /* Define un ancho fijo para el contenedor */
	margin: 1% !important;
}

.ficha-mosaico:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.campo-ficha {
    margin-bottom: 10px;
    line-height: 1.4;
}

.label-ficha {
    font-weight: bold;
    color: #495057;
    font-size: 0.9em;
}

.valor-ficha {
    color: #212529;
}

.acciones-ficha {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.btn-mosaico {
    padding: 6px 12px;
    margin: 2px;
    border: none;
    border-radius: 4px;
    background: #007bff;
    color: white;
    cursor: pointer;
    font-size: 0.85em;
}

.btn-mosaico:hover {
    background: #0056b3;
}

/* Ocultar contenedor mosaico inicialmente */
.contenedor-mosaico {
    display: none;
}

.busqueda{
	background-color: #62dff5;
	color: #000;
	font: 1em Montserrat;
	border-radius: 10px;
	border: 1px solid #525252;
	width: 90%;
	margin: 2.5%;
	padding: 2.5%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.b{
	font-weight: bold;
}

.diagonal-header {
  position: relative;
  width: 120px;
  height: 60px;
}

.diagonal-header .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.diagonal-header .top-left {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 12px;
}

.diagonal-header .bottom-right {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 12px;
  text-align: right;
}

.diagonal-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, transparent 49%, black 50%, transparent 51%);
  pointer-events: none;
}

.itemMarcado{
	background-color: #133f53;
	color: #fff;
	font: 0.8em Montserrat-Bold;
	cursor: pointer;
	border: 1px solid #3d3535;
	padding: 3px;
	margin: 3px;
	border-radius: 5px;
	&:hover{
		background-color: #fff;
		color: #133f53;
	}
}

.label_opcion{
	display: inline-block;
	background-color: #133f53;
	color: #fff;
	font: 0.8em Montserrat-Bold;
	cursor: pointer;
	border: 1px solid #3d3535;
	padding: 3px;
	margin: 3px;
	border-radius: 5px;
	&:hover{
		background-color: #fff;
		color: #133f53;
	}
	img{
		margin-left: 5px;
	}
}

.capa_busqueda_n{
	background-color: #f1f1f1;
	color: #000;
	font: 1em Montserrat;
	border-radius: 10px;
	border: 1px solid #525252;
	width: 90%;
	margin: 2.5%;
	padding: 2.5%;
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.area_ok{
	background-color: #c2f562;
	color: #000;
	font: 1em Montserrat;
	border-radius: 10px;
	border: 1px solid #525252;
	width: 94%;
	margin: 2.5%;
	padding: 0.5%;
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.contenedor-foto {
  /* Contenedor principal con relación 3:4 */
  width: 100%; /* Ancho personalizable */
  aspect-ratio: 3/4; /* Relación 3:4 (horizontal:vertical) */
  
  /* Ajuste de la imagen */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Estilos opcionales */
  background-color: #f0f0f0; /* Fondo si la imagen no cubre todo */
  border-radius: 8px; /* Bordes redondeados opcionales */
}

.contenedor-foto img {
  width: 50%;
  object-fit: cover; /* Ajusta la imagen recortando excedentes */
  /* object-fit: contain; -> Alternativa: muestra imagen completa sin recortar */
}

.iconCompartido{
	position: absolute;
	/*background-color: #f00;*/
	padding-top: 40px;
	right: 40px;
	width: 30px;
	img{
		width: 100%;
	}
}

.negrilla_azul{
	font-weight: bold;
	color: #4472C4;
	font: 1.3em Montserrat-Bold;
}

#capa_buscador_archivos{
	display: none;
}

.notificacion_pendiente{
	background-color: #d1f436;
}

/* ========== ESTILOS ESPECÍFICOS PARA DASHBOARD ========== */

/* Ajustes para contenedor de dashboard */
.dashboard-container {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* Mejoras para las tarjetas del dashboard */
.ficha-mosaico.dashboard-card {
    width: 30% !important;
    margin: 1% !important;
    padding: 20px !important;
    min-height: 180px;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0 !important;
}

.ficha-mosaico.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
    border-color: #3498db !important;
}

/* Estilos para gráficos */
.barra-grafico {
    width: 80%;
    margin: 0 auto;
    border-radius: 4px 4px 0 0;
    transition: height 0.5s ease;
    cursor: pointer;
}

.barra-grafico:hover {
    opacity: 0.8;
}

/* Indicadores de estado */
.indicador-estado {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.indicador-activo {
    background-color: #2ecc71;
}

.indicador-inactivo {
    background-color: #e74c3c;
}

.indicador-pendiente {
    background-color: #f39c12;
}

/* Estilos para números grandes en dashboard */
.numero-dashboard {
    font-size: 2.5em;
    font-weight: bold;
    color: #2c3e50;
    margin: 10px 0;
    font-family: 'Montserrat-Bold', sans-serif;
}

/* Panel de resumen */
.panel-resumen {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 4px solid #3498db;
}

/* Tooltips para dashboard */
[title] {
    position: relative;
}

[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.9em;
    white-space: nowrap;
    z-index: 1000;
}

/* Responsive para dashboard */
@media (max-width: 768px) {
    .ficha-mosaico.dashboard-card {
        width: 100% !important;
        margin: 10px 0 !important;
    }
    
    .numero-dashboard {
        font-size: 2em;
    }
    
    .contenedor-mosaico {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
        gap: 10px !important;
        padding: 10px !important;
    }
}

/* Animaciones suaves */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ficha-mosaico {
    animation: fadeIn 0.5s ease-out;
}

/* Estilos para botones de acción en dashboard */
.boton-accion-rapida {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    margin: 5px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2);
}

.boton-accion-rapida:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

.boton-accion-rapida img {
    margin-right: 8px;
    width: 20px;
    height: 20px;
}

/* Mejora para el gráfico de barras */
.grafico-container {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-top: 15px;
}

.eje-y {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 5px;
    font-size: 0.8em;
    color: #666;
}

.eje-x {
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    margin-top: 10px;
    font-size: 0.8em;
    color: #666;
}

/* Estilos para estadísticas en tiempo real */
.estadistica-en-tiempo {
    font-size: 0.9em;
    color: #7f8c8d;
    margin-top: 5px;
}

.estadistica-en-tiempo .cambio {
    font-weight: bold;
}

.cambio-positivo {
    color: #27ae60;
}

.cambio-negativo {
    color: #e74c3c;
}

/* Badge para notificaciones */
.badge-notificacion {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #e74c3c;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.7em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.ficha_triple{
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0.3%;
	margin-right: 0.3%;
	width: 23.5%;
	display: inline-block;
	vertical-align: top;
}

.ficha_triple:first-of-type{
	margin-left: 10px !important;
}

.verticaltop{
	vertical-align: top !important;
}

/* Estilos para la vista dinámica */
.btn-vista-dinamica {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s;
}

.btn-vista-dinamica:hover {
    background-color: #0056b3;
}

.btn-vista-dinamica:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

.btn-pagina {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.3s;
}

.btn-pagina:hover:not(:disabled) {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.btn-pagina:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.controles-vista-dinamica {
    clear: both;
    padding: 10px 0;
    border-top: 1px solid #eee;
}

.contador-elementos {
    font-size: 0.85em;
    color: #6c757d;
    margin-left: 5px;
}

.elemento-oculto {
    display: none !important;
}

/* Para transiciones suaves (opcional) */
.contenedor-archivos {
    transition: max-height 0.3s ease;
}

.filtroArchivos{
	transform: translate(-150px, 15px);
	background-color: #fff;
	z-index: 999999 !important;
}

.elementoMarcado{
	background-color: #007bff !important;
	color: #fff !important;
}

.label_ref{
	width: 99%;
	border: 1.5px dotted #D56A00;
	background-color: #FDE65E;
	margin-top: 30px;
	color: #000000;
}

.pest_app_active{
	border-top: 1px solid #140ad8;
	border-left: 1px solid #fff;
	border-right: 1px solid #000000;
	border-radius: 0px 5px 0px 5px;
	padding: 2px 6px 2px 6px;
	height: 19px;
	padding-left: 6px;
	padding-right: 6px;
	display: inline-block;
	transform: translate(0px, 1px);
	background-color: #0080FF;
	color: #fff;
	border-top: 1px solid #0080FF;
	margin: 1.5px 1.5px 5px 1.5px;
	border-right: 1px solid #0080FF;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.15);
}

.pest_app_inactive{
	padding: 2px;
	height: 19px;
	padding-left: 6px;
	padding-right: 6px;
	display: inline-block;
	transform: translate(0px, 1px);
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.15);
	border-radius: 0px 5px 0px 5px;
	margin: 1.5px 1.5px 5px 1.5px;
}

.panel_list_modern{
	width: 100%;
	vertical-align: bottom;
	text-align: left;
}

.capa_vis_list_moder{
	clear: both;
	width:100%;
	max-height: 85%;
	min-height: 5%;
	background-color: var(--fondo_web);
	color: var(--texto_web);
	overflow: auto;
}
.hijo_capa_vis_list_moder{
	width: 100%;
	height: 90.15%;
	position: absolute;
	background-image: url("../images/fondo_1.png");
}
.item_list{
	width: 94%;
	padding-left: 4%;
	line-height: 30px;
	vertical-align: middle;
	margin: 1px;
	cursor: pointer;
}

.item_list:hover{
	background-color: #a1cbee;
}

.capa_opciones_archivo ul {
    list-style-type: none;
    margin: 0;
    padding: 5px 0;
}

.capa_opciones_archivo li {
    padding: 8px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
}

.capa_opciones_archivo li:hover {
    background-color: #f5f5f5;
}

.capa_opciones_archivo li i {
    margin-right: 10px;
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: #555;
}

.capa_opciones_archivo .divider {
    height: 1px;
    background-color: #eee;
    margin: 5px 0;
}

.capa_opciones_archivo .danger {
    color: #e74c3c !important;
}

.btn-paginacion {
	padding: 6px 12px;
	margin: 0 2px;
	border: 1px solid #ddd;
	background: #fff;
	cursor: pointer;
	border-radius: 4px;
	font-size: 14px;
	min-width: 36px;
	transition: all 0.2s;
}
.btn-paginacion:hover:not(:disabled) {
	background: #f5f5f5;
	border-color: #999;
}
.btn-paginacion.activa {
	background: #007bff;
	color: white;
	border-color: #007bff;
	font-weight: bold;
}
.btn-paginacion:disabled {
	opacity: 0.6;
	cursor: default;
}
.info-paginacion {
	margin: 0 10px;
	color: #666;
	font-size: 14px;
}
.puntos-paginacion {
	margin: 0 5px;
	color: #999;
}
.selector-por-vista {
	margin-left: 15px;
	padding: 5px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	font-size: 14px;
}

/* Ajuste para pantallas muy pequeñas */
@media (max-width: 480px) {

    .dashboard-container {
        padding: 10px;
    }
    
    .boton-accion-rapida {
        width: 100%;
        margin: 5px 0;
        justify-content: flex-start;
        padding: 15px;
    }
    
    .encabezado_ficha {
        font-size: 1em;
        padding: 15px 10px;
    }
}

/*Fin de estilos comunes*/

@media(min-width: 840px){

	/*Estilos PC*/

	.logo{
		height: 60px;
		padding: 5px;
		cursor: pointer;
	}

	.logo_bottom{
		width: 50%;
	}

	.div14_p{
		vertical-align: top;
		display: inline-block;
		width: 14%;
	}

	.div33_p{
		vertical-align: top;
		display: inline-block;
		width: 33%;
	}

	.div49_p{
		vertical-align: top;
		display: inline-block;
		width: 49%;
	}

	.div35_p{
		display: inline-block;
		width: 35%;
	}

	.div60_p{
		vertical-align: top;
		display: inline-block;
		width: 60%;
	}

	.miniatura_blog_1{
		width: 29%;
		display: inline-block;
		padding: 1%;
		margin: 1%;
		border: 1px dotted #00499C;
		background-color: #fff;
		cursor: pointer;
		border-radius: 7px;
	}

	.miniatura_blog_1 >h3{
		font: 1.2em Monserrat;
		color: #00499C;
		font-weight: bold;
		padding: 0px;
		margin: 0px;
	}

	.miniatura_blog_1 .imagen_blog > img{
		width: 100%;
		border-radius: 7px;
		margin-bottom: 10px;
	}

	.miniatura_blog_1 .text_blog{
		color: #888;
	}

	.miniatura_blog_1:hover > .text_blog{
		color: #000;
	}

	.miniatura_blog_1 .link_blog{
		width: 100%;
		text-align: right;
	}

	.item_clientes{
		height: 150px;
		width: 100%;
		overflow: auto;
		text-align: center;
	}

	.item_clientes img{
		height: 140px;
		display: inline-block;
		margin-left: 10px;
		margin-right: 10px;
		cursor: pointer;
	}

	.item_index{
		width: 24%;
		display: inline-block;
		padding: 1%;
		margin: 1%;
		background-color: #fff;
		border-radius: 7px;
		box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
	}

	.item_index img{
		width: 25%;
	}

	.item_index p{
		text-align: justify;
	}

	.div_noticia_mini{
		width: 25%;
		padding: 1%;
		margin: 1%;
		display: inline-block;
		vertical-align: top;
		text-align: left;
	}

	.div_noticia_miti{
		width: 35%;
		padding: 1%;
		margin: 1%;
		display: inline-block;
		vertical-align: top;
		text-align: left;
	}

	.div_noticia_tri{
		width: 28%;
		padding: 1%;
		margin: 1%;
		display: inline-block;
		vertical-align: top;
		text-align: left;
	}

	.div_noticia_miti img{
		width: 105.1%;
	}

	.div_noticia_tri img{
		width: 105.1%;
	}

	.div49_p > .form_landing{
		width: 82%;
	}

	.capa_inicio_ses{
		background-image: url('../images/fondo_w.png');
		background-size: 100% 100%;
	}

}

@media(max-width: 840px){

	/*Estilos Movil*/

	.ficha_triple{
		width: 49%;
	}

	.div49_m{
		vertical-align: top;
		display: inline-block;
		width: 49%;
	}

	.div100_m{
		vertical-align: top;
		display: inline-block;
		width: 100%;
	}

	.oculto_movil{
		display: none;
	}

	.layer_morado{
		width: 89.5%;
		padding: 1%;
		margin: 2.5%;
		background-color: #6860ffaa;
		border-radius: 20px;
		font: 1.9em times new roman;
		color: #FFFFFF;
		text-align: center;
	}

	.capa_resumen_nas{
		width: 86.5%;
		padding: 1%;
		margin: 5%;
		background-color: #ffffffa3;
		border-radius: 20px;
		cursor: pointer;
		box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
	}

	.ficha_index{
		width: 87.8% !important;
		box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.36);
		border: 1px solid #9085AC;
		border-radius: 30px;
		padding: 0% !important;
		background-color: #ffffff67 !important;
	}

	.capa_login_new{
		width: 87% !important;
	}

}