/* DataTables Custom Styles - Paleta de Grises */

/* ===== MODO CLARO ===== */

/* Botones DataTables - Todos en gris slate */
.dt-button,
.dt-buttons .dt-button,
.buttons-copy,
.buttons-csv,
.buttons-excel,
.buttons-pdf,
.buttons-print,
button.dt-button,
a.dt-button {
    background-color: #64748b !important;
    background-image: none !important;
    background: #64748b !important;
    color: #ffffff !important;
    border: 1px solid #475569 !important;
    box-shadow: none !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dt-button:hover,
.dt-buttons .dt-button:hover,
.buttons-copy:hover,
.buttons-csv:hover,
.buttons-excel:hover,
.buttons-pdf:hover,
.buttons-print:hover,
button.dt-button:hover,
a.dt-button:hover {
    background-color: #475569 !important;
    background-image: none !important;
    background: #475569 !important;
    color: #ffffff !important;
    border-color: #334155 !important;
    box-shadow: none !important;
}

.dt-button:active,
button.dt-button:active,
a.dt-button:active {
    background-color: #334155 !important;
    background-image: none !important;
    background: #334155 !important;
    box-shadow: none !important;
}

/* Botones de paginación - Sobrescribir estilos azules de DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li span {
    background-color: #f3f4f6 !important;
    background-image: none !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.active a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.active span {
    background-color: #64748b !important;
    background-image: none !important;
    background: #64748b !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li a:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li span:hover {
    background-color: #e5e7eb !important;
    background-image: none !important;
    background: #e5e7eb !important;
    color: #1f2937 !important;
    border-color: #9ca3af !important;
}

/* Eliminar cualquier color azul residual */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    background-color: #f9fafb !important;
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
}

/* Contenedores de controles DataTables */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    background-color: transparent !important;
}

/* ===== MODO OSCURO ===== */

/* Contenedores en dark mode */
.dark .dataTables_wrapper,
.dark .dataTables_wrapper .dataTables_length,
.dark .dataTables_wrapper .dataTables_filter,
.dark .dataTables_wrapper .dataTables_info,
.dark .dataTables_wrapper .dataTables_paginate,
.dark .dt-top-controls,
.dark .dt-bottom-controls,
.dark .dt-table-wrapper,
.dark .dt-length-search,
.dark .dt-length,
.dark .dt-search,
.dark .dt-buttons-wrapper,
.dark .dt-info,
.dark .dt-pagination,
.dark div.dataTables_wrapper div.dataTables_info,
.dark div.dataTables_wrapper div.dataTables_paginate {
    background-color: transparent !important;
    background: transparent !important;
}

/* Texto de info en dark mode */
.dark .dataTables_wrapper .dataTables_info,
.dark .dt-info {
    color: #9ca3af !important;
}

/* Eliminar cualquier fondo blanco dentro de DataTables en dark mode */
.dark .dataTables_wrapper > div,
.dark .dataTables_wrapper > div > div {
    background-color: transparent !important;
    background: transparent !important;
}

/* Asegurar que ningún elemento de DataTables tenga fondo blanco */
.dark .dataTables_wrapper * {
    background-image: none !important;
}

.dark table.dataTable {
    background-color: transparent !important;
}

/* Botones DataTables en dark mode */
.dark .dt-button,
.dark .dt-buttons .dt-button,
.dark .buttons-copy,
.dark .buttons-csv,
.dark .buttons-excel,
.dark .buttons-pdf,
.dark .buttons-print,
.dark button.dt-button,
.dark a.dt-button {
    background-color: #475569 !important;
    background-image: none !important;
    background: #475569 !important;
    color: #f3f4f6 !important;
    border: 1px solid #64748b !important;
    box-shadow: none !important;
}

.dark .dt-button:hover,
.dark .dt-buttons .dt-button:hover,
.dark .buttons-copy:hover,
.dark .buttons-csv:hover,
.dark .buttons-excel:hover,
.dark .buttons-pdf:hover,
.dark .buttons-print:hover,
.dark button.dt-button:hover,
.dark a.dt-button:hover {
    background-color: #334155 !important;
    background-image: none !important;
    background: #334155 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
    box-shadow: none !important;
}

.dark .dt-button:active,
.dark button.dt-button:active,
.dark a.dt-button:active {
    background-color: #1e293b !important;
    background-image: none !important;
    background: #1e293b !important;
    box-shadow: none !important;
}

/* Botones de paginación en dark mode - Sobrescribir estilos azules */
.dark .dataTables_wrapper .dataTables_paginate .paginate_button,
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.next,
.dark div.dataTables_wrapper div.dataTables_paginate ul.pagination li a,
.dark div.dataTables_wrapper div.dataTables_paginate ul.pagination li span {
    background-color: #1f2937 !important;
    background-image: none !important;
    background: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
    border: 1px solid #374151 !important;
}

.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dark div.dataTables_wrapper div.dataTables_paginate ul.pagination li.active a,
.dark div.dataTables_wrapper div.dataTables_paginate ul.pagination li.active span {
    background-color: #475569 !important;
    background-image: none !important;
    background: #475569 !important;
    color: #ffffff !important;
    border-color: #64748b !important;
}

.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dark div.dataTables_wrapper div.dataTables_paginate ul.pagination li a:hover,
.dark div.dataTables_wrapper div.dataTables_paginate ul.pagination li span:hover {
    background-color: #374151 !important;
    background-image: none !important;
    background: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #475569 !important;
}

/* Eliminar cualquier color azul residual en dark mode */
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    background-color: #111827 !important;
    color: #6b7280 !important;
    border-color: #374151 !important;
}