/* ==========================================================
   DataTables - Tema Institucional
==========================================================*/

/* Contenedor */

.dt-container {
    color: var(--color-text);
    font-size: .95rem;
}

/* Layout superior */

.dt-layout-row {
    margin-bottom: 1rem;
    align-items: center;
}

/* Selector de registros */

.dt-length label {
    font-weight: 500;
    color: var(--color-text);
}

.dt-length select {
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    padding: .35rem 2rem .35rem .75rem;
    min-width: 80px;
    transition: .2s;
}

.dt-length select:focus {
    border-color: var(--color-main);
    box-shadow: 0 0 0 .2rem rgba(111,44,145,.15);
    outline: none;
}

/* Buscador */

.dt-search label {
    font-weight: 500;
    color: var(--color-text);
}

.dt-search input {
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    padding: .5rem .75rem;
    min-width: 280px;
    transition: all .2s ease;
}

.dt-search input:focus {
    border-color: var(--color-main);
    box-shadow: 0 0 0 .2rem rgba(111,44,145,.15);
    outline: none;
}

/* Información */

.dt-info {
    color: var(--color-muted);
    font-size: .9rem;
    padding-top: .75rem;
}

/* ==========================================================
   Botones
==========================================================*/

.dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.dt-button,
button.dt-button {
    border: none !important;
    border-radius: .5rem !important;
    padding: .45rem .9rem !important;
    font-size: .9rem;
    font-weight: 500;
    transition: .25s;
    color: #fff !important;
}

/* Copiar */

.dt-button.buttons-copy {
    background: #0d6efd !important;
}

/* Excel */

.dt-button.buttons-excel {
    background: #198754 !important;
}

/* PDF */

.dt-button.buttons-pdf {
    background: #dc3545 !important;
}

/* Imprimir */

.dt-button.buttons-print {
    background: var(--color-main) !important;
}

/* Hover */

.dt-button:hover {
    opacity: .90;
    transform: translateY(-1px);
}

/* ==========================================================
   Tabla
==========================================================*/

table.dataTable {
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    overflow: hidden;
}

table.dataTable thead th {
    background: var(--color-main);
    color: var(--chiapas-magenta);
    border: none;
    font-weight: 600;
    white-space: nowrap;
}

table.dataTable thead th:hover {
    background: var(--color-main-dark);
}

table.dataTable tbody td {
    vertical-align: middle;
}

table.dataTable tbody tr {
    transition: background .15s;
}

table.dataTable tbody tr:hover {
    background: var(--color-main-light);
}

/* Filas alternadas */

table.dataTable.stripe tbody tr:nth-child(even) {
    background: #fafafa;
}

/* Ordenamiento */

table.dataTable thead .dt-orderable-asc:hover,
table.dataTable thead .dt-orderable-desc:hover {
    background: var(--chiapas-verde);
    color:white;
}

/* ==========================================================
   Paginación
==========================================================*/

.dt-paging {
    margin-top: .75rem;
}

.dt-paging .pagination {
    gap: .25rem;
}

.dt-paging .page-link {
    border: none;
    border-radius: .5rem;
    min-width: 38px;
    color: var(--chiapas-magenta);
    transition: .2s;
}

.dt-paging .page-link:hover {
    background: var(--color-main-light);
    color: var(--color-main-dark);
}

.dt-paging .page-item.active .page-link {
    background: var(--chiapas-verde);
    color: #fff;
}

.dt-paging .page-item.disabled .page-link {
    opacity: .5;
}

/* ==========================================================
   Processing
==========================================================*/

div.dt-processing {
    background: #fff;
    border-radius: .75rem;
    border: 1px solid var(--color-border);
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
    padding: 1rem;
}

/* ==========================================================
   Responsive
==========================================================*/

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
    background: var(--color-main);
    border: none;
}

/* ==========================================================
   Scroll
==========================================================*/

.dataTables_scrollBody::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: var(--color-main);
    border-radius: 20px;
}

.dataTables_scrollBody::-webkit-scrollbar-track {
    background: #f5f5f5;
}


.btn-group .btn{

    min-width:52px;

    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

}

.btn-group .btn i{

    font-size:1.15rem;

}