/*
 * onnix-v2 — reemplaza la paleta morada de stock de Sneat (#696cff)
 * por la paleta azul de OnnixConnect (var(--primary), ver tokens.css).
 * Se carga DESPUÉS de theme-default.css / demo.css para ganar cascada.
 * Cubre: botones, links, badges, menu activo, focus rings, checks,
 * paginación, tabs y estados hover/active de Bootstrap 5 + Sneat.
 */

:root {
  --bs-primary: var(--primary);
  --bs-primary-rgb: 37, 99, 235; /* #2563EB */
}

/* Bug real: los *-bg-subtle de Bootstrap (usados por .bg-success-subtle,
   .bg-danger-subtle, .badge, .alert, .list-group, etc. — badges de estado en
   OnnixConnect/Integraciones, tarjetas resumen de notificaciones SIFEN) solo
   estan definidos UNA vez en :root del core.css de Sneat (pasteles fijos,
   ej. --bs-danger-bg-subtle:#ffd8d2), sin ningun override para modo oscuro.
   Quedan como isla pastel clara encima del resto de la app oscura. */
html.dark {
  --bs-primary-bg-subtle: color-mix(in srgb, var(--primary) 22%, var(--bg-elevated));
  --bs-secondary-bg-subtle: var(--bg-elevated);
  --bs-success-bg-subtle: color-mix(in srgb, var(--success) 22%, var(--bg-elevated));
  --bs-info-bg-subtle: color-mix(in srgb, var(--primary) 22%, var(--bg-elevated));
  --bs-warning-bg-subtle: color-mix(in srgb, var(--warning) 22%, var(--bg-elevated));
  --bs-danger-bg-subtle: color-mix(in srgb, var(--danger) 22%, var(--bg-elevated));
  --bs-light-bg-subtle: var(--bg-elevated);
  --bs-dark-bg-subtle: var(--bg-page);
  --bs-primary-text-emphasis: var(--primary);
  --bs-success-text-emphasis: var(--success);
  --bs-info-text-emphasis: var(--primary);
  --bs-warning-text-emphasis: var(--warning);
  --bs-danger-text-emphasis: var(--danger);
  /* core.css light fija #d9dee3 — partials (soporte) y borders BS lo usan */
  --bs-border-color: var(--border-color);
  --bs-border-color-translucent: var(--border-color);
  --bs-body-color: var(--text-body);
  --bs-body-bg: var(--bg-page);
  --bs-secondary-bg: var(--bg-elevated);
  --bs-tertiary-bg: var(--bg-elevated);
}

/* --------------------------------------------------------------------------
   Modales Bootstrap (shared) — layouts + partials + módulos
   --------------------------------------------------------------------------
   Bug real: Sneat carga SIEMPRE core.css (light). Ahí `.modal` define
   `--bs-modal-bg: #fff` y `.modal .btn-close { background-color: #fff }`.
   theme-toggle.js solo pone `html.dark` + `data-bs-theme` — NO swappea a
   core-dark.css. Resultado: tarjeta blanca + cabeceras/selects claros.

   Vars en `html.dark .modal` (Bootstrap las declara en `.modal`).
   Patrón canónico (soporte-modal): surface / text-* / border / elevated.
   Cubre: #customModal, #modal*, #soporteModal, #modal-enviar-mensaje-wa,
   y cualquier .modal fade de módulo/partial.
   -------------------------------------------------------------------------- */
html.dark .modal {
  --bs-modal-color: var(--text-body);
  --bs-modal-bg: var(--bg-surface);
  --bs-modal-border-color: var(--border-color);
  --bs-modal-header-border-color: var(--border-color);
  --bs-modal-footer-border-color: var(--border-color);
  --bs-modal-box-shadow: var(--shadow-card);
}

html.dark .modal-content {
  background-color: var(--bg-surface);
  color: var(--text-body);
  /* Sneat/core fijan borde claro o lo diluyen vs --bg-surface */
  border: 1px solid var(--border-color) !important;
}

/* Light + dark: borde del modal siempre del token (no solo header/footer) */
.onnix-v2 .modal-content {
  border: 1px solid var(--border-color) !important;
}

/* Cabeceras / footers — fondo + borde + título (Luis: headers internos)
   EXCEPCIÓN: .bg-success|warning|info|… semánticos (form producto, compras
   #modalCrearProducto). No forzar --bg-surface encima del color Bootstrap. */
html.dark .modal-header:not(.bg-success):not(.bg-warning):not(.bg-info):not(.bg-primary):not(.bg-danger):not(.bg-secondary) {
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-heading);
}
html.dark .modal-footer {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-heading);
}
html.dark .modal-title,
html.dark .modal-message,
html.dark .modal-header h1,
html.dark .modal-header h2,
html.dark .modal-header h3,
html.dark .modal-header h4,
html.dark .modal-header h5,
html.dark .modal-header h6 {
  color: var(--text-heading);
}
/* Contraste de título sobre cabeceras coloreadas (customModal + modales propios) */
html.dark .modal-header.bg-success .modal-title,
html.dark .modal-header.bg-success h1,
html.dark .modal-header.bg-success h2,
html.dark .modal-header.bg-success h3,
html.dark .modal-header.bg-success h4,
html.dark .modal-header.bg-success h5,
html.dark .modal-header.bg-success h6,
html.dark .modal-header.bg-info .modal-title,
html.dark .modal-header.bg-info h1,
html.dark .modal-header.bg-info h2,
html.dark .modal-header.bg-info h3,
html.dark .modal-header.bg-info h4,
html.dark .modal-header.bg-info h5,
html.dark .modal-header.bg-info h6,
html.dark .modal-header.bg-primary .modal-title,
html.dark .modal-header.bg-primary h5,
html.dark .modal-header.bg-danger .modal-title,
html.dark .modal-header.bg-danger h5 {
  color: #fff !important;
}
html.dark .modal-header.bg-warning,
html.dark .modal-header.bg-warning .modal-title,
html.dark .modal-header.bg-warning h1,
html.dark .modal-header.bg-warning h2,
html.dark .modal-header.bg-warning h3,
html.dark .modal-header.bg-warning h4,
html.dark .modal-header.bg-warning h5,
html.dark .modal-header.bg-warning h6,
html.dark .modal-header.bg-warning.text-dark,
html.dark .modal-header.bg-warning .text-dark {
  color: #1a1a2e !important;
}
html.dark .modal-body {
  color: var(--text-body);
  background-color: var(--bg-surface);
}

/* Sneat: chip X con #fff fijo → elevated + SVG invertido */
html.dark .modal .btn-close {
  background-color: var(--bg-elevated);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.35);
  filter: invert(1) grayscale(100%);
  opacity: 0.85;
}
html.dark .modal .btn-close:hover,
html.dark .modal .btn-close:focus,
html.dark .modal .btn-close:active {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Controles DENTRO de modales (select / inputs / input-group / list-group)
   Partials personas/* cargan <select class="form-control"> y .select2 en
   #customModal; soporte usa select.soporte-field; WA usa input-group-text.
   Proyecto: native select + select2 + bootstrap-select (NO chosen/tom-select).
   -------------------------------------------------------------------------- */
html.dark .modal .form-control,
html.dark .modal .form-select,
html.dark .modal select.form-control,
html.dark .modal select.form-select,
html.dark .modal select,
html.dark .modal textarea.form-control,
html.dark .modal input.form-control {
  background-color: var(--bg-elevated) !important;
  border-color: var(--input-border) !important;
  color: var(--text-body) !important;
}
html.dark .modal .form-control:focus,
html.dark .modal .form-select:focus,
html.dark .modal select:focus,
html.dark .modal textarea.form-control:focus {
  background-color: var(--bg-surface) !important;
  border-color: var(--primary) !important;
  color: var(--text-body) !important;
  box-shadow: 0 0 0 3px var(--primary-shadow);
}
html.dark .modal .form-control::placeholder,
html.dark .modal textarea.form-control::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}
html.dark .modal select option {
  background-color: var(--bg-elevated);
  color: var(--text-body);
}
html.dark .modal .form-label,
html.dark .modal label,
html.dark .modal .form-text {
  color: var(--text-label);
}
html.dark .modal .form-text {
  color: var(--text-muted);
}
html.dark .modal .input-group-text {
  background-color: var(--bg-elevated) !important;
  border-color: var(--input-border) !important;
  color: var(--text-muted) !important;
}
html.dark .modal .list-group-item {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color) !important;
  color: var(--text-body);
}
html.dark .modal .list-group-item:hover,
html.dark .modal .list-group-item.active {
  background-color: var(--bg-elevated);
  color: var(--text-heading);
  border-color: var(--border-color) !important;
}

/* List-group fuera de modal (páginas / cards) — mismo borde visible */
html.dark .list-group-item {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color) !important;
  color: var(--text-body);
}

/* Select2 dentro del modal (selection) — dropdownParent suele ser .modal */
html.dark .modal .select2-container--default .select2-selection--single,
html.dark .modal .select2-container--default .select2-selection--multiple {
  background-color: var(--bg-elevated) !important;
  border-color: var(--input-border) !important;
  color: var(--text-body) !important;
}
html.dark .modal .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark .modal .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: var(--text-body) !important;
}
html.dark .modal .select2-container--default .select2-selection__placeholder {
  color: var(--text-muted) !important;
}
/* Multiselect “Asignar a”: chips + buscador inline (fondo blanco default del plugin) */
html.dark .modal .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--primary-tint) !important;
  border: 1px solid var(--primary-shadow) !important;
  color: var(--text-body) !important;
}
html.dark .modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--text-muted) !important;
}
html.dark .modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--danger) !important;
}
html.dark .modal .select2-container--default .select2-search--inline .select2-search__field {
  background: transparent !important;
  color: var(--text-body) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
html.dark .modal .select2-container--default .select2-search--inline .select2-search__field::placeholder {
  color: var(--text-muted) !important;
}

/* Select2 dropdown (appendTo modal/body) + bootstrap-select menu — dark global */
html.dark .select2-dropdown {
  background-color: var(--bg-elevated) !important;
  border-color: var(--input-border) !important;
  color: var(--text-body) !important;
}
html.dark .select2-search--dropdown .select2-search__field {
  background-color: var(--bg-surface) !important;
  border-color: var(--input-border) !important;
  color: var(--text-body) !important;
}
html.dark .select2-results__option {
  color: var(--text-body);
}
html.dark .select2-results__option[aria-selected="true"] {
  background-color: var(--primary-tint) !important;
  color: var(--text-body) !important;
}
html.dark .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary) !important;
  color: #fff !important;
}

/* Buscador Cliente (modal nueva tarea CRM): panel + tabla de resultados */
html.dark .modal #div_buscador_tarea .input-group,
html.dark .modal #div_buscador_tarea {
  background: transparent !important;
  color: var(--text-body);
}
html.dark .modal #resultado_buscador_tarea {
  background: var(--bg-elevated) !important;
  border-color: var(--border-color) !important;
  color: var(--text-body) !important;
}
html.dark .modal #resultado_buscador_tarea .table,
html.dark .modal #resultado_buscador_tarea .table td,
html.dark .modal #resultado_buscador_tarea .table th,
html.dark .modal #resultado_buscador_tarea a {
  background: transparent !important;
  color: var(--text-body) !important;
  border-color: var(--border-color) !important;
}
html.dark .modal #resultado_buscador_tarea .table-hover tbody tr:hover td {
  background: var(--primary-tint) !important;
  color: var(--text-heading) !important;
}
html.dark .bootstrap-select > .dropdown-toggle {
  background-color: var(--bg-elevated) !important;
  border-color: var(--input-border) !important;
  color: var(--text-body) !important;
}
html.dark .bootstrap-select .dropdown-menu {
  background-color: var(--bg-elevated) !important;
  border-color: var(--input-border) !important;
}
html.dark .bootstrap-select .dropdown-menu li a {
  color: var(--text-body) !important;
}

/* Botones */
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}
.btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.btn-label-primary {
  background-color: var(--primary-tint) !important;
  color: var(--primary) !important;
}

/* Texto / fondos utilitarios */
.text-primary { color: var(--primary) !important; }
.bg-primary   { background-color: var(--primary) !important; }
.bg-label-primary,
.badge.bg-label-primary {
  background-color: var(--primary-tint) !important;
  color: var(--primary) !important;
}
.border-primary { border-color: var(--primary) !important; }

/* .bg-light / .text-dark: utilitarios de Bootstrap que NO responden a data-bs-theme
   (quedan fijos claro/oscuro por diseño). Se usan sueltos en badges y cajas en varias
   vistas (WhatsApp, OnnixConnect, código CDC, etc.) asumiendo fondo claro — en modo
   oscuro quedan como "isla" blanca encima del resto de la app. Se pisan acá para que
   seúsen como un "gris neutro" más, en vez de forzar blanco. */
html.dark .bg-light {
  background-color: var(--bg-elevated) !important;
}
html.dark .bg-white {
  background-color: var(--bg-surface) !important;
}
html.dark .text-dark {
  color: var(--text-body) !important;
}
/* text-dark sobre warning: contraste legible (edit producto / modal compras) */
html.dark .bg-warning.text-dark,
html.dark .bg-warning .text-dark,
html.dark .modal-header.bg-warning.text-dark {
  color: #1a1a2e !important;
}

/* Links dentro del contenido */
a:not(.btn):not(.nav-link):not(.menu-link):not(.dropdown-item) {
  color: var(--primary);
}
a:not(.btn):not(.nav-link):not(.menu-link):not(.dropdown-item):hover {
  color: var(--primary-hover);
}

/* Sidebar (Sneat vertical menu) — jerarquía: gris cuando inactivo, azul solo activo/hover */
.bg-menu-theme .menu-link,
.bg-menu-theme .menu-link .menu-icon {
  color: var(--text-muted) !important;
}
.bg-menu-theme .menu-item.active > .menu-link,
.bg-menu-theme .menu-link.active {
  color: var(--primary) !important;
  background: var(--primary-tint) !important;
  border-radius: 8px;
}
.bg-menu-theme .menu-item.active > .menu-link .menu-icon,
.bg-menu-theme .menu-link.active .menu-icon {
  color: var(--primary) !important;
}
.bg-menu-theme .menu-link:hover,
.bg-menu-theme .menu-link:hover .menu-icon,
.bg-menu-theme .menu-link:focus {
  color: var(--text-heading) !important;
}
.bg-menu-theme .menu-sub .menu-link.active { background: var(--primary-tint) !important; }

/* ==========================================================================
   Modo oscuro — Sneat pinta sidebar/navbar con blanco hardcodeado (!important),
   no reacciona solo a los tokens. Se fuerza acá con html.dark.
   ========================================================================== */
html.dark .bg-menu-theme,
html.dark .bg-navbar-theme,
html.dark .layout-navbar.container-xxl {
  background-color: var(--bg-surface) !important;
  color: var(--text-body);
}
html.dark .app-brand,
html.dark .bg-navbar-theme .navbar-brand,
html.dark .bg-navbar-theme .navbar-brand a {
  color: var(--text-heading) !important;
}
html.dark .app-brand-link svg,
html.dark .app-brand-link img {
  filter: brightness(0) invert(1);
}
html.dark .app-sidebar-brand,
html.dark .app-brand.demo {
  border-bottom-color: var(--border-color);
}
html.dark .layout-menu,
html.dark .layout-page {
  border-color: var(--border-color) !important;
}
html.dark .menu-inner-shadow {
  background: linear-gradient(var(--bg-surface), transparent);
}
/* Íconos sueltos de la navbar (whatsapp, home, tareas, soporte) */
html.dark .navbar-nav-right,
html.dark .navbar-nav-left {
  color: var(--text-body);
}
/* Dropdowns del navbar (usuario, notificaciones) ya están cubiertos arriba
   por .dropdown-menu, pero refuerzo por si algún estilo de Sneat los pisa. */
html.dark .dropdown-menu {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
}

/* Offcanvas / popover / toast — cajas flotantes con borde token */
html.dark .offcanvas {
  background-color: var(--bg-surface);
  color: var(--text-body);
  border-color: var(--border-color) !important;
}
html.dark .popover {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color) !important;
  color: var(--text-body);
}
html.dark .popover-header {
  background-color: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-heading);
}
html.dark .toast {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color) !important;
  color: var(--text-body);
}
/* Franja/gradiente decorativo del navbar fijo (efecto de blur al hacer scroll):
   viene con rgba(245,245,249,*) hardcodeado, se ve como una línea clara pegada
   arriba de todo en modo oscuro. */
html.dark.layout-navbar-fixed .layout-page:before,
html.dark .layout-page:before {
  background: linear-gradient(180deg, var(--bg-page) 44%, rgba(15, 23, 42, 0.43) 73%, rgba(15, 23, 42, 0));
}
html.dark .layout-navbar {
  background-color: var(--bg-surface) !important;
}

html.dark .bg-footer-theme {
  background-color: var(--bg-page) !important;
  color: var(--text-muted);
  border-top-color: var(--border-color);
}
html.dark .footer-link {
  color: var(--primary) !important;
}

/* Ocultar el botón/panel "customizer" de demo de Sneat (no es parte del sistema de diseño) */
.template-customizer-open-btn,
[class*="template-customizer"] {
  display: none !important;
}

/* Navbar / dropdowns */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--primary-tint) !important;
  color: var(--primary) !important;
}

/* Focus rings (inputs, selects, select2) */
.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default .select2-selection:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-shadow) !important;
}

/* Checks / radios / switches */
.form-check-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--primary-shadow) !important;
}

/* Paginación (Bootstrap .page-link + DataTables .paginate_button, ambos con
   fondo blanco hardcodeado por Sneat: se ve como pastillas claras sueltas
   en modo oscuro, en cualquier tabla/listado de la app). */
html.dark .page-link,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-color) !important;
  color: var(--text-body) !important;
}
html.dark .page-item.active .page-link,
html.dark .pagination li.active .page-link,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
html.dark .page-item.disabled .page-link,
html.dark .pagination li.disabled .page-link,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  background-color: var(--bg-page) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
}

/* Paginación */
.page-item.active .page-link {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.page-link {
  color: var(--primary) !important;
}
.page-link:hover {
  color: var(--primary-hover) !important;
}

/* Tabs / pills */
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* DataTables: fila seleccionada, botón activo */
table.dataTable tbody tr.selected td {
  background-color: var(--primary-tint) !important;
}
.dt-button.active,
.dt-button:active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* Spinner / loaders con color de marca */
.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: var(--primary) !important;
}