/* Estilos generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', medium;
}

:root {
    --size16: 16px;
    --size18: 18px;
    --size20: 20px;
}

body {
    /* color: #e4e4ed; */
    font-size: var(--size18);
}

/* Ancho de la barra de navegación */
.nav {
    width: 320px;
    overflow-y: auto;
    height: 100vh;
}

/* Estilos generales del enlace de navegación */
.nav__link {
    color: #e4e4ed;
    /* Color de los elementos de la barra de Navegación */
    display: block;
    padding: var(--size18) 0;
    /* Altura entre elementos de la lista */
    text-decoration: none;
}

/* Estilos para los elementos dentro de la lista */
.nav__link--inside {
    display: flex;
    text-align: left;
    line-height: 10%;
    padding-left: 3em;
    /* Separación lado izquierdo de los elemetos de la lista  */
    border-radius: 4px;
}

/* Hover para los elementos dentro de la lista */
.nav__link--inside:hover {
    background: rgba(23, 23, 26, 0.8);
    transition: all 0.2s ease;
}

/* Estilos para la lista completa */
.list {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-radius: 0 var(--size18) var(--size18) 0px;
}

/* Estilos para cada ítem de la lista */
.list__item {
    list-style-type: none;
    width: 100%;
    text-align: center;
}

/* Cursor pointer en ítems con click */
.list__item--click {
    cursor: pointer;
}

/* Estilos para los botones dentro de la lista */
.list__button {
    display: flex;
    align-items: center;
    gap: 1em;
    width: 70%;
    margin: 0 auto;
    padding-top: 25px;
    line-height: 5px;
    cursor: pointer;
}

.list__arrow {
    order: -1;
    /* Cambiar el orden del ícono para moverlo a la izquierda */
    margin-right: 3px;
    /* Agrega espacio entre el ícono y el texto */
    color: #e4e4ed;
}

.list__show {
    width: 80%;
    margin-left: auto;
    border-left: 2px solid #e4e4ed;
    list-style: none;
    transition: .4s;

}

/* Enlace del inicio (texto) */
.nav__link--inicio {
    display: block;
    /* Asegura que ocupe todo el espacio del contenedor */
    width: 100%;
    /* El enlace ocupa todo el ancho disponible */
    text-align: center;
    /* Alinea el texto al centro horizontalmente */
    text-decoration: none;
    /* Sin subrayado */
    padding: var(--size18) 0;
    /* Altura adecuada entre elementos de la lista */
    background: none;
}

.nav__link--inicio:hover {
    display: block;
    width: 100%;
    padding: var(--size18) 0;
    /* text-align: ; */
    text-decoration: none;
    background: rgba(23, 23, 26, 0.8);
}

dl, ol, ul {
    margin-bottom: 0 !important;
}

/* Alineación del icono a la izquierda */
.icon__home {
    order: -1;
    /* Cambiar el orden del ícono para moverlo a la izquierda */
    margin-right: 5px;
    /* Espacio entre icono y texto */
    color: #e4e4ed;
    /* Color inicial del icono */
}

.nav__link--menu {
    cursor: auto;
}

@font-face {
    font-family: 'Inter';
    src: url(../fonts/Inter_18pt-Medium.ttf);
    font-weight: medium;
    font-style: medium;
}

@font-face {
    font-family: 'Inter Bold';
    src: url(../fonts/Inter_18pt-Bold.ttf);
    font-weight: bold;
    font-style: medium;
}

/* Estilo del fondo y el contenedor de la imagen */
.index-body,
html {
    height: 100%;
}

.hero,
.hero-index {
    background-image: url('../img/IglesiaFachada-compressed.jpg');
    /*Ruta de la imagen*/
    background-size: cover;
    background-position: center;
    height: 100vh;
    /* Ocupa toda la pantalla */
    position: relative;
}

.hero p {
    font-size: 1.5em;
    margin-bottom: 30px;
}

/* Superposición para oscurecer la imagen */
.overlay,
.overlay-login {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-login {
    background-color: #40996dE6
}

.content-login {
    display: flex;
    flex-direction: column;
    /* Alinea los elementos en columna */
    border-radius: 15px;
    background-color: #17171a;
    height: 450px;
    width: 420px;
    align-items: center;
    /* Centra horizontalmente todo el contenido */
}

.content-login p {
    color: #e4e4ed;
}

.login-top {
    display: inline-block;
    /* Elimina el comportamiento de flexbox aquí */
    text-align: center;
    /* Asegura que el texto esté centrado horizontalmente */
    width: auto;
    /* Ajusta el ancho al contenido */
    height: auto;
    /* Ajusta la altura al contenido */
    margin-top: 20px;
    margin-bottom: 50px;
}

.login-top p {
    font-size: var(--size20);
}

.login-datos .label-input {
    padding-left: 0;
}

.login-datos input {
    margin-left: 0;
}

.login-botones {
    display: flex;
    justify-content: end;
}

.overlay {
    background-color: rgba(23, 23, 26, 0.8);
}

/* Contenido centrado */
.content-index {
    text-align: center;
    color: #e4e4ed;
    /* Color del texto */
}

h1 {
    font-size: 3em;
    margin-bottom: 20px;
}

/* Botón del CTA */
.hero button {
    background-color: #0784f2;
    /* Color del botón */
    color: #e4e4ed;
    /* Color del texto del botón */
    border: none;
    padding: 15px 30px;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

button:hover {
    background-color: #311966;
    /* Color alternativo para hover */
}

/* Estilos para la barra de navegación superior */
.top-nav {
    width: calc(100% - 300px);
    /* Ocupar el resto del ancho */
    height: 60px;
    /* Altura de la barra */
    display: flex;
    /* Usar Flexbox para alinear elementos */
    justify-content: flex-end;
    /* Alinear elementos al final (a la derecha) */
    align-items: center;
    /* Centrar verticalmente los elementos */
    padding: 0 20px;
    /* Espaciado en los lados */
    position: fixed;
    /* Fijar la barra en la parte superior */
    top: 0;
    left: 300px;
    /* Alinear en la parte superior */
    z-index: 1000;
    /* Asegúrate de que esté por encima de otros elementos */
}

.username {
    color: #e4e4ed;
    /* Color del texto */
    font-size: var(--size18);
    /* Tamaño de la fuente */
    margin-left: 10px;
    /* Espaciado entre la imagen y el nombre */
    cursor: pointer;
    padding-right: 20px;
}

/* Contenedor principal de la imagen y el nombre de usuario */
.user-profile {
    display: flex;
    /* Coloca la imagen y el texto en línea horizontal */
    align-items: center;
    /* Centra verticalmente la imagen y el texto */
    justify-content: right;
    /* Organiza los elementos a la derecha */
    width: 100%;
    /* Asegura que ocupe todo el ancho del contenedor padre */
    height: 60px;
}

/* Estilos para la imagen de perfil */
.profile-pic {
    width: 40px;
    /* Ancho de la foto de perfil */
    height: 40px;
    /* Alto de la foto de perfil */
    border-radius: 50%;
    /* Hace la imagen redonda */
    margin-right: 10px;
    /* Espacio entre la imagen y el nombre */
}

.container-inicio {
    background-color: #17171a;
    display: flex;
    /* Usamos flexbox */
    flex-direction: column;
    /* Los elementos se organizan en columna (uno debajo del otro) */
    justify-content: center;
    /* Centra verticalmente */
    align-items: center;
    /* Centra horizontalmente */
    height: 100vh;
    /* Ocupa toda la altura de la pantalla */
    text-align: center;
    /* Alinea el texto al centro */
    color: #e4e4ed;
    font-size: 32px;
}

/* Imagen centrada */
.centered-image {
    max-width: 40%;
    /* Asegura que la imagen no exceda el ancho del contenedor */
    height: auto;
    /* Mantiene la proporción de la imagen */
    margin-bottom: 0px;
    /* Espaciado debajo de la imagen */
}

/* Estilos para el texto de .content*/
.content p {
    font-size: 32px;
    /* Tamaño de fuente ajustable */
    margin: 0px 0;
    /* Margen superior e inferior */
    color: #e4e4ed;
}

/* .navbar {
    background-color: #29292e;
    width: auto;
    /* Ancho fijo de 300px 
    height: 100%;
    /* Ocupa toda la altura de la pantalla 
    padding: 0px;
} */


.navbar-2 {
    background-color: #29292e;
    width: auto;
    /* Ancho fijo de 300px */
    height: 100%;
    /* Ocupa toda la altura de la pantalla */
    padding: 0px;
}

/* .container {
    display: flex;
    height: 100vh;
    background-color: #17171a;
} */

.container-new {
    display: flex;
    height: 100vh;
    /* La altura de la pantalla completa */
    background-color: #17171a;
}

.container2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #17171a;
}

.container-in {
    display: flex;
    height: auto;
    width: 100%;
    background-color: #17171a;
}

.topnav {
    flex-direction: column;
    background-color: #29292e;
    padding: 15;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    /* Altura fija para el topnav */
    /* width: ; */
}

.container-asistencia,
.container-nuevoMiembro,
.container-datosMiembro-personal {
    display: flex;
    flex-direction: column;
    height: auto;
    width: auto;
    margin-right: 20px;
    /* background-color: #a08d71; */
}

.container-datos {
    display: flex;
    flex-direction: row;
    height: auto;
    width: auto;
    margin-right: 20px;
}

.container-nuevoMiembro-top .label-titulo {
    margin-top: 15px;
}

.container-datosMiembro-personal {
    margin-right: 50px;
    width: 350px;
}

.container-datosMiembro,
.container-datosMiembro-2 {
    display: flex;
    height: auto;
    width: auto;
    margin-right: 20px;
    /* background-color: #a08d71; */
    border-right: 2px solid #ede4e460;
}

.container-datosMiembro-2 {
    border: 0;
}

.container-asistencia-top,
.container-nuevoMiembro-top {
    display: flex;
    flex-direction: column;
    height: auto;
    /* Se ajusta al contenido */
    width: 100%;
    /* background-color: #272785; */
}

/* Contenedor principal de las tablas */
.container-asistencia-tablas {
    display: flex;
    /* Flexbox para disposición horizontal */
    flex-direction: row;
    /* Alineación horizontal */
    height: 600px;
    /* Altura fija para ambos contenedores */
    width: 100%;
    /* Toma el ancho completo disponible */
    padding-right: 5px;
}

/* Primer contenedor */
.container-asistencia-tabla-one,
.container-asistencia-tabla-two {
    display: flex;
    /* Flexbox para disposición vertical */
    flex-direction: column;
    /* Alineación vertical */
    padding-left: 20px;
    /* Espaciado interno */
    /* background-color: #1c1cc2; Color de fondo para el primer contenedor */
    flex: 1;
    /* Ocupa el mismo espacio que el segundo contenedor */
    /* min-width: max-content; Establece un ancho mínimo */
    width: max-content;

    max-height: 700px;
    /* Cambia este valor según sea necesario */
    /* overflow-y: auto;  */
}

/* Cambia el color de fondo para el segundo contenedor */
.container-asistencia-tabla-two {
    margin-right: 0px;

}


/* Primer contenedor */
.container-admin-tabla-one,
.container-admin-tabla-two {
    display: flex;
    /* Flexbox para disposición vertical */
    flex-direction: column;
    /* Alineación vertical */
    padding-left: 20px;
    /* Espaciado interno */
    /* background-color: #1c1cc2; Color de fondo para el primer contenedor */
    flex: 1;
    /* Ocupa el mismo espacio que el segundo contenedor */
    /* min-width: max-content; Establece un ancho mínimo */
    width: max-content;

    max-height: 700px;
    /* Cambia este valor según sea necesario */
    /* overflow-y: auto;  */
}

/* Cambia el color de fondo para el segundo contenedor */
.container-admin-tabla-two {
    margin-right: 0px;

}

.container-visitas {
    border-left: 2px solid #ede4e460;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    width: 100%;
    /* background-color: #7f7fe2; */
}

.container-asistencia-foot {
    margin-top: 15px;
    display: flex;
    height: auto;
    flex-direction: column;
    width: auto;
    /* background-color: #ffbb00; */
    position: relative;
}

.container-asistencia-fecha-hora {
    justify-content: center;
    align-items: center;
    display: flex;
    width: auto;
    margin-bottom: 15px;
    /* background-color: #82e27f; */
}

.container-asistencia-fecha,
.container-asistencia-hora {
    display: flex;
    flex-direction: column;
    width: 275px;
    /* background-color: #7f7fe2; */
}

/* .container-asistencia-hora{
    background-color: #8665a5;
} */


.container-asistencia-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    /* background-color: #27855e; */
    font-size: var(--size18);
    color: #e4e4ed;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 20px;
}


#texto1,
#total_asistencia,
.icon_info {
    font-weight: 700;
    /* color: #159957; */
}

#texto1 {
    padding-left: 15px;
}

#total_asistencia {
    padding-right: 15px;
}

.btn-guardar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    gap: 10px;
    /* background-color: #311966; */
}

.btn-consultaAsistencia,
.btn-consultaClases,
.btn-consultaPeriodos,
.btn-Graficas {
    background-color: #311966;
    border: 0px;
    /* color: #159957; Usa el color predeterminado */
    cursor: pointer;
    font-size: var(--size18)
}

.btn-consultaAsistencia:hover,
.btn-consultaClases:hover,
.btn-consultaPeriodos:hover {
    color: #311966 !important;
    background-color: transparent !important;
    border: none !important;
    text-decoration: none !important;
    /* Por si aplica algún estilo de subrayado */
    outline: none !important;
    /* Para evitar resaltar el borde */
}

.btn-Graficas:hover {
    color: #159957 !important;
    background-color: transparent !important;
    border: none !important;
    text-decoration: none !important;
    /* Por si aplica algún estilo de subrayado */
    outline: none !important;
    /* Para evitar resaltar el borde */
}

#btn_guardar,
#btn_eliminar,
#btn_iniciar,
#btn_actualizar {
    height: 40px;
    width: 128px;
    margin-top: 15px;
    /* Color del botón */
    color: #e4e4ed;
    /* Color del texto del botón */
    border: none;
    padding: 5px 1px;
    font-size: var(--size18);
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

#btn_home {
    height: 40px;
    width: 80px;
    margin-top: 15px;
    /* Color del botón */
    color: #e4e4ed;
    /* Color del texto del botón */
    border: none;
    padding: 5px 1px;
    font-size: var(--size18);
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    border: 2px solid #6a6a75;
    margin-right: 10px;
}

#btn_home {
    background-color: transparent;
}

#btn_home:hover {
    background-color: #6a6a75;
}

#btn_guardar,
#btn_iniciar,
#btn_actualizar {
    background-color: #0784f2;
}


#btn_guardar:hover,
#btn_eliminar:hover,
#btn_iniciar:hover,
#btn_actualizar:hover {
    background-color: #311966;
}

/* Clase para personalizar las etiquetas <label> */
.label-titulo {
    font-size: 20px;
    margin-bottom: 2px;
    /* Espacio debajo de la etiqueta */

}

/* Clase para asegurar que el label esté arriba del input */
.label-input {
    font-size: var(--size18);
    margin-bottom: 5px;
    /* Espacio entre el label y el input */
}


.label-input,
.label-titulo {
    padding-top: 10px;
    padding-left: 25px;
    margin-bottom: 10px;
    /* Separación del lado izquierdo */
    color: #e4e4ed;
    /* Color del texto */
    display: block;
    /* Para asegurar que cada etiqueta esté en su propia línea */
}

/* Contenedor del input y el icono */
.input-container {
    position: relative;
    /* Necesario para posicionar el icono dentro del input */
    width: 324px;
    /* Ajusta según el ancho deseado del input */
}

.input-DateContainer {
    position: relative;
    /* Necesario para posicionar el icono dentro del input */
    width: 250px;
    margin-bottom: 15px;
}

.input-DateContainer-Range {
    position: relative;
    /* Necesario para posicionar el icono dentro del input */
    width: 450px;
    margin-bottom: 15px;
}

/* Estilos para el icono */
.icon_form {
    position: absolute;
    right: 10px;
    /* Posiciona el icono dentro del input, alineado a la derecha */
    top: 45%;
    /* Alinea verticalmente al centro */
    transform: translateY(-40%);
    /* Ajusta la posición para centrar el icono verticalmente */
    color: #6a6a75;
    /* Color del icono */
    font-size: var(--size18);
    /* Ajusta el tamaño del icono */
    /* Ajusta el tamaño del icono */
}


.icon-limpiar {
    color: #6a6a75;
    font-size: var(--size18);

}

/* Estilo para el input */
input {
    background-color: transparent;
    /* Sin color de fondo */
    border: 2px solid #6a6a75;
    /* Borde de 2px y color #6a6a75 */
    border-radius: 5px;
    /* Radio de 5px para esquinas redondeadas */
    padding: 10px;
    padding-left: 15px;
    /* Espaciado interior izquierdo del textopara mejor apariencia */
    font-size: var(--size18);
    /* Tamaño de fuente */
    width: 324px;
    /* Ancho completo del contenedor */
    margin-left: 25px;
    /* Margen izquierdo de todo el input */
    /* margin-top: 7px; */
    /* Margen superior de todo el input */
    color: #e4e4ed;
    transition: border-color 0.2s ease;
}


.table-responsive-reporteED input {
    width: 100px;
    color: #17171a !important;
    margin-left: 0;
    border: 0;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;

}


.table-responsive-reporteED input:focus {
    color: #17171a !important;
}



.container-asistencia .container-asistencia-tablas .container-asistencia-tabla-one .input {
    margin-left: 0px;
}

/* Focus y Hover para Input e ícono */
.input-container:focus-within .icon_form,
input:focus,
.input-DateContainer:focus-within .icon_form,
.input-DateContainer-Range:focus-within .icon_form
.select2-selection__rendered:focus-within .icon_form {
    color: #e4e4ed !important;
    /* Nuevo color para el icono al enfocarse en el input */

}

input:hover {
    border-color: #e4e4ed !important;
    /* Cambia el borde cuando el mouse esté sobre el input */
    /* box-shadow: 0 0 5px #e4e4ed; Agregar un efecto de sombra similar al focus */
}

.input-Date {
    width: 100%;
    padding-right: 30px;
    /* Deja espacio para el icono */
    cursor: pointer;
}

/* Ocultar el ícono nativo del input[type="date"] */
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    /* Oculta el ícono nativo en navegadores basados en Webkit (Chrome, Safari) */
}

/* Oculta el ícono en Internet Explorer */
input[type="date"]::-ms-clear {
    display: none;
}

/* Estilo para los inputs tipo date */
input[type="date"] {
    width: 250px;
    appearance: none;
    /* Oculta los controles nativos */
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    padding-right: 40px;
    /* Deja espacio para el icono */
    font-size: var(--size18);
}

/* Estilo para el input tipo date en estado de enfoque */
input[type="date"]:focus {
    outline: none;
    /* Sin borde de enfoque por defecto */
    border-color: #e4e4ed;
    /* Cambia el color del borde al enfocarse */
}

/* Estilo para el input tipo date en estado de enfoque */
input[type="date"]:hover {
    border-color: #e4e4ed;
    /* Cambia el color del borde al enfocarse */
}


/* -------------------------------- */
/* ESTILOS PARA SELECT2 */

.select-container {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 300px;
    padding-left: 25px;
    margin-bottom: 15px;
}

/* Tamaño del contenedor, pero aplicado solo a .table-responsive-reporteED .select-container*/
.table-responsive-reporteED .select-container,
.reporteED-Selectores .select-container {
    margin-bottom: 0px;
    width: 290px;
    padding-left: 0px
}

/* Posición del ícono, pero solo aplicado a .table-responsive-reporteED .select-container .icon_form */
.table-responsive-reporteED .select-container .icon_form,
.reporteED-Selectores .select-container .icon_form {
    right: 23px;
    top: 45%;
}

.select2-selection__placeholder {
    color: #6a6a75 !important;
    /* Cambia el color del placeholder */
}

/* Elimina el borde del área de selección (donde aparece el valor seleccionado) */
.select2-container .select2-selection--single {
    border: none !important;
    /* Elimina el borde */
    box-shadow: none !important;
    /* Elimina cualquier sombra */
    border-radius: 0px !important;
    /* Asegúrate de que no haya esquinas redondeadas */
    display: flex !important;
    align-items: center !important;
}

/* Ocultar la flecha de Select2 */
.select2-selection__arrow {
    display: none !important;
    /* Oculta la flecha */
}

/* Elimina el borde al enfocar el área de selección */
.select2-container--default .select2-selection--single:focus {
    border: #e4e4ed !important;
    box-shadow: none !important;
}

/* Elimina el borde al enfocar la caja de selección */
.select2-container--default .select2-selection--single {
    background-color: transparent !important;
    /* Agregar un color de fondo causará que se vea un borde */
    /*
    Quitar comentarios si existen border o sombras
    box-shadow: none !important;
    border: 1px solid #aaa;
    border-radius: 4px; */
}

/* Cambiar el color del texto en las opciones */
.select2-results__option {
    color: #e4e4ed !important;
    /* Color del texto de las opciones */
    padding-left: 15px;
}


/* Estilo para la opción seleccionada en el menú desplegable */
.select2-results__option--selected {
    background-color: #17171a !important;
    /* Color de fondo para la opción seleccionada */
    color: #e4e4ed !important;
    /* Color del texto para la opción seleccionada */
}

/* Cambiar el color de fondo del elemento resaltado al pasar el mouse */
.select2-results__option--highlighted {
    background-color: #311966 !important;
    /* Color de fondo al pasar el mouse */
    color: #e4e4ed !important;
    /* Color del texto al pasar el mouse */
}

.select2-container .select2-selection--single .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    color: #e4e4ed !important;
    /*Color del texto de seleción, vista del Usuario*/
    padding-left: 15px !important;

}

.table-responsive-reporteED .select2-container .select2-selection--single .select2-selection__rendered {
    color: #17171a !important;
}

.select2-container--default .select2-selection--single {
    /*
    Quitar comentarios si exsten bordes o sombras
    background-color: #ffffff !important;
    border: 1px solid #aaa;
    border-radius: 4px;
    align-items: center !important; */


    height: 45px !important;
}

.select2-selection__rendered {
    display: flex !important;
    height: 45px !important;
    align-items: center !important;
    background-color: #17171a;
    /* Fondo de la vista prinical */
    height: 45px;
    /* Altura de la vista prinical */
    width: 300px;
    /* Ancho de la vista prinical */
    border-radius: 5px;
    /* Borde de la vista prinical */
    border: 2px solid #6a6a75;
    /* Grosor del borde y color de la vista principal */
}

.table-responsive-reporteED .select2-selection__rendered {
    background-color: transparent;
}

.select2-selection__rendered:hover {
    border-color: #e4e4ed !important;
    transition: background-color 0.2s ease !important;
}

/*  Efecto hover pero solo para  .table-responsive-reporteED .select2-selection__rendered:hover */
.table-responsive-reporteED .select2-selection__rendered:hover {
    border-color: #bdbcbc !important;
    transition: background-color 0.2s ease !important;
}


/* Personaliza el menú desplegable */
.select2-results {
    background-color: #29292e;
    /* Fondo del menú */
    color: #e4e4ed !important;
    /* Texto del menú */
    border: none !important;
}

.select-container .icon_form {
    right: 20px;
    top: 45%;
}

/* ----------------------------------------- */



/* -------------------------------- */
/* ESTILOS PARA TABLA */
/* ESTILOS PARA LA TABLA tbAsistencia */
.tbAsistencia {
    border-collapse: collapse;
    /* Colapsa bordes */
    margin: 25px 0;
    /* Margen superior e inferior */
    width: 500px;
    border-radius: 15px 15px 0 0;
    /* Bordes redondeados */
    overflow: hidden;
    /* Oculta desbordamiento */
    margin-left: 25px;
    /* Margen izquierdo */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    /* Sombra */

    max-height: 600px;
    /* Cambia este valor según sea necesario */
    /* overflow-y: auto; Agrega desplazamiento si el contenido es más alto que el máximo */
}

.table-responsive,
.table-responsive-asistencia,
.table-responsive-consultas {
    max-height: 600px;
    /* Cambia este valor según sea necesario */
    overflow-y: auto;
    /* Agrega desplazamiento si el contenido es más alto que el máximo */
}

.table-responsive-periodos .tbAsistencia {
    width: 980px;

}

.table-responsive-reporteED .tbAsistencia {
    width: 1500px;
}

.table-responsive {
    width: max-content;
}

.table-responsive-asistencia {
    width: 480px;
}

.table-responsive-consultas {
    width: 520px;
}


/* Encabezado de la tabla */
.tbAsistencia thead tr {
    width: auto;
    background-color: #311966;
    /* Color de fondo del encabezado */
    color: #ffffff;
    /* Color del texto del encabezado */
    text-align: left;
    /* Alineación del texto */
    font-family: 'Inter Bold', sans-serif;
    /* Negrita */
}

.total-negrita {
    font-family: 'Inter Bold', sans-serif;
}


.container-asistencia-tabla-two .tbAsistencia thead tr {
    background-color: #159957;
    /* Color de fondo del encabezado */

}

.container-admin-tabla-two .tbAsistencia thead tr {
    background-color: #159957;
    /* Color de fondo del encabezado */

}

.table-responsive-maestros .tbAsistencia thead tr {
    background-color: #159957;
    /* Color de fondo del encabezado */

}

.table-responsive-clases .tbAsistencia thead tr {
    background-color: #f2644e;
    /* Color de fondo del encabezado */

}

.table-responsive-AgregarClases .tbAsistencia thead tr {
    background-color: #f2644e;
    /* Color de fondo del encabezado */
}



/* Encabezado de la tabla */
.tbAsistencia thead {
    width: auto;
}

/* Espacio entre celdas */
.tbAsistencia th,
.tbAsistencia td,
.tbAsistencia tfoot {
    width: auto;
    padding: 12px 15px;
    /* Espaciado interno de celdas */
}

.table-responsive-reporteED .tbAsistencia th,
.table-responsive-reporteED .tbAsistencia td {
    width: auto;
    padding: 5px 15px;
    /* Espaciado interno de celdas */
}

.table-responsive-reporteED .tbAsistencia .tdCenter th {
    text-align: center !important;
}

/* Borde de separación entre celdas */
.tbAsistencia tbody tr {
    width: auto;
    border-bottom: 1px solid #ffffff;
    /* Borde inferior de las filas */

}

/* Estilos de cada celda para filas impares */
.tbAsistencia tbody tr:nth-child(odd) {
    width: auto;
    background-color: #f6f6f6;
    /* Color de fondo para filas impares */
}

.tdCenter {
    text-align: center;
}

/* Color de cada segunda celda */
.tbAsistencia tbody tr:nth-of-type(even) {
    width: auto;
    background-color: #eae2ff;
    /* Color de fondo para filas pares */
}


/* Borde final de la tabla */
.tbAsistencia tbody tr:last-of-type {
    width: auto;
    border-bottom: 2px solid #e4e4ed;
    /* Borde inferior de la última fila */
}

/* Celda activa */
.tbAsistencia tbody tr.active-row {
    width: auto;
    font-weight: bold;
    /* Negrita para fila activa */
    color: #311966;
    /* Color para fila activa */
}

/* Estilos generales para las filas */
.tbAsistencia tbody tr {
    width: auto;
    background-color: #f6f6f6;
    /* Color de fondo general */
    color: #000000;
    /* Color del texto */
}

#tablaInforme tfoot {
    background-color: #f8f9fa;
    font-family: 'Inter Bold', sans-serif;
    text-align: center;
    border-top: 2px solid #007bff;
}

#tablaInforme tfoot th {
    font-family: 'Inter Bold', sans-serif;
    padding: 10px;
    text-align: center;
    /* font-size: 14px; */
    /* color: #495057; */
}

.total-column {
    text-align: right; /* Alinear a la izquierda */
}

.total-value {
    text-align: center; /* Alinear a la derecha */
}

.dataTables_wrapper .dataTables_filter {
    float: left !important;
    text-align: left !important;
}

.dataTables_filter input {
    background-color: transparent !important;
    /* Sin color de fondo */
    border: 2px solid #6a6a75 !important;
    /* Borde de 2px y color #6a6a75 */
    border-radius: 5px !important;
    /* Radio de 5px para esquinas redondeadas */
    padding: 10px !important;
    /* Espaciado interior izquierdo del textopara mejor apariencia */
    font-size: var(--size18) !important;
    /* Tamaño de fuente */
    width: 324px !important;
    /* Ancho completo del contenedor */
    margin-top: 10px !important;
    /* Margen superior de todo el input */
    margin-bottom: 10px !important;
    color: #e4e4ed !important;
}

/* Etiqueta personalizada para el input de búsqueda */
.dataTables_filter label {
    display: block !important;
    /* Hace que la etiqueta ocupe toda la línea */
    margin-bottom: 5px !important;
    /* Espacio entre la etiqueta y el input */
}

.dataTables_filter input[type="search"]:hover {
    border-color: #e4e4ed !important;

}

.container-asistencia-tabla-one .label-input {
    padding-left: 5px;
    margin-bottom: 0px;
}

.container-asistencia-tabla-two .label-input {
    padding-left: 5px;
    margin-bottom: 0px;
}

.container-btn-limpiar {
    margin-top: 10px;
    display: flex;
    /* Activa Flexbox */
    justify-content: right;
    /* Espaciado entre los elementos: "Buscar" y el botón */
    align-items: center;
    /* Alinea los elementos verticalmente en el centro */
    width: 100%;
    /* Ancho completo del contenedor */
}

.td-agregar {
    display: flex;
    /* Utiliza flexbox para la alineación */
    justify-content: left;
    /* Centra horizontalmente */
    align-items: center;
    /* Centra verticalmente */
    height: 100%;
    /* Asegúrate de que el td tenga altura completa */
}

.btn-agregar,
.btn-remover,
#btn_limpiar,
.btn-consultaAsistencia,
.btn-consultaClases,
.btn-agregarClase,
.btn-consultaPeriodos,
.btn-Graficas {
    height: 25px;
    width: 40px;
    /* margin-top: 15px; */
    color: #e4e4ed;
    /* Color del texto del botón */
    border: none;
    padding: 0px 1px;
    font-size: var(--size18);
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

.btn-agregar,
.btn-agregarClase {
    background-color: #159957;
    /* Color del botón */
}

.btn-remover,
#btn_limpiar,
#btn_eliminar {
    background-color: #cc3f48;
    /* Color del botón */
}

.td-remover {
    display: flex;
    /* Utiliza flexbox para la alineación */
    justify-content: left;
    /* Centra horizontalmente */
    align-items: center;
    /* Centra verticalmente */
    height: 100%;
    /* Asegúrate de que el td tenga altura completa */
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: #e4e4ed !important;
}



/* PROPIEDADES PARA LA BARRA DE SCROLL */

/* WebKit (Chrome, Safari) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.row-Active {
    font-weight: bold;
}

#tablaFechas thead th {
    pointer-events: none !important;
    /* Desactiva la interactividad de los íconos */
    background-image: none !important;
    /* Elimina la imagen de fondo del ícono de ordenación */
}

#tablaInforme thead th:not(.colClass) {
    text-align: left;
}

#tablaInforme thead th:not(.text-left) {
    text-align: left;
}

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

.maestros,
.maestros-clases,
.periodos,
.reporteED,
.reporteED-in,
.maestros-in,
.periodos-in {
    display: flex;
}

/*  Importante de no borrar */
.maestros,
.maestros-clases,
.periodos {
    flex-direction: column;
}

.reporteED-in,
.reporteED {
    flex-direction: column;
}

.reporteED-in {
    justify-content: center;
    /* Centra el contenido horizontalmente */
    align-items: center;
    width: 100%;
    /* Ocupa todo el ancho */
}

.reporteED-top {
    width: 100%;
}

.maestros p,
.maestros-clases p,
.periodos p {
    color: #e4e4ed;
    padding-left: 25px;
    padding-top: 5px;
}

.maestros-rol,
.periodos-content {
    width: min-content;
    margin-right: 15px;
    padding-right: 40px;
}

.reporteED-content {
    width: min-content;
    margin-left: 25px;
    font-size: var(--size16) !important;
}


.table-responsive-rol,
.table-responsive-maestros,
.table-responsive-clases,
.table-responsive-AgregarClases {
    /* width: auto; */
    display: flex;
    flex-direction: column;
    margin-left: 0px;
    max-height: 330px;
    /* Cambia este valor según sea necesario */
    overflow-y: auto;
    /* Agrega desplazamiento si el contenido es más alto que el máximo */
}

.table-responsive-periodos {
    /* width: auto; */
    display: flex;
    flex-direction: column;
    margin-left: 25px;
    max-height: 236px;
    /* Cambia este valor según sea necesario */
    overflow-y: auto;
    /* Agrega desplazamiento si el contenido es más alto que el máximo */
}

.table-responsive-clases,
.table-responsive-AgregarClases,
.table-responsive-periodos,
.table-responsive-reporteED {
    width: min-content;
}

.table-responsive-clases {
    margin-top: 20px;
}

.maestros-clases {
    width: min-content;
}

.periodos-creacion {
    width: 500px;
}

.label-subtitulo {
    font-family: 'Inter Bold', sans-serif;
}

.maestros .label-titulo,
.periodos .label-titulo {
    margin-top: 10px;
    margin-bottom: 15px;
}

.table-responsive-AgregarClases {
    margin-top: 15px;
}

.input-calculadora.literatura,
.input-calculadora.tauro  {
    width: 60px;
}

.bold {
    font-family: 'Inter Bold', sans-serif;
}

.reporteED-Selectores {
    display: flex;
    flex-direction: row;

    gap: 20px;
}

.fecha-resaltada {
    background-color: red !important; /* Cambiar a rojo */
    color: white !important; /* Cambiar el color del texto a blanco */
    border-radius: 50%;
}

.event {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #e4e4ed; /* Color del punto */
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
}

.colClass {
    width: max-content; /* Ancho deseado */
    white-space: nowrap; /* Evitar que el contenido se divida en varias líneas */
}

#graficas-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
    max-width: 100%;
    padding: 20px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
}

#graficas-container canvas {
    max-width: 100%;
    height: auto;
}

.container-visitas .select-container,
.container-visitas .input-DateContainer,
.container-datosMiembro .select-container,
.container-datosMiembro .input-DateContainer{
    margin-bottom: 0;
}

.container-datos-in .label-titulo {
    margin-bottom: 5px;
    margin-top: 5px;
}