@media (max-width: 991.98px) {
    .control-sidebar-open .control-sidebar, .control-sidebar-open .control-sidebar::before {
        right: 0;
        display: block;
    }
}

.breadcrumb {
    background-color: white !important;
    padding: 5px 20px !important;
    margin-bottom: 0;
    list-style: none;
    border: 1px solid #e9ecef;
}

.breadcrumb a {
    color: #4a4a4a;;
    font-weight: 400;
}

.btn {
    color: white !important;
}

.card-footer {
    border-top: 1px solid #dee2e6;
}

.card .card-header .card-title {
    font-size: 1.3rem;
    font-weight: bold;
}

.table-bordered {
    border: 0 !important;
}

table.table-bordered.dataTable tbody td {
    border-bottom-width: 1px !important;
}

.panel-module {
    min-height: 480px;
}

.sbox {
    webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
    -ms-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
    -o-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
}

.panel-module .icon {
    padding-top: 12px;
    width: 150px;
    float: left;
    height: 180px;
    background: #ffffff26;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
    border-radius: 5px;
    transition: width 2s;
    text-align: center;
}

.panel-module .icon .iconname {
    font-weight: bold;
    width: 100%;
    position: absolute;
    text-align: center;
    font-size: 14px;
    line-height: 10px;
}

.panel-module .icon .iconimage {
    width: 100%;
    text-align: center;
}

.panel-module .icon:hover {
    background: #cdcdcd;
    cursor: pointer;
}

.panel-module img {
    height: 70px;
    margin-top: 15px;
    border-bottom: 1px solid #9E9E9E;
    padding-bottom: 10px;
}

.pd {
    padding: 5px;
}

.panel-module .icon .icondesc {
    font-weight: normal;
    font-size: 10px;
    line-height: 10px;
}

.panel-module .icon .iconname .tituloicon {
    font-size: 14px;
    font-weight: bold;
}

.panel-module a {
    color: #222222;
}

.nav-info-user li a {
    color: #0c0c0c;
    font-weight: 500;
}

.nav-info-user li a span {;
    font-weight: normal;
}

.control-sidebar-content hr {
    border-color: #dee2e6;
}

.password-progress {
    margin-top: 10px;
    margin-bottom: 0;
}

.nav-info-user .nav-item span {
    font-size: 13px;
}

.dataTables_scrollHeadInner {
    width: 100% !important;
}

.dataTables_scrollHeadInner table {
    width: 100% !important;
}

.form-control-checkbox {
    height: 25px;
    width: 25px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.tooltip-inner {
    font-size: 13px !important;
    text-align: left;
}

.cursor-pointer {
    cursor: pointer;
}

.module-selected {
    background-color: #cdcdcd !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE
   Activado cuando <body> tiene la clase "dark-mode"
   ═══════════════════════════════════════════════════════════════════════════ */

/* Variables de paleta */
body.dark-mode {
    --dm-bg:         #1a1e2e;
    --dm-card:       #20253a;
    --dm-card-hdr:   #181c2d;
    --dm-border:     #2c3150;
    --dm-text:       #c5c9d8;
    --dm-muted:      #7279a0;
    --dm-input:      #161929;
    --dm-input-bdr:  #363c60;
    --dm-hover:      #1e2340;
    --dm-link:       #7b93d8;
}

/* Tiles Esri (World_Street_Map) en modo oscuro: invierte y matiza a azul
   marino, sin depender de proveedores externos como CartoDB (prohibido). */
.tiles-esri-dark { filter: invert(1) hue-rotate(20deg) saturate(2.2) brightness(0.85) contrast(0.95); }

/* — Fondo principal — */
body.dark-mode .content-wrapper,
body.dark-mode .content-header { background: var(--dm-bg) !important; }

/* — Footer — */
body.dark-mode .main-footer {
    background: var(--dm-card-hdr) !important;
    border-top-color: var(--dm-border) !important;
    color: var(--dm-muted) !important;
}

/* — Cards — */
body.dark-mode .card {
    background: var(--dm-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
}
body.dark-mode .card-header {
    background: var(--dm-card-hdr) !important;
    border-bottom-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .card .card-title,
body.dark-mode .card-title { color: var(--dm-text) !important; }
body.dark-mode .card-body  { color: var(--dm-text) !important; }
body.dark-mode .card-footer {
    background: var(--dm-card-hdr) !important;
    border-top-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .dashboard-card .card-header { background: var(--dm-card-hdr) !important; }

/* — Tablas — */
body.dark-mode .table { color: var(--dm-text) !important; }
body.dark-mode .table th,
body.dark-mode .table td { border-color: var(--dm-border) !important; }
body.dark-mode .thead-light th {
    background: var(--dm-card-hdr) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .table-hover tbody tr:hover { background: var(--dm-hover) !important; }
body.dark-mode .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02) !important; }

/* — Formularios — */
body.dark-mode .form-control,
body.dark-mode .custom-select {
    background: var(--dm-input) !important;
    border-color: var(--dm-input-bdr) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .form-control:focus,
body.dark-mode .custom-select:focus {
    background: var(--dm-input) !important;
    border-color: #5a65a0 !important;
    color: var(--dm-text) !important;
    box-shadow: 0 0 0 .2rem rgba(90,101,160,.25) !important;
}
body.dark-mode .form-control::placeholder { color: var(--dm-muted) !important; }
body.dark-mode .input-group-text {
    background: var(--dm-card-hdr) !important;
    border-color: var(--dm-input-bdr) !important;
    color: var(--dm-text) !important;
}
body.dark-mode label { color: var(--dm-text) !important; }
body.dark-mode .form-check-label { color: var(--dm-text) !important; }
body.dark-mode small, body.dark-mode .small { color: var(--dm-muted) !important; }
body.dark-mode .text-muted { color: var(--dm-muted) !important; }
body.dark-mode hr { border-color: var(--dm-border) !important; }

/* — Select2 — */
body.dark-mode .select2-container--bootstrap4 .select2-selection {
    background: var(--dm-input) !important;
    border-color: var(--dm-input-bdr) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .select2-container--bootstrap4 .select2-selection__rendered {
    color: var(--dm-text) !important;
}
body.dark-mode .select2-dropdown {
    background: var(--dm-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .select2-results__option { color: var(--dm-text) !important; }
body.dark-mode .select2-results__option--highlighted {
    background: var(--dm-hover) !important;
}
body.dark-mode .select2-search--dropdown .select2-search__field {
    background: var(--dm-input) !important;
    border-color: var(--dm-input-bdr) !important;
    color: var(--dm-text) !important;
}

/* — Breadcrumb — */
body.dark-mode .breadcrumb {
    background: var(--dm-card-hdr) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .breadcrumb-item a { color: var(--dm-link) !important; }
body.dark-mode .breadcrumb-item.active { color: var(--dm-muted) !important; }
body.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: var(--dm-muted) !important; }

/* — Modales — */
body.dark-mode .modal-content {
    background: var(--dm-card) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .modal-header {
    background: var(--dm-card-hdr) !important;
    border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .modal-footer {
    background: var(--dm-card-hdr) !important;
    border-top-color: var(--dm-border) !important;
}
body.dark-mode .modal-title { color: var(--dm-text) !important; }
body.dark-mode .close { color: var(--dm-text) !important; }

/* — Dropdowns — */
body.dark-mode .dropdown-menu {
    background: var(--dm-card) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .dropdown-item { color: var(--dm-text) !important; }
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus { background: var(--dm-hover) !important; }
body.dark-mode .dropdown-divider { border-color: var(--dm-border) !important; }

/* — Badges y pills — */
body.dark-mode .badge-secondary { background: #363c60 !important; color: var(--dm-text) !important; }

/* — Nav tabs — */
body.dark-mode .nav-tabs { border-bottom-color: var(--dm-border) !important; }
body.dark-mode .nav-tabs .nav-link { color: var(--dm-muted) !important; }
body.dark-mode .nav-tabs .nav-link.active {
    background: var(--dm-card) !important;
    border-color: var(--dm-border) var(--dm-border) var(--dm-card) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .tab-content { color: var(--dm-text) !important; }

/* — Lista rank (dashboard) — */
body.dark-mode .rank-row { border-bottom-color: var(--dm-border) !important; }
body.dark-mode .rank-bar  { background: var(--dm-border) !important; }

/* — Mapa Leaflet — */
body.dark-mode .leaflet-popup-content-wrapper,
body.dark-mode .leaflet-popup-tip { background: var(--dm-card) !important; color: var(--dm-text) !important; }
body.dark-mode .leaflet-control-zoom a {
    background: var(--dm-card) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .info.legend {
    background: rgba(24,28,45,.92) !important;
    color: var(--dm-text) !important;
}

/* — Botón dark-mode en navbar — */
#btn-dark-mode { cursor: pointer; opacity: .85; transition: opacity .2s; }
#btn-dark-mode:hover { opacity: 1; }