/*
 * Dark Mode Styles for BlockWMS
 * Toggle con localStorage para persistencia
 */

/* Variables y estilos base
   Paleta de colores dark mode mejorada:
   - #0a0c12: Fondo principal del body (el más oscuro)
   - #1a1d2e: Menú lateral / sidebar
   - #13151c: Contenido principal / área de trabajo (más oscuro que contenedores)
   - #2d3347: Contenedores #DEDFCE (cards, paneles, destacados) - MÁS CLARO para destacar
   - #252a3a: Inputs y formularios
   - #2e3347: Hover/selección, elementos destacados
   - #3a3f55: Bordes y separadores
   - #e94560: Color de acento
*/
body.dark-mode {
  background: #0a0c12 !important;
  color: #eaeaea !important;
}

body.dark-mode #body_header {
  background-color: #1a1d2e !important;
  border-bottom: 1px solid #3a3f55 !important;
}

/* Fondos de tablas principales */
body.dark-mode td[background*="back_page1.gif"],
body.dark-mode table[background*="back_page1.gif"],
body.dark-mode tr[background*="back_page1.gif"] {
  background: #13151c !important;
  background-image: none !important;
}

body.dark-mode #content {
  background-color: #13151c !important;
}

/* Tabla principal dentro de content */
body.dark-mode #content > table {
  background-color: #13151c !important;
}

body.dark-mode #content > table > tbody > tr > td {
  background-color: #13151c !important;
  background-image: none !important;
}

/* ========================================
   MENU LATERAL - Configuración de color
   ========================================
   NOTA: Para cambiar el color del menú, modificar solo la variable --menu-bg-color
   Color actual: #1a1d2e (azulado oscuro)
   ======================================== */
body.dark-mode {
  --menu-bg-color: #1a1d2e;
  --menu-active-color: #2e3347;
}

/* Contenedor principal del menú */
body.dark-mode #tdMenu,
body.dark-mode #tdMenu > table,
body.dark-mode #tdMenu > table > tbody,
body.dark-mode #tdMenu > table > tbody > tr,
body.dark-mode #tdMenu > table > tbody > tr > td {
  background: var(--menu-bg-color) !important;
  background-color: var(--menu-bg-color) !important;
  background-image: none !important;
  border-right: 1px solid #3a3f55 !important;
}

/* Todas las tablas dentro del menú */
body.dark-mode #tdMenu table,
body.dark-mode #tdMenu table * {
  background-color: var(--menu-bg-color) !important;
}

/* Todas las celdas del menú */
body.dark-mode #tdMenu td,
body.dark-mode #tdMenu th,
body.dark-mode #tdMenu tr {
  background-color: var(--menu-bg-color) !important;
}

/* Enlaces del menú */
body.dark-mode #tdMenu a,
body.dark-mode #tdMenu .menumadre,
body.dark-mode #tdMenu a:link,
body.dark-mode #tdMenu a:visited {
  color: #eaeaea !important;
}

/* Items activos/seleccionados en el menú */
body.dark-mode #tdMenu td.selected,
body.dark-mode #tdMenu tr.selected,
body.dark-mode #tdMenu .selected,
body.dark-mode #tdMenu td.active,
body.dark-mode #tdMenu tr.active {
  background-color: var(--menu-active-color) !important;
  border-left: 3px solid #e94560 !important;
}

/* Hover en items del menú */
body.dark-mode #tdMenu td:hover,
body.dark-mode #tdMenu a:hover {
  background-color: var(--menu-active-color) !important;
}

/* Header barra superior */
body.dark-mode tr[bgcolor="#F2F2F2"],
body.dark-mode td[bgcolor="#F2F2F2"],
body.dark-mode #headerTable {
  background-color: #1a1d2e !important;
}

body.dark-mode tr[bgcolor="#F2F2F2"] td {
  background-color: #1a1d2e !important;
}

/* ========================================
   TABLAS Y LISTADOS (tablageneral, tablalistado)
   ======================================== */
body.dark-mode .tablageneral,
body.dark-mode .tablalistado,
body.dark-mode table.tablageneral,
body.dark-mode table.tablalistado {
  background-color: #13151c !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
}

body.dark-mode table.tablageneral td,
body.dark-mode table.tablalistado td,
body.dark-mode table.tablageneral th,
body.dark-mode table.tablalistado th {
  background-color: #1e2230 !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
}

/* Filas alternadas en tablas generales */
body.dark-mode table.tablageneral tr:nth-child(odd) td,
body.dark-mode table.tablalistado tr:nth-child(odd) td {
  background-color: #1e2230 !important;
}

body.dark-mode table.tablageneral tr:nth-child(even) td,
body.dark-mode table.tablalistado tr:nth-child(even) td {
  background-color: #252a3a !important;
}

/* Hover en filas - color sombreado delicado manteniendo color de texto */
body.dark-mode table.tablageneral tr:hover td,
body.dark-mode table.tablalistado tr:hover td {
/*   background-color: #32384d !important;
 */  color: #eaeaea !important;
}

/* ========================================
   PANELES Y CARDS - Mejor jerarquía
   ======================================== */
body.dark-mode .panel,
body.dark-mode .panel-default,
body.dark-mode .panel-body {
  background-color: #1e2130 !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .panel-heading {
  background-color: #2e3347 !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
  border-bottom: 1px solid #3a3f55 !important;
}

/* Bootstrap Cards */
body.dark-mode .card {
  background-color: #1e2130 !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .card-body {
  background-color: #1e2130 !important;
  color: #eaeaea !important;
}

body.dark-mode .card-body[style*="background-color:#EFEBDF"],
body.dark-mode .card-body[style*="background-color: #EFEBDF"] {
  background-color: #1e2130 !important;
}

body.dark-mode .card-header {
  background-color: #2e3347 !important;
  color: #eaeaea !important;
  border-bottom: 1px solid #3a3f55 !important;
}

body.dark-mode .card-header[style*="background-color:#CECFBD"],
body.dark-mode .card-header[style*="background-color: #CECFBD"] {
  background-color: #2e3347 !important;
}

body.dark-mode .card-footer {
  background-color: #1e2130 !important;
  color: #eaeaea !important;
  border-top: 1px solid #3a3f55 !important;
}

/* card-title con estilos inline */
body.dark-mode .card-title {
  color: #eaeaea !important;
  background-color: transparent !important;
}

body.dark-mode .card-title[style*="color:#444444"],
body.dark-mode .card-title[style*="color: #444444"] {
  color: #eaeaea !important;
}

body.dark-mode .card-title[style*="background-color:#EFEBDF"],
body.dark-mode .card-title[style*="background-color: #EFEBDF"] {
  background-color: transparent !important;
}

/* Card con estilos inline */
body.dark-mode .card[style*="background-color:#EFEBDF"],
body.dark-mode .card[style*="background-color: #EFEBDF"] {
  background-color: #1e2130 !important;
}

/* ========================================
   MODALES
   ======================================== */
body.dark-mode .modal-content {
  background-color: #1e2230 !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .modal-header {
  background-color: #1a1d2e !important;
  border-color: #3a3f55 !important;
  color: #eaeaea !important;
  border-bottom: 1px solid #3a3f55 !important;
}

body.dark-mode .modal-footer {
  background-color: #1e2130 !important;
  border-color: #3a3f55 !important;
  border-top: 1px solid #3a3f55 !important;
}

/* ========================================
   INPUTS Y FORMULARIOS
   ======================================== */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .form-control {
  background-color: #1e2130 !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus,
body.dark-mode .form-control:focus {
  background-color: #252a3a !important;
  border-color: #e94560 !important;
  box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.2) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #6b7280 !important;
}

/* Labels */
body.dark-mode label,
body.dark-mode .control-label {
  color: #eaeaea !important;
}

/* ========================================
   DATATABLES - Estilos completos para dark mode
   ======================================== */

/* Wrapper principal - TODO dentro debe ser oscuro */
body.dark-mode .dataTables_wrapper,
body.dark-mode .dataTables_wrapper * {
  background-color: transparent;
  color: #eaeaea;
}

/* Tabla DataTable base */
body.dark-mode table.dataTable,
body.dark-mode table.dataTable * {
  color: #eaeaea;
}

/* HEADER - Forzar todo el thead a fondo oscuro y texto CLARO */
body.dark-mode table.dataTable thead,
body.dark-mode table.dataTable thead *,
body.dark-mode table.dataTable th,
body.dark-mode table.dataTable th *,
body.dark-mode .dataTables_scrollHead,
body.dark-mode .dataTables_scrollHead *,
body.dark-mode .dataTables_scrollHeadInner,
body.dark-mode .dataTables_scrollHeadInner * {
  background-color: #2d3347 !important;
  color: #ffffff !important;
  border-color: #3a3f55 !important;
}

/* Celdas del header específicas */
body.dark-mode table.dataTable thead th,
body.dark-mode table.dataTable thead td,
body.dark-mode table.dataTable tfoot th,
body.dark-mode table.dataTable tfoot td {
  background-color: #2d3347 !important;
  color: #ffffff !important;
  border-bottom: 2px solid #3a3f55 !important;
}

/* jQuery UI state default - FONDO OSCURO */
body.dark-mode table.dataTable .ui-state-default,
body.dark-mode table.dataTable th.ui-state-default,
body.dark-mode table.dataTable td.ui-state-default,
body.dark-mode .dataTables_wrapper .ui-state-default,
body.dark-mode .dataTables_scrollHead .ui-state-default {
  background-color: #2d3347 !important;
  background: #2d3347 !important;
  color: #ffffff !important;
  border-color: #3a3f55 !important;
}

/* Columna Edición y otras con sorting_disabled - FORZAR OSCURO */
body.dark-mode table.dataTable th.sorting_disabled,
body.dark-mode table.dataTable td.sorting_disabled,
body.dark-mode table.dataTable thead th.sorting_disabled,
body.dark-mode table.dataTable thead td.sorting_disabled,
body.dark-mode table.dataTable thead th.dt-center.sorting_disabled,
body.dark-mode table.dataTable thead th.dt-nowrap.sorting_disabled {
  background-color: #2d3347 !important;
  background: #2d3347 !important;
  color: #ffffff !important;
}

/* Capturar estilos inline en header de DataTable */
body.dark-mode table.dataTable thead th[style*="background"],
body.dark-mode table.dataTable thead td[style*="background"] {
  background-color: #2d3347 !important;
  background: #2d3347 !important;
  color: #ffffff !important;
}

/* Clases de DataTables en header */
body.dark-mode table.dataTable thead .dt-center,
body.dark-mode table.dataTable thead .dt-nowrap,
body.dark-mode table.dataTable thead .sorting,
body.dark-mode table.dataTable thead .sorting_asc,
body.dark-mode table.dataTable thead .sorting_desc,
body.dark-mode table.dataTable thead .sorting_disabled {
  background-color: #2d3347 !important;
  color: #ffffff !important;
}

/* FIX para block_navigator.php - color #e6e6e6 en ui-state-default sorting_disabled */
body.dark-mode .ui-state-default.sorting_disabled,
body.dark-mode th.ui-state-default.sorting_disabled,
body.dark-mode td.ui-state-default.sorting_disabled,
body.dark-mode [style*="background-color: #e6e6e6"],
body.dark-mode [style*="background-color:#e6e6e6"] {
  background-color: #2d3347 !important;
  background: #2d3347 !important;
  color: #ffffff !important;
}

/* BODY - Filas del body */
body.dark-mode table.dataTable tbody,
body.dark-mode table.dataTable tbody * {
  color: #eaeaea;
}

body.dark-mode table.dataTable tbody tr {
  background-color: #1e2230 !important;
  color: #eaeaea !important;
}

body.dark-mode table.dataTable tbody tr td {
  background-color: #1e2230 !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
}

/* Filas odd (impares) */
body.dark-mode table.dataTable tbody tr.odd,
body.dark-mode table.dataTable tbody tr.odd td {
  background-color: #1e2230 !important;
}

/* Filas even (pares) */
body.dark-mode table.dataTable tbody tr.even,
body.dark-mode table.dataTable tbody tr.even td {
  background-color: #252a3a !important;
}

/* Hover en filas - color sombreado delicado manteniendo color de texto */
body.dark-mode table.dataTable tbody tr:hover td {
  background-color: #32384d !important;
  color: #eaeaea !important;
}

/* Filas seleccionadas */
body.dark-mode table.dataTable tbody tr.selected,
body.dark-mode table.dataTable tbody tr.selected td {
  background-color: #e94560 !important;
  color: #ffffff !important;
}

/* Celdas destacadas por ordenamiento */
body.dark-mode table.dataTable tbody td.sorting_1,
body.dark-mode table.dataTable tbody td.sorting_2,
body.dark-mode table.dataTable tbody td.sorting_3 {
  background-color: #3a4055 !important;
}

/* ====== COLORES INLINE - CAPTURA AGRESIVA ====== */

/* Colores HEX */
body.dark-mode table.dataTable td[style*="background-color: #EFEBDE"],
body.dark-mode table.dataTable td[style*="background-color: #F9F9F9"],
body.dark-mode table.dataTable td[style*="background-color: #FFFFFF"],
body.dark-mode table.dataTable td[style*="background-color: #ffffff"],
body.dark-mode table.dataTable td[style*="background-color: #fff"],
body.dark-mode table.dataTable td[style*="background-color: #FFF"],
body.dark-mode table.dataTable td[style*="background-color: #ffffcc"],
body.dark-mode table.dataTable td[style*="background-color: #FFFFCC"],
body.dark-mode table.dataTable td[style*="background: #EFEBDE"],
body.dark-mode table.dataTable td[style*="background: #F9F9F9"],
body.dark-mode table.dataTable td[style*="background: #FFFFFF"],
body.dark-mode table.dataTable td[style*="background: #ffffff"],
body.dark-mode table.dataTable td[style*="background: #fff"] {
  background-color: #1e2230 !important;
}

/* Colores RGB - Captura de los colores específicos de tu DataTable */
body.dark-mode table.dataTable td[style*="background-color: rgb(247"],
body.dark-mode table.dataTable td[style*="background-color: rgb(239"],
body.dark-mode table.dataTable td[style*="background-color: rgb(255"],
body.dark-mode table.dataTable td[style*="background: rgb(247"],
body.dark-mode table.dataTable td[style*="background: rgb(239"],
body.dark-mode table.dataTable td[style*="background: rgb(255"] {
  background-color: #1e2230 !important;
}

/* Atributos bgcolor */
body.dark-mode table.dataTable td[bgcolor],
body.dark-mode table.dataTable tr[bgcolor] {
  background-color: #1e2230 !important;
}

/* Filas con estilos inline */
body.dark-mode table.dataTable tr[style*="background-color"],
body.dark-mode table.dataTable tr[style*="background:"] {
  background-color: #1e2230 !important;
}

/* Info, length, filter - fondos y textos */
body.dark-mode .dataTables_info,
body.dark-mode .dataTables_length,
body.dark-mode .dataTables_filter,
body.dark-mode .dataTables_processing,
body.dark-mode .dataTables_paginate {
  color: #eaeaea !important;
  background-color: transparent !important;
}

/* Inputs de búsqueda y length */
body.dark-mode .dataTables_filter input,
body.dark-mode .dataTables_length select {
  background-color: #252a3a !important;
  color: #eaeaea !important;
  border: 1px solid #3a3f55 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
}

/* Label de length */
body.dark-mode .dataTables_length label {
  color: #eaeaea !important;
}

/* Fondos de las áreas superior e inferior del DataTable */
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
  background-color: transparent !important;
  padding: 10px !important;
}

/* Paginación */
body.dark-mode .dataTables_paginate .paginate_button {
  color: #eaeaea !important;
  background-color: #252a3a !important;
  border-color: #3a3f55 !important;
}

body.dark-mode .dataTables_paginate .paginate_button:hover {
  background-color: #3a4055 !important;
  color: #fff !important;
  border-color: #e94560 !important;
}

body.dark-mode .dataTables_paginate .paginate_button.current {
  background-color: #e94560 !important;
  color: #fff !important;
  border-color: #e94560 !important;
}

body.dark-mode .dataTables_paginate .paginate_button.disabled {
  background-color: #1a1d2e !important;
  color: #6b7280 !important;
  border-color: #3a3f55 !important;
}

/* Botones de DataTables (ColVis, etc) - AGRESIVO */
body.dark-mode .dt-buttons,
body.dark-mode .dt-buttons .dt-button,
body.dark-mode .dt-button,
body.dark-mode button.dt-button,
body.dark-mode a.dt-button,
body.dark-mode .buttons-collection,
body.dark-mode .buttons-colvis,
body.dark-mode .dt-buttons .buttons-collection,
body.dark-mode .dt-buttons .buttons-colvis {
  background-color: #2d3347 !important;
  color: #ffffff !important;
  border-color: #3a3f55 !important;
  background-image: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Hover en botones */
body.dark-mode .dt-buttons .dt-button:hover,
body.dark-mode .dt-button:hover,
body.dark-mode button.dt-button:hover,
body.dark-mode a.dt-button:hover,
body.dark-mode .buttons-collection:hover,
body.dark-mode .buttons-colvis:hover,
body.dark-mode .dt-buttons .buttons-collection:hover,
body.dark-mode .dt-buttons .buttons-colvis:hover {
  background-color: #3a4055 !important;
  border-color: #e94560 !important;
  color: #ffffff !important;
  background-image: none !important;
}

/* Capturar fondos blancos inline en botones */
body.dark-mode .dt-button[style*="background"],
body.dark-mode button.dt-button[style*="background"],
body.dark-mode a.dt-button[style*="background"] {
  background-color: #2d3347 !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* Texto dentro de botones ColVis */
body.dark-mode .dt-button span,
body.dark-mode .buttons-collection span,
body.dark-mode .buttons-colvis span,
body.dark-mode .dt-buttons .dt-button *,
/* Contenido dentro de botones DataTables - BLANCO, excepto iconos de archivo */
body.dark-mode .dt-button *:not(.fa-file-excel-o):not(.fa-file-pdf-o):not(.fa-file-word-o) {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* Iconos de archivo en botones DataTables - sin modificación */
body.dark-mode .dt-button .fa-file-excel-o,
body.dark-mode .dt-button .fa-file-pdf-o,
body.dark-mode .dt-button .fa-file-word-o,
body.dark-mode .dt-button .fa-file-powerpoint-o,
body.dark-mode .dt-button .fa-file-image-o {
  background-color: initial !important;
}

/* Icono de Excel en dataTables_length (botón exportar) - sin modificación */
body.dark-mode .dataTables_length .btn-success .fa-file-excel-o,
body.dark-mode .dataTables_length .fa-file-excel-o,
body.dark-mode #table_length .fa-file-excel-o,
body.dark-mode .dataTables_length i.fa-file-excel-o {
  color: inherit !important;
  background-color: initial !important;
}

/* Dropdown del botón ColVis */
body.dark-mode .dt-button-collection,
body.dark-mode .dt-button-collection .dt-button {
  background-color: #1e2230 !important;
  color: #ffffff !important;
  border-color: #3a3f55 !important;
}

body.dark-mode .dt-button-collection .dt-button:hover {
  background-color: #3a4055 !important;
  color: #ffffff !important;
}

/* Checkbox en dropdown de ColVis */
body.dark-mode .dt-button-collection input[type="checkbox"] {
  accent-color: #e94560 !important;
}

/* Sorting icons */
body.dark-mode table.dataTable thead .sorting,
body.dark-mode table.dataTable thead .sorting_asc,
body.dark-mode table.dataTable thead .sorting_desc,
body.dark-mode table.dataTable thead .sorting_asc_disabled,
body.dark-mode table.dataTable thead .sorting_desc_disabled {
  background-color: #2d3347 !important;
}

body.dark-mode table.dataTable tbody tr.even td.sorting_1,
body.dark-mode table.dataTable tbody tr.even td.sorting_2,
body.dark-mode table.dataTable tbody tr.even td.sorting_3 {
  background-color: #40465c !important;
}

/* Checkbox en DataTable */
body.dark-mode table.dataTable tbody td .checkbox,
body.dark-mode table.dataTable tbody td input[type="checkbox"] {
  accent-color: #e94560 !important;
}

/* ========================================
   DROPDOWNS
   ======================================== */
body.dark-mode .dropdown-menu {
  background-color: #1e2230 !important;
  border-color: #3a3f55 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .dropdown-menu > li > a {
  color: #eaeaea !important;
}

body.dark-mode .dropdown-menu > li > a:hover {
  background-color: #3a4055 !important;
  color: #ffffff !important;
}

/* ========================================
   POPOVER
   ======================================== */
body.dark-mode .popover {
  background-color: #1e2230 !important;
  border-color: #3a3f55 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .popover-content {
  color: #eaeaea !important;
}

body.dark-mode .popover.bottom > .arrow:after {
  border-bottom-color: #1e2230 !important;
}

/* ========================================
   ALERTS
   ======================================== */
body.dark-mode .alert {
  border-color: #3a3f55 !important;
}

/* ========================================
   TABS - Mejor diferenciación visual
   ======================================== */
body.dark-mode .nav-tabs {
  border-color: #3a3f55 !important;
  border-bottom: 2px solid #3a3f55 !important;
  background-color: #1e2130 !important;
}

body.dark-mode .nav-tabs > li > a {
  color: #9ca3af !important;
  background-color: #1e2130 !important;
  border-color: transparent !important;
  border-bottom-color: #3a3f55 !important;
}

body.dark-mode .nav-tabs > li > a:hover {
  background-color: #2e3347 !important;
  border-color: #3a3f55 !important;
  color: #eaeaea !important;
}

body.dark-mode .nav-tabs > li.active > a {
  background-color: #13151c !important;
  border-color: #f0ad4e !important;
  border-bottom-color: #13151c !important;
  color: #f0ad4e !important;
  font-weight: 600 !important;
}

body.dark-mode .tab-content {
  background-color: #13151c !important;
  border-color: #3a3f55 !important;
  border: 1px solid #3a3f55 !important;
  border-top: none !important;
  border-radius: 0 0 4px 4px !important;
}

/* ========================================
   Tabs multilenguaje
   ======================================== */
body.dark-mode .multilenguaje {
  color: #eaeaea !important;
}

body.dark-mode .multilenguaje.active,
body.dark-mode .multilenguaje:focus,
body.dark-mode .multilenguaje.selected,
body.dark-mode li.active .multilenguaje,
body.dark-mode .nav-tabs > li.active > a.multilenguaje {
  color: #ffffff !important;
  background-color: #f0ad4e !important;
  border-color: #f0ad4e !important;
}

body.dark-mode .nav-tabs > li > a.multilenguaje {
  color: #eaeaea !important;
}

body.dark-mode .nav-tabs > li > a.multilenguaje:hover {
  color: #ffffff !important;
  background-color: #2e3347 !important;
}

/* ========================================
   TOOLBAR
   ======================================== */
body.dark-mode .clsToolbar {
  background-color: #1e2130 !important;
  border-bottom: 1px solid #3a3f55 !important;
}

/* ========================================
   Bordes y separadores
   ======================================== */
body.dark-mode td[bgcolor="#888888"],
body.dark-mode td[bgcolor="#AAAAAA"],
body.dark-mode td[bgcolor="#CECFCE"],
body.dark-mode tr[bgcolor="#CECFCE"],
body.dark-mode td[bgcolor="#000000"],
body.dark-mode tr[bgcolor="#000000"] {
  background-color: #3a3f55 !important;
}

/* ========================================
   Scrollbars para navegadores webkit
   ======================================== */
body.dark-mode ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: #0a0c12;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: #3a3f55;
  border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #f0ad4e;
}

/* ========================================
   Bootstrap select
   ======================================== */
body.dark-mode .bootstrap-select .dropdown-toggle {
  background-color: #1e2130 !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
}

body.dark-mode .bootstrap-select .dropdown-menu {
  background-color: #1e2230 !important;
}

body.dark-mode .bootstrap-select .dropdown-menu li a {
  color: #eaeaea !important;
}

body.dark-mode .bootstrap-select .dropdown-menu li a:hover {
  background-color: #3a4055 !important;
}

/* ========================================
   Multiselect
   ======================================== */
body.dark-mode .multiselect-container {
  background-color: #1e2230 !important;
}

body.dark-mode .multiselect-container > li > a {
  color: #eaeaea !important;
}

/* ========================================
   jAlert
   ======================================== */
body.dark-mode #popup_container {
  background-color: #1e2230 !important;
  border-color: #3a3f55 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode #popup_title {
  background-color: #1a1d2e !important;
  color: #eaeaea !important;
  border-bottom: 1px solid #3a3f55 !important;
}

body.dark-mode #popup_content {
  background-color: #1e2230 !important;
  color: #eaeaea !important;
}

/* ========================================
   jsTree
   ======================================== */
body.dark-mode .jstree-default .jstree-node,
body.dark-mode .jstree-default .jstree-anchor {
  color: #eaeaea !important;
}

body.dark-mode .jstree-default .jstree-hovered {
  background-color: #3a4055 !important;
}

/* body.dark-mode .jstree-default .jstree-clicked {
  background-color: #e94560 !important;
} */

/* Botones en jsTree (abm_documentos_por_perfil.php) */
body.dark-mode #left_tree_div button,
body.dark-mode #right_tree_div button,
body.dark-mode .jstree-default button,
body.dark-mode #left_tree_div .btn,
body.dark-mode #right_tree_div .btn {
  background-color: #3a4055 !important;
  color: #ffffff !important;
  border-color: #4a5065 !important;
}

body.dark-mode #left_tree_div button i,
body.dark-mode #right_tree_div button i,
body.dark-mode .jstree-default button i,
body.dark-mode #left_tree_div .btn i,
body.dark-mode #right_tree_div .btn i {
  color: #ffffff !important;
}

/* Sobrescribir color inline rojo #FF5A51 - selector ultra-especifico */
body.dark-mode #left_tree_div button.btn,
body.dark-mode #left_tree_div button.btn-success,
body.dark-mode #left_tree_div button.btn-danger,
body.dark-mode #right_tree_div button.btn,
body.dark-mode #right_tree_div button.btn-success,
body.dark-mode #right_tree_div button.btn-danger,
body.dark-mode #left_tree_div button[style*="color:"],
body.dark-mode #right_tree_div button[style*="color:"] {
  color: #ffffff !important;
  background-color: #3a4055 !important;
  border-color: #4a5065 !important;
}

/* Botones dentro de jstree-anchor */
body.dark-mode .jstree-anchor button,
body.dark-mode .jstree-anchor .btn,
body.dark-mode .jstree-anchor .btn-success,
body.dark-mode .jstree-anchor .btn-danger {
  background-color: #3a4055 !important;
  color: #ffffff !important;
  border-color: #4a5065 !important;
}

body.dark-mode .jstree-anchor button i,
body.dark-mode .jstree-anchor .btn i {
  color: #ffffff !important;
}

/* Forzar color blanco en iconos dentro de botones del jsTree */
body.dark-mode #left_tree_div .fa,
body.dark-mode #right_tree_div .fa,
body.dark-mode #left_tree_div .fa-arrow-right,
body.dark-mode #right_tree_div .fa-remove,
body.dark-mode .jstree-default .fa {
  color: #ffffff !important;
}

/* FIX ESPECIFICO para abm_documentos_por_perfil.php - botones con color inline */
body.dark-mode #left_tree_div .jstree-anchor > button,
body.dark-mode #right_tree_div .jstree-anchor > button,
body.dark-mode #left_tree_div .jstree-node button,
body.dark-mode #right_tree_div .jstree-node button {
  background: #3a4055 !important;
  background-color: #3a4055 !important;
  color: #ffffff !important;
  border: 1px solid #4a5065 !important;
}

/* Sobrescribir cualquier color inline en botones del jsTree */
body.dark-mode #left_tree_div button[class*="btn"],
body.dark-mode #right_tree_div button[class*="btn"] {
  background-color: #3a4055 !important;
  color: #ffffff !important;
}

/* ========================================
   Estilos generales para fondos blancos
   ======================================== */

/* Tablas con fontnormal y otras clases comunes */
body.dark-mode .fontnormal,
body.dark-mode table.fontnormal,
body.dark-mode table.fontnormal td,
body.dark-mode table.fontnormal tr {
  background-color: #13151c !important;
  color: #eaeaea !important;
}

/* Tablas generales dentro de content */
body.dark-mode #content table:not(.dataTable):not(.tablageneral):not(.tablalistado) {
  background-color: transparent !important;
}

/* Contenedores de formularios */
body.dark-mode #content form {
  background-color: #13151c !important;
}

/* Tablas dentro de divs de reporte */
body.dark-mode div[id*="div"] > table {
  background-color: #2d3347 !important;
}

/* Fondos blancos inline */
body.dark-mode td[bgcolor="#FFFFFF"],
body.dark-mode tr[bgcolor="#FFFFFF"],
body.dark-mode table[bgcolor="#FFFFFF"],
body.dark-mode div[bgcolor="#FFFFFF"],
body.dark-mode [style*="background-color:#FFFFFF"],
body.dark-mode [style*="background-color: #FFFFFF"],
body.dark-mode [style*="background:#FFFFFF"],
body.dark-mode [style*="background: #FFFFFF"],
body.dark-mode [style*="background-color:white"],
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background: white"] {
  background-color: #2d3347 !important;
}

/* ========================================
   Mapeo de colores claros a oscuros
   ======================================== */

/* Color principal del tema claro #CECFBD → #0f111a */
body.dark-mode td[bgcolor="#CECFBD"],
body.dark-mode td[bgcolor="#CECFBE"],
body.dark-mode tr[bgcolor="#CECFBD"],
body.dark-mode tr[bgcolor="#CECFBE"],
body.dark-mode table[bgcolor="#CECFBD"],
body.dark-mode table[bgcolor="#CECFBE"],
body.dark-mode [style*="background-color:#CECFBD"],
body.dark-mode [style*="background-color: #CECFBD"],
body.dark-mode [style*="background:#CECFBD"],
body.dark-mode [style*="background: #CECFBD"],
body.dark-mode [style*="background-color:#CECFBE"],
body.dark-mode [style*="background-color: #CECFBE"] {
  background-color: #0f111a !important;
}

/* Colores adicionales de repo_logs.php y similares */
body.dark-mode body[style*="background-color:#CDCEBC"],
body.dark-mode body[style*="background-color: #CDCEBC"],
body.dark-mode [style*="background-color:#CDCEBC"],
body.dark-mode [style*="background-color: #CDCEBC"],
body.dark-mode body[style*="background:#CDCEBC"],
body.dark-mode body[style*="background: #CDCEBC"] {
  background-color: #13151c !important;
}

/* Fondos #8B8F81, #8c9082 (grises) */
body.dark-mode [style*="background-color:#8B8F81"],
body.dark-mode [style*="background-color: #8B8F81"],
body.dark-mode [style*="background-color:#8c9082"],
body.dark-mode [style*="background-color: #8c9082"],
body.dark-mode [style*="background:#8B8F81"],
body.dark-mode [style*="background:#8c9082"],
body.dark-mode [bgcolor="#8B8F81"],
body.dark-mode [bgcolor="#8c9082"],
body.dark-mode [bgColor="#8c9082"] {
  background-color: #2d3347 !important;
}

/* Fondos #EEEADE (beige claro) */
body.dark-mode [style*="background-color:#EEEADE"],
body.dark-mode [style*="background-color: #EEEADE"],
body.dark-mode [style*="background:#EEEADE"],
body.dark-mode [bgcolor="#EEEADE"],
body.dark-mode tr[bgColor="#EEEADE"] {
  background-color: #1e2230 !important;
}

/* Color secundario del tema claro #DEDFCF → #2d3347 (NOTABLEMENTE más claro que el fondo) */
body.dark-mode td[bgcolor="#DEDFCF"],
body.dark-mode td[bgcolor="#DEDFCE"],
body.dark-mode tr[bgcolor="#DEDFCF"],
body.dark-mode tr[bgcolor="#DEDFCE"],
body.dark-mode table[bgcolor="#DEDFCF"],
body.dark-mode table[bgcolor="#DEDFCE"],
body.dark-mode [style*="background-color:#DEDFCF"],
body.dark-mode [style*="background-color: #DEDFCF"],
body.dark-mode [style*="background:#DEDFCF"],
body.dark-mode [style*="background: #DEDFCF"],
body.dark-mode [style*="background:#DEDFCE"],
body.dark-mode [style*="background: #DEDFCE"] {
  background-color: #2d3347 !important;
  border: 1px solid #3a3f55 !important;
}

/* Fondos de color claro comunes */
body.dark-mode td[bgcolor="#FFFFCC"],
body.dark-mode td[bgcolor="#EFEBDE"],
body.dark-mode td[bgcolor="#C0C0C0"],
body.dark-mode tr[bgcolor="#FFFFCC"],
body.dark-mode tr[bgcolor="#EFEBDE"],
body.dark-mode table[bgcolor="#FFFFCC"] {
  background-color: #1e2230 !important;
}

/* ========================================
   Panel Sites - block_panel_sites.php
   ======================================== */

body.dark-mode #divReporte,
body.dark-mode #divInfo {
  background-color: #2d3347 !important;
  color: #eaeaea !important;
}

body.dark-mode #divReporte table,
body.dark-mode #divReporte td,
body.dark-mode #divReporte tr {
  background-color: #2d3347 !important;
  color: #eaeaea !important;
}

/* Loading indicator */
body.dark-mode #loading,
body.dark-mode #loading table,
body.dark-mode #loading td {
  background-color: #1e2230 !important;
}

/* Charts containers */
body.dark-mode .charts,
body.dark-mode [id^="chart"] {
  background-color: transparent !important;
}

/* Multicombo en panel */
body.dark-mode .multicombo + .btn-group .multiselect {
  background-color: #1e2130 !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
}

/* Formularios en vistas tipo panel */
body.dark-mode form > table.fontnormal,
body.dark-mode form table.fontnormal {
  background-color: #13151c !important;
}

body.dark-mode form > table.fontnormal td,
body.dark-mode form table.fontnormal td {
  background-color: #13151c !important;
}

/* ========================================
   Formularios y contenedores generales
   ======================================== */

body.dark-mode form,
body.dark-mode form table,
body.dark-mode form td {
  background-color: transparent !important;
}

/* Eliminar hover en tablas dentro de forms - sin efecto de color */


/* Divs de contenido */
body.dark-mode div[id^="div"] {
  color: #eaeaea !important;
}

/* Iframes */
body.dark-mode iframe {
  background-color: #0a0c12 !important;
}

/* Solapa class */
body.dark-mode .solapa {
  color: #eaeaea !important;
  background-color: #1e2130 !important;
  border-color: #3a3f55 !important;
}

/* Desktop class */
body.dark-mode .desktop {
  background-color: #0a0c12 !important;
}

/* Body menu y contenedores principales */
body.dark-mode .bodymenu,
body.dark-mode .bodymenu table,
body.dark-mode .bodymenu td {
  background-color: #0a0c12 !important;
  color: #eaeaea !important;
}

/* Contenedores con estilo inline de fondo #CECFBD */
body.dark-mode body[style*="background-color:#CECFBD"],
body.dark-mode body[style*="background-color: #CECFBD"] {
  background-color: #0a0c12 !important;
}

/* Escalon y barra de titulo */
body.dark-mode .escalon,
body.dark-mode .barra_titulo {
  background-color: #1e2130 !important;
  color: #eaeaea !important;
  border-bottom: 1px solid #3a3f55 !important;
}

/* tblPanel - abm_licencias.php */
body.dark-mode #tblPanel {
  background-color: #2d3347 !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
}

/* util.php - tabla con fondo inline */
body.dark-mode table.tablageneral[style*="background-color:#efebdf"],
body.dark-mode table.tablageneral[style*="background-color: #efebdf"] {
  background-color: #13151c !important;
}

/* util.php - iframes con bgcolor */
body.dark-mode iframe[bgcolor="#EFEBDF"],
body.dark-mode iframe[bgcolor="#efebdf"] {
  background-color: #13151c !important;
}

/* util_abm_menu.php - tablas con bgcolor */
body.dark-mode table[bgcolor="#efebdf"],
body.dark-mode table[bgcolor="#EFEBDF"],
body.dark-mode table[bgcolor="#DEDFCE"],
body.dark-mode table[bgcolor="#dedfce"] {
  background-color: #13151c !important;
}

/* util_query.php - tabla con bgcolor */
body.dark-mode table[bgcolor="#DEDFCE"] {
  background-color: #13151c !important;
}

/* util_query_iframe.php - tablas */
html.dark-mode table[bgcolor="#DEDFCE"],
html.dark-mode table[width="100%"] {
  background-color: #13151c !important;
}

html.dark-mode td,
html.dark-mode th {
  background-color: #1e2230 !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
}

/* ========================================
   Botones Bootstrap - TODOS los tipos
   ======================================== */

/* btn-default */
body.dark-mode .btn-default {
  background-color: #2d3347 !important;
  border-color: #3a3f55 !important;
  color: #ffffff !important;
}

/* Los botones Bootstrap mantienen sus colores originales del tema claro
   Solo se asegura que el texto sea blanco para contraste en dark mode */
body.dark-mode .btn-primary,
body.dark-mode .btn-success,
body.dark-mode .btn-danger,
body.dark-mode .btn-warning,
body.dark-mode .btn-info {
  color: #ffffff !important;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-success:hover,
body.dark-mode .btn-danger:hover,
body.dark-mode .btn-warning:hover,
body.dark-mode .btn-info:hover {
  color: #ffffff !important;
}

/* Botones en tablas (columna edición, etc) */
body.dark-mode table td .btn,
body.dark-mode table.dataTable td .btn,
body.dark-mode .tablageneral td .btn,
body.dark-mode .tablalistado td .btn {
  color: #ffffff !important;
}

/* Iconos dentro de botones del HEADER - BLANCO */
body.dark-mode #body_header .btn i,
body.dark-mode #body_header .btn .fa,
body.dark-mode #body_header button i,
body.dark-mode .header .btn i,
body.dark-mode .header .btn .fa {
  color: #ffffff !important;
}

/* Iconos dentro de botones DEFAULT (sin clase específica) - BLANCO */
body.dark-mode .btn-default i,
body.dark-mode .btn-default .fa,
body.dark-mode .btn-secondary i,
body.dark-mode .btn-secondary .fa {
  color: #ffffff !important;
}

/* Iconos en botones con clase específica (primary, success, danger, etc.) 
   mantienen su color heredado o el del botón */
body.dark-mode .btn-primary i,
body.dark-mode .btn-success i,
body.dark-mode .btn-danger i,
body.dark-mode .btn-warning i,
body.dark-mode .btn-info i,
body.dark-mode .btn-primary .fa,
body.dark-mode .btn-success .fa,
body.dark-mode .btn-danger .fa,
body.dark-mode .btn-warning .fa,
body.dark-mode .btn-info .fa {
  color: inherit !important;
}



/* Botones del header (Logout, Desktop, etc) */
body.dark-mode #body_header .btn,
body.dark-mode .header .btn,
body.dark-mode .navbar .btn,
body.dark-mode #headerTable .btn {
  color: #ffffff !important;
}

body.dark-mode #body_header .btn i,
body.dark-mode #body_header .btn .fa,
body.dark-mode .header .btn i,
body.dark-mode .navbar .btn i {
  color: #ffffff !important;
}

/* Botón Logout - asegurar texto blanco */
body.dark-mode .btn-logout,
body.dark-mode a.btn-logout,
body.dark-mode #body_header .btn-logout,
body.dark-mode .header .btn-logout,
body.dark-mode .btn[href*="logout"],
body.dark-mode .btn[onclick*="logout"] {
  background-color: #10b981 !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
}

body.dark-mode .btn-logout:hover,
body.dark-mode .btn[href*="logout"]:hover,
body.dark-mode .btn[onclick*="logout"]:hover {
  background-color: #34d399 !important;
  color: #ffffff !important;
}

/* Botón Desktop - asegurar texto blanco */
body.dark-mode .btn-desktop,
body.dark-mode a.btn-desktop,
body.dark-mode #body_header .btn-desktop,
body.dark-mode .header .btn-desktop {
  background-color: #ef4444 !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
}

/* Botón Filtro (bot_filtro) - ESTILO WARNING (NARANJA) como el último botón */
body.dark-mode #bot_filtro,
body.dark-mode .btn#bot_filtro,
body.dark-mode button#bot_filtro,
body.dark-mode a#bot_filtro {
  background-color: #d97706 !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
}

/* Icono del botón filtro - BLANCO */
body.dark-mode #bot_filtro i.fa,
body.dark-mode #bot_filtro i.fa-filter,
body.dark-mode #bot_filtro .fa,
body.dark-mode #bot_filtro .fa-filter,
body.dark-mode #bot_filtro i[class*="fa-"],
body.dark-mode #bot_filtro * {
  color: #ffffff !important;
}

body.dark-mode #bot_filtro:hover {
  background-color: #f59e0b !important;
  border-color: #fbbf24 !important;
}

body.dark-mode .btn-desktop:hover {
  background-color: #f87171 !important;
  color: #ffffff !important;
}

/* Cualquier botón con fondo de color en el header - forzar texto blanco */
body.dark-mode #body_header a[class*="btn-"],
body.dark-mode .header a[class*="btn-"],
body.dark-mode #headerTable a[class*="btn-"] {
  color: #ffffff !important;
}

/* Botones de icono/edición en tablas */
body.dark-mode table.dataTable tbody td .btn-sm,
body.dark-mode table.dataTable tbody td .btn-xs,
body.dark-mode table td .btn-sm,
body.dark-mode table td .btn-xs {
  background-color: #3a4055 !important;
  border-color: #4a5065 !important;
  color: #ffffff !important;
}

body.dark-mode table.dataTable tbody td .btn-sm:hover,
body.dark-mode table.dataTable tbody td .btn-xs:hover {
  background-color: #4a5065 !important;
  border-color: #e94560 !important;
  color: #ffffff !important;
}

/* Iconos en botones de edición ( lápiz, ojo, etc) */
body.dark-mode table td .btn-sm i,
body.dark-mode table td .btn-xs i,
body.dark-mode table td .btn-sm .fa,
body.dark-mode table td .btn-xs .fa {
  color: #ffffff !important;
}

/* Botones con fondos claros inline - forzar oscuro con texto blanco */
body.dark-mode button[style*="background-color: #FFFFFF"],
body.dark-mode button[style*="background-color: #ffffff"],
body.dark-mode button[style*="background-color: #fff"],
body.dark-mode button[style*="background: #FFFFFF"],
body.dark-mode button[style*="background: #ffffff"],
body.dark-mode button[style*="background: #fff"],
body.dark-mode .btn[style*="background-color: #FFFFFF"],
body.dark-mode .btn[style*="background-color: #ffffff"],
body.dark-mode .btn[style*="background-color: #fff"] {
  background-color: #2d3347 !important;
  border-color: #3a3f55 !important;
  color: #ffffff !important;
}

/* Botones con bgcolor */
body.dark-mode button[bgcolor="#FFFFFF"],
body.dark-mode button[bgcolor="#ffffff"],
body.dark-mode .btn[bgcolor="#FFFFFF"],
body.dark-mode .btn[bgcolor="#ffffff"] {
  background-color: #2d3347 !important;
  border-color: #3a3f55 !important;
  color: #ffffff !important;
}

/* Imágenes/botones de edición con fondo amarillo/naranja */
body.dark-mode table td img[src*="edit"],
body.dark-mode table td img[src*="modify"],
body.dark-mode table td a img {
  background-color: #3a4055 !important;
  border-radius: 3px !important;
  padding: 2px !important;
}

/* Well y containers */
body.dark-mode .well {
  background-color: #1e2130 !important;
  border-color: #3a3f55 !important;
  color: #eaeaea !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Fieldset y legend */
body.dark-mode fieldset {
  border-color: #3a3f55 !important;
}

body.dark-mode legend {
  color: #eaeaea !important;
}

/* ========================================
   Textos y enlaces
   ======================================== */

/* Enlaces generales - excluyendo botones */
/* body.dark-mode a:not(.btn):not([class*="btn-"]) {
  color: #e94560 !important;
} */

/* body.dark-mode a:not(.btn):not([class*="btn-"]):hover {
  color: #ff6b6b !important;
} */

/* Enlaces que son botones - forzar blanco */
body.dark-mode a.btn,
body.dark-mode a[class*="btn-"] {
  color: #ffffff !important;
}

/* Columna de Edición - asegurar visibilidad */
body.dark-mode table td[class*="edicion"],
body.dark-mode table td[class*="edit"],
body.dark-mode table td[class*="action"],
body.dark-mode table th[class*="edicion"],
body.dark-mode table th[class*="edit"],
body.dark-mode table th[class*="action"] {
  background-color: transparent !important;
}

/* Cualquier elemento en columna de edición */
body.dark-mode table td[class*="edicion"] *,
body.dark-mode table td[class*="edit"] *,
body.dark-mode table td[class*="action"] *,
body.dark-mode table.dataTable td .btn-edit,
body.dark-mode table.dataTable td .btn-action {
  color: #ffffff !important;
}

/* Enlaces/botones de editar con iconos */
body.dark-mode table td a[href*="edit"],
body.dark-mode table td a[href*="modif"],
body.dark-mode table td a[onclick*="edit"],
body.dark-mode table td a[onclick*="modif"] {
  background-color: #3a4055 !important;
  border: 1px solid #4a5065 !important;
  border-radius: 3px !important;
  padding: 4px 8px !important;
  color: #ffffff !important;
  display: inline-block !important;
}

body.dark-mode table td a[href*="edit"]:hover,
body.dark-mode table td a[href*="modif"]:hover {
  background-color: #4a5065 !important;
  border-color: #e94560 !important;
  color: #ffffff !important;
}

/* Iconos dentro de enlaces de edición */
body.dark-mode table td a[href*="edit"] i,
body.dark-mode table td a[href*="edit"] .fa,
body.dark-mode table td a[href*="modif"] i,
body.dark-mode table td a[href*="modif"] .fa,
body.dark-mode table td a[onclick*="edit"] i,
body.dark-mode table td a[onclick*="modif"] i {
  color: #ffffff !important;
}

body.dark-mode .text-muted {
  color: #6b7280 !important;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
  color: #eaeaea !important;
}

/* Font colors en inline styles */
body.dark-mode font[color="#000000"],
body.dark-mode font[color="black"],
body.dark-mode [style*="color:#000000"],
body.dark-mode [style*="color: #000000"],
body.dark-mode [style*="color:black"],
body.dark-mode [style*="color: black"] {
  color: #eaeaea !important;
}

/* ========================================
   Imagenes de fondo (spacers y backgrounds)
   ======================================== */

body.dark-mode img[src*="spacer.gif"] {
  opacity: 0.3;
}

body.dark-mode td[background],
body.dark-mode tr[background],
body.dark-mode table[background] {
  background-image: none !important;
  background-color: #0a0c12 !important;
}

/* ========================================
   ESTILOS PARA IFRAMES (html.dark-mode o body.dark-mode)
   ======================================== */

/* Cuando el html tiene dark-mode (para iframes) */
html.dark-mode,
html.dark-mode body {
  background-color: #13151c !important;
  color: #eaeaea !important;
}

/* Fondos específicos de repo_logs.php */
html.dark-mode body[style*="background-color:#CDCEBC"],
html.dark-mode body[style*="background-color: #CDCEBC"],
html.dark-mode [style*="background-color:#CDCEBC"],
html.dark-mode [style*="background-color: #CDCEBC"] {
  background-color: #13151c !important;
}

html.dark-mode [style*="background-color:#8B8F81"],
html.dark-mode [style*="background-color: #8B8F81"],
html.dark-mode [style*="background-color:#8c9082"],
html.dark-mode [style*="background-color: #8c9082"],
html.dark-mode [bgcolor="#8B8F81"],
html.dark-mode [bgcolor="#8c9082"],
html.dark-mode [bgColor="#8c9082"] {
  background-color: #2d3347 !important;
}

html.dark-mode [style*="background-color:#EEEADE"],
html.dark-mode [style*="background-color: #EEEADE"],
html.dark-mode [bgcolor="#EEEADE"],
html.dark-mode tr[bgColor="#EEEADE"] {
  background-color: #1e2230 !important;
  color: #eaeaea !important;
}

/* Tablas en iframes */
html.dark-mode table {
  background-color: #1e2230 !important;
  color: #eaeaea !important;
}

html.dark-mode td,
html.dark-mode th {
  background-color: #1e2230 !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
}

/* Botones en iframes - mantener colores originales, solo texto blanco */
html.dark-mode .btn,
html.dark-mode button {
  color: #ffffff !important;
}

html.dark-mode .btn-default {
  background-color: #2d3347 !important;
  border-color: #3a3f55 !important;
}

/* Enlaces en iframes */
html.dark-mode a {
  color: #e94560 !important;
}

html.dark-mode a[style*="color:#fff"],
html.dark-mode a[style*="color: #fff"],
html.dark-mode a[style*="color:#ffffff"],
html.dark-mode a[style*="color: #ffffff"] {
  color: #ffffff !important;
}

/* Paneles en iframes */
html.dark-mode .panel {
  background-color: #1e2230 !important;
  border-color: #3a3f55 !important;
}

html.dark-mode .panel-heading {
  background-color: #2d3347 !important;
  border-color: #3a3f55 !important;
}

html.dark-mode .panel-title {
  color: #eaeaea !important;
}

/* Panel-default específico */
html.dark-mode .panel-default {
  background-color: #1e2230 !important;
  border-color: #3a3f55 !important;
}

html.dark-mode .panel-default > .panel-heading {
  background-color: #2d3347 !important;
  color: #eaeaea !important;
}






/* ========================================
   FIX ESPECÍFICO - Icono Excel en abm_clientes.php
   ======================================== */

/* Selector máximo para icono de Excel - deshabilitar cualquier modificación */
i.fa.fa-file-excel-o,
.btn-success > i.fa-file-excel-o,
a.btn-success > i.fa-file-excel-o,
.dataTables_length i.fa-file-excel-o,
label i.fa-file-excel-o,
#table_length i.fa-file-excel-o {
  color: unset !important;
  background-color: unset !important;
  fill: unset !important;
}


/* ========================================
   FIX PSEUDO-ELEMENTOS FONT AWESOME
   ======================================== */

/* Iconos de Excel - Pseudo-elemento ::before */
body.dark-mode .fa-file-excel-o::before,
body.dark-mode i.fa-file-excel-o::before,
body.dark-mode .btn-success .fa-file-excel-o::before,
body.dark-mode a.btn-success .fa-file-excel-o::before,
body.dark-mode .dataTables_length .fa-file-excel-o::before,
body.dark-mode .dt-buttons .fa-file-excel-o::before {
  color: inherit !important;
}

/* Todos los iconos FA en botones success - heredar color */
body.dark-mode .btn-success [class*="fa-"]::before {
  color: inherit !important;
}


/* ========================================
   FIX ULTRA-ESPECÍFICO - Icono Excel
   ======================================== */

/* Selector máximo especificidad para icono Excel */
body.dark-mode div.dataTables_length > label > a.btn-success > i.fa-file-excel-o::before,
body.dark-mode .dataTables_length a.btn-success i.fa-file-excel-o::before,
body.dark-mode a[href*="excel_export"].btn-success i.fa-file-excel-o::before,
body.dark-mode a[href*="excel_export"] i.fa-file-excel-o {
  color: #ffffff !important;
}

/* Forzar color blanco en el icono de Excel - último recurso */
body.dark-mode i.fa-file-excel-o {
  color: #ffffff !important;
}

body.dark-mode .btn-success i.fa-file-excel-o,
body.dark-mode a.btn-success i.fa-file-excel-o {
  color: #ffffff !important;
}


/* ========================================
   FIX CSS FINAL - Icono Excel
   ======================================== */

/* Selector absoluto para el icono de Excel */
body.dark-mode a.btn-success[href*="excel_export"] i.fa-file-excel-o,
body.dark-mode a.btn-success[href*="excel_export"] i.fa-file-excel-o::before {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ========================================
   FIX BOTONES REPORTS.PHP - Colores fijos sin efecto hover
   ======================================== */

/* Colores de botones en modo oscuro - TODOS los estados */
body.dark-mode .btn-purple,
body.dark-mode .btn-purple:hover,
body.dark-mode .btn-purple:focus,
body.dark-mode .btn-purple:active {
  background-color: #6f42c1 !important;
  border-color: #5e35b1 !important;
  color: #ffffff !important;
}

body.dark-mode .btn-danger,
body.dark-mode .btn-danger:hover,
body.dark-mode .btn-danger:focus,
body.dark-mode .btn-danger:active {
  background-color: #f46a6a !important;
  border-color: #e05555 !important;
  color: #ffffff !important;
}

body.dark-mode .btn-success,
body.dark-mode .btn-success:hover,
body.dark-mode .btn-success:focus,
body.dark-mode .btn-success:active {
  background-color: #34c38f !important;
  border-color: #2ca87a !important;
  color: #ffffff !important;
}

body.dark-mode .btn-primary,
body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus,
body.dark-mode .btn-primary:active {
  background-color: #5d4db3 !important;
  border-color: #4a3d8f !important;
  color: #ffffff !important;
}

body.dark-mode .btn-warning,
body.dark-mode .btn-warning:hover,
body.dark-mode .btn-warning:focus,
body.dark-mode .btn-warning:active {
  background-color: #f1b44c !important;
  border-color: #dba039 !important;
  color: #ffffff !important;
}

body.dark-mode .btn-default,
body.dark-mode .btn-default:hover,
body.dark-mode .btn-default:focus,
body.dark-mode .btn-default:active {
  background-color: #3a3f55 !important;
  border-color: #4a5065 !important;
  color: #ffffff !important;
}

/* Deshabilitar efecto waves (ripple) */
body.dark-mode .waves-effect .waves-ripple {
  display: none !important;
}


/* ========================================
   FIX REPORTS.PHP - Botones sin efecto hover
   ======================================== */

/* Colores fijos para botones en reports.php - hover mantiene el mismo color */
body.dark-mode td.spantitulocontenidoNT .btn-purple:hover,
body.dark-mode td.spantitulocontenidoNT button.btn-purple:hover {
  background-color: #6f42c1 !important;
  border-color: #5e35b1 !important;
  color: #ffffff !important;
}

body.dark-mode td.spantitulocontenidoNT .btn-danger:hover,
body.dark-mode td.spantitulocontenidoNT button.btn-danger:hover {
  background-color: #f46a6a !important;
  border-color: #e05555 !important;
  color: #ffffff !important;
}

body.dark-mode td.spantitulocontenidoNT .btn-success:hover,
body.dark-mode td.spantitulocontenidoNT button.btn-success:hover {
  background-color: #34c38f !important;
  border-color: #2ca87a !important;
  color: #ffffff !important;
}

body.dark-mode td.spantitulocontenidoNT .btn-primary:hover,
body.dark-mode td.spantitulocontenidoNT button.btn-primary:hover {
  background-color: #5d4db3 !important;
  border-color: #4a3d8f !important;
  color: #ffffff !important;
}

body.dark-mode td.spantitulocontenidoNT .btn-warning:hover,
body.dark-mode td.spantitulocontenidoNT button.btn-warning:hover {
  background-color: #f1b44c !important;
  border-color: #dba039 !important;
  color: #ffffff !important;
}

body.dark-mode td.spantitulocontenidoNT .btn-default:hover,
body.dark-mode td.spantitulocontenidoNT button.btn-default:hover {
  background-color: #3a3f55 !important;
  border-color: #4a5065 !important;
  color: #ffffff !important;
}


/* ============================================================
   FIX: PROTECCIÓN DE BOTONES ANTE HOVER DE FILAS
   ============================================================ */

/* 1. Asegurar que los botones NO hereden el fondo de la fila al hacer hover */
body.dark-mode tr:hover .btn,
body.dark-mode td:hover .btn,
body.dark-mode tr:hover button,
body.dark-mode tr:hover .btn-purple,
body.dark-mode tr:hover .btn-primary,
body.dark-mode tr:hover .btn-success,
body.dark-mode tr:hover .btn-danger,
body.dark-mode tr:hover .btn-warning,
body.dark-mode tr:hover .btn-info {
    /* Permitimos que el botón mantenga su propio color definido en sus clases */
    background-color: unset; 
}

/* 2. Forzar que cada botón mantenga su color base SIEMPRE, 
      incluso si hay hover en la fila o en otro botón hermano */
body.dark-mode .btn-purple { background-color: #6f42c1 !important; }
body.dark-mode .btn-primary { background-color: #5d4db3 !important; }
body.dark-mode .btn-success { background-color: #34c38f !important; }
body.dark-mode .btn-danger  { background-color: #f46a6a !important; }
body.dark-mode .btn-warning { background-color: #f1b44c !important; }
body.dark-mode .btn-default { background-color: #3a3f55 !important; }

/* 3. Comportamiento individual en HOVER: 
      Solo el botón bajo el mouse se aclara, los demás se quedan quietos */
body.dark-mode .btn-purple:hover  { background-color: #8359d4 !important; }
body.dark-mode .btn-primary:hover { background-color: #7162c7 !important; }
body.dark-mode .btn-success:hover { background-color: #46d4a0 !important; }
body.dark-mode .btn-danger:hover  { background-color: #f68282 !important; }
body.dark-mode .btn-warning:hover { background-color: #f3c271 !important; }
body.dark-mode .btn-default:hover { background-color: #4a5065 !important; }

/* ============================================================
   ESTILOS ESPECÍFICOS PARA abm_setup_1.php (iframe de configuración)
   ============================================================ */

/* Body del iframe con fondo #CECFBD */
body.dark-mode body[style*="background-color: #CECFBD"],
body.dark-mode body[style*="background-color:#CECFBD"] {
  background-color: #0a0c12 !important;
}

/* Clase tdmarroncontenido - celdas de descripción/configuración */
body.dark-mode .tdmarroncontenido,
body.dark-mode td.tdmarroncontenido,
body.dark-mode table .tdmarroncontenido {
  background-color: #2d3347 !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
}

/* Clase tdblancocontenido - celdas de valores/inputs */
body.dark-mode .tdblancocontenido,
body.dark-mode td.tdblancocontenido,
body.dark-mode table .tdblancocontenido {
  background-color: #1e2230 !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
}

/* Clase spantitulocontenidoNT - títulos de grupo */
body.dark-mode .spantitulocontenidoNT,
body.dark-mode td.spantitulocontenidoNT,
body.dark-mode tr.spantitulocontenidoNT {
  background-color: #1a1d2e !important;
  color: #f0ad4e !important;
  font-weight: bold !important;
  border-bottom: 2px solid #f0ad4e !important;
}

/* Clases de tabla alternadas m-tbl-evn y m-tbl-odd */
body.dark-mode .m-tbl-evn,
body.dark-mode tr.m-tbl-evn td {
  background-color: #1e2230 !important;
  color: #eaeaea !important;
}

body.dark-mode .m-tbl-odd,
body.dark-mode tr.m-tbl-odd td {
  background-color: #252a3a !important;
  color: #eaeaea !important;
}

/* Clases de error en tablas */
body.dark-mode .trErrorEvn,
body.dark-mode tr.trErrorEvn td {
  background-color: #1e2230 !important;
  color: #ff6b6b !important;
  font-weight: bold !important;
}

body.dark-mode .trErrorOdd,
body.dark-mode tr.trErrorOdd td {
  background-color: #252a3a !important;
  color: #ff6b6b !important;
  font-weight: bold !important;
}

/* Tablas con fondo #8C9082 (color gris de borde/contenedor) */
body.dark-mode table[bgcolor="#8C9082"],
body.dark-mode table[bgcolor="#8c9082"],
body.dark-mode td[bgcolor="#8C9082"],
body.dark-mode td[bgcolor="#8c9082"] {
  background-color: #2d3347 !important;
}

/* Tablas anidadas dentro de tdmarroncontenido */
body.dark-mode .tdmarroncontenido table,
body.dark-mode .tdmarroncontenido td {
  background-color: #2d3347 !important;
  color: #eaeaea !important;
}

/* Tablas anidadas dentro de tdblancocontenido */
body.dark-mode .tdblancocontenido table,
body.dark-mode .tdblancocontenido td {
  background-color: #1e2230 !important;
  color: #eaeaea !important;
}

/* Inputs y selects dentro de las celdas de configuración */
body.dark-mode .tdblancocontenido input,
body.dark-mode .tdblancocontenido select,
body.dark-mode .tdblancocontenido textarea {
  background-color: #252a3a !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
}

/* Radio buttons en configuración bool */
body.dark-mode .tdblancocontenido input[type="radio"] {
  accent-color: #e94560 !important;
}

/* Checkbox en configuración */
body.dark-mode .tdblancocontenido input[type="checkbox"] {
  accent-color: #e94560 !important;
}

/* Botón de guardar (fa-save) dentro de la tabla de configuración */
body.dark-mode .tdmarroncontenido .btn-primary,
body.dark-mode .tdblancocontenido .btn-primary {
  background-color: #5d4db3 !important;
  border-color: #4a3d8f !important;
  color: #ffffff !important;
}

/* Hover en botones de guardar */
body.dark-mode .tdmarroncontenido .btn-primary:hover,
body.dark-mode .tdblancocontenido .btn-primary:hover {
  background-color: #7162c7 !important;
  border-color: #5d4db3 !important;
}

/* Icono de guardar - blanco */
body.dark-mode .tdmarroncontenido .btn-primary i,
body.dark-mode .tdblancocontenido .btn-primary i,
body.dark-mode .tdmarroncontenido .btn-primary .fa,
body.dark-mode .tdblancocontenido .btn-primary .fa {
  color: #ffffff !important;
}

/* Texto multilenguaje dentro de las celdas */
body.dark-mode .tdmarroncontenido .multilenguaje,
body.dark-mode .tdblancocontenido .multilenguaje {
  color: #eaeaea !important;
}

/* Font size small para constantes */
body.dark-mode .tdmarroncontenido font[size="1"],
body.dark-mode .tdblancocontenido font[size="1"] {
  color: #9ca3af !important;
}

/* ============================================================
   ESTILOS PARA html.dark-mode (iframes en abm_setup_engine.php)
   ============================================================ */

/* Body del iframe con fondo #CECFBD en html.dark-mode */
html.dark-mode body[style*="background-color: #CECFBD"],
html.dark-mode body[style*="background-color:#CECFBD"] {
  background-color: #13151c !important;
}

/* Clases específicas de abm_setup_1.php en html.dark-mode */
html.dark-mode .tdmarroncontenido,
html.dark-mode td.tdmarroncontenido {
  background-color: #2d3347 !important;
  color: #eaeaea !important;
}

html.dark-mode .tdblancocontenido,
html.dark-mode td.tdblancocontenido {
  background-color: #1e2230 !important;
  color: #eaeaea !important;
}

html.dark-mode .spantitulocontenidoNT,
html.dark-mode td.spantitulocontenidoNT {
  background-color: #1a1d2e !important;
  color: #f0ad4e !important;
  border-bottom: 2px solid #f0ad4e !important;
}

html.dark-mode .m-tbl-evn {
  background-color: #1e2230 !important;
  color: #eaeaea !important;
}

html.dark-mode .m-tbl-odd {
  background-color: #252a3a !important;
  color: #eaeaea !important;
}

html.dark-mode .trErrorEvn {
  background-color: #1e2230 !important;
  color: #ff6b6b !important;
}

html.dark-mode .trErrorOdd {
  background-color: #252a3a !important;
  color: #ff6b6b !important;
}

/* Inputs en html.dark-mode */
html.dark-mode .tdblancocontenido input,
html.dark-mode .tdblancocontenido select,
html.dark-mode .tdblancocontenido textarea {
  background-color: #252a3a !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
}


/* ============================================================
   BADGES Y LABELS - Mantener colores originales en dark mode
   ============================================================ */

/* Bootstrap Badges - mantener colores originales */
body.dark-mode .badge {
  background-color: initial !important;
  color: initial !important;
}

body.dark-mode .badge-success {
  background-color: #5cb85c !important;
  color: #ffffff !important;
}

body.dark-mode .badge-danger {
  background-color: #d9534f !important;
  color: #ffffff !important;
}

body.dark-mode .badge-warning {
  background-color: #f0ad4e !important;
  color: #ffffff !important;
}

body.dark-mode .badge-info {
  background-color: #5bc0de !important;
  color: #ffffff !important;
}

body.dark-mode .badge-primary {
  background-color: #337ab7 !important;
  color: #ffffff !important;
}

/* Labels de Bootstrap (versiones anteriores) */
body.dark-mode .label {
  background-color: initial !important;
  color: initial !important;
}

body.dark-mode .label-success {
  background-color: #5cb85c !important;
  color: #ffffff !important;
}

body.dark-mode .label-danger {
  background-color: #d9534f !important;
  color: #ffffff !important;
}

body.dark-mode .label-warning {
  background-color: #f0ad4e !important;
  color: #ffffff !important;
}

body.dark-mode .label-info {
  background-color: #5bc0de !important;
  color: #ffffff !important;
}

body.dark-mode .label-primary {
  background-color: #337ab7 !important;
  color: #ffffff !important;
}

/* Combinaciones badge + btn-xxx usadas en el proyecto */
body.dark-mode .badge.btn-success,
body.dark-mode .label.btn-success {
  background-color: #5cb85c !important;
  color: #ffffff !important;
}

body.dark-mode .badge.btn-danger,
body.dark-mode .label.btn-danger {
  background-color: #d9534f !important;
  color: #ffffff !important;
}

body.dark-mode .badge.btn-info,
body.dark-mode .label.btn-info {
  background-color: #5bc0de !important;
  color: #ffffff !important;
}

body.dark-mode .badge.btn-warning,
body.dark-mode .label.btn-warning {
  background-color: #f0ad4e !important;
  color: #ffffff !important;
}

body.dark-mode .badge.btn-primary,
body.dark-mode .label.btn-primary {
  background-color: #337ab7 !important;
  color: #ffffff !important;
}

/* Iconos dentro de badges */
body.dark-mode .badge i,
body.dark-mode .label i {
  color: #ffffff !important;
}



/* ============================================================
   TOGGLE SWITCH DARK MODE - Nuevo diseño
   ============================================================ */

/* Contenedor del switch */
.dark-mode-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.dark-mode-container .checkbox {
  opacity: 0;
  position: absolute;
}

.dark-mode-label {
  background-color: #1a1d2e;
  border: 2px solid #3a3f55;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  position: relative;
  height: 26px;
  width: 50px;
  transition: background 0.3s ease, border-color 0.3s ease;
  margin: 0;
}

/* Iconos - Luna (izquierda/modo claro) y Sol (derecha/modo oscuro) */
.dark-mode-label .fa-moon-o {
  color: #f1c40f;
  font-size: 12px;
  z-index: 1;
}

.dark-mode-label .fa-sun-o {
  color: #f39c12;
  font-size: 12px;
  z-index: 1;
}

/* La bolita blanca que se mueve */
.dark-mode-ball {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  transform: translateX(0px);
  transition: transform 0.2s linear, background-color 0.2s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* --- ESTADO ACTIVADO (Modo Oscuro) --- */

.dark-mode-container .checkbox:checked + .dark-mode-label .dark-mode-ball {
  transform: translateX(24px);
  background-color: #eaeaea;
}

.dark-mode-container .checkbox:checked + .dark-mode-label {
  background-color: #242a3a;
  border-color: #ced0bb;
}

/* Efecto Hover */
.dark-mode-label:hover {
  box-shadow: 0 0 8px rgba(93, 77, 179, 0.4);
}


/* ============================================================
   TEXTO ESTADOS - block_ordenes.php
   ============================================================ */

/* textoestadoson - eliminar colores claros en dark mode */
body.dark-mode .textoestadoson {
  color: #eaeaea !important;
  background-color: transparent !important;
}

/* textoestadosoff - por si también necesita ajuste */
body.dark-mode .textoestadosoff {
  color: #9ca3af !important;
  background-color: transparent !important;
}


/* ============================================================
   abm_setup_workflow.php - Combos y elementos de búsqueda
   ============================================================ */

/* Combos (selects) con estilos inline - AGRESIVO */
body.dark-mode select,
body.dark-mode select.form-control,
body.dark-mode select.input,
body.dark-mode SELECT,
body.dark-mode SELECT.form-control,
body.dark-mode form select,
body.dark-mode form SELECT {
  background-color: #252a3a !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
}

/* Opciones dentro de los selects */
body.dark-mode select option,
body.dark-mode select.form-control option,
body.dark-mode SELECT option,
body.dark-mode SELECT OPTION,
body.dark-mode select OPTION {
  background-color: #252a3a !important;
  color: #eaeaea !important;
}

/* Inputs de texto y número */
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input.form-control,
body.dark-mode INPUT.form-control,
body.dark-mode form input[type="text"],
body.dark-mode form input[type="number"] {
  background-color: #252a3a !important;
  color: #eaeaea !important;
  border-color: #3a3f55 !important;
}

/* Tablas con fondo gris claro */
body.dark-mode td[style*="background-color:#D3D3D3"],
body.dark-mode td[style*="background-color: #D3D3D3"],
body.dark-mode TD[style*="#D3D3D3"] {
  background-color: #1e2230 !important;
}

/* Contenedores de formularios */
body.dark-mode form table,
body.dark-mode form td,
body.dark-mode FORM table,
body.dark-mode FORM td {
  background-color: transparent !important;
}

/* Tablas de workflow con bgcolor */
body.dark-mode table[bgcolor],
body.dark-mode td[bgcolor],
body.dark-mode TABLE[bgcolor],
body.dark-mode TD[bgcolor] {
  background-color: #1e2230 !important;
}

/* Elementos con clase text-center dentro de selects */
body.dark-mode select option.text-center,
body.dark-mode SELECT option.text-center {
  background-color: #252a3a !important;
  color: #eaeaea !important;
}

/* FIX específico para selects con estilos inline en workflow */
html.dark-mode select,
html.dark-mode SELECT,
html.dark-mode select.form-control,
html.dark-mode SELECT.form-control {
  background-color: #252a3a !important;
  color: #eaeaea !important;
}

html.dark-mode select option,
html.dark-mode SELECT option,
html.dark-mode SELECT OPTION {
  background-color: #252a3a !important;
  color: #eaeaea !important;
}


/* ============================================================
   FIX: ui-state-default y sorting - DataTables
   ============================================================ */

/* ui-state-default en DataTables - AGRESIVO */
body.dark-mode .ui-state-default,
body.dark-mode th.ui-state-default,
body.dark-mode td.ui-state-default,
body.dark-mode table.dataTable .ui-state-default,
body.dark-mode table.dataTable th.ui-state-default,
body.dark-mode table.dataTable td.ui-state-default,
body.dark-mode .dataTables_wrapper .ui-state-default,
body.dark-mode .dataTables_scrollHead .ui-state-default,
body.dark-mode .dataTables_scrollHeadInner .ui-state-default {
  background-color: #2d3347 !important;
  background: #2d3347 !important;
  color: #ffffff !important;
  border-color: #3a3f55 !important;
}

/* sorting, sorting_asc, sorting_desc, sorting_disabled */
body.dark-mode .sorting,
body.dark-mode .sorting_asc,
body.dark-mode .sorting_desc,
body.dark-mode .sorting_disabled,
body.dark-mode .sorting_asc_disabled,
body.dark-mode .sorting_desc_disabled,
body.dark-mode table.dataTable thead .sorting,
body.dark-mode table.dataTable thead .sorting_asc,
body.dark-mode table.dataTable thead .sorting_desc,
body.dark-mode table.dataTable thead .sorting_disabled,
body.dark-mode table.dataTable thead .sorting_asc_disabled,
body.dark-mode table.dataTable thead .sorting_desc_disabled {
  background-color: #2d3347 !important;
  background: #2d3347 !important;
  color: #ffffff !important;
  border-color: #3a3f55 !important;
}

/* Combinación ui-state-default + sorting */
body.dark-mode .ui-state-default.sorting,
body.dark-mode .ui-state-default.sorting_asc,
body.dark-mode .ui-state-default.sorting_desc,
body.dark-mode .ui-state-default.sorting_disabled,
body.dark-mode th.ui-state-default.sorting,
body.dark-mode th.ui-state-default.sorting_asc,
body.dark-mode th.ui-state-default.sorting_desc,
body.dark-mode th.ui-state-default.sorting_disabled,
body.dark-mode td.ui-state-default.sorting,
body.dark-mode td.ui-state-default.sorting_disabled {
  background-color: #2d3347 !important;
  background: #2d3347 !important;
  color: #ffffff !important;
  border-color: #3a3f55 !important;
}

/* Para iframes - html.dark-mode */
html.dark-mode .ui-state-default,
html.dark-mode th.ui-state-default,
html.dark-mode td.ui-state-default,
html.dark-mode .sorting,
html.dark-mode .sorting_asc,
html.dark-mode .sorting_desc,
html.dark-mode .sorting_disabled,
html.dark-mode table.dataTable thead .sorting,
html.dark-mode table.dataTable thead .sorting_asc,
html.dark-mode table.dataTable thead .sorting_desc,
html.dark-mode table.dataTable thead .sorting_disabled {
  background-color: #2d3347 !important;
  background: #2d3347 !important;
  color: #ffffff !important;
  border-color: #3a3f55 !important;
}

/* Sobrescribir estilos inline de jQuery UI */
body.dark-mode [class*="ui-state-"],
html.dark-mode [class*="ui-state-"] {
  background-color: #2d3347 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #3a3f55 !important;
}


/* ============================================================
   FIX: Iconos de sorting (flechas) en DataTables - VISIBILIDAD
   ============================================================ */

/* Iconos de sorting - forzar visibilidad con filtro invert */
body.dark-mode table.dataTable thead .sorting,
body.dark-mode table.dataTable thead .sorting_asc,
body.dark-mode table.dataTable thead .sorting_desc,
body.dark-mode table.dataTable thead .sorting_asc_disabled,
body.dark-mode table.dataTable thead .sorting_desc_disabled,
body.dark-mode table.dataTable thead th.sorting,
body.dark-mode table.dataTable thead th.sorting_asc,
body.dark-mode table.dataTable thead th.sorting_desc {
  background-image: none !important;
  position: relative !important;
}

/* Crear flechas con CSS pseudo-elementos */
body.dark-mode table.dataTable thead .sorting:after,
body.dark-mode table.dataTable thead .sorting_asc:after,
body.dark-mode table.dataTable thead .sorting_desc:after {
  content: "" !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
}

/* Flecha hacia arriba (ascendente) */
body.dark-mode table.dataTable thead .sorting_asc:after {
  border-bottom: 6px solid #f0ad4e !important;
  border-top: none !important;
}

/* Flecha hacia abajo (descendente) */
body.dark-mode table.dataTable thead .sorting_desc:after {
  border-top: 6px solid #f0ad4e !important;
  border-bottom: none !important;
}

/* Flecha doble (sorting neutral) */
body.dark-mode table.dataTable thead .sorting:after {
  border-top: 4px solid #6b7280 !important;
  border-bottom: none !important;
  opacity: 0.5 !important;
}

/* Hover en headers de sorting */
body.dark-mode table.dataTable thead .sorting:hover:after,
body.dark-mode table.dataTable thead .sorting_asc:hover:after,
body.dark-mode table.dataTable thead .sorting_desc:hover:after {
  opacity: 1 !important;
}

/* Para iframes */
html.dark-mode table.dataTable thead .sorting:after,
html.dark-mode table.dataTable thead .sorting_asc:after,
html.dark-mode table.dataTable thead .sorting_desc:after {
  content: "" !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
}

html.dark-mode table.dataTable thead .sorting_asc:after {
  border-bottom: 6px solid #f0ad4e !important;
}

html.dark-mode table.dataTable thead .sorting_desc:after {
  border-top: 6px solid #f0ad4e !important;
}

html.dark-mode table.dataTable thead .sorting:after {
  border-top: 4px solid #6b7280 !important;
}




/* ============================================================
   FIX SIMPLE: Tabs en block_abm_layout_grupos_derecha
   ============================================================ */

/* Tab inactiva */
body.dark-mode li.tab {
  background-color: #1e2130 !important;
}

body.dark-mode li.tab a,
body.dark-mode li.tab span {
  color: #eaeaea !important;
}

/* Tab activa - FONDO NARANJA, letras blancas */
body.dark-mode li.active.tab,
body.dark-mode li.tab.active {
  background-color: #f0ad4e !important;
  border-color: #f0ad4e !important;
}

body.dark-mode li.active.tab a,
body.dark-mode li.active.tab span,
body.dark-mode li.tab.active a,
body.dark-mode li.tab.active span {
  color: #ffffff !important;
}

/* ========================================
   LOGIN PAGE - Dark Mode Styles
   ======================================== */

/* Fondo del body en login */
html.dark-mode body {
  background-color: #13151c !important;
}

/* Panel principal del login */
html.dark-mode .panel-pages,
html.dark-mode .panel.panel-color.panel-primary.panel-pages {
  background-color: #1e2231 !important;
  box-shadow: 0 0 25px rgba(0,0,0,0.6) !important;
  border-color: #4a5065 !important;
}

html.dark-mode .panel-primary {
  border-color: #4a5065 !important;
}

/* Header del panel */
html.dark-mode .panel-heading {
  background-color: #252a3d !important;
  border-color: #4a5065 !important;
}

/* Body del panel */
html.dark-mode .panel-body {
  background-color: #1e2231 !important;
  color: #eaeaea !important;
}

/* Iconos flotantes sin marco en dark mode */
html.dark-mode .input-group-addon,
html.dark-mode .icono-login {
  background-color: transparent !important;
  border: none !important;
  color: #eaeaea !important;
  box-shadow: none !important;
  font-size: 22px;
  padding-right: 10px;
  min-width: 35px;
  text-align: center;
}

/* Input group con estilo flotante */
html.dark-mode .input-group {
  border-bottom: 1px solid #4a5065;
  background-color: rgba(42, 47, 69, 0.5);
  border-radius: 4px;
  transition: all 0.3s ease;
}

html.dark-mode .input-group:focus-within {
  border-bottom: 1px solid #7b8eff;
  background-color: rgba(42, 47, 69, 0.8);
  box-shadow: 0 2px 8px rgba(123, 142, 255, 0.2);
}

html.dark-mode .input-group .form-control {
  background-color: transparent !important;
  border: none !important;
  color: #eaeaea !important;
  box-shadow: none !important;
}

html.dark-mode .input-group .form-control::placeholder {
  color: #8a8fa8 !important;
}

/* Botón de login */
html.dark-mode .btn-primary {
  background-color: #5d4db3 !important;
  border-color: #4a3d8f !important;
  color: #ffffff !important;
}

/* Links */
html.dark-mode a {
  color: #7b8eff !important;
}