@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
.contariner-base{
    max-width: 100%;
    border: salmon 0px solid;
}
:root{
    /* ===== Colors ===== */
    --body-color: #E4E9F7;
    --sidebar-color: #FFF;
    --primary-color: #1B396A;
    --primary-color-light: #F6F5FF;
    --toggle-color: #DDD;
    --text-color: #707070;

    /* ====== Transition ====== */
    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.3s ease;
    --tran-05: all 0.3s ease;
}

body{
    min-height: 100vh;
    background-color: var(--body-color);
    transition: var(--tran-05);
}

::selection{
    background-color: var(--primary-color);
    color: #fff;
}

body.dark{
    --body-color: #18191a;
    --sidebar-color: #242526;
    --primary-color: #3a3b3c;
    --primary-color-light: #3a3b3c;
    --toggle-color: #fff;
    --text-color: #ccc;
}

/* ===== Sidebar ===== */
 .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px;
    padding: 10px 14px;
    background: var(--sidebar-color);
    transition: var(--tran-05);
    z-index: 100;  
}
.sidebar.close{
    width: 78px;
}

/* ===== Reusable code - Here ===== */
.sidebar li{
    height: 50px;
    list-style: none;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.sidebar header .image,
.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
    margin-left: -12px;
}

.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.sidebar .text,
.sidebar .icon{
    color: var(--text-color);
    transition: var(--tran-03);
}

.sidebar .text{
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
}
.sidebar.close .text{
    opacity: 0;
}
/* =========================== */

.sidebar header{
    position: relative;
}

.sidebar header .image-text{
    display: flex;
    align-items: center;
}
.sidebar header .logo-text{
    display: flex;
    flex-direction: column;
    text-align: left;
}
header .image-text .nombre {
    
    margin-top: 2px;
    font-size: 18px;
    font-weight: 600;
}

header .image-text .apellido{
    font-size: 14px;
    margin-top: -2px;
    display: block;
}

.sidebar header .image{
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar header .image img{
    width: 60px;
    border-radius: 6px;
}

.sidebar header .toggle{
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%) rotate(180deg);
    height: 25px;
    width: 25px;
    background-color: var(--primary-color);
    color: var(--sidebar-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: var(--tran-05);
}

body.dark .sidebar header .toggle{
    color: var(--text-color);
}

.sidebar.close .toggle{
    transform: translateY(-50%) rotate(0deg);
}

.sidebar .menu{
    margin-top: 40px;
}
 ul{
    padding-left: 0px;
 }
.nav-link{
    padding-left: 0px;
}
.sidebar li.search-box{
    border-radius: 6px;
    background-color: var(--primary-color-light);
    cursor: pointer;
    transition: var(--tran-05);
}

.sidebar li.search-box input{
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    background-color: var(--primary-color-light);
    color: var(--text-color);
    border-radius: 6px;
    font-size: 17px;
    font-weight: 500;
    transition: var(--tran-05);
}
.sidebar li a{
    list-style: none;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 6px;
    text-decoration: none;
    transition: var(--tran-03);
}

.sidebar li a:hover{
    background-color: var(--primary-color);
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text{
    color: var(--sidebar-color);
}
body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text{
    color: var(--text-color);
}

.sidebar .menu-bar{
    height: calc(100% - 55px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: scroll;
}
.menu-bar::-webkit-scrollbar{
    display: none;
}
.sidebar .menu-bar .mode{
    border-radius: 6px;
    background-color: var(--primary-color-light);
    position: relative;
    transition: var(--tran-05);
}

.menu-bar .mode .sun-moon{
    height: 50px;
    width: 60px;
}

.mode .sun-moon i{
    position: absolute;
}
.mode .sun-moon i.sun{
    opacity: 0;
}
body.dark .mode .sun-moon i.sun{
    opacity: 1;
}
body.dark .mode .sun-moon i.moon{
    opacity: 0;
}

.menu-bar .bottom-content .toggle-switch{
    position: absolute;
    right: 0;
    height: 100%;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}
.toggle-switch .switch{
    position: relative;
    height: 22px;
    width: 40px;
    border-radius: 25px;
    background-color: var(--toggle-color);
    transition: var(--tran-05);
}

.switch::before{
    content: '';
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    background-color: var(--sidebar-color);
    transition: var(--tran-04);
}

body.dark .switch::before{
    left: 20px;
}

.home{
    position: absolute;
    top: 0;
    top: 0;
    left: 250px;
    height: 100vh;
    width: calc(100% - 250px);
    background-color: var(--body-color);
    transition: var(--tran-05);
}
.home .text{
    float: right; 
    text-align: right;
    width: 100%;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-color);
    padding: 12px;
}
.topbar {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
  }
  
  .toggle {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    cursor: pointer;
  }
  
  
  .user {
    float: right;
    position:relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
  }
  
  .user img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.sidebar.close ~ .home{
    left: 78px;
    height: 100vh;
    width: calc(100% - 78px);
}
body.dark .home .text{
    color: var(--text-color);
}
.mode .sun-moon i{
    position: absolute;
}
.mode .sun-moon i.sun{
    opacity: 0;
}
body.dark .mode .sun-moon i.sun{
    opacity: 1;
}
body.dark .mode .sun-moon i.moon{
    opacity: 0;
}


  /* ======================= Cards ====================== */
  .cardBox {
    position: relative;
    width: 100%;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
  }
  
  .cardBox .card {
    position: relative;
    background: var(--white);
    padding: 30px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
  }
  
  .cardBox .card .numbers {
    position: relative;
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--primary-color);
  }
  
  .cardBox .card .cardName {
    color: var(--black2);
    font-size: 1rem;
    margin-top: 5px;
  }
  
  .cardBox .card .iconBx {
    font-size: 1.4rem;
    color: var(--black2);
  }
  
  .cardBox .card:hover {
    background: var(--primary-color);
  }
  .cardBox .card:hover .numbers,
  .cardBox .card:hover .cardName,
  .cardBox .card:hover .iconBx {
    color: var(--white);
  }

  /* ====================== Responsive Design ========================== */
@media (max-width: 991px) {

    .cardBox {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 768px) {
    
  }
  
  @media (max-width: 480px) {
    .cardBox {
      grid-template-columns: repeat(1, 1fr);
    }
    .cardHeader h2 {
      font-size: 20px;
    }
    .user {
      min-width: 40px;
    }
    .cardBox .card .numbers {
        font-weight: 500;
        font-size: 1.1rem;

      }
      .home .text{
        float: right; 
        text-align: right;
        width: 100%;
        font-size: 1.1rem;
        font-weight: 500;
      
    }
  }
/*Estos son los css que modifican el aspecto de las diferentes reticulas se pueden anexar mas yo use id como referencia
pueden utilizar muchos otros pero por favor especificar a que lo aplican con comentarios
*/
/*** seccion login***/
.login_box {
    width: 80%;
    height: 600px;
    position: absolute;
    margin: 10px;
    margin-top: 23%;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 10px;
    box-shadow: 1px 4px 22px -8px #0004;
    display: flex;
    overflow: hidden;
  }

  .login_box .right {
    width: 60%;
    height: 100%;
    padding: 25px 25px;
  }

  .login_box .left {
    width: 40%;
    height: 100%
  }

  .left .top_link a {
    color: #732944;
    font-weight: 400;
  }

  .left .top_link {
    height: 20px
  }

  .left .container {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    height: 100%;
    width: 80%;
    margin: auto;
  }

  .left .left-inicio {
    text-align: center;
    margin-bottom: 40px;
  }

  .left input {
    border: none;
    width: 80%;
    margin: 15px 0px;
    border-bottom: 1px solid #732944;
    padding: 7px 9px;
    width: 100%;
    overflow: hidden;
    background: transparent;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
  }

  .right {
    background: 
    linear-gradient(212.38deg, rgba(115, 41, 68, 0.71) 0%, rgba(115, 41, 68, 0.71) 100%),url('/imagenes/Inicio.jpg') no-repeat center center;
    color: #fff;
    position: relative;                   ;
  }

  .left {
    background: linear-gradient(-45deg, #d1ccd3, #fff);
  }

  .right .right-text {
    height: 100%;
    position: relative;
    transform: translate(0%, 45%);
  }

  .right-text h2 {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 50px;
    font-weight: 500;
  }

  .right-text h5 {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 19px;
    font-weight: 400;
  }

  .submit {
    border: none;
    padding: 15px 70px;
    border-radius: 8px;
    display: block;
    margin: auto;
    margin-top: 80px;
    background: #732944;
    color: #fff;
    font-weight: bold;
  }

@media (max-width: 785px) {
    .login_box {
        width: 90%;
        height: 600px;
        position: absolute;
        margin: 10px;
        margin-top: 60%;
        top:0%;
        left: 50%;
        right: 60%;
        transform: translate(-50%, -50%);
        background: #fff;
        border-radius: 10px;
        box-shadow: 1px 4px 22px -8px #0004;
        display: flex;
        overflow: hidden;
      }
    
      .login_box .right {
        width: 40%;
        height: 100%;
        padding: 25px 25px;
      }
    
      .login_box .left {
        width: 60%;
        height: auto;

      }
    
      .left .top_link a {
        color: #732944;
        font-weight: 400;
      }
    
      .left .top_link {
        height: 20px
      }
    
      .left .container {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        height: 100%;
        width: 80%;
        margin: 10px;
      }
    
      .left .left-inicio {
        text-align: center;
        margin-bottom: 40px;
        margin-left: 40px;
        font-size: 16pt;
      }
    
      .left input {
        border: none;
        width: 0%;
        margin: 0px 0px 0px 20px;
        border-bottom: 1px solid #732944;
        padding: 7px 2px;
        width: 100%;
        overflow: hidden;
        background: transparent;
        font-weight: 600;
        font-size: 14pt;
        text-align: center;
      }
    
      .right {
        background: 
        linear-gradient(212.38deg, rgba(115, 41, 68, 0.71) 0%, rgba(115, 41, 68, 0.71) 100%),url('/imagenes/Inicio.jpg') no-repeat center center;
        color: #fff;
        position: relative; 
      }
    
      .left {
        background: linear-gradient(-45deg, #d1ccd3, #fff);
      }
    
      .right .right-text {
        width: 100%;
        height: 100%;
        position: relative;
        transform: translate(0%, 45%);
        text-align: center;
      }
    
      .right .right-text h2 {
        display: relative;
        font-size: 15pt;
        font-weight: 480;
        margin-left: 0px;
      }
    
      .right-text h5 {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 12pt;
        font-weight: 400;
        margin-left: 0px;
      }
    
      .submit {
        border: none;
        padding: 15px 70px;
        border-radius: 8px;
        display: block;
        margin-left: 40px;
        margin-top: 40px;
        background: #732944;
        color: #fff;
        font-weight: bold;
      }

}


  /* Animacion toast */

  .toast {
    visibility: hidden;
    background-color: #732944;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 10px 20px;
    position: fixed;
    z-index: 1;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  .toast.show {
    visibility: visible;
    opacity: 1;
  }

/***fin seccion login***/
/*Inicio de los estilos del avance reticular*/
.container-reticulas{
    width: 100%;
}


#reticulaheader{
    width: 100%; height: 100%;background-color: #1B396A; color: white; text-align: center; font-size: 18pt;
}


#tablethead{
    background-color: #762A44; color: white;
    text-align: center;
    font-size: 8pt;
    
}
.tabletbody_reticulas{
    font-size: 8pt;
    width: auto;
    height: auto;
    text-align: center;
    
}
.tdbodyreticulas{
    width: auto;
    height: auto;
    text-align: center;
    
}
/* Estilos para las materias habilitadas */
.tdbodyreticulas.materia-valida{
    background-color: #33CAFF; /* Puedes cambiar el color según tus preferencias */
     /* Cambiar el color del texto para que sea legible en el fondo azul */
}
/* Estilos para las materias aprobadas */
.tdbodyreticulas.materia-aprobada{
    background-color: #A0D79F; /* Puedes cambiar el color según tus preferencias */
     /* Cambiar el color del texto para que sea legible en el fondo azul */
}
/* Estilos para las materias reprobada en primera oportunidad*/
.tdbodyreticulas.materia-reprobada{
    background-color: red; /* Puedes cambiar el color según tus preferencias */
    color: white;
     /* Cambiar el color del texto para que sea legible en el fondo azul */
}
.tdbodyreticulas.materia-segunda-oportunidad{
    background-color: black ; /* Puedes cambiar el color según tus preferencias */
    color: white;
}
.tdbodyreticulas.materia-especial{
    background-color: #FF9900 ; /* Puedes cambiar el color según tus preferencias */
    color: white;
}

/* Estilos para las materias no habilitadas */
.tdbodyreticulas.materia-no-disponible{
    background-color: #CCCCCC; /* Puedes cambiar el color según tus preferencias */
    color: #000000; /* Cambiar el color del texto para que sea legible en el fondo gris */
}
/* Estilos para las materias que esta cursando */
.tdbodyreticulas.materia-cursando{
    background-color:  #603060; /* Puedes cambiar el color según tus preferencias */
    color: white; /* Cambiar el color del texto para que sea legible en el fondo gris */
}
/*Estilo para las materias de especialidad aun por asignar al estudiante*/
.tdbodyreticulas.materia_especialidad{
    background-color: #a3a0a0;
}
.tdbodyreticulas.materia-prerequisito-reprobado{
    background-color: #524545;
    color: white;
}
.codigos_color{
    font-size: 8pt;
    vertical-align: middle;
}
#espace{
    background-color: white;
}

#datosdelalumno{
    font-size: 10pt; 
}
.contarinercustomreticula{
    background-color: #762A44; color: white;
}
.labelinfo{
    font-size: 10pt;
    font-family:Century Gothic; text-transform: uppercase; text-align: center;
    font-weight: bold;
    background-color: #762A44; color: white;
    
    
}
.divborder{
    border: 1px rgb(230, 230, 240) solid;
}
.datosinfo{
    font-size: 10pt;
    font-family:Century Gothic;
    text-align: center;
    
    background-color: #C6CDCD;
   
}

#divinfo{
    margin: auto;
    padding: auto;
    padding-top: 1px;
    padding-bottom: 1px;
    
   
}
#divdatos{
    margin: auto;
    padding: auto;
    padding-top: 1px;
    padding-bottom: 2px;
    margin-left: 0px;
   
    
}
.div-custom{
    font-size: 10pt;
    font-family:Century Gothic;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    background-color: #762A44;
    color: white;
    margin-bottom:1px ;

}
.box-customt{
    width: 100%;
    text-align: center; 
    font-family:Century Gothic; text-transform: uppercase;
    font-size: 10pt;
    font-weight: bold;
    vertical-align: middle !important; 
}
/*End estilos Reticulas*/
/*Estilos de la tabla planes de estudio*/
.tablaplan{
    text-align: center;
    position: relative;
    width:100%;
    height: 0%;
    margin-left: 0%;
    vertical-align: middle !important; 
}

.headplan{
    font-size: 8pt;
    font-family:Century Gothic; 
    text-transform: uppercase;
    font-weight: bold;
    background-color: #762A44; color: white;
    vertical-align: middle !important;
    
}
.thheadplanesdeestudios{
    font-size: 8pt;
    vertical-align: middle !important; 
    width: 0%;
}
.tdbodyplanesdeestudios{
    vertical-align: middle !important; 
    font-size: 8pt;

}
.brand-custom{
    word-wrap: break-word;
}

.btnenviarmateria{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    border:none;
}
.btnenviar:hover {
    color: white !important;
    background-color: #762A44 !important;
    text-decoration: none;
    
    
  }
.btncancelar{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 0px;
    margin-left: 0%; margin-top: 0px;
    border:none;
}
.btncancelar:hover {
    color: white !important;
    background-color: #762A44 !important;
    text-decoration: none;
    
}
/*End estilos planes de estudio*/
/*Estilos de la interfaz grupos*/
.tableresponsivecustomgrupos{
   
    overflow-x: auto;
}
.form-groupcustom{
    margin-top: 1%;
}
.tablagrupos{
    font-size: 8pt;
    text-align: center;
    position: relative;
    width: auto;
    
}

.headgrupos{
    font-size: 8pt;
    font-family:Century Gothic; 
    text-transform: uppercase;
    font-weight: bold;
    background-color: #762A44; color: white;
    
}

.tabletbodygrupos{
    font-size: 8pt;
    width: auto;
    height: 0%;
    text-align: center;
    
}
.tdbody{
    width: 25%;
    height: 0%;
    text-align: center;
    vertical-align: middle !important;
}

.btncreargrupo{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 0%; margin-top: 12px; margin-bottom: 2px;
    border:none;
   
}
.btnenviargrupo{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 0px;
    margin-left: 0%; 
    border:none;
}
.btncancelargrupo{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 0.1%;
    margin-left: 0%;
    border:none;
}
.btn-ordenargrupos{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 0px;
    
}
.btn-ordenarordenargrupos:hover {
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    border:none;
    text-decoration: none !important;  
    
    
}

.ordenar{
    margin-top: 10px;
    margin-bottom: 10px; 
    margin-right: 20%;
}
.btnfiltrargrupos{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 0%; margin-top: 10px;
    border:none;

}
.espaciado{
    margin-bottom: 1%;
}
/*End estilos grupos*/
.btncrearplanestudio{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 2%;
    margin-top: 10px; 
    margin-bottom: 15px;
    width: 10%;
    border:none;
   
}
.btnfiltrargrupo{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 0%; margin-top: 10px;  margin-bottom: 0px;
    border:none;
}

@media (max-width: 502px) {
    .btnfiltrargrupo {
        margin-top: 10px;
      }

}

.btnfiltrarplanestudio{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 0%; margin-top: 10px; margin-bottom: 15px;
    width: 10%;
    border:none;
   
}

.btncrear:hover {
    background-color:#762A44 !important; /* Mismo color que el color de fondo normal */
    color: white;
    
  }
 .navbar-brand{
    color: white;
  }
  .navbar-brand .navbar-a:hover{
    color: white;
  }

  .navbar-custom {
    background-color: #762A44;
    border-radius: 10pt ;
  }
  
  .navbar-custom .nav-item .nav-link {
    color: white;
  }
  
  .navbar-custom .nav-item {
    font-size: 12pt;
    font-family: Century Gothic;
  }
  .dropdown-menu-custom {
    background-color: #762A44;
  }
  .dropdown-menu-custom .dropdown-item-custom{
    color: white;
  }
  .dropdown-menu-custom a:hover {
    background-color: #ae3e65;
  }
  .buscar-button {
    border-color: transparent;
    color: white;
    background-color: transparent;
  }
  
  .buscar-button:hover,
  .buscar-button:focus {
    border-color: transparent;
    background-color: transparent;
  }

.brand-custom .imagelogo{width: 150px;}
/***** Aqui modificamos los css de la interfaz de creacion de grupos *****/
.labelgrupos{
    margin-left: auto; margin-bottom: 10px; text-transform: uppercase; text-align: center;
    vertical-align: middle !important; 
    
}


.labelgrupos .labelgrupositems{
    background-color: #762A44; color: white;
    border-right: 1px solid #ccc; /* Añade un borde derecho de 1 píxel sólido con color gris claro */
    padding-right: 0px; /* Añade un espacio de relleno a la derecha para separar visualmente */
    margin-right: 0px; /* Añade un margen a la derecha para separar visualmente */
    margin-bottom: 10px;
    vertical-align: middle !important; 
}
.btn-custom{
    font-size: 9pt;
    text-align: center;
}

.container_custom{
    text-align: center;
    margin-left: 0px; 
    margin-bottom: 10px;
    vertical-align: middle !important; 
}

/***** Aqui modificamos el css de la interfaz seleccionar Horario *****/
#materias-seleccionadas {
    display: flex; /* Alinear los hijos en una fila */
    flex-wrap: wrap; /* Permitir que los hijos se ajusten a la siguiente fila si no hay espacio */
    justify-content: center; /* Centrar los elementos horizontalmente */
    gap: 10px; /* Espacio entre los elementos */
}
.materia-seleccionada {
    display: inline-block; /* Mantener el diseño del div */
    margin: 5px; /* Espacio adicional entre divs */
    padding: 10px; /* Espacio interno */
    border: 1px solid #ccc; /* Borde alrededor del div */
    border-radius: 5px; /* Bordes redondeados */
    background-color: #61fad9; /* Color de fondo */
    width: 10%; /* Ancho fijo */
    height: 5%px; /* Altura fija */
    text-align: center; /* Centrar contenido */
    overflow: hidden; /* Ocultar contenido que desborde */
}
.materia-seleccionada p {
    font-size: 80%; /* Tamaño de fuente relativo al tamaño del contenedor */
    margin: 0; /* Eliminar el margen predeterminado del párrafo */
}
#tabletheadcustomh{
    background-color: #762A44; color: white;
    text-align: center;
    font-size: 10px;
    font-variant: small-caps;
    padding: 3px 10px 3px 5px;
}

.form-checkcustomh{
    margin-left:0%;
    margin-bottom: -10%;
}

.tdbodycustomh{
    max-width: 50%; /* Ajusta el ancho máximo según tus necesidades */
    font-size: 7pt;
    word-wrap: break-word; /* Permite el ajuste de línea para el contenido largo */
    text-align: center;
    height:2%; 
    width:10%;
    font-variant: small-caps;
    padding: 3px 3px 3px 3px;
    
    
}
.form-select-smcustomh{
    text-align: center;
    font-size: 8pt;
    margin-left: 18%;
    width: 60%;
    font-weight: bold;
    margin-top: 0%;
}

/* Estilos para las materias habilitadas */
.tdbodycustomh.materia-valida{
    background-color: #33CAFF; /* Puedes cambiar el color según tus preferencias */
     /* Cambiar el color del texto para que sea legible en el fondo azul */
     
}
/* Estilos para las materias aprobadas */
.tdbodycustomh.materia-aprobada{
    background-color: #A0D79F; /* Puedes cambiar el color según tus preferencias */
     /* Cambiar el color del texto para que sea legible en el fondo azul */
}
/* Estilos para las materias reprobada en primera oportunidad*/
.tdbodycustomh.materia-reprobada{
    background-color: rgb(100, 5, 5) ; /* Puedes cambiar el color según tus preferencias */
    color: white;
     /* Cambiar el color del texto para que sea legible en el fondo azul */
}
.tdbodycustomh.materia-reprobada-en-primera{
    background-color: rgb(43, 40, 40) ; /* Puedes cambiar el color según tus preferencias */
    color: white;
}
.tdbodycustomh.materia-reprobada-en-segunda{
    background-color: rgb(0, 0, 0) ; /* Puedes cambiar el color según tus preferencias */
    color: white;
}
.tdbodycustomh.materia-reprobada-en-especial{
    background-color: rgb(77, 49, 2) ; /* Puedes cambiar el color según tus preferencias */
    color: white;
}
.tdbodycustomh.materia-segunda-oportunidad{
    background-color: black ; /* Puedes cambiar el color según tus preferencias */
    color: white;
}
.tdbodycustomh.materia-especial{
    background-color: rgb(255, 153, 0) ; /* Puedes cambiar el color según tus preferencias */
    color: white;
}

/* Estilos para las materias no habilitadas */
.tdbodycustomh.materia-no-disponible{
    background-color: #CCCCCC; /* Puedes cambiar el color según tus preferencias */
    color: #000000; /* Cambiar el color del texto para que sea legible en el fondo gris */
}
/* Estilos para las materias que esta cursando */
.tdbodycustomh.materia-cursando{
    background-color:  #603060; /* Puedes cambiar el color según tus preferencias */
    color: white; /* Cambiar el color del texto para que sea legible en el fondo gris */
}
/*Estilo para las materias de especialidad aun por asignar al estudiante*/
.tdbodycustomh.materia_especialidad{
    background-color: #a3a0a0;
}
.tdbodycustomh.materia-prerequisito-reprobado{
    background-color: #524545;
    color: white;
}
.box-custom{
    text-align: center; 
    font-family:Century Gothic; text-transform: uppercase;
    font-size: 10pt;
    font-weight: bold;
}
.h3-custom{
    font-size: 12pt;
    text-align: center;
    background-color: #762A44;
    color: white;
    font-family:Century Gothic; text-transform: uppercase;
}
.btnguardar_seleccion{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 1%; margin-top: 0px; margin-bottom: 2px;
    border:none;
}

/***** End Section *****/

/**Aqui comienzan los estilos css de la interfaz kardex de calificaciones.**/
.contenido-custom{
    width: auto;
    height: auto;
    font-family: Century Gothic; text-transform: uppercase;
    margin-bottom: 10px;
}

.table-responsive-custom{
    font-size: 10pt;
    font-family:Century Gothic;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    background-color: #762A44;
    color: white;
    margin-bottom:10px ;
}
.table-periodo-custom{
    font-size: 12pt;
    font-family:Century Gothic;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    background-color: #762A44;
    color: white;
    margin-bottom:1px ;
}

.labelinfo-kardexcalificaciones{
    font-size: 10pt;
    font-family:Century Gothic; text-transform: uppercase; text-align: center;
    font-weight: bold;
    background-color: #762A44; color: white;
}

.datosinfo-kardexcalificaciones{
    font-size: 8pt;
    font-family:Century Gothic;
    text-align: center;
    font-weight: bold;  
    background-color: #C6CDCD;
   
}

#divinfo-kardexcalificaciones{
    margin: auto;
    padding: auto;
    padding-top: 1px;
    padding-bottom: 1px;
    
   
}
#divdatos-kardexcalificaciones{
    margin: auto;
    padding: auto;
    padding-top: 1px;
    padding-bottom: 5px;
    margin-left: 0px;
    
    
}
#labelinfo-periodo-kardexcalificaciones{
    
    color: white;
    
    
    
}
.table{
    width: 100%;
    font-family:Century Gothic;
    text-transform: uppercase;
    text-align: center;
    justify-content: center;
}
.table-th{
    font-size: 8pt;
    font-family:Century Gothic; text-transform: uppercase; text-align: center;
    font-weight: bold;
    background-color: #762A44; color: white;
}
.tableth{
    font-family:Century Gothic;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    width: 80%;
}
.tabletbody-kardexcalificaciones{
    font-size: 8pt;
    text-align: center;
    width: 100%;
}
.tdbody-kardexcalificaciones{
    text-align: center;
    font-size: 00.9rem
    
}
/* Estilos para pantallas más pequeñas */
@media (max-width: 480px) {
   
    /* Estilos para la tabla en pantallas más pequeñas */
    .contenido-custom{
        width: 100%;
   
    }
    .table{
        font-family:Century Gothic;
        text-transform: uppercase;
        text-align: center;
    }
    .tableth{
        font-family:Century Gothic;
        text-transform: uppercase;
        text-align: center;
        font-weight: bold;
        width: 80%;
    }
    .labelinfo-kardexcalificaciones{
        font-size: 8    pt;
        font-family:Century Gothic; text-transform: uppercase; text-align: center;
        font-weight: bold;
        background-color: #762A44; color: white;
    }
    .tabletbody-kardexcalificaciones{
        font-size: 8pt;
        text-align: center;
        
    }
    .tdbody-kardexcalificaciones{
        text-align: center;
        
    }
  }

/**Aqui comienzan los estilos de la interfaz crear horario cordinador**/
.tablaplan-alumno{
    font-size: 10pt;
    font-family:Century Gothic;
    text-align: center;
    position: relative;
    height: auto;
    margin-left: 0%;
}
.form-alumnocustom{
    margin-top: 2%;
    margin-bottom: 1%;
    max-width: 100%; /* Puedes ajustar este valor según tus necesidades */
    width: 100%;
    margin-bottom: 20px; /* Puedes ajustar el margen inferior según tus necesidades */
    font-size: 10pt;
    font-family:Century Gothic;
}
.btnfiltraralumno{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 1%; margin-top: 0px; margin-bottom: 2px;
    border:none;
   
}

.btn-guardar-horario{
    margin-top: 10px;
   
}
@media (max-width: 767px) {
   
    .btnfiltraralumno{
        margin-top: 10px;
       
    }
  }
.btn-agregarmateria{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 2%; margin-top: 10px; margin-bottom: 15px;
    width: 10%;
    border:none; 
}
.btn-guardarhorario{
    font-size: 10pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 2%; margin-top: 0px; margin-bottom: 15px;
    width: 15%;
    margin-top: 10px;
    border:none; 
}
.btneliminarfila{
    font-size: 10pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 2%; margin-top: 2%; margin-bottom: 15px;
    width: 15%;
    margin-top: 10px;
    border:none; 
}
.btn-cancelarhorario{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 2%; margin-top: 0px; margin-bottom: 15px;
    margin-top: 10px;
    border:none; 
}
.btn-cancelarhorario:hover {
    color: white !important;
    background-color: #762A44 !important;
    text-decoration: none;
}

.headplancrearhorario{
    font-size: 8pt;
    font-family:Century Gothic; 
    text-transform: uppercase;
    font-weight: bold;
    background-color: #762A44; color: white;
    vertical-align: middle !important; /* !important para asegurar que prevalezca sobre otras reglas */ 
    
}
.th-custom{
    width: 10%;
    text-align: center;
    vertical-align: middle !important; /* !important para asegurar que prevalezca sobre otras reglas */
    align-items: center;
}
.th-custom-aspirante{
    text-align: center;
    vertical-align: middle !important; /* !important para asegurar que prevalezca sobre otras reglas */
    align-items: center;
}
.th-custom-2{
    width: 5%;
    text-align: center;
    vertical-align: middle !important; /* !important para asegurar que prevalezca sobre otras reglas */
}
.contenedor-custom{
    display: flex;
    align-items: center;
    margin-bottom: 1% ;
}
.contenedor-custom input{
    margin-left: 10% ;
}
/*Aqui comienzan los estilos de la interfaz gestion de aulas*/
.btncrearaulas{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 0%; margin-top: 0px; margin-bottom: 15px;
    width: 0%;
    border:none;
}
@media (max-width: 616px) {

      .btncrearaulas{
        margin-top: 10px;
      }
}

.tablagestionaulas{
    font-size: 10pt;
    text-align: center;
    position: relative;
    width: auto;
    height: auto;
    margin-left: 0%;
}
.headgestionaulas{
    font-size: 8pt;
    font-family:Century Gothic; 
    text-transform: uppercase;
    font-weight: bold;
    background-color: #762A44; color: white;
    
}
.brand-custom{
    word-wrap: break-word;
}
.labelaulas{
    margin-left: 0px; margin-bottom: 10px; text-transform: uppercase; text-align: center;
   
}
.labelaulas .labelaulasitems{
    background-color: #762A44; color: white;
}
.btn{
    font-family:Century Gothic; 
    text-transform: uppercase;
    font-weight: bold;
    font-size: 7pt;
    text-align: center;
    width: auto;
    
}
.btnenviaraulas{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    margin-left: 0%; margin-top: 10px;
    border:none;
}
.btncancelaraulas{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    margin-left: 1%;
    border:none;
}

.tablagestionaulas .estado-activo{
    background-color: #6DE763;
    color: white;
}
.tablagestionaulas .estado-inactivo{
    background-color: #FF9900;
    color: white;
}

/*End estilos gestion de aulas*/

/*Aqui comienzan los estilos de agregar calificaciones parciales en la interfaz del maestro*/
.tdbody-kardexcalificaciones .aprobado {
    background-color: #6DE763; /* Verde para aprobado */
}

.tdbody-kardexcalificaciones .reprobado {
    background-color: #E76363; /* Rojo para reprobado */
}
/*End estilos gestion de aulas*/

/*Comienzan los estilos de la interfaz consultar alumnos en grupos*/
.btnimprimirexcel{
    font-size: 7pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    margin-left: 0%;
    border:none;
}
.btnimprimirpdf{
    font-size: 7pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    margin-left: 0%;
    border:none;
}
.btn-cancelar{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    margin-left: 0%;
    border:none;
}

.btn-guardarcalificaciones{
    font-size: 7pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    margin-left: 0%;

    border:none;
}
.btn-cierre-grupo{
    font-size: 7pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 15px;
    margin-left: 0%;
    border:none;
}
/*End estilos consultar alumnos en grupos*/

/*Estilos para indexpersonal*/
.info-personal thead{
    background-color: #1B396A;
    line-height: 10%;
}

.info-personal thead tr th{
    font-size: 20px;
    color: white;
    text-align: center;
    
}


.info-personal th{
    text-align: right; /* Alinea el texto a la derecha */
}

.info-personal td{
    text-align: left; /* Alinea el texto a la derecha */
}

td.nombre-escuela {
    word-wrap: break-word;
    white-space: normal;
    max-width: 100%;
  }

.info-personal
{
    text-align: center;
    font-size: 14px;
    line-height: 0%;
}


.info-personal thead
{
    text-align: center;
    font-size: 24px;
}

/* Media query para ajustar el tamaño de la tabla en pantallas pequeñas */
@media (max-width: 480px) {
    th {
      font-size: 60%;
      text-align: start;
    }
    td{
        font-size: 60% ;
}
}

/*Estilos para carga academica*/


.header-horario{
    font-size: 16pt;
    font-family:Century Gothic; text-transform: uppercase; text-align: center;
    font-weight: bold;
    background-color: #762A44; color: white;
}

.table-horario th{
    font-size: 10pt;
    font-family:Century Gothic; text-transform: uppercase; text-align: center;
    font-weight: bold;
    background-color: #762A44; color: white;
}

.table-horario td{
    font-size: 8pt;
    font-family:Century Gothic; text-transform: uppercase; text-align: center;

}
/*End estilos para carga academica*/

/*Inicio estilos calificaciones parciales*/
.tdbody-kardexcalificaciones-parciales{
    width: auto;
    height: auto;
    text-align: center;
}
.tabletbody-kardexcalificaciones-parciales{
    font-size: 12pt;
    width: auto;
    height: auto;
    text-align: center;
}

.btn-consultar-calificaciones-parciales{
    font-size: 10pt;
    background-color: #762A44 !important;
    color: white;
    border:none;
    width: 100%;
    margin-top: 10px;
    
}

.form-select-custom{
    position: relative;
    font-size: 10pt;
    margin-top: 10px;
    width: 100%;
    align-content: center;
    text-align: center;
    
}

.labelinfo-kardexcalificaciones-parciales{
    font-size: 8pt;
    font-family:Century Gothic; text-transform: uppercase; text-align: center;
    font-weight: bold;
    background-color: #762A44; color: white;
}
@media (max-width: 480px) {
    .labelinfo-kardexcalificaciones-parciales{
        font-size: 12pt;
        font-family:Century Gothic; text-transform: uppercase; text-align: center;
        font-weight: bold;
        background-color: #762A44; color: white;
    } 
}

/*end estilos calificaciones parciales*/
/*Estilos de consulta de actas*/
.form-groupcustom-actas{
    margin-top: 1%;
    margin-bottom: 1%;
}
.form-consulta-actas{
    margin-left: 0%;
}
.btnfiltraracta{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    border:none;
}
.btnimprimirpdfacta{
    font-size: 7pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 0px;
    margin-left: 0%;
    border:none;
    vertical-align: middle !important; 
}

.filtro_periodo{
    margin-top:  10px;

}

@media (max-width: 991px) {
    .form-groupcustom-actas{
        margin-top: 1%;
        margin-bottom: 1%;
    }
    .form-consulta-actas{
        margin-left: 10%;
    }
    .btnfiltraracta{
        font-size: 8pt;
        background-color: #762A44 !important;
        color: white;
        margin-top: 10px;
        border:none;
    }
    .btnimprimirpdfacta{
        font-size: 7pt;
        background-color: #762A44 !important;
        color: white;
        margin-top: 0px;
        margin-left: 0%;
        border:none;
        vertical-align: middle !important; 
    }
    
    .filtro_periodo{
        margin-top:  10px;
        margin-left: 0%;
        margin-right: 0%;
    }
    
  }
/*Estilos interfaz de registro usuario*/
.btn-guardar-usuario{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    margin-left: 0.6%; margin-top: 0px;
    border:none;
}

.form-registrocustom{
    width: 100%;
    margin-bottom: 0px; /* Puedes ajustar el margen inferior según tus necesidades */
    font-size: 10pt;
    font-family:Century Gothic;
    
}
.form-centrar-inputs{
    font-size: 10pt;
    font-family:Century Gothic;
    margin-left: 42%;
    margin-bottom: 10px;
    text-align: center;
}
.form-centrar-inputs-2{
    font-size: 10pt;
    font-family:Century Gothic;
    margin-left: 38%;
    margin-bottom: 10px;
    text-align: center;
}
.formlabel{
    font-size: 11pt;
    font-family:Century Gothic;
}

.form-aling-label{
    margin-top: 1px;
    margin-bottom: 1px;
}
.form-group{
    margin-top: 1px;
    margin-bottom: 1px; 
}
/*End estilos interfaz de registro usuario*/

/*Estilos interfaz de registro maestros*/

.btnguardar-maestro{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0%; margin-top: 10px;
    border:none;
}
.btncancelar-maestro{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 0px;
    margin-left: 0%; 
    border:none;
}

@media (max-width: 991px) {
    .btnguardar-maestro{
        font-size: 8pt;
        background-color: #762A44 !important;
        color: white;
        margin-top: 10px;
        margin-left: 0%; 
        border:none;
    }
    .btncancelar-maestro{
        font-size: 8pt;
        background-color: #762A44 !important;
        color: white;
        margin-top: 10px;
        margin-left: 35%; margin-top: 0px;
        border:none;
    }
    
  }
/*End estilos interfaz de registro maestros*/
/*Inicio estilos interfaz de importacion de maestros*/
.btn-importarmaestros-csv{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    margin-left: 0%;
    border:none;}
.archivo_csv{
        margin-left: 0%;
        margin-bottom: 10px;
}
/*End estilos interfaz de importacion de maestros*/
/*Estilos de form alumnos*/
.btnactualizarestudiantes{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 0%; margin-top: 10px;
    margin-bottom: 10px;
    border:none;
}
.btnactualizarestudiantes:hover {
    color: white !important;
    background-color: #762A44 !important;
    text-decoration: none;
    
    
  }
.btncancelarestudiantes{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    margin-left: 1%; margin-top: 0px;
    border:none;
}
.btncancelarestudiantes:hover {
    color: white !important;
    background-color: #762A44 !important;
    text-decoration: none;
    
}
/*End estilos form alumnos*/

/*Estilos listar maestros*/
.btnfiltrarmaestros{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    margin-left: 1%; margin-top: 10px;
    margin-bottom: 10px;
    height: 10%;
    border:none;
} 
.btnconexpediente{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    margin-left: 1%; margin-top: 0px;
    height: 10%;
    border:none;
} 
@media (max-width: 785px) {

    .btnconexpediente{

        margin-left: 1%; margin-top: 10px;

    } 
  }
/*Inicio estilos consulta de expediente*/
.tdbodyconsultaexpediente{
    vertical-align: middle !important; 
}

.tdbodyconsultaexpediente{
    font-size: 10pt;
    width: auto;
    height: auto;
    text-align: center;
}
 
.btnconsultarkardex{
    background-color: #762A44 !important;
    color: white;
    border:none;
}
.btnconsultarreticulas{
    background-color: #762A44 !important;
    color: white;
    border:none;
}

/*Fin estilos consulta de expediente*/

/*Inicio estilos form editar jefes de departamento*/
.container_customjefes {
    font-family: Century Gothic; text-transform: uppercase;
    text-align: center;
    margin-left: 42%;
}

/*Fin estilos editar jefes de departamento*/
/*Inicio de estilos asignar maestros*/
.btnfiltrarmaestro{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    margin-left: 1%; margin-top: 0px;
    margin-bottom: 10px;
    width: 18%;
    height: 10%;
    border:none;
} 

.margin-custom{
    margin-left: 0.6%;
    margin-right: 0.6%;
}

.btncancelarasignacion{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    margin-left: 1%; margin-top: 0.6%;
    margin-bottom: 0.6%;
    width: 10%;
    height: 10%;
    border:none;
}
.btn-ordenar{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 0%;
    margin-left: 0%;
    width: 100%;
    height: 100%;
}
.btn-ordenar:hover {
    color: white !important;
    background-color: #762A44 !important;
    text-decoration: none;
    
}
/*Fin de estilos asignar maestros*/

/*Inicio estilos gestion de inscripcion*/
.labelgestion{
    font-size: 8pt;
    font-family:Century Gothic; 
    text-transform: uppercase;
    font-weight: bold;
    background-color: #762A44; color: white;
}
/*End estilos gestion de inscripcion*/
/*Estilos de listaraspirantes*/
.tablaplanaspirante{ 
    text-align: center;
    position: relative;
    width:100%;
    height: 0%;
    margin-left: 0%;
    vertical-align: middle !important; 
}
.headplanaspirante{
    font-size: 8pt;
    font-family:Century Gothic; 
    text-transform: uppercase;
    font-weight: bold;
    background-color: #762A44; color: white;
    vertical-align: middle !important;  
    
}
.headalinginfo{
    vertical-align: middle !important; 
    font-size: 8pt;
}
.tablaplanaspirante .pago-aprobado{
    background-color: #6DE763;
    color: white;
    border: 1px solid white;
    padding: 10px; /* Añade un relleno alrededor del contenido del div */
    width: 10%;
}
.tablaplanaspirante .pago-no-aprobado{
    background-color: #FF9900;
    color: white;
    border: 1px solid white;
    padding: 10px; /* Añade un relleno alrededor del contenido del div */
    width: 10%;
}
.tablaplanaspirante .examen-aprobado {
    background-color: #6DE763;
    color: white;
    border: 1px solid white;
    padding: 10px; /* Añade un relleno alrededor del contenido del div */
    width: 10%;
}
.tablaplanaspirante .examen-no-aprobado {
    background-color: red;
    color: white;
    border: 1px solid white;
    padding: 10px; /* Añade un relleno alrededor del contenido del div */
    width: 10%;
}
.tabletbodyaspirante{
    font-size: 9pt;
    text-align: center;
    
}
.tabletbodyaspirante .tdbody{
    height: 0%;
    width: auto;
    vertical-align: middle !important;
}

.infoaspiranteh1{
    font-size: 18pt;
    font-family:Century Gothic; 
    text-transform: uppercase;
    font-weight: bold;
    background-color: #762A44; color: white;
    vertical-align: middle !important;  
    text-align: center;
}
.infoaspiranteh2{
    font-family:Century Gothic; 
    font-size: 14pt;
    text-align: center;
    font-weight: bold;
}

.infoaspirantep{
    font-size: 14pt;
    font-family:Century Gothic; 
    text-align: center;
}
.infoaspiranteadvert{
    font-size: 10pt;
    font-family:Century Gothic; 
    text-align: center;
    color: red; 
}
.btfinalizar{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 45%; margin-top: 10px; margin-bottom: 15px;
    width: 10%;
    border:none; 
}
.btnfiltraraspirantes{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 0%; margin-top: 0px; margin-bottom: 15px;
    border:none;  
}
.btncrearaspirantes{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 1%; margin-top: 0px; margin-bottom: 15px;
    border:none;  
}
.tdbodyaspirante{
    width: 0%;
    text-align: center;
    vertical-align: middle !important;
    font-size: 9pt;
}
.transferencia{
    font-weight: bold;
}
/*End estilos listar aspirantes*/
/*Estilos de listaraspirantes*/
.infoaspiranteh1{
    font-size: 18pt;
    font-family:Century Gothic; 
    text-transform: uppercase;
    font-weight: bold;
    background-color: #762A44; color: white;
    vertical-align: middle !important;  
    text-align: center;
}
.infoaspiranteh2{
    font-family:Century Gothic; 
    font-size: 14pt;
    text-align: center;
    font-weight: bold;
}

.infoaspirantep{
    font-size: 14pt;
    font-family:Century Gothic; 
    text-align: center;
}
.infoaspiranteadvert{
    font-size: 14pt;
    font-family:Century Gothic; 
    text-align: center;
    color: red; 
}
.btfinalizar{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 45%; margin-top: 10px; margin-bottom: 15px;
    width: 10%;
    border:none; 
}

/*End estilos listar aspirantes*/
/*Inicio de estilos cargar requisitos*/
/* Estilos para ajustar el tamaño del label de los inputs para cargar archivos */
/* Estilos para los labels y los inputs */
.form-label {
    font-size: 17px; /* Tamaño de fuente para los labels */
    padding-top: 10px;
    margin-bottom: 10px; /* Espacio debajo de cada label */
    margin-right: 10px;
}

/* Estilos para los inputs */
.form-control {
    width: 100%; /* Ancho completo para los inputs */
    padding: 8px; /* Espaciado interno en los inputs */
    font-size: 14px; /* Tamaño de fuente para los inputs */
    border-radius: 4px; /* Bordes redondeados en los inputs */
    border: 1px solid #ccc; /* Borde del input */
}

/* Estilos para el botón de enviar */
.btnenviar{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 45%; margin-top: 10px; margin-bottom: 15px;
    width: 10%;
    border:none; 
}

.container_custom-cargar-requisitos{
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    vertical-align: middle !important; 
}

/*End estilos cargar requisitos*/
/*Inicio estilos horario generado*/
.horario{
width: 100%;
vertical-align: middle !important; 
}

.horariohead{
background-color: #762A44 !important;
color: white;
text-align: center; 
font-family:Century Gothic; text-transform: uppercase;
font-size: 10pt;
font-weight: bold;
}
.horariobody{
    text-align: center; 
    font-family:Century Gothic;
    text-transform: uppercase;
    font-size: 8pt;
    }

/*End estilos horario generado*/
/* Inicio Estilos perfil aspirante*/
.btn-subirachivos{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 45%; margin-top: 10px; margin-bottom: 15px;
    width: 10%;
    border:none; 
}
.btn-cerrarsesion{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    position: relative;
    margin-left: 0%;
    margin-right: 0%;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 10%;
    border:none; 
}
/* End Estilos perfil aspirante*/
/* Inicio Estilos conceptos de pago*/
.btn-guardar-concepto{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 0%; margin-top: 10px; margin-bottom: 2px;
    border:none;
}
.btn-guardar-pago{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 1%; margin-top: 10px; margin-bottom: 10px;
    border:none;
}
/* End Estilos conceptos de pago*/
/* Inicio Estilos form aspirante*/
.container_customaspirante{
    text-align: center;
    margin-left: 0px; 
    margin-bottom: 10px;
    vertical-align: middle !important; 
}
.labelformasprianteitems{
    background-color: #762A44; color: white;
    border-right: 1px solid #ccc; /* Añade un borde derecho de 1 píxel sólido con color gris claro */
    padding-right: 0px; /* Añade un espacio de relleno a la derecha para separar visualmente */
    margin-right: 0px; /* Añade un margen a la derecha para separar visualmente */
    margin-bottom: 10px;
    vertical-align: middle !important; 
    
}
.labelaulasitems .labelaspirante{
    font-size: 8pt;
}
.btn-guardar-aspirante{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 1%; margin-top: 10px; margin-bottom: 2px;
    border:none;
}
@media (max-width: 991px) {

    .labelformasprianteitems{
        background-color: #762A44; color: white;
        border-right: 1px solid #ccc; /* Añade un borde derecho de 1 píxel sólido con color gris claro */
        padding-right: 0px; /* Añade un espacio de relleno a la derecha para separar visualmente */
        margin-right: 0px; /* Añade un margen a la derecha para separar visualmente */
        margin-bottom: 10px;
        vertical-align: middle !important; 
        font-size: 10pt;
    }
}

.tdbodyaspirante{
    width: auto;
    text-align: center;
    vertical-align: middle !important;
}

/* End Estilos form aspirante*/
/* Inicio estilos gestion de maestros */
.tablamaestros{
    text-align: center;
    position: relative;
    width:100%;
    height: 0%;
    margin-left: 0%;
    vertical-align: middle !important; 
}
.headmaestros{
    font-size: 8pt;
    font-family:Century Gothic; 
    text-transform: uppercase;
    font-weight: bold;
    background-color: #762A44; color: white;
    vertical-align: middle !important;
    
}

.thmaestros{
    vertical-align: middle !important;
}
.tabletbodymaestros{
    font-size: 8pt;
    width: auto;
    height: 0%;
    text-align: center;
    
}
.tdbodymaestros{
    width: 25%;
    height: 0%;
    text-align: center;
    vertical-align: middle !important;
}
.btn-editarmaestros{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 1%; margin-top: 10px; margin-bottom: 10px;
    border:none;
}
.btn-eliminarmaestros{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 1%; margin-top: 0px; margin-bottom: 10px;
    border:none;
}
.labelmaestrositems{
    font-size: 8pt;
    background-color: #762A44; color: white;
    border-right: 1px solid #ccc; /* Añade un borde derecho de 1 píxel sólido con color gris claro */
    padding-right: 0px; /* Añade un espacio de relleno a la derecha para separar visualmente */
    margin-right: 0px; /* Añade un margen a la derecha para separar visualmente */
    margin-bottom: 10px;
    vertical-align: middle !important;
 }

/* End estilos gesion de maestros*/
/*Estilos listar alumnos*/
.btnfiltrarestudiantes{
    margin-top: 10px;
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    margin-left: 1%; 
    margin-bottom: 10px;
    border:none;
}

.imagentext{
    font-size: 8pt;
}

/*Estilos concentrado de pagos*/
.btnfiltrareportes{
    font-size: 8pt;
    background-color: #762A44 !important;
    color: white;
    position: relative;
    margin-left: 0%;
    margin-right: 0%;
    margin-top: 5px;
    margin-bottom: 10px;
    border:none; 
}
.btnimprimirreportepdf{
    font-size: 7pt;
    background-color: #762A44 !important;
    color: white;
    margin-top: 10px;
    margin-left: 50%;
    margin-bottom: 10px;
    border:none;
}
.filtro_fecha_fin
{
    margin-top: 10px;
}
.filtro_fecha_inicio
{
    margin-top: 10px;
}

/*Estilos grupos estadisticas*/
.tablagrupoestadisticas{
    text-align: center;
    position: relative;
    width:100%;
    height: 0%;
    margin-left: 0%;
    vertical-align: middle !important; 
}
.headgrupoestadisticas{
    font-size: 8pt;
    font-family:Century Gothic; 
    text-transform: uppercase;
    font-weight: bold;
    background-color: #762A44; color: white;
    vertical-align: middle !important;
    
}
.tabletbodygruposestadisticas{
    font-size: 9pt;
    width: auto;
    height: 0%;
    text-align: center;
    vertical-align: middle !important;
    
}
.headgrupoestadisticas .alingheads{
    vertical-align: middle !important; 
}
.tabletbodygruposestadisticas .aling{
    vertical-align: middle !important; 
}

/* Aplica solo al collapse dentro del modal de unidades */
#unidadModal .collapsing {
  transition: height 0.10s ease-in-out;
}

#unidadModal .collapse.show {
  transition: height 0.10s ease-in-out;
}

.tablebody_texto{
    font-size: 9pt;
    font-family:Century Gothic; text-transform: uppercase; text-align: center;
    vertical-align: middle !important; 
}