html.dark-mode {
    --dm-bg:           #1a1d2e;
    --dm-bg-secondary: #232540;
    --dm-bg-card:      #2a2d45;
    --dm-bg-navbar:    #1e2139;
    --dm-bg-sidebar:   #1e2139;
    --dm-border:       #383b5a;
    --dm-text:         #cfd3ec;
    --dm-text-muted:   #8b8fa8;
    --dm-text-heading: #e7e9f6;
    --dm-input-bg:     #2a2d45;
    --dm-input-border: #4a4e72;
    --dm-hover:        rgba(105, 108, 255, 0.08);
    --dm-shadow:       0 4px 24px rgba(0, 0, 0, 0.5);
    --dm-primary:      #696cff;
}

/* body */
html.dark-mode body,
html.dark-mode .bg-body,
html.dark-mode .layout-wrapper,
html.dark-mode .layout-page,
html.dark-mode .content-wrapper {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

/* sidebar */
html.dark-mode .layout-menu,
html.dark-mode #layout-menu,
html.dark-mode .bg-menu-theme {
    background-color: var(--dm-bg-sidebar) !important;
    border-right: 1px solid var(--dm-border) !important;
}

html.dark-mode .menu-item .menu-link {
    color: var(--dm-text) !important;
}

html.dark-mode .menu-item .menu-link:hover,
html.dark-mode .menu-item.active > .menu-link {
    background-color: rgba(105, 108, 255, 0.15) !important;
    color: var(--dm-primary) !important;
}

html.dark-mode .menu-header span {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .app-brand-text {
    color: var(--dm-text-heading) !important;
}

/* navbar */
html.dark-mode .layout-navbar,
html.dark-mode .navbar,
html.dark-mode .bg-navbar-theme {
    background-color: var(--dm-bg-navbar) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .navbar .form-control,
html.dark-mode .navbar input {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

html.dark-mode .navbar .nav-link,
html.dark-mode .navbar i {
    color: var(--dm-text) !important;
}

/* las cards */
html.dark-mode .card {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    box-shadow: var(--dm-shadow) !important;
}

html.dark-mode .card-header {
    background-color: var(--dm-bg-card) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .card-footer {
    background-color: var(--dm-bg-card) !important;
    border-top-color: var(--dm-border) !important;
}

/* letra */
html.dark-mode h1, html.dark-mode h2,
html.dark-mode h3, html.dark-mode h4,
html.dark-mode h5, html.dark-mode h6 {
    color: var(--dm-text-heading) !important;
}

html.dark-mode p,
html.dark-mode label,
html.dark-mode small,
html.dark-mode .form-label {
    color: var(--dm-text) !important;
}

html.dark-mode span:not(.badge):not(.avatar-initial):not(.select2-selection__rendered) {
    color: var(--dm-text) !important;
}

html.dark-mode .text-muted {
    color: var(--dm-text-muted) !important;
}

/* formularios */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark-mode textarea,
html.dark-mode select {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-input-border) !important;
    color: var(--dm-text) !important;
    -webkit-text-fill-color: var(--dm-text) !important;
    color-scheme: dark;
}

html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus,
html.dark-mode input:not([type="checkbox"]):not([type="radio"]):focus,
html.dark-mode textarea:focus {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-primary) !important;
    color: var(--dm-text) !important;
    -webkit-text-fill-color: var(--dm-text) !important;
    box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.25) !important;
}

html.dark-mode input:-webkit-autofill,
html.dark-mode input:-webkit-autofill:hover,
html.dark-mode input:-webkit-autofill:focus,
html.dark-mode textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--dm-text) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--dm-input-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

html.dark-mode .form-control::placeholder,
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: var(--dm-text-muted) !important;
    -webkit-text-fill-color: var(--dm-text-muted) !important;
}

html.dark-mode .input-group-text {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-input-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .input-group .form-control {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-input-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .input-group .form-control:focus {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-primary) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .input-group-merge .form-control {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-input-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .form-check-input {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-input-border) !important;
}

html.dark-mode .form-check-input:checked {
    background-color: var(--dm-primary) !important;
    border-color: var(--dm-primary) !important;
}

/* tablas */
html.dark-mode .table {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    background-color: var(--dm-bg-card) !important;
    --bs-table-bg: var(--dm-bg-card) !important;
    --bs-table-color: var(--dm-text) !important;
    --bs-table-border-color: var(--dm-border) !important;
}

html.dark-mode .table th {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .table td {
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    background-color: transparent !important;
}

html.dark-mode .table-hover tbody tr:hover {
    background-color: var(--dm-hover) !important;
}

html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: var(--dm-text) !important;
    --bs-table-accent-bg: transparent !important;
}

/* Datatables controls and body */
html.dark-mode .dataTables_wrapper .dataTables_length,
html.dark-mode .dataTables_wrapper .dataTables_filter,
html.dark-mode .dataTables_wrapper .dataTables_info,
html.dark-mode .dataTables_wrapper .dataTables_paginate {
    color: var(--dm-text) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_length select,
html.dark-mode .dataTables_wrapper .dataTables_filter input {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-input-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .table tbody tr td {
    background-color: transparent !important;
}


/* el drop */
html.dark-mode .dropdown-menu {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    box-shadow: var(--dm-shadow) !important;
}

html.dark-mode .dropdown-item {
    color: var(--dm-text) !important;
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
    background-color: var(--dm-hover) !important;
    color: var(--dm-primary) !important;
}

html.dark-mode .dropdown-divider {
    border-color: var(--dm-border) !important;
}

/* todo lo del selec2 */
html.dark-mode .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-input-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--dm-text) !important;
}

html.dark-mode .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    box-shadow: var(--dm-shadow) !important;
}

html.dark-mode .select2-container--bootstrap-5 .select2-results__option {
    color: var(--dm-text) !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

html.dark-mode .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--dm-primary) !important;
    color: #fff !important;
}

html.dark-mode .select2-container--bootstrap-5 .select2-search__field {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-input-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .select2-dropdown {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    max-width: 400px !important;
}

html.dark-mode .select2-results {
    overflow-x: hidden !important;
}

html.dark-mode .select2-results__option {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text) !important;
}

/* filepond */
html.dark-mode .filepond--root {
    color: var(--dm-text) !important;
}

html.dark-mode .filepond--panel-root {
    background-color: var(--dm-input-bg) !important;
    border: 1px solid var(--dm-input-border) !important;
}

html.dark-mode .filepond--drop-label {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .filepond--drop-label label {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .filepond--label-action {
    color: var(--dm-primary) !important;
    text-decoration-color: var(--dm-primary) !important;
}

html.dark-mode .filepond--item-panel {
    background-color: var(--dm-bg-secondary) !important;
}

html.dark-mode .filepond--file {
    color: var(--dm-text) !important;
}

html.dark-mode .filepond--file-info-main {
    color: var(--dm-text) !important;
}

html.dark-mode .filepond--file-info-sub,
html.dark-mode .filepond--file-status-main,
html.dark-mode .filepond--file-status-sub {
    color: var(--dm-text-muted) !important;
}

/* acord */
html.dark-mode .accordion-item {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .accordion-button {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .accordion-button:not(.collapsed) {
    background-color: rgba(105, 108, 255, 0.15) !important;
    color: var(--dm-primary) !important;
}

html.dark-mode .accordion-button::after {
    filter: invert(1) !important;
}

html.dark-mode .accordion-body {
    background-color: var(--dm-bg-card) !important;
}

/* modal */
html.dark-mode .modal-content {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    border-color: var(--dm-border) !important;
}

html.dark-mode .modal-title {
    color: var(--dm-text-heading) !important;
}

/* alertas */
html.dark-mode .alert {
    border-color: var(--dm-border) !important;
}

html.dark-mode .alert-info, html.dark-mode .alert-light-info { background-color: rgba(0,207,232,0.1) !important; color: #00cfe8 !important; }
html.dark-mode .alert-warning, html.dark-mode .alert-light-warning { background-color: rgba(255,159,67,0.1) !important; color: #ff9f43 !important; }
html.dark-mode .alert-danger, html.dark-mode .alert-light-danger { background-color: rgba(234,84,85,0.1) !important; color: #ea5455 !important; }
html.dark-mode .alert-success, html.dark-mode .alert-light-success { background-color: rgba(40,199,111,0.1) !important; color: #28c76f !important; }
html.dark-mode .alert-primary, html.dark-mode .alert-light-primary { background-color: rgba(105,108,255,0.1) !important; color: #696cff !important; }

/* badges y etiquetas generales */
html.dark-mode .bg-label-primary { background-color: rgba(105,108,255,0.15) !important; color: #696cff !important; }
html.dark-mode .bg-label-success { background-color: rgba(40,199,111,0.15)  !important; color: #28c76f !important; }
html.dark-mode .bg-label-warning { background-color: rgba(255,159,67,0.15)  !important; color: #ff9f43 !important; }
html.dark-mode .bg-label-danger  { background-color: rgba(234,84,85,0.15)   !important; color: #ea5455 !important; }
html.dark-mode .bg-label-info    { background-color: rgba(0,207,232,0.15)   !important; color: #00cfe8 !important; }
html.dark-mode .bg-label-secondary { background-color: rgba(133,146,163,0.2)  !important; color: #a1acb8 !important; }

/* utilidades de color */
html.dark-mode .text-dark, 
html.dark-mode .text-black { 
    color: var(--dm-text-heading) !important; 
}
html.dark-mode .bg-white,
html.dark-mode .card-header.bg-white {
    background-color: transparent !important;
}
html.dark-mode .bg-light {
    background-color: var(--dm-bg-secondary) !important;
}

/* bread */


html.dark-mode .breadcrumb-item,
html.dark-mode .breadcrumb-item a {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .breadcrumb-item.active {
    color: var(--dm-text) !important;
}

/* foter */
html.dark-mode .content-footer,
html.dark-mode .bg-footer-theme {
    background-color: var(--dm-bg-navbar) !important;
    border-top: 1px solid var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}

html.dark-mode .footer-link {
    color: var(--dm-primary) !important;
}

/* nav trablas */
html.dark-mode .nav-pills .nav-link {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .nav-pills .nav-link.active {
    background-color: var(--dm-primary) !important;
    color: #fff !important;
}

html.dark-mode .nav-tabs .nav-link {
    color: var(--dm-text-muted) !important;
    border-color: transparent !important;
}

html.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) var(--dm-border) var(--dm-bg-card) !important;
    color: var(--dm-primary) !important;
}

/* listado en grupo */
html.dark-mode .list-group-item {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .list-group-item:hover {
    background-color: var(--dm-hover) !important;
}

/* general */
html.dark-mode code {
    background-color: var(--dm-bg-secondary) !important;
    color: #ff79c6 !important;
    padding: 2px 6px;
    border-radius: 4px;
}

html.dark-mode pre {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* mapa */
html.dark-mode .leaflet-layer,
html.dark-mode .leaflet-control-zoom-in,
html.dark-mode .leaflet-control-zoom-out,
html.dark-mode .leaflet-control-attribution {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* Botones del mapa */
html.dark-mode #centerUsers,
html.dark-mode #centerClients,
html.dark-mode #centerSectors {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode #togglePolling {
    background-color: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

/* Leyenda del mapa */
html.dark-mode .legend-item {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .legend-item span {
    color: var(--dm-text) !important;
}

/* Tabs del mapa */
html.dark-mode .nav-tabs {
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .nav-tabs .nav-link {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--dm-text-muted) !important;
}

html.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) var(--dm-border) var(--dm-bg-card) !important;
    color: var(--dm-primary) !important;
}

html.dark-mode .tab-content {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

/* scrol */
html.dark-mode ::-webkit-scrollbar { width: 6px; height: 6px; }
html.dark-mode ::-webkit-scrollbar-track { background: var(--dm-bg) !important; }
html.dark-mode ::-webkit-scrollbar-thumb { background: var(--dm-border) !important; border-radius: 3px; }

/* el darkmode */
.dark-mode-switch {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    cursor: pointer;
    gap: 8px;
}

.dark-mode-switch .form-check-input {
    cursor: pointer;
    width: 2rem !important;
    height: 1rem !important;
}

html.dark-mode .dark-mode-switch {
    color: var(--dm-text) !important;
}

/* Notificaciones no leídas */
.notification-unread {
    background-color: rgba(105, 108, 255, 0.05);
}

html.dark-mode .notification-unread {
    background-color: rgba(105, 108, 255, 0.1) !important;
}

/* ── Darkmode: File input con botón morado */
html.dark-mode .form-control[type="file"] {
  background-color: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .form-control[type="file"]::file-selector-button {
  background-color: #696cff !important;
  color: #fff !important;
  border: none !important;
  padding: 0.375rem 0.75rem;
  margin-right: 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

html.dark-mode .form-control[type="file"]::file-selector-button:hover {
  background-color: #5f61e6 !important;
}

/* Checkboxes en roles/permisos */
html.dark-mode .border.p-3.rounded {
  background-color: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

html.dark-mode ul.checkbox-list,
html.dark-mode .checkbox-list li,
html.dark-mode .vCheckboxLabel {
  color: var(--dm-text) !important;
}

/* Checkboxes de django admin y formularios */
html.dark-mode ul {
  color: var(--dm-text) !important;
}

html.dark-mode ul li {
  color: var(--dm-text) !important;
}

html.dark-mode ul li label {
  color: var(--dm-text) !important;
}

/* Checkboxes múltiples de Django */
html.dark-mode .form-check-label {
  color: var(--dm-text) !important;
}

html.dark-mode input[type="checkbox"] + label {
  color: var(--dm-text) !important;
}

/*  Paginación darkmode  */
html.dark-mode .page-link {
  background-color: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .page-item.active .page-link {
  background-color: #696cff !important;
  border-color: #696cff !important;
  color: #fff !important;
}

html.dark-mode .page-link:hover {
  background-color: rgba(105,108,255,0.15) !important;
  color: #696cff !important;
}

/* tabke kug¿ */
html.dark-mode thead.table-light th {
  background-color: rgba(255,255,255,0.05) !important;
  color: var(--dm-text) !important;
}

/* el select de audi mal config */
html.dark-mode .form-select.form-select-sm {
  background-color: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-input-border) !important;
}

/* con el login */

html.dark-mode .authentication-wrapper {
    background-color: var(--dm-bg) !important;
}

html.dark-mode .authentication-inner .card {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

/* Fuerza el color del texto en inputs del login
   incluyendo el autofill del browser (-webkit-text-fill-color) */
html.dark-mode .authentication-inner .form-control,
html.dark-mode .authentication-inner input.form-control {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-input-border) !important;
    color: var(--dm-text) !important;
    -webkit-text-fill-color: var(--dm-text) !important;
}

html.dark-mode .authentication-inner .form-control:focus,
html.dark-mode .authentication-inner input.form-control:focus {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-primary) !important;
    color: var(--dm-text) !important;
    -webkit-text-fill-color: var(--dm-text) !important;
    box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.25) !important;
}

/* Autofill del browser (Chrome guarda password y pone fondo azul) */
html.dark-mode .authentication-inner input:-webkit-autofill,
html.dark-mode .authentication-inner input:-webkit-autofill:hover,
html.dark-mode .authentication-inner input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dm-text) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--dm-input-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

html.dark-mode .authentication-inner .form-control::placeholder {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .authentication-inner .input-group-text {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-input-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .authentication-inner label,
html.dark-mode .authentication-inner .form-label {
    color: var(--dm-text) !important;
}

html.dark-mode .authentication-inner h4,
html.dark-mode .authentication-inner p {
    color: var(--dm-text) !important;
}

html.dark-mode .authentication-inner a small {
    color: var(--dm-primary) !important;
}

/* paginas de eror */
html.dark-mode .error-page {
    background-color: var(--dm-bg) !important;
}

html.dark-mode .error-card {
    background: var(--dm-bg-card) !important;
    box-shadow: var(--dm-shadow) !important;
}

html.dark-mode .error-title {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .error-message {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .btn-error-back {
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    background: transparent !important;
}

html.dark-mode .btn-error-back:hover {
    background: var(--dm-hover) !important;
    border-color: var(--dm-text-muted) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .error-icon.e403,
html.dark-mode .error-badge.e403,
html.dark-mode .error-icon.e404,
html.dark-mode .error-badge.e404 {
    background: rgba(105, 108, 255, 0.15) !important;
    color: var(--dm-primary) !important;
}

html.dark-mode .error-icon.e4xx,
html.dark-mode .error-badge.e4xx {
    background: rgba(255, 159, 67, 0.15) !important;
    color: #ff9f43 !important;
}

html.dark-mode .error-icon.e5xx,
html.dark-mode .error-badge.e5xx {
    background: rgba(234, 84, 85, 0.15) !important;
    color: #ea5455 !important;
}