/* ==========================================================================
   Apariencia "Moderna"
   Capa de diseño que se carga encima del CSS de color (template_color)
   sólo cuando appearance_theme() === 'modern'. No modifica otros temas.
   Para ajustar colores, cambiar las variables de :root.
   ========================================================================== */

:root {
    --m-primary: #2563eb;
    --m-primary-hover: #1d4ed8;
    --m-primary-soft: #eff4ff;
    --m-primary-ring: rgba(37, 99, 235, .18);

    --m-ink: #0f172a;
    --m-text: #334155;
    --m-muted: #64748b;
    --m-subtle: #94a3b8;

    --m-bg: #f1f5f9;
    --m-surface: #ffffff;
    --m-surface-2: #f8fafc;
    --m-border: #e2e8f0;
    --m-border-strong: #cbd5e1;

    --m-success: #16a34a;
    --m-warning: #d97706;
    --m-danger: #dc2626;

    --m-radius-sm: 8px;
    --m-radius: 12px;
    --m-radius-lg: 16px;
    --m-radius-xl: 22px;

    --m-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --m-shadow: 0 4px 12px -2px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .05);
    --m-shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, .22), 0 4px 10px -4px rgba(15, 23, 42, .08);

    --m-glass: rgba(255, 255, 255, .97);
    --m-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
    --m-ease: cubic-bezier(.2, .8, .2, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body,
button,
input,
select,
textarea,
.tooltip,
.popover,
.leaflet-container {
    font-family: var(--m-font);
}

body {
    color: var(--m-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.admin-layout {
    background: var(--m-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--m-ink);
    font-weight: 600;
    letter-spacing: -.01em;
}

a {
    color: var(--m-primary);
    transition: color .15s var(--m-ease);
}

a:hover,
a:focus {
    color: var(--m-primary-hover);
}

hr {
    border-top-color: var(--m-border);
}

::selection {
    background: var(--m-primary-ring);
}

/* Scrollbars finos */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--m-subtle);
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--m-radius-sm);
    font-weight: 500;
    letter-spacing: .005em;
    transition: background-color .15s var(--m-ease), border-color .15s var(--m-ease),
                color .15s var(--m-ease), box-shadow .15s var(--m-ease), transform .1s var(--m-ease);
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--m-primary-ring);
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary,
.btn-action,
a.btn-action,
button.btn-action {
    background: var(--m-primary);
    border-color: var(--m-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(37, 99, 235, .25), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-action:hover,
.btn-action:focus,
.btn-action:active,
.btn-action.active,
a.btn-action:hover,
a.btn-action:focus,
button.btn-action:hover,
button.btn-action:focus,
.open > .dropdown-toggle.btn-primary {
    background: var(--m-primary-hover);
    border-color: var(--m-primary-hover);
    color: #fff;
}

.btn-default {
    background: var(--m-surface);
    border-color: var(--m-border);
    color: var(--m-text);
    box-shadow: var(--m-shadow-sm);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background: var(--m-surface-2);
    border-color: var(--m-border-strong);
    color: var(--m-ink);
}

.btn-success { background: var(--m-success); border-color: var(--m-success); }
.btn-danger  { background: var(--m-danger);  border-color: var(--m-danger); }
.btn-warning { background: var(--m-warning); border-color: var(--m-warning); }

.btn-link {
    color: var(--m-primary);
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
.form-control,
div.dataTables_wrapper div.dataTables_filter input {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    background-color: var(--m-surface);
    color: var(--m-ink);
    box-shadow: none;
    transition: border-color .15s var(--m-ease), box-shadow .15s var(--m-ease), background-color .15s var(--m-ease);
}

.form-control:hover {
    border-color: var(--m-border-strong);
}

.form-control:focus,
div.dataTables_wrapper div.dataTables_filter input:focus {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 3px var(--m-primary-ring);
    background-color: var(--m-surface);
}

.form-control::placeholder {
    color: var(--m-subtle);
}

.form-control[disabled],
.form-control[readonly] {
    background-color: var(--m-surface-2);
    color: var(--m-muted);
}

label,
.control-label {
    color: var(--m-text);
    font-weight: 500;
}

.input-group-addon {
    background: var(--m-surface-2);
    border-color: var(--m-border);
    color: var(--m-muted);
    border-radius: var(--m-radius-sm);
}

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.bootstrap-select > .dropdown-toggle {
    border-radius: var(--m-radius-sm);
}

.bootstrap-select.open > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 3px var(--m-primary-ring);
    outline: none !important;
}

/* --------------------------------------------------------------------------
   Menús desplegables
   -------------------------------------------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-lg);
    padding: 6px;
    background: var(--m-surface);
}

.dropdown-menu > li > a {
    border-radius: var(--m-radius-sm);
    padding: 8px 12px;
    color: var(--m-text);
    transition: background-color .12s var(--m-ease), color .12s var(--m-ease);
}

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

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background: var(--m-primary);
    color: #fff;
}

.dropdown-menu .divider {
    background-color: var(--m-border);
    margin: 6px 4px;
}

.dropdown-header {
    color: var(--m-subtle);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   Pestañas
   -------------------------------------------------------------------------- */
.nav-tabs {
    border-bottom-color: var(--m-border);
}

.nav-tabs > li > a {
    color: var(--m-muted);
    font-weight: 500;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    margin: 0 4px 0 0 !important;
    padding: 10px 12px;
    transition: color .15s var(--m-ease), border-color .15s var(--m-ease);
}

.nav-tabs > li > a:hover {
    color: var(--m-ink);
    background: transparent;
    border-bottom-color: var(--m-border-strong) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    color: var(--m-primary);
    background: transparent;
    border: none !important;
    border-bottom: 2px solid var(--m-primary) !important;
}

.nav-pills > li > a {
    border-radius: var(--m-radius-sm);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
    background: var(--m-primary);
}

/* --------------------------------------------------------------------------
   Modales
   -------------------------------------------------------------------------- */
.modal-backdrop.in {
    opacity: .45;
}

.modal-backdrop {
    background-color: #0f172a;
}

.modal-content {
    border: none;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow-lg);
    overflow: hidden;
}

.modal-header,
.ui-dialog-titlebar.ui-widget-header {
    background: var(--m-surface);
    border-bottom: 1px solid var(--m-border);
    padding: 16px 20px;
}

.modal-title,
.ui-dialog-title {
    color: var(--m-ink);
    font-size: 16px;
    font-weight: 600;
}

.modal-title .icon,
.ui-dialog-title .icon {
    color: var(--m-primary);
}

.modal-header .close {
    opacity: .45;
    text-shadow: none;
    transition: opacity .15s var(--m-ease);
}

.modal-header .close:hover {
    opacity: .9;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    background: var(--m-surface-2);
    border-top: 1px solid var(--m-border);
    padding: 14px 20px;
}

.modal.fade .modal-dialog {
    transform: translateY(12px) scale(.98);
    transition: transform .22s var(--m-ease), opacity .22s var(--m-ease);
}

.modal.in .modal-dialog {
    transform: none;
}

/* --------------------------------------------------------------------------
   Paneles, tarjetas y widgets
   -------------------------------------------------------------------------- */
.panel {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-sm);
    background: var(--m-surface);
}

.panel > .panel-heading,
.panel-default > .panel-heading {
    background: var(--m-surface);
    border-bottom: 1px solid var(--m-border);
    border-top-left-radius: var(--m-radius);
    border-top-right-radius: var(--m-radius);
    color: var(--m-ink);
    padding: 14px 18px;
}

.panel-title {
    color: var(--m-ink);
    font-weight: 600;
}

.panel-title .icon {
    color: var(--m-primary);
}

.panel-footer {
    background: var(--m-surface-2);
    border-top: 1px solid var(--m-border);
    border-bottom-left-radius: var(--m-radius);
    border-bottom-right-radius: var(--m-radius);
}

.well {
    background: var(--m-surface-2);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: none;
}

#widgets .widget,
.widget {
    border-radius: var(--m-radius);
}

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */
.table > thead > tr > th {
    color: var(--m-muted);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--m-border);
    background: var(--m-surface-2);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
    border-top-color: var(--m-border);
}

.table-hover > tbody > tr:hover,
.table.table-list > tbody > tr:hover {
    background-color: var(--m-primary-soft);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--m-surface-2);
}

/* --------------------------------------------------------------------------
   Alertas, etiquetas y paginación
   -------------------------------------------------------------------------- */
.alert {
    border-radius: var(--m-radius);
    border-width: 1px;
}

.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

.label,
.badge {
    border-radius: 999px;
    font-weight: 600;
}

.pagination > li > a,
.pagination > li > span {
    border-color: var(--m-border);
    color: var(--m-text);
    margin: 0 2px;
    border-radius: var(--m-radius-sm) !important;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background: var(--m-primary);
    border-color: var(--m-primary);
    color: #fff;
}

.tooltip-inner {
    background: var(--m-ink);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 12px;
}

.tooltip.top .tooltip-arrow { border-top-color: var(--m-ink); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--m-ink); }
.tooltip.left .tooltip-arrow { border-left-color: var(--m-ink); }
.tooltip.right .tooltip-arrow { border-right-color: var(--m-ink); }

.popover {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-lg);
}

/* ==========================================================================
   APP PRINCIPAL (mapa)
   ========================================================================== */

/* Cabecera flotante: se reemplazan las diagonales "plegadas" por píldoras de vidrio */
@media (min-width: 768px) {
    #header.folded:before,
    #header.folded .navbar .navbar-brand:before,
    #header.folded .navbar .navbar-brand:after,
    #header.folded .navbar .navbar-nav:before,
    #header.folded .navbar .navbar-nav:after {
        display: none !important;
    }

    #header.folded .navbar {
        padding-top: 12px;
    }

    #header.folded .navbar .navbar-brand,
    #header.folded .navbar .navbar-nav {
        background: var(--m-glass);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        backdrop-filter: saturate(160%) blur(14px);
        border: 1px solid rgba(226, 232, 240, .9);
        border-radius: var(--m-radius-lg);
        box-shadow: var(--m-shadow);
    }

    #header.folded .navbar .navbar-brand {
        margin-left: 12px;
        padding: 8px 14px;
    }

    #header.folded .navbar .navbar-nav {
        margin-right: 12px;
        padding: 0 4px;
    }
}

#header .navbar-nav > li > a {
    color: var(--m-muted);
    border-radius: var(--m-radius-sm);
    transition: color .15s var(--m-ease), background-color .15s var(--m-ease);
}

#header .navbar-nav > li > a:hover,
#header .navbar-nav > li > a:focus,
#header .navbar-nav > .open > a,
#header .navbar-nav > .open > a:hover,
#header .navbar-nav > .open > a:focus {
    color: var(--m-primary);
    background: var(--m-primary-soft);
}

#header .navbar-nav > li > a > .badge {
    background: var(--m-danger);
    box-shadow: 0 0 0 2px var(--m-surface);
}

/* Barra lateral como tarjeta flotante */
@media (min-width: 768px) {
    body.modern .sidebar.left {
        left: 12px;
        bottom: 12px;
        max-height: calc(100% - 84px);
    }

}

.sidebar .sidebar-content {
    background: var(--m-surface);
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: var(--m-radius-xl);
    box-shadow: var(--m-shadow-lg);
    overflow: hidden;
}



/* Pestañas de la barra lateral como control segmentado */
.sidebar .nav-tabs.nav-default {
    display: flex;
    gap: 4px;
    margin: 10px 10px 4px;
    padding: 4px;
    background: var(--m-bg);
    border: none;
    border-radius: var(--m-radius);
}

.sidebar .nav-tabs.nav-default > li {
    display: block;
    flex: 1 1 0;
    width: auto;
    float: none;
    margin: 0;
}

.sidebar .nav-tabs.nav-default > li.hidden {
    display: none;
}

.sidebar .nav-tabs.nav-default > li > a {
    border: none !important;
    border-radius: var(--m-radius-sm) !important;
    padding: 7px 6px;
    margin: 0 !important;
    font-size: 13px;
    font-weight: 500;
    color: var(--m-muted);
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar .nav-tabs.nav-default > li > a:hover {
    color: var(--m-ink);
    background: rgba(255, 255, 255, .6);
    border: none !important;
}

.sidebar .nav-tabs.nav-default > li.active > a,
.sidebar .nav-tabs.nav-default > li.active > a:hover,
.sidebar .nav-tabs.nav-default > li.active > a:focus {
    color: var(--m-ink);
    background: var(--m-surface);
    border: none !important;
    box-shadow: var(--m-shadow-sm), 0 0 0 1px rgba(15, 23, 42, .04);
}

.sidebar .tab-pane-header {
    padding: 8px 12px;
}

.sidebar .tab-pane-header .input-group {
    display: flex;
    gap: 8px;
    width: 100%;
}

.sidebar .tab-pane-header .input-group > .form-group {
    flex: 1 1 auto;
    margin: 0;
}

.sidebar .tab-pane-header .input-group-btn {
    display: flex;
    gap: 6px;
    width: auto;
}

.sidebar .tab-pane-header .input-group-btn > .btn {
    border-radius: var(--m-radius-sm) !important;
    height: 36px;
    min-width: 36px;
}

.sidebar .tab-pane-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--m-border);
}

/* Botón para plegar la barra lateral */
.sidebar .btn-collapse {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    box-shadow: var(--m-shadow);
    border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0;
    color: var(--m-muted);
}

.sidebar .btn-collapse:hover {
    color: var(--m-primary);
}

/* Buscador de la barra lateral */
.sidebar .tab-pane-header .form-control,
.sidebar .tab-pane-header input[type=search],
.sidebar .tab-pane-header input[type=text] {
    background-color: var(--m-surface-2);
    border-color: var(--m-border);
    border-radius: var(--m-radius-sm);
    height: 36px;
}

.sidebar .tab-pane-header .form-control:focus {
    background-color: var(--m-surface);
}

/* Grupos y listas de objetos */
.group + .group {
    margin-top: 6px;
}

.group-heading {
    background: transparent;
    border-radius: var(--m-radius-sm);
    color: var(--m-ink);
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 10px;
    transition: background-color .12s var(--m-ease);
}

.group-heading:hover {
    background: var(--m-surface-2);
    color: var(--m-ink);
}

.group-heading > .group-title > .count {
    color: var(--m-muted);
    background: var(--m-bg);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
}

.group-heading > .group-title:after,
.group-heading:hover .group-title:after,
.group-heading:hover .status-collapse {
    color: var(--m-primary);
}

.group-heading > .group-title.collapsed {
    color: var(--m-muted);
}

.group-list > li {
    border-radius: var(--m-radius-sm);
    transition: background-color .12s var(--m-ease);
}

.group-list > li:hover {
    background-color: var(--m-primary-soft);
}

.group-list > li.active {
    background-color: var(--m-primary-soft);
    box-shadow: inset 3px 0 0 var(--m-primary);
}

/* Casillas de verificación */
.checkbox label:before,
.checkbox input[type=checkbox] + label:before {
    border-radius: 5px;
    border-color: var(--m-border-strong);
    transition: background-color .12s var(--m-ease), border-color .12s var(--m-ease);
}

.checkbox input[type=checkbox]:checked + label:before {
    background-color: var(--m-primary);
    border-color: var(--m-primary);
}

/* Controles del mapa */
.map-controls .btn-group-vertical,
.map-controls .btn-group {
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    overflow: hidden;
}

.map-controls .btn,
.leaflet-bar a,
.leaflet-control-layers-toggle {
    background: var(--m-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--m-text);
    border: none;
    border-bottom: 1px solid var(--m-border);
    transition: background-color .12s var(--m-ease), color .12s var(--m-ease);
}

.map-controls .btn:last-child,
.leaflet-bar a:last-child {
    border-bottom: none;
}

.map-controls .btn:hover,
.map-controls .btn.active,
.leaflet-bar a:hover {
    background: var(--m-surface);
    color: var(--m-primary);
}

.leaflet-bar,
.leaflet-control-layers,
.leaflet-touch .leaflet-bar,
.leaflet-touch .leaflet-control-layers {
    border: none;
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    overflow: hidden;
}

/* Ventanas emergentes del mapa */
.leaflet-popup-content-wrapper {
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-lg);
    border: 1px solid var(--m-border);
}

.leaflet-popup-tip {
    box-shadow: none;
    border: 1px solid var(--m-border);
}

.leaflet-container a.leaflet-popup-close-button {
    color: var(--m-subtle);
    top: 8px;
    right: 8px;
}

.leaflet-container a.leaflet-popup-close-button:hover {
    color: var(--m-ink);
}

/* Barra inferior (historial, gráficos) */
#bottombar {
    border-top: 1px solid var(--m-border);
    box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, .18);
}

/* Notificaciones (toastr) */
#toast-container > div {
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-lg);
    opacity: 1;
    font-family: var(--m-font);
}

/* ==========================================================================
   PANEL DE ADMINISTRACIÓN
   ========================================================================== */
.admin-layout .header .navbar-main,
.admin-layout .navbar-main {
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border: none;
    border-bottom: 1px solid var(--m-border) !important;
    box-shadow: var(--m-shadow-sm) !important;
}

.admin-layout .navbar-main .navbar-text {
    color: var(--m-primary);
    background: var(--m-primary-soft);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.admin-layout .navbar-main .navbar-nav > li > a {
    color: var(--m-muted);
    border-radius: var(--m-radius-sm);
    font-weight: 500;
    transition: color .15s var(--m-ease), background-color .15s var(--m-ease);
}

.admin-layout .navbar-main .navbar-nav > li > a:hover,
.admin-layout .navbar-main .navbar-nav > li > a:focus,
.admin-layout .navbar-main .navbar-nav > .open > a,
.admin-layout .navbar-main .navbar-nav > .open > a:hover,
.admin-layout .navbar-main .navbar-nav > .active > a,
.admin-layout .navbar-main .navbar-nav > .active > a:hover {
    color: var(--m-primary);
    background: var(--m-primary-soft);
}

.admin-layout > .content > .container-fluid {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.admin-layout .panel {
    margin-bottom: 20px;
}

.admin-layout .table {
    background: var(--m-surface);
}

.admin-layout #footer {
    border-top-color: var(--m-border);
    color: var(--m-subtle);
    font-size: 12px;
}

/* ==========================================================================
   INICIO DE SESIÓN / REGISTRO
   ========================================================================== */
body.sign-in-layout .panel,
body.sign-in-layout .plan {
    box-shadow: 0 30px 60px -20px rgba(2, 6, 23, .45);
    max-width: 420px;
}

body.sign-in-layout .panel-background,
body.sign-in-layout .panel-background::before {
    border-radius: 24px;
}

body.sign-in-layout .panel-background {
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, .6);
}

body.sign-in-layout .panel-body {
    padding: 3rem 2.5rem;
}

body.sign-in-layout .img-responsive {
    max-height: 88px;
    margin-bottom: 1.25rem;
    border-radius: var(--m-radius);
}

body.sign-in-layout .form-label,
body.sign-in-layout label {
    color: var(--m-ink);
    font-size: 13px;
    font-weight: 600;
}

body.sign-in-layout .form-control {
    height: 44px;
    border-radius: var(--m-radius-sm);
    border: 1px solid var(--m-border);
    background: var(--m-surface);
    font-size: 14px;
}

body.sign-in-layout .form-control:focus {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 3px var(--m-primary-ring);
}

body.sign-in-layout .btn-primary,
body.sign-in-layout .btn-action,
body.sign-in-layout button[type=submit] {
    height: 44px;
    border-radius: var(--m-radius-sm);
    font-weight: 600;
    font-size: 14px;
    background: var(--m-primary);
    border-color: var(--m-primary);
    color: #fff;
    opacity: 1;
}

body.sign-in-layout .btn-primary:hover,
body.sign-in-layout .btn-action:hover,
body.sign-in-layout button[type=submit]:hover {
    background: var(--m-primary-hover);
    border-color: var(--m-primary-hover);
}

body.sign-in-layout .btn.btn-primary:disabled,
body.sign-in-layout .btn.btn-primary[disabled] {
    background: var(--m-primary) !important;
    border-color: var(--m-primary);
    color: #fff !important;
    opacity: .45;
    box-shadow: none;
}

body.sign-in-layout .forgot-password-link,
body.sign-in-layout a {
    color: var(--m-primary);
    font-weight: 500;
}

/* ==========================================================================
   Accesibilidad
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* El CSS de color declara .btn-action con !important: se iguala aquí */
a.btn-action,
button.btn-action {
    background-color: var(--m-primary) !important;
    border-color: var(--m-primary) !important;
    color: #fff !important;
}

a.btn-action:hover,
a.btn-action:focus,
button.btn-action:hover,
button.btn-action:focus {
    background-color: var(--m-primary-hover) !important;
    border-color: var(--m-primary-hover) !important;
}

.checkbox input[type=checkbox]:checked + label:before,
.group .checkbox input[type=checkbox]:checked + label:before {
    background-color: var(--m-primary);
    border-color: var(--m-primary);
}

/* ==========================================================================
   Ajustes v2 (revisión con datos reales)
   ========================================================================== */

/* Logo: más grande y la píldora ajustada a él */
@media (min-width: 768px) {
    #header.folded .navbar .navbar-brand {
        height: auto;
        padding: 6px 14px;
        display: flex;
        align-items: center;
    }
}

#header .navbar-brand img {
    height: 34px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

/* Iconos de la cabecera más uniformes */
#header .navbar-nav > li > a {
    margin: 4px 2px;
    padding: 8px 10px;
}

/* Controles del mapa: una sola columna tipo tarjeta */
#map-controls.map-controls {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    padding: 4px;
}

#map-controls.map-controls > div {
    margin: 0 !important;
}

#map-controls.map-controls .btn-group-vertical,
#map-controls.map-controls .btn-group {
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

#map-controls.map-controls .btn,
#map-controls.map-controls .leaflet-control-layers-toggle {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none !important;
    border-radius: var(--m-radius-sm) !important;
    width: 32px;
    height: 32px;
    color: var(--m-muted);
    box-shadow: none;
}

#map-controls.map-controls .btn:hover,
#map-controls.map-controls .btn:focus {
    background: var(--m-primary-soft);
    color: var(--m-primary);
}

#map-controls.map-controls label.btn.active,
#map-controls.map-controls .btn.active {
    background: transparent;
    color: var(--m-primary);
}

#map-controls.map-controls label.btn:not(.active) {
    color: var(--m-subtle);
}

#map-controls.map-controls #map-controls-layers {
    border-top: 1px solid var(--m-border);
    margin-top: 4px !important;
    padding-top: 4px;
}

/* Lista de dispositivos */
.group-list > li {
    border-bottom: 1px solid var(--m-surface-2);
}

.group-list [data-device="name"] {
    color: var(--m-ink);
    font-weight: 600;
}

.group-list [data-device="time"],
.group-list [data-device="time_text"] {
    color: var(--m-subtle);
}

.group-list [data-device="speed"] {
    display: inline-block;
    background: var(--m-bg);
    color: var(--m-text);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.group-list [data-device="status"] {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 4px rgba(15, 23, 42, .06);
}

/* Panel inferior del dispositivo (widgets) */
#widgets .widgets-content {
    background: var(--m-bg) !important;
    border-top: 1px solid var(--m-border);
    box-shadow: 0 -10px 30px -12px rgba(15, 23, 42, .25);
    padding: 8px;
    gap: 8px;
}

#widgets .widget {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    overflow: hidden;
    box-shadow: var(--m-shadow-sm);
}

#widgets .widget-heading {
    background: var(--m-surface) !important;
    border-bottom: 1px solid var(--m-border);
    color: var(--m-ink);
    font-weight: 600;
}

#widgets .widget-heading .icon,
#widgets .widget-heading i {
    color: var(--m-primary);
}

#widgets .widget-body,
#widgets .widget .table {
    background: var(--m-surface);
}

#widgets .widget .table > tbody > tr > td {
    border-top-color: var(--m-surface-2);
}

#widgets .widget .table > tbody > tr > td:first-child {
    color: var(--m-muted);
}

/* Pestañas secundarias en modales: sin cajas grises */
.modal .nav-tabs > li > a,
.modal .nav-default > li > a {
    background: transparent !important;
}

.modal .nav-tabs {
    margin-bottom: 16px;
}

/* ==========================================================================
   Ajustes v3 (capturas del cliente)
   ========================================================================== */

/* Logo sobre el mapa: sin caja, más grande y con sombra para leerse sobre el mapa */
@media (min-width: 768px) {
    #header.folded .navbar .navbar-brand {
        background: transparent;
        border: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        padding: 2px 6px;
    }
}

#header .navbar-brand img {
    height: 46px;
    max-width: 200px;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .28));
}

/* Botón para plegar la barra lateral: pestaña limpia, sin el "papel doblado" */
.sidebar .btn-collapse {
    width: 22px;
    height: 48px;
    right: -22px;
    left: auto;
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border);
    border-left: none;
    border-radius: 0 10px 10px 0;
    box-shadow: 4px 2px 10px -4px rgba(15, 23, 42, .18);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar .btn-collapse:before,
.sidebar .btn-collapse:after {
    display: none !important;
}

.sidebar .btn-collapse:hover {
    background: var(--m-primary-soft) !important;
}

/* --------------------------------------------------------------------------
   Cabecera del admin en dos filas:
   fila 1 = logo + ADMIN + usuario, fila 2 = pestañas de navegación
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .admin-layout .header .navbar-main > .container-fluid {
        padding: 0 20px;
    }

    .admin-layout .navbar-main .navbar-header {
        float: none;
        height: 56px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .admin-layout .navbar-main .navbar-brand {
        height: auto;
        padding: 0;
        margin: 0 !important;
    }

    .admin-layout .navbar-main .navbar-brand img {
        height: 40px;
        width: auto;
        margin: 0 -24px;
    }

    .admin-layout .navbar-main .navbar-text {
        float: none;
        margin: 0;
    }

    .admin-layout .header #bs-header-navbar-collapse {
        border-top: 1px solid var(--m-border) !important;
        margin: 0 -20px;
        padding: 0 14px;
        font-size: 13px;
    }

    .admin-layout .navbar-main .navbar-nav.navbar-right {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 2px;
        margin: 0;
    }

    .admin-layout .navbar-main .navbar-nav > li {
        float: none;
        position: static;
    }

    .admin-layout .navbar-main .navbar-nav > li.dropdown,
    .admin-layout .navbar-main .navbar-nav > li:has(> .dropdown-menu) {
        position: relative;
    }

    .admin-layout .navbar-main .navbar-nav > li > a {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 7px;
        height: 44px;
        padding: 0 11px;
        margin: 0;
        white-space: nowrap;
        border-radius: 0;
        background: transparent !important;
        box-shadow: inset 0 -2px 0 transparent;
        line-height: 1;
    }

    .admin-layout .navbar-main .navbar-nav > li > a:hover,
    .admin-layout .navbar-main .navbar-nav > li > a:focus,
    .admin-layout .navbar-main .navbar-nav > .open > a {
        color: var(--m-ink);
        box-shadow: inset 0 -2px 0 var(--m-border-strong);
    }

    .admin-layout .navbar-main .navbar-nav > .active > a,
    .admin-layout .navbar-main .navbar-nav > .active > a:hover,
    .admin-layout .navbar-main .navbar-nav > .active > a:focus {
        color: var(--m-primary);
        box-shadow: inset 0 -2px 0 var(--m-primary);
    }

    .admin-layout .navbar-main .navbar-nav > li > a > i[class^="icon"],
    .admin-layout .navbar-main .navbar-nav > li > a .nav-item-with-badge > i {
        display: inline-block !important;
        font-size: 15px;
        margin: 0;
    }

    .admin-layout .navbar-main .navbar-nav > li > a > i:empty:not([class]),
    .admin-layout .navbar-main .navbar-nav > li > a > i[class=""] {
        display: none !important;
    }

    .admin-layout .header #bs-header-navbar-collapse .nav-item-with-badge,
    .admin-layout .navbar-main .nav-item-with-badge {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 7px;
    }

    .admin-layout .navbar-main .nav-item-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .admin-layout .navbar-main .navbar-nav .badge {
        background: var(--m-primary-soft);
        color: var(--m-primary);
        font-size: 10.5px;
        font-weight: 600;
        padding: 2px 7px;
        margin: 0;
        border: none;
    }

    .admin-layout .navbar-main .navbar-nav > .active > a .badge {
        background: var(--m-primary);
        color: #fff;
    }

    /* El menú del usuario (último elemento) sube a la primera fila, a la derecha */
    .admin-layout .navbar-main .navbar-nav.navbar-right > li:last-child {
        position: absolute;
        top: 6px;
        right: 16px;
    }

    .admin-layout .navbar-main .navbar-nav.navbar-right > li:last-child > a {
        height: 44px;
        color: var(--m-text);
        border: 1px solid var(--m-border);
        border-radius: 999px;
        padding: 0 14px;
        box-shadow: none !important;
        height: 36px;
        margin-top: 4px;
    }

    .admin-layout .navbar-main .navbar-nav.navbar-right > li:last-child > .dropdown-menu {
        right: 0;
        left: auto;
    }

    /* Contenido debajo de la cabecera de dos filas */
    .admin-layout > .content {
        padding-top: 120px;
    }
}

/* El CSS de color fija los ítems del admin con un selector de ID + :not()/:has();
   se neutralizan aquí sólo las propiedades que rompen la barra en pestañas. */
@media (min-width: 768px) {
    .admin-layout .header #bs-header-navbar-collapse .navbar-nav > li {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .admin-layout .header #bs-header-navbar-collapse .navbar-nav > li > a {
        flex-direction: row !important;
        width: auto !important;
        justify-content: flex-start !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .admin-layout .header #bs-header-navbar-collapse .navbar-nav > li > a > i[class^="icon"],
    .admin-layout .header #bs-header-navbar-collapse .navbar-nav > li > a .nav-item-with-badge > i {
        margin: 0 !important;
    }

    .admin-layout .header #bs-header-navbar-collapse .navbar-nav > li:last-child > a {
        height: 36px !important;
        gap: 6px;
    }

    .admin-layout .header #bs-header-navbar-collapse .navbar-nav > li:last-child > a .caret {
        margin: 0;
    }
}

@media (min-width: 768px) {
    .admin-layout .header #bs-header-navbar-collapse .navbar-nav > li:last-child {
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .admin-layout .header #bs-header-navbar-collapse .navbar-nav > li:last-child > a {
        border: 1px solid var(--m-border) !important;
        border-radius: 999px !important;
        margin: 4px 0 0 !important;
    }
}

/* Pantallas medianas: se ocultan los íconos para que la barra quepa en una línea */
@media (min-width: 768px) and (max-width: 1079px) {
    .admin-layout .header #bs-header-navbar-collapse .navbar-nav > li:not(:last-child) > a > i[class^="icon"],
    .admin-layout .header #bs-header-navbar-collapse .navbar-nav > li:not(:last-child) > a .nav-item-with-badge > i {
        display: none !important;
    }

    .admin-layout .header #bs-header-navbar-collapse .navbar-nav > li > a {
        padding: 0 8px !important;
        font-size: 12.5px;
    }

}

@media (min-width: 768px) {
    .admin-layout .header #bs-header-navbar-collapse .navbar-nav > li > a {
        min-height: 0 !important;
    }

    .admin-layout .header #bs-header-navbar-collapse .navbar-nav > li:last-child > a {
        padding: 0 14px !important;
    }

    .admin-layout .header #bs-header-navbar-collapse .navbar-nav > li:last-child > a .caret {
        display: inline-block;
    }
}

/* Tablets: la barra puede ocupar dos filas; el contenido baja lo necesario */
@media (min-width: 768px) and (max-width: 999px) {
    .admin-layout .header #bs-header-navbar-collapse,
    .admin-layout .header #bs-header-navbar-collapse .navbar-nav.navbar-right {
        flex-wrap: wrap !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    .admin-layout > .content {
        padding-top: 164px;
    }
}

/* ==========================================================================
   v4: barra lateral y panel inferior coordinados
   - La barra ya no se encoge al plegarse: se desliza completa (sin texto apretado).
   - El panel inferior se aparta por CSS según el estado de la barra, con la misma
     animación, en vez del salto que hace bottomAutoWidth() tras 460 ms.
   ========================================================================== */
:root {
    --m-sb-w: 300px;
    --m-sb-gap: 12px;
    --m-sb-anim: .38s cubic-bezier(.32, .72, 0, 1);
}

@media (min-width: 992px) {
    :root {
        --m-sb-w: 330px;
    }
}

@media (min-width: 768px) {
    body.modern #sidebar.sidebar.left,
    body.modern #sidebar.sidebar.left.collapsed {
        width: var(--m-sb-w) !important;
        left: var(--m-sb-gap);
        /* Sin transform con la barra abierta: un transform (o will-change: transform) convierte la
           barra en el contenedor de los position: fixed, y el menú ⋮ de los objetos (GPSWOX lo
           posiciona fijo respecto de la ventana) quedaba desplazado y recortado: no se veía. */
        transform: none;
        transition: transform var(--m-sb-anim);
    }

    body.modern #sidebar.sidebar.left.collapsed {
        transform: translateX(calc(-100% - var(--m-sb-gap)));
    }

    /* Mantener el contenido mientras se desliza (el tema base lo oculta de golpe) */
    body.modern #sidebar.sidebar.collapsed .sidebar-content .group {
        display: block;
    }

    /* Pestaña de plegar: queda visible en el borde cuando la barra está oculta */
    body.modern #sidebar.sidebar.collapsed .btn-collapse {
        box-shadow: 4px 2px 12px -4px rgba(15, 23, 42, .3);
    }

    /* Panel inferior: siempre a la derecha de la barra, con la misma animación */
    body.modern #sidebar ~ #bottombar {
        padding-left: calc(var(--m-sb-w) + var(--m-sb-gap) * 2) !important;
        transition: padding-left var(--m-sb-anim);
    }

    body.modern #sidebar.collapsed ~ #bottombar {
        padding-left: var(--m-sb-gap) !important;
    }

    body.modern #sidebar ~ #mapWrap .map-controls.top-left {
        padding-left: calc(var(--m-sb-w) + var(--m-sb-gap) * 2) !important;
        transition: padding-left var(--m-sb-anim);
    }

    body.modern #sidebar.collapsed ~ #mapWrap .map-controls.top-left {
        padding-left: var(--m-sb-gap) !important;
    }

    /* Panel inferior como tarjeta flotante, alineada con la barra lateral */
    body.modern #bottombar #widgets .widgets-content {
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius-xl) var(--m-radius-xl) 0 0;
        border-bottom: none;
    }
}

/* >>> clonador: menu de objetos */
/* Menú ⋮ de dispositivos/eventos: GPSWOX lo abre con position: fixed y coordenadas de la ventana.
   La animación base de las pestañas (fadeIn de light-green.css) termina en transform: translateY(0),
   que deja al panel como contenedor de los fixed: el menú quedaba corrido y recortado por la barra.
   Misma entrada suave, solo con opacidad (sin transform). */
@keyframes m-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body.modern #sidebar .tab-pane,
body.modern #bottombar .tab-pane {
    animation-name: m-fade-in;
}
/* <<< clonador: menu de objetos */

/* >>> clonador: diseno moderno v5 */
/* ==========================================================================
   Moderna v5: tipografía, menús, lista de dispositivos, widgets y movimiento.
   Todo bajo body.modern. REGLA: nada de transform/filter/backdrop-filter/will-change
   en #sidebar ni en sus contenedores (rompe los menús ⋮, que GPSWOX abre con
   position: fixed). En el propio menú sí se puede animar.
   ========================================================================== */
body.modern {
    --m5-ease: cubic-bezier(.2, .8, .2, 1);
    --m5-fast: 140ms;
    --m5-med: 220ms;
    --m5-hover: rgba(15, 23, 42, .05);
    --m5-press: rgba(15, 23, 42, .08);
    --m5-line: rgba(15, 23, 42, .07);
    --m5-ring: 0 0 0 3px var(--m-primary-ring);
    --m5-pop: 0 18px 40px -12px rgba(15, 23, 42, .28), 0 4px 12px -4px rgba(15, 23, 42, .1);
    --m5-card: 0 1px 2px rgba(15, 23, 42, .04), 0 0 0 1px var(--m5-line);
    font-feature-settings: "cv11", "ss01", "ss03";
    letter-spacing: -.006em;
}

body.modern [data-device="time"],
body.modern [data-device="speed"],
body.modern .count,
body.modern .table td,
body.modern .tpct {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Barra lateral
   -------------------------------------------------------------------------- */
body.modern #sidebar.sidebar.left {
    border-radius: 18px;
    box-shadow: 0 24px 48px -18px rgba(15, 23, 42, .28), 0 0 0 1px rgba(15, 23, 42, .06);
}

/* Pestañas: control segmentado */
body.modern #sidebar .nav-tabs.nav-default {
    display: flex;
    gap: 2px;
    padding: 4px;
    margin: 0 0 12px;
    background: #eef2f7;
    border: 0;
    border-radius: 12px;
}

body.modern #sidebar .nav-tabs.nav-default > li {
    flex: 1 1 0;
    float: none;
    margin: 0;
}

body.modern #sidebar .nav-tabs.nav-default > li.hidden {
    display: none;
}

body.modern #sidebar .nav-tabs.nav-default > li > a {
    margin: 0;
    padding: 7px 8px;
    border: 0 !important;
    border-radius: 9px;
    background: transparent;
    color: var(--m-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    transition: color var(--m5-fast) var(--m5-ease), background-color var(--m5-fast) var(--m5-ease),
                box-shadow var(--m5-fast) var(--m5-ease);
}

body.modern #sidebar .nav-tabs.nav-default > li > a:hover {
    color: var(--m-ink);
    background: rgba(255, 255, 255, .55);
}

body.modern #sidebar .nav-tabs.nav-default > li.active > a,
body.modern #sidebar .nav-tabs.nav-default > li.active > a:hover,
body.modern #sidebar .nav-tabs.nav-default > li.active > a:focus {
    background: #fff;
    color: var(--m-ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 1px 1px rgba(15, 23, 42, .04);
}

/* Búsqueda y botones de la cabecera de cada pestaña */
body.modern #sidebar .tab-pane-header .form-control {
    height: 38px;
    border-radius: 11px;
    background-color: #f4f6fa;
    border: 1px solid transparent;
    font-size: 13px;
    transition: background-color var(--m5-fast) var(--m5-ease), border-color var(--m5-fast) var(--m5-ease),
                box-shadow var(--m5-fast) var(--m5-ease);
}

body.modern #sidebar .tab-pane-header .form-control:hover {
    background-color: #eef1f6;
}

body.modern #sidebar .tab-pane-header .form-control:focus {
    background-color: #fff;
    border-color: var(--m-primary);
    box-shadow: var(--m5-ring);
}

body.modern #sidebar .tab-pane-header .input-group-btn > .btn,
body.modern #sidebar .tab-pane-header .input-group-btn > .btn-group > .btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 11px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

/* Encabezado de grupo */
body.modern #sidebar .group-heading .group-title-text {
    font-size: 13px;
    font-weight: 650;
    color: var(--m-ink);
    letter-spacing: -.01em;
}

body.modern #sidebar .group-heading .count.label {
    background: var(--m-primary-soft);
    color: var(--m-primary);
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
}

/* Filas de dispositivos */
body.modern #sidebar .group-list > li {
    margin: 1px 4px;
    border-bottom: 0 !important;
    border-radius: 12px;
    transition: background-color var(--m5-fast) var(--m5-ease), box-shadow var(--m5-fast) var(--m5-ease);
}

body.modern #sidebar .group-list > li:hover {
    background-color: var(--m5-hover);
}

body.modern #sidebar .group-list > li.active,
body.modern #sidebar .group-list > li.active:hover {
    background-color: var(--m-primary-soft);
    box-shadow: inset 3px 0 0 var(--m-primary);
}

body.modern #sidebar .group-list > li [data-device="name"] {
    font-size: 13px;
    font-weight: 600;
    color: var(--m-ink);
    letter-spacing: -.012em;
}

body.modern #sidebar .group-list > li [data-device="time"] {
    font-size: 11px;
    color: var(--m-subtle);
}

body.modern #sidebar .group-list > li [data-device="time_text"] {
    font-size: 11.5px;
    color: var(--m-muted);
}

body.modern #sidebar .group-list > li [data-device="time_text"] a,
body.modern #sidebar .group-list > li .name a {
    color: var(--m-primary);
    font-weight: 600;
}

/* Velocidad: píldora compacta con números tabulares */
body.modern #sidebar [data-device="speed"] {
    font-family: var(--m-font) !important;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--m-ink);
    background: #f1f4f8 !important;
    border-radius: 999px;
    padding: 3px 9px !important;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Estado: colores actuales y un halo suave del mismo color */
body.modern [data-device="status"] {
    position: relative;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50%;
    vertical-align: 1px;
}

body.modern [data-device="status"]::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: inherit;
    opacity: .22;
}

body.modern [data-device="status"][style*="red"]    { background-color: #ef4444 !important; }
body.modern [data-device="status"][style*="yellow"] { background-color: #f59e0b !important; }
body.modern [data-device="status"][style*="green"]  { background-color: #22c55e !important; }
body.modern [data-device="status"][style*="blue"]   { background-color: #3b82f6 !important; }
body.modern [data-device="status"][style*="grey"],
body.modern [data-device="status"][style*="gray"]   { background-color: #94a3b8 !important; }

/* En movimiento: el halo late */
body.modern [data-device="status"][style*="green"]::after {
    animation: m5-pulse 1.8s var(--m5-ease) infinite;
}

@keyframes m5-pulse {
    0%   { opacity: .45; inset: -1px; }
    70%  { opacity: 0;   inset: -6px; }
    100% { opacity: 0;   inset: -6px; }
}

/* Botón ⋮ y demás botones de ícono de la lista */
body.modern #sidebar .btn-group > .btn[class*="icon-gps-"],
body.modern #sidebar .details > .btn-group > i.btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--m-muted);
    font-size: 16px;
    background: transparent;
    border: 0;
    box-shadow: none;
    transition: background-color var(--m5-fast) var(--m5-ease), color var(--m5-fast) var(--m5-ease);
}

body.modern #sidebar .btn-group > .btn[class*="icon-gps-"]:hover,
body.modern #sidebar .btn-group.open > .btn[class*="icon-gps-"] {
    background: var(--m5-press);
    color: var(--m-ink);
}

body.modern #sidebar .details .icon.detect_engine {
    color: var(--m-subtle);
    font-size: 15px;
}

/* Barras de desplazamiento finas */
body.modern #sidebar .tab-pane-body,
body.modern .dropdown-menu,
body.modern .modal-body {
    scrollbar-width: thin;
    scrollbar-color: #cfd6e0 transparent;
}

body.modern #sidebar .tab-pane-body::-webkit-scrollbar,
body.modern .dropdown-menu::-webkit-scrollbar,
body.modern .modal-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.modern #sidebar .tab-pane-body::-webkit-scrollbar-thumb,
body.modern .dropdown-menu::-webkit-scrollbar-thumb,
body.modern .modal-body::-webkit-scrollbar-thumb {
    background: #cfd6e0;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

body.modern #sidebar .tab-pane-body::-webkit-scrollbar-track {
    background: transparent;
}

/* --------------------------------------------------------------------------
   Menús desplegables
   -------------------------------------------------------------------------- */
body.modern .dropdown-menu {
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--m5-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--m5-pop);
    font-size: 13px;
}

body.modern .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--m-text);
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    transition: background-color var(--m5-fast) var(--m5-ease), color var(--m5-fast) var(--m5-ease);
}

body.modern .dropdown-menu > li > a > i:first-child,
body.modern .dropdown-menu > li > a > .icon:first-child {
    flex: none;
    width: 16px;
    margin: 0;
    font-size: 16px;
    text-align: center;
    color: var(--m-muted);
    transition: color var(--m5-fast) var(--m5-ease);
}

body.modern .dropdown-menu > li > a:hover,
body.modern .dropdown-menu > li > a:focus {
    background: var(--m5-hover);
    color: var(--m-ink);
}

body.modern .dropdown-menu > li > a:hover > i:first-child,
body.modern .dropdown-menu > li > a:hover > .icon:first-child {
    color: var(--m-primary);
}

body.modern .dropdown-menu > li > a:active {
    background: var(--m5-press);
}

body.modern .dropdown-menu .divider {
    margin: 5px 4px;
    background-color: var(--m5-line);
}

/* La flechita de "droparrow" desentona con la tarjeta flotante */
body.modern .droparrow > .dropdown-menu::before,
body.modern .droparrow > .dropdown-menu::after {
    display: none !important;
}

/* Aparición: leve escala + fundido (se anima el propio menú, no un contenedor) */
body.modern .open > .dropdown-menu {
    animation: m5-pop var(--m5-med) var(--m5-ease) both;
    transform-origin: top left;
}

body.modern .dropleft.up.open > .dropdown-menu,
body.modern .dropup.open > .dropdown-menu {
    transform-origin: bottom left;
}

@keyframes m5-pop {
    from { opacity: 0; transform: translateY(-4px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Barra superior y controles del mapa
   -------------------------------------------------------------------------- */
body.modern #header .navbar-nav > li > a {
    border-radius: 10px;
    transition: background-color var(--m5-fast) var(--m5-ease), color var(--m5-fast) var(--m5-ease);
}

body.modern #header .navbar-nav > li > a:hover,
body.modern #header .navbar-nav > .open > a {
    background-color: var(--m5-hover) !important;
    color: var(--m-ink) !important;
}

body.modern #header .navbar-nav > li > a > .icon {
    font-size: 18px;
}

body.modern .map-controls .btn,
body.modern #map-controls.map-controls .btn {
    color: #334155;
    font-size: 17px;
    transition: background-color var(--m5-fast) var(--m5-ease), color var(--m5-fast) var(--m5-ease);
}

body.modern .map-controls .btn:hover,
body.modern #map-controls.map-controls .btn:hover {
    background-color: var(--m-primary-soft) !important;
    color: var(--m-primary);
}

body.modern .map-controls .btn.active,
body.modern #map-controls.map-controls .btn.active {
    color: var(--m-primary);
}

/* --------------------------------------------------------------------------
   Panel inferior (widgets)
   -------------------------------------------------------------------------- */
body.modern #widgets .widget {
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--m5-card);
    overflow: hidden;
}

body.modern #widgets .widget-heading {
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--m5-line);
    background: transparent;
}

body.modern #widgets .widget-title {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--m-ink);
    letter-spacing: -.01em;
}

body.modern #widgets .widget-title > i,
body.modern #widgets .widget-title > .icon {
    color: var(--m-primary);
    font-size: 15px;
    margin-right: 6px;
}

body.modern #widgets .widget-body .table > tbody > tr > td {
    padding: 6px 0;
    border-top: 0;
    border-bottom: 1px solid var(--m5-line);
    font-size: 12.5px;
    color: var(--m-ink);
}

body.modern #widgets .widget-body .table > tbody > tr:last-child > td {
    border-bottom: 0;
}

body.modern #widgets .widget-body .table > tbody > tr > td:first-child {
    color: var(--m-muted);
    font-weight: 500;
    padding-right: 12px;
}

body.modern #widgets .widget-streetview .widget-body {
    background: #f1f4f8;
    color: var(--m-muted);
}

body.modern #widgets .widget-streetview .widget-body * {
    color: var(--m-muted) !important;
}

body.modern #widgets .btn-default {
    border-radius: 10px;
    border-color: var(--m-border);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Tooltips, popups del mapa y modales
   -------------------------------------------------------------------------- */
body.modern .tooltip-inner {
    padding: 6px 10px;
    border-radius: 8px;
    background: #0f172a;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

body.modern .leaflet-popup-content-wrapper {
    border-radius: 14px;
    box-shadow: var(--m5-pop);
}

body.modern .leaflet-tooltip {
    border: 0;
    border-radius: 8px;
    padding: 4px 8px;
    font-weight: 600;
    font-size: 12px;
    color: var(--m-ink);
    box-shadow: 0 4px 14px -4px rgba(15, 23, 42, .25), 0 0 0 1px var(--m5-line);
}

body.modern .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 32px 64px -20px rgba(15, 23, 42, .4), 0 0 0 1px var(--m5-line);
}

body.modern .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--m5-line);
}

body.modern .modal-title {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--m-ink);
}

body.modern .modal-footer {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--m5-line);
}

/* Botones: esquinas, foco accesible y respuesta al clic */
body.modern .btn {
    border-radius: 10px;
}

body.modern .btn:focus-visible,
body.modern .form-control:focus-visible {
    outline: none;
    box-shadow: var(--m5-ring);
}

body.modern .btn-primary {
    box-shadow: 0 1px 2px color-mix(in srgb, var(--m-primary) 25%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12);
}

body.modern .btn-primary:hover {
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--m-primary) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12);
}

@media (prefers-reduced-motion: reduce) {
    body.modern .open > .dropdown-menu,
    body.modern [data-device="status"]::after {
        animation: none !important;
    }
}
/* ==========================================================================
   Moderna v5 (2): formularios, modales, botones, insignias y panel de administración.
   :is(body.modern, body.admin-layout) = mapa + administrador (este archivo solo se carga
   con la apariencia Moderna, así que .admin-layout no afecta a otros temas).
   ========================================================================== */
body.admin-layout {
    --m5-ease: cubic-bezier(.2, .8, .2, 1);
    --m5-fast: 140ms;
    --m5-med: 220ms;
    --m5-hover: rgba(15, 23, 42, .05);
    --m5-press: rgba(15, 23, 42, .08);
    --m5-line: rgba(15, 23, 42, .07);
    --m5-ring: 0 0 0 3px var(--m-primary-ring);
    --m5-pop: 0 18px 40px -12px rgba(15, 23, 42, .28), 0 4px 12px -4px rgba(15, 23, 42, .1);
    --m5-card: 0 1px 2px rgba(15, 23, 42, .04), 0 0 0 1px var(--m5-line);
    font-feature-settings: "cv11", "ss01", "ss03";
    letter-spacing: -.006em;
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
:is(body.modern, body.admin-layout) .form-control,
:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle {
    height: 40px;
    padding: 9px 12px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background-color: #fff;
    color: var(--m-ink);
    font-size: 13.5px;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .03);
    transition: border-color var(--m5-fast) var(--m5-ease), box-shadow var(--m5-fast) var(--m5-ease),
                background-color var(--m5-fast) var(--m5-ease);
}

:is(body.modern, body.admin-layout) textarea.form-control {
    height: auto;
    min-height: 84px;
    line-height: 1.5;
}

:is(body.modern, body.admin-layout) .form-control.input-sm,
:is(body.modern, body.admin-layout) .input-sm,
:is(body.modern, body.admin-layout) .bootstrap-select.input-sm > .dropdown-toggle {
    height: 34px;
    padding: 6px 10px;
    font-size: 12.5px;
    border-radius: 9px;
}

:is(body.modern, body.admin-layout) .form-control:hover,
:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle:hover {
    border-color: #c5cfdb;
}

:is(body.modern, body.admin-layout) .form-control:focus,
:is(body.modern, body.admin-layout) .bootstrap-select.open > .dropdown-toggle,
:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--m-primary);
    box-shadow: var(--m5-ring);
    outline: none !important;
}

:is(body.modern, body.admin-layout) .form-control::placeholder {
    color: var(--m-subtle);
}

:is(body.modern, body.admin-layout) .form-control[disabled],
:is(body.modern, body.admin-layout) .form-control[readonly] {
    background-color: #f6f8fb;
    color: var(--m-muted);
}

:is(body.modern, body.admin-layout) .has-error .form-control {
    border-color: #f87171;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .14);
}

:is(body.modern, body.admin-layout) .form-group > label,
:is(body.modern, body.admin-layout) .control-label {
    margin-bottom: 6px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 600;
}

:is(body.modern, body.admin-layout) .help-block {
    color: var(--m-muted);
    font-size: 12px;
}

:is(body.modern, body.admin-layout) .input-group-addon {
    border: 1px solid #dbe2ea;
    background: #f6f8fb;
    color: var(--m-muted);
    border-radius: 10px;
}

:is(body.modern, body.admin-layout) .input-group > .form-control:not(:last-child),
:is(body.modern, body.admin-layout) .input-group > .input-group-addon:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

:is(body.modern, body.admin-layout) .input-group > .form-control:not(:first-child),
:is(body.modern, body.admin-layout) .input-group > .input-group-addon:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* bootstrap-select pone .form-control también en el contenedor: solo se estiliza el botón */
:is(body.modern, body.admin-layout) .bootstrap-select.form-control {
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Selector bootstrap-select: texto alineado y menú como los demás */
:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle {
    display: flex;
    align-items: center;
    padding-right: 32px;
    font-weight: 500;
    min-width: 0;
}

:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle .filter-option {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle .bs-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m-subtle);
}

:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle .bs-caret .caret {
    position: static;
    margin: 0;
}

:is(body.modern, body.admin-layout) .bootstrap-select .dropdown-menu li a {
    border-radius: 8px;
}

:is(body.modern, body.admin-layout) .bootstrap-select .dropdown-menu li.selected a {
    background: var(--m-primary-soft);
    color: var(--m-primary);
}

:is(body.modern, body.admin-layout) .bs-searchbox .form-control {
    height: 34px;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
:is(body.modern, body.admin-layout) .btn {
    border-radius: 10px;
    font-weight: 600;
    transition: background-color var(--m5-fast) var(--m5-ease), border-color var(--m5-fast) var(--m5-ease),
                color var(--m5-fast) var(--m5-ease), box-shadow var(--m5-fast) var(--m5-ease);
}

:is(body.modern, body.admin-layout) .modal-footer .btn,
:is(body.modern, body.admin-layout) .btn-lg,
:is(body.modern, body.admin-layout) form .btn:not(.btn-xs):not(.btn-sm):not([class*="icon"]) {
    min-height: 38px;
    padding: 8px 16px;
    font-size: 13.5px;
}

:is(body.modern, body.admin-layout) .btn-default {
    background: #fff;
    border-color: #dbe2ea;
    color: var(--m-ink);
    box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
}

:is(body.modern, body.admin-layout) .btn-default:hover,
:is(body.modern, body.admin-layout) .btn-default:focus {
    background: #f6f8fb;
    border-color: #c5cfdb;
    color: var(--m-ink);
}

:is(body.modern, body.admin-layout) .btn-danger {
    background: #dc2626;
    border-color: #dc2626;
}

:is(body.modern, body.admin-layout) .btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

:is(body.modern, body.admin-layout) .btn:active {
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12);
}

:is(body.modern, body.admin-layout) .btn:focus-visible {
    outline: none;
    box-shadow: var(--m5-ring);
}

/* --------------------------------------------------------------------------
   Insignias / etiquetas: suaves en vez de bloques saturados
   -------------------------------------------------------------------------- */
:is(body.modern, body.admin-layout) .label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: .01em;
    vertical-align: middle;
}

:is(body.modern, body.admin-layout) .label-success { background: #dcfce7; color: #15803d; }
:is(body.modern, body.admin-layout) .label-danger  { background: #fee2e2; color: #b91c1c; }
:is(body.modern, body.admin-layout) .label-warning { background: #fef3c7; color: #b45309; }
:is(body.modern, body.admin-layout) .label-info    { background: #e0f2fe; color: #0369a1; }
:is(body.modern, body.admin-layout) .label-primary { background: var(--m-primary-soft); color: var(--m-primary); }
:is(body.modern, body.admin-layout) .label-default { background: #f1f5f9; color: #475569; }

:is(body.modern, body.admin-layout) .label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .85;
}

:is(body.modern, body.admin-layout) .count.label::before,
:is(body.modern, body.admin-layout) .badge::before {
    display: none;
}

:is(body.modern, body.admin-layout) .badge {
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 10.5px;
    font-weight: 600;
    background: #e8edf4;
    color: #334155;
}

/* --------------------------------------------------------------------------
   Modales
   -------------------------------------------------------------------------- */
:is(body.modern, body.admin-layout) .modal-backdrop.in {
    opacity: 1;
    background: rgba(15, 23, 42, .42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

:is(body.modern, body.admin-layout) .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 32px 64px -20px rgba(15, 23, 42, .45), 0 0 0 1px var(--m5-line);
    overflow: hidden;
}

:is(body.modern, body.admin-layout) .modal-header {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--m5-line);
}

:is(body.modern, body.admin-layout) .modal-header .modal-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--m-ink);
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.015em;
}

:is(body.modern, body.admin-layout) .modal-header .modal-title > .icon,
:is(body.modern, body.admin-layout) .modal-header .modal-title > i {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 10px;
    background: var(--m-primary-soft);
    color: var(--m-primary);
    font-size: 16px;
}

:is(body.modern, body.admin-layout) .modal-header .close {
    width: 32px;
    height: 32px;
    margin: 0;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--m-muted);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    transition: background-color var(--m5-fast) var(--m5-ease), color var(--m5-fast) var(--m5-ease);
}

:is(body.modern, body.admin-layout) .modal-header .close:hover {
    background: var(--m5-press);
    color: var(--m-ink);
}

:is(body.modern, body.admin-layout) .modal-body {
    padding: 20px;
}

:is(body.modern, body.admin-layout) .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--m5-line);
    background: #fafbfd;
}

:is(body.modern, body.admin-layout) .modal-footer .btn + .btn {
    margin-left: 0;
}

/* Pestañas dentro de modales: una sola fila con desplazamiento, subrayado animado */
:is(body.modern, body.admin-layout) .modal .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    margin: -20px -20px 18px;
    padding: 0 14px;
    overflow-x: auto;
    border-bottom: 1px solid var(--m5-line);
    scrollbar-width: none;
}

:is(body.modern, body.admin-layout) .modal .nav-tabs::-webkit-scrollbar {
    display: none;
}

:is(body.modern, body.admin-layout) .modal .nav-tabs > li {
    float: none;
    flex: none;
    margin-bottom: -1px;
}

:is(body.modern, body.admin-layout) .modal .nav-tabs > li > a {
    margin: 0;
    padding: 12px 10px;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--m-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--m5-fast) var(--m5-ease), border-color var(--m5-fast) var(--m5-ease);
}

:is(body.modern, body.admin-layout) .modal .nav-tabs > li > a:hover {
    color: var(--m-ink);
}

:is(body.modern, body.admin-layout) .modal .nav-tabs > li.active > a {
    color: var(--m-primary);
    font-weight: 600;
    border-bottom-color: var(--m-primary) !important;
}

/* Menús desplegables también en el administrador */
body.admin-layout .dropdown-menu {
    padding: 6px;
    border: 1px solid var(--m5-line);
    border-radius: 14px;
    box-shadow: var(--m5-pop);
}

body.admin-layout .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    font-weight: 500;
    transition: background-color var(--m5-fast) var(--m5-ease);
}

body.admin-layout .dropdown-menu > li > a:hover {
    background: var(--m5-hover);
}

body.admin-layout .open > .dropdown-menu {
    animation: m5-pop var(--m5-med) var(--m5-ease) both;
    transform-origin: top right;
}

@keyframes m5-pop {
    from { opacity: 0; transform: translateY(-4px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Administrador: navegación
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
    body.admin-layout #bs-header-navbar-collapse {
        padding: 0 20px;
        border-top: 1px solid var(--m5-line);
    }

    body.admin-layout #bs-header-navbar-collapse > .navbar-nav {
        display: flex;
        align-items: center;
        gap: 4px;
        height: 56px;
    }

    body.admin-layout #bs-header-navbar-collapse > .navbar-nav > li:not(:last-child) > a {
        height: 38px;
        padding: 0 12px !important;
        display: flex;
        align-items: center;
        gap: 8px !important;
        font-size: 13.5px;
    }

    body.admin-layout #bs-header-navbar-collapse > .navbar-nav > li:not(:last-child) > a .text,
    body.admin-layout #bs-header-navbar-collapse > .navbar-nav > li:not(:last-child) > a .nav-item-label {
        font-size: 13.5px !important;
        line-height: 20px;
    }

    body.admin-layout #bs-header-navbar-collapse > .navbar-nav > li > a i[class*="icon"] {
        font-size: 16px !important;
        width: 16px;
        margin-right: 0 !important;
    }

    body.admin-layout #bs-header-navbar-collapse .nav-item-with-badge {
        gap: 8px !important;
    }

    body.admin-layout > .content {
        padding-top: 132px;
    }
}

body.admin-layout .navbar-main .navbar-nav > li > a {
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 9px;
    color: #475569 !important;
    font-size: 13px;
    font-weight: 500;
    transition: background-color var(--m5-fast) var(--m5-ease), color var(--m5-fast) var(--m5-ease);
}

body.admin-layout .navbar-main .navbar-nav > li > a i[class*="icon"] {
    font-size: 15px;
    margin-right: 6px;
    color: #64748b;
    transition: color var(--m5-fast) var(--m5-ease);
}

body.admin-layout .navbar-main .navbar-nav > li > a:hover {
    background: var(--m5-hover) !important;
    color: var(--m-ink) !important;
}

body.admin-layout .navbar-main .navbar-nav > li.active > a,
body.admin-layout .navbar-main .navbar-nav > li.active > a:hover {
    background: var(--m-primary-soft) !important;
    color: var(--m-primary) !important;
    font-weight: 600;
}

body.admin-layout .navbar-main .navbar-nav > li.active > a *,
body.admin-layout .navbar-main .navbar-nav > li.active > a i[class*="icon"] {
    color: var(--m-primary) !important;
    border-color: transparent !important;
}

body.admin-layout .navbar-main .navbar-nav > li > a::after {
    display: none !important;   /* subrayado viejo: lo reemplaza la píldora */
}

body.admin-layout .navbar-main .nav-item-with-badge {
    display: inline-flex;
    align-items: center;
}

body.admin-layout .navbar-main .nav-item-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.admin-layout .navbar-main .navbar-nav .badge {
    border: 0 !important;
    background: #e8edf4 !important;
    color: #475569 !important;
}

body.admin-layout .navbar-main .navbar-nav > li.active .badge {
    background: var(--m-primary) !important;
    color: #fff !important;
}

body.admin-layout .navbar-main .navbar-text {
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

/* --------------------------------------------------------------------------
   Administrador: tarjetas de resumen
   -------------------------------------------------------------------------- */
body.admin-layout .status-cards .status-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: 74px;
    padding: 14px 18px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--m5-card);
    text-align: left;
    cursor: pointer;
    transition: box-shadow var(--m5-fast) var(--m5-ease), background-color var(--m5-fast) var(--m5-ease);
}

body.admin-layout .status-cards .status-card:hover {
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .18), 0 0 0 1px rgba(15, 23, 42, .1);
}

body.admin-layout .status-cards .status-card.active {
    box-shadow: 0 0 0 2px var(--m-primary), 0 6px 16px -8px color-mix(in srgb, var(--m-primary) 35%, transparent);
}

body.admin-layout .status-cards .status-card-label {
    color: var(--m-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

body.admin-layout .status-cards .status-card-count {
    color: var(--m-ink);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

body.admin-layout .status-cards .status-card.active .status-card-count {
    color: var(--m-primary);
}

/* --------------------------------------------------------------------------
   Administrador: paneles y tablas
   -------------------------------------------------------------------------- */
body.admin-layout .panel {
    border: 0;
    border-radius: 18px;
    box-shadow: var(--m5-card);
    overflow: hidden;
}

body.admin-layout .panel-heading {
    padding: 14px 20px;
    border-bottom: 1px solid var(--m5-line);
    background: #fff;
}

body.admin-layout .panel-heading .panel-title,
body.admin-layout .panel-heading > .title {
    color: var(--m-ink);
    font-size: 15px;
    font-weight: 650;
}

body.admin-layout .panel-heading .nav-icons > li > a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 10px;
    color: #475569;
    font-size: 17px;
    transition: background-color var(--m5-fast) var(--m5-ease), color var(--m5-fast) var(--m5-ease);
}

body.admin-layout .panel-heading .nav-icons > li > a:hover {
    background: var(--m-primary-soft);
    color: var(--m-primary);
}

body.admin-layout .table > thead > tr > th {
    padding: 11px 12px;
    border-bottom: 1px solid var(--m5-line) !important;
    background: #f8fafc;
    color: var(--m-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.admin-layout .table > tbody > tr > td {
    padding: 10px 12px;
    border-top: 1px solid var(--m5-line);
    color: var(--m-ink);
    font-size: 13px;
    vertical-align: middle;
}

body.admin-layout .table > tbody > tr {
    transition: background-color var(--m5-fast) var(--m5-ease);
}

body.admin-layout .table-hover > tbody > tr:hover,
body.admin-layout .table > tbody > tr:hover {
    background-color: #f6f8fc;
}

body.admin-layout .table > tbody > tr.selected,
body.admin-layout .table > tbody > tr.active {
    background-color: var(--m-primary-soft);
}

body.admin-layout .table .btn[class*="icon-gps-"] {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--m-muted);
    font-size: 16px;
}

body.admin-layout .table .btn[class*="icon-gps-"]:hover,
body.admin-layout .table .open > .btn[class*="icon-gps-"] {
    background: var(--m5-press);
    color: var(--m-ink);
}

/* Paginación */
body.admin-layout .pagination > li > a,
body.admin-layout .pagination > li > span {
    min-width: 34px;
    height: 34px;
    margin: 0 2px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px !important;
    color: #475569;
    font-weight: 500;
}

body.admin-layout .pagination > li > a:hover {
    background: var(--m5-hover);
    color: var(--m-ink);
}

body.admin-layout .pagination > .active > a,
body.admin-layout .pagination > .active > a:hover,
body.admin-layout .pagination > .active > span {
    background: var(--m-primary);
    color: #fff;
}

/* Barras de desplazamiento del administrador */
body.admin-layout {
    scrollbar-width: thin;
    scrollbar-color: #cfd6e0 transparent;
}

@media (prefers-reduced-motion: reduce) {
    body.admin-layout .open > .dropdown-menu {
        animation: none !important;
    }
}
/* Íconos Lucide (https://lucide.dev, licencia ISC) en lugar de las fuentes icongps/icomoon/FontAwesome.
   Cada clase define --m5-i y el ::before dibuja la máscara con el color del texto. */
:is(body.modern, body.admin-layout) .icon-gps-menu::before,
:is(body.modern, body.admin-layout) .icon-gps-v-dots::before,
:is(body.modern, body.admin-layout) .icon-gps-1-hour-1::before,
:is(body.modern, body.admin-layout) .icon-gps-clock::before,
:is(body.modern, body.admin-layout) .icon-gps-history::before,
:is(body.modern, body.admin-layout) .icon-gps-forward::before,
:is(body.modern, body.admin-layout) .icon-gps-chevron-right::before,
:is(body.modern, body.admin-layout) .icon-gps-edit::before,
:is(body.modern, body.admin-layout) .icon-gps-sharing::before,
:is(body.modern, body.admin-layout) .icon-gps-deviceconfig_out_l::before,
:is(body.modern, body.admin-layout) .icon-gps-command_temp_out_l::before,
:is(body.modern, body.admin-layout) .icon-gps-credit-card::before,
:is(body.modern, body.admin-layout) .icon-gps-bell::before,
:is(body.modern, body.admin-layout) .icon-gps-routes::before,
:is(body.modern, body.admin-layout) .icon-gps-camera::before,
:is(body.modern, body.admin-layout) .icon-gps-expand::before,
:is(body.modern, body.admin-layout) .icon-gps-map::before,
:is(body.modern, body.admin-layout) .icon-gps-times::before,
:is(body.modern, body.admin-layout) .icon-gps-ruler::before,
:is(body.modern, body.admin-layout) .icon-gps-search::before,
:is(body.modern, body.admin-layout) .icon-gps-cluster::before,
:is(body.modern, body.admin-layout) .icon-gps-arrow-box::before,
:is(body.modern, body.admin-layout) .icon-gps-object::before,
:is(body.modern, body.admin-layout) .icon-gps-geofence::before,
:is(body.modern, body.admin-layout) .icon-gps-pin::before,
:is(body.modern, body.admin-layout) .icon-gps-group-6979::before,
:is(body.modern, body.admin-layout) .icon-gps-tails::before,
:is(body.modern, body.admin-layout) .icon-gps-traffic::before,
:is(body.modern, body.admin-layout) .icon-gps-plus::before,
:is(body.modern, body.admin-layout) .icon-gps-minus::before,
:is(body.modern, body.admin-layout) .icon-gps-play::before,
:is(body.modern, body.admin-layout) .icon-gps-pause::before,
:is(body.modern, body.admin-layout) .icon-gps-stop::before,
:is(body.modern, body.admin-layout) .icon-gps-alert::before,
:is(body.modern, body.admin-layout) .icon-gps-sensors::before,
:is(body.modern, body.admin-layout) .icon-gps-tools::before,
:is(body.modern, body.admin-layout) .icon-gps-streetview::before,
:is(body.modern, body.admin-layout) .icon-gps-users::before,
:is(body.modern, body.admin-layout) .icon-gps-tachometer::before,
:is(body.modern, body.admin-layout) .icon-gps-events::before,
:is(body.modern, body.admin-layout) .icon-gps-settings_out_l::before,
:is(body.modern, body.admin-layout) .icon-gps-logs::before,
:is(body.modern, body.admin-layout) .icon-gps-documents::before,
:is(body.modern, body.admin-layout) .icon-gps-info-out_l::before,
:is(body.modern, body.admin-layout) .icon-gps-restart_tracsrv_out_l::before,
:is(body.modern, body.admin-layout) .icon-gps-logout::before,
:is(body.modern, body.admin-layout) .icon-gps-cog::before,
:is(body.modern, body.admin-layout) .icon.admin::before,
:is(body.modern, body.admin-layout) .icon.tools::before,
:is(body.modern, body.admin-layout) .icon.alerts::before,
:is(body.modern, body.admin-layout) .icon.geofences::before,
:is(body.modern, body.admin-layout) .icon.routes::before,
:is(body.modern, body.admin-layout) .icon.reports::before,
:is(body.modern, body.admin-layout) .icon.time::before,
:is(body.modern, body.admin-layout) .icon.poi::before,
:is(body.modern, body.admin-layout) .icon.send-command::before,
:is(body.modern, body.admin-layout) .icon.camera::before,
:is(body.modern, body.admin-layout) .icon.task::before,
:is(body.modern, body.admin-layout) .icon.services::before,
:is(body.modern, body.admin-layout) .icon.dashboard::before,
:is(body.modern, body.admin-layout) .icon.sharing::before,
:is(body.modern, body.admin-layout) .icon.devices::before,
:is(body.modern, body.admin-layout) .icon.call_action::before,
:is(body.modern, body.admin-layout) .icon.setup::before,
:is(body.modern, body.admin-layout) .icon.chat::before,
:is(body.modern, body.admin-layout) .icon.stylize-1::before,
:is(body.modern, body.admin-layout) .icon.account::before,
:is(body.modern, body.admin-layout) .icon.membership::before,
:is(body.modern, body.admin-layout) .icon.device::before,
:is(body.modern, body.admin-layout) .icon.password::before,
:is(body.modern, body.admin-layout) .icon.logout::before,
:is(body.modern, body.admin-layout) .icon.list::before,
:is(body.modern, body.admin-layout) .icon.add::before,
:is(body.modern, body.admin-layout) .icon.detect_engine::before,
:is(body.modern, body.admin-layout) .icon.lookup::before,
:is(body.modern, body.admin-layout) .icon.remove-all::before,
:is(body.modern, body.admin-layout) .icon.history-export::before,
:is(body.modern, body.admin-layout) .icon.history-clean::before,
:is(body.modern, body.admin-layout) .icon.point::before,
:is(body.modern, body.admin-layout) .icon.address::before,
:is(body.modern, body.admin-layout) .icon.eye::before,
:is(body.modern, body.admin-layout) .icon.odometer::before,
:is(body.modern, body.admin-layout) .icon.speed::before,
:is(body.modern, body.admin-layout) .icon.event::before,
:is(body.modern, body.admin-layout) .icon.content::before,
:is(body.modern, body.admin-layout) .icon.user-add::before,
:is(body.modern, body.admin-layout) .icon.device-add::before,
:is(body.modern, body.admin-layout) .icon.device-import::before,
:is(body.modern, body.admin-layout) .icon.geofence-import::before,
:is(body.modern, body.admin-layout) .icon.poi-import::before,
:is(body.modern, body.admin-layout) .icon.user::before {
    content: "" !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    background: currentColor !important;
    -webkit-mask: var(--m5-i) center / contain no-repeat;
    mask: var(--m5-i) center / contain no-repeat;
    font-family: inherit !important;
}
:is(body.modern, body.admin-layout) .icon-gps-menu { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cline x1='4' x2='20' y1='12' y2='12' /%3E%3Cline x1='4' x2='20' y1='6' y2='6' /%3E%3Cline x1='4' x2='20' y1='18' y2='18' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-v-dots { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='1' /%3E%3Ccircle cx='12' cy='5' r='1' /%3E%3Ccircle cx='12' cy='19' r='1' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-1-hour-1 { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cline x1='10' x2='14' y1='2' y2='2' /%3E%3Cline x1='12' x2='15' y1='14' y2='11' /%3E%3Ccircle cx='12' cy='14' r='8' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-clock { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpolyline points='12 6 12 12 16 14' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-history { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' /%3E%3Cpath d='M3 3v5h5' /%3E%3Cpath d='M12 7v5l4 2' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-forward { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cline x1='2' x2='5' y1='12' y2='12' /%3E%3Cline x1='19' x2='22' y1='12' y2='12' /%3E%3Cline x1='12' x2='12' y1='2' y2='5' /%3E%3Cline x1='12' x2='12' y1='19' y2='22' /%3E%3Ccircle cx='12' cy='12' r='7' /%3E%3Ccircle cx='12' cy='12' r='3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-chevron-right { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m7 11 2-2-2-2' /%3E%3Cpath d='M11 13h4' /%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-edit { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z' /%3E%3Cpath d='m15 5 4 4' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-sharing { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='18' cy='5' r='3' /%3E%3Ccircle cx='6' cy='12' r='3' /%3E%3Ccircle cx='18' cy='19' r='3' /%3E%3Cline x1='8.59' x2='15.42' y1='13.51' y2='17.49' /%3E%3Cline x1='15.41' x2='8.59' y1='6.51' y2='10.49' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-deviceconfig_out_l { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 10a7.31 7.31 0 0 0 10 10Z' /%3E%3Cpath d='m9 15 3-3' /%3E%3Cpath d='M17 13a6 6 0 0 0-6-6' /%3E%3Cpath d='M21 13A10 10 0 0 0 11 3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-command_temp_out_l { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z' /%3E%3Cpath d='M14.05 2a9 9 0 0 1 8 7.94' /%3E%3Cpath d='M14.05 6A5 5 0 0 1 18 10' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-credit-card { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect width='20' height='14' x='2' y='5' rx='2' /%3E%3Cline x1='2' x2='22' y1='10' y2='10' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-bell { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9' /%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-routes { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='6' cy='19' r='3' /%3E%3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15' /%3E%3Ccircle cx='18' cy='5' r='3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-camera { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5' /%3E%3Crect x='2' y='6' width='14' height='12' rx='2' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-expand { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3' /%3E%3Cpath d='M21 8V5a2 2 0 0 0-2-2h-3' /%3E%3Cpath d='M3 16v3a2 2 0 0 0 2 2h3' /%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-map { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z' /%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65' /%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-times { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M18 6 6 18' /%3E%3Cpath d='m6 6 12 12' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-ruler { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z' /%3E%3Cpath d='m14.5 12.5 2-2' /%3E%3Cpath d='m11.5 9.5 2-2' /%3E%3Cpath d='m8.5 6.5 2-2' /%3E%3Cpath d='m17.5 15.5 2-2' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-search { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='11' cy='11' r='8' /%3E%3Cpath d='m21 21-4.3-4.3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-cluster { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z' /%3E%3Cpath d='m7 16.5-4.74-2.85' /%3E%3Cpath d='m7 16.5 5-3' /%3E%3Cpath d='M7 16.5v5.17' /%3E%3Cpath d='M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z' /%3E%3Cpath d='m17 16.5-5-3' /%3E%3Cpath d='m17 16.5 4.74-2.85' /%3E%3Cpath d='M17 16.5v5.17' /%3E%3Cpath d='M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z' /%3E%3Cpath d='M12 8 7.26 5.15' /%3E%3Cpath d='m12 8 4.74-2.85' /%3E%3Cpath d='M12 13.5V8' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-arrow-box { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2' /%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2' /%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2' /%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-object { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m21 8-2 2-1.5-3.7A2 2 0 0 0 15.646 5H8.4a2 2 0 0 0-1.903 1.257L5 10 3 8' /%3E%3Cpath d='M7 14h.01' /%3E%3Cpath d='M17 14h.01' /%3E%3Crect width='18' height='8' x='3' y='10' rx='2' /%3E%3Cpath d='M5 18v2' /%3E%3Cpath d='M19 18v2' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-geofence { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-pin { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0' /%3E%3Ccircle cx='12' cy='10' r='3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-group-6979 { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z' /%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='currentColor' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-tails { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='19' cy='5' r='2' /%3E%3Ccircle cx='5' cy='19' r='2' /%3E%3Cpath d='M5 17A12 12 0 0 1 17 5' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-traffic { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9.3 6.2a4.55 4.55 0 0 0 5.4 0' /%3E%3Cpath d='M7.9 10.7c.9.8 2.4 1.3 4.1 1.3s3.2-.5 4.1-1.3' /%3E%3Cpath d='M13.9 3.5a1.93 1.93 0 0 0-3.8-.1l-3 10c-.1.2-.1.4-.1.6 0 1.7 2.2 3 5 3s5-1.3 5-3c0-.2 0-.4-.1-.5Z' /%3E%3Cpath d='m7.5 12.2-4.7 2.7c-.5.3-.8.7-.8 1.1s.3.8.8 1.1l7.6 4.5c.9.5 2.1.5 3 0l7.6-4.5c.7-.3 1-.7 1-1.1s-.3-.8-.8-1.1l-4.7-2.8' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-plus { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12h14' /%3E%3Cpath d='M12 5v14' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-minus { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12h14' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-play { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolygon points='6 3 20 12 6 21 6 3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-pause { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect x='14' y='4' width='4' height='16' rx='1' /%3E%3Crect x='6' y='4' width='4' height='16' rx='1' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-stop { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect width='18' height='18' x='3' y='3' rx='2' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-alert { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3' /%3E%3Cpath d='M12 9v4' /%3E%3Cpath d='M12 17h.01' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-sensors { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m12 14 4-4' /%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-tools { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-streetview { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='5' r='1' /%3E%3Cpath d='m9 20 3-6 3 6' /%3E%3Cpath d='m6 8 6 2 6-2' /%3E%3Cpath d='M12 10v4' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-users { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /%3E%3Ccircle cx='9' cy='7' r='4' /%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87' /%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-tachometer { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m12 14 4-4' /%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-events { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5' /%3E%3Cpath d='M16 2v4' /%3E%3Cpath d='M8 2v4' /%3E%3Cpath d='M3 10h5' /%3E%3Cpath d='M17.5 17.5 16 16.3V14' /%3E%3Ccircle cx='16' cy='16' r='6' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-settings_out_l { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z' /%3E%3Ccircle cx='12' cy='12' r='3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-logs { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 12h-5' /%3E%3Cpath d='M15 8h-5' /%3E%3Cpath d='M19 17V5a2 2 0 0 0-2-2H4' /%3E%3Cpath d='M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-documents { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 7v14' /%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-info-out_l { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='M12 16v-4' /%3E%3Cpath d='M12 8h.01' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-restart_tracsrv_out_l { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8' /%3E%3Cpath d='M21 3v5h-5' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-logout { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4' /%3E%3Cpolyline points='16 17 21 12 16 7' /%3E%3Cline x1='21' x2='9' y1='12' y2='12' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon-gps-cog { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 7h-9' /%3E%3Cpath d='M14 17H5' /%3E%3Ccircle cx='17' cy='17' r='3' /%3E%3Ccircle cx='7' cy='7' r='3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.admin { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z' /%3E%3Cpath d='m9 12 2 2 4-4' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.tools { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.alerts { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9' /%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.geofences { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.routes { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='6' cy='19' r='3' /%3E%3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15' /%3E%3Ccircle cx='18' cy='5' r='3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.reports { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16' /%3E%3Cpath d='M18 17V9' /%3E%3Cpath d='M13 17V5' /%3E%3Cpath d='M8 17v-3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.time { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpolyline points='12 6 12 12 16 14' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.poi { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0' /%3E%3Ccircle cx='12' cy='10' r='3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.send-command { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z' /%3E%3Cpath d='m21.854 2.147-10.94 10.939' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.camera { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5' /%3E%3Crect x='2' y='6' width='14' height='12' rx='2' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.task { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1' /%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2' /%3E%3Cpath d='m9 14 2 2 4-4' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.services { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M8 2v4' /%3E%3Cpath d='M16 2v4' /%3E%3Crect width='18' height='18' x='3' y='4' rx='2' /%3E%3Cpath d='M3 10h18' /%3E%3Cpath d='m9 16 2 2 4-4' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.dashboard { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect width='7' height='9' x='3' y='3' rx='1' /%3E%3Crect width='7' height='5' x='14' y='3' rx='1' /%3E%3Crect width='7' height='9' x='14' y='12' rx='1' /%3E%3Crect width='7' height='5' x='3' y='16' rx='1' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.sharing { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='18' cy='5' r='3' /%3E%3Ccircle cx='6' cy='12' r='3' /%3E%3Ccircle cx='18' cy='19' r='3' /%3E%3Cline x1='8.59' x2='15.42' y1='13.51' y2='17.49' /%3E%3Cline x1='15.41' x2='8.59' y1='6.51' y2='10.49' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.devices { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m21 8-2 2-1.5-3.7A2 2 0 0 0 15.646 5H8.4a2 2 0 0 0-1.903 1.257L5 10 3 8' /%3E%3Cpath d='M7 14h.01' /%3E%3Cpath d='M17 14h.01' /%3E%3Crect width='18' height='8' x='3' y='10' rx='2' /%3E%3Cpath d='M5 18v2' /%3E%3Cpath d='M19 18v2' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.call_action { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z' /%3E%3Cpath d='M14.05 2a9 9 0 0 1 8 7.94' /%3E%3Cpath d='M14.05 6A5 5 0 0 1 18 10' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.setup { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z' /%3E%3Ccircle cx='12' cy='12' r='3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.chat { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.stylize-1 { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='13.5' cy='6.5' r='.5' fill='currentColor' /%3E%3Ccircle cx='17.5' cy='10.5' r='.5' fill='currentColor' /%3E%3Ccircle cx='8.5' cy='7.5' r='.5' fill='currentColor' /%3E%3Ccircle cx='6.5' cy='12.5' r='.5' fill='currentColor' /%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.account { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Ccircle cx='12' cy='10' r='3' /%3E%3Cpath d='M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.membership { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z' /%3E%3Cpath d='m9 12 2 2 4-4' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.device { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2' /%3E%3Cpath d='M12 18h.01' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.password { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z' /%3E%3Ccircle cx='16.5' cy='7.5' r='.5' fill='currentColor' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.logout { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4' /%3E%3Cpolyline points='16 17 21 12 16 7' /%3E%3Cline x1='21' x2='9' y1='12' y2='12' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.list { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12h.01' /%3E%3Cpath d='M3 18h.01' /%3E%3Cpath d='M3 6h.01' /%3E%3Cpath d='M8 12h13' /%3E%3Cpath d='M8 18h13' /%3E%3Cpath d='M8 6h13' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.add { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12h14' /%3E%3Cpath d='M12 5v14' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.detect_engine { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 2v10' /%3E%3Cpath d='M18.4 6.6a9 9 0 1 1-12.77.04' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.lookup { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='11' cy='11' r='8' /%3E%3Cpath d='m21 21-4.3-4.3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.remove-all { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 6h18' /%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6' /%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2' /%3E%3Cline x1='10' x2='10' y1='11' y2='17' /%3E%3Cline x1='14' x2='14' y1='11' y2='17' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.history-export { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' /%3E%3Cpolyline points='7 10 12 15 17 10' /%3E%3Cline x1='12' x2='12' y1='15' y2='3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.history-clean { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21' /%3E%3Cpath d='M22 21H7' /%3E%3Cpath d='m5 11 9 9' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.point { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cline x1='22' x2='18' y1='12' y2='12' /%3E%3Cline x1='6' x2='2' y1='12' y2='12' /%3E%3Cline x1='12' x2='12' y1='6' y2='2' /%3E%3Cline x1='12' x2='12' y1='22' y2='18' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.address { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M18 8c0 3.613-3.869 7.429-5.393 8.795a1 1 0 0 1-1.214 0C9.87 15.429 6 11.613 6 8a6 6 0 0 1 12 0' /%3E%3Ccircle cx='12' cy='8' r='2' /%3E%3Cpath d='M8.714 14h-3.71a1 1 0 0 0-.948.683l-2.004 6A1 1 0 0 0 3 22h18a1 1 0 0 0 .948-1.316l-2-6a1 1 0 0 0-.949-.684h-3.712' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.eye { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0' /%3E%3Ccircle cx='12' cy='12' r='3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.odometer { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 13v8' /%3E%3Cpath d='M12 3v3' /%3E%3Cpath d='M4 6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h13a2 2 0 0 0 1.152-.365l3.424-2.317a1 1 0 0 0 0-1.635l-3.424-2.318A2 2 0 0 0 17 6z' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.speed { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m12 14 4-4' /%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.event { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5' /%3E%3Cpath d='M16 2v4' /%3E%3Cpath d='M8 2v4' /%3E%3Cpath d='M3 10h5' /%3E%3Cpath d='M17.5 17.5 16 16.3V14' /%3E%3Ccircle cx='16' cy='16' r='6' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.content { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect width='18' height='7' x='3' y='3' rx='1' /%3E%3Crect width='9' height='7' x='3' y='14' rx='1' /%3E%3Crect width='5' height='7' x='16' y='14' rx='1' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.user-add { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /%3E%3Ccircle cx='9' cy='7' r='4' /%3E%3Cline x1='19' x2='19' y1='8' y2='14' /%3E%3Cline x1='22' x2='16' y1='11' y2='11' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.device-add { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='M8 12h8' /%3E%3Cpath d='M12 8v8' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.device-import { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' /%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4' /%3E%3Cpath d='M12 12v6' /%3E%3Cpath d='m15 15-3-3-3 3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.geofence-import { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4' /%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4' /%3E%3Cpath d='M2 15h10' /%3E%3Cpath d='m9 18 3-3-3-3' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.poi-import { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M19.914 11.105A7.298 7.298 0 0 0 20 10a8 8 0 0 0-16 0c0 4.993 5.539 10.193 7.399 11.799a1 1 0 0 0 1.202 0 32 32 0 0 0 .824-.738' /%3E%3Ccircle cx='12' cy='10' r='3' /%3E%3Cpath d='M16 18h6' /%3E%3Cpath d='M19 15v6' /%3E%3C/svg%3E"); }
:is(body.modern, body.admin-layout) .icon.user { --m5-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2' /%3E%3Ccircle cx='12' cy='7' r='4' /%3E%3C/svg%3E"); }
/* ---- Lista de dispositivos v6: orden y jerarquía (nombre / estado / fecha) ---- */
body.modern #sidebar .group-list {
    display: block;
}

body.modern #sidebar .group-list > li {
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    min-height: 64px;
    padding: 0 6px 0 4px;
}

body.modern #sidebar .group-list > li > .checkbox {
    display: flex !important;
    align-items: center;
    flex: none;
    width: 24px;
    padding: 0 0 0 6px !important;
    margin: 0;
}

body.modern #sidebar .group-list > li > .name {
    display: grid !important;
    grid-template-columns: 8px minmax(0, 1fr);
    column-gap: 9px;
    row-gap: 1px;
    align-content: center;
    flex: 1 1 auto;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    padding: 10px 0 !important;
    cursor: pointer;
}

body.modern #sidebar .group-list > li > .name > * {
    grid-column: 2;
    margin: 0 !important;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.modern #sidebar .group-list > li > .name > [data-device="status"] {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    overflow: visible;
    width: 8px !important;
    height: 8px !important;
}

body.modern #sidebar .group-list > li > .name > [data-device="name"] {
    grid-row: 1;
    display: block;
    font-size: 13.5px !important;
    font-weight: 600;
    line-height: 19px;
    color: var(--m-ink);
}

body.modern #sidebar .group-list > li > .name > [data-device="time_text"] {
    grid-row: 2;
    display: block;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 17px;
    color: var(--m-text);
}

body.modern #sidebar .group-list > li > .name > [data-device="time"] {
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px !important;
    line-height: 15px;
    color: var(--m-subtle);
    font-variant-numeric: tabular-nums;
}

body.modern #sidebar .group-list > li > .name > [data-device="time"]::before {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpolyline points='12 6 12 12 16.5 12' /%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpolyline points='12 6 12 12 16.5 12' /%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .8;
}

/* El estado se lee por color */
body.modern #sidebar .group-list > li > .name > [data-device="status"][style*="red"]    ~ [data-device="time_text"] { color: #64748b; }
body.modern #sidebar .group-list > li > .name > [data-device="status"][style*="yellow"] ~ [data-device="time_text"] { color: #b45309; }
body.modern #sidebar .group-list > li > .name > [data-device="status"][style*="green"]  ~ [data-device="time_text"] { color: #15803d; }
body.modern #sidebar .group-list > li > .name > [data-device="status"][style*="blue"]   ~ [data-device="time_text"] { color: #1d4ed8; }

/* Avisos en lugar de la fecha (p. ej. "Tarjeta SIM caducada · Mejorar", "Vencido"): ámbar y sin reloj */
body.modern #sidebar .group-list > li > .name > [data-device="time"]:has(a) {
    color: #b45309;
    font-weight: 500;
}

body.modern #sidebar .group-list > li > .name > [data-device="time"]:has(a)::before {
    display: none;
}

/* Columna derecha alineada */
body.modern #sidebar .group-list > li > .details {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    flex: none;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

body.modern #sidebar .group-list > li > .details > * {
    margin: 0 !important;
}

body.modern #sidebar .group-list > li > .details [data-device="speed"] {
    min-width: 0;
    margin-right: 2px !important;
    text-align: center;
    color: var(--m-text);
}

body.modern #sidebar .group-list > li > .details [data-device="detect_engine"] {
    width: 22px;
    display: inline-flex;
    justify-content: center;
    font-size: 14px;
}

/* Motor apagado no aporta (es lo habitual): solo se muestra encendido, en verde */
body.modern #sidebar .group-list > li > .details [data-device="detect_engine"].off {
    display: none !important;
}

body.modern #sidebar [data-device="detect_engine"].on,
body.modern #sidebar [data-device="detect_engine"].on .icon {
    color: #16a34a !important;
}

/* Casillas: cuadradas y livianas (azul suave al marcar) */
body.modern #sidebar .checkbox label::before {
    width: 16px !important;
    height: 16px !important;
    box-sizing: border-box;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 5px !important;
    background-color: #fff !important;
    transition: background-color var(--m5-fast) var(--m5-ease), border-color var(--m5-fast) var(--m5-ease);
}

body.modern #sidebar .checkbox input[type=checkbox]:checked + label::before {
    border-color: color-mix(in srgb, var(--m-primary) 45%, #fff) !important;
    background-color: var(--m-primary-soft) !important;
}

/* El tilde de la plantilla (glifo sobre un cuadro de color) se reemplaza por una máscara
   pintada con el color de la plantilla */
body.modern #sidebar .checkbox label::after {
    content: "" !important;
    display: none !important;
    width: 16px !important;
    height: 16px !important;
    border: 0 !important;
    z-index: 2 !important;
    background: var(--m-primary) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 6 9 17l-5-5' /%3E%3C/svg%3E") center / 11px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 6 9 17l-5-5' /%3E%3C/svg%3E") center / 11px no-repeat;
}

body.modern #sidebar .checkbox input[type=checkbox]:checked + label::after {
    display: block !important;
}
/* ---- Lista v8: estilo lista iOS. Nombre / ● estado / fecha; separadores finos ---- */
body.modern #sidebar .group-list > li {
    gap: 10px !important;
    min-height: 0;
    margin: 0 6px !important;
    padding: 0 6px 0 2px;
    border-radius: 10px;
    position: relative;
}

body.modern #sidebar .group-list > li + li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 38px;
    right: 8px;
    height: 1px;
    background: rgba(15, 23, 42, .07);
    pointer-events: none;
}

body.modern #sidebar .group-list > li:hover::before,
body.modern #sidebar .group-list > li:hover + li::before {
    opacity: 0;
}

body.modern #sidebar .group-list > li > .name {
    grid-template-columns: 7px minmax(0, 1fr);
    column-gap: 7px;
    row-gap: 2px;
    padding: 11px 0 !important;
}

/* línea 1: nombre a todo el ancho */
body.modern #sidebar .group-list > li > .name > [data-device="name"] {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 13.5px !important;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* línea 2: punto + estado del mismo color */
body.modern #sidebar .group-list > li > .name > [data-device="status"] {
    grid-column: 1;
    grid-row: 2;
    width: 7px !important;
    height: 7px !important;
}

body.modern #sidebar .group-list > li > .name > [data-device="status"]::after {
    inset: -2px;
}

body.modern #sidebar .group-list > li > .name > [data-device="time_text"] {
    grid-column: 2;
    grid-row: 2;
    font-size: 12px !important;
    font-weight: 500;
}

/* línea 3: fecha tenue, alineada con el estado */
body.modern #sidebar .group-list > li > .name > [data-device="time"] {
    grid-column: 2;
    grid-row: 3;
    font-size: 11px !important;
    color: #94a3b8;
}

/* Sin texto de estado ("Desactivado", "No conectado", avisos): el aviso sube a la línea 2, sin reloj */
body.modern #sidebar .group-list > li > .name:not(:has([data-device="time_text"])) > [data-device="time"] {
    grid-row: 2;
    font-size: 12px !important;
    font-weight: 500;
    color: var(--m-muted);
}

body.modern #sidebar .group-list > li > .name:not(:has([data-device="time_text"])) > [data-device="time"]::before {
    display: none;
}

/* Velocidad como texto simple, alineado a la derecha */
body.modern #sidebar .group-list > li > .details [data-device="speed"] {
    background: transparent !important;
    padding: 0 4px !important;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--m-muted);
}

body.modern #sidebar .group-list > li > .checkbox {
    align-self: flex-start;
    padding-top: 13px !important;
}
/* ---- Lista v9: ícono del auto por estado, 2 líneas, casilla al pasar el mouse ---- */
body.modern #sidebar .group-list > li {
    gap: 8px !important;
    padding: 0 6px 0 10px !important;
}

/* separador alineado con el texto */
body.modern #sidebar .group-list > li + li::before {
    left: 56px;
}

/* La casilla queda sobre el ícono: aparece al pasar el mouse (o si el auto está oculto) */
body.modern #sidebar .group-list > li > .checkbox {
    position: absolute !important;
    left: 20px;
    top: 50%;
    width: 16px !important;
    height: 18px;
    margin-top: -9px !important;
    padding: 0 !important;
    z-index: 3;
    opacity: 0;
    transition: opacity var(--m5-fast) var(--m5-ease);
}

body.modern #sidebar .group-list > li:hover > .checkbox,
body.modern #sidebar .group-list > li:has(> .checkbox input:not(:checked)) > .checkbox {
    opacity: 1;
}

/* 2 columnas: ícono (36px) | texto */
body.modern #sidebar .group-list > li > .name {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 11px;
    row-gap: 1px;
    padding: 10px 0 !important;
}

/* círculo + auto */
body.modern #sidebar .group-list > li > .name::before,
body.modern #sidebar .group-list > li > .name::after {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    transition: opacity var(--m5-fast) var(--m5-ease), background-color var(--m5-fast) var(--m5-ease);
}

body.modern #sidebar .group-list > li > .name::before {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eef1f5;
}

body.modern #sidebar .group-list > li > .name::after {
    width: 19px;
    height: 19px;
    background: #94a3b8;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m21 8-2 2-1.5-3.7A2 2 0 0 0 15.646 5H8.4a2 2 0 0 0-1.903 1.257L5 10 3 8' /%3E%3Cpath d='M7 14h.01' /%3E%3Cpath d='M17 14h.01' /%3E%3Crect width='18' height='8' x='3' y='10' rx='2' /%3E%3Cpath d='M5 18v2' /%3E%3Cpath d='M19 18v2' /%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m21 8-2 2-1.5-3.7A2 2 0 0 0 15.646 5H8.4a2 2 0 0 0-1.903 1.257L5 10 3 8' /%3E%3Cpath d='M7 14h.01' /%3E%3Cpath d='M17 14h.01' /%3E%3Crect width='18' height='8' x='3' y='10' rx='2' /%3E%3Cpath d='M5 18v2' /%3E%3Cpath d='M19 18v2' /%3E%3C/svg%3E") center / contain no-repeat;
}

/* colores por estado (el punto de estado de GPSWOX trae el color en su estilo) */
body.modern #sidebar .group-list > li > .name:has([data-device="status"][style*="green"])::before  { background: #dcfce7; }
body.modern #sidebar .group-list > li > .name:has([data-device="status"][style*="green"])::after   { background: #16a34a; }
body.modern #sidebar .group-list > li > .name:has([data-device="status"][style*="yellow"])::before { background: #fef3c7; }
body.modern #sidebar .group-list > li > .name:has([data-device="status"][style*="yellow"])::after  { background: #d97706; }
body.modern #sidebar .group-list > li > .name:has([data-device="status"][style*="blue"])::before   { background: #dbeafe; }
body.modern #sidebar .group-list > li > .name:has([data-device="status"][style*="blue"])::after    { background: #2563eb; }

/* al pasar el mouse el ícono se desvanece y queda la casilla encima */
body.modern #sidebar .group-list > li:hover > .name::after,
body.modern #sidebar .group-list > li:has(> .checkbox input:not(:checked)) > .name::after {
    opacity: 0;
}

body.modern #sidebar .group-list > li:hover > .name::before {
    background: rgba(118, 118, 128, .14);
}

/* punto de estado como insignia en la esquina del círculo */
body.modern #sidebar .group-list > li > .name > [data-device="status"] {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: end;
    justify-self: end;
    width: 10px !important;
    height: 10px !important;
    margin: 0 1px 4px 0 !important;
    box-shadow: 0 0 0 2px #fff;
    z-index: 1;
}

body.modern #sidebar .group-list > li > .name > [data-device="status"]::after {
    display: none;
}

body.modern #sidebar .group-list > li:hover > .name > [data-device="status"] {
    opacity: 0;
}

/* línea 1: nombre */
body.modern #sidebar .group-list > li > .name > [data-device="name"] {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 13.5px !important;
}

/* línea 2: estado; al pasar el mouse se cambia por la fecha en el mismo lugar */
body.modern #sidebar .group-list > li > .name > [data-device="time_text"],
body.modern #sidebar .group-list > li > .name > [data-device="time"] {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    transition: opacity var(--m5-fast) var(--m5-ease);
}

body.modern #sidebar .group-list > li > .name > [data-device="time"] {
    opacity: 0;
    color: var(--m-muted) !important;
    font-size: 11.5px !important;
}

body.modern #sidebar .group-list > li:hover > .name > [data-device="time_text"] {
    opacity: 0;
}

body.modern #sidebar .group-list > li:hover > .name > [data-device="time"] {
    opacity: 1;
}

/* sin texto de estado: el aviso (Desactivado, SIM caducada, Vencido...) queda siempre visible */
body.modern #sidebar .group-list > li > .name:not(:has([data-device="time_text"])) > [data-device="time"] {
    opacity: 1;
    font-size: 12px !important;
}

body.modern #sidebar .group-list > li > .name:not(:has([data-device="time_text"])) > [data-device="time"]:has(a) {
    color: #b45309 !important;
}

/* auto oculto del mapa: fila atenuada */
body.modern #sidebar .group-list > li:has(> .checkbox input:not(:checked)) > .name > :not([data-device="status"]) {
    opacity: .5;
}

/* velocidad destacada */
body.modern #sidebar .group-list > li > .details [data-device="speed"] {
    font-size: 13px !important;
    font-weight: 700;
    color: var(--m-ink);
    padding: 0 6px !important;
}

/* casilla del grupo: igual de liviana */
body.modern #sidebar .group-heading > .checkbox {
    padding-left: 18px !important;
}

/* El input invisible recibe el clic: tiene que quedar encima del cuadro y del tilde dibujados */
body.modern #sidebar .checkbox {
    position: relative;
}

body.modern #sidebar .checkbox input[type=checkbox] {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 5 !important;
    opacity: 0 !important;
    cursor: pointer;
}
/* Color principal = el de la plantilla de color configurada (se detecta la hoja que carga la página).
   Texto sobre el color: blanco u oscuro según el contraste. */
:root:has(link[href*="/dark-amber.css"]) { --m-primary: #ffc107; --m-primary-hover: #dba606; --m-primary-soft: #fff9e6; --m-primary-ring: rgba(255, 193, 7, .22); --m-on-primary: #0f172a; --m-accent: #a67d05; }
:root:has(link[href*="/dark-blue.css"]) { --m-primary: #2b97db; --m-primary-hover: #2582bc; --m-primary-soft: #eaf5fb; --m-primary-ring: rgba(43, 151, 219, .22); --m-on-primary: #ffffff; --m-accent: #2b97db; }
:root:has(link[href*="/dark-brown.css"]) { --m-primary: #795548; --m-primary-hover: #68493e; --m-primary-soft: #f2eeed; --m-primary-ring: rgba(121, 85, 72, .22); --m-on-primary: #ffffff; --m-accent: #795548; }
:root:has(link[href*="/dark-cyan.css"]) { --m-primary: #34c0eb; --m-primary-hover: #2da5ca; --m-primary-soft: #ebf9fd; --m-primary-ring: rgba(52, 192, 235, .22); --m-on-primary: #0f172a; --m-accent: #227d99; }
:root:has(link[href*="/dark-golden.css"]) { --m-primary: #dfb020; --m-primary-hover: #c0971c; --m-primary-soft: #fcf7e9; --m-primary-ring: rgba(223, 176, 32, .22); --m-on-primary: #0f172a; --m-accent: #917215; }
:root:has(link[href*="/dark-gray.css"]) { --m-primary: #455560; --m-primary-hover: #3b4953; --m-primary-soft: #eceeef; --m-primary-ring: rgba(69, 85, 96, .22); --m-on-primary: #ffffff; --m-accent: #455560; }
:root:has(link[href*="/dark-green.css"]) { --m-primary: #2faf62; --m-primary-hover: #289654; --m-primary-soft: #eaf7ef; --m-primary-ring: rgba(47, 175, 98, .22); --m-on-primary: #ffffff; --m-accent: #2faf62; }
:root:has(link[href*="/dark-indigo.css"]) { --m-primary: #2f337a; --m-primary-hover: #282c69; --m-primary-soft: #eaebf2; --m-primary-ring: rgba(47, 51, 122, .22); --m-on-primary: #ffffff; --m-accent: #2f337a; }
:root:has(link[href*="/dark-lime.css"]) { --m-primary: #84cc16; --m-primary-hover: #72af13; --m-primary-soft: #f3fae8; --m-primary-ring: rgba(132, 204, 22, .22); --m-on-primary: #0f172a; --m-accent: #56850e; }
:root:has(link[href*="/dark-navy.css"]) { --m-primary: #001f3f; --m-primary-hover: #001b36; --m-primary-soft: #e6e9ec; --m-primary-ring: rgba(0, 31, 63, .22); --m-on-primary: #ffffff; --m-accent: #001f3f; }
:root:has(link[href*="/dark-ocean-blue.css"]) { --m-primary: #054786; --m-primary-hover: #043d73; --m-primary-soft: #e6edf3; --m-primary-ring: rgba(5, 71, 134, .22); --m-on-primary: #ffffff; --m-accent: #054786; }
:root:has(link[href*="/dark-orange.css"]) { --m-primary: #dc7f06; --m-primary-hover: #bd6d05; --m-primary-soft: #fcf2e6; --m-primary-ring: rgba(220, 127, 6, .22); --m-on-primary: #ffffff; --m-accent: #dc7f06; }
:root:has(link[href*="/dark-pink.css"]) { --m-primary: #f56f8b; --m-primary-hover: #d35f78; --m-primary-soft: #fef1f3; --m-primary-ring: rgba(245, 111, 139, .22); --m-on-primary: #ffffff; --m-accent: #f56f8b; }
:root:has(link[href*="/dark-purple.css"]) { --m-primary: #6b1daa; --m-primary-hover: #5c1992; --m-primary-soft: #f0e8f6; --m-primary-ring: rgba(107, 29, 170, .22); --m-on-primary: #ffffff; --m-accent: #6b1daa; }
:root:has(link[href*="/dark-red.css"]) { --m-primary: #d13030; --m-primary-hover: #b42929; --m-primary-soft: #faeaea; --m-primary-ring: rgba(209, 48, 48, .22); --m-on-primary: #ffffff; --m-accent: #d13030; }
:root:has(link[href*="/dark-rose.css"]) { --m-primary: #e11d48; --m-primary-hover: #c2193e; --m-primary-soft: #fce8ed; --m-primary-ring: rgba(225, 29, 72, .22); --m-on-primary: #ffffff; --m-accent: #e11d48; }
:root:has(link[href*="/dark-slate.css"]) { --m-primary: #475569; --m-primary-hover: #3d495a; --m-primary-soft: #edeef0; --m-primary-ring: rgba(71, 85, 105, .22); --m-on-primary: #ffffff; --m-accent: #475569; }
:root:has(link[href*="/dark-strong-red.css"]) { --m-primary: #ff242b; --m-primary-hover: #db1f25; --m-primary-soft: #ffe9ea; --m-primary-ring: rgba(255, 36, 43, .22); --m-on-primary: #ffffff; --m-accent: #ff242b; }
:root:has(link[href*="/dark-teal.css"]) { --m-primary: #009688; --m-primary-hover: #008175; --m-primary-soft: #e6f4f3; --m-primary-ring: rgba(0, 150, 136, .22); --m-on-primary: #ffffff; --m-accent: #009688; }
:root:has(link[href*="/dark-tropical-blue.css"]) { --m-primary: #2dc9d1; --m-primary-hover: #27adb4; --m-primary-soft: #eafafa; --m-primary-ring: rgba(45, 201, 209, .22); --m-on-primary: #0f172a; --m-accent: #1d8388; }
:root:has(link[href*="/dark-win10-blue.css"]) { --m-primary: #117ce8; --m-primary-hover: #0f6bc8; --m-primary-soft: #e7f2fd; --m-primary-ring: rgba(17, 124, 232, .22); --m-on-primary: #ffffff; --m-accent: #117ce8; }
:root:has(link[href*="/facelift.css"]) { --m-primary: #2b97db; --m-primary-hover: #2582bc; --m-primary-soft: #eaf5fb; --m-primary-ring: rgba(43, 151, 219, .22); --m-on-primary: #ffffff; --m-accent: #2b97db; }
:root:has(link[href*="/high-contrast.css"]) { --m-primary: #ffea00; --m-primary-hover: #dbc900; --m-primary-soft: #fffde6; --m-primary-ring: rgba(255, 234, 0, .22); --m-on-primary: #0f172a; --m-accent: #a69800; }
:root:has(link[href*="/light-amber.css"]) { --m-primary: #ffc107; --m-primary-hover: #dba606; --m-primary-soft: #fff9e6; --m-primary-ring: rgba(255, 193, 7, .22); --m-on-primary: #0f172a; --m-accent: #a67d05; }
:root:has(link[href*="/light-black.css"]) { --m-primary: #000000; --m-primary-hover: #000000; --m-primary-soft: #e6e6e6; --m-primary-ring: rgba(0, 0, 0, .22); --m-on-primary: #ffffff; --m-accent: #000000; }
:root:has(link[href*="/light-blue.css"]) { --m-primary: #2b97db; --m-primary-hover: #2582bc; --m-primary-soft: #eaf5fb; --m-primary-ring: rgba(43, 151, 219, .22); --m-on-primary: #ffffff; --m-accent: #2b97db; }
:root:has(link[href*="/light-brown.css"]) { --m-primary: #795548; --m-primary-hover: #68493e; --m-primary-soft: #f2eeed; --m-primary-ring: rgba(121, 85, 72, .22); --m-on-primary: #ffffff; --m-accent: #795548; }
:root:has(link[href*="/light-cyan.css"]) { --m-primary: #34c0eb; --m-primary-hover: #2da5ca; --m-primary-soft: #ebf9fd; --m-primary-ring: rgba(52, 192, 235, .22); --m-on-primary: #0f172a; --m-accent: #227d99; }
:root:has(link[href*="/light-golden.css"]) { --m-primary: #dfb020; --m-primary-hover: #c0971c; --m-primary-soft: #fcf7e9; --m-primary-ring: rgba(223, 176, 32, .22); --m-on-primary: #0f172a; --m-accent: #917215; }
:root:has(link[href*="/light-gray.css"]) { --m-primary: #455560; --m-primary-hover: #3b4953; --m-primary-soft: #eceeef; --m-primary-ring: rgba(69, 85, 96, .22); --m-on-primary: #ffffff; --m-accent: #455560; }
:root:has(link[href*="/light-green.css"]) { --m-primary: #2faf62; --m-primary-hover: #289654; --m-primary-soft: #eaf7ef; --m-primary-ring: rgba(47, 175, 98, .22); --m-on-primary: #ffffff; --m-accent: #2faf62; }
:root:has(link[href*="/light-indigo.css"]) { --m-primary: #2f337a; --m-primary-hover: #282c69; --m-primary-soft: #eaebf2; --m-primary-ring: rgba(47, 51, 122, .22); --m-on-primary: #ffffff; --m-accent: #2f337a; }
:root:has(link[href*="/light-lime.css"]) { --m-primary: #84cc16; --m-primary-hover: #72af13; --m-primary-soft: #f3fae8; --m-primary-ring: rgba(132, 204, 22, .22); --m-on-primary: #0f172a; --m-accent: #56850e; }
:root:has(link[href*="/light-navy.css"]) { --m-primary: #001f3f; --m-primary-hover: #001b36; --m-primary-soft: #e6e9ec; --m-primary-ring: rgba(0, 31, 63, .22); --m-on-primary: #ffffff; --m-accent: #001f3f; }
:root:has(link[href*="/light-ocean-blue.css"]) { --m-primary: #054786; --m-primary-hover: #043d73; --m-primary-soft: #e6edf3; --m-primary-ring: rgba(5, 71, 134, .22); --m-on-primary: #ffffff; --m-accent: #054786; }
:root:has(link[href*="/light-orange.css"]) { --m-primary: #dc7f06; --m-primary-hover: #bd6d05; --m-primary-soft: #fcf2e6; --m-primary-ring: rgba(220, 127, 6, .22); --m-on-primary: #ffffff; --m-accent: #dc7f06; }
:root:has(link[href*="/light-pink.css"]) { --m-primary: #f56f8b; --m-primary-hover: #d35f78; --m-primary-soft: #fef1f3; --m-primary-ring: rgba(245, 111, 139, .22); --m-on-primary: #ffffff; --m-accent: #f56f8b; }
:root:has(link[href*="/light-purple.css"]) { --m-primary: #6b1daa; --m-primary-hover: #5c1992; --m-primary-soft: #f0e8f6; --m-primary-ring: rgba(107, 29, 170, .22); --m-on-primary: #ffffff; --m-accent: #6b1daa; }
:root:has(link[href*="/light-red.css"]) { --m-primary: #d13030; --m-primary-hover: #b42929; --m-primary-soft: #faeaea; --m-primary-ring: rgba(209, 48, 48, .22); --m-on-primary: #ffffff; --m-accent: #d13030; }
:root:has(link[href*="/light-rose.css"]) { --m-primary: #e11d48; --m-primary-hover: #c2193e; --m-primary-soft: #fce8ed; --m-primary-ring: rgba(225, 29, 72, .22); --m-on-primary: #ffffff; --m-accent: #e11d48; }
:root:has(link[href*="/light-slate.css"]) { --m-primary: #475569; --m-primary-hover: #3d495a; --m-primary-soft: #edeef0; --m-primary-ring: rgba(71, 85, 105, .22); --m-on-primary: #ffffff; --m-accent: #475569; }
:root:has(link[href*="/light-strong-red.css"]) { --m-primary: #ff242b; --m-primary-hover: #db1f25; --m-primary-soft: #ffe9ea; --m-primary-ring: rgba(255, 36, 43, .22); --m-on-primary: #ffffff; --m-accent: #ff242b; }
:root:has(link[href*="/light-teal.css"]) { --m-primary: #009688; --m-primary-hover: #008175; --m-primary-soft: #e6f4f3; --m-primary-ring: rgba(0, 150, 136, .22); --m-on-primary: #ffffff; --m-accent: #009688; }
:root:has(link[href*="/light-tropical-blue.css"]) { --m-primary: #2dc9d1; --m-primary-hover: #27adb4; --m-primary-soft: #eafafa; --m-primary-ring: rgba(45, 201, 209, .22); --m-on-primary: #0f172a; --m-accent: #1d8388; }
:root:has(link[href*="/light-win10-blue.css"]) { --m-primary: #117ce8; --m-primary-hover: #0f6bc8; --m-primary-soft: #e7f2fd; --m-primary-ring: rgba(17, 124, 232, .22); --m-on-primary: #ffffff; --m-accent: #117ce8; }
/* ==========================================================================
   Moderna v7: vidrio (estilo iOS) y uso medido del color de la plantilla.
   El desenfoque va en un ::before DETRÁS del contenido: un backdrop-filter en el propio
   contenedor lo volvería contenedor de los position: fixed y rompería el menú ⋮.
   ========================================================================== */
:root {
    --m-on-primary: #fff;
    --m-accent: var(--m-primary);
    --m-glass-bg: rgba(255, 255, 255, .84);
    --m-glass-bg-strong: rgba(255, 255, 255, .96);
    --m-glass-blur: blur(30px) saturate(115%);
    --m-glass-border: rgba(255, 255, 255, .65);
    --m-glass-shadow: 0 12px 40px -14px rgba(15, 23, 42, .32), 0 0 0 .5px rgba(15, 23, 42, .08);
    --m-glass-hi: inset 0 1px 0 rgba(255, 255, 255, .75);
    --m-fill: rgba(118, 118, 128, .12);
    --m-fill-2: rgba(118, 118, 128, .08);
}

/* Botón principal: texto legible sobre cualquier color de plantilla */
:is(body.modern, body.admin-layout) .btn-primary,
:is(body.modern, body.admin-layout) .btn-primary:hover,
:is(body.modern, body.admin-layout) .btn-primary:focus {
    color: var(--m-on-primary) !important;
}

:is(body.modern, body.admin-layout) .btn-primary:hover {
    background-color: var(--m-primary-hover);
    border-color: var(--m-primary-hover);
}

/* --------------------------------------------------------------------------
   Barra lateral de vidrio
   -------------------------------------------------------------------------- */
body.modern #sidebar.sidebar.left {
    background: transparent !important;
    border: 1px solid var(--m-glass-border);
    box-shadow: var(--m-glass-shadow), var(--m-glass-hi) !important;
    isolation: isolate;
}

body.modern #sidebar.sidebar.left::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--m-glass-bg);
    -webkit-backdrop-filter: var(--m-glass-blur);
    backdrop-filter: var(--m-glass-blur);
    pointer-events: none;
}

body.modern #sidebar .sidebar-content,
body.modern #sidebar .tab-content,
body.modern #sidebar .tab-pane,
body.modern #sidebar .tab-pane-body,
body.modern #sidebar .tab-pane-header,
body.modern #sidebar .group,
body.modern #sidebar .group-heading {
    background: transparent !important;
}

/* Controles con relleno translúcido (como los de iOS) */
body.modern #sidebar .nav-tabs.nav-default {
    background: var(--m-fill) !important;
}

body.modern #sidebar .nav-tabs.nav-default > li.active > a,
body.modern #sidebar .nav-tabs.nav-default > li.active > a:hover,
body.modern #sidebar .nav-tabs.nav-default > li.active > a:focus {
    background: rgba(255, 255, 255, .92) !important;
}

body.modern #sidebar .nav-tabs.nav-default > li > a:hover {
    background: rgba(255, 255, 255, .45);
}

body.modern #sidebar .tab-pane-header .form-control {
    background-color: var(--m-fill) !important;
    border-color: transparent;
    box-shadow: none;
}

body.modern #sidebar .tab-pane-header .form-control:hover {
    background-color: rgba(118, 118, 128, .16) !important;
}

body.modern #sidebar .tab-pane-header .form-control:focus {
    background-color: rgba(255, 255, 255, .92) !important;
}

/* Menos color: el botón de lista pasa a neutro; solo "+" queda con el color principal */
body.modern #sidebar .tab-pane-header .input-group-btn > a.btn-primary {
    background: var(--m-fill) !important;
    border-color: transparent !important;
    color: var(--m-ink) !important;
    box-shadow: none !important;
}

body.modern #sidebar .tab-pane-header .input-group-btn > a.btn-primary:hover {
    background: rgba(118, 118, 128, .2) !important;
}

/* Filas sobre el vidrio */
body.modern #sidebar .group-list > li:hover {
    background-color: rgba(255, 255, 255, .5);
}

body.modern #sidebar .group-list > li.active,
body.modern #sidebar .group-list > li.active:hover {
    background-color: color-mix(in srgb, var(--m-primary) 12%, rgba(255, 255, 255, .55));
}

body.modern #sidebar [data-device="speed"] {
    background: var(--m-fill-2) !important;
}

body.modern #sidebar .group-heading .count.label {
    background: color-mix(in srgb, var(--m-primary) 14%, transparent);
    color: var(--m-accent);
}

body.modern #sidebar .btn-group > .btn[class*="icon-gps-"]:hover,
body.modern #sidebar .btn-group.open > .btn[class*="icon-gps-"] {
    background: var(--m-fill);
}

/* --------------------------------------------------------------------------
   Barra superior derecha y controles del mapa
   -------------------------------------------------------------------------- */
body.modern #header .navbar-nav.navbar-right {
    background: var(--m-glass-bg) !important;
    -webkit-backdrop-filter: var(--m-glass-blur) !important;
    backdrop-filter: var(--m-glass-blur) !important;
    border: 1px solid var(--m-glass-border) !important;
    box-shadow: var(--m-glass-shadow), var(--m-glass-hi) !important;
}

body.modern #header .navbar-nav > li > a:hover,
body.modern #header .navbar-nav > .open > a {
    background-color: rgba(255, 255, 255, .55) !important;
}

body.modern #map-controls.map-controls {
    background: transparent !important;
    border: 1px solid var(--m-glass-border);
    box-shadow: var(--m-glass-shadow), var(--m-glass-hi) !important;
    isolation: isolate;
}

body.modern #map-controls.map-controls::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--m-glass-bg);
    -webkit-backdrop-filter: var(--m-glass-blur);
    backdrop-filter: var(--m-glass-blur);
    pointer-events: none;
}

body.modern .map-controls .btn:hover,
body.modern #map-controls.map-controls .btn:hover {
    background-color: rgba(255, 255, 255, .6) !important;
    color: var(--m-ink);
}

/* Capas activas del mapa: color de la plantilla, sin fondo (antes todo azul) */
body.modern #map-controls.map-controls .btn.active {
    color: var(--m-accent);
}

/* --------------------------------------------------------------------------
   Panel inferior: bandeja de vidrio con tarjetas translúcidas
   -------------------------------------------------------------------------- */
body.modern #bottombar #widgets .widgets-content {
    position: relative;
    background: transparent !important;
    border: 1px solid var(--m-glass-border) !important;
    border-bottom: 0 !important;
    box-shadow: var(--m-glass-shadow), var(--m-glass-hi);
    isolation: isolate;
}

body.modern #bottombar #widgets .widgets-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(255, 255, 255, .45);
    -webkit-backdrop-filter: var(--m-glass-blur);
    backdrop-filter: var(--m-glass-blur);
    pointer-events: none;
}

body.modern #widgets .widget {
    background: rgba(255, 255, 255, .62) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 4px 16px -8px rgba(15, 23, 42, .18) !important;
}

body.modern #widgets .widget-heading,
body.modern #widgets .widget-body,
body.modern #widgets .widget-body .table,
body.modern #widgets .widget-body .table > tbody > tr > td {
    background: transparent !important;
}

body.modern #widgets .widget-heading {
    border-bottom-color: rgba(15, 23, 42, .06);
}

body.modern #widgets .widget-title > i,
body.modern #widgets .widget-title > .icon {
    color: var(--m-accent);
}

body.modern #widgets .btn-default {
    background: rgba(255, 255, 255, .7);
    border-color: rgba(15, 23, 42, .08);
}

/* --------------------------------------------------------------------------
   Menús y modales de vidrio
   -------------------------------------------------------------------------- */
:is(body.modern, body.admin-layout) .dropdown-menu {
    background: var(--m-glass-bg-strong) !important;
    -webkit-backdrop-filter: var(--m-glass-blur);
    backdrop-filter: var(--m-glass-blur);
    border: 1px solid var(--m-glass-border) !important;
    box-shadow: var(--m5-pop), var(--m-glass-hi) !important;
}

:is(body.modern, body.admin-layout) .dropdown-menu > li > a:hover,
:is(body.modern, body.admin-layout) .dropdown-menu > li > a:focus {
    background: var(--m-fill);
}

:is(body.modern, body.admin-layout) .dropdown-menu > li > a:hover > i:first-child,
:is(body.modern, body.admin-layout) .dropdown-menu > li > a:hover > .icon:first-child {
    color: var(--m-accent);
}

/* Sin backdrop-filter en el modal: lo volvería contenedor de los menús fijos que tenga dentro.
   El fondo detrás ya está desenfocado (modal-backdrop). */
:is(body.modern, body.admin-layout) .modal-content {
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 32px 64px -20px rgba(15, 23, 42, .45), 0 0 0 1px var(--m-glass-border), var(--m-glass-hi);
}

:is(body.modern, body.admin-layout) .modal-footer {
    background: rgba(248, 250, 252, .6);
}

/* Navegación del administrador con el color de la plantilla */
body.admin-layout .navbar-main .navbar-nav > li.active > a,
body.admin-layout .navbar-main .navbar-nav > li.active > a:hover {
    background: color-mix(in srgb, var(--m-primary) 12%, transparent) !important;
    color: var(--m-accent) !important;
}

body.admin-layout .navbar-main .navbar-nav > li.active > a *,
body.admin-layout .navbar-main .navbar-nav > li.active > a i[class*="icon"] {
    color: var(--m-accent) !important;
}

body.admin-layout .navbar-main .navbar-nav > li.active .badge {
    color: var(--m-on-primary) !important;
}

body.admin-layout .status-cards .status-card.active .status-card-count {
    color: var(--m-accent);
}

/* Navegadores sin backdrop-filter: vidrio más opaco para mantener la lectura */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --m-glass-bg: rgba(255, 255, 255, .94);
        --m-glass-bg-strong: rgba(255, 255, 255, .98);
    }
}
/* ==========================================================================
   Moderna v10: controles de formulario estilo iOS
   - Texto / selectores / fechas: rellenos, sin borde; al enfocar, blanco con anillo del color.
   - Búsquedas: píldora con lupa.
   - Casillas de formularios (modales y administrador): interruptores. En listas y tablas siguen
     siendo casillas cuadradas (ahí sirven para seleccionar).
   ========================================================================== */
:root {
    --m-input-bg: rgba(118, 118, 128, .1);
    --m-input-bg-hover: rgba(118, 118, 128, .15);
}

/* ---- Campos de texto, selectores, áreas y fechas ---- */
:is(body.modern, body.admin-layout) .form-control,
:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle {
    height: 42px;
    padding: 10px 14px;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background-color: var(--m-input-bg) !important;
    box-shadow: none !important;
    color: var(--m-ink);
    font-size: 14px;
    transition: background-color var(--m5-fast) var(--m5-ease), border-color var(--m5-fast) var(--m5-ease),
                box-shadow var(--m5-fast) var(--m5-ease);
}

:is(body.modern, body.admin-layout) .bootstrap-select.form-control {
    height: auto;
    padding: 0;
    background: transparent !important;
}

:is(body.modern, body.admin-layout) .form-control:hover,
:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle:hover {
    background-color: var(--m-input-bg-hover) !important;
}

:is(body.modern, body.admin-layout) .form-control:focus,
:is(body.modern, body.admin-layout) .bootstrap-select.open > .dropdown-toggle,
:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle:focus {
    background-color: #fff !important;
    border-color: var(--m-primary) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--m-primary) 18%, transparent) !important;
    outline: none !important;
}

:is(body.modern, body.admin-layout) .form-control::placeholder {
    color: #8e96a3;
}

:is(body.modern, body.admin-layout) .form-control[disabled],
:is(body.modern, body.admin-layout) .form-control[readonly] {
    background-color: rgba(118, 118, 128, .06) !important;
    color: var(--m-muted);
}

:is(body.modern, body.admin-layout) .has-error .form-control {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .14) !important;
}

:is(body.modern, body.admin-layout) .form-control.input-sm,
:is(body.modern, body.admin-layout) .input-sm,
:is(body.modern, body.admin-layout) .bootstrap-select.input-sm > .dropdown-toggle {
    height: 34px;
    padding: 6px 11px;
    border-radius: 10px !important;
    font-size: 13px;
}

:is(body.modern, body.admin-layout) textarea.form-control {
    height: auto;
    min-height: 90px;
}

:is(body.modern, body.admin-layout) .input-group-addon {
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--m-input-bg);
    color: var(--m-muted);
}

:is(body.modern, body.admin-layout) .input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

:is(body.modern, body.admin-layout) .input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Etiquetas: pequeñas y claras, como en los ajustes de iOS */
:is(body.modern, body.admin-layout) .form-group > label,
:is(body.modern, body.admin-layout) .control-label {
    margin-bottom: 6px;
    color: #3c4452;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .005em;
}

/* ---- Búsquedas: píldora con lupa ---- */
:is(body.modern, body.admin-layout) .form-group.search {
    position: relative;
}

:is(body.modern, body.admin-layout) .form-group.search::before {
    content: "" !important;
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: -8px;
    z-index: 2;
    background: #8e96a3 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='11' cy='11' r='8' /%3E%3Cpath d='m21 21-4.3-4.3' /%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='11' cy='11' r='8' /%3E%3Cpath d='m21 21-4.3-4.3' /%3E%3C/svg%3E") center / contain no-repeat;
    font-family: inherit !important;
    pointer-events: none;
}

:is(body.modern, body.admin-layout) .form-group.search .form-control {
    padding-left: 38px !important;
    border-radius: 999px !important;
}

:is(body.modern, body.admin-layout) .form-group.search:focus-within::before {
    background: var(--m-accent) !important;
}

/* ---- Interruptores (casillas de formularios) ---- */
:is(body.modern .modal, body.admin-layout .modal, body.admin-layout .content form) .checkbox:not(table .checkbox):not(.table-checkbox .checkbox) {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin: 4px 16px 4px 0;
    padding: 0;
}

:is(body.modern .modal, body.admin-layout .modal, body.admin-layout .content form) .checkbox:not(table .checkbox):not(.table-checkbox .checkbox) > label {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin: 0;
    padding-left: 50px !important;
    color: var(--m-ink);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 18px;
    cursor: pointer;
}

/* riel */
:is(body.modern .modal, body.admin-layout .modal, body.admin-layout .content form) .checkbox:not(table .checkbox):not(.table-checkbox .checkbox) > label::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 40px !important;
    height: 24px !important;
    margin: -12px 0 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(120, 120, 128, .24) !important;
    box-shadow: none !important;
    transition: background-color 200ms var(--m5-ease);
}

/* perilla */
:is(body.modern .modal, body.admin-layout .modal, body.admin-layout .content form) .checkbox:not(table .checkbox):not(.table-checkbox .checkbox) > label::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 2px !important;
    top: 50% !important;
    width: 20px !important;
    height: 20px !important;
    margin: -10px 0 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .04) !important;
    font-size: 0 !important;
    color: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
    z-index: 2 !important;          /* el riel (::before) trae z-index 1 del tema */
    transition: left 220ms cubic-bezier(.3, 1.4, .5, 1);
}

:is(body.modern .modal, body.admin-layout .modal, body.admin-layout .content form) .checkbox:not(table .checkbox):not(.table-checkbox .checkbox) > input[type=checkbox]:checked + label::before {
    background: var(--m-primary) !important;
}

:is(body.modern .modal, body.admin-layout .modal, body.admin-layout .content form) .checkbox:not(table .checkbox):not(.table-checkbox .checkbox) > input[type=checkbox]:checked + label::after {
    left: 18px !important;
}

:is(body.modern .modal, body.admin-layout .modal, body.admin-layout .content form) .checkbox:not(table .checkbox):not(.table-checkbox .checkbox) > input[type=checkbox]:disabled + label {
    opacity: .5;
    cursor: not-allowed;
}

/* el input invisible cubre todo el control (riel + texto): clic en cualquier parte cambia el valor */
:is(body.modern .modal, body.admin-layout .modal, body.admin-layout .content form) .checkbox:not(table .checkbox):not(.table-checkbox .checkbox) > input[type=checkbox] {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 3 !important;
    opacity: 0 !important;
    cursor: pointer;
}

:is(body.modern .modal, body.admin-layout .modal, body.admin-layout .content form) .checkbox:not(table .checkbox):not(.table-checkbox .checkbox) > input[type=checkbox]:focus-visible + label::before {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--m-primary) 22%, transparent) !important;
}

/* ---- Casillas de tablas (selección): cuadradas como en la lista del mapa ---- */
body.admin-layout table .checkbox,
body.admin-layout .table-checkbox .checkbox {
    position: relative;
}

body.admin-layout table .checkbox label::before {
    width: 16px !important;
    height: 16px !important;
    box-sizing: border-box;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 5px !important;
    background-color: #fff !important;
}

body.admin-layout table .checkbox input[type=checkbox]:checked + label::before {
    border-color: color-mix(in srgb, var(--m-primary) 45%, #fff) !important;
    background-color: var(--m-primary-soft) !important;
}

body.admin-layout table .checkbox label::after {
    content: "" !important;
    display: none !important;
    z-index: 2 !important;
    width: 16px !important;
    height: 16px !important;
    border: 0 !important;
    background: var(--m-primary) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 6 9 17l-5-5' /%3E%3C/svg%3E") center / 11px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 6 9 17l-5-5' /%3E%3C/svg%3E") center / 11px no-repeat;
}

body.admin-layout table .checkbox input[type=checkbox]:checked + label::after {
    display: block !important;
}

body.admin-layout table .checkbox input[type=checkbox] {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 5 !important;
    opacity: 0 !important;
    cursor: pointer;
}

/* Interruptor dentro de un input-group (p. ej. "Fecha de vencimiento"): celda a la izquierda del campo */
:is(body.modern .modal, body.admin-layout .modal, body.admin-layout .content form) .input-group > .checkbox.input-group-btn {
    display: table-cell !important;
    width: 1%;
    margin: 0 !important;
    padding: 0 12px 0 0 !important;
    vertical-align: middle;
    white-space: nowrap;
}

:is(body.modern .modal, body.admin-layout .modal, body.admin-layout .content form) .input-group > .checkbox.input-group-btn > label {
    width: 40px;
    padding-left: 40px !important;
}

:is(body.modern .modal, body.admin-layout .modal, body.admin-layout .content form) .input-group > .checkbox.input-group-btn + .form-control {
    border-radius: 12px !important;
}
/* ==========================================================================
   Moderna v11: modales con scroll interno, más anchos con pestañas, y tipografía de formulario
   ========================================================================== */

/* ---- Scroll interno: encabezado y botones fijos, el contenido se desplaza ---- */
@media (min-width: 768px) {
    :is(body.modern, body.admin-layout) .modal .modal-dialog {
        margin: 24px auto;
    }

    :is(body.modern, body.admin-layout) .modal .modal-content {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 48px);
    }

    :is(body.modern, body.admin-layout) .modal .modal-content > form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    :is(body.modern, body.admin-layout) .modal .modal-header,
    :is(body.modern, body.admin-layout) .modal .modal-footer {
        flex: none;
    }

    :is(body.modern, body.admin-layout) .modal .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(100, 116, 139, .45) transparent;
    }

    /* pestañas fijas arriba mientras se desplaza el contenido */
    :is(body.modern, body.admin-layout) .modal .modal-body > .nav-tabs {
        position: sticky;
        top: -22px;
        z-index: 4;
        background: #fff;
    }

    /* Modales con pestañas: más anchos para que entren todas */
    :is(body.modern, body.admin-layout) .modal .modal-dialog:not(.modal-sm):has(.nav-tabs) {
        width: min(860px, calc(100vw - 48px));
    }
}

:is(body.modern, body.admin-layout) .modal .modal-body::-webkit-scrollbar {
    width: 10px;
}

:is(body.modern, body.admin-layout) .modal .modal-body::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .4);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

/* ---- Modal blanco sólido (el vidrio lo dejaba grisáceo y sin contraste) ---- */
:is(body.modern, body.admin-layout) .modal-content {
    background: #fff !important;
}

:is(body.modern, body.admin-layout) .modal-footer {
    background: #fff !important;
    border-top: 1px solid rgba(15, 23, 42, .06);
}

/* ---- Tipografía de formularios ---- */
:is(body.modern, body.admin-layout) .modal-header .modal-title {
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -.02em;
}

:is(body.modern, body.admin-layout) .modal .nav-tabs > li > a {
    padding: 14px 12px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.005em;
}

:is(body.modern, body.admin-layout) .modal .nav-tabs > li.active > a {
    font-weight: 600;
}

:is(body.modern, body.admin-layout) .modal-body {
    padding: 22px 24px 24px;
    color: #374151;
    font-size: 14px;
}

:is(body.modern, body.admin-layout) .modal .nav-tabs {
    margin: -22px -24px 22px;
    padding: 0 16px;
}

:is(body.modern, body.admin-layout) .form-group {
    margin-bottom: 18px;
}

:is(body.modern, body.admin-layout) .form-group > label,
:is(body.modern, body.admin-layout) .control-label {
    margin-bottom: 7px;
    color: #4b5563;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.003em;
    line-height: 18px;
}

:is(body.modern, body.admin-layout) .form-control,
:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle {
    height: 44px;
    font-size: 14.5px;
    font-weight: 450;
    letter-spacing: -.005em;
    color: #111827;
}

:is(body.modern, body.admin-layout) .form-control::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* campos rellenos sobre blanco: gris neutro (no azulado) */
:is(body.modern, body.admin-layout) .modal .form-control,
:is(body.modern, body.admin-layout) .modal .bootstrap-select > .dropdown-toggle {
    background-color: #f3f4f6 !important;
}

:is(body.modern, body.admin-layout) .modal .form-control:hover,
:is(body.modern, body.admin-layout) .modal .bootstrap-select > .dropdown-toggle:hover {
    background-color: #eceef1 !important;
}

:is(body.modern, body.admin-layout) .modal .form-control:focus,
:is(body.modern, body.admin-layout) .modal .bootstrap-select.open > .dropdown-toggle {
    background-color: #fff !important;
}

:is(body.modern, body.admin-layout) .modal .checkbox > label {
    color: #1f2937;
    font-size: 14px;
}

:is(body.modern, body.admin-layout) .help-block,
:is(body.modern, body.admin-layout) .modal small {
    color: #6b7280;
    font-size: 12.5px;
}

/* ícono de ayuda (?) junto a las etiquetas: discreto */
:is(body.modern, body.admin-layout) .form-group > label .tooltip-help,
:is(body.modern, body.admin-layout) .form-group > label [data-toggle="tooltip"] {
    opacity: .55;
}

/* botones del pie: un poco más grandes */
:is(body.modern, body.admin-layout) .modal-footer .btn {
    min-height: 40px;
    padding: 9px 18px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
}
/* ==========================================================================
   Moderna v12: selector múltiple siempre abierto (bootstrap-select .multiexpand), p. ej.
   "Usuarios" de un dispositivo. Panel plano con borde, búsqueda + acciones en una fila,
   opciones con casilla cuadrada y paginación en píldoras.
   ========================================================================== */
:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand > .dropdown-menu {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    position: relative !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
}

/* búsqueda */
:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand .bs-searchbox {
    position: relative;
    flex: 1 1 240px;
    padding: 0 !important;
    margin: 0 !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand .bs-searchbox::before,
:is(body.modern, body.admin-layout) .bootstrap-select .bs-searchbox::before {
    content: "" !important;
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    width: 15px !important;
    height: 15px !important;
    margin-top: -7.5px !important;
    z-index: 2;
    background: #9ca3af !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='11' cy='11' r='8' /%3E%3Cpath d='m21 21-4.3-4.3' /%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='11' cy='11' r='8' /%3E%3Cpath d='m21 21-4.3-4.3' /%3E%3C/svg%3E") center / contain no-repeat;
    font-family: inherit !important;
    pointer-events: none;
}

:is(body.modern, body.admin-layout) .bootstrap-select .bs-searchbox .form-control {
    height: 38px !important;
    padding-left: 36px !important;
    border-radius: 999px !important;
    font-size: 13.5px;
}

/* acciones: botones de texto, sin caja */
:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand .bs-actionsbox {
    flex: none;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select .bs-actionsbox .btn-group {
    display: flex !important;
    gap: 4px;
    width: auto !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select .bs-actionsbox .btn {
    width: auto !important;
    min-height: 0 !important;
    height: 36px;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--m-accent) !important;
    font-size: 13px !important;
    font-weight: 600;
}

:is(body.modern, body.admin-layout) .bootstrap-select .bs-actionsbox .btn:hover {
    background: color-mix(in srgb, var(--m-primary) 10%, transparent) !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select .bs-actionsbox .bs-deselect-all {
    color: var(--m-muted) !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select .bs-actionsbox .bs-deselect-all:hover {
    background: rgba(118, 118, 128, .12) !important;
}

/* lista */
:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand ul.inner {
    flex: 1 1 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 10px;
    max-height: 300px !important;
    margin: 0 !important;
    padding: 2px 4px 2px 0 !important;
    border: 0 !important;
    border-top: 1px solid #f1f2f4 !important;
    padding-top: 10px !important;
    box-shadow: none !important;
    background: transparent !important;
    position: static !important;
    animation: none !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand.half ul.inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand ul.inner > li {
    float: none !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand ul.inner > li > a {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 7px 10px 7px 38px !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #1f2937 !important;
    font-size: 13.5px;
    font-weight: 450;
    white-space: nowrap;
}

:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand ul.inner > li > a:hover {
    background: #f3f4f6 !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand ul.inner > li.selected > a {
    background: color-mix(in srgb, var(--m-primary) 8%, #fff) !important;
    color: #111827 !important;
    font-weight: 550;
}

:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand ul.inner > li > a .text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* lo que dibuja la plantilla dentro de la opción se oculta: va la casilla propia */
:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand ul.inner > li > a .check-mark,
:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand ul.inner > li > a > *::before,
:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand ul.inner > li > a > *::after {
    display: none !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand ul.inner > li > a::before {
    content: "" !important;
    position: absolute;
    left: 11px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    box-sizing: border-box;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    transition: background-color var(--m5-fast) var(--m5-ease), border-color var(--m5-fast) var(--m5-ease);
}

:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand ul.inner > li.selected > a::before {
    border-color: var(--m-primary);
    background: var(--m-primary);
}

:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand ul.inner > li.selected > a::after {
    content: "" !important;
    position: absolute;
    left: 11px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: var(--m-on-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 6 9 17l-5-5' /%3E%3C/svg%3E") center / 12px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 6 9 17l-5-5' /%3E%3C/svg%3E") center / 12px no-repeat;
}

/* paginación de la lista */
:is(body.modern, body.admin-layout) .nav-pagination .pagination {
    display: inline-flex;
    gap: 4px;
    margin: 10px 0 0;
}

:is(body.modern, body.admin-layout) .nav-pagination .pagination > li > a,
:is(body.modern, body.admin-layout) .nav-pagination .pagination > li > span {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent;
    color: #4b5563;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}

:is(body.modern, body.admin-layout) .nav-pagination .pagination > li > a:hover {
    background: #f3f4f6;
    color: #111827;
}

:is(body.modern, body.admin-layout) .nav-pagination .pagination > .active > a,
:is(body.modern, body.admin-layout) .nav-pagination .pagination > .active > span {
    background: color-mix(in srgb, var(--m-primary) 12%, #fff) !important;
    color: var(--m-accent) !important;
    font-weight: 650;
}

/* el clearfix de Bootstrap (::before/::after) contaría como celda de la grilla/fila */
:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand ul.inner::before,
:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand ul.inner::after,
:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand > .dropdown-menu::before,
:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand > .dropdown-menu::after {
    display: none !important;
}
/* ==========================================================================
   Moderna v13: controles de formulario, uno por uno.
   Prefijo común: :is(body.modern, body.admin-layout). Usa solo variables de color.
   ========================================================================== */
:root {
    --c-h: 42px;            /* alto estándar */
    --c-h-sm: 34px;
    --c-r: 12px;            /* radio */
    --c-r-sm: 10px;
    --c-bg: #f2f3f5;        /* relleno neutro (sobre blanco) */
    --c-bg-hover: #ebedf0;
    --c-bg-disabled: #f7f8f9;
    --c-text: #111827;
    --c-placeholder: #9ca3af;
    --c-icon: #8b93a1;
    --c-ring: 0 0 0 3px color-mix(in srgb, var(--m-primary) 16%, transparent);
}

/* --------------------------------------------------------------------------
   1. Campos de texto (text, email, number, password, fecha) y textarea
   -------------------------------------------------------------------------- */
:is(body.modern, body.admin-layout) .form-control {
    height: var(--c-h);
    padding: 0 14px;
    border: 1px solid transparent !important;
    border-radius: var(--c-r) !important;
    background-color: var(--c-bg) !important;
    box-shadow: none !important;
    color: var(--c-text);
    font-size: 14px;
    font-weight: 450;
    line-height: calc(var(--c-h) - 2px);
    letter-spacing: -.006em;
    transition: background-color 140ms var(--m5-ease), border-color 140ms var(--m5-ease), box-shadow 140ms var(--m5-ease);
}

:is(body.modern, body.admin-layout) .form-control:hover {
    background-color: var(--c-bg-hover) !important;
}

:is(body.modern, body.admin-layout) .form-control:focus {
    border-color: color-mix(in srgb, var(--m-primary) 70%, transparent) !important;
    background-color: #fff !important;
    box-shadow: var(--c-ring) !important;
    outline: none !important;
}

:is(body.modern, body.admin-layout) .form-control::placeholder {
    color: var(--c-placeholder);
    font-weight: 400;
}

:is(body.modern, body.admin-layout) .form-control[disabled],
:is(body.modern, body.admin-layout) .form-control[readonly] {
    background-color: var(--c-bg-disabled) !important;
    color: #6b7280;
    cursor: not-allowed;
}

:is(body.modern, body.admin-layout) .form-control[readonly]:not([disabled]) {
    cursor: default;
}

:is(body.modern, body.admin-layout) .has-error .form-control,
:is(body.modern, body.admin-layout) .form-control.error {
    border-color: #f87171 !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
}

:is(body.modern, body.admin-layout) .has-error .help-block,
:is(body.modern, body.admin-layout) .has-error .control-label {
    color: #dc2626 !important;
}

:is(body.modern, body.admin-layout) .help-block {
    margin: 6px 2px 0;
    color: #6b7280;
    font-size: 12.5px;
    line-height: 17px;
}

:is(body.modern, body.admin-layout) .form-control.input-sm,
:is(body.modern, body.admin-layout) .input-sm {
    height: var(--c-h-sm);
    padding: 0 11px;
    border-radius: var(--c-r-sm) !important;
    font-size: 13px;
    line-height: calc(var(--c-h-sm) - 2px);
}

:is(body.modern, body.admin-layout) textarea.form-control {
    height: auto;
    min-height: 96px;
    padding: 11px 14px;
    line-height: 1.5;
    resize: vertical;
}

/* número: sin las flechitas del navegador */
:is(body.modern, body.admin-layout) input[type=number].form-control::-webkit-inner-spin-button,
:is(body.modern, body.admin-layout) input[type=number].form-control::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

:is(body.modern, body.admin-layout) input[type=number].form-control {
    -moz-appearance: textfield;
}

/* archivo: botón en píldora en vez del nativo */
:is(body.modern, body.admin-layout) input[type=file].form-control {
    padding: 0 6px 0 5px;
    color: #6b7280;
    font-size: 13px;
    line-height: calc(var(--c-h) - 2px);
    cursor: pointer;
}

:is(body.modern, body.admin-layout) input[type=file].form-control::file-selector-button {
    height: calc(var(--c-h) - 12px);
    margin: 0 10px 0 0;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 0 0 1px rgba(15, 23, 42, .06);
    color: var(--c-text);
    font: 600 13px/1 var(--m-font);
    cursor: pointer;
}

/* fechas: ícono de calendario a la derecha */
:is(body.modern, body.admin-layout) input.form-control:is(.datetimepicker, .datepicker, .daterange, [name*="date"], [name*="fecha"]):not([type=hidden]) {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238b93a1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M8 2v4' /%3E%3Cpath d='M16 2v4' /%3E%3Crect width='18' height='18' x='3' y='4' rx='2' /%3E%3Cpath d='M3 10h18' /%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-size: 16px 16px !important;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   2. Etiquetas
   -------------------------------------------------------------------------- */
:is(body.modern, body.admin-layout) .form-group > label,
:is(body.modern, body.admin-layout) .control-label {
    display: block;
    margin-bottom: 7px;
    color: #374151;
    font-size: 13px;
    font-weight: 550;
    line-height: 18px;
    letter-spacing: -.003em;
}

/* --------------------------------------------------------------------------
   3. Buscadores (.form-group.search): lupa alineada al campo, con o sin etiqueta
   -------------------------------------------------------------------------- */
:is(body.modern, body.admin-layout) .form-group.search {
    position: relative;
}

:is(body.modern, body.admin-layout) .form-group.search::before {
    top: auto !important;
    bottom: calc(var(--c-h) / 2 - 8px) !important;
    margin-top: 0 !important;
    width: 16px !important;
    height: 16px !important;
    background: var(--c-icon) !important;
}

:is(body.modern, body.admin-layout) .form-group.search .form-control {
    padding-left: 40px !important;
    border-radius: 999px !important;
}

/* --------------------------------------------------------------------------
   4. Grupos con complemento: una sola pieza
   -------------------------------------------------------------------------- */
:is(body.modern, body.admin-layout) .input-group {
    border-radius: var(--c-r);
}

:is(body.modern, body.admin-layout) .input-group-addon {
    height: var(--c-h);
    padding: 0 13px;
    border: 1px solid transparent !important;
    border-radius: var(--c-r) !important;
    background: var(--c-bg) !important;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

:is(body.modern, body.admin-layout) .input-group > .input-group-addon:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding-right: 4px;
}

:is(body.modern, body.admin-layout) .input-group > .input-group-addon:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding-left: 4px;
}

:is(body.modern, body.admin-layout) .input-group > .input-group-addon:first-child + .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding-left: 8px;
}

:is(body.modern, body.admin-layout) .input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

:is(body.modern, body.admin-layout) .input-group > .form-control:not(:first-child):not(.checkbox + .form-control) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* foco del campo: el complemento acompaña */
:is(body.modern, body.admin-layout) .input-group:focus-within > .input-group-addon {
    background: #fff !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-primary) 70%, transparent);
}

:is(body.modern, body.admin-layout) .input-group-btn > .btn {
    height: var(--c-h);
    min-height: var(--c-h) !important;
    border-radius: var(--c-r) !important;
}

:is(body.modern, body.admin-layout) .input-group > .input-group-btn:last-child > .btn {
    margin-left: 6px;
}

/* --------------------------------------------------------------------------
   5. Selects (bootstrap-select): botón
   -------------------------------------------------------------------------- */
:is(body.modern, body.admin-layout) .bootstrap-select {
    min-width: 0;
}

:is(body.modern, body.admin-layout) .bootstrap-select.form-control {
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: normal;
}

:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle {
    position: relative;
    display: flex !important;
    align-items: center;
    width: 100%;
    height: var(--c-h);
    min-height: var(--c-h) !important;
    padding: 0 38px 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: var(--c-r) !important;
    background: var(--c-bg) !important;
    box-shadow: none !important;
    color: var(--c-text) !important;
    font-size: 14px !important;
    font-weight: 450 !important;
    text-align: left;
    letter-spacing: -.006em;
    transition: background-color 140ms var(--m5-ease), border-color 140ms var(--m5-ease), box-shadow 140ms var(--m5-ease);
}

:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle:hover {
    background: var(--c-bg-hover) !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select.open > .dropdown-toggle,
:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle:focus {
    border-color: color-mix(in srgb, var(--m-primary) 70%, transparent) !important;
    background: #fff !important;
    box-shadow: var(--c-ring) !important;
    outline: none !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle.bs-placeholder,
:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option {
    color: #6b7280 !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle .filter-option {
    float: none !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle .filter-option .text-muted,
:is(body.modern, body.admin-layout) .bootstrap-select .dropdown-menu li a small {
    margin-left: 6px;
    color: #9ca3af !important;
    font-size: 12px;
}

/* flecha: chevron de Lucide en lugar del triángulo */
:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle .bs-caret {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: -8px !important;
    background: var(--c-icon);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m6 9 6 6 6-6' /%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m6 9 6 6 6-6' /%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 180ms var(--m5-ease), background-color 140ms var(--m5-ease);
}

:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle .bs-caret .caret {
    display: none !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select.open > .dropdown-toggle .bs-caret {
    transform: rotate(180deg);
    background: var(--m-accent);
}

/* "×" para limpiar (filtros del administrador) */
:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle .clear-select {
    position: absolute;
    right: 32px;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #6b7280;
    font-size: 15px;
    line-height: 1;
}

:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle .clear-select:hover {
    background: rgba(15, 23, 42, .08);
    color: var(--c-text);
}

/* selects que se dimensionan por contenido (barras de filtros) */
:is(body.modern, body.admin-layout) :is(.panel-heading, .toolbar, .filters, .table-filters, form.form-inline) .bootstrap-select:not(.multiexpand) {
    width: auto !important;
    min-width: 150px;
}

:is(body.modern, body.admin-layout) .bootstrap-select.disabled > .dropdown-toggle,
:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle.disabled {
    background: var(--c-bg-disabled) !important;
    color: #9ca3af !important;
    cursor: not-allowed;
}

:is(body.modern, body.admin-layout) .bootstrap-select.input-sm > .dropdown-toggle,
:is(body.modern, body.admin-layout) .bootstrap-select > .dropdown-toggle.btn-sm {
    height: var(--c-h-sm);
    min-height: var(--c-h-sm) !important;
    padding: 0 32px 0 11px !important;
    border-radius: var(--c-r-sm) !important;
    font-size: 13px !important;
}

/* --------------------------------------------------------------------------
   6. Selects: menú desplegado
   -------------------------------------------------------------------------- */
:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand) > .dropdown-menu.open {
    min-width: 100%;
    margin-top: 6px !important;
    padding: 6px !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .25), 0 4px 10px -4px rgba(15, 23, 42, .08) !important;
    overflow: hidden;
}

/* buscador dentro del menú: liviano, sin doble anillo */
:is(body.modern, body.admin-layout) .bootstrap-select .bs-searchbox {
    position: relative;
    padding: 2px 2px 6px !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select .bs-searchbox::before {
    top: 50% !important;
    bottom: auto !important;
    left: 13px !important;
    margin-top: -10px !important;
    width: 15px !important;
    height: 15px !important;
    background: var(--c-icon) !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select .bs-searchbox .form-control {
    height: 36px !important;
    padding-left: 34px !important;
    border-radius: 10px !important;
    background: var(--c-bg) !important;
    box-shadow: none !important;
    border-color: transparent !important;
    font-size: 13.5px;
    line-height: 34px;
}

:is(body.modern, body.admin-layout) .bootstrap-select .bs-searchbox .form-control:focus {
    background: var(--c-bg) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* lista */
:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand) .dropdown-menu.inner {
    max-height: 300px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    position: static !important;
    animation: none !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .4) transparent;
}

:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li > a {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 34px 8px 10px !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #1f2937 !important;
    font-size: 13.5px;
    font-weight: 450;
    line-height: 20px;
    white-space: nowrap;
}

:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li > a .text {
    overflow: hidden;
    text-overflow: ellipsis;
}

:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li > a:hover,
:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li > a:focus,
:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li.active > a {
    background: #f3f4f6 !important;
    color: var(--c-text) !important;
    outline: none;
}

/* seleccionado: texto en color + tilde a la derecha */
:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li.selected > a {
    color: var(--m-accent) !important;
    font-weight: 600;
}

:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li > a .check-mark {
    display: none !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li.selected > a::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background: var(--m-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 6 9 17l-5-5' /%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 6 9 17l-5-5' /%3E%3C/svg%3E") center / contain no-repeat;
}

/* múltiple en desplegable: casilla a la izquierda (como el selector expandido) */
:is(body.modern, body.admin-layout) .bootstrap-select.show-tick:not(.multiexpand) .dropdown-menu.inner > li > a,
:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand):has(select[multiple]) .dropdown-menu.inner > li > a {
    padding-left: 38px !important;
    padding-right: 10px !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand):has(select[multiple]) .dropdown-menu.inner > li > a::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    box-sizing: border-box;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
}

:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand):has(select[multiple]) .dropdown-menu.inner > li.selected > a {
    color: var(--c-text) !important;
    font-weight: 500;
}

:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand):has(select[multiple]) .dropdown-menu.inner > li.selected > a::before {
    border-color: var(--m-primary);
    background: var(--m-primary);
}

:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand):has(select[multiple]) .dropdown-menu.inner > li.selected > a::after {
    left: 11px;
    right: auto;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: var(--m-on-primary);
    -webkit-mask-size: 12px;
    mask-size: 12px;
}

/* encabezados de grupo, separadores, sin resultados */
:is(body.modern, body.admin-layout) .bootstrap-select .dropdown-menu .dropdown-header {
    padding: 10px 10px 4px !important;
    color: #9ca3af !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

:is(body.modern, body.admin-layout) .bootstrap-select .dropdown-menu .divider {
    margin: 6px 4px !important;
    background: #f1f2f4 !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select .dropdown-menu .no-results {
    margin: 4px !important;
    padding: 14px 10px !important;
    border-radius: 9px;
    background: transparent !important;
    color: #9ca3af !important;
    font-size: 13px;
    text-align: center;
}

/* acciones del menú múltiple (Seleccionar todo / Deseleccionar todo) */
:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand) .bs-actionsbox {
    padding: 0 2px 6px !important;
}

/* --------------------------------------------------------------------------
   7. Interruptores: casillas con texto (o junto a un campo) fuera de listas/tablas
   -------------------------------------------------------------------------- */
:is(body.modern, body.admin-layout) .checkbox:not(table .checkbox):not(#sidebar .checkbox):not(.dropdown-menu .checkbox):is(:has(> label:not(:empty)), .input-group-btn) {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin: 4px 18px 4px 0;
    padding: 0;
    vertical-align: middle;
}

:is(body.modern, body.admin-layout) .checkbox:not(table .checkbox):not(#sidebar .checkbox):not(.dropdown-menu .checkbox):is(:has(> label:not(:empty)), .input-group-btn) > label {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin: 0;
    padding-left: 50px !important;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
    cursor: pointer;
}

:is(body.modern, body.admin-layout) .checkbox:not(table .checkbox):not(#sidebar .checkbox):not(.dropdown-menu .checkbox):is(:has(> label:not(:empty)), .input-group-btn) > label::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 40px !important;
    height: 24px !important;
    margin: -12px 0 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(120, 120, 128, .22) !important;
    box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .04) !important;
    transition: background-color 200ms var(--m5-ease);
}

:is(body.modern, body.admin-layout) .checkbox:not(table .checkbox):not(#sidebar .checkbox):not(.dropdown-menu .checkbox):is(:has(> label:not(:empty)), .input-group-btn) > label::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 2px !important;
    top: 50% !important;
    width: 20px !important;
    height: 20px !important;
    margin: -10px 0 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .16), 0 0 0 .5px rgba(0, 0, 0, .05) !important;
    font-size: 0 !important;
    color: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
    z-index: 2 !important;
    transition: left 220ms cubic-bezier(.3, 1.4, .5, 1);
}

:is(body.modern, body.admin-layout) .checkbox:not(table .checkbox):not(#sidebar .checkbox):not(.dropdown-menu .checkbox):is(:has(> label:not(:empty)), .input-group-btn) > input[type=checkbox]:checked + label::before {
    background: var(--m-primary) !important;
}

:is(body.modern, body.admin-layout) .checkbox:not(table .checkbox):not(#sidebar .checkbox):not(.dropdown-menu .checkbox):is(:has(> label:not(:empty)), .input-group-btn) > input[type=checkbox]:checked + label::after {
    left: 18px !important;
}

:is(body.modern, body.admin-layout) .checkbox:not(table .checkbox):not(#sidebar .checkbox):not(.dropdown-menu .checkbox):is(:has(> label:not(:empty)), .input-group-btn) > input[type=checkbox]:disabled + label {
    opacity: .45;
    cursor: not-allowed;
}

:is(body.modern, body.admin-layout) .checkbox:not(table .checkbox):not(#sidebar .checkbox):not(.dropdown-menu .checkbox):is(:has(> label:not(:empty)), .input-group-btn) > input[type=checkbox] {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 3 !important;
    opacity: 0 !important;
    cursor: pointer;
}

:is(body.modern, body.admin-layout) .checkbox:not(table .checkbox):not(#sidebar .checkbox):not(.dropdown-menu .checkbox):is(:has(> label:not(:empty)), .input-group-btn) > input[type=checkbox]:focus-visible + label::before {
    box-shadow: var(--c-ring) !important;
}

/* interruptor sin texto, dentro de un input-group: celda a la izquierda */
:is(body.modern, body.admin-layout) .input-group > .checkbox.input-group-btn {
    display: table-cell !important;
    width: 1%;
    margin: 0 !important;
    padding: 0 12px 0 0 !important;
    vertical-align: middle;
}

:is(body.modern, body.admin-layout) .input-group > .checkbox.input-group-btn > label {
    width: 40px;
    padding-left: 40px !important;
}

:is(body.modern, body.admin-layout) .input-group > .checkbox.input-group-btn + .form-control {
    border-radius: var(--c-r) !important;
}

/* --------------------------------------------------------------------------
   8. Radios (.radio > input + label)
   -------------------------------------------------------------------------- */
:is(body.modern, body.admin-layout) .radio:not(table .radio) {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin: 4px 18px 4px 0;
    padding: 0;
    vertical-align: middle;
}

:is(body.modern, body.admin-layout) .radio:not(table .radio) > label {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin: 0;
    padding-left: 28px !important;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
    cursor: pointer;
}

:is(body.modern, body.admin-layout) .radio:not(table .radio) > label::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 20px !important;
    height: 20px !important;
    margin: -10px 0 0 !important;
    box-sizing: border-box;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color 140ms var(--m5-ease), border-width 140ms var(--m5-ease);
}

:is(body.modern, body.admin-layout) .radio:not(table .radio) > label::after {
    display: none !important;
}

:is(body.modern, body.admin-layout) .radio:not(table .radio) > input[type=radio]:checked + label::before {
    border: 6px solid var(--m-primary) !important;
}

:is(body.modern, body.admin-layout) .radio:not(table .radio) > input[type=radio]:disabled + label {
    opacity: .45;
    cursor: not-allowed;
}

:is(body.modern, body.admin-layout) .radio:not(table .radio) > input[type=radio] {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 3 !important;
    opacity: 0 !important;
    cursor: pointer;
}

/* radios dentro de un input-group (p. ej. TCP / UDP): control segmentado */
:is(body.modern, body.admin-layout) .input-group-btn:has(> .radio) {
    padding-left: 8px;
    white-space: nowrap;
}

:is(body.modern, body.admin-layout) .input-group-btn > .radio {
    margin: 0 0 0 10px;
}

/* --------------------------------------------------------------------------
   9. Botones
   -------------------------------------------------------------------------- */
:is(body.modern, body.admin-layout) .btn {
    border-radius: 11px;
    font-weight: 600;
    letter-spacing: -.005em;
    transition: background-color 140ms var(--m5-ease), border-color 140ms var(--m5-ease), color 140ms var(--m5-ease),
                box-shadow 140ms var(--m5-ease), opacity 140ms var(--m5-ease);
}

:is(body.modern, body.admin-layout) :is(.modal-footer, form, .form-group, section) > .btn:not(.btn-xs):not(.btn-sm):not([class*="icon-gps-"]),
:is(body.modern, body.admin-layout) .btn-lg {
    min-height: 40px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
}

:is(body.modern, body.admin-layout) .btn-sm {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 9px;
    font-size: 13px;
}

:is(body.modern, body.admin-layout) .btn-xs {
    min-height: 26px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 12px;
}

:is(body.modern, body.admin-layout) .btn-default {
    border: 0 !important;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 0 0 1px rgba(15, 23, 42, .1) !important;
    color: var(--c-text);
}

:is(body.modern, body.admin-layout) .btn-default:hover,
:is(body.modern, body.admin-layout) .btn-default:focus {
    background: #f7f8f9;
    color: var(--c-text);
}

:is(body.modern, body.admin-layout) .btn-default.active,
:is(body.modern, body.admin-layout) .btn-default:active {
    background: #eef0f3;
}

:is(body.modern, body.admin-layout) .btn-primary {
    border: 0 !important;
    background: var(--m-primary) !important;
    color: var(--m-on-primary) !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--m-primary) 30%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

:is(body.modern, body.admin-layout) .btn-primary:hover,
:is(body.modern, body.admin-layout) .btn-primary:focus {
    background: var(--m-primary-hover) !important;
}

:is(body.modern, body.admin-layout) .btn-danger {
    border: 0 !important;
    background: #ef4444 !important;
    box-shadow: 0 1px 2px rgba(239, 68, 68, .3), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

:is(body.modern, body.admin-layout) .btn-danger:hover {
    background: #dc2626 !important;
}

:is(body.modern, body.admin-layout) .btn-success {
    border: 0 !important;
    background: #16a34a !important;
}

:is(body.modern, body.admin-layout) .btn-warning {
    border: 0 !important;
    background: #f59e0b !important;
    color: #1f2937 !important;
}

:is(body.modern, body.admin-layout) .btn-info {
    border: 0 !important;
    background: #0ea5e9 !important;
}

:is(body.modern, body.admin-layout) .btn-link {
    color: var(--m-accent);
    font-weight: 600;
}

:is(body.modern, body.admin-layout) .btn[disabled],
:is(body.modern, body.admin-layout) .btn.disabled {
    opacity: .45;
    box-shadow: none !important;
    cursor: not-allowed;
}

:is(body.modern, body.admin-layout) .btn:focus-visible {
    outline: none;
    box-shadow: var(--c-ring) !important;
}

/* grupos de botones: se tocan sin doble borde */
:is(body.modern, body.admin-layout) .btn-group > .btn-default + .btn-default {
    margin-left: 0;
}

:is(body.modern, body.admin-layout) .btn-group > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

:is(body.modern, body.admin-layout) .btn-group > .btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

:is(body.modern, body.admin-layout) .btn-group > .btn:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* --------------------------------------------------------------------------
   10. Calendarios (datetimepicker / datepicker / daterangepicker)
   -------------------------------------------------------------------------- */
:is(body.modern, body.admin-layout) :is(.datetimepicker.dropdown-menu, .datepicker.dropdown-menu, .daterangepicker) {
    padding: 10px !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 18px 44px -14px rgba(15, 23, 42, .3), 0 4px 10px -4px rgba(15, 23, 42, .08) !important;
    font-family: var(--m-font);
    font-size: 13px;
}

:is(body.modern, body.admin-layout) :is(.datetimepicker.dropdown-menu, .datepicker.dropdown-menu, .daterangepicker)::before,
:is(body.modern, body.admin-layout) :is(.datetimepicker.dropdown-menu, .datepicker.dropdown-menu, .daterangepicker)::after {
    display: none !important;
}

:is(body.modern, body.admin-layout) :is(.datetimepicker, .datepicker, .daterangepicker) table th,
:is(body.modern, body.admin-layout) :is(.datetimepicker, .datepicker, .daterangepicker) table td {
    width: 34px;
    height: 34px;
    border: 0 !important;
    border-radius: 9px !important;
    font-weight: 500;
}

:is(body.modern, body.admin-layout) :is(.datetimepicker, .datepicker, .daterangepicker) table thead th {
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}

:is(body.modern, body.admin-layout) :is(.datetimepicker, .datepicker, .daterangepicker) table :is(td, th.prev, th.next, th.switch, .datepicker-switch):hover,
:is(body.modern, body.admin-layout) .daterangepicker td.available:hover {
    background: #f3f4f6 !important;
}

:is(body.modern, body.admin-layout) :is(.datetimepicker, .datepicker) table td :is(span, .day).active,
:is(body.modern, body.admin-layout) :is(.datetimepicker, .datepicker) table td.active,
:is(body.modern, body.admin-layout) :is(.datetimepicker, .datepicker) table td span.active,
:is(body.modern, body.admin-layout) .daterangepicker td.active,
:is(body.modern, body.admin-layout) .daterangepicker td.active:hover {
    background: var(--m-primary) !important;
    background-image: none !important;
    color: var(--m-on-primary) !important;
    text-shadow: none !important;
}

:is(body.modern, body.admin-layout) .daterangepicker td.in-range {
    background: color-mix(in srgb, var(--m-primary) 12%, #fff) !important;
    color: var(--c-text) !important;
    border-radius: 0 !important;
}

:is(body.modern, body.admin-layout) :is(.datetimepicker, .datepicker) table td.today,
:is(body.modern, body.admin-layout) :is(.datetimepicker, .datepicker) table td.today:hover {
    background: transparent !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--m-primary) 55%, transparent);
    color: var(--m-accent) !important;
}

:is(body.modern, body.admin-layout) :is(.datetimepicker, .datepicker) table td :is(.old, .new),
:is(body.modern, body.admin-layout) :is(.datetimepicker, .datepicker) table td:is(.old, .new),
:is(body.modern, body.admin-layout) .daterangepicker td.off {
    color: #c4c9d1 !important;
}

:is(body.modern, body.admin-layout) :is(.datetimepicker, .datepicker) table td span {
    border-radius: 9px !important;
}

:is(body.modern, body.admin-layout) .daterangepicker .ranges li {
    border-radius: 9px;
    font-size: 13px;
}

:is(body.modern, body.admin-layout) .daterangepicker .ranges li.active {
    background: var(--m-primary) !important;
    color: var(--m-on-primary) !important;
}

:is(body.modern, body.admin-layout) .daterangepicker select {
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: var(--c-bg);
}

/* el selector expandido (.multiexpand) no muestra su botón: solo el panel */
:is(body.modern, body.admin-layout) .bootstrap-select.multiexpand > .dropdown-toggle {
    display: none !important;
}

/* lo que dibuja la plantilla dentro de cada opción (círculos/tildes) se oculta: van los propios */
:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li > a > *::before,
:is(body.modern, body.admin-layout) .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li > a > *::after {
    display: none !important;
}

/* encabezados de grupo (optgroup): sin franja ni círculo de la plantilla */
:is(body.modern, body.admin-layout) .bootstrap-select .dropdown-menu.inner > li.dropdown-header {
    margin: 4px 0 0;
    background: transparent !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select .dropdown-menu.inner > li.dropdown-header::before,
:is(body.modern, body.admin-layout) .bootstrap-select .dropdown-menu.inner > li.dropdown-header::after,
:is(body.modern, body.admin-layout) .bootstrap-select .dropdown-menu.inner > li.dropdown-header > *::before,
:is(body.modern, body.admin-layout) .bootstrap-select .dropdown-menu.inner > li.dropdown-header > *::after {
    display: none !important;
}

:is(body.modern, body.admin-layout) .bootstrap-select .dropdown-menu.inner > li > a.opt {
    padding-left: 18px !important;
}
/* <<< clonador: diseno moderno v5 */