/* ==========================================================
   SIGAE — SUPERFICIES OSCURAS
   Cargar DESPUÉS de app-theme.css.

   Solo se aplica cuando <html> tiene dark-style.
   No modifica el sidebar ni el modo claro.
   ========================================================== */

:root {
  /*
    MATIZ DEL COLOR ELEGIDO:

    0% = grafito neutro, combina con cualquier paleta.
    3% = matiz muy sutil del tema actual.
    5% = matiz ligeramente más visible.

    Recomendado: 0% o 3%.
  */
  --app-dark-tint: 0%;

  /* Bases oscuras independientes del color de marca */
  --app-dark-body-base: #14181d;
  --app-dark-surface-base: #1d232b;
  --app-dark-raised-base: #252d37;
  --app-dark-input-base: #191f26;
}

html.dark-style {
  /* Superficies: matiz configurable de la paleta actual */
  --app-dark-body: color-mix(
    in srgb,
    var(--app-accent) var(--app-dark-tint),
    var(--app-dark-body-base)
  );

  --app-dark-surface: color-mix(
    in srgb,
    var(--app-accent) var(--app-dark-tint),
    var(--app-dark-surface-base)
  );

  --app-dark-raised: color-mix(
    in srgb,
    var(--app-accent) var(--app-dark-tint),
    var(--app-dark-raised-base)
  );

  --app-dark-input: color-mix(
    in srgb,
    var(--app-accent) var(--app-dark-tint),
    var(--app-dark-input-base)
  );

  /* Textos y bordes sin matiz violeta */
  --app-dark-text: #d8dee7;
  --app-dark-heading: #f0f3f7;
  --app-dark-muted: #a0acba;
  --app-dark-disabled: #73808f;
  --app-dark-border: #36414e;

  --app-dark-hover: rgba(255, 255, 255, 0.045);
  --app-dark-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);

  /*
    IMPORTANTE:
    Reemplaza #30334e y #d2d2e8 del archivo generado.
    Todos los --app-soft-* heredan ahora la base grafito.
  */
  --app-tint-base: var(--app-dark-surface);
  --app-tint-text: var(--app-dark-text);

  /* Variables Bootstrap */
  --bs-body-bg: var(--app-dark-body);
  --bs-body-color: var(--app-dark-text);
  --bs-heading-color: var(--app-dark-heading);
  --bs-secondary-color: var(--app-dark-muted);
  --bs-secondary-bg: var(--app-dark-raised);
  --bs-tertiary-bg: var(--app-dark-input);
  --bs-border-color: var(--app-dark-border);

  color-scheme: dark;
}

/* ==========================================================
   1. FONDO GENERAL
   ========================================================== */

html.dark-style body {
  color: var(--app-dark-text);
  background: var(--app-dark-body) !important;
}

html.dark-style .bg-body {
  background-color: var(--app-dark-body) !important;
}

/* ==========================================================
   2. TARJETAS Y SUPERFICIES NEUTRAS
   No sobrescribe bg-primary, bg-success, etc.
   ========================================================== */

html.dark-style .card {
  --bs-card-bg: var(--app-dark-surface);
  --bs-card-color: var(--app-dark-text);
  --bs-card-border-color: var(--app-dark-border);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-color: var(--app-dark-text);

  color: var(--app-dark-text);
  border-color: var(--app-dark-border);
}

html.dark-style .card:not([class*="bg-"]) {
  background-color: var(--app-dark-surface) !important;
}

html.dark-style .card:not([class*="bg-"]) .card-title {
  color: var(--app-dark-heading);
}

html.dark-style .card-header,
html.dark-style .card-footer {
  border-color: var(--app-dark-border);
}

/* ==========================================================
   3. NAVBAR Y FOOTER DEL TEMA
   No afecta navbar.bg-primary ni al sidebar.
   ========================================================== */

html.dark-style .bg-navbar-theme {
  color: var(--app-dark-text) !important;
  /* background-color: var(--app-dark-surface) !important; */
}

html.dark-style.layout-navbar-fixed
.window-scrolled .bg-navbar-theme.layout-navbar,
html.dark-style.layout-horizontal .bg-navbar-theme.layout-navbar {
  background-color: var(--app-dark-surface) !important;
}

html.dark-style .bg-navbar-theme .search-input-wrapper .search-input,
html.dark-style .bg-navbar-theme .search-input-wrapper .search-toggler {
  color: var(--app-dark-text) !important;
  background-color: var(--app-dark-surface) !important;
}

html.dark-style .bg-navbar-theme .navbar-brand,
html.dark-style .bg-navbar-theme .navbar-brand a,
html.dark-style .bg-navbar-theme .nav-link,
html.dark-style .bg-navbar-theme .navbar-text {
  color: var(--app-dark-text);
}

html.dark-style .bg-navbar-theme .nav-link:hover {
  color: var(--app-ink);
}

html.dark-style .bg-navbar-theme .nav-link.disabled {
  color: var(--app-dark-disabled) !important;
}

html.dark-style .bg-footer-theme {
  color: var(--app-dark-muted);
  background-color: var(--app-dark-surface) !important;
}

html.dark-style .bg-footer-theme .footer-link,
html.dark-style .bg-footer-theme .footer-text {
  color: var(--app-dark-muted);
}

html.dark-style .bg-footer-theme .footer-link:hover {
  color: var(--app-ink);
}

/* ==========================================================
   4. INPUTS Y SELECTS
   Mantiene bordes de foco y validación existentes.
   ========================================================== */

html.dark-style .form-control,
html.dark-style .form-select {
  color: var(--app-dark-text);
  background-color: var(--app-dark-input) !important;
}

html.dark-style .form-control:not(:focus):not(.is-valid):not(.is-invalid),
html.dark-style .form-select:not(:focus):not(.is-valid):not(.is-invalid) {
  border-color: var(--app-dark-border);
}

html.dark-style .form-control::placeholder {
  color: var(--app-dark-muted);
  opacity: 0.8;
}

html.dark-style .form-control:disabled,
html.dark-style .form-select:disabled {
  color: var(--app-dark-disabled);
  background-color: var(--app-dark-raised) !important;
}

html.dark-style .input-group-text {
  color: var(--app-dark-muted);
  background-color: var(--app-dark-input);
}

html.dark-style .input-group:not(:focus-within) .input-group-text {
  border-color: var(--app-dark-border);
}

html.dark-style .form-floating-outline label::after,
html.dark-style .form-floating-outline > span::after {
  background: var(--app-dark-surface) !important;
}

html.dark-style .form-floating-outline label.bg-body::after,
html.dark-style .form-floating-outline > span.bg-body::after {
  background: var(--app-dark-body) !important;
}

/* ==========================================================
   5. TABLAS NEUTRAS
   Conserva table-primary, success, danger y otras variantes.
   ========================================================== */

html.dark-style .table:not(
  .table-primary,
  .table-secondary,
  .table-success,
  .table-danger,
  .table-warning,
  .table-info,
  .table-light,
  .table-dark
) {
  --bs-table-bg: var(--app-dark-surface);
  --bs-table-color: var(--app-dark-text);
  --bs-table-border-color: var(--app-dark-border);

  --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
  --bs-table-striped-color: var(--app-dark-text);

  --bs-table-hover-bg: var(--app-dark-hover);
  --bs-table-hover-color: var(--app-dark-text);

  --bs-table-active-bg: var(--app-soft-12);
  --bs-table-active-color: var(--app-dark-text);

  color: var(--app-dark-text);
  border-color: var(--app-dark-border);
}

html.dark-style .table thead:not([class*="table-"]):not([class*="bg-"]) {
  background-color: var(--app-dark-raised);
}

/* El selector de DataTables no vuelve a insertar un fondo violeta */
html.dark-style table.dataTable > tbody > tr.selected > * {
  color: var(--app-dark-text) !important;
  box-shadow:
    inset 0 0 0 9999px
    rgba(var(--sb-theme-rgb, 16, 185, 129), 0.12) !important;
}

/* ==========================================================
   6. DROPDOWNS, MODALES, OFFCANVAS Y POPOVERS NEUTROS
   ========================================================== */

html.dark-style .dropdown-menu {
  --bs-dropdown-bg: var(--app-dark-raised);
  --bs-dropdown-color: var(--app-dark-text);
  --bs-dropdown-border-color: var(--app-dark-border);
  --bs-dropdown-link-color: var(--app-dark-text);
  --bs-dropdown-link-hover-color: var(--app-ink);
  --bs-dropdown-link-hover-bg: var(--app-soft-08);
  --bs-dropdown-link-active-color: var(--app-ink);
  --bs-dropdown-link-active-bg: var(--app-soft-12);
  --bs-dropdown-link-disabled-color: var(--app-dark-disabled);

  color: var(--app-dark-text);
  background-color: var(--app-dark-raised);
  border-color: var(--app-dark-border);
}

html.dark-style .dropdown-divider {
  border-color: var(--app-dark-border);
}

html.dark-style .modal-content,
html.dark-style .offcanvas {
  color: var(--app-dark-text);
  background-color: var(--app-dark-surface);
  border-color: var(--app-dark-border);
}

html.dark-style .modal-header,
html.dark-style .modal-footer {
  border-color: var(--app-dark-border);
}

html.dark-style .popover:not([class*="popover-primary"]) {
  --bs-popover-bg: var(--app-dark-raised);
  --bs-popover-border-color: var(--app-dark-border);
  --bs-popover-header-bg: var(--app-dark-surface);
  --bs-popover-header-color: var(--app-dark-heading);
  --bs-popover-body-color: var(--app-dark-text);
}

/* ==========================================================
   7. ACORDEONES Y LISTAS
   ========================================================== */

html.dark-style .accordion {
  --bs-accordion-color: var(--app-dark-text);
  --bs-accordion-bg: var(--app-dark-surface);
  --bs-accordion-border-color: var(--app-dark-border);
  --bs-accordion-btn-color: var(--app-dark-text);
  --bs-accordion-btn-bg: var(--app-dark-surface);
  --bs-accordion-active-color: var(--app-ink);
  --bs-accordion-active-bg: var(--app-soft-08);
}

html.dark-style .accordion-item,
html.dark-style .accordion-button {
  color: var(--app-dark-text);
  background-color: var(--app-dark-surface);
}

html.dark-style .accordion-button:not(.collapsed) {
  color: var(--app-ink);
  background-color: var(--app-soft-08);
}

html.dark-style .list-group {
  --bs-list-group-color: var(--app-dark-text);
  --bs-list-group-bg: var(--app-dark-surface);
  --bs-list-group-border-color: var(--app-dark-border);
  --bs-list-group-action-color: var(--app-dark-text);
  --bs-list-group-action-hover-bg: var(--app-dark-raised);
}

/* ==========================================================
   8. SELECT2 Y TAGIFY
   Mantiene selección y foco del tema global.
   ========================================================== */

html.dark-style .select2-container--default .select2-selection {
  color: var(--app-dark-text);
  background-color: var(--app-dark-input) !important;
}

html.dark-style .select2-container--default
.select2-selection--single .select2-selection__rendered {
  color: var(--app-dark-text);
}

html.dark-style .select2-dropdown {
  color: var(--app-dark-text);
  background-color: var(--app-dark-raised) !important;
  border-color: var(--app-dark-border);
}

html.dark-style .select2-search__field {
  color: var(--app-dark-text);
  background-color: var(--app-dark-input) !important;
}

html.dark-style .tagify {
  --tags-border-color: var(--app-dark-border);
  --tag-bg: var(--app-dark-raised);
  --tag-text-color: var(--app-dark-text);

  background-color: var(--app-dark-input);
}

html.dark-style .tagify__dropdown__wrapper {
  color: var(--app-dark-text);
  background-color: var(--app-dark-raised);
  border-color: var(--app-dark-border);
}

/* ==========================================================
   9. CALENDARIOS, SWEETALERT Y EDITOR
   Solo superficies, no colores de eventos ni selección.
   ========================================================== */

html.dark-style .flatpickr-calendar,
html.dark-style .datepicker.dropdown-menu,
html.dark-style .daterangepicker,
html.dark-style .daterangepicker .calendar-table {
  color: var(--app-dark-text);
  background-color: var(--app-dark-raised) !important;
  border-color: var(--app-dark-border);
}

html.dark-style .flatpickr-months .flatpickr-month,
html.dark-style .flatpickr-weekdays,
html.dark-style span.flatpickr-weekday {
  color: var(--app-dark-muted);
  background: var(--app-dark-raised) !important;
}

html.dark-style .swal2-popup {
  color: var(--app-dark-text);
  background: var(--app-dark-surface) !important;
}

html.dark-style .swal2-title {
  color: var(--app-dark-heading);
}

html.dark-style .ql-toolbar.ql-snow,
html.dark-style .ql-container.ql-snow {
  border-color: var(--app-dark-border);
}

html.dark-style .ql-toolbar.ql-snow {
  background-color: var(--app-dark-raised);
}

html.dark-style .ql-container.ql-snow {
  color: var(--app-dark-text);
  background-color: var(--app-dark-input);
}

html.dark-style .ql-snow .ql-picker-options,
html.dark-style .ql-snow .ql-tooltip {
  color: var(--app-dark-text);
  background-color: var(--app-dark-raised);
  border-color: var(--app-dark-border);
}


html.dark-style .bg-lighter {
  background-color: var(--app-dark-body) !important;
}

html.dark-style .table-light {
    --bs-table-bg: rgba(var(--sb-theme-rgb), 0.1) !important;
}