@charset "utf-8";
/* CSS Document */
/* === SEMESTRE === */
.ac-semestre-header{
 border:solid 1px #CCCCCC; 
 padding:10px;
}
.ac-semestre-content{
  display: none;
  margin-top: 10px;
}
.ac-semestre-header{
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ac-semestre.ac-active .ac-semestre-content{
  display: block;
}
.ac-semestre-left{
 border-left:solid 6px #2482EF;
 padding:3px 15px;
 margin:10px 5px;
}
.ac-icon{
 font-size:1.3rem;   
}
/* Estado cerrado (PLUS → azul) */
.ac-semestre-header{
  color: #28406D; /* azul */
}
/* Ícono cerrado */
.ac-icon.icon-circle-with-plus{
  color: #28406D;
}
/* Estado abierto (MINUS → rojo) */
.ac-semestre.ac-active .ac-semestre-header{
  color: #B00F1D; /* rojo */
}
/* Ícono abierto */
.ac-icon.icon-circle-with-minus{
  color: #dc3545;
}
.ac-tabla-cursos{
 border:solid 1px #CCCCCC;
 padding:0px;
}
.ac-tabla-cursos table{
    font-size:0.85rem;
}
.ac-tabla-cursos thead tr{
    background: #28406D;
    
}
.ac-tabla-cursos thead tr th{
    color:#FFFFFF;
    text-align:center;
    font-weight:400;
}
/* === TABS SUB SECCION 000 */ 
.custom-wrapper{
 padding:50px 0;   
}
.custom-tab-container {
    background-color: #FFFFFF !important;
    border: 1px solid #dee2e6 !important;
    border-top: none !important; /* Evita doble borde con el nav-tab */
    padding: 20px;
    margin-top: -1px;
}
/* 2. FORZAR el color a los paneles individuales (Esto quita el blanco) */
.custom-tab-container .tab-pane {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important; /* Algunos temas usan 'background' en vez de 'background-color' */
}
/* 3. Estilos de los botones (Tus estilos actuales están bien, solo asegúrate de esto) */
.nav-tabs .nav-link.active {
    color: #C60000 !important;
    background-color: #FFFFFF !important;
    border-color: #dee2e6 #dee2e6 #ECF5FC !important;
    font-weight: 500;
}
.nav-tabs .nav-link {
    color: #28406D !important;
    /*background-color: #FFFFFF !important;*/
    /*border: 1px solid #dee2e6 !important;*/
}
.ac-list-info ol > li{
 font-size:0.95rem;
 padding-bottom:10px;
  color: #28406D;
}
.ac-list-info ul li{
  font-size:0.9rem;
   color: #28406D;
}
.decoracion-titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.decoracion-titulo .linea {
  width: 120px;
  height: 2px;
  background-color: #c60000;
}
.decoracion-titulo .icono {
  color: #c60000;
  font-size: 2.0rem;
   line-height:100%;
}
/* === SECCION MISION VISION === */
.ac-mis-vis {
  list-style: none;
  padding:50px 0;
  margin: 0 auto; /* Centra el UL en la pantalla */
  display: flex;
  justify-content: center; /* Centra los LIs dentro del UL */
  gap: 20px; /* Espacio opcional entre los cuadros */
  max-width: 1000px; /* Ajusta este valor al ancho máximo que desees */
  width: 90%; /* Ancho responsivo */
}
.ac-mis-vis li {
  flex: 1; /* Todos miden lo mismo */
  text-align: center;
  padding: 30px 15px;
  background: #F6FAFA;
  
  /* Centrado de iconos y texto */
  display: flex;
  flex-direction: column;
  align-items: center; 
 border-top:solid 5px #B00F1D; 
}
.ac-mis-vis .ac-cont-ico {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #B00F1D;
  margin-bottom: 15px; /* Espacio entre icono y título */
}
.ac-mis-vis .ac-cont-ico span {
  color: #FFFFFF;
  font-size: 1.5rem;
}
.servicios-item{
    list-style:none;
}
.servicios-item li{
 border-radius:10px;
 padding:20px 30px;
 background:#ffffff;
 margin-bottom:10px;
 font-size:0.95rem;
 box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.25);
-webkit-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.25);
}
.servicios-item li:hover{
    background:#08936C;
    color:#ffffff;
}
/* === FORMULARIO CONTACTO === */
.cont-frm-contacto{
 background: #F5F6F8;
 border-radius: 8px;
 padding: 35px;
}
.frm-contacto label{
 font-size:0.85rem;   
}
.activo{
 	font-size:1.5rem; 
    width:250px; 
    
}
.sec-parrafo-a{
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-bottom: 20px;
  margin-top:50px;
}
.sec-parrafo-a p{
  text-align:justify;
}
.sec-cont-icon {
    width: 100px;
  height: 100px;
  border-radius: 20%;
  background-color: #FFB606;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.sec-cont-img-a{
  height: 100%; /* ajusta según necesites */
  background-size: cover;         /* Hace que la imagen llene el div */
  background-position: center;    /* Centra horizontal y verticalmente */
  background-repeat: no-repeat; 
  border-radius:0 50px 50px 50px;
    
  padding: 0.25rem;
  background-color: #fff;
  border: 3px solid #ffffff;
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
}
.sec-cont-img-a{
  height: 100%; /* ajusta según necesites */
  background-size: cover;         /* Hace que la imagen llene el div */
  background-position: center;    /* Centra horizontal y verticalmente */
  background-repeat: no-repeat; 
  border-radius:50px 0 50px 50px;
    
  padding: 0.25rem;
  background-color: #fff;
  border: 3px solid #ffffff;
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
}
.sec-cont-icon img {
    width: 60%;
    height: 60%;
    object-fit: contain; /* O 'cover' si prefieres que llene el espacio */
  filter: invert(1) brightness(2);
}
/* === VELORES === */
.valores h3{
    line-height:normal;
    font-size:1.3rem;
}
.valores h4{
    
}
.valores .cont-icon{
  height: 100%; /* ajusta según necesites */
  background-size: cover;         /* Hace que la imagen llene el div */
  background-position: center;    /* Centra horizontal y verticalmente */
  background-repeat: no-repeat; 
  /*padding:25px !important;*/
}
.valores .cont-icon img{
  	width: 100%;
    height: 100%;
    object-fit: contain; /* O 'cover' si prefieres que llene el espacio */
	filter: brightness(0) saturate(100%) invert(79%) sepia(54%) saturate(1750%) hue-rotate(1deg) brightness(100%) contrast(105%);
}
.cont-list-a{
   padding:15px;
   
}
.cont-list-item{
   display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-bottom:10px;
  background-color: #F5F5F5; 
   padding:15px;
}
.cont-list-item .cont-icon{
 width:100px;
 heigh:100px;
}
.cont-list-item .cont-icon img{
}
/* === FOTOS DIRECTIVOS === */
.cont-foto-a{
	width: 270px;
	height: 270px;
	position: relative;
    margin-bottom:25px;
}
.cfa-circulo{
	width: 270px;
	height: 270px;
	border-radius: 50%;
	background: #FFFFFF;
	background-size: cover;       /* Asegura que la imagen cubra todo el contenedor */
background-position: center;  /* Centra la imagen */
background-repeat: no-repeat; /* Evita que se repita */
overflow: hidden;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    transition: transform 0.4s ease;
    border:solid 5px rgb(255, 215, 0);
}
.cfa-nombre {
position: absolute;
bottom: 20px;
left: 0;
background-color: #0C3782; /* Celeste */
padding: 8px 12px;
color: white;
font-size: 0.8rem;
width: 100%;
clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index:1000;
}
.cargo {
  font-weight: bold;
  font-size: 0.9rem;
}
.cfa-circulo:hover .cfa-img {
  transform: scale(1.1); /* Agranda un poco */
}
.cont-frm-contacto {
    position: relative;
}
/* Overlay completamente oculto al inicio */
.msje-loading {
    position: absolute;
    inset: 0; /* cubre todo el contenedor */
    background: rgba(255, 255, 255, 0.5); /* blanco semi-transparente */
    display: none; /* oculto por defecto */
    z-index: 20;
    display:block ;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
	font-size:0.8rem;
    padding: 20px;
}
.msje-loading.show {
    display: flex; /* se muestra agregando la clase 'show' */
}
.active-icon{
	color:#000;
	text-shadow:0px 1px 0px #fff;
}
.tab-pane{
	background: #fff !important;
	color: #000 !important;
}
.semest{
	padding: 10px 15px 10px 20px;
	color:rgba(0,0,0,1.00)!important;
	background: #EAF1F7;
	border-radius: 6px;
	font-size: 0.8rem;
	margin: 10px 1px;
	cursor: pointer;
}
.semest span{
	position: relative;
	padding: 2px 2.5px;
	background: rgba(255,255,255,0.8);
	border-radius: 50%;
	margin-left: 5px;
	color: #000;
}
.activ_semest{
	background: #58CCE6;
	color: #fff!important;
}