/**
 * Tema claro/oscuro global — activado con html[data-theme="light|dark"].
 */

:root,
html[data-theme="light"] {
  --mantis-bg: #eceff1;
  --mantis-surface: #ffffff;
  --mantis-surface-2: #f8f9fa;
  --mantis-text: #333333;
  --mantis-muted: #777777;
  --mantis-border: #dddddd;
  --mantis-card-header: #fafafa;
  --mantis-input-bg: #ffffff;
  --mantis-input-border: #ced4da;
  --mantis-table-stripe: rgba(0, 0, 0, 0.03);
  --mantis-shadow: rgba(0, 0, 0, 0.08);
  --mantis-navbar: #3a3b3a;
  color-scheme: light;
}

html[data-theme="dark"] {
  --mantis-bg: #0f1419;
  --mantis-surface: #1a2332;
  --mantis-surface-2: #151c28;
  --mantis-text: #e8eef7;
  --mantis-muted: #8fa3bc;
  --mantis-border: rgba(120, 160, 220, 0.18);
  --mantis-card-header: #121820;
  --mantis-input-bg: #121820;
  --mantis-input-border: rgba(120, 160, 220, 0.25);
  --mantis-table-stripe: rgba(255, 255, 255, 0.04);
  --mantis-table-hover: rgba(59, 130, 246, 0.12);
  --mantis-shadow: rgba(0, 0, 0, 0.35);
  --mantis-navbar: #0a0e14;

  /* Variables dj_admin (listados tipo Django admin) */
  --dj-text: #e8eef7;
  --dj-muted: #8fa3bc;
  --dj-border: rgba(120, 160, 220, 0.18);
  --dj-border-strong: rgba(120, 160, 220, 0.28);
  --dj-bg-soft: #151c28;
  --dj-bg-alt: #121820;
  --dj-hover-row: rgba(59, 130, 246, 0.12);
  --dj-error-bg: rgba(244, 67, 54, 0.15);
  --dj-fieldset-header-bg: #151c28;
  --dj-fieldset-header-fg: #c5d4e8;
  --dj-link: #60a5fa;
  --dj-link-hover: #93c5fd;

  color-scheme: dark;
}

html[data-theme="dark"] body {
  background-color: var(--mantis-bg);
  color: var(--mantis-text);
}

html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .content {
  background-color: var(--mantis-bg);
  color: var(--mantis-text);
}

html[data-theme="dark"] .page-header,
html[data-theme="dark"] .breadcrumb-line-light {
  background-color: var(--mantis-surface-2);
  border-color: var(--mantis-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item a {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .breadcrumb-item.active {
  color: var(--mantis-text);
}

html[data-theme="dark"] .card {
  background-color: var(--mantis-surface);
  border-color: var(--mantis-border);
  color: var(--mantis-text);
  box-shadow: 0 1px 3px var(--mantis-shadow);
}

html[data-theme="dark"] .card-header {
  background-color: var(--mantis-card-header);
  border-bottom-color: var(--mantis-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .card-body {
  background-color: var(--mantis-surface);
  color: var(--mantis-text);
}

/* --- Tablas genericas Bootstrap --- */
html[data-theme="dark"] .table,
html[data-theme="dark"] table.table {
  background-color: var(--mantis-surface);
  color: var(--mantis-text);
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table thead td,
html[data-theme="dark"] .table tfoot th,
html[data-theme="dark"] .table tfoot td {
  background-color: var(--mantis-surface-2);
  color: var(--mantis-text);
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .table tbody th {
  background-color: var(--mantis-surface);
  color: var(--mantis-text);
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td,
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) th {
  background-color: var(--mantis-table-stripe);
}

html[data-theme="dark"] .table-hover tbody tr:hover td,
html[data-theme="dark"] .table-hover tbody tr:hover th {
  background-color: var(--mantis-table-hover);
}

html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .table-container {
  background-color: transparent;
}

html[data-theme="dark"] .table a {
  color: #60a5fa;
}

/* --- DataTables --- */
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_filter label,
html[data-theme="dark"] .dataTables_length label,
html[data-theme="dark"] .dataTables_info {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .dataTables_filter input,
html[data-theme="dark"] .dataTables_length select {
  background-color: var(--mantis-input-bg);
  border-color: var(--mantis-input-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] table.dataTable,
html[data-theme="dark"] .dataTable {
  background-color: var(--mantis-surface) !important;
  color: var(--mantis-text);
}

html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable thead td,
html[data-theme="dark"] .dataTable thead th,
html[data-theme="dark"] .dataTable thead td {
  background-color: var(--mantis-surface-2) !important;
  color: var(--mantis-text) !important;
  border-color: var(--mantis-border) !important;
}

html[data-theme="dark"] table.dataTable tbody tr,
html[data-theme="dark"] .dataTable tbody tr {
  background-color: var(--mantis-surface) !important;
}

html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] table.dataTable tbody th,
html[data-theme="dark"] .dataTable tbody td,
html[data-theme="dark"] .dataTable tbody th {
  background-color: inherit !important;
  color: var(--mantis-text) !important;
  border-color: var(--mantis-border) !important;
}

html[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] table.dataTable.display tbody tr.odd {
  background-color: var(--mantis-table-stripe) !important;
}

html[data-theme="dark"] table.dataTable.hover tbody tr:hover,
html[data-theme="dark"] table.dataTable.display tbody tr:hover {
  background-color: var(--mantis-table-hover) !important;
}

html[data-theme="dark"] .dataTables_paginate .paginate_button {
  color: var(--mantis-muted) !important;
}

html[data-theme="dark"] .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_paginate .paginate_button.current:hover {
  background: var(--mantis-surface-2) !important;
  border-color: var(--mantis-border) !important;
  color: var(--mantis-text) !important;
}

/* --- dj_admin #result_list y paneles --- */
html[data-theme="dark"] .dj-changelist,
html[data-theme="dark"] .dj-change-form {
  background: transparent !important;
  color: var(--dj-text);
}

html[data-theme="dark"] .dj-results,
html[data-theme="dark"] .dj-object-tools,
html[data-theme="dark"] .dj-top-bar,
html[data-theme="dark"] .dj-paginator {
  background: transparent;
}

html[data-theme="dark"] .dj-changelist a,
html[data-theme="dark"] .dj-change-form a {
  color: var(--dj-link);
}

html[data-theme="dark"] .dj-changelist a:hover,
html[data-theme="dark"] .dj-change-form a:hover {
  color: var(--dj-link-hover);
}

html[data-theme="dark"] .dj-changelist .dj-toolbar-select,
html[data-theme="dark"] .dj-change-form .dj-form-row input[type="text"],
html[data-theme="dark"] .dj-change-form .dj-form-row input[type="number"],
html[data-theme="dark"] .dj-change-form .dj-form-row input[type="email"],
html[data-theme="dark"] .dj-change-form .dj-form-row input[type="url"],
html[data-theme="dark"] .dj-change-form .dj-form-row select,
html[data-theme="dark"] .dj-change-form .dj-form-row textarea,
html[data-theme="dark"] .dj-compact-field input,
html[data-theme="dark"] .dj-compact-field select,
html[data-theme="dark"] .dj-compact-field textarea {
  background-color: var(--mantis-input-bg);
  border-color: var(--mantis-input-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .dj-change-form .dj-submit-row {
  background: var(--mantis-surface-2);
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .dj-change-form .dj-inline-changelist__header,
html[data-theme="dark"] .dj-change-form fieldset.dj-module h2 {
  background: var(--dj-fieldset-header-bg);
  color: var(--dj-fieldset-header-fg);
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .dj-change-form .dj-errorlist {
  background: var(--dj-error-bg);
  color: #fca5a5;
}

html[data-theme="dark"] .dj-inline-add {
  background: var(--mantis-input-bg);
  border-color: var(--dj-link);
  color: var(--dj-link);
}

html[data-theme="dark"] .dj-inline-add:hover {
  background: var(--dj-link);
  color: #fff;
}

html[data-theme="dark"] .dj-notif-ajax-loading__backdrop {
  background: rgba(15, 20, 25, 0.72);
}

html[data-theme="dark"] .dj-notif-ajax-loading__box {
  background: var(--mantis-surface);
  border-color: var(--mantis-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .dj-changelist #result_list,
html[data-theme="dark"] .dj-inline-changelist #result_list,
html[data-theme="dark"] .dj-change-form #result_list,
html[data-theme="dark"] .dj-change-form .dj-aux-table,
html[data-theme="dark"] .dj-change-form .dj-inline-changelist {
  background: var(--mantis-surface) !important;
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .dj-changelist #result_list thead th,
html[data-theme="dark"] .dj-inline-changelist #result_list thead th,
html[data-theme="dark"] .dj-change-form #result_list thead th,
html[data-theme="dark"] .dj-change-form .dj-aux-table thead th {
  background: var(--mantis-surface-2) !important;
  color: var(--mantis-muted);
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .dj-changelist #result_list tbody td,
html[data-theme="dark"] .dj-changelist #result_list tbody th,
html[data-theme="dark"] .dj-inline-changelist #result_list tbody td,
html[data-theme="dark"] .dj-inline-changelist #result_list tbody th,
html[data-theme="dark"] .dj-change-form #result_list tbody td,
html[data-theme="dark"] .dj-change-form #result_list tbody th,
html[data-theme="dark"] .dj-change-form .dj-aux-table tbody td {
  color: var(--mantis-text);
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .dj-changelist #result_list tbody tr.row1 td,
html[data-theme="dark"] .dj-changelist #result_list tbody tr.row1 th,
html[data-theme="dark"] .dj-inline-changelist #result_list tbody tr.row1 td,
html[data-theme="dark"] .dj-inline-changelist #result_list tbody tr.row1 th,
html[data-theme="dark"] .dj-change-form #result_list tbody tr.row1 td,
html[data-theme="dark"] .dj-change-form #result_list tbody tr.row1 th {
  background: var(--mantis-surface) !important;
}

html[data-theme="dark"] .dj-changelist #result_list tbody tr.row2 td,
html[data-theme="dark"] .dj-changelist #result_list tbody tr.row2 th,
html[data-theme="dark"] .dj-inline-changelist #result_list tbody tr.row2 td,
html[data-theme="dark"] .dj-inline-changelist #result_list tbody tr.row2 th,
html[data-theme="dark"] .dj-change-form #result_list tbody tr.row2 td,
html[data-theme="dark"] .dj-change-form #result_list tbody tr.row2 th {
  background: var(--mantis-surface-2) !important;
}

html[data-theme="dark"] .dj-changelist #result_list tbody tr:hover td,
html[data-theme="dark"] .dj-changelist #result_list tbody tr:hover th,
html[data-theme="dark"] .dj-inline-changelist #result_list tbody tr:hover td,
html[data-theme="dark"] .dj-inline-changelist #result_list tbody tr:hover th,
html[data-theme="dark"] .dj-change-form #result_list tbody tr:hover td,
html[data-theme="dark"] .dj-change-form #result_list tbody tr:hover th,
html[data-theme="dark"] .dj-change-form .dj-aux-table tbody tr:hover td {
  background: var(--mantis-table-hover) !important;
}

html[data-theme="dark"] .dj-change-form .help,
html[data-theme="dark"] .dj-change-form .dj-help {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .dj-change-form .dj-form-row > div > label {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .dj-change-form .dj-checkbox-row label {
  color: var(--mantis-text);
}

html[data-theme="dark"] .dj-change-form .dj-form-row.errors {
  background: var(--dj-error-bg);
}

html[data-theme="dark"] .dj-change-form .dj-form-row input[type="password"],
html[data-theme="dark"] .dj-change-form input[type="password"] {
  background-color: var(--mantis-input-bg);
  border-color: var(--mantis-input-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .dj-change-form code,
html[data-theme="dark"] .content code {
  background-color: var(--mantis-surface-2);
  color: #93c5fd;
}

html[data-theme="dark"] .dj-changelist .dj-top-bar .dataTables_filter input[type="search"] {
  background-color: var(--mantis-input-bg);
  border-color: var(--mantis-input-border);
  color: var(--mantis-text);
}

/* --- Helpdesk: tickets y dashboard --- */
html[data-theme="dark"] .page-ticket-list .card:has(.ticket-list-page),
html[data-theme="dark"] .page-ticket-list .card:has(.ticket-list-page) > .card-body {
  background-color: var(--mantis-bg) !important;
}

html[data-theme="dark"] .ticket-list-toolbar,
html[data-theme="dark"] .ticket-list-breadcrumb-home a {
  color: var(--mantis-text);
}

html[data-theme="dark"] .filters-form,
html[data-theme="dark"] .filters-form-compact {
  background-color: var(--mantis-surface-2) !important;
  border-color: var(--mantis-border) !important;
  color: var(--mantis-text);
  box-shadow: none;
}

html[data-theme="dark"] .filters-form .form-label,
html[data-theme="dark"] .filters-form-compact .form-label {
  color: var(--mantis-muted) !important;
}

html[data-theme="dark"] .tickets-table,
html[data-theme="dark"] .table-container {
  background-color: var(--mantis-surface) !important;
  border-color: var(--mantis-border) !important;
}

html[data-theme="dark"] .tickets-table thead th {
  background-color: var(--mantis-surface-2) !important;
  color: var(--mantis-text) !important;
  border-color: var(--mantis-border) !important;
}

html[data-theme="dark"] .tickets-table thead th.sortable-col:hover {
  background-color: var(--mantis-table-hover) !important;
}

html[data-theme="dark"] .sort-arrow {
  color: #93c5fd;
}

html[data-theme="dark"] .tickets-table tbody tr:nth-child(odd),
html[data-theme="dark"] .tickets-table tbody tr:nth-child(even) {
  background-color: transparent !important;
}

html[data-theme="dark"] .tickets-table tbody tr:nth-child(odd) td {
  background-color: var(--mantis-surface) !important;
}

html[data-theme="dark"] .tickets-table tbody tr:nth-child(even) td {
  background-color: var(--mantis-table-stripe) !important;
}

html[data-theme="dark"] .tickets-table tbody tr:hover td,
html[data-theme="dark"] .tickets-table tbody tr:hover {
  background-color: var(--mantis-table-hover) !important;
}

html[data-theme="dark"] .tickets-table tbody td {
  color: var(--mantis-text);
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .tickets-table a {
  color: #60a5fa;
}

html[data-theme="dark"] .respuesta-pendiente {
  background-color: rgba(251, 191, 36, 0.18) !important;
  border-left-color: #fbbf24 !important;
  color: var(--mantis-text) !important;
}

html[data-theme="dark"] .tickets-table tbody tr:hover .respuesta-pendiente {
  background-color: rgba(251, 191, 36, 0.28) !important;
}

html[data-theme="dark"] .detalle-sin-respuesta {
  background-color: rgba(251, 146, 60, 0.18) !important;
  border-left-color: #fb923c !important;
}

html[data-theme="dark"] .tickets-table tbody tr:hover .detalle-sin-respuesta {
  background-color: rgba(251, 146, 60, 0.28) !important;
}

html[data-theme="dark"] .fecha-ticket-resuelto {
  background-color: rgba(16, 185, 129, 0.18) !important;
  border-left-color: #10b981 !important;
  color: #6ee7b7 !important;
}

html[data-theme="dark"] .tickets-table tbody tr:hover .fecha-ticket-resuelto {
  background-color: rgba(16, 185, 129, 0.28) !important;
}

html[data-theme="dark"] .fecha-resuelto-badge {
  color: #6ee7b7;
}

html[data-theme="dark"] .editable-cell-titulo:hover,
html[data-theme="dark"] .editable-cell-horas:hover,
html[data-theme="dark"] .editable-cell-orden:hover {
  background-color: rgba(59, 130, 246, 0.2) !important;
  outline-color: #3b82f6;
}

html[data-theme="dark"] .priority-dropdown {
  background: var(--mantis-surface);
  border-color: var(--mantis-border);
  box-shadow: 0 4px 14px var(--mantis-shadow);
}

html[data-theme="dark"] .priority-dropdown-item {
  color: var(--mantis-text);
}

html[data-theme="dark"] .priority-dropdown-item:hover {
  background: var(--mantis-table-hover);
}

html[data-theme="dark"] .priority-dropdown-item.active {
  background: var(--mantis-surface-2);
  color: var(--mantis-text);
}

html[data-theme="dark"] .table-container::-webkit-scrollbar-track {
  background: var(--mantis-surface-2);
}

html[data-theme="dark"] .table-container::-webkit-scrollbar-thumb {
  background: rgba(143, 163, 188, 0.45);
}

html[data-theme="dark"] .table-container::-webkit-scrollbar-thumb:hover {
  background: rgba(143, 163, 188, 0.65);
}

html[data-theme="dark"] .pagination .page-link {
  background-color: var(--mantis-surface);
  border-color: var(--mantis-border);
  color: var(--mantis-muted);
}

html[data-theme="dark"] .pagination .page-item.active .page-link,
html[data-theme="dark"] .pagination-sm .page-item.active .page-link {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

html[data-theme="dark"] .pagination .page-link:hover {
  background-color: var(--mantis-surface-2);
  color: var(--mantis-text);
}

html[data-theme="dark"] .empresas-table,
html[data-theme="dark"] .alerts-table-thead,
html[data-theme="dark"] .agentes-table-thead,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .chart-container,
html[data-theme="dark"] .alerts-section,
html[data-theme="dark"] .filters-bar {
  background: var(--mantis-surface) !important;
  color: var(--mantis-text);
  border-color: var(--mantis-border);
  box-shadow: 0 1px 3px var(--mantis-shadow);
}

html[data-theme="dark"] .dashboard-card-value,
html[data-theme="dark"] .chart-title,
html[data-theme="dark"] .section-title {
  color: var(--mantis-text);
}

html[data-theme="dark"] .dashboard-card-label,
html[data-theme="dark"] .dashboard-card-footer,
html[data-theme="dark"] .alert-time,
html[data-theme="dark"] .empty-state {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .empresas-table thead,
html[data-theme="dark"] .empresas-table tfoot td,
html[data-theme="dark"] .agentes-dashboard-table thead,
html[data-theme="dark"] .agentes-dashboard-table tfoot td,
html[data-theme="dark"] .alerts-table thead th {
  background: var(--mantis-surface-2) !important;
  color: var(--mantis-text);
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .empresas-table td,
html[data-theme="dark"] .empresas-table th,
html[data-theme="dark"] .agentes-dashboard-table td,
html[data-theme="dark"] .agentes-dashboard-table th,
html[data-theme="dark"] .agentes-table td,
html[data-theme="dark"] .agentes-table th,
html[data-theme="dark"] .alerts-table td,
html[data-theme="dark"] .alerts-table th {
  border-color: var(--mantis-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .empresas-table tbody tr:hover,
html[data-theme="dark"] .agentes-dashboard-table tbody tr:hover,
html[data-theme="dark"] .agentes-table tbody tr:hover,
html[data-theme="dark"] .alerts-table tbody tr:hover {
  background-color: var(--mantis-table-hover) !important;
}

html[data-theme="dark"] .alerts-paginator {
  background: var(--mantis-surface) !important;
  border-top-color: var(--mantis-border);
}

html[data-theme="dark"] .alert-item {
  background: rgba(244, 67, 54, 0.12);
  border-left-color: #ef4444;
}

html[data-theme="dark"] .alert-title {
  color: #fca5a5;
}

html[data-theme="dark"] .alert-body {
  color: var(--mantis-text);
}

html[data-theme="dark"] .alert-row-urgent {
  background: rgba(244, 67, 54, 0.12) !important;
}

html[data-theme="dark"] .alert-row-urgent td {
  background: transparent !important;
}

html[data-theme="dark"] .cell-num,
html[data-theme="dark"] .agente-nombre,
html[data-theme="dark"] .agentes-dashboard-table .agente-nombre {
  color: var(--mantis-text);
}

html[data-theme="dark"] .badge-count {
  background-color: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

html[data-theme="dark"] .badge-open {
  background-color: rgba(251, 146, 60, 0.2);
  color: #fdba74;
}

html[data-theme="dark"] .badge-urgent {
  background-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

html[data-theme="dark"] .carga-bar-track {
  background: var(--mantis-surface-2);
}

html[data-theme="dark"] .input-group-text {
  background-color: var(--mantis-surface-2);
  border-color: var(--mantis-input-border);
  color: var(--mantis-muted);
}

html[data-theme="dark"] .text-muted {
  color: var(--mantis-muted) !important;
}

html[data-theme="dark"] .modal-content {
  background-color: var(--mantis-surface);
  color: var(--mantis-text);
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .modal .table thead,
html[data-theme="dark"] .modal .table thead tr,
html[data-theme="dark"] .modal .table thead th {
  background-color: var(--mantis-surface-2) !important;
  border-color: var(--mantis-border) !important;
  color: var(--mantis-text) !important;
}

html[data-theme="dark"] .modal .table tbody td {
  color: var(--mantis-text);
  border-color: var(--mantis-border);
}

/* --- Kanban tickets --- */
html[data-theme="dark"] .kanban-title {
  color: var(--mantis-text);
}

html[data-theme="dark"] .kanban-col {
  background: var(--mantis-surface-2);
}

html[data-theme="dark"] .kanban-card {
  background: var(--mantis-surface);
  box-shadow: 0 1px 4px var(--mantis-shadow);
  border-left-color: var(--mantis-border);
}

html[data-theme="dark"] .kcard-empresa {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .kcard-subject {
  color: var(--mantis-text);
}

html[data-theme="dark"] .kcard-titulo,
html[data-theme="dark"] .kcard-footer,
html[data-theme="dark"] .kcard-closed-date,
html[data-theme="dark"] .kanban-placeholder,
html[data-theme="dark"] .kanban-empty {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .kcard-num {
  color: #60a5fa;
}

html[data-theme="dark"] .kanban-cards.drag-over {
  background: rgba(59, 130, 246, 0.15);
  outline-color: #3b82f6;
}

html[data-theme="dark"] .kanban-cards {
  scrollbar-color: rgba(143, 163, 188, 0.45) transparent;
}

html[data-theme="dark"] .kanban-cards::-webkit-scrollbar-thumb {
  background: rgba(143, 163, 188, 0.45);
}

/* --- Infrastructure dj_admin listados --- */
html[data-theme="dark"] .dj-empty {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] select.form-control {
  background-color: var(--mantis-input-bg);
  border-color: var(--mantis-input-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .form-control:focus {
  background-color: var(--mantis-input-bg);
  color: var(--mantis-text);
  border-color: #3b82f6;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single {
  background-color: var(--mantis-input-bg);
  border-color: var(--mantis-input-border);
}

html[data-theme="dark"]
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: var(--mantis-text);
}

html[data-theme="dark"] .select2-dropdown {
  background-color: var(--mantis-surface);
  border-color: var(--mantis-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .select2-results__option--highlighted[aria-selected] {
  background-color: #2563eb;
}

html[data-theme="dark"] .sidebar-light,
html[data-theme="dark"] .sidebar-light .card-sidebar-mobile,
html[data-theme="dark"] .sidebar-light .sidebar-content,
html[data-theme="dark"] .sidebar-light .card-body,
html[data-theme="dark"] .sidebar-light .nav-sidebar {
  background-color: var(--mantis-surface) !important;
  color: var(--mantis-text);
}

html[data-theme="dark"] .sidebar-light .nav-sidebar .nav-link {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .sidebar-light .nav-sidebar .nav-link:hover,
html[data-theme="dark"] .sidebar-light .nav-sidebar .nav-link:focus {
  background-color: rgba(59, 130, 246, 0.12);
  color: var(--mantis-text);
}

html[data-theme="dark"] .sidebar-light .nav-sidebar .nav-link.active {
  background-color: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

html[data-theme="dark"] .sidebar-light .nav-item-header {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .sidebar-light .sidebar-mobile-toggler {
  background-color: var(--mantis-surface-2) !important;
  color: var(--mantis-text);
}

html[data-theme="dark"] body.sidebar-overlay-layout.sidebar-mobile-main
  .page-content
  > .sidebar-main {
  background-color: var(--mantis-surface) !important;
}

html[data-theme="dark"] .navbar.navbar-dark {
  background-color: var(--mantis-navbar) !important;
}

html[data-theme="dark"] .navbar.navbar-light,
html[data-theme="dark"] #navbar-footer {
  background-color: var(--mantis-surface-2) !important;
  border-color: var(--mantis-border) !important;
  color: var(--mantis-muted);
}

html[data-theme="dark"] .navbar.navbar-light .navbar-text,
html[data-theme="dark"] .navbar.navbar-light a {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .navbar.navbar-light a:hover {
  color: var(--mantis-text);
}

html[data-theme="dark"] .dj-module,
html[data-theme="dark"] .dj-change-form fieldset {
  background: var(--mantis-surface);
  border-color: var(--mantis-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .dj-module h2,
html[data-theme="dark"] .dj-aligned label {
  color: var(--mantis-text);
}

html[data-theme="dark"] .pagination a,
html[data-theme="dark"] .pagination span {
  color: var(--mantis-muted);
}

/* --- Ticket detalle (/helpdesk/tickets/<id>/) --- */
html[data-theme="dark"] .ticket-header,
html[data-theme="dark"] .ticket-footer-estado {
  background: linear-gradient(
    135deg,
    var(--mantis-surface-2) 0%,
    var(--mantis-surface) 100%
  ) !important;
  border-color: var(--mantis-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .ticket-empresa-asunto,
html[data-theme="dark"] .ticket-asunto-tag,
html[data-theme="dark"] .ticket-header .ticket-titulo {
  color: var(--mantis-text);
}

html[data-theme="dark"] .ticket-metrica {
  background: var(--mantis-surface) !important;
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .ticket-metrica-ticket {
  background: linear-gradient(
    180deg,
    var(--mantis-surface) 0%,
    var(--mantis-surface-2) 100%
  ) !important;
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .ticket-metrica-label,
html[data-theme="dark"] .ticket-asignado-label {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .ticket-metrica-value,
html[data-theme="dark"] .ticket-asignado-valor,
html[data-theme="dark"] .footer-metrica {
  color: var(--mantis-text);
}

html[data-theme="dark"] .ticket-metrica-subvalue,
html[data-theme="dark"] .footer-estado-label {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .ticket-progress {
  background: var(--mantis-surface-2);
}

html[data-theme="dark"] .ticket-metrica-working.working-on {
  background: rgba(16, 185, 129, 0.12) !important;
}

html[data-theme="dark"] .ticket-metrica-working.working-off {
  background: var(--mantis-surface-2) !important;
}

html[data-theme="dark"] .footer-agente,
html[data-theme="dark"] .footer-metrica {
  background: var(--mantis-surface) !important;
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .mensaje-item {
  background: var(--mantis-surface) !important;
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .mensaje-contenido {
  background: var(--mantis-surface) !important;
  color: var(--mantis-text);
}

html[data-theme="dark"] .mensaje-tipo-m .mensaje-header {
  background: rgba(59, 130, 246, 0.15) !important;
}

html[data-theme="dark"] .mensaje-tipo-r .mensaje-header {
  background: rgba(16, 185, 129, 0.15) !important;
}

html[data-theme="dark"] .mensaje-tipo-n .mensaje-header {
  background: rgba(251, 191, 36, 0.15) !important;
}

html[data-theme="dark"] .mensaje-tipo-a .mensaje-header {
  background: var(--mantis-surface-2) !important;
}

html[data-theme="dark"] .mensaje-meta-item .meta-label {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .mensaje-meta-item .meta-value {
  color: var(--mantis-text);
}

html[data-theme="dark"] .mensaje-contenido blockquote,
html[data-theme="dark"] .mensaje-contenido :deep(blockquote) {
  color: var(--mantis-muted);
  border-left-color: #3b82f6;
}

html[data-theme="dark"] .mensaje-contenido code,
html[data-theme="dark"] .mensaje-contenido pre,
html[data-theme="dark"] .mensaje-contenido :deep(code),
html[data-theme="dark"] .mensaje-contenido :deep(pre) {
  background-color: var(--mantis-surface-2) !important;
  border-color: var(--mantis-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .gravatar-fallback-icon {
  background: var(--mantis-surface-2);
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .archivo-adjunto {
  background: var(--mantis-surface-2) !important;
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .archivo-adjunto h6 {
  color: var(--mantis-text);
}

html[data-theme="dark"] .actividad-evento {
  background: var(--mantis-surface-2) !important;
  border-color: var(--mantis-border);
  color: var(--mantis-muted);
}

html[data-theme="dark"] .actividad-texto strong {
  color: var(--mantis-text);
}

html[data-theme="dark"] .reply-form-card {
  background: var(--mantis-surface) !important;
  border-color: var(--mantis-border);
  box-shadow: 0 2px 10px var(--mantis-shadow);
}

html[data-theme="dark"] .reply-form-header {
  background: var(--mantis-surface-2) !important;
  border-bottom-color: var(--mantis-border);
}

html[data-theme="dark"] .reply-form-title {
  color: var(--mantis-text);
}

html[data-theme="dark"] .btn-fmt {
  background: var(--mantis-input-bg);
  border-color: var(--mantis-input-border);
  color: var(--mantis-muted);
}

html[data-theme="dark"] .btn-fmt.active {
  background: #4f6ef7;
  color: #fff;
  border-color: #4f6ef7;
}

html[data-theme="dark"] #reply-quill-wrapper {
  border-bottom-color: var(--mantis-border);
}

html[data-theme="dark"] #reply-quill-wrapper .ql-toolbar,
html[data-theme="dark"] .ql-snow .ql-toolbar,
html[data-theme="dark"] .ql-snow.ql-toolbar {
  background: var(--mantis-surface-2) !important;
  border-color: var(--mantis-border) !important;
}

html[data-theme="dark"] #reply-quill-wrapper .ql-container,
html[data-theme="dark"] .ql-snow .ql-container {
  background: var(--mantis-surface) !important;
  border-color: var(--mantis-border) !important;
  color: var(--mantis-text);
}

html[data-theme="dark"] .ql-editor,
html[data-theme="dark"] .ql-snow .ql-editor {
  color: var(--mantis-text);
}

html[data-theme="dark"] .ql-snow .ql-stroke {
  stroke: var(--mantis-muted);
}

html[data-theme="dark"] .ql-snow .ql-fill,
html[data-theme="dark"] .ql-snow .ql-picker {
  fill: var(--mantis-muted);
  color: var(--mantis-muted);
}

html[data-theme="dark"] .ql-snow .ql-picker-options {
  background: var(--mantis-surface);
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .reply-textarea {
  background: var(--mantis-surface);
  color: var(--mantis-text);
}

html[data-theme="dark"] .reply-attachments-section,
html[data-theme="dark"] .reply-footer {
  background: var(--mantis-surface-2) !important;
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .reply-dropzone {
  background: var(--mantis-surface) !important;
  border-color: var(--mantis-border);
  color: var(--mantis-muted);
}

html[data-theme="dark"] .reply-dropzone:hover,
html[data-theme="dark"] .reply-dropzone.drag-over {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: #3b82f6;
  color: var(--mantis-text);
}

html[data-theme="dark"] .reply-file-item {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .reply-file-name {
  color: var(--mantis-text);
}

html[data-theme="dark"] .btn-toggle-notas {
  color: var(--mantis-muted);
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .ticket-detail-container .empty-state h4 {
  color: var(--mantis-text);
}

/* Controles inline de ticket.html */
html[data-theme="dark"] .badge-estado-ctrl.estado-abierto {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #6ee7b7 !important;
}

html[data-theme="dark"] .badge-estado-ctrl.estado-cerrado {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] .badge-estado-ctrl.estado-resuelto {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
}

html[data-theme="dark"] .badge-estado-ctrl.estado-archivado {
  background: var(--mantis-surface-2) !important;
  color: var(--mantis-muted) !important;
}

html[data-theme="dark"] .badge-estado-ctrl.estado-default {
  background: var(--mantis-surface-2) !important;
  color: var(--mantis-muted) !important;
}

html[data-theme="dark"] .badge-agente-ctrl {
  background: rgba(59, 130, 246, 0.18) !important;
  color: #93c5fd !important;
}

html[data-theme="dark"] .badge-agente-ctrl .agente-nombre.sin-asignar {
  color: var(--mantis-muted) !important;
}

html[data-theme="dark"] .badge-resuelto-ctrl {
  background: rgba(59, 130, 246, 0.18) !important;
  color: #93c5fd !important;
}

html[data-theme="dark"] .resolved-at-fecha,
html[data-theme="dark"] .modal-nota-label,
html[data-theme="dark"] .ticket-ctrl-label {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .ticket-ctrl-block--compact {
  border-top-color: var(--mantis-border) !important;
}

html[data-theme="dark"] .reply-tipo-toggle {
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .btn-ctrl-estado {
  background: transparent;
}

html[data-theme="dark"] .btn-tipo {
  background: var(--mantis-surface-2);
  color: var(--mantis-muted);
}

html[data-theme="dark"] .reply-mode-nota {
  background: rgba(251, 191, 36, 0.1) !important;
  border-left-color: #f59e0b !important;
}

html[data-theme="dark"] .reply-mode-nota .reply-form-title {
  color: #fcd34d;
}

html[data-theme="dark"] .canned-sidebar {
  background: var(--mantis-surface-2);
  border-color: var(--mantis-border);
}

html[data-theme="dark"] .canned-search input {
  background: var(--mantis-input-bg);
  border-color: var(--mantis-input-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .canned-list-item {
  color: var(--mantis-text);
  border-bottom-color: var(--mantis-border);
}

html[data-theme="dark"] .canned-list-item:hover {
  background: var(--mantis-table-hover) !important;
}

html[data-theme="dark"] .canned-list-item.active {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
}

html[data-theme="dark"] .canned-preview-title,
html[data-theme="dark"] .canned-preview-notes {
  background: var(--mantis-surface-2) !important;
  border-color: var(--mantis-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .canned-preview-body {
  color: var(--mantis-text);
}

/* --- Infrastructure: filas semanticas y notificaciones --- */
html[data-theme="dark"] .row-instancia-inactiva td,
html[data-theme="dark"] .row-instancia-inactiva th {
  background: rgba(251, 146, 60, 0.15) !important;
  color: #fdba74 !important;
}

html[data-theme="dark"] .row-instancia-inactiva:hover td,
html[data-theme="dark"] .row-instancia-inactiva:hover th {
  background: rgba(251, 146, 60, 0.25) !important;
}

html[data-theme="dark"] .row-notif-inactiva td {
  background: var(--mantis-surface-2) !important;
  color: var(--mantis-muted) !important;
}

html[data-theme="dark"] .dj-notif-status-banner {
  background: linear-gradient(
    135deg,
    rgba(244, 67, 54, 0.12) 0%,
    rgba(244, 67, 54, 0.18) 100%
  ) !important;
  border-color: rgba(244, 67, 54, 0.35);
}

html[data-theme="dark"] .dj-notif-status__titulo {
  color: #fca5a5;
}

html[data-theme="dark"] .dj-notif-status__text,
html[data-theme="dark"] .dj-notif-status__cuerpo {
  color: var(--mantis-text);
}

/* --- STT word_info --- */
html[data-theme="dark"] #demo-controls button {
  background: var(--mantis-surface);
  border-color: var(--mantis-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .unread {
  background-color: var(--mantis-surface) !important;
}

html[data-theme="dark"] .read {
  background-color: var(--mantis-surface-2) !important;
}

/* --- Plugins CDN (SweetAlert2, datetimepicker) --- */
html[data-theme="dark"] .swal2-popup {
  background: var(--mantis-surface) !important;
  color: var(--mantis-text);
}

html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container {
  color: var(--mantis-text);
}

html[data-theme="dark"] .bootstrap-datetimepicker-widget,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table th {
  background: var(--mantis-surface);
  color: var(--mantis-text);
}

html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.active,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.active:hover {
  background: #2563eb;
  color: #fff;
}

/* --- Bootstrap/Limitless componentes transversales --- */
html[data-theme="dark"] .dropdown-menu {
  background-color: var(--mantis-surface);
  border-color: var(--mantis-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .dropdown-item {
  color: var(--mantis-text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--mantis-table-hover);
  color: var(--mantis-text);
}

html[data-theme="dark"] .list-group-item {
  background-color: var(--mantis-surface);
  border-color: var(--mantis-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--mantis-muted);
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--mantis-surface);
  border-color: var(--mantis-border);
  color: var(--mantis-text);
}

html[data-theme="dark"] .loading-spinner {
  border-color: rgba(255, 255, 255, 0.12);
  border-top-color: #3b82f6;
}

html[data-theme="dark"] .alert-secondary {
  background-color: var(--mantis-surface-2);
  border-color: var(--mantis-border);
  color: var(--mantis-text);
}

/* Selector en navbar (derecha, junto al usuario) */
.mantis-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.15rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.mantis-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.mantis-theme-btn:hover,
.mantis-theme-btn:focus {
  color: #fff;
  outline: 0;
  background: rgba(255, 255, 255, 0.12);
}

.mantis-theme-btn.is-active {
  background: rgba(112, 182, 68, 0.35);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(112, 182, 68, 0.55);
}