.conte_principal {
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 2%;
}
    .conte_principal.inscripcion { /*MOD LUIS*/
        width: 80%;
        margin-left:auto;
        margin-right:auto;
    }


/* Caja de texto con fondo sólido */
.text-box {
    background-color: #333333; /* Fondo sólido */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 100%; /* Ancho adaptable para móviles */
    float: left;
}

    /* Estilos del texto */
    .text-box h1 {
        color: #f2eada; /* Color del texto */
        font-size: 2.5rem;
        margin-bottom: 10px;
    }

    .text-box p {
        color: #f2eada; /* Color del texto */
        font-size: 1.2rem;
        margin: 0;
    }

/* Estilos personalizados para las pestañas */

.conte_pestanas {
    width: 100%;
    float: left;
}

.custom-tabs .nav-link {
    background-color: white; /* Fondo de pestañas inactivas */
    color: #333333 !important; /* Texto de pestañas inactivas */
    border: 1px solid #333333 !important; /* Borde de pestañas inactivas */
    margin-right: 5px; /* Espacio entre pestañas */
    transition: all 0.3s ease; /* Transición suave */
    border-radius: 5px 5px 0 0; /* Bordes redondeados arriba */
    width: 100%;
    margin-top: 11%;
}

    .custom-tabs .nav-link.active {
        background-color: #333333 !important; /* Fondo de pestaña activa */
        color: #f2eada !important; /* Texto de pestaña activa */
        border: 1px solid #f2eada !important; /* Borde de pestaña activa */
        margin-top: 35px;
    }

    .custom-tabs .nav-link:hover {
        background-color: #f2eada !important; /* Fondo al pasar el mouse */
        color: #333333 !important; /* Texto al pasar el mouse */
        border: 1px solid #333333 !important; /* Borde al pasar el mouse */
    }


/* Contenido de las pestañas */
.tab-content {
    background-color: white; /* Fondo del contenido */
    border-top: none; /* Eliminar borde superior */
    padding: 0px; /* Espaciado interno */
    border-radius: 0 0 5px 5px; /* Bordes redondeados solo abajo */
}

/* Estilos para la tabla */
.custom-table {
    width: 100%;
    border-collapse: collapse; /* Elimina los bordes entre celdas */
    text-align: center;
    overflow: scroll;
}

    .custom-table th,
    .custom-table td {
        padding: 12px;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .custom-table th {
        background-color: #333333;
        color: #f2eada;
        font-weight: bold;
        justify-content: center;
        align-items: center;
    }

    .custom-table tbody tr:nth-child(odd) {
        background-color: #f2eada;
        color: #333333;
    }

    .custom-table tbody tr:nth-child(even) {
        background-color: #333333;
        color: #f2eada;
    }

    /* Cambiar el color de los íconos en filas impares */
    .custom-table tbody tr:nth-child(odd) .control-btn {
        color: #333333; /* Color de los íconos en filas impares */
    }

    /* Cambiar el color de los íconos en filas pares */
    .custom-table tbody tr:nth-child(even) .control-btn {
        color: #f2eada; /* Color de los íconos en filas pares */
    }

    .custom-table tbody tr:hover {
        opacity: 0.9; /* Efecto al pasar el mouse */
    }

#dia {
    width: 50%;
}

#dia-ina {
    width: 10%;
}

#dia-mes {
    width: 10%;
}

#dia-des {
    width: 70%;
}

.dia-btn {
    width: 10%;
}

.editar_btn {
    background-color: transparent !important;
    border: none;
}

.form-control {
    border: 1px solid #333333;
    background-color: #fff;
    padding: 10px;
    margin-bottom: 15px;
}

    .form-control:focus {
        border-color: #333333;
        box-shadow: 0 0 5px rgba(51, 51, 51, 0.5);
    }

.Editar {
    background-color: #333333 !important;
    color: #f2eada !important;
    border: 1px solid #333333 !important;
    padding: 10px 20px;
    border-radius: 5px;
    transition: all 0.3s ease;
    width: 15%;
    height: 50px;
    float: right;
    font-weight: bold;
    margin-right: 10%;
    margin-bottom: 2%;
    font-size: 20px !important;
}

    .Editar:hover {
        background-color: #f2eada !important;
        color: #333333 !important;
        border: 1px solid #333333 !important;
        font-weight: bold;
    }

/* Caja de texto con fondo sólido */
.text-box-2 {
    background-color: #f2eada; /* Fondo sólido */
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    width: 20%; /* Ancho adaptable para móviles */
    float: left;
    margin-bottom: 2%;
    font-weight: bold;
    max-height: 20%;
}

#completo {
    width: 100%;
}

.text-box-gra {
    background-color: #f2eada; /* Fondo sólido */
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    width: 40%; /* Ancho adaptable para móviles */
    float: left;
    margin-bottom: 2%;
    font-weight: bold;
    max-height: 20%;
}

.text-box-pequeño {
    background-color: #333333; /* Fondo sólido */
    padding: 0px;
    border-radius: 10px;
    text-align: center;
    width: 60%; /* Ancho adaptable para móviles */
    float: left;
    margin-bottom: 2%;
    font-size: 20px;
    padding-top: 1%;
    color: #f2eada;
}

/* Estilos del texto */
.text-box-2 h1 {
    color: #333333; /* Color del texto */
    font-size: 20px;
    margin-bottom: 10px;
}

.text-box-2 p {
    color: #333333; /* Color del texto */
    font-size: 20px;
    margin: 0;
}

.cuadro_controles {
    width: 100%;
}

.Dia-A {
    width: 25%;
    float: left;
    padding: 2%;
}

.Dia-M {
    width: 25%;
    float: left;
    padding: 2%;
}

.Dia-D {
    width: 40%;
    float: left;
    padding: 2%;
}


.bot {
    width: 100%;
    float: right;
    margin-bottom: 10px;
    margin-left: 60%;
}
/* Media Queries para tabletas */

/* Estilos para SweetAlert2 */
.custom-confirm-button {
    background-color: #333333 !important;
    color: #f2eada !important;
    border: 1px solid #333333 !important;
}

    .custom-confirm-button:hover {
        background-color: #f2eada !important;
        color: #333333 !important;
        border: 1px solid #333333 !important;
    }

.custom-cancel-button {
    background-color: #d33 !important;
    color: white !important;
    border: 1px solid #d33 !important;
}

    .custom-cancel-button:hover {
        background-color: #f2eada !important;
        color: #d33 !important;
        border: 1px solid #d33 !important;
    }
/* fin Estilos para SweetAlert2 */

/* Estilos personalizados para el toast */
#custom-toast-container {
    position: fixed;
    top: 10px;
    right: 20px;
    max-width: 500px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 8%;
    font-size: 40px;
    min-height: 60px;
}

/* Base styles for custom toasts */
.custom-toast {
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    opacity: 1;
    transition: opacity 0.3s, transform 0.3s;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
}

    /* Styles for specific toast types */
    .custom-toast.success {
        background-color: #333333;
        color: #f2eada;
        border: solid;
        border-color: #f2eada;
    }

.cerrarToast {
    background-color: transparent;
    margin-left: 2%;
    border: none;
    color: #F2eada;
}

.dt-input {
    color: #f2eada !important;
    background-color: #333333 !important;
}

.form-control.text-box {
    background-color: #f2eada !important;
    color: #333333 !important;
    border: solid !important;
    border-color: #333333;
    height: 40px;
    margin-top: 5px;
}
    .form-control.text-box.inscripcion-box { /*MOD LUIS*/
        max-width: none;
        margin-bottom: 5px;
    }

    .form-control {
        background-color: #f2eada !important;
        color: #333333 !important;
        border: solid !important;
        border-color: #333333;
        height: 40px;
        margin-top: 5px;
    }
        .form-control.inscripcion-box { /*MOD LUIS*/
            max-width: none;
        }

.FIle {
    color: #333333 !important;
}


#habilitado {
    margin-top: 15px;
}

.dt-column-order {
    color: #f2eada !important;
}

.dt-input {
    background-color: #f2eada !important;
    color: #333333 !important;
    border: solid !important;
    border-color: #333333;
}

label {
    background-color: #f2eada !important; /* Color de fondo */
    color: #333333 !important; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografía moderna */
    font-size: 14px; /* Tamaño de fuente */
    font-weight: 500; /* Grosor de la fuente */
    text-transform: uppercase; /* Convertir texto a mayúsculas */
    letter-spacing: 1px; /* Espaciado entre letras */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra suave */
    transition: all 0.3s ease; /* Transición suave para efectos */
    display: inline-block; /* Asegura que el padding funcione correctamente */
    cursor: pointer; /* Cambia el cursor al pasar sobre la etiqueta */
    margin-left: 10px;
    margin-right: 10px;
}

    /* Efecto hover para interactividad */
    label:hover {
        background-color: #e0e0e0 !important; /* Cambia el color de fondo al pasar el cursor */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
        transform: translateY(-2px); /* Efecto de levantar ligeramente */
    }

    /* Efecto activo (al hacer clic) */
    label:active {
        transform: translateY(0); /* Vuelve a su posición original */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra inicial */
    }

.dt-info {
    background-color: #f2eada !important; /* Color de fondo */
    color: #333333 !important; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografía moderna */
    font-size: 14px; /* Tamaño de fuente */
    font-weight: 500; /* Grosor de la fuente */
    text-transform: uppercase; /* Convertir texto a mayúsculas */
    letter-spacing: 1px; /* Espaciado entre letras */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra suave */
    transition: all 0.3s ease; /* Transición suave para efectos */
    display: inline-block; /* Asegura que el padding funcione correctamente */
    cursor: pointer; /* Cambia el cursor al pasar sobre la etiqueta */
    margin-left: 10px;
    margin-right: 10px;
}

/* Estilo base del botón */
.dt-paging-button.current {
    background-color: #f2f2f2; /* Color de fondo */
    color: #7C7C7C; /* Color del texto */
    border: none; /* Sin borde */
    padding: 10px 15px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografía moderna */
    font-size: 14px; /* Tamaño de fuente */
    font-weight: 500; /* Grosor de la fuente */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: all 0.3s ease; /* Transición suave para efectos */
}

    /* Efecto hover para cambiar el color del texto */
    .dt-paging-button.current:hover {
        color: #333333; /* Cambia el color del texto al pasar el cursor */
        background-color: #e0e0e0; /* Cambia el color de fondo al pasar el cursor */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
        transform: translateY(-2px); /* Efecto de levantar ligeramente */
    }

    /* Efecto activo (al hacer clic) */
    .dt-paging-button.current:active {
        transform: translateY(0); /* Vuelve a su posición original */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra inicial */
        color: #333333; /* Vuelve al color original del texto */
    }


.current {
    background-color: #333333 !important; /* Fondo oscuro */
    color: #f2eada; /* Texto claro */
    border: 1px solid #333333 !important; /* Borde del mismo color que el fondo */
    font-size: 20px; /* Tamaño de fuente */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 25px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: all 0.3s ease; /* Transición suave para efectos */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

    .current:hover {
        background-color: #f2eada !important; /* Fondo claro al pasar el cursor */
        color: #333333 !important; /* Texto oscuro al pasar el cursor */
        border: 1px solid #333333 !important; /* Borde oscuro */
        font-weight: bold; /* Texto en negrita */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
        transform: translateY(-2px); /* Efecto de levantar ligeramente */
    }

    .current:active {
        transform: translateY(0); /* Vuelve a su posición original al hacer clic */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra inicial */
    }

.control-label2 {
    background-color: #f2eada !important; /* Color de fondo */
    color: #f2f2f2 !important; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografía moderna */
    font-size: 14px; /* Tamaño de fuente */
    font-weight: 500; /* Grosor de la fuente */
    text-transform: uppercase; /* Convertir texto a mayúsculas */
    letter-spacing: 1px; /* Espaciado entre letras */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra suave */
    transition: all 0.3s ease; /* Transición suave para efectos */
    display: inline-block; /* Asegura que el padding funcione correctamente */
    margin-left: 10px;
    cursor: default;
    margin-right: 10px;
}

.control-label {
    background-color: #333333 !important; /* Color de fondo */
    color: #F2eada !important; /* Color del texto */
    padding: 15px 25px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografía moderna */
    font-size: 14px; /* Tamaño de fuente */
    font-weight: 500; /* Grosor de la fuente */
    text-transform: uppercase; /* Convertir texto a mayúsculas */
    letter-spacing: 1px; /* Espaciado entre letras */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra suave */
    transition: all 0.3s ease; /* Transición suave para efectos */
    display: inline-block; /* Asegura que el padding funcione correctamente */
    cursor: default;
    margin-left: 10px;
    margin-right: 10px;
}

    /* Efecto hover para interactividad */
    .control-label:hover {
        background-color: #333333 !important; /* Cambia el color de fondo al pasar el cursor */
        box-shadow: 0 0px 0px rgba(0, 0, 0, 0); /* Sombra más pronunciada */
        transform: translateY(0px); /* Efecto de levantar ligeramente */
    }

.btn.btn-success {
    background-color: #333333 !important;
    color: #f2eada !important; /* Cambia el color del ícono a #7C7C7C */
    cursor: pointer; /* Opcional: Cambia el cursor a pointer para indicar que es clickeable */
    transition: color 0.3s; /* Opcional: Agrega una transición suave al cambiar el color */
    border-color: #7C7C7C !important;
}

    /* Opcional: Cambiar el color al pasar el cursor sobre el ícono */
    .btn.btn-success:hover {
        background-color: #f2eada !important;
        color: #333333 !important; /* Cambia el color al pasar el cursor */
        border-color: #333333 !important;
        border: solid !important;
    }

.modal-header {
    background-color: #333333 !important; /* Fondo claro al pasar el cursor */
    color: #f2eada !important; /* Texto oscuro al pasar el cursor */
}

.modal .modal-header .modal-title {
    font-weight: 500;
    font-size: 1.3rem;
    color: #FFF !important;
    font-size: 20px; /* Tamaño de fuente */
}

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

.card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: inherit; /* Usa el color heredado del contenedor */
}

.card-wrapper {
    perspective: 1000px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: block;
}

@media (max-width: 768px) {
    .text-box h1 {
        font-size: 2rem; /* Tamaño de fuente más pequeño para tabletas */
    }

    .text-box p {
        font-size: 1rem; /* Tamaño de fuente más pequeño para tabletas */
    }
}

/* Media Queries para celulares */
@media (max-width: 480px) {
    .text-box h1 {
        font-size: 1.5rem; /* Tamaño de fuente más pequeño para celulares */
    }

    .text-box p {
        font-size: 0.9rem; /* Tamaño de fuente más pequeño para celulares */
    }

    .text-box {
        padding: 15px; /* Menos padding para celulares */
    }

    .custom-tabs .nav-link {
        font-size: 0.9rem; /* Tamaño de fuente más pequeño para celulares */
    }
}