:root{
    --colorOblig: rgb(134, 18, 18);
    --gray: #686363;
}
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body{
    line-height: 1.8;
}
a {
    text-decoration: none;
}
textarea{
    resize: none;
    border-radius: 5px;
    border: unset;
    border: 1px solid #b4b4b4;
    color: #5f5f5f;
    height: 8rem;
}

.formulario{
    margin-top: 5rem;
    display: grid;
    grid-gap: 1rem;
}

.formulario__boton{
    height: 2.5rem;
    width: 10rem;
    margin: 0 auto;
}

.formulario__previa{
    font-size: .8rem;
    color: #5f5f5f;
}

.formulario__campo{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-with: 768px){
    .formulario__campo{
        flex-direction: row;
        align-items: flex-start;
    }
}

.formulario__label span{
    display: block;
    font-size: .8rem;
    color: #5f5f5f;
}

.txt_descripcion{
    font-size: 13px;
    margin: 0;
}
.ayuda{
    color: var(--gray);
    font-size: .9rem;
    margin: 0;
}
.obligatorio{
    color: var(--red);
    font-size: .9rem;
}

.d-inline{
    display: inline;
    font-size: 1rem;
}
.m0auto{
    margin: 0 auto;
}
.fs-7{
    font-size: .68rem;
}

.table thead th{
    border: none;
    background-color: #d1ecf0;
}

.bg-azul-claro{
    background-color: #d1ecf0;
}
.bg-gris{
    background-color: #97a2ad;
}
.bg-azul-uaslp{
    background-color: #1B3257;
}
.text-azul-uaslp{
    color: #1B3257;
}
.bg-azul2{
    background-color: #337ab7;
}
.ggap-1{
    gap: 1rem;
}
.bg-lightred{
    background-color: #f1d6d6;
}

/*Data tables de asesores*/
.hidden{
    visibility: hidden;
}
.hide{
    display: none;
}
.icon-blue{
    color: #00659D;
}
.icon-green{
    color: #1e4620  ;
}
.icon-red{
    color: var(--colorOblig);
}
.icon-white{
    color: white;
}
.icon-white:hover{
    color: white;
}
.m-top{
    margin-top: 10rem;
}

.fs-8{
    font-size: 0.8rem;
}
.fs-small{
    font-size: 0.9rem;
}
.fs-95{
    font-size: 0.95rem;
}
.tabla-solicitudes .btn-link{
    padding: 0rem;
    font-size: .9rem;
    color: #1B3257;
    text-align: left;
}

#solicitudes_info, #solicitudes_paginate, #solicitudes-proceso_info, #solicitudes-proceso_paginate{
    margin-top: 1rem;
    font-size: .9rem;
}
#solicitudes_filter, #solicitudes_length, #solicitudes-proceso_filter, #solicitudes-proceso_length{
    margin-bottom: .7rem;
}

/********Cambiar Brose de un input file */
.input_container input[type=file]{
    width: 100%;
    border: 1px solid #ccc;
    border-radius: .2rem;
    font-size: .9rem;
}
.input_container input[type=file]::file-selector-button {
    background-color: #fff;
    color: #000;
    border: 0px;
    border-right: 1px solid #e5e5e5;
    padding: 10px 15px;
    margin-right: 20px;
    transition: .5s;
    color: gray;
}
.input_container input[type=file]::file-selector-button:hover {
    background-color: #eee;
    border: 0px;
    border-right: 1px solid #e5e5e5;
}

/**Estilos para el select option del plugin select2*/
.select2-container{
    font-size: 0.8rem;
    max-width: 100%;
    width: 100%!important;
} 
  .select2.select2-container .select2-selection {
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: 34px;
    margin-bottom: 15px;
    outline: none !important;
    transition: all .15s ease-in-out;
  }
  
  .select2.select2-container .select2-selection .select2-selection__rendered {
    color: #333;
    line-height: 32px;
    padding-right: 33px;
  }
  
  .select2.select2-container .select2-selection .select2-selection__arrow {
    background: #f8f8f8;
    border-left: 1px solid #ccc;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
    height: 32px;
    width: 33px;
  }
  
  .select2.select2-container.select2-container--open .select2-selection.select2-selection--single {
    background: #f8f8f8;
  }
  
  .select2.select2-container.select2-container--open .select2-selection.select2-selection--single .select2-selection__arrow {
    -webkit-border-radius: 0 3px 0 0;
    -moz-border-radius: 0 3px 0 0;
    border-radius: 0 3px 0 0;
  }
  
  .select2.select2-container.select2-container--open .select2-selection.select2-selection--multiple {
    border: 1px solid #34495e;
  }
  
  .select2.select2-container .select2-selection--multiple {
    height: auto;
    min-height: 34px;
  }
  
  .select2.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 0;
    height: 32px;
  }
  
  .select2.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: block;
    padding: 0 4px;
    line-height: 29px;
  }
  
  .select2.select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 4px 4px 0 0;
    padding: 0 6px 0 22px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    position: relative;
  }
  
  .select2.select2-container .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    margin: 0;
    text-align: center;
    color: #e74c3c;
    font-weight: bold;
    font-size: 16px;
  }
  
  .select2-container .select2-dropdown {
    background: transparent;
    border: none;
    margin-top: -5px;
  }
  
  .select2-container .select2-dropdown .select2-search {
    padding: 0;
  }
  
  .select2-container .select2-dropdown .select2-search input {
    outline: none !important;
    border: 1px solid #34495e !important;
    border-bottom: none !important;
    padding: 4px 6px !important;
  }
  
  .select2-container .select2-dropdown .select2-results {
    padding: 0;
  }
  
  .select2-container .select2-dropdown .select2-results ul {
    background: #fff;
    border: 1px solid #34495e;
  }
  
  .select2-container .select2-dropdown .select2-results ul .select2-results__option--highlighted[aria-selected] {
    background-color: #3498db;
  }

    @media (min-width: 992px) {
        .modal-size-60 {
        max-width: 60%;
        }
    }
    @media (min-width: 992px) {
        .modal-size-50 {
        max-width: 50%;
        }
    }
    @media (min-width: 992px) {
        .modal-size-70 {
        max-width: 70%;
        }
    }

    .spinner {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: conic-gradient(#0000 10%,#1b3257);
        -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 6.4px),#000 0);
        animation: spinner-zp9dbg 1s infinite linear;
    }
    
    @keyframes spinner-zp9dbg {
        to {
        transform: rotate(1turn);
        }
    }

    .popover {
        max-width: 530px;
        width: 410px;
    }

    /*DataTables*/
    /* ------------------ Estilos Generales ------------------ */
    table.dataTable th {
        font-size: 1.1rem; /* Aumentamos el tamaño de fuente */
        background-color: #003F5F; /* Azul institucional */
        color: #FFFFFF; /* Blanco para el texto */
        text-align: center;
        padding: 0.5rem 1rem;
        font-weight: 500;
    }

    table.dataTable tbody tr td {
        text-align: center;
        padding: 0.8rem;
        color: #333333; /* Gris oscuro para el texto */
        font-size: 1rem;
        font-weight: 400;
    }

    table.dataTable td {
        font-size: 1rem;
    }

    /* ------------------ Encabezados ------------------ */
    table.dataTable thead tr th {
        background-color: #003F5F;
        color: #FFFFFF;
        font-size: 1.1rem;
        font-weight: 600;
        text-align: center;
        padding: 0.8rem;
    }

    table.dataTable tbody tr td {
        background-color: #F5F5F5; /* Fondo gris suave */
        border-bottom: 1px solid #D1D3D8; /* Delimitación sutil entre filas */
    }

    table.dataTable tbody tr:hover {
        background-color: #00A9E0; /* Azul claro al pasar el mouse */
        color: #FFFFFF;
    }

    /* ------------------ Ordenamiento ------------------ */
    table.dataTable thead > tr > th.sorting_asc,
    table.dataTable thead > tr > th.sorting_desc,
    table.dataTable thead > tr > th.sorting,
    table.dataTable thead > tr > td.sorting_asc,
    table.dataTable thead > tr > td.sorting_desc,
    table.dataTable thead > tr > td.sorting {
        padding: 12px; /* Espaciado extra para las flechas de ordenamiento */
        cursor: pointer;
    }

    /* ------------------ Controles de paginación, búsqueda, etc. ------------------ */
    /* ------------------ Controles de paginación, búsqueda, etc. ------------------ */
    .dataTables_paginate,
    .dataTables_info,
    .dataTables_length,
    .dataTables_filter {
        font-size: 1rem;
        margin-top: 1rem;
        color: #003F5F; /* Azul oscuro para los controles */
    }

    .dataTables_paginate > span > a,
    .dataTables_paginate > a {
        background-color: #d7f0f8;
        /*Azulclaroparaelfondo*/color: #FFFFFF;
        padding: 6px 12px;
        border-radius: 4px;
        margin: 0 4px;
        transition: background-color 0.3s ease, transform 0.2s ease;
        -webkit-transition: background-color 0.3s ease, transform 0.2s ease;
        -moz-transition: background-color 0.3s ease, transform 0.2s ease;
        -ms-transition: background-color 0.3s ease, transform 0.2s ease;
        -o-transition: background-color 0.3s ease, transform 0.2s ease;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
}

    .dataTables_paginate > span > a:hover,
    .dataTables_paginate > a:hover {
        background-color: #007BB5; /* Azul más oscuro para el hover */
        transform: scale(1.1); /* Efecto de "zoom" al hacer hover */
    }

    .dataTables_info {
        font-weight: 300;
        color: #333333;
    }

    /* ------------------ Resaltar filas seleccionadas ------------------ */
    /* Opción: Si deseas cambiar el borde de la fila seleccionada */
    table.dataTable tr.selected td {
        background-color: #cfe4ee;
    }

    