/* ===== Phase 3: dark-mode polish (auto-synthesized) ===== */

/* ---------------------------------------------------------------
   3.1 General text: headings, body copy, muted, links, breadcrumb
   Beats inline WiWO <style>: h1..h6 #1a1d22!important,
   body.admin/.content #3a3d42!important, .text-muted #8a8d92!important.
   Container-level color + inheritance so colored spans/links stay intact.
   --------------------------------------------------------------- */
#wrapper h1, #wrapper h2, #wrapper h3,
#wrapper h4, #wrapper h5, #wrapper h6,
#wrapper .h1, #wrapper .h2, #wrapper .h3,
#wrapper .h4, #wrapper .h5, #wrapper .h6,
.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6 {
  color: var(--ink) !important;
}
body.admin,
#wrapper,
#wrapper .content {
  color: var(--ink) !important;
}
#wrapper .text-muted,
#wrapper small.text-muted,
#wrapper .help-block,
.panel .text-muted,
.panel_s .text-muted,
.dropdown-menu .text-muted {
  color: var(--muted) !important;
}
#wrapper a,
#wrapper .content a,
.breadcrumb a,
.breadcrumb > li > a { color: var(--wiwo-blue); }
#wrapper a:hover, #wrapper a:focus,
.breadcrumb a:hover, .breadcrumb a:focus { color: var(--wiwo-blue-700); }
#wrapper .breadcrumb,
#wrapper .breadcrumb > li,
#wrapper .breadcrumb > .active,
#wrapper .breadcrumb > li.active { color: var(--muted) !important; }

/* Dark-only lift of illegible Tailwind grey text (light intent preserved) */
html[data-theme="dark"] .tw-text-neutral-300,
html[data-theme="dark"] .tw-text-neutral-400,
html[data-theme="dark"] .tw-text-neutral-500,
html[data-theme="dark"] .tw-text-neutral-600,
html[data-theme="dark"] .tw-text-neutral-700,
html[data-theme="dark"] .tw-text-gray-300,
html[data-theme="dark"] .tw-text-gray-400,
html[data-theme="dark"] .tw-text-gray-500,
html[data-theme="dark"] .tw-text-gray-600,
html[data-theme="dark"] .tw-text-gray-700,
html[data-theme="dark"] .\!tw-text-neutral-400,
html[data-theme="dark"] .\!tw-text-neutral-500,
html[data-theme="dark"] .\!tw-text-neutral-600,
html[data-theme="dark"] .\!tw-text-neutral-700 { color: var(--muted) !important; }
html[data-theme="dark"] .tw-text-gray-800,
html[data-theme="dark"] .tw-text-gray-900 { color: var(--ink) !important; }
html[data-theme="dark"] .group:hover .group-hover\:tw-text-neutral-600,
html[data-theme="dark"] .group:hover .group-hover\:tw-text-neutral-700,
html[data-theme="dark"] .group:hover .group-hover\:tw-text-neutral-800,
html[data-theme="dark"] .hover\:tw-text-neutral-600:hover,
html[data-theme="dark"] .hover\:tw-text-neutral-700:hover,
html[data-theme="dark"] .hover\:tw-text-neutral-800:hover,
html[data-theme="dark"] .focus\:tw-text-neutral-700:focus,
html[data-theme="dark"] .focus\:tw-text-neutral-800:focus { color: var(--ink) !important; }
html[data-theme="dark"] .group\/top-search:focus-within .group-focus-within\/top-search\:tw-text-neutral-600 { color: var(--ink) !important; }

/* ---------------------------------------------------------------
   3.2 DataTables — table surface, thead, tbody, hover, pills
   Beats inline .table thead rgba(248,250,215,.3)/#5a5d62,
   tbody hover rgba(59,255,0,.03), td border rgba(0,0,0,.03).
   --------------------------------------------------------------- */
.dataTables_wrapper, div.dataTables_wrapper { background: transparent !important; }
table.dataTable, table.table,
.dataTables_wrapper table.dataTable {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
table.table > thead > tr > th,
.dataTables_wrapper table.dataTable > thead > tr > th,
table.table > thead > tr > td {
  background: var(--surface-container) !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--line) !important;
  border-top: none !important;
  font-weight: var(--weight-nav) !important;
  letter-spacing: .5px !important;
}
table.table > thead > tr > th.sorting_asc,
table.table > thead > tr > th.sorting_desc,
table.table > thead > tr > th:hover {
  color: var(--ink) !important;
  background: var(--surface-container-high) !important;
}
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_desc:after {
  color: var(--ink) !important;
  opacity: .5 !important;
}
table.table > tbody > tr > td,
.dataTables_wrapper table.dataTable > tbody > tr > td {
  color: var(--ink) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  background-color: transparent !important;
  vertical-align: middle !important;
}
table.table > tbody > tr:first-child > td { border-top: none !important; }
table.table > tbody > tr > td .text-muted,
table.table > tbody > tr > td small,
table.table > tbody > tr > td .text-secondary,
table.table > tbody > tr > td .date,
table.table td small,
table.table td .text-muted { color: var(--muted) !important; }
table.table > tbody > tr > td a { color: var(--wiwo-blue) !important; }
table.table > tbody > tr > td a:hover { color: var(--wiwo-blue-700) !important; }
table.table.table-hover > tbody > tr:hover > td,
table.table > tbody > tr:hover > td,
table.dataTable > tbody > tr:hover > td { background: var(--state-hover) !important; }
table.table.table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--surface-2) !important; }
table.table > tbody > tr.selected > td,
table.dataTable > tbody > tr.selected > td { background: var(--state-press) !important; }
table.table > tbody > tr.has-border-left:hover > td:first-child { box-shadow: inset 3px 0 0 var(--wiwo-blue); }

/* Group / "TIPO DE CLIENTE" pills */
table.table td .label.label-default,
.customer-group-list,
span.customer-group-list.label,
table.table td .customer-group-list {
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--shape-full) !important;
  font-weight: var(--weight-meta) !important;
  padding: .28em .7em !important;
  text-shadow: none !important;
}
table.dataTable td.dataTables_empty,
.dataTables_empty,
.dataTables_wrapper .dataTables_processing {
  color: var(--muted) !important;
  background: var(--wiwo-almost-white) !important;
  border-color: var(--line) !important;
}

/* ---------------------------------------------------------------
   3.3 DataTables controls — length select, search, info, pagination
   --------------------------------------------------------------- */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info,
#wrapper .dataTables_wrapper .dataTables_info,
#wrapper .dataTables_wrapper .dataTables_length,
.dataTables_info, .dataTables_length,
.dataTables_filter, .dataTables_filter label { color: var(--muted) !important; }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length select.form-control,
.dataTables_wrapper .dataTables_length select.form-control.input-sm {
  background-color: var(--control-surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--shape-xs) !important;
  height: auto !important;
  padding: 4px 26px 4px 10px !important;
}
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--wiwo-blue) !important;
  box-shadow: 0 0 0 3px var(--focus-glow) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter input[type="search"],
.dataTables_wrapper .dataTables_filter .form-control {
  background: var(--control-surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--shape-xs) !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
  background: var(--control-surface-hover) !important;
  border-color: var(--wiwo-blue) !important;
  box-shadow: 0 0 0 3px var(--focus-glow) !important;
  color: var(--ink) !important;
}
.dataTables_wrapper .dataTables_filter input::placeholder { color: var(--muted) !important; opacity: 1; }
.dataTables_wrapper .dataTables_filter .input-group-addon,
.dataTables_filter .input-group-addon {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--muted) !important;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate a.paginate_button {
  color: var(--ink) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--shape-xs) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover {
  background: var(--state-hover) !important;
  border-color: var(--line) !important;
  color: var(--wiwo-blue) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--wiwo-blue) !important;
  border-color: var(--wiwo-blue) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--muted) !important;
  opacity: var(--disabled-opacity) !important;
  background: transparent !important;
  border-color: transparent !important;
}
.dataTables_paginate .pagination > li > a,
.dataTables_paginate .pagination > li > span {
  color: var(--wiwo-blue) !important;
  background: var(--control-surface) !important;
  border-color: var(--line) !important;
}
.dataTables_paginate .pagination > .active > a,
.dataTables_paginate .pagination > .active > span,
.dataTables_paginate .pagination > .active > a:hover {
  background: var(--wiwo-blue) !important;
  border-color: var(--wiwo-blue) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------
   3.4 DataTables toolbar buttons (Exportar / refresh / colvis /
   Acciones masivas) — real class is .btn-default-dt-options, no CSS
   anywhere = washed out. Plus generic .dt-button / .table-btn paths.
   --------------------------------------------------------------- */
.dt-buttons .dt-button,
button.dt-button, a.dt-button,
.dt-buttons .btn-default-dt-options,
.btn-default-dt-options,
a.btn-default-dt-options, button.btn-default-dt-options,
.table-btn, .bulk-actions-btn.table-btn,
.table-refresh, a.table-refresh,
.dt-toolbar .btn, .dt-custom-toolbar .btn,
.dataTables_wrapper .toolbar .btn,
.dataTables_wrapper .btn-refresh {
  background-color: var(--control-surface) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-control) !important;
  font-weight: var(--weight-nav) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
.dt-buttons .dt-button i, .dt-buttons .dt-button span,
.btn-default-dt-options i, .btn-default-dt-options .fa, .btn-default-dt-options .caret,
.table-btn i, .table-refresh i, .dt-toolbar .btn i { color: inherit !important; }
.btn-default-dt-options .caret { border-top-color: currentColor !important; }
.dt-buttons .dt-button:hover, .dt-buttons .dt-button:focus,
.dt-buttons .dt-button:active, .dt-buttons .dt-button.active,
button.dt-button:hover, a.dt-button:hover,
.btn-default-dt-options:hover, .btn-default-dt-options:focus,
.btn-default-dt-options:active, .btn-default-dt-options.active,
.open > .btn-default-dt-options, .open > .btn-default-dt-options.dropdown-toggle,
.table-btn:hover, .bulk-actions-btn.table-btn:hover,
.table-refresh:hover, .dt-toolbar .btn:hover,
.dataTables_wrapper .toolbar .btn:hover,
.dataTables_wrapper .btn-refresh:hover {
  background-color: var(--control-surface-hover) !important;
  border-color: var(--wiwo-blue) !important;
  color: var(--wiwo-blue) !important;
  box-shadow: none !important;
  outline: none;
}
.btn-default-dt-options[disabled],
.btn-default-dt-options.disabled,
.btn-default-dt-options[disabled]:hover {
  opacity: var(--disabled-opacity) !important;
  background: var(--control-surface) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}
.dt-buttons { background: transparent !important; box-shadow: none !important; }

/* Export collection dropdown (Excel/CSV/PDF/Imprimir) */
.dt-button-collection,
.dt-button-collection.dropdown-menu {
  background: var(--wiwo-almost-white) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--shape-sm) !important;
  box-shadow: var(--shadow-2) !important;
}
.dt-button-collection .dt-button,
.dt-button-collection ul.dropdown-menu > li > .dt-button,
.dt-button-collection > a, .dt-button-collection > button {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--shape-xs) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: var(--weight-meta) !important;
}
.dt-button-collection .dt-button:hover,
.dt-button-collection .dt-button:focus,
.dt-button-collection .dt-button.active,
.dt-button-collection > a:hover {
  background: var(--state-hover) !important;
  color: var(--wiwo-blue) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------
   3.5 .btn-default supplements (bridge sets base surface/text) —
   strip leftover inline glass + add active/open/disabled states.
   --------------------------------------------------------------- */
.btn.btn-default, .btn-group > .btn.btn-default {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn.btn-default i, .btn.btn-default .fa, .btn.btn-default .caret { color: inherit !important; }
.btn.btn-default .caret { border-top-color: currentColor !important; }
.btn.btn-default:active, .btn.btn-default.active,
.btn.btn-default:active:focus, .btn.btn-default.active:focus,
.btn-group.open > .btn.btn-default.dropdown-toggle,
.open > .btn.btn-default.dropdown-toggle,
.btn-group .btn.btn-default.dropdown-toggle.active {
  background: var(--control-surface-hover) !important;
  border-color: var(--wiwo-blue) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  outline: none;
}
.btn.btn-default[disabled], .btn.btn-default.disabled,
fieldset[disabled] .btn.btn-default {
  opacity: var(--disabled-opacity) !important;
  background: var(--control-surface) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------
   3.6 Form controls — inputs/textarea/select, focus, disabled,
   autofill, native pickers. Beats inline glass rgba(255,255,255,.5).
   --------------------------------------------------------------- */
.form-control, input.form-control, textarea.form-control, select.form-control {
  background: var(--control-surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--shape-xs) !important;
  box-shadow: none !important;
}
.form-control:focus, input.form-control:focus,
textarea.form-control:focus, select.form-control:focus {
  background: var(--control-surface-hover) !important;
  border-color: var(--wiwo-blue) !important;
  box-shadow: 0 0 0 3px var(--focus-glow) !important;
  color: var(--ink) !important;
  outline: none !important;
}
.form-control::placeholder, input.form-control::placeholder,
textarea.form-control::placeholder, textarea::placeholder {
  color: var(--muted) !important;
  opacity: 1 !important;
}
.form-control[disabled], .form-control[readonly], .form-control:disabled,
fieldset[disabled] .form-control, select.form-control[disabled] {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}
select.form-control option, select option, .form-control optgroup {
  background: var(--surface-container) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
}
input:-webkit-autofill, input:-webkit-autofill:hover,
input:-webkit-autofill:focus, input:-webkit-autofill:active,
textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
  box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
  caret-color: var(--ink) !important;
  border-color: var(--line) !important;
  transition: background-color 9999s ease-out 0s !important;
}
.input-group-addon, .input-group .input-group-addon {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

/* ---------------------------------------------------------------
   3.7 bootstrap-select (.selectpicker)
   --------------------------------------------------------------- */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select .dropdown-toggle,
.bootstrap-select button.btn.dropdown-toggle {
  background: var(--control-surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--shape-xs) !important;
  box-shadow: none !important;
}
.bootstrap-select .dropdown-toggle:hover,
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select.open > .dropdown-toggle {
  background: var(--control-surface-hover) !important;
  border-color: var(--wiwo-blue) !important;
}
.bootstrap-select .dropdown-toggle .filter-option,
.bootstrap-select .dropdown-toggle .filter-option-inner,
.bootstrap-select .dropdown-toggle .filter-option-inner-inner { color: var(--ink) !important; }
.bootstrap-select .dropdown-toggle .caret { border-top-color: var(--muted) !important; }
.bootstrap-select .dropdown-menu {
  background: var(--wiwo-almost-white) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--shape-sm) !important;
  box-shadow: var(--shadow-2) !important;
}
.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu li a span.text { color: var(--ink) !important; }
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus,
.bootstrap-select .dropdown-menu li.active > a,
.bootstrap-select .dropdown-menu li a.active {
  background: var(--state-hover) !important;
  color: var(--wiwo-blue) !important;
}
.bootstrap-select .dropdown-menu li.selected > a {
  background: var(--state-press) !important;
  color: var(--wiwo-blue) !important;
}
.bootstrap-select .bs-searchbox .form-control,
.bootstrap-select .dropdown-menu .bs-searchbox input {
  background: var(--control-surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.bootstrap-select .no-results { background: transparent !important; color: var(--muted) !important; }

/* ---------------------------------------------------------------
   3.8 Checkboxes / radios (Perfex ::before box + ::after glyph)
   --------------------------------------------------------------- */
.checkbox input[type="checkbox"] + label::before,
.checkbox input[type="radio"] + label::before,
.radio input[type="radio"] + label::before,
.checkbox-primary input[type="checkbox"] + label::before,
.checkbox-danger input[type="checkbox"] + label::before,
.checkbox-success input[type="checkbox"] + label::before,
.checkbox-warning input[type="checkbox"] + label::before,
.checkbox-info input[type="checkbox"] + label::before {
  background: var(--control-surface) !important;
  border: 1.5px solid var(--line) !important;
}
.checkbox input[type="checkbox"]:checked + label::before,
.checkbox input[type="radio"]:checked + label::before,
.radio input[type="radio"]:checked + label::before,
.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="checkbox"]:checked + label::before {
  background: var(--wiwo-blue) !important;
  border-color: var(--wiwo-blue) !important;
}
.checkbox-danger input[type="checkbox"]:checked + label::before {
  background: var(--danger) !important; border-color: var(--danger) !important;
}
.checkbox-success input[type="checkbox"]:checked + label::before {
  background: var(--wiwo-green) !important; border-color: var(--wiwo-green) !important;
}
.checkbox-warning input[type="checkbox"]:checked + label::before {
  background: var(--warn) !important; border-color: var(--warn) !important;
}
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after,
.radio input[type="radio"]:checked + label::after,
.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="checkbox"]:checked + label::after { color: #fff !important; }
.checkbox-success input[type="checkbox"]:checked + label::after { color: var(--wiwo-ink) !important; }
.checkbox label, .radio label, .checkbox-inline, .radio-inline { color: var(--ink); }

/* ---------------------------------------------------------------
   3.9 On/Off toggle switches (ACTIVO column)
   Literal #fff knob (token knob is dark in dark and would vanish).
   --------------------------------------------------------------- */
.onoffswitch .onoffswitch-label,
.onoffswitch-checkbox + .onoffswitch-label {
  background-color: var(--surface-2) !important;
  border-color: var(--line) !important;
}
.onoffswitch .onoffswitch-label::before,
.onoffswitch-checkbox + .onoffswitch-label::before {
  background-color: #ffffff !important;
  border-color: var(--line) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.28) !important;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
  background-color: var(--wiwo-blue) !important;
  border-color: var(--wiwo-blue) !important;
}
.onoffswitch-checkbox:checked + .onoffswitch-label::before {
  background-color: #ffffff !important;
  border-color: var(--wiwo-blue) !important;
}
.onoffswitch-checkbox:disabled + .onoffswitch-label { opacity: .55 !important; }

/* ---------------------------------------------------------------
   3.10 Top global search (#top_search) — double-id beats
   !tw-bg-neutral-100 / !tw-border-white / tw-text-neutral-800.
   --------------------------------------------------------------- */
#top_search #search_input,
#top_search input#search_input[type="search"],
input#search_input, input#search_input:focus {
  background: var(--control-surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--shape-sm) !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#top_search #search_input::placeholder,
#top_search #search_input::-webkit-input-placeholder,
input#search_input::placeholder {
  color: var(--muted) !important;
  opacity: 1 !important;
}
#top_search #search_input:hover {
  background: var(--control-surface-hover) !important;
  border-color: var(--line) !important;
}
#top_search #search_input:focus,
#top_search #search_input:focus-visible {
  background: var(--control-surface-hover) !important;
  border-color: var(--wiwo-blue) !important;
  box-shadow: 0 0 0 3px var(--focus-glow) !important;
  outline: none !important;
}
#top_search #top_search_button { z-index: 3; }
#top_search #top_search_button button {
  background: transparent !important;
  border: 0 !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  outline: none !important;
}
#top_search #top_search_button button i,
#top_search #top_search_button button i.fa,
#top_search #top_search_button button i.fa-search { color: var(--muted) !important; }
#top_search:focus-within #top_search_button button,
#top_search:focus-within #top_search_button button i,
#top_search #search_input:hover ~ #top_search_button button i { color: var(--wiwo-blue) !important; }
#top_search #search_results,
#top_search ul.search-results,
#top_search ul#search-history,
#top_search_dropdown {
  background: var(--surface-container) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--shape-sm) !important;
  box-shadow: var(--shadow-2) !important;
}
#top_search ul.search-results > li > a,
#top_search ul#search-history > li > a { color: var(--ink) !important; background: transparent !important; }
#top_search ul.search-results > li > a:hover,
#top_search ul.search-results > li.active > a,
#top_search ul#search-history > li > a:hover {
  background: var(--state-hover) !important;
  color: var(--ink) !important;
}

/* ---------------------------------------------------------------
   3.11 Stat tiles (clients summary row, 6-col grid). Scoped so
   global .text-* elsewhere is untouched. Green as text only in dark.
   --------------------------------------------------------------- */
.tw-grid.lg\:tw-grid-cols-6 > div {
  background-color: var(--surface-container) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--shape-sm) !important;
  box-shadow: var(--shadow-1) !important;
  color: var(--ink);
  transition: background-color var(--motion-fast) var(--ease-expressive),
              border-color var(--motion-fast) var(--ease-expressive),
              box-shadow var(--motion-fast) var(--ease-expressive);
}
.tw-grid.lg\:tw-grid-cols-6 > div:hover {
  background-color: var(--surface-container-high) !important;
  border-color: var(--wiwo-blue) !important;
  box-shadow: var(--shadow-2) !important;
}
.tw-grid.lg\:tw-grid-cols-6 > div > .tw-font-semibold,
.tw-grid.lg\:tw-grid-cols-6 > div span.tw-font-semibold {
  color: var(--ink) !important;
  font-weight: var(--weight-display) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.tw-grid.lg\:tw-grid-cols-6 > div .text-dark { color: var(--ink) !important; }
.tw-grid.lg\:tw-grid-cols-6 > div .text-muted,
.tw-grid.lg\:tw-grid-cols-6 > div .text-muted .text-has-action { color: var(--muted) !important; }
.tw-grid.lg\:tw-grid-cols-6 .text-success {
  color: var(--ok) !important; font-weight: var(--weight-meta) !important;
}
html[data-theme="dark"] .tw-grid.lg\:tw-grid-cols-6 .text-success { color: var(--wiwo-green) !important; }
.tw-grid.lg\:tw-grid-cols-6 .text-danger {
  color: var(--danger) !important; font-weight: var(--weight-meta) !important;
}
html[data-theme="dark"] .tw-grid.lg\:tw-grid-cols-6 .text-danger { color: var(--error) !important; }
.tw-grid.lg\:tw-grid-cols-6 .text-info {
  color: var(--wiwo-blue) !important; font-weight: var(--weight-meta) !important;
}
html[data-theme="dark"] .tw-grid.lg\:tw-grid-cols-6 .text-info { color: var(--accent-sky) !important; }
/* ===== 3.9 App shell background: force solid dark in dark mode =====
   Kills any light body/wrapper/content background or gradient (e.g. vendor
   body{background:#f4f4f4}) so the content area matches the shell and text
   (ink=beige) stays legible. Light mode untouched. */
html[data-theme="dark"] body,
html[data-theme="dark"] body.app,
html[data-theme="dark"] body.admin,
html[data-theme="dark"] #wrapper,
html[data-theme="dark"] #wrapper > .content,
html[data-theme="dark"] .content {
  background-color: var(--surface) !important;
  background-image: none !important;
}

/* ===== 3.12 FullCalendar (v6) — dark theme =====
   Fixes the glaring white "other-month"/disabled cells and themes the
   grid, headers, toolbar buttons and popovers with Neo tokens. Light
   mode is left untouched (the default FC look is fine there). */
html[data-theme="dark"] .fc {
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--surface-2);
  --fc-neutral-text-color: var(--muted);
  --fc-border-color: var(--line);
  --fc-today-bg-color: rgba(66, 66, 255, .16);
  --fc-now-indicator-color: var(--wiwo-green);
  --fc-list-event-hover-bg-color: var(--state-hover);
  --fc-highlight-color: var(--state-hover);
  --fc-more-link-bg-color: var(--surface-container);
  --fc-more-link-text-color: var(--wiwo-blue);
  color: var(--ink) !important;
}
/* grid frame + scroll container */
html[data-theme="dark"] .fc .fc-scrollgrid,
html[data-theme="dark"] .fc .fc-scrollgrid-section > *,
html[data-theme="dark"] .fc td,
html[data-theme="dark"] .fc th {
  border-color: var(--line) !important;
}
/* day cells: in-month transparent (shows dark shell), kill any white */
html[data-theme="dark"] .fc .fc-daygrid-day,
html[data-theme="dark"] .fc .fc-daygrid-day-frame,
html[data-theme="dark"] .fc .fc-daygrid-day-bg,
html[data-theme="dark"] .fc .fc-timegrid-col,
html[data-theme="dark"] .fc .fc-daygrid-body,
html[data-theme="dark"] .fc .fc-col-header-cell {
  background-color: transparent !important;
}
/* other-month + disabled: a whisper-light wash (NOT a dark hole) so the month
   boundary reads without the cells looking black. */
html[data-theme="dark"] .fc .fc-day-other,
html[data-theme="dark"] .fc .fc-day-disabled,
html[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-frame {
  background-color: rgba(255, 255, 255, .028) !important;
}
html[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-top { opacity: .5; }
/* today cell + column-header day names + day numbers */
html[data-theme="dark"] .fc .fc-day-today { background-color: var(--fc-today-bg-color) !important; }
html[data-theme="dark"] .fc .fc-col-header-cell-cushion,
html[data-theme="dark"] .fc .fc-daygrid-day-number,
html[data-theme="dark"] .fc .fc-timegrid-axis-cushion,
html[data-theme="dark"] .fc .fc-timegrid-slot-label-cushion { color: var(--ink) !important; }
html[data-theme="dark"] .fc .fc-toolbar-title { color: var(--ink) !important; }
/* toolbar buttons (Hoy / Expandir / Mes / Semana / Día / Filtrar) */
html[data-theme="dark"] .fc .fc-button-primary {
  background-color: var(--control-surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .fc .fc-button-primary:hover {
  background-color: var(--control-surface-hover) !important;
  border-color: var(--wiwo-blue) !important;
}
html[data-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active,
html[data-theme="dark"] .fc .fc-button-primary:not(:disabled):active {
  background-color: var(--wiwo-blue) !important;
  border-color: var(--wiwo-blue) !important;
  color: #fff !important;
}
html[data-theme="dark"] .fc .fc-button-primary:disabled {
  background-color: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}
/* "+N más" link + the day popover it opens */
html[data-theme="dark"] .fc .fc-daygrid-more-link { color: var(--wiwo-blue) !important; }
html[data-theme="dark"] .fc-popover,
html[data-theme="dark"] .fc-popover .fc-popover-body {
  background-color: var(--surface-container) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .fc-popover .fc-popover-header {
  background-color: var(--surface-container-high) !important;
  color: var(--ink) !important;
}
/* list view rows */
html[data-theme="dark"] .fc .fc-list,
html[data-theme="dark"] .fc .fc-list-table td { border-color: var(--line) !important; }
html[data-theme="dark"] .fc .fc-list-day-cushion { background-color: var(--surface-2) !important; color: var(--ink) !important; }
html[data-theme="dark"] .fc .fc-list-event:hover td { background-color: var(--state-hover) !important; }

/* ============================================================
   Section 4 — Long tail: shared widgets across ALL modules.
   Dark only; each override beats vendor CSS via !important +
   specificity. Light mode untouched.
   ============================================================ */

/* ===== 4.1 bootstrap-select (selectpicker) — used on every form ===== */
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-default {
  background-color: var(--control-surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle .filter-option,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle .filter-option-inner-inner { color: var(--ink) !important; }
html[data-theme="dark"] .bootstrap-select .dropdown-toggle .caret { border-top-color: var(--muted) !important; }
html[data-theme="dark"] .bootstrap-select .dropdown-menu li a.selected,
html[data-theme="dark"] .bootstrap-select .dropdown-menu li.selected > a {
  background-color: var(--state-press) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-menu li a:hover,
html[data-theme="dark"] .bootstrap-select .dropdown-menu li a:focus {
  background-color: var(--state-hover) !important;
  color: var(--wiwo-blue) !important;
}
html[data-theme="dark"] .bs-searchbox .form-control {
  background-color: var(--control-surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .bootstrap-select .no-results { color: var(--muted) !important; background: transparent !important; }
html[data-theme="dark"] .bs-actionsbox .btn,
html[data-theme="dark"] .bs-donebutton .btn { color: var(--ink) !important; }
html[data-theme="dark"] .dropdown-header { color: var(--muted) !important; }
html[data-theme="dark"] .dropdown-menu .divider { background-color: var(--line) !important; }

/* ===== 4.2 Bootstrap popover (white -> dark surface) ===== */
html[data-theme="dark"] .popover {
  background-color: var(--surface-container) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-2) !important;
}
html[data-theme="dark"] .popover-title {
  background-color: var(--surface-container-high) !important;
  border-bottom-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .popover-content { color: var(--ink) !important; }
/* arrow colors must match the popover surface on each side */
html[data-theme="dark"] .popover.top > .arrow:after   { border-top-color: var(--surface-container) !important; }
html[data-theme="dark"] .popover.bottom > .arrow:after { border-bottom-color: var(--surface-container-high) !important; }
html[data-theme="dark"] .popover.right > .arrow:after  { border-right-color: var(--surface-container) !important; }
html[data-theme="dark"] .popover.left > .arrow:after   { border-left-color: var(--surface-container) !important; }
html[data-theme="dark"] .popover.top > .arrow    { border-top-color: var(--line) !important; }
html[data-theme="dark"] .popover.bottom > .arrow { border-bottom-color: var(--line) !important; }
html[data-theme="dark"] .popover.right > .arrow  { border-right-color: var(--line) !important; }
html[data-theme="dark"] .popover.left > .arrow   { border-left-color: var(--line) !important; }

/* ===== 4.3 Bootstrap tooltip — consistent Neo surface ===== */
html[data-theme="dark"] .tooltip-inner {
  background-color: var(--surface-container-high) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-1);
}
html[data-theme="dark"] .tooltip.top .tooltip-arrow    { border-top-color: var(--surface-container-high) !important; }
html[data-theme="dark"] .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--surface-container-high) !important; }
html[data-theme="dark"] .tooltip.left .tooltip-arrow   { border-left-color: var(--surface-container-high) !important; }
html[data-theme="dark"] .tooltip.right .tooltip-arrow  { border-right-color: var(--surface-container-high) !important; }

/* ===== 4.4 xdsoft datetimepicker (white calendar popup -> dark) ===== */
html[data-theme="dark"] .xdsoft_datetimepicker {
  background-color: var(--surface-container) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-2) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td,
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar th,
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time {
  background-color: transparent !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar th { color: var(--muted) !important; }
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month,
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled { color: var(--muted) !important; opacity: .5; }
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td:hover,
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time:hover {
  background-color: var(--wiwo-blue) !important;
  color: #fff !important;
}
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { color: var(--wiwo-blue) !important; font-weight: 700; }
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time.xdsoft_current {
  background-color: var(--wiwo-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label { color: var(--ink) !important; background-color: transparent !important; }
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
  background-color: var(--surface-container) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select .xdsoft_option.xdsoft_current { background-color: var(--wiwo-blue) !important; }
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box { border-color: var(--line) !important; }

/* ===== 4.5 Kanban boards (tasks / leads) ===== */
html[data-theme="dark"] .kan-ban-col,
html[data-theme="dark"] .kan-ban-content-wrapper,
html[data-theme="dark"] .kan-ban-content {
  background-color: var(--surface-2) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .kan-ban-col .kan-ban-header,
html[data-theme="dark"] .kan-ban-col h4,
html[data-theme="dark"] .kan-ban-col .kanban-title { color: var(--ink) !important; }
html[data-theme="dark"] .kanban-empty { color: var(--muted) !important; }

/* ===== 4.6 Tabs (content pane + horizontal scroller arrows) ===== */
html[data-theme="dark"] .tab-content { background-color: transparent !important; color: var(--ink); }
html[data-theme="dark"] .horizontal-scrollable-tabs .arrow-left,
html[data-theme="dark"] .horizontal-scrollable-tabs .arrow-right {
  background-color: var(--surface-container) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .nav-tabs > li > a { color: var(--muted) !important; }
html[data-theme="dark"] .nav-tabs > li > a:hover { color: var(--ink) !important; background: var(--state-hover) !important; border-color: transparent !important; }

/* ===== 4.7 DataTables export buttons + collection dropdown ===== */
html[data-theme="dark"] .dt-buttons .dt-button,
html[data-theme="dark"] .dt-button {
  background-color: var(--control-surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background-image: none !important;
}
html[data-theme="dark"] .dt-buttons .dt-button:hover { background-color: var(--control-surface-hover) !important; border-color: var(--wiwo-blue) !important; }
html[data-theme="dark"] div.dt-button-collection {
  background-color: var(--surface-container) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-2) !important;
}
html[data-theme="dark"] div.dt-button-collection .dt-button { color: var(--ink) !important; }
html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_length label,
html[data-theme="dark"] .dataTables_filter label,
html[data-theme="dark"] .dataTables_paginate { color: var(--muted) !important; }
html[data-theme="dark"] .dataTables_paginate .paginate_button { color: var(--ink) !important; }

/* ===== 4.8 TinyMCE chrome (toolbar/menubar/statusbar -> dark) =====
   Editing area is an iframe (kept as a light "paper", like Docs);
   only the surrounding chrome is themed to match the panel. */
html[data-theme="dark"] .tox.tox-tinymce {
  border-color: var(--line) !important;
  border-radius: var(--shape-sm) !important;
}
html[data-theme="dark"] .tox .tox-editor-header,
html[data-theme="dark"] .tox .tox-toolbar,
html[data-theme="dark"] .tox .tox-toolbar__primary,
html[data-theme="dark"] .tox .tox-toolbar-overlord,
html[data-theme="dark"] .tox .tox-menubar,
html[data-theme="dark"] .tox .tox-statusbar {
  background-color: var(--surface-container) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .tox .tox-tbtn,
html[data-theme="dark"] .tox .tox-mbtn,
html[data-theme="dark"] .tox .tox-statusbar a,
html[data-theme="dark"] .tox .tox-statusbar__text-container { color: var(--ink) !important; }
html[data-theme="dark"] .tox .tox-tbtn svg,
html[data-theme="dark"] .tox .tox-mbtn svg { fill: var(--ink) !important; }
html[data-theme="dark"] .tox .tox-tbtn:hover,
html[data-theme="dark"] .tox .tox-mbtn:hover { background-color: var(--state-hover) !important; }

/* ===== 4.9 @mention dropdown (task/ticket comments) ===== */
html[data-theme="dark"] .atwho-view,
html[data-theme="dark"] .tribute-container ul {
  background-color: var(--surface-container) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-2) !important;
}
html[data-theme="dark"] .atwho-view .cur,
html[data-theme="dark"] .tribute-container li.highlight { background-color: var(--state-hover) !important; color: var(--wiwo-blue) !important; }

/* ===== 4.10 Misc surfaces that carry hardcoded light bg ===== */
html[data-theme="dark"] .panel-full,
html[data-theme="dark"] .tile-stats,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .no-margin.panel_s {
  background-color: var(--wiwo-almost-white) !important;
  border-color: var(--line) !important;
  color: var(--ink);
}
html[data-theme="dark"] .table > tbody > tr > td .text-dark,
html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { color: var(--ink); }

/* ===== 4.11 Dashboard/project tabs — inline WiWO CSS hardcodes a
   white tablist bar (head.php `ul[role="tablist"]{background:#fff}`).
   Override for dark: transparent bar, muted tabs, blue underline. ===== */
html[data-theme="dark"] ul[role="tablist"],
html[data-theme="dark"] .horizontal-scrollable-tabs ul.nav-tabs-horizontal {
  background: transparent !important;
  border-bottom-color: var(--line) !important;
}
/* belt-and-suspenders: force EVERY tab wrapper/li/a transparent in dark so no
   hardcoded white pill survives, whatever its source */
html[data-theme="dark"] .horizontal-scrollable-tabs,
html[data-theme="dark"] .panel-full-width-tabs,
html[data-theme="dark"] .horizontal-tabs,
html[data-theme="dark"] ul[role="tablist"] > li,
html[data-theme="dark"] ul[role="tablist"] > li > a,
html[data-theme="dark"] .nav-tabs-horizontal > li,
html[data-theme="dark"] .nav-tabs-horizontal > li > a {
  background-color: transparent !important;
}
html[data-theme="dark"] .nav-tabs.project-tabs > li > a,
html[data-theme="dark"] ul[role="tablist"] > li > a { color: var(--muted) !important; }
html[data-theme="dark"] ul[role="tablist"] > li.active > a,
html[data-theme="dark"] ul[role="tablist"] > li > a[aria-selected="true"],
html[data-theme="dark"] .nav-tabs.project-tabs > li.active > a {
  color: var(--ink) !important;
  border-bottom-color: var(--wiwo-blue) !important;
  background: transparent !important;
}
html[data-theme="dark"] ul[role="tablist"] > li > a:hover {
  color: var(--ink) !important;
  background: var(--state-hover) !important;
  border-bottom-color: var(--wiwo-blue) !important;
}
html[data-theme="dark"] ul[role="tablist"] > li > a .menu-icon { color: inherit !important; }

/* ===== 4.12 Dashboard stat cards — inline WiWO CSS hardcodes light
   text (#1e293b number, #64748b label). Make legible on dark cards. ===== */
html[data-theme="dark"] .top_stats_wrapper .tw-font-semibold,
html[data-theme="dark"] .top_stats_wrapper:hover .tw-font-semibold { color: var(--ink) !important; }
html[data-theme="dark"] .top_stats_wrapper .tw-truncate { color: var(--muted) !important; }
html[data-theme="dark"] .top_stats_wrapper:hover .tw-truncate { color: var(--ink) !important; }
html[data-theme="dark"] .top_stats_wrapper .progress.progress-bar-mini { background: rgba(255, 255, 255, .08) !important; }
html[data-theme="dark"] .top_stats_wrapper:hover .progress.progress-bar-mini { background: rgba(255, 255, 255, .12) !important; }