/* =========================================================
   Setra GPS - Tema moderno v4 (capa sobre GPSWOX 3.7.12)
   Basado en el tema de la app Setra GPS (app_theme.dart):
   azul Setra #0B5ED7, amarillo #FFD004, azul marino #0A1F44.
   Ubicacion en el servidor:
   /var/www/html/setra-theme/setra-moderno.css
   Para desactivarlo: dejar este archivo vacio.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

:root {
    /* Marca (iguales a la app) */
    --st-blue: #0B5ED7;
    --st-blue-dark: #094db0;
    --st-yellow: #FFD004;
    --st-navy: #0A1F44;

    /* Modo claro (lightScheme de la app) */
    --st-primary: #0B5ED7;
    --st-primary-soft: #D9E7FF;
    --st-on-primary-soft: #00235A;
    --st-bg: #F3F6FB;
    --st-surface: #FFFFFF;
    --st-surface-low: #F5F8FC;
    --st-surface-mid: #EFF3F9;
    --st-surface-high: #E8EDF5;
    --st-border: #DAE2EE;
    --st-outline: #B4C0D0;
    --st-text: #14202F;
    --st-muted: #5B6575;
    --st-green: #2E7D32;
    --st-red: #C62828;

    --st-radius: 14px;
    --st-radius-card: 20px;
    --st-radius-dialog: 24px;
    --st-shadow: 0 8px 28px rgba(10, 31, 68, .12);
    --st-shadow-sm: 0 2px 10px rgba(10, 31, 68, .10);
}

/* ---------- Tipografia ---------- */
body,
.btn:not(.icon):not(.fa),
.form-control,
.nav,
.table,
.dropdown-menu,
.modal,
.tooltip,
.popover,
.leaflet-container {
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

body {
    color: var(--st-text);
    background: var(--st-bg) !important;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Barra superior (como el AppBar de la app) ---------- */
#header .navbar.main-navbar {
    background: var(--st-surface) !important;
    border: 0 !important;
    box-shadow: 0 1px 0 var(--st-border) !important;
}

#header .navbar-brand img {
    max-height: 38px !important;
    width: auto;
}

#header .navbar-nav > li > a {
    border-radius: 999px;
    margin: 0 2px;
    transition: background .15s ease;
}

/* Iconos grises palidos -> mas oscuros y legibles */
#header .navbar-nav > li > a .icon {
    filter: brightness(.45) saturate(1.4);
    transition: filter .15s ease;
}

/* Al pasar el mouse o abrir: pildora amarilla como el menu de la app */
#header .navbar-nav > li > a:hover,
#header .navbar-nav > li.open > a,
#header .navbar-nav > li > a:focus {
    background: var(--st-yellow) !important;
}

#header .navbar-nav > li > a:hover .icon,
#header .navbar-nav > li.open > a .icon {
    filter: brightness(.2);
}

/* ---------- Menus desplegables (popupMenuTheme) ---------- */
.dropdown-menu {
    background: var(--st-surface) !important;
    border: 1px solid var(--st-border) !important;
    border-radius: var(--st-radius) !important;
    box-shadow: var(--st-shadow) !important;
    padding: 6px !important;
}

.dropdown-menu > li > a {
    border-radius: 10px;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    color: var(--st-text) !important;
    transition: background .12s ease, color .12s ease;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--st-primary-soft) !important;
    color: var(--st-on-primary-soft) !important;
}

/* ---------- Panel lateral como tarjeta flotante ---------- */
#sidebar .sidebar-content {
    background: var(--st-surface) !important;
    border: 1px solid var(--st-border);
    border-radius: 0 var(--st-radius-card) var(--st-radius-card) 0;
    box-shadow: var(--st-shadow) !important;
    overflow: hidden;
}

/* Pestanas: indicador en pildora amarilla (navigationBarTheme) */
#sidebar .nav-tabs.nav-default {
    background: var(--st-surface) !important;
    border-bottom: 1px solid var(--st-border) !important;
    padding: 8px 8px 8px !important;
}

#sidebar .nav-tabs > li > a {
    color: var(--st-muted) !important;
    font-weight: 600;
    font-size: 13px;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background .15s ease, color .15s ease;
}

#sidebar .nav-tabs > li > a:hover {
    background: var(--st-surface-mid) !important;
    color: var(--st-text) !important;
}

#sidebar .nav-tabs > li.active > a,
#sidebar .nav-tabs > li.active > a:hover,
#sidebar .nav-tabs > li.active > a:focus {
    background: var(--st-yellow) !important;
    color: var(--st-navy) !important;
    box-shadow: none !important;
}

#sidebar .tab-pane-header {
    background: var(--st-surface) !important;
    border-bottom: 1px solid var(--st-border) !important;
}

/* Buscador (inputDecorationTheme: relleno + borde + radio 14) */
#sidebar .form-group.search .form-control {
    background: var(--st-surface-low) !important;
    border: 1px solid var(--st-border) !important;
    border-radius: var(--st-radius) !important;
    box-shadow: none !important;
    height: 38px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#sidebar .form-group.search .form-control:focus {
    border-color: var(--st-primary) !important;
    box-shadow: 0 0 0 2px rgba(11, 94, 215, .18) !important;
}

#sidebar .input-group-btn .btn,
#sidebar .input-group-btn .btn-group > .btn {
    border-radius: var(--st-radius) !important;
    margin-left: 6px;
    height: 38px;
}

/* ---------- Lista de vehiculos ---------- */
#ajax-items,
#sidebar .tab-pane-body {
    background: var(--st-surface) !important;
}

/* Encabezado de grupo */
#ajax-items .group-heading {
    background: var(--st-surface-low) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--st-border) !important;
    color: var(--st-text) !important;
    font-weight: 700;
    letter-spacing: .1px;
}

/* Filas */
#ajax-items .group-list > li {
    border-bottom: 1px solid var(--st-surface-mid) !important;
    transition: background .12s ease;
}

#ajax-items .group-list > li > div {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

#ajax-items .group-list > li:hover {
    background: var(--st-surface-low) !important;
}

/* Seleccionado: azul suave + barra amarilla (como el indicador de la app) */
#ajax-items .group-list > li.active {
    background: var(--st-primary-soft) !important;
}

#ajax-items .group-list > li.active > div:first-child {
    box-shadow: inset 4px 0 0 var(--st-yellow);
}

#ajax-items .group-list > li > .name [data-device="name"] {
    color: var(--st-text);
    font-size: 13px;
    font-weight: 600;
}

#ajax-items .group-list > li.active > .name [data-device="name"] {
    color: var(--st-on-primary-soft);
}

#ajax-items .group-list > li > .name [data-device="time"] {
    color: var(--st-muted);
    font-size: 11px;
}

#ajax-items .group-list > li > .details {
    color: var(--st-muted);
    font-size: 12px;
}

/* Barras de desplazamiento finas */
#sidebar ::-webkit-scrollbar,
#widgets ::-webkit-scrollbar,
.modal ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#sidebar ::-webkit-scrollbar-thumb,
#widgets ::-webkit-scrollbar-thumb,
.modal ::-webkit-scrollbar-thumb {
    background: var(--st-outline);
    border-radius: 8px;
}

#sidebar ::-webkit-scrollbar-track,
#widgets ::-webkit-scrollbar-track,
.modal ::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- Botones (filledButtonTheme) ---------- */
.btn {
    border-radius: var(--st-radius) !important;
    font-weight: 500;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn-primary,
.btn-action {
    background: var(--st-blue) !important;
    border-color: var(--st-blue) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-action:hover,
.btn-action:focus {
    background: var(--st-blue-dark) !important;
    border-color: var(--st-blue-dark) !important;
}

.btn-default {
    background: var(--st-surface) !important;
    border-color: var(--st-outline) !important;
    color: var(--st-text) !important;
}

.btn-default:hover {
    background: var(--st-surface-low) !important;
}

/* ---------- Controles del mapa: todos iguales ---------- */
#map-controls > div {
    margin-bottom: 10px;
}

#map-controls .btn-group-vertical {
    background: var(--st-surface) !important;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius) !important;
    box-shadow: var(--st-shadow-sm) !important;
    overflow: hidden;
}

#map-controls .btn-group-vertical > .btn {
    background: var(--st-surface) !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--st-surface-mid) !important;
    transition: background .12s ease;
}

#map-controls .btn-group-vertical > .btn:last-child {
    border-bottom: 0 !important;
}

#map-controls .btn-group-vertical > .btn:hover {
    background: var(--st-surface-mid) !important;
}

/* Capa activa: azul Setra */
#map-controls .btn-group-vertical > .btn.active {
    background: var(--st-blue) !important;
}

/* ---------- Mapa: etiquetas, ventanas, agrupaciones ---------- */
.leaflet-label,
.leaflet-tooltip {
    background: var(--st-surface) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: var(--st-shadow-sm) !important;
    color: var(--st-text) !important;
    font-weight: 600;
    padding: 4px 12px !important;
}

.leaflet-popup-content-wrapper {
    background: var(--st-surface) !important;
    color: var(--st-text) !important;
    border-radius: var(--st-radius-card) !important;
    box-shadow: var(--st-shadow) !important;
}

.leaflet-popup-tip {
    background: var(--st-surface) !important;
}

/* Agrupaciones de vehiculos: circulo azul Setra con borde blanco */
.marker-cluster div {
    background: var(--st-blue) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 0 0 3px #fff, var(--st-shadow-sm);
}

.marker-cluster {
    background: rgba(11, 94, 215, .18) !important;
}

/* ---------- Panel inferior como hoja (bottomSheetTheme) ---------- */
#widgets .widgets-content {
    background: var(--st-surface) !important;
    border: 1px solid var(--st-border);
    border-bottom: 0;
    border-radius: var(--st-radius-dialog) var(--st-radius-dialog) 0 0;
    overflow: hidden;
    box-shadow: 0 -6px 28px rgba(10, 31, 68, .14);
}

#widgets .widget {
    background: var(--st-surface) !important;
    border: 0 !important;
    border-right: 1px solid var(--st-border) !important;
}

#widgets .widget:last-child {
    border-right: 0 !important;
}

#widgets .widget-heading {
    background: var(--st-surface) !important;
    border-bottom: 1px solid var(--st-border) !important;
}

#widgets .widget-title {
    color: var(--st-text) !important;
    font-weight: 700;
}

#widgets .widget-body .table td {
    border-color: var(--st-surface-mid) !important;
    color: var(--st-text);
}

#widgets .widget-body .table td:first-child {
    color: var(--st-muted);
}

/* ---------- Ventanas y formularios (dialogTheme) ---------- */
.modal-content {
    background: var(--st-surface) !important;
    color: var(--st-text);
    border: 0 !important;
    border-radius: var(--st-radius-dialog) !important;
    box-shadow: 0 24px 60px rgba(10, 31, 68, .28) !important;
    overflow: hidden;
}

.modal-header {
    background: var(--st-surface) !important;
    border-bottom: 1px solid var(--st-border) !important;
}

.modal-title {
    font-weight: 700;
    color: var(--st-text);
}

.modal-footer {
    border-top: 1px solid var(--st-border) !important;
}

.form-control {
    background-color: var(--st-surface-low) !important;
    color: var(--st-text) !important;
    border-radius: var(--st-radius) !important;
    border-color: var(--st-border) !important;
    box-shadow: none !important;
}

.form-control:focus {
    border-color: var(--st-primary) !important;
    box-shadow: 0 0 0 2px rgba(11, 94, 215, .18) !important;
}

/* =========================================================
   MODO OSCURO AUTOMATICO (segun la configuracion de Windows)
   Colores del darkScheme de la app.
   Para quitar solo el modo oscuro, borrar desde aqui hasta el final.
   ========================================================= */

/* v3.1 - correcciones modo oscuro */

/* v3.2 - bloques blancos de la barra superior en modo oscuro */

/* v3.3 - etiquetas del mapa legibles y logo en modo oscuro */

/* v3.4 - bandera en modo claro y pestanas de plegar paneles */
#header .language-selection .icon,
#header .language-selection img {
    filter: none !important;
}

#sidebar .btn-collapse,
#widgets .btn-collapse {
    background: var(--st-surface) !important;
    border: 1px solid var(--st-border) !important;
    box-shadow: var(--st-shadow-sm) !important;
}

/* v3.5 - modo oscuro: ventanas, geocercas, panel y mantenimiento */

/* v3.6 - encabezado de tablas en ventanas (Alertas, etc.) */

/* v3.7 - Panel: numeros con enlace y graficos en modo oscuro */

/* v3.8 - Panel: graficos en tarjeta blanca y tarjetas de colores */

/* v3.9 - solo la capa de fondo del grafico es blanca */

/* =========================================================
   MODO OSCURO
   - Automatico (predeterminado): sigue la configuracion de Windows.
   - El boton del tema fuerza claro u oscuro con el atributo
     data-st-theme en <html> (lo pone setra-theme.js).
   ========================================================= */

/* Oscuro automatico, salvo que el usuario elija "Claro" */
@media (prefers-color-scheme: dark) {
    html:not([data-st-theme="light"]) {
        --st-primary: #5B9DFF;
        --st-primary-soft: #12376F;
        --st-on-primary-soft: #D6E4FF;
        --st-bg: #0B1220;
        --st-surface: #111A2B;
        --st-surface-low: #0F1726;
        --st-surface-mid: #151F31;
        --st-surface-high: #1B2639;
        --st-border: #22304A;
        --st-outline: #3A4A63;
        --st-text: #E8EDF5;
        --st-muted: #9FB0C8;
        --st-shadow: 0 8px 28px rgba(0, 0, 0, .45);
        --st-shadow-sm: 0 2px 10px rgba(0, 0, 0, .40);
    }

    html:not([data-st-theme="light"]) .leaflet-tile-pane {
        filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.7);
    }

    html:not([data-st-theme="light"]) #header .navbar-nav > li > a .icon,
    html:not([data-st-theme="light"]) #map-controls .btn:not(.active) .icon,
    html:not([data-st-theme="light"]) #widgets .widget-title .icon,
    html:not([data-st-theme="light"]) .dropdown-menu .icon {
        filter: invert(.85) brightness(1.4);
    }

    html:not([data-st-theme="light"]) #header .navbar-nav > li > a:hover .icon,
    html:not([data-st-theme="light"]) #header .navbar-nav > li.open > a .icon {
        filter: brightness(.2);
    }

    html:not([data-st-theme="light"]) #sidebar,
    html:not([data-st-theme="light"]) #sidebar .table,
    html:not([data-st-theme="light"]) #sidebar .table td,
    html:not([data-st-theme="light"]) #sidebar .table th,
    html:not([data-st-theme="light"]) #widgets,
    html:not([data-st-theme="light"]) .modal-body,
    html:not([data-st-theme="light"]) .modal-body label,
    html:not([data-st-theme="light"]) .control-label,
    html:not([data-st-theme="light"]) .checkbox label,
    html:not([data-st-theme="light"]) .radio label {
        color: var(--st-text) !important;
    }

    html:not([data-st-theme="light"]) #sidebar .table > thead > tr > th,
    html:not([data-st-theme="light"]) #sidebar .table > tbody > tr > td,
    html:not([data-st-theme="light"]) .modal .table > thead > tr > th,
    html:not([data-st-theme="light"]) .modal .table > tbody > tr > td {
        background: transparent !important;
        border-color: var(--st-border) !important;
    }

    html:not([data-st-theme="light"]) .modal .table > tbody > tr:hover > td,
    html:not([data-st-theme="light"]) #sidebar .table > tbody > tr:hover > td {
        background: var(--st-surface-mid) !important;
    }

    html:not([data-st-theme="light"]) .modal .nav-tabs {
        border-color: var(--st-border) !important;
    }

    html:not([data-st-theme="light"]) .modal .nav-tabs > li > a {
        color: var(--st-muted) !important;
        background: transparent !important;
        border-color: transparent !important;
    }

    html:not([data-st-theme="light"]) .modal .nav-tabs > li.active > a {
        color: var(--st-text) !important;
        background: var(--st-surface-mid) !important;
        border-color: var(--st-border) !important;
    }

    html:not([data-st-theme="light"]) .close {
        color: var(--st-text) !important;
        opacity: .8;
        text-shadow: none !important;
    }

    html:not([data-st-theme="light"]) .bootstrap-select .dropdown-toggle,
    html:not([data-st-theme="light"]) .btn-default {
        background: var(--st-surface-mid) !important;
        color: var(--st-text) !important;
    }

    html:not([data-st-theme="light"]) .marker-cluster div {
        box-shadow: 0 0 0 3px var(--st-surface), var(--st-shadow-sm);
    }

    html:not([data-st-theme="light"]) #header,
    html:not([data-st-theme="light"]) #header .navbar,
    html:not([data-st-theme="light"]) #header .container-fluid,
    html:not([data-st-theme="light"]) #header .navbar-header,
    html:not([data-st-theme="light"]) #header .navbar-collapse {
        background: var(--st-surface) !important;
        background-image: none !important;
    }

    html:not([data-st-theme="light"]) #header ::before,
    html:not([data-st-theme="light"]) #header ::after {
        border-color: transparent !important;
        background: transparent !important;
    }

    html:not([data-st-theme="light"]) #header .language-selection .icon,
    html:not([data-st-theme="light"]) #header .language-selection img {
        filter: none !important;
    }

    html:not([data-st-theme="light"]) #header .navbar-brand,
    html:not([data-st-theme="light"]) #header .navbar-nav,
    html:not([data-st-theme="light"]) #header .navbar-right,
    html:not([data-st-theme="light"]) #header .navbar-nav > li {
        background: transparent !important;
        background-image: none !important;
    }

    html:not([data-st-theme="light"]) #header .navbar-brand img {
        border-radius: 10px;
    }

    html:not([data-st-theme="light"]) .leaflet-container {
        color: #14202F;
    }

    html:not([data-st-theme="light"]) #header .navbar-brand img {
        background: #fff;
        padding: 3px;
    }

    html:not([data-st-theme="light"]) #sidebar .btn-collapse i,
    html:not([data-st-theme="light"]) #widgets .btn-collapse i {
        filter: invert(.85) brightness(1.4);
    }

    html:not([data-st-theme="light"]) .modal .nav-tabs,
    html:not([data-st-theme="light"]) .modal-footer {
        background: var(--st-surface) !important;
    }

    html:not([data-st-theme="light"]) .modal-footer .btn-default {
        background: var(--st-surface-high) !important;
        border-color: var(--st-outline) !important;
        color: var(--st-text) !important;
    }

    html:not([data-st-theme="light"]) .checkbox label::before,
    html:not([data-st-theme="light"]) .radio label::before,
    html:not([data-st-theme="light"]) input[type="checkbox"],
    html:not([data-st-theme="light"]) input[type="radio"] {
        background-color: var(--st-surface-mid) !important;
        border-color: var(--st-outline) !important;
    }

    html:not([data-st-theme="light"]) #sidebar .group-heading,
    html:not([data-st-theme="light"]) #sidebar .group-list > li {
        background: var(--st-surface) !important;
        color: var(--st-text) !important;
        border-color: var(--st-border) !important;
    }

    html:not([data-st-theme="light"]) #sidebar .group-heading {
        background: var(--st-surface-low) !important;
    }

    html:not([data-st-theme="light"]) #sidebar .btn-collapse::before,
    html:not([data-st-theme="light"]) #sidebar .btn-collapse::after,
    html:not([data-st-theme="light"]) #widgets .btn-collapse::before,
    html:not([data-st-theme="light"]) #widgets .btn-collapse::after {
        border-color: transparent !important;
    }

    html:not([data-st-theme="light"]) .panel,
    html:not([data-st-theme="light"]) .panel-default,
    html:not([data-st-theme="light"]) .panel-body,
    html:not([data-st-theme="light"]) .panel-footer,
    html:not([data-st-theme="light"]) .well,
    html:not([data-st-theme="light"]) .table-responsive,
    html:not([data-st-theme="light"]) .dataTables_wrapper,
    html:not([data-st-theme="light"]) .container > .content,
    html:not([data-st-theme="light"]) .tab-content > .tab-pane {
        background: var(--st-surface) !important;
        color: var(--st-text) !important;
        border-color: var(--st-border) !important;
    }

    html:not([data-st-theme="light"]) .panel-heading,
    html:not([data-st-theme="light"]) .panel-default > .panel-heading {
        background: var(--st-surface-mid) !important;
        border-color: var(--st-border) !important;
    }

    html:not([data-st-theme="light"]) .table,
    html:not([data-st-theme="light"]) .table td,
    html:not([data-st-theme="light"]) .table th {
        color: var(--st-text) !important;
        border-color: var(--st-border) !important;
    }

    html:not([data-st-theme="light"]) .table > thead > tr > th {
        background: var(--st-surface-mid) !important;
    }

    html:not([data-st-theme="light"]) .table > tbody > tr > td,
    html:not([data-st-theme="light"]) .table-striped > tbody > tr:nth-of-type(odd) {
        background: transparent !important;
    }

    html:not([data-st-theme="light"]) .tickLabel,
    html:not([data-st-theme="light"]) .legendLabel,
    html:not([data-st-theme="light"]) .flot-text {
        color: var(--st-text) !important;
    }

    html:not([data-st-theme="light"]) #header .navbar-nav > li > a,
    html:not([data-st-theme="light"]) #header .navbar-nav > li > a .text {
        color: var(--st-text) !important;
    }

    html:not([data-st-theme="light"]) .table > thead,
    html:not([data-st-theme="light"]) .table > thead > tr,
    html:not([data-st-theme="light"]) .table > thead > tr > th,
    html:not([data-st-theme="light"]) .table > thead > tr > td {
        background: var(--st-surface-mid) !important;
        color: var(--st-text) !important;
    }

    html:not([data-st-theme="light"]) .modal-body .table a,
    html:not([data-st-theme="light"]) .panel .table a,
    html:not([data-st-theme="light"]) .panel-body a {
        color: var(--st-primary) !important;
        font-weight: 600;
    }

    html:not([data-st-theme="light"]) .modal-body canvas {
        filter: invert(.9) hue-rotate(180deg);
    }

    html:not([data-st-theme="light"]) .modal-body canvas {
        filter: none !important;
        background: #fff;
        border-radius: 12px;
    }

    html:not([data-st-theme="light"]) .panel-body a {
        color: inherit !important;
    }

    html:not([data-st-theme="light"]) .slimScrollRail,
    html:not([data-st-theme="light"]) .slimScrollBar {
        background: var(--st-outline) !important;
    }

    html:not([data-st-theme="light"]) .modal-body canvas ~ canvas {
        background: transparent !important;
    }

    html:not([data-st-theme="light"]) .legend > div {
        background: var(--st-surface) !important;
    }
}

/* Oscuro elegido a mano */
html[data-st-theme="dark"] {
    --st-primary: #5B9DFF;
    --st-primary-soft: #12376F;
    --st-on-primary-soft: #D6E4FF;
    --st-bg: #0B1220;
    --st-surface: #111A2B;
    --st-surface-low: #0F1726;
    --st-surface-mid: #151F31;
    --st-surface-high: #1B2639;
    --st-border: #22304A;
    --st-outline: #3A4A63;
    --st-text: #E8EDF5;
    --st-muted: #9FB0C8;
    --st-shadow: 0 8px 28px rgba(0, 0, 0, .45);
    --st-shadow-sm: 0 2px 10px rgba(0, 0, 0, .40);
}

html[data-st-theme="dark"] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.7);
}

html[data-st-theme="dark"] #header .navbar-nav > li > a .icon,
html[data-st-theme="dark"] #map-controls .btn:not(.active) .icon,
html[data-st-theme="dark"] #widgets .widget-title .icon,
html[data-st-theme="dark"] .dropdown-menu .icon {
    filter: invert(.85) brightness(1.4);
}

html[data-st-theme="dark"] #header .navbar-nav > li > a:hover .icon,
html[data-st-theme="dark"] #header .navbar-nav > li.open > a .icon {
    filter: brightness(.2);
}

html[data-st-theme="dark"] #sidebar,
html[data-st-theme="dark"] #sidebar .table,
html[data-st-theme="dark"] #sidebar .table td,
html[data-st-theme="dark"] #sidebar .table th,
html[data-st-theme="dark"] #widgets,
html[data-st-theme="dark"] .modal-body,
html[data-st-theme="dark"] .modal-body label,
html[data-st-theme="dark"] .control-label,
html[data-st-theme="dark"] .checkbox label,
html[data-st-theme="dark"] .radio label {
    color: var(--st-text) !important;
}

html[data-st-theme="dark"] #sidebar .table > thead > tr > th,
html[data-st-theme="dark"] #sidebar .table > tbody > tr > td,
html[data-st-theme="dark"] .modal .table > thead > tr > th,
html[data-st-theme="dark"] .modal .table > tbody > tr > td {
    background: transparent !important;
    border-color: var(--st-border) !important;
}

html[data-st-theme="dark"] .modal .table > tbody > tr:hover > td,
html[data-st-theme="dark"] #sidebar .table > tbody > tr:hover > td {
    background: var(--st-surface-mid) !important;
}

html[data-st-theme="dark"] .modal .nav-tabs {
    border-color: var(--st-border) !important;
}

html[data-st-theme="dark"] .modal .nav-tabs > li > a {
    color: var(--st-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
}

html[data-st-theme="dark"] .modal .nav-tabs > li.active > a {
    color: var(--st-text) !important;
    background: var(--st-surface-mid) !important;
    border-color: var(--st-border) !important;
}

html[data-st-theme="dark"] .close {
    color: var(--st-text) !important;
    opacity: .8;
    text-shadow: none !important;
}

html[data-st-theme="dark"] .bootstrap-select .dropdown-toggle,
html[data-st-theme="dark"] .btn-default {
    background: var(--st-surface-mid) !important;
    color: var(--st-text) !important;
}

html[data-st-theme="dark"] .marker-cluster div {
    box-shadow: 0 0 0 3px var(--st-surface), var(--st-shadow-sm);
}

html[data-st-theme="dark"] #header,
html[data-st-theme="dark"] #header .navbar,
html[data-st-theme="dark"] #header .container-fluid,
html[data-st-theme="dark"] #header .navbar-header,
html[data-st-theme="dark"] #header .navbar-collapse {
    background: var(--st-surface) !important;
    background-image: none !important;
}

html[data-st-theme="dark"] #header ::before,
html[data-st-theme="dark"] #header ::after {
    border-color: transparent !important;
    background: transparent !important;
}

html[data-st-theme="dark"] #header .language-selection .icon,
html[data-st-theme="dark"] #header .language-selection img {
    filter: none !important;
}

html[data-st-theme="dark"] #header .navbar-brand,
html[data-st-theme="dark"] #header .navbar-nav,
html[data-st-theme="dark"] #header .navbar-right,
html[data-st-theme="dark"] #header .navbar-nav > li {
    background: transparent !important;
    background-image: none !important;
}

html[data-st-theme="dark"] #header .navbar-brand img {
    border-radius: 10px;
}

html[data-st-theme="dark"] .leaflet-container {
    color: #14202F;
}

html[data-st-theme="dark"] #header .navbar-brand img {
    background: #fff;
    padding: 3px;
}

html[data-st-theme="dark"] #sidebar .btn-collapse i,
html[data-st-theme="dark"] #widgets .btn-collapse i {
    filter: invert(.85) brightness(1.4);
}

html[data-st-theme="dark"] .modal .nav-tabs,
html[data-st-theme="dark"] .modal-footer {
    background: var(--st-surface) !important;
}

html[data-st-theme="dark"] .modal-footer .btn-default {
    background: var(--st-surface-high) !important;
    border-color: var(--st-outline) !important;
    color: var(--st-text) !important;
}

html[data-st-theme="dark"] .checkbox label::before,
html[data-st-theme="dark"] .radio label::before,
html[data-st-theme="dark"] input[type="checkbox"],
html[data-st-theme="dark"] input[type="radio"] {
    background-color: var(--st-surface-mid) !important;
    border-color: var(--st-outline) !important;
}

html[data-st-theme="dark"] #sidebar .group-heading,
html[data-st-theme="dark"] #sidebar .group-list > li {
    background: var(--st-surface) !important;
    color: var(--st-text) !important;
    border-color: var(--st-border) !important;
}

html[data-st-theme="dark"] #sidebar .group-heading {
    background: var(--st-surface-low) !important;
}

html[data-st-theme="dark"] #sidebar .btn-collapse::before,
html[data-st-theme="dark"] #sidebar .btn-collapse::after,
html[data-st-theme="dark"] #widgets .btn-collapse::before,
html[data-st-theme="dark"] #widgets .btn-collapse::after {
    border-color: transparent !important;
}

html[data-st-theme="dark"] .panel,
html[data-st-theme="dark"] .panel-default,
html[data-st-theme="dark"] .panel-body,
html[data-st-theme="dark"] .panel-footer,
html[data-st-theme="dark"] .well,
html[data-st-theme="dark"] .table-responsive,
html[data-st-theme="dark"] .dataTables_wrapper,
html[data-st-theme="dark"] .container > .content,
html[data-st-theme="dark"] .tab-content > .tab-pane {
    background: var(--st-surface) !important;
    color: var(--st-text) !important;
    border-color: var(--st-border) !important;
}

html[data-st-theme="dark"] .panel-heading,
html[data-st-theme="dark"] .panel-default > .panel-heading {
    background: var(--st-surface-mid) !important;
    border-color: var(--st-border) !important;
}

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

html[data-st-theme="dark"] .table > thead > tr > th {
    background: var(--st-surface-mid) !important;
}

html[data-st-theme="dark"] .table > tbody > tr > td,
html[data-st-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background: transparent !important;
}

html[data-st-theme="dark"] .tickLabel,
html[data-st-theme="dark"] .legendLabel,
html[data-st-theme="dark"] .flot-text {
    color: var(--st-text) !important;
}

html[data-st-theme="dark"] #header .navbar-nav > li > a,
html[data-st-theme="dark"] #header .navbar-nav > li > a .text {
    color: var(--st-text) !important;
}

html[data-st-theme="dark"] .table > thead,
html[data-st-theme="dark"] .table > thead > tr,
html[data-st-theme="dark"] .table > thead > tr > th,
html[data-st-theme="dark"] .table > thead > tr > td {
    background: var(--st-surface-mid) !important;
    color: var(--st-text) !important;
}

html[data-st-theme="dark"] .modal-body .table a,
html[data-st-theme="dark"] .panel .table a,
html[data-st-theme="dark"] .panel-body a {
    color: var(--st-primary) !important;
    font-weight: 600;
}

html[data-st-theme="dark"] .modal-body canvas {
    filter: invert(.9) hue-rotate(180deg);
}

html[data-st-theme="dark"] .modal-body canvas {
    filter: none !important;
    background: #fff;
    border-radius: 12px;
}

html[data-st-theme="dark"] .panel-body a {
    color: inherit !important;
}

html[data-st-theme="dark"] .slimScrollRail,
html[data-st-theme="dark"] .slimScrollBar {
    background: var(--st-outline) !important;
}

html[data-st-theme="dark"] .modal-body canvas ~ canvas {
    background: transparent !important;
}

html[data-st-theme="dark"] .legend > div {
    background: var(--st-surface) !important;
}

/* ---------- Boton de tema en la barra superior ---------- */
#st-theme-toggle > a {
    display: flex !important;
    align-items: center;
    gap: 6px;
    color: var(--st-text) !important;
}

#st-theme-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
}

#st-theme-toggle > a:hover,
#st-theme-toggle.open > a {
    color: var(--st-navy) !important;
}

#st-theme-toggle .dropdown-menu > li > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

#st-theme-toggle .dropdown-menu svg {
    width: 18px;
    height: 18px;
}

#st-theme-toggle .dropdown-menu .st-check {
    margin-left: auto;
    opacity: 0;
    font-weight: 700;
    color: var(--st-primary);
}

#st-theme-toggle .dropdown-menu li.active > a {
    background: var(--st-primary-soft) !important;
    color: var(--st-on-primary-soft) !important;
}

#st-theme-toggle .dropdown-menu li.active .st-check {
    opacity: 1;
}


/* v4.3 - cajas de Configuracion (.dashboard-widget) */
@media (prefers-color-scheme: dark) {
    html:not([data-st-theme="light"]) .dashboard-widget {
        background: var(--st-surface-mid) !important;
        color: var(--st-text) !important;
        border-radius: 10px;
    }
}
html[data-st-theme="dark"] .dashboard-widget {
    background: var(--st-surface-mid) !important;
    color: var(--st-text) !important;
    border-radius: 10px;
}

/* v4.4 - ventana del vehiculo en el mapa (modo oscuro) */
@media (prefers-color-scheme: dark) {
    html:not([data-st-theme="light"]) .leaflet-popup-content-wrapper,
    html:not([data-st-theme="light"]) .leaflet-popup-content-wrapper div,
    html:not([data-st-theme="light"]) .leaflet-popup-content-wrapper table,
    html:not([data-st-theme="light"]) .leaflet-popup-content-wrapper td,
    html:not([data-st-theme="light"]) .leaflet-popup-content-wrapper th,
    html:not([data-st-theme="light"]) .leaflet-popup-content-wrapper .btn,
    html:not([data-st-theme="light"]) .leaflet-popup-tip {
        background: var(--st-surface) !important;
        color: var(--st-text) !important;
        border-color: var(--st-border) !important;
    }
    html:not([data-st-theme="light"]) .leaflet-popup-content-wrapper .icon,
    html:not([data-st-theme="light"]) .leaflet-popup-content-wrapper .btn i {
        filter: invert(.85) brightness(1.4);
    }
}
html[data-st-theme="dark"] .leaflet-popup-content-wrapper,
html[data-st-theme="dark"] .leaflet-popup-content-wrapper div,
html[data-st-theme="dark"] .leaflet-popup-content-wrapper table,
html[data-st-theme="dark"] .leaflet-popup-content-wrapper td,
html[data-st-theme="dark"] .leaflet-popup-content-wrapper th,
html[data-st-theme="dark"] .leaflet-popup-content-wrapper .btn,
html[data-st-theme="dark"] .leaflet-popup-tip {
    background: var(--st-surface) !important;
    color: var(--st-text) !important;
    border-color: var(--st-border) !important;
}
html[data-st-theme="dark"] .leaflet-popup-content-wrapper .icon,
html[data-st-theme="dark"] .leaflet-popup-content-wrapper .btn i {
    filter: invert(.85) brightness(1.4);
}

/* v4.5 - botones de la ventana del vehiculo y barras de desplazamiento */
#sidebar *,
#widgets *,
.modal *,
.leaflet-popup-content-wrapper * {
    scrollbar-color: var(--st-outline) transparent;
    scrollbar-width: thin;
}
@media (prefers-color-scheme: dark) {
    html:not([data-st-theme="light"]) .leaflet-popup-content-wrapper a,
    html:not([data-st-theme="light"]) .leaflet-popup-content-wrapper ul,
    html:not([data-st-theme="light"]) .leaflet-popup-content-wrapper li,
    html:not([data-st-theme="light"]) .leaflet-popup-content-wrapper button {
        background: var(--st-surface-mid) !important;
        color: var(--st-text) !important;
        border-color: var(--st-border) !important;
    }
}
html[data-st-theme="dark"] .leaflet-popup-content-wrapper a,
html[data-st-theme="dark"] .leaflet-popup-content-wrapper ul,
html[data-st-theme="dark"] .leaflet-popup-content-wrapper li,
html[data-st-theme="dark"] .leaflet-popup-content-wrapper button {
    background: var(--st-surface-mid) !important;
    color: var(--st-text) !important;
    border-color: var(--st-border) !important;
}

/* v4.6 - centrar iconos de la ventana del vehiculo */
.leaflet-popup-content-wrapper a:has(> i, > .icon, > span),
.leaflet-popup-content-wrapper button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
.leaflet-popup-content-wrapper a:has(> i, > .icon, > span) > *,
.leaflet-popup-content-wrapper button > * {
    margin: 0 !important;
    vertical-align: middle !important;
}

/* v4.7 - centrar iconos de los botones junto a la busqueda */
#sidebar .input-group-btn > .btn,
#sidebar .input-group-btn .btn-group > .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px;
    padding: 0 !important;
    line-height: 1 !important;
}
#sidebar .input-group-btn .btn > i,
#sidebar .input-group-btn .btn > .icon {
    margin: 0 !important;
    vertical-align: middle !important;
    background-position: center !important;
}

/* v4.8 - busquedas, paginacion e historial (modo oscuro) */
@media (prefers-color-scheme: dark) {
    html:not([data-st-theme="light"]) input[type="search"],
    html:not([data-st-theme="light"]) .dataTables_filter input,
    html:not([data-st-theme="light"]) .dataTables_length select {
        background: var(--st-surface-low) !important;
        color: var(--st-text) !important;
        border: 1px solid var(--st-border) !important;
        border-radius: 10px !important;
    }
    html:not([data-st-theme="light"]) .pagination > li > a,
    html:not([data-st-theme="light"]) .pagination > li > span {
        background: var(--st-surface-mid) !important;
        color: var(--st-text) !important;
        border-color: var(--st-border) !important;
    }
    html:not([data-st-theme="light"]) .pagination > .active > a,
    html:not([data-st-theme="light"]) .pagination > .active > span {
        background: var(--st-primary) !important;
        color: #fff !important;
        border-color: var(--st-primary) !important;
    }
    html:not([data-st-theme="light"]) #ajax-history,
    html:not([data-st-theme="light"]) #ajax-history div,
    html:not([data-st-theme="light"]) #ajax-history li,
    html:not([data-st-theme="light"]) #ajax-history table,
    html:not([data-st-theme="light"]) #ajax-history tr,
    html:not([data-st-theme="light"]) #ajax-history td,
    html:not([data-st-theme="light"]) #bottom-history,
    html:not([data-st-theme="light"]) #bottom-history .bottom-history-header,
    html:not([data-st-theme="light"]) #bottom-history .nav-tabs,
    html:not([data-st-theme="light"]) #bottom-history .tab-content,
    html:not([data-st-theme="light"]) #bottom-history .graph-controls {
        background: var(--st-surface) !important;
        color: var(--st-text) !important;
        border-color: var(--st-border) !important;
    }
    html:not([data-st-theme="light"]) #ajax-history * {
        color: var(--st-text) !important;
    }
    html:not([data-st-theme="light"]) #bottom-history .nav-tabs > li > a {
        background: transparent !important;
        color: var(--st-muted) !important;
        border-color: transparent !important;
    }
    html:not([data-st-theme="light"]) #bottom-history .nav-tabs > li.active > a {
        color: var(--st-text) !important;
        box-shadow: inset 0 -3px 0 var(--st-primary) !important;
    }
}
html[data-st-theme="dark"] input[type="search"],
html[data-st-theme="dark"] .dataTables_filter input,
html[data-st-theme="dark"] .dataTables_length select {
    background: var(--st-surface-low) !important;
    color: var(--st-text) !important;
    border: 1px solid var(--st-border) !important;
    border-radius: 10px !important;
}
html[data-st-theme="dark"] .pagination > li > a,
html[data-st-theme="dark"] .pagination > li > span {
    background: var(--st-surface-mid) !important;
    color: var(--st-text) !important;
    border-color: var(--st-border) !important;
}
html[data-st-theme="dark"] .pagination > .active > a,
html[data-st-theme="dark"] .pagination > .active > span {
    background: var(--st-primary) !important;
    color: #fff !important;
    border-color: var(--st-primary) !important;
}
html[data-st-theme="dark"] #ajax-history,
html[data-st-theme="dark"] #ajax-history div,
html[data-st-theme="dark"] #ajax-history li,
html[data-st-theme="dark"] #ajax-history table,
html[data-st-theme="dark"] #ajax-history tr,
html[data-st-theme="dark"] #ajax-history td,
html[data-st-theme="dark"] #bottom-history,
html[data-st-theme="dark"] #bottom-history .bottom-history-header,
html[data-st-theme="dark"] #bottom-history .nav-tabs,
html[data-st-theme="dark"] #bottom-history .tab-content,
html[data-st-theme="dark"] #bottom-history .graph-controls {
    background: var(--st-surface) !important;
    color: var(--st-text) !important;
    border-color: var(--st-border) !important;
}
html[data-st-theme="dark"] #ajax-history * {
    color: var(--st-text) !important;
}
html[data-st-theme="dark"] #bottom-history .nav-tabs > li > a {
    background: transparent !important;
    color: var(--st-muted) !important;
    border-color: transparent !important;
}
html[data-st-theme="dark"] #bottom-history .nav-tabs > li.active > a {
    color: var(--st-text) !important;
    box-shadow: inset 0 -3px 0 var(--st-primary) !important;
}

/* v4.9 - paginacion y fila bajo el mouse (modo oscuro) */
@media (prefers-color-scheme: dark) {
    html:not([data-st-theme="light"]) .dataTables_paginate,
    html:not([data-st-theme="light"]) .dataTables_paginate ul,
    html:not([data-st-theme="light"]) .dataTables_paginate li,
    html:not([data-st-theme="light"]) .dataTables_paginate a,
    html:not([data-st-theme="light"]) .dataTables_paginate span,
    html:not([data-st-theme="light"]) .pagination,
    html:not([data-st-theme="light"]) .pagination li,
    html:not([data-st-theme="light"]) .pagination a,
    html:not([data-st-theme="light"]) .pagination span {
        background: var(--st-surface-mid) !important;
        color: var(--st-text) !important;
        border-color: var(--st-border) !important;
    }
    html:not([data-st-theme="light"]) .dataTables_paginate .active a,
    html:not([data-st-theme="light"]) .dataTables_paginate a.current,
    html:not([data-st-theme="light"]) .pagination .active a,
    html:not([data-st-theme="light"]) .pagination .active span {
        background: var(--st-primary) !important;
        color: #fff !important;
        border-color: var(--st-primary) !important;
    }
    html:not([data-st-theme="light"]) .dataTables_paginate .disabled a,
    html:not([data-st-theme="light"]) .pagination .disabled a,
    html:not([data-st-theme="light"]) .pagination .disabled span {
        color: var(--st-muted) !important;
        opacity: .6;
    }
    html:not([data-st-theme="light"]) .table > tbody > tr:hover,
    html:not([data-st-theme="light"]) .table > tbody > tr:hover > td,
    html:not([data-st-theme="light"]) .table-hover > tbody > tr:hover > td,
    html:not([data-st-theme="light"]) .table > tbody > tr.active > td,
    html:not([data-st-theme="light"]) .table > tbody > tr.selected > td {
        background: var(--st-surface-mid) !important;
        color: var(--st-text) !important;
    }
}
html[data-st-theme="dark"] .dataTables_paginate,
html[data-st-theme="dark"] .dataTables_paginate ul,
html[data-st-theme="dark"] .dataTables_paginate li,
html[data-st-theme="dark"] .dataTables_paginate a,
html[data-st-theme="dark"] .dataTables_paginate span,
html[data-st-theme="dark"] .pagination,
html[data-st-theme="dark"] .pagination li,
html[data-st-theme="dark"] .pagination a,
html[data-st-theme="dark"] .pagination span {
    background: var(--st-surface-mid) !important;
    color: var(--st-text) !important;
    border-color: var(--st-border) !important;
}
html[data-st-theme="dark"] .dataTables_paginate .active a,
html[data-st-theme="dark"] .dataTables_paginate a.current,
html[data-st-theme="dark"] .pagination .active a,
html[data-st-theme="dark"] .pagination .active span {
    background: var(--st-primary) !important;
    color: #fff !important;
    border-color: var(--st-primary) !important;
}
html[data-st-theme="dark"] .dataTables_paginate .disabled a,
html[data-st-theme="dark"] .pagination .disabled a,
html[data-st-theme="dark"] .pagination .disabled span {
    color: var(--st-muted) !important;
    opacity: .6;
}
html[data-st-theme="dark"] .table > tbody > tr:hover,
html[data-st-theme="dark"] .table > tbody > tr:hover > td,
html[data-st-theme="dark"] .table-hover > tbody > tr:hover > td,
html[data-st-theme="dark"] .table > tbody > tr.active > td,
html[data-st-theme="dark"] .table > tbody > tr.selected > td {
    background: var(--st-surface-mid) !important;
    color: var(--st-text) !important;
}

/* v4.10 - que los menus desplegables no se corten */
#sidebar .sidebar-content,
#sidebar .tab-pane-header,
#widgets .widgets-content,
.modal-content {
    overflow: visible !important;
}
#sidebar .dropdown-menu,
#widgets .dropdown-menu,
.modal .dropdown-menu,
.modal .bootstrap-select .dropdown-menu {
    z-index: 2000 !important;
}

/* v4.11 - casillas y encabezados de grupo en listas (modo oscuro) */
@media (prefers-color-scheme: dark) {
    html:not([data-st-theme="light"]) {
        color-scheme: dark;
    }
    html:not([data-st-theme="light"]) .dropdown-header,
    html:not([data-st-theme="light"]) .dropdown-menu .dropdown-header,
    html:not([data-st-theme="light"]) .optgroup-header,
    html:not([data-st-theme="light"]) li.group,
    html:not([data-st-theme="light"]) li.group > a,
    html:not([data-st-theme="light"]) .modal .group-heading,
    html:not([data-st-theme="light"]) .modal .optgroup,
    html:not([data-st-theme="light"]) .modal [class*="group-title"] {
        background: var(--st-surface-mid) !important;
        color: var(--st-muted) !important;
        border-color: var(--st-border) !important;
    }
    html:not([data-st-theme="light"]) input[type="checkbox"],
    html:not([data-st-theme="light"]) input[type="radio"] {
        accent-color: var(--st-primary);
    }
}
html[data-st-theme="dark"] {
    color-scheme: dark;
}
html[data-st-theme="dark"] .dropdown-header,
html[data-st-theme="dark"] .dropdown-menu .dropdown-header,
html[data-st-theme="dark"] .optgroup-header,
html[data-st-theme="dark"] li.group,
html[data-st-theme="dark"] li.group > a,
html[data-st-theme="dark"] .modal .group-heading,
html[data-st-theme="dark"] .modal .optgroup,
html[data-st-theme="dark"] .modal [class*="group-title"] {
    background: var(--st-surface-mid) !important;
    color: var(--st-muted) !important;
    border-color: var(--st-border) !important;
}
html[data-st-theme="dark"] input[type="checkbox"],
html[data-st-theme="dark"] input[type="radio"] {
    accent-color: var(--st-primary);
}
html[data-st-theme="light"] {
    color-scheme: light;
}

/* v4.12 - devolver el desplazamiento horizontal al panel inferior */
#widgets .widgets-content {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* v4.13 - ocultar el contenido del panel lateral cuando esta contraido */
#sidebar.collapsed .sidebar-content {
    overflow: hidden !important;
    box-shadow: none !important;
    border: 0 !important;
}
#sidebar.collapsed .sidebar-content > * {
    visibility: hidden !important;
}

/* ===== v4.14: opcion resaltada/seleccionada en listas desplegables (buscador) ===== */
.dropdown-menu > li.active > a,
.dropdown-menu > li.active > a:hover,
.dropdown-menu > li.active > a:focus,
.dropdown-menu > li.selected > a,
.dropdown-menu > li > a:focus,
.bootstrap-select .dropdown-menu li.active > a,
.bootstrap-select .dropdown-menu li.selected > a,
.bootstrap-select .dropdown-menu li > a:focus,
.bootstrap-select .dropdown-menu li > a:hover {
  background: #0B5ED7 !important;
  color: #fff !important;
  outline: none !important;
}
.dropdown-menu > li.active > a *,
.dropdown-menu > li.selected > a *,
.bootstrap-select .dropdown-menu li.active > a *,
.bootstrap-select .dropdown-menu li.selected > a *,
.bootstrap-select .dropdown-menu li > a:hover * {
  color: #fff !important;
}

/* ===== v4.15: mensaje "No hay resultados coincidentes" ===== */
.bootstrap-select .dropdown-menu li.no-results,
.dropdown-menu li.no-results {
  background: transparent !important;
  color: #8A96AD !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  font-style: italic;
}

/* ===== v4.16: listas de seleccion multiple + lista abierta por encima de las demas ===== */
.bootstrap-select:has(select[multiple]) .dropdown-menu li.selected > a,
.bootstrap-select:has(select[multiple]) .dropdown-menu li.active > a,
.bootstrap-select:has(select[multiple]) .dropdown-menu li > a:focus,
.bs-actionsbox ~ .inner li.selected > a,
.bs-actionsbox ~ .inner li.active > a {
  background: transparent !important;
  color: inherit !important;
}
.bootstrap-select:has(select[multiple]) .dropdown-menu li.selected > a *,
.bootstrap-select:has(select[multiple]) .dropdown-menu li.active > a *,
.bs-actionsbox ~ .inner li.selected > a *,
.bs-actionsbox ~ .inner li.active > a * {
  color: inherit !important;
}
.bootstrap-select:has(select[multiple]) .dropdown-menu li > a:hover,
.bs-actionsbox ~ .inner li > a:hover {
  background: rgba(11, 94, 215, .18) !important;
  color: inherit !important;
}
.bootstrap-select:has(select[multiple]) .dropdown-menu li > a:hover *,
.bs-actionsbox ~ .inner li > a:hover * {
  color: inherit !important;
}
.bootstrap-select.open,
.bootstrap-select.show,
.dropdown.open,
.btn-group.open {
  z-index: 1060 !important;
}
.bootstrap-select.open > .dropdown-menu,
.bootstrap-select.show > .dropdown-menu,
.dropdown.open > .dropdown-menu,
.btn-group.open > .dropdown-menu {
  z-index: 1061 !important;
}
.form-group:has(.bootstrap-select.open),
.form-group:has(.bootstrap-select.show),
.form-group:has(.dropdown.open),
.form-group:has(.btn-group.open) {
  position: relative;
  z-index: 1060;
}

/* ===== v4.17: listas de una opcion por encima de las listas con casillas siempre abiertas ===== */
.bootstrap-select:not(:has(select[multiple])).open,
.bootstrap-select:not(:has(select[multiple])).show {
  z-index: 1080 !important;
}
.bootstrap-select:not(:has(select[multiple])).open > .dropdown-menu,
.bootstrap-select:not(:has(select[multiple])).show > .dropdown-menu {
  z-index: 1081 !important;
}
.form-group:has(.bootstrap-select:not(:has(select[multiple])).open),
.form-group:has(.bootstrap-select:not(:has(select[multiple])).show) {
  position: relative;
  z-index: 1080 !important;
}
.form-group:has(select[multiple]) {
  z-index: auto;
}

/* ===== v4.18: lista de una opcion encima de la lista de casillas (sin :has anidado) ===== */
/* Lista con casillas (siempre abierta): al fondo */
.bootstrap-select:has(select[multiple]),
.form-group:has(select[multiple]) {
  z-index: 1 !important;
}
/* Lista de una opcion abierta: al frente, ella y el recuadro que la contiene */
.bootstrap-select.open:has(select:not([multiple])),
.bootstrap-select.show:has(select:not([multiple])) {
  z-index: 1080 !important;
}
.bootstrap-select.open:has(select:not([multiple])) > .dropdown-menu,
.bootstrap-select.show:has(select:not([multiple])) > .dropdown-menu {
  z-index: 1081 !important;
}
div:has(> .bootstrap-select.open select:not([multiple])),
div:has(> .bootstrap-select.show select:not([multiple])) {
  position: relative;
  z-index: 1080 !important;
}

/* ===== v4.19: casillas de seleccion modernas (redondeadas, azul Setra) ===== */
.checkbox { position: relative; }
.checkbox label {
  position: relative !important;
  min-height: 18px;
  min-width: 18px;
  padding-left: 28px !important;
  cursor: pointer;
}
.checkbox label:empty { padding-left: 18px !important; }
.checkbox label::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  margin: -9px 0 0 0 !important;
  border: 2px solid #A9B4C8 !important;
  border-radius: 6px !important;
  background: #fff no-repeat center / 12px 12px !important;
  box-shadow: none !important;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
  box-sizing: border-box !important;
}
.checkbox label::after { display: none !important; }
.checkbox label:hover::before { border-color: #0B5ED7 !important; box-shadow: 0 0 0 4px rgba(11, 94, 215, .12) !important; }
.checkbox input:focus-visible + label::before { box-shadow: 0 0 0 4px rgba(11, 94, 215, .28) !important; }
.checkbox input:checked + label::before {
  border-color: #0B5ED7 !important;
  background-color: #0B5ED7 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.checkbox input:indeterminate + label::before {
  border-color: #0B5ED7 !important;
  background-color: #0B5ED7 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
.checkbox input:disabled + label { opacity: .5; cursor: not-allowed; }
@media (prefers-color-scheme: dark) {
  html:not([data-st-theme="light"]) .checkbox label::before { background-color: transparent !important; border-color: #4A5878 !important; }
  html:not([data-st-theme="light"]) .checkbox input:checked + label::before,
  html:not([data-st-theme="light"]) .checkbox input:indeterminate + label::before { background-color: #0B5ED7 !important; border-color: #0B5ED7 !important; }
}
html[data-st-theme="dark"] .checkbox label::before { background-color: transparent !important; border-color: #4A5878 !important; }
html[data-st-theme="dark"] .checkbox input:checked + label::before,
html[data-st-theme="dark"] .checkbox input:indeterminate + label::before { background-color: #0B5ED7 !important; border-color: #0B5ED7 !important; }
input[type="checkbox"] { accent-color: #0B5ED7; }

/* Menú de capas del mapa (tema oscuro) */
.leaflet-control-layers,
.leaflet-control-layers-expanded,
.leaflet-control-layers-list {
  background: #141c2f !important;
  border: 1px solid #2a3550 !important;
}
.leaflet-control-layers label,
.leaflet-control-layers span {
  color: #e6ebf5 !important;
  opacity: 1 !important;
}

/* Capas: casillas oscuras y nombres en una línea */
.leaflet-control-layers input[type="checkbox"],
.leaflet-control-layers input[type="radio"] {
  background: #1e2940 !important;
  border: 1px solid #3a4a6b !important;
}
.leaflet-control-layers label {
  white-space: nowrap !important;
}





/* Capas: cuadro dibujado por el span */
.leaflet-control-layers-list
input + span::before {
  background: #1e2940 !important;
  border: 2px solid #4a5b80 !important;
  border-radius: 5px !important;
}
.leaflet-control-layers-list
input:checked + span::before {
  background: #0B5ED7 !important;
  border-color: #0B5ED7 !important;
}
.leaflet-control-layers-list
input:checked + span::after {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Capas: quitar marco exterior */
.leaflet-control-layers-list
input + span::before {
  box-shadow: none !important;
  outline: none !important;
}
.leaflet-control-layers-list
input + span {
  box-shadow: none !important;
  outline: none !important;
}

/* Capas: ocultar marco exterior (::after) */
.leaflet-control-layers-list
input + span::after,
.leaflet-control-layers-list
input:checked + span::after {
  border: none !important;
  background: transparent !important;
}


/* Capas: palomita con CSS */
.leaflet-control-layers-list
input:checked + span::before {
  content: "" !important;
}
.leaflet-control-layers-list
input:checked + span::after {
  content: "" !important;
  left: 9px !important;
  top: 5px !important;
  width: 6px !important;
  height: 12px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  border-radius: 0 !important;
  transform: rotate(45deg) !important;
}

/* Capas: palomita al frente y centrada */
.leaflet-control-layers-list
input:checked + span::after {
  z-index: 2 !important;
  left: 5px !important;
  top: 2px !important;
  width: 5px !important;
  height: 10px !important;
}

/* Desplegables: el abierto va encima */
.bootstrap-select.open {
  position: relative !important;
  z-index: 1070 !important;
}
.bootstrap-select.open .dropdown-menu {
  z-index: 1071 !important;
}

/* Desplegables: no salirse de la pantalla */
.bootstrap-select .dropdown-menu {
  max-width: calc(100vw - 32px) !important;
  min-width: 100% !important;
}
.bootstrap-select .dropdown-menu
li a span.text {
  white-space: normal !important;
}

/* Desplegables: casillas oscuras */
.bootstrap-select .dropdown-menu
li a input + span.text::before {
  background: #1e2940 !important;
  border: 2px solid #4a5b80 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}
.bootstrap-select .dropdown-menu
li a input:checked + span.text::before {
  background: #0B5ED7 !important;
  border-color: #0B5ED7 !important;
  color: #ffffff !important;
}
.bootstrap-select .dropdown-menu
li a span.text::after {
  border: none !important;
  background: transparent !important;
}

/* Formularios: el campo con lista abierta va encima */
.form-group:has(.bootstrap-select.open) {
  z-index: 1080 !important;
}

/* Listas: casillas oscuras (sin input) */
.bootstrap-select .dropdown-menu
li a span.text::before {
  background: #1e2940 !important;
  border: 2px solid #4a5b80 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}
.bootstrap-select .dropdown-menu
li.selected a span.text::before {
  background: #0B5ED7 !important;
  border-color: #0B5ED7 !important;
  color: #ffffff !important;
}
.bootstrap-select .dropdown-menu
li a span.text::after {
  border: none !important;
  background: transparent !important;
}
.bootstrap-select .dropdown-menu
li a span.check-mark {
  color: #ffffff !important;
}

/* Carga: capa oscura del tema en vez de gris */
#loading .backdrop,
.loading .backdrop {
  background-color: #0f1626 !important;
  opacity: 0.75 !important;
}
#loading {
  background-color: #0f1626 !important;
}
.ui-widget-overlay {
  background: #0f1626 !important;
  opacity: 0.6 !important;
}

/* Lista multiexpand: cuadricula ordenada */
.multiexpand .dropdown-menu.inner {
  display: grid !important;
  grid-template-columns:
    repeat(auto-fill, minmax(190px, 1fr)) !important;
  column-gap: 12px !important;
  row-gap: 2px !important;
  align-items: start !important;
}
.multiexpand .dropdown-menu.inner > li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
.multiexpand .dropdown-menu.inner
> li.dropdown-header,
.multiexpand .dropdown-menu.inner
> li.divider {
  grid-column: 1 / -1 !important;
}
.multiexpand .dropdown-menu.inner
> li.hidden {
  display: none !important;
}
.multiexpand .dropdown-menu.inner
> li > a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  white-space: normal !important;
  padding: 6px 8px !important;
  line-height: 1.35 !important;
}

/* Encabezado de grupo: casilla oscura */
.dropdown-menu li.dropdown-header
span.text::before {
  background: #1e2940 !important;
  border: 2px solid #4a5b80 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}
.dropdown-menu li.dropdown-header
span.text::after {
  border: none !important;
  background: transparent !important;
}

/* Lista multiexpand: no salirse de la ventana */
.multiexpand .dropdown-menu.open {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  left: 0 !important;
  right: auto !important;
  box-sizing: border-box !important;
}
.multiexpand .dropdown-menu.inner {
  grid-template-columns:
    repeat(auto-fill, minmax(170px, 1fr)) !important;
}

/* Lista multiexpand: sangria colgante */
.multiexpand .dropdown-menu.inner
> li > a span.text {
  display: block !important;
  padding-left: 21px !important;
  text-indent: -21px !important;
}

/* Encabezado de grupo: casilla checkbox-inline */
.dropdown-header .checkbox-inline
label::before {
  background: #1e2940 !important;
  border: 2px solid #4a5b80 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}
.dropdown-header .checkbox-inline
input:checked + label::before {
  background: #0B5ED7 !important;
  border-color: #0B5ED7 !important;
  color: #ffffff !important;
}
.dropdown-header .checkbox-inline
label::after {
  border: none !important;
  background: transparent !important;
}

/* Lista multiexpand: quitar celdas del clearfix */
.multiexpand .dropdown-menu.inner::before,
.multiexpand .dropdown-menu.inner::after {
  display: none !important;
  content: none !important;
}

/* Lista multiexpand: palomita dentro del cuadro */
.multiexpand .dropdown-menu.inner
> li > a span.check-mark {
  display: none !important;
}
.multiexpand .dropdown-menu.inner
> li > a span.text {
  position: relative !important;
}
.multiexpand .dropdown-menu.inner
> li.selected > a span.text::after {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 3px !important;
  width: 5px !important;
  height: 9px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
  background: transparent !important;
}

/* Lista multiexpand: palomita original dentro del cuadro */
.multiexpand .dropdown-menu.inner
> li > a span.text::before {
  text-indent: 0 !important;
}
.multiexpand .dropdown-menu.inner
> li.selected > a span.text::after {
  content: none !important;
  display: none !important;
}

/* Listas: ocultar opciones sin texto */
.bootstrap-select .dropdown-menu.inner
> li:has(> a > span.text:empty) {
  display: none !important;
}

/* Casillas checkbox-inline (general) */
.checkbox-inline label::before {
  background: #1e2940 !important;
  border: 2px solid #4a5b80 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  text-indent: 0 !important;
}
.checkbox-inline input:checked + label::before {
  background: #0B5ED7 !important;
  border-color: #0B5ED7 !important;
  color: #ffffff !important;
}
.checkbox-inline label::after {
  border: none !important;
  background: transparent !important;
}

/* checkbox-inline: segunda linea alineada */
.modal .checkbox-inline label {
  display: inline-block !important;
  max-width: 100% !important;
  padding-left: 21px !important;
  text-indent: -21px !important;
}

/* checkbox-inline: centrar palomita */
.checkbox-inline label::before {
  box-sizing: border-box !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  line-height: 14px !important;
  text-align: center !important;
  font-size: 10px !important;
  vertical-align: middle !important;
}

/* Listas: centrar palomita */
.bootstrap-select .dropdown-menu
li a span.text::before {
  box-sizing: border-box !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  line-height: 14px !important;
  text-align: center !important;
  font-size: 10px !important;
  vertical-align: middle !important;
  text-indent: 0 !important;
}

/* Botones contraer/expandir: estilo comun */
#sidebar .btn-collapse,
#bottombar .btn-collapse {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #141c2f !important;
  border: 1px solid #2a3550 !important;
  color: #9fb3d9 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.45) !important;
  transition: background .2s, color .2s,
    box-shadow .2s, transform .2s !important;
  cursor: pointer;
}
#sidebar .btn-collapse i,
#bottombar .btn-collapse i {
  color: inherit !important;
  font-size: 12px !important;
  transition: transform .25s !important;
}
#sidebar .btn-collapse:hover,
#bottombar .btn-collapse:hover {
  background: #0B5ED7 !important;
  border-color: #0B5ED7 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(11,94,215,.55) !important;
}

/* Lateral: pestana redondeada a la derecha */
#sidebar .btn-collapse {
  width: 22px !important;
  height: 46px !important;
  border-left: none !important;
  border-radius: 0 12px 12px 0 !important;
}
#sidebar .btn-collapse:hover {
  transform: translateX(2px) !important;
}

/* Inferior: pestana redondeada arriba */
#bottombar .btn-collapse {
  width: 52px !important;
  height: 22px !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
}
#bottombar .btn-collapse:hover {
  transform: translateY(-2px) !important;
}

/* Campos con complemento (input-group-addon) */
.modal .input-group-addon {
  background: #141c2f !important;
  border: 1px solid #2a3550 !important;
  color: #e6ebf5 !important;
}
.modal .input-group-addon .checkbox-inline label {
  color: #e6ebf5 !important;
  opacity: 1 !important;
}
.modal .input-group-addon input:disabled + label {
  opacity: .55 !important;
}

/* Opciones tipo radio: circulares */
.checkbox-inline input[type="radio"] + label::before {
  border-radius: 50% !important;
}