#header{display:none!important;height:0!important}#sidebar{display:none!important}html{font-size:100%!important}body,html{height:100%!important;width:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;color:var(--text-color,#0f0f0f)!important}/*body{zoom:.9!important}*/#mapWrap{position:fixed!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;z-index:1!important}#map{position:absolute!important;top:0!important;bottom:0!important;left:0!important;right:0!important}.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover,.nav-tabs>li>a,.nav-tabs>li>a:focus,.nav-tabs>li>a:hover{color:var(--text-color,#0f0f0f)!important}.btn-default,.btn-default.active,.btn-default:active,.btn-default:focus,.btn-default:hover,fieldset[disabled] .btn-default{color:var(--text-color,#0f0f0f)!important}.btn-primary,.btn-primary.active,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.open>.dropdown-toggle.btn-primary{color:#fff!important}.btn-primary *,.btn-primary.active *,.btn-primary:active *,.btn-primary:focus *,.btn-primary:hover *{color:#fff!important}.leaf-device-marker .name i{background:var(--nav-primary,#1a73e8)!important;border:1px solid var(--nav-primary,#1a73e8)!important;color:#fff!important;font-weight:700!important}.leaf-device-marker .name:after{border-top-color:var(--nav-primary,#1a73e8)!important}.leaf-device-marker .name:before{border-top-color:var(--nav-primary,#1a73e8)!important}#nav-icons{position:fixed!important;left:6px!important;top:0!important;bottom:0!important;width:30px!important;height:100%!important;background:var(--nav-primary,#1a73e8)!important;z-index:1000!important;display:flex!important;flex-direction:column!important;align-items:center!important;border-radius:0px!important;box-shadow:2px 0 8px rgba(0,0,0,.2)!important;overflow:hidden!important;pointer-events:all!important;transition:transform .3s ease!important}#nav-icons.nav-hidden{transform:translateX(-66px)!important}.nav-icon{width:100%!important;padding:5px 0!important;text-align:center!important;cursor:pointer!important;color:rgba(255,255,255,1)!important;text-shadow:0 1px 3px rgba(0,0,0,.4)!important;transition:all .2s ease!important;display:flex!important;flex-direction:column!important;align-items:center!important;border-left:2px solid transparent!important;margin:1px 0!important;position:relative!important;z-index:1001!important;pointer-events:all!important}.nav-icon:hover{color:var(--nav-on-primary-muted,rgba(255,255,255,.75))!important;background:0 0!important;border-left-color:transparent!important}.nav-icon:focus *,.nav-icon:hover *{color:inherit!important}.nav-icon.active{color:var(--nav-on-primary,#fff)!important;background:var(--nav-icon-active-bg,rgba(255,255,255,.2))!important;border-left-color:var(--nav-on-primary,#fff)!important}.nav-icon .icon{font-size:13px!important;display:block!important;margin-bottom:2px!important;color:inherit!important;text-shadow:0 1px 3px rgba(0,0,0,.4)!important}.nav-label{font-size:7px!important;text-transform:uppercase!important;letter-spacing:.5px!important;display:none!important;color:rgba(255,255,255,1)!important;text-shadow:0 1px 3px rgba(0,0,0,.4)!important;font-weight:500!important}#nav-restore-tab{position:fixed!important;left:0!important;top:8px!important;width:24px!important;height:36px!important;background:var(--nav-primary,#1a73e8)!important;color:#fff!important;display:none!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;border-radius:0px!important;z-index:1100!important;font-size:14px!important;box-shadow:2px 0 8px rgba(0,0,0,.3)!important}#nav-panel{position:fixed!important;left:66px!important;top:0!important;width:0!important;max-height:100vh!important;height:auto!important;background:transparent!important;z-index:999!important;border-radius:0px!important;box-shadow:none!important;transition:width .3s ease,transform .3s ease!important;overflow:visible!important;pointer-events:none!important}#nav-panel.nav-hidden{transform:translateX(-66px)!important}#nav-panel.open{width:360px!important;overflow:visible!important;pointer-events:none!important}#nav-panel:not(.open) .nav-panel-section{display:none!important}.nav-panel-section{display:none;flex-direction:column!important;height:auto!important}.nav-panel-section.active{display:flex!important;pointer-events:all!important;height:auto!important;overflow:hidden!important;background:var(--panel-bg,#fff)!important;box-shadow:0 4px 20px rgba(0,0,0,.2)!important;border-bottom-right-radius:12px!important;border-bottom-left-radius:12px!important}.nav-panel-section.active *{pointer-events:all!important}.nav-panel-header{padding:10px 16px!important;font-size:13px!important;font-weight:600!important;color:#fff!important;border-bottom:none!important;background:var(--nav-primary,#1a73e8)!important;text-transform:uppercase!important;letter-spacing:.8px!important;border-radius:0px!important}.nav-panel-header *{color:#fff!important}.nav-panel-body{padding:8px!important;overflow-y:visible!important;height:auto!important;max-height:none!important}.nav-panel-link{display:flex!important;align-items:center!important;padding:11px 14px!important;color:var(--text-color,#1a1a1a)!important;border-radius:0px!important;margin-bottom:3px!important;text-decoration:none!important;transition:all .2s ease!important;font-size:13px!important;cursor:pointer!important}.nav-panel-link:hover{background:0 0!important;color:var(--text-color,#1a1a1a)!important;text-decoration:none!important}.nav-panel-link:hover .icon{color:var(--nav-primary,#1a73e8)!important}.nav-panel-link .icon{margin-right:12px!important;font-size:15px!important;color:var(--nav-primary,#1a73e8)!important}#panel-theme .nav-panel-body{overflow-y:auto!important;max-height:none!important}#nav-panel,#nav-panel .nav-panel-body,#nav-panel .nav-panel-link,#nav-panel .nav-tabs>li>a,#nav-panel .tab-content,#panel-devices,#panel-devices .nav-tabs>li>a,#panel-devices .sidebar-content,#panel-devices .sidebar-content *{font-weight:600!important;letter-spacing:.2px!important}#panel-devices{height:auto!important;display:none!important}#panel-devices.active{display:flex!important;flex-direction:column!important;height:auto!important;border-bottom-right-radius:12px!important;border-bottom-left-radius:12px!important;overflow:hidden!important}#panel-devices .sidebar-content{display:flex!important;flex-direction:column!important;height:auto!important;overflow:visible!important}#panel-devices .nav-tabs{background:#f8f9ff!important;border-bottom:1px solid #e8eaf6!important;flex-shrink:0!important}#panel-devices .tab-content{font-size:12px!important;flex:1!important;overflow:visible!important;min-height:0!important}#panel-devices .tab-content button,#panel-devices .tab-content input,#panel-devices .tab-content select{font-size:12px!important;padding:4px 8px!important;height:auto!important}#panel-devices .tab-pane-header{flex-shrink:0!important}#panel-devices .tab-content .form-group{margin-bottom:6px!important;display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:4px!important}#panel-devices .tab-content label{font-size:11px!important;margin-bottom:2px!important}#panel-devices .tab-content .btn{padding:5px 10px!important;font-size:12px!important}#panel-devices .tab-content .form-group .control-label,#panel-devices .tab-content .form-group label{width:55px!important;min-width:55px!important;font-size:11px!important;margin:0!important}#panel-devices .tab-content .form-group input[type=text],#panel-devices .tab-content .form-group select{flex:1!important;min-width:0!important;font-size:11px!important;padding:3px 6px!important;height:28px!important}#panel-devices .tab-content .btn-history,#panel-devices .tab-content .btn-primary,#panel-devices .tab-content button[type=submit]{margin-bottom:5px!important;padding-left:15px!important;padding-right:15px!important;border-radius:0px!important;display:block!important;margin-left:auto!important;margin-right:auto!important;width:auto!important}#panel-devices .sidebar-content *{pointer-events:all!important}#panel-devices .sidebar-content .date,#panel-devices .sidebar-content .device-time,#panel-devices .sidebar-content .text-muted,#panel-devices .sidebar-content .time,#panel-devices .sidebar-content small{color:var(--text-muted,#555)!important;font-weight:500!important}#panel-devices #objects_tab #device_add_btn .btn.btn-primary,#panel-devices #objects_tab #device_add_btn .btn.btn-primary .icon{color:#fff!important}#panel-devices .btn.icon.options,#panel-devices .dropdown,#panel-devices .dropdown-menu,#panel-devices .dropdown-toggle{pointer-events:all!important;z-index:9999!important}#panel-devices .btn-group.droparrow .dropdown-menu{background-color:var(--panel-bg,#fff)!important;border-color:rgba(0,0,0,.12)!important}#panel-devices .btn-group.droparrow .dropdown-menu>li>a,#panel-devices .btn-group.droparrow .dropdown-menu>li>a *{color:var(--text-color,#1a1a1a)!important}#panel-devices .btn-group.droparrow .dropdown-menu>li>a:focus,#panel-devices .btn-group.droparrow .dropdown-menu>li>a:hover{background-color:var(--nav-hover-bg,#1a73e8)!important;color:var(--nav-hover-text,#ffffff)!important}#panel-devices .btn-group.droparrow .dropdown-menu>li>a:focus *,#panel-devices .btn-group.droparrow .dropdown-menu>li>a:hover *{color:var(--nav-hover-text,#ffffff)!important}#map-controls{position:fixed!important;right:8px!important;top:8px!important;z-index:1000!important;display:flex!important;flex-direction:column!important;align-items:center!important;width:55px!important;background:0 0!important;border-radius:0px!important;box-shadow:none!important;overflow:visible!important;padding:0!important;gap:0!important}#map-controls>div{width:100%!important;margin:0!important;padding:0!important}#map-controls .btn-group-vertical{background:#fff!important;border-radius:0px!important;box-shadow:0 4px 15px rgba(0,0,0,.3)!important;width:100%!important;overflow:hidden!important;margin-bottom:4px!important}#map-controls .btn,#map-controls label.btn{background:#fff!important;border:none!important;border-radius:0px!important;color:var(--nav-primary,#1a73e8)!important;padding:8px 0!important;width:55px!important;text-align:center!important;transition:all .2s ease!important;box-shadow:none!important;display:flex!important;justify-content:center!important;align-items:center!important;margin:0!important}#map-controls .btn .icon,#map-controls label.btn .icon{color:var(--nav-primary,#1a73e8)!important;font-size:15px!important}#map-controls .btn.active,#map-controls label.btn.active{background:var(--nav-primary,#1a73e8)!important;color:#fff!important}#map-controls .btn.active .icon,#map-controls label.btn.active .icon{color:#fff!important}#widgetsbar{position:fixed!important;left:66px!important;right:0!important;bottom:0!important;z-index:998!important;pointer-events:none!important}#widgetsbar #widgets{pointer-events:all!important}#widgetsbar #widgets .widget-body,#widgetsbar #widgets .widget-body *{color:var(--text-color,#0f0f0f)!important}#widgets .widget-heading,#widgets .widget>.widget-heading{background-color:var(--nav-primary,#1a73e8)!important;color:#fff!important;padding:3px 10px!important;height:26px!important;min-height:26px!important;max-height:26px!important;display:flex!important;align-items:center!important;box-sizing:border-box!important;overflow:hidden!important}#widgets .widget-heading .widget-title{display:flex!important;align-items:center!important;width:100%!important;color:#fff!important;font-weight:600!important}#widgets .widget-heading .widget-actions{order:999!important;margin-left:auto!important;display:flex!important;align-items:center!important;gap:4px!important}#widgets .widget-heading .btn,#widgets .widget-heading .btn.icon,#widgets .widget-heading a.btn{background:transparent!important;background-color:transparent!important;border:none!important;color:#fff!important;box-shadow:none!important;padding:2px 5px!important;opacity:.9!important}#widgets .widget-heading .btn:hover,#widgets .widget-heading .btn.icon:hover,#widgets .widget-heading a.btn:hover{opacity:1!important;background:rgba(255,255,255,.15)!important}#widgets .widget-heading .btn *,#widgets .widget-heading .btn.icon *,#widgets .widget-heading a.btn *,#widgets .widget-heading i,#widgets .widget-heading .icon{color:#fff!important}.graph-1-wrap{width:100%!important}.control-label,.form-control-feedback,.help-block,.hint,.modal-body .text-muted,.modal-body label,.modal-body small,.text-muted,label,small{color:var(--muted-text,#777)!important}.modal-body,.modal-content,.panel-body,.tab-content{color:var(--gray-text,#555)!important}.control-label,.form-section-title,.label-title,.panel-subtitle,.sub-title,.subtitle,.text-subtitle,h2,h3,h4,h5,h6{font-weight:600!important;letter-spacing:.3px!important}.dropdown-menu>li>a:focus:not(.btn),.dropdown-menu>li>a:hover:not(.btn),.group-list>li:hover,.list-group-item:hover,.nav>li>a:focus:not(.btn),.nav>li>a:hover:not(.btn),.pagination>li>a:focus:not(.btn),.pagination>li>a:hover:not(.btn),.pagination>li>span:focus,.pagination>li>span:hover,.table-hover>tbody>tr:hover>td,.table-hover>tbody>tr:hover>th{background-color:var(--nav-hover-bg,#1a73e8)!important;background:var(--nav-hover-bg,#1a73e8)!important;color:var(--nav-hover-text,#ffffff)!important}.dropdown-menu>li>a:focus:not(.btn) *,.dropdown-menu>li>a:hover:not(.btn) *,.group-list>li:hover *,.list-group-item:hover *,.nav>li>a:focus:not(.btn) *,.nav>li>a:hover:not(.btn) *,.pagination>li>a:focus:not(.btn) *,.pagination>li>a:hover:not(.btn) *,.pagination>li>span:focus *,.pagination>li>span:hover *,.table-hover>tbody>tr:hover>td *,.table-hover>tbody>tr:hover>th *{color:var(--nav-hover-text,#ffffff)!important}#nav-panel .dropdown-menu>li>a:focus:not(.btn),#nav-panel .dropdown-menu>li>a:hover:not(.btn),#nav-panel .list-group-item:hover,#nav-panel .nav>li>a:focus:not(.btn),#nav-panel .nav>li>a:hover:not(.btn),#nav-panel .pagination>li>a:focus:not(.btn),#nav-panel .pagination>li>a:hover:not(.btn),#nav-panel .pagination>li>span:focus,#nav-panel .pagination>li>span:hover{background-color:transparent!important;background:0 0!important;color:inherit!important}#nav-panel .dropdown-menu>li>a:focus:not(.btn) *,#nav-panel .dropdown-menu>li>a:hover:not(.btn) *,#nav-panel .list-group-item:hover *,#nav-panel .nav>li>a:focus:not(.btn) *,#nav-panel .nav>li>a:hover:not(.btn) *,#nav-panel .pagination>li>a:focus:not(.btn) *,#nav-panel .pagination>li>a:hover:not(.btn) *,#nav-panel .pagination>li>span:focus *,#nav-panel .pagination>li>span:hover *{color:inherit!important}#panel-devices .group-list>li:hover,#panel-devices .group-list>li:hover>.checkbox,#panel-devices .group-list>li:hover>.details,#panel-devices .group-list>li:hover>.name{background-color:var(--nav-hover-bg,#1a73e8)!important;background:var(--nav-hover-bg,#1a73e8)!important;color:var(--nav-hover-text,#ffffff)!important}#panel-devices .group-list>li:hover *,#panel-devices .group-list>li:hover>.checkbox *,#panel-devices .group-list>li:hover>.details *,#panel-devices .group-list>li:hover>.name *{color:var(--nav-hover-text,#ffffff)!important}.btn-group .dropdown-menu[style*="position: fixed"],
.btn-group .dropdown-menu[style*="position:fixed"],
.btn-group .dropdown-menu[style*="position: absolute"],
.btn-group .dropdown-menu[style*="position:absolute"] {
    background-color: #fff !important;
    color: #1a1a1a !important;
}

.btn-group .dropdown-menu>li>a {
    color: #1a1a1a !important;
    background-color: transparent !important;
}

.bootstrap-select.btn-group .dropdown-menu.inner>li>a {
    color: #1a1a1a !important;
    background-color: #ffffff !important;
}

/* Items seleccionados: fondo azul + texto blanco para que sean visualmente distintos */
.bootstrap-select.btn-group .dropdown-menu.inner>li.selected>a,
.bootstrap-select.btn-group .dropdown-menu.inner>li.active>a {
    background-color: var(--nav-primary, #1a73e8) !important;
    color: var(--nav-on-primary, #ffffff) !important;
}

.bootstrap-select.btn-group .dropdown-menu.inner>li.selected>a *,
.bootstrap-select.btn-group .dropdown-menu.inner>li.active>a * {
    color: var(--nav-on-primary, #ffffff) !important;
}

.bootstrap-select.btn-group .dropdown-menu.inner>li>a:hover,
.bootstrap-select.btn-group .dropdown-menu.inner>li>a:focus,
.bootstrap-select.btn-group .dropdown-menu.inner>li.selected>a:hover,
.bootstrap-select.btn-group .dropdown-menu.inner>li.selected>a:focus {
    background-color: var(--nav-hover-bg, #1a73e8) !important;
    color: var(--nav-hover-text, #ffffff) !important;
}

.bootstrap-select.btn-group .dropdown-menu.inner>li>a:hover *,
.bootstrap-select.btn-group .dropdown-menu.inner>li>a:focus *,
.bootstrap-select.btn-group .dropdown-menu.inner>li.selected>a:hover *,
.bootstrap-select.btn-group .dropdown-menu.inner>li.selected>a:focus * {
    color: var(--nav-hover-text, #ffffff) !important;
}

.bootstrap-select.form-control.multiexpand > .dropdown-menu,
.bootstrap-select.form-control.multiexpand .dropdown-menu.inner,
.bootstrap-select.form-control.multiexpand .bs-searchbox,
.bootstrap-select.form-control.multiexpand .bs-actionsbox {
    background-color: #ffffff !important;
}

/* Hover: especificidad >= 132 para superar el reset de #nav-panel */
#panel-devices .dropdown-menu.inner > li > a:hover,
#panel-devices .dropdown-menu.inner > li:hover > a,
#panel-devices .dropdown-menu.inner > li > a:focus,
#panel-devices .dropdown-menu.inner > li:focus > a,
#panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li > a:hover,
#panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li:hover > a,
#panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li > a:focus,
#panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li:focus > a {
    background-color: var(--nav-hover-bg, #1a73e8) !important;
    color: var(--nav-hover-text, #ffffff) !important;
    cursor: pointer !important;
}

#panel-devices .dropdown-menu.inner > li > a:hover *,
#panel-devices .dropdown-menu.inner > li:hover > a *,
#panel-devices .dropdown-menu.inner > li > a:focus *,
#panel-devices .dropdown-menu.inner > li:focus > a *,
#panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li > a:hover *,
#panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li:hover > a *,
#panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li > a:focus *,
#panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li:focus > a * {
    color: var(--nav-hover-text, #ffffff) !important;
}

/* Seleccionado/activo */
#panel-devices .dropdown-menu.inner > li.selected > a,
#panel-devices .dropdown-menu.inner > li.active > a,
#panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li.selected > a,
#panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li.active > a {
    background-color: var(--nav-primary, #1a73e8) !important;
    color: #ffffff !important;
}

#panel-devices .dropdown-menu.inner > li.selected > a *,
#panel-devices .dropdown-menu.inner > li.active > a *,
#panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li.selected > a *,
#panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li.active > a *,
#panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li.selected > a span.text,
#panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li.active > a span.text {
    color: #ffffff !important;
}

/* =====================================================================
   SUB-VIEW: ocultar nav de dispositivos cuando geocerca/ruta/POI activo
   ===================================================================== */

/* Ocultar tabs Dispositivos/Eventos/Historial en sub-vistas */
#panel-devices.sub-view-active .sidebar-content > .nav.nav-tabs {
    display: none !important;
}

/* Tab-content: overflow visible para que los dropdowns no queden recortados */
#panel-devices.sub-view-active .sidebar-content > .tab-content {
    flex: 1 1 auto !important;
    overflow: visible !important;
    min-height: 0 !important;
}

/* El tab-pane activo en sub-view usa altura automática (crece con el contenido) */
#panel-devices.sub-view-active .tab-content > .tab-pane.active {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
}

/* El cuerpo del pane puede scrollear sin cortar dropdowns */
#panel-devices.sub-view-active .tab-pane.active .tab-pane-body {
    overflow-y: auto !important;
    overflow-x: visible !important;
    max-height: calc(100vh - 160px) !important;
}


/* ============================================================
   MODALES: dropdowns abiertos deben aparecer sobre todo el contenido
   ============================================================ */

/* El modal-body no debe crear contexto de apilado que retenga los dropdowns */
.modal-body {
    overflow: visible !important;
}

/* ============================================================
   GEOCERCAS: centrado de "no hay geocercas" y dropdown de grupos
   ============================================================ */

#geofencing_tab .no-results,
#geofencing_tab td.no-data {
    text-align: center !important;
}

#geofencing_create .geofence-group-field,
#geofencing_edit .geofence-group-field {
    margin-bottom: 50px !important;
}

/* Reducir altura de selects "Tipo" y "Grupo" en panel de geocercas
   (se cargan en tab-pane-body, fuera del scope de tab-content) */
#geofencing_create .tab-pane-body .form-group select,
#geofencing_edit .tab-pane-body .form-group select,
#geofencing_create .tab-pane-body .form-group .bootstrap-select,
#geofencing_edit .tab-pane-body .form-group .bootstrap-select,
#geofencing_create .tab-pane-body .form-group .bootstrap-select > .dropdown-toggle,
#geofencing_edit .tab-pane-body .form-group .bootstrap-select > .dropdown-toggle {
    height: 30px !important;
    min-height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 30px !important;
}
#geofencing_create .tab-pane-body .form-group .bootstrap-select .filter-option,
#geofencing_edit .tab-pane-body .form-group .bootstrap-select .filter-option {
    line-height: 30px !important;
}

/* Ancho casi total del panel: tab-pane-body con 5px de padding-left, 0 a la derecha,
   y form-control / bootstrap-select / inputs ocupando 100% del espacio disponible */
#geofencing_create .tab-pane-body,
#geofencing_edit .tab-pane-body {
    padding-left: 5px !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#geofencing_create .tab-pane-body .form-group,
#geofencing_edit .tab-pane-body .form-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}
#geofencing_create .tab-pane-body .form-group > .form-control,
#geofencing_edit .tab-pane-body .form-group > .form-control,
#geofencing_create .tab-pane-body .form-group > select,
#geofencing_edit .tab-pane-body .form-group > select,
#geofencing_create .tab-pane-body .form-group > .bootstrap-select,
#geofencing_edit .tab-pane-body .form-group > .bootstrap-select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* El .input-group del campo "Grupo" + botón "+" también full width */
#geofencing_create .tab-pane-body .form-group .input-group,
#geofencing_edit .tab-pane-body .form-group .input-group {
    width: 100% !important;
    max-width: 100% !important;
}

#geofencing_create .bootstrap-select.open,
#geofencing_edit .bootstrap-select.open,
#geofencing_create .select2-container--open,
#geofencing_edit .select2-container--open {
    z-index: 20050 !important;
}

#geofencing_create .bootstrap-select.open .dropdown-menu,
#geofencing_edit .bootstrap-select.open .dropdown-menu,
#geofencing_create .select2-container--open .select2-dropdown,
#geofencing_edit .select2-container--open .select2-dropdown {
    z-index: 20051 !important;
}

/* Dropdowns abiertos dentro de modales: z-index mayor que colorpicker (2500) */
.modal .bootstrap-select.open .dropdown-menu,
.modal .open > .dropdown-menu,
.modal .btn-group.open .dropdown-menu {
    z-index: 9999 !important;
}

.modal#reports_create .modal-dialog {
    max-width: 980px !important;
    width: 96% !important;
}

.modal#reports_create .tab-content,
.modal#reports_create .tab-pane {
    overflow: visible !important;
}

/* ══ Excepción: Configuración general — más ancha por sus muchas pestañas ══ */
.modal#my_account_settings_edit .modal-dialog {
    max-width: 1140px !important;
    width: 98% !important;
}
.modal#my_account_settings_edit .nav.nav-tabs > li > a {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* ══ Excepción: tabla de alertas — columnas anchas ══════════════════════════ */
#alerts_create .table-weektime tbody th,
#alerts_edit .table-weektime tbody th {
    min-width: 140px;
}
#alerts_create .table-weektime tbody th .btn,
#alerts_edit .table-weektime tbody th .btn {
    white-space: nowrap;
}

/* ══ Excepción: selección de idioma — grid especial ════════════════════════ */
.modal#language-selection .lang-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.modal#language-selection .lang-item {
    margin: 0;
}
.modal#language-selection .lang-item .btn {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.modal#language-selection .lang-item img {
    width: 28px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
}

#reports_create label.control-label {
    position: relative !important;
    z-index: 20001 !important;
    background: var(--panel-bg, #fff) !important;
    padding-right: 10px !important;
    margin-top: 2px !important;
}

#reports_create .bootstrap-select {
    position: relative !important;
    z-index: 1 !important;
}

#reports_create .bootstrap-select.open {
    z-index: 999900 !important;
}

#reports_create .bootstrap-select.open .dropdown-menu {
    z-index: 999901 !important;
    background-color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Asegurar que el dropdown del modal no sea recortado por el modal-content */
.modal#reports_create .modal-content {
    overflow: visible !important;
}

#panel-devices .sidebar-content .panel-heading,#panel-devices .sidebar-content .widget-heading,#widgets .widget>.widget-heading,.modal .panel-heading,.panel-default>.panel-heading,.panel-heading,.panel>.panel-heading,.widget-heading{background-color:var(--nav-primary,#1a73e8)!important;color:#fff!important;border-bottom:none!important;padding-bottom:initial!important}#panel-devices .sidebar-content .panel-heading *,#panel-devices .sidebar-content .widget-heading *,.panel-heading *,.widget-heading *{color:#fff!important}#panel-devices .sidebar-content .panel-heading .panel-title,#panel-devices .sidebar-content .widget-heading .widget-title,.panel-heading .panel-title,.panel-heading h1,.panel-heading h2,.panel-heading h3,.panel-heading h4,.panel-heading h5,.widget-heading .widget-title,.widget-heading h1,.widget-heading h2,.widget-heading h3,.widget-heading h4,.widget-heading h5{color:#fff!important;font-weight:600!important}:not(.panel-heading):not(.widget-heading)>.panel-title,:not(.panel-heading):not(.widget-heading)>.widget-title{color:var(--nav-primary,#1a73e8)!important}.card-title,.modal-title,.page-title,.panel-title,.section-title,.widget-title,h1,h2,h3,h4,h5{color:var(--nav-primary,#1a73e8)!important;font-weight:600!important}.table.table-list>thead>tr,.table>thead>tr,table.table>thead>tr{background-color:var(--nav-primary,#1a73e8)!important;color:#fff!important}.table>thead>tr>td,.table>thead>tr>th,table.table>thead>tr>th{color:#fff!important;font-weight:600!important;border-bottom-color:rgba(255,255,255,.3)!important}.group-heading{background-color:var(--nav-primary,#1a73e8)!important;color:#fff!important}.group-heading *{color:#fff!important}.modal-dialog:not(.modal-full){max-width:560px!important;width:90%!important;margin:54px auto 6px!important}.modal-content{position:relative!important;background-color:var(--panel-bg,#fff)!important;background:var(--panel-bg,#fff)!important}.modal-body{background-color:var(--panel-bg,#fff)!important;color:var(--text-color,#333)!important}.modal-footer{background-color:var(--panel-bg,#fff)!important}.modal-header .close{position:absolute!important;top:10px!important;right:14px!important;z-index:10!important;color:#fff!important;opacity:.9!important;font-size:22px!important;font-weight:700!important;line-height:1!important;background:none!important;border:none!important;padding:2px 6px!important;cursor:pointer!important;text-shadow:none!important}.modal-header{background-color:var(--nav-primary,#1a73e8)!important;color:#fff!important}.modal-header *{color:#fff!important}.modal-title{color:#fff!important;font-weight:600!important}.modal-header .close{color:#fff!important;opacity:.8!important}
/* ══ Estándar global de ventanas emergentes ═════════════════════════════════
   Todas las ventanas usan el mismo tamaño: ancho máximo 955 px y altura
   completa de la pantalla. El modal-body crece con flex y hace scroll
   interno cuando el contenido supera la altura disponible.                  */
.modal {
    overflow-y: auto !important;
}
.modal-dialog:not(.modal-full) {
    max-width: 955px !important;
    width: 96% !important;
    height: calc(100vh - 60px) !important;
    margin: 54px auto 6px !important;
}
.modal-content {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
.modal-body {
    flex: 1 1 auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
}
.modal-footer {
    flex: 0 0 auto !important;
}
/* Listas multiselect: llenan el espacio disponible con scroll propio */
.bootstrap-select.form-control.multiexpand .dropdown-menu.inner {
    min-height: unset !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
}
/* Pestaña Usuarios en el modal de edición de dispositivo — más espacio para la lista */
#device-form-users {
    min-height: 380px;
}
#device-form-users .bootstrap-select.form-control.multiexpand .dropdown-menu.inner {
    min-height: 280px !important;
    max-height: calc(100vh - 300px) !important;
}
/* Modal agregar/editar grupo de dispositivos — lista visible */
#devices_groups_create .modal-dialog,
#devices_groups_edit .modal-dialog {
    width: 860px;
    max-width: 97vw;
}
#devices_groups_create .bootstrap-select.form-control.multiexpand .dropdown-menu,
#devices_groups_edit .bootstrap-select.form-control.multiexpand .dropdown-menu {
    display: block !important;
    position: static !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    margin-top: 4px !important;
}
#devices_groups_create .bootstrap-select.form-control.multiexpand .dropdown-menu.inner,
#devices_groups_edit .bootstrap-select.form-control.multiexpand .dropdown-menu.inner {
    min-height: 320px !important;
    max-height: calc(100vh - 380px) !important;
    overflow-y: auto !important;
    display: block !important;
}

/* ── Hover en nav-panel-link (Herramientas, Configuración, Cuenta) ─────────
   El estilo base tiene background:0 0 en hover. Lo sobreescribimos con el
   color primario del sistema.                                                */
.nav-panel-body .nav-panel-link:hover {
    background: var(--nav-hover-bg, #1a73e8) !important;
    color: var(--nav-hover-text, #ffffff) !important;
    border-radius: 0px !important;
}
.nav-panel-body .nav-panel-link:hover .icon,
.nav-panel-body .nav-panel-link:hover span {
    color: var(--nav-hover-text, #ffffff) !important;
}

/* Los border-radius globales los maneja nav-sidebar.js via --ui-radius / --ui-popup-radius */

/* ── Iconos y texto en cualquier barra/header principal: blanco puro ────────
   Aplica a navbar-main del admin y a cualquier .header con fondo de color   */
.navbar-main *,
.navbar-main a,
.navbar-main .icon,
.navbar-main .btn,
.navbar-main .btn *,
.navbar-main .navbar-nav>li>a,
.navbar-main .navbar-nav>li>a *,
.navbar-main .navbar-text,
.navbar-main p.navbar-text,
.navbar-main .navbar-brand,
.navbar-main .navbar-brand *{color:#ffffff !important}
/* Hover: ligeramente translúcido pero sigue siendo blanco */
.navbar-main .navbar-nav>li>a:hover,
.navbar-main .navbar-nav>li>a:hover *,
.navbar-main .btn:hover,
.navbar-main .btn:hover *{color:rgba(255,255,255,.85) !important;background:rgba(255,255,255,.1) !important}
/* Dropdown abierto desde el navbar: texto oscuro (fondo blanco) */
.navbar-main .dropdown-menu>li>a,
.navbar-main .dropdown-menu>li>a *{color:#333 !important;background:transparent !important}
.navbar-main .dropdown-menu>li>a:hover,
.navbar-main .dropdown-menu>li>a:hover *{color:#fff !important}
/* Enviar Comando: modal más alto, sin scroll, contenido extendido dentro de la ventana */
#send_command .modal-body {
    overflow-y: hidden !important;
    min-height: 420px !important;
    flex: 1 1 auto !important;
}

/* Crear Alerta: mismo tratamiento que Enviar Comando — sin scroll, ventana extendida */
#alerts_create .modal-body,
#alerts_edit .modal-body {
    overflow-y: hidden !important;
    min-height: 460px !important;
    flex: 1 1 auto !important;
}
/* Pestaña Notificaciones: scroll permitido, sin cambio de tamaño */
#alerts_create #alerts-form-notifications,
#alerts_edit #alerts-form-notifications {
    overflow-y: auto !important;
    max-height: 400px !important;
}
/* Consola de comandos: ventana 20px más ancha que modal-lg estándar */
#device_console .modal-dialog {
    width: 920px !important;
    max-width: 920px !important;
}

/* Consola de comandos: barra superior más alta */
#device_console .modal-header {
    padding: 14px 20px !important;
}

/* Consola de comandos: sin scroll, ventana lo suficientemente alta */
#device_console .modal-body {
    overflow-y: hidden !important;
    min-height: 380px !important;
    flex: 1 1 auto !important;
}


/* ── Events tab: scroll contenido sin desbordarse ─────────────────── */
#panel-devices #events_tab.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
#panel-devices #events_tab .tab-pane-header {
    flex: 0 0 auto !important;
}
#panel-devices #events_tab .tab-pane-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 200px) !important;
}
/* Los contenedores padres deben ser visible para que los dropdowns de
   Bootstrap Select puedan salir del tab-pane-header sin recortarse.
   El tab de eventos maneja su propio overflow internamente. */
#panel-devices.active {
    overflow: visible !important;
}
#panel-devices .sidebar-content {
    overflow: visible !important;
}
#panel-devices .tab-content {
    overflow: visible !important;
}

#panel-devices #events_tab .tab-pane-body table {
    width: 100% !important;
    max-width: 100% !important;
}
#panel-devices #events_tab .tab-pane-body .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-wrap: nowrap !important;
}
#panel-devices #events_tab .tab-pane-body .col-xs-3,
#panel-devices #events_tab .tab-pane-body .col-xs-4,
#panel-devices #events_tab .tab-pane-body .col-xs-5 {
    overflow: hidden !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
#panel-devices #events_tab .tab-pane-body .col-xs-4 {
    white-space: normal !important;
    word-break: break-word !important;
}
#panel-devices #events_tab .tab-pane-body .col-xs-5 {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}
#panel-devices #events_tab .tab-pane-body .col-xs-5,
#panel-devices #events_tab .events-thead .col-xs-5 {
    margin-left: 0 !important;
    text-align: right !important;
    padding-right: 4px !important;
}
#panel-devices #events_tab [data-device="address"] {
    display: block !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    font-size: 11px !important;
    color: #888 !important;
}

/* Dropdowns del events tab usan position fixed — no se cortan */
#panel-devices #events_tab .dropdown-menu {
    position: fixed !important;
}

/* ── Event row selected: texto blanco puro ───────────────────────── */
#panel-devices #events_tab #ajax-events tr.active td,
#panel-devices #events_tab #ajax-events tr.active td *,
#panel-devices #events_tab #ajax-events tr.active [data-device="address"] {
    color: #fff !important;
}

/* ── Events thead fijo ───────────────────────────────────────────── */
#panel-devices #events_tab .events-thead {
    flex: 0 0 auto !important;
    background: #fff !important;
}
#panel-devices #events_tab .events-thead table {
    width: 100% !important;
}

/* ── Datetime: fecha arriba, hora abajo ──────────────────────────── */
#panel-devices #events_tab .col-xs-3.datetime {
    white-space: normal !important;
    line-height: 1.3 !important;
}
#panel-devices #events_tab .datetime .time,
#panel-devices #events_tab .datetime .date {
    display: block !important;
    white-space: nowrap !important;
}

/* ── Dispositivo column: mover a la derecha ──────────────────────── */
#panel-devices #events_tab .col-xs-4 {
    padding-left: 20px !important;
}
/* Evento header alineado con datos */
#panel-devices #events_tab .events-thead .col-xs-5,
#panel-devices #events_tab .tab-pane-body .col-xs-5 {
    text-align: right !important;
    padding-right: 4px !important;
}

/* ── Dispositivo: centrado ───────────────────────────────────────── */
#panel-devices #events_tab .col-xs-4 {
    text-align: center !important;
}

/* ── Evento header: alineado a la izquierda ──────────────────────── */
#panel-devices #events_tab .events-thead .col-xs-5,
#panel-devices #events_tab .tab-pane-body .col-xs-5 {
    text-align: left !important;
}
/* Quitar padding-left excesivo en Dispositivo que tapaba la fecha */
#panel-devices #events_tab .col-xs-4 {
    padding-left: 8px !important;
}

/* ── Fix: col-xs-4 no tapa la hora ──────────────────────────────── */
#panel-devices #events_tab .col-xs-4 {
    padding-left: 2px !important;
    padding-right: 4px !important;
}
#panel-devices #events_tab .col-xs-3 {
    padding-right: 2px !important;
}

#panel-devices #events_tab .col-xs-4 {
    padding-left: 8px !important;
}

#panel-devices #events_tab .col-xs-4,
#panel-devices #events_tab .col-xs-5 {
    position: relative !important;
    left: 4px !important;
}

/* ── Alinear thead con tbody: fijar ancho columna de acciones ────── */
#panel-devices #events_tab .events-thead table,
#panel-devices #events_tab .tab-pane-body table {
    table-layout: fixed !important;
    width: 100% !important;
}
#panel-devices #events_tab .events-thead th:first-child,
#panel-devices #events_tab .tab-pane-body td:first-child {
    width: calc(100% - 32px) !important;
}
#panel-devices #events_tab .events-thead th:last-child,
#panel-devices #events_tab .tab-pane-body td:last-child {
    width: 32px !important;
}
/* Quitar left offset anterior que desalineaba */
#panel-devices #events_tab .col-xs-4,
#panel-devices #events_tab .col-xs-5 {
    position: static !important;
    left: 0 !important;
}

/* ── Events: tabla única con thead sticky ────────────────────────── */
#panel-devices #events_tab .events-scroll-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 200px) !important;
}
#panel-devices #events_tab .events-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin-bottom: 0 !important;
}
#panel-devices #events_tab .events-sticky-head th {
    position: sticky !important;
    top: 0 !important;
    background: #f8f9ff !important;
    z-index: 2 !important;
    font-size: 12px !important;
    padding: 6px 4px !important;
    border-bottom: 2px solid #e8eaf0 !important;
    white-space: nowrap !important;
}
/* Anchos de columnas */
#panel-devices #events_tab .ev-col-time    { width: 28% !important; }
#panel-devices #events_tab .ev-col-device  { width: 30% !important; text-align: center !important; }
#panel-devices #events_tab .ev-col-event   { width: 30% !important; }
#panel-devices #events_tab .ev-col-actions { width: 12% !important; text-align: center !important; }
/* Celdas de datos */
#panel-devices #events_tab .events-table td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 5px 4px !important;
    vertical-align: middle !important;
}
#panel-devices #events_tab .ev-col-device {
    white-space: normal !important;
    word-break: break-word !important;
}
/* Fecha y hora en dos líneas */
#panel-devices #events_tab .ev-date,
#panel-devices #events_tab .ev-time {
    display: block !important;
    white-space: nowrap !important;
}
/* Dirección */
#panel-devices #events_tab .ev-address-row td {
    padding: 0 4px 6px !important;
    font-size: 11px !important;
    color: #888 !important;
    white-space: normal !important;
    word-break: break-word !important;
    border-top: none !important;
}
/* Seleccionado */
#panel-devices #events_tab #ajax-events tr.active td,
#panel-devices #events_tab #ajax-events tr.active td * {
    color: #fff !important;
}

#panel-devices #events_tab .ev-col-time {
    padding-left: 8px !important;
}

#panel-devices #events_tab .ev-col-time {
    padding-left: 14px !important;
}

#panel-devices #events_tab .events-table th.ev-col-time,
#panel-devices #events_tab .events-table td.ev-col-time {
    padding-left: 16px !important;
}

#panel-devices #events_tab .events-table th.ev-col-device,
#panel-devices #events_tab .events-table td.ev-col-device {
    padding-left: 12px !important;
}
#panel-devices #events_tab .events-table th.ev-col-event,
#panel-devices #events_tab .events-table td.ev-col-event {
    padding-left: 10px !important;
}

#panel-devices #events_tab .ev-address-row td {
    padding-left: 16px !important;
}

#panel-devices #events_tab .events-sticky-head th {
    background: var(--nav-primary, #1a73e8) !important;
    color: #fff !important;
}

#panel-devices #events_tab .tab-pane-header .form-group.search input {
    padding-left: 16px !important;
    text-indent: 0 !important;
}
#panel-devices #events_tab .tab-pane-header {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

#panel-devices #events_tab #events_search_field {
    padding-left: 16px !important;
    text-align: center !important;
}
#panel-devices #events_tab #events_search_field::placeholder {
    text-align: center !important;
}

/* ── Nav icons y panel: bajar 15px para no tapar barra superior ─── */
#nav-icons {
    top: 15px !important;
}
#nav-panel {
    top: 15px !important;
}

/* ── Nav icons: barra azul desde arriba, botones bajan 35px ─────── */
#nav-icons {
    top: 0 !important;
    padding-top: 35px !important;
}
#nav-panel {
    top: 35px !important;
}

#nav-icons { padding-top: 45px !important; }
#nav-panel  { top: 45px !important; }

/* ── Module bar base: #fdb-tabs / .fdb-tab-btn (all themes) ── */
#fdb-tabs {
  position: fixed; top: 6px; left: 50%; transform: translateX(-50%);
  z-index: 10100; display: flex; gap: 2px; padding: 3px;
  background: rgba(255,255,255,.92); border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.15); backdrop-filter: blur(6px);
}
.fdb-tab-btn {
  display: flex; align-items: center; gap: 4px; padding: 5px 13px;
  border: none; border-radius: 7px; font-size: 14px; font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer; color: #6b6b68; background: transparent;
  transition: all .18s; white-space: nowrap; font-family: inherit;
}
.fdb-tab-btn:hover { background: rgba(0,0,0,.06); color: var(--nav-primary, #185FA5); }
.fdb-tab-btn.fdb-tab-active {
  background: var(--nav-primary, #185FA5); color: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.fdb-tab-btn svg { flex-shrink: 0; opacity: .8; }
.fdb-tab-btn.fdb-tab-active svg { opacity: 1; }
#fdb-fullscreen {
  position: fixed; inset: 0; z-index: 9500;
  background: #f0f0ee; overflow-y: auto; display: none;
}
#fdb-fullscreen-body { min-height: 100vh; zoom: 1.2; }
#fdb-gen-iframe, #fdb-mant-iframe, #fdb-cond-iframe,
#fdb-reparto-iframe, #fdb-gastos-iframe, #fdb-tareas-iframe, #fdb-agricola-iframe,
#fdb-camaras-iframe {
  width: 100%; height: 100%; border: none; display: block; position: absolute; inset: 0;
}

/* ════════════════════════════════════════════════════════════════
   FIX: Dropdown 3-puntos del dispositivo (panel-devices) — fondo solido
   El dropdown puede ser portaled fuera de #panel-devices via JS,
   asi que el selector debe ser permisivo. Por theme, fondo solido + borde.
   ════════════════════════════════════════════════════════════════ */

/* Arctic (default light) — fondo blanco solido */
.dropdown-menu[style*="position: fixed"],
.dropdown-menu[style*="position:fixed"],
.dropdown-menu[style*="position: absolute"],
.dropdown-menu[style*="position:absolute"],
#panel-devices .dropdown-menu,
.btn-group.droparrow .dropdown-menu {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid rgba(15,30,60,.10) !important;
    box-shadow: 0 8px 24px rgba(15,30,60,.18), 0 2px 6px rgba(15,30,60,.10) !important;
    color: #0F1E3C !important;
}

/* Carbon — fondo oscuro solido */
:root[data-theme="carbon"] .dropdown-menu[style*="position: fixed"],
:root[data-theme="carbon"] .dropdown-menu[style*="position:fixed"],
:root[data-theme="carbon"] .dropdown-menu[style*="position: absolute"],
:root[data-theme="carbon"] .dropdown-menu[style*="position:absolute"],
:root[data-theme="carbon"] #panel-devices .dropdown-menu,
:root[data-theme="carbon"] .btn-group.droparrow .dropdown-menu {
    background-color: #141414 !important;
    background: #141414 !important;
    border: 1px solid rgba(201,168,76,.25) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40) !important;
    color: #E8E0D0 !important;
}
:root[data-theme="carbon"] .dropdown-menu[style*="position: fixed"] > li > a,
:root[data-theme="carbon"] .dropdown-menu[style*="position:fixed"] > li > a,
:root[data-theme="carbon"] .dropdown-menu[style*="position: absolute"] > li > a,
:root[data-theme="carbon"] .dropdown-menu[style*="position:absolute"] > li > a,
:root[data-theme="carbon"] #panel-devices .dropdown-menu > li > a,
:root[data-theme="carbon"] .btn-group.droparrow .dropdown-menu > li > a {
    color: #E8E0D0 !important;
    background: transparent !important;
}
:root[data-theme="carbon"] .dropdown-menu[style*="position: fixed"] > li > a:hover,
:root[data-theme="carbon"] .dropdown-menu[style*="position:fixed"] > li > a:hover,
:root[data-theme="carbon"] .dropdown-menu[style*="position: absolute"] > li > a:hover,
:root[data-theme="carbon"] .dropdown-menu[style*="position:absolute"] > li > a:hover,
:root[data-theme="carbon"] #panel-devices .dropdown-menu > li > a:hover,
:root[data-theme="carbon"] .btn-group.droparrow .dropdown-menu > li > a:hover {
    background: rgba(201,168,76,.12) !important;
    color: #C9A84C !important;
}

/* Grafito — fondo grafito solido */
:root[data-theme="grafito"] .dropdown-menu[style*="position: fixed"],
:root[data-theme="grafito"] .dropdown-menu[style*="position:fixed"],
:root[data-theme="grafito"] .dropdown-menu[style*="position: absolute"],
:root[data-theme="grafito"] .dropdown-menu[style*="position:absolute"],
:root[data-theme="grafito"] #panel-devices .dropdown-menu,
:root[data-theme="grafito"] .btn-group.droparrow .dropdown-menu {
    background-color: #1D2026 !important;
    background: #1D2026 !important;
    border: 1px solid rgba(203,213,225,.25) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40) !important;
    color: #E4E8EF !important;
}
:root[data-theme="grafito"] .dropdown-menu[style*="position: fixed"] > li > a,
:root[data-theme="grafito"] .dropdown-menu[style*="position:fixed"] > li > a,
:root[data-theme="grafito"] .dropdown-menu[style*="position: absolute"] > li > a,
:root[data-theme="grafito"] .dropdown-menu[style*="position:absolute"] > li > a,
:root[data-theme="grafito"] #panel-devices .dropdown-menu > li > a,
:root[data-theme="grafito"] .btn-group.droparrow .dropdown-menu > li > a {
    color: #E4E8EF !important;
    background: transparent !important;
}
:root[data-theme="grafito"] .dropdown-menu[style*="position: fixed"] > li > a:hover,
:root[data-theme="grafito"] .dropdown-menu[style*="position:fixed"] > li > a:hover,
:root[data-theme="grafito"] .dropdown-menu[style*="position: absolute"] > li > a:hover,
:root[data-theme="grafito"] .dropdown-menu[style*="position:absolute"] > li > a:hover,
:root[data-theme="grafito"] #panel-devices .dropdown-menu > li > a:hover,
:root[data-theme="grafito"] .btn-group.droparrow .dropdown-menu > li > a:hover {
    background: rgba(203,213,225,.12) !important;
    color: rgb(203,213,225) !important;
}

/* Medianoche — fondo azul-noche solido */
:root[data-theme="medianoche"] .dropdown-menu[style*="position: fixed"],
:root[data-theme="medianoche"] .dropdown-menu[style*="position:fixed"],
:root[data-theme="medianoche"] .dropdown-menu[style*="position: absolute"],
:root[data-theme="medianoche"] .dropdown-menu[style*="position:absolute"],
:root[data-theme="medianoche"] #panel-devices .dropdown-menu,
:root[data-theme="medianoche"] .btn-group.droparrow .dropdown-menu {
    background-color: #0F1730 !important;
    background: #0F1730 !important;
    border: 1px solid rgba(56,189,248,.25) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40) !important;
    color: #E0EAFF !important;
}
:root[data-theme="medianoche"] .dropdown-menu[style*="position: fixed"] > li > a,
:root[data-theme="medianoche"] .dropdown-menu[style*="position:fixed"] > li > a,
:root[data-theme="medianoche"] .dropdown-menu[style*="position: absolute"] > li > a,
:root[data-theme="medianoche"] .dropdown-menu[style*="position:absolute"] > li > a,
:root[data-theme="medianoche"] #panel-devices .dropdown-menu > li > a,
:root[data-theme="medianoche"] .btn-group.droparrow .dropdown-menu > li > a {
    color: #E0EAFF !important;
    background: transparent !important;
}
:root[data-theme="medianoche"] .dropdown-menu[style*="position: fixed"] > li > a:hover,
:root[data-theme="medianoche"] .dropdown-menu[style*="position:fixed"] > li > a:hover,
:root[data-theme="medianoche"] .dropdown-menu[style*="position: absolute"] > li > a:hover,
:root[data-theme="medianoche"] .dropdown-menu[style*="position:absolute"] > li > a:hover,
:root[data-theme="medianoche"] #panel-devices .dropdown-menu > li > a:hover,
:root[data-theme="medianoche"] .btn-group.droparrow .dropdown-menu > li > a:hover {
    background: rgba(56,189,248,.12) !important;
    color: rgb(56,189,248) !important;
}

/* Obsidiana — fondo obsidiana solido */
:root[data-theme="obsidiana"] .dropdown-menu[style*="position: fixed"],
:root[data-theme="obsidiana"] .dropdown-menu[style*="position:fixed"],
:root[data-theme="obsidiana"] .dropdown-menu[style*="position: absolute"],
:root[data-theme="obsidiana"] .dropdown-menu[style*="position:absolute"],
:root[data-theme="obsidiana"] #panel-devices .dropdown-menu,
:root[data-theme="obsidiana"] .btn-group.droparrow .dropdown-menu {
    background-color: #0B0D0F !important;
    background: #0B0D0F !important;
    border: 1px solid rgba(20,184,166,.25) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40) !important;
    color: #E5F0EE !important;
}
:root[data-theme="obsidiana"] .dropdown-menu[style*="position: fixed"] > li > a,
:root[data-theme="obsidiana"] .dropdown-menu[style*="position:fixed"] > li > a,
:root[data-theme="obsidiana"] .dropdown-menu[style*="position: absolute"] > li > a,
:root[data-theme="obsidiana"] .dropdown-menu[style*="position:absolute"] > li > a,
:root[data-theme="obsidiana"] #panel-devices .dropdown-menu > li > a,
:root[data-theme="obsidiana"] .btn-group.droparrow .dropdown-menu > li > a {
    color: #E5F0EE !important;
    background: transparent !important;
}
:root[data-theme="obsidiana"] .dropdown-menu[style*="position: fixed"] > li > a:hover,
:root[data-theme="obsidiana"] .dropdown-menu[style*="position:fixed"] > li > a:hover,
:root[data-theme="obsidiana"] .dropdown-menu[style*="position: absolute"] > li > a:hover,
:root[data-theme="obsidiana"] .dropdown-menu[style*="position:absolute"] > li > a:hover,
:root[data-theme="obsidiana"] #panel-devices .dropdown-menu > li > a:hover,
:root[data-theme="obsidiana"] .btn-group.droparrow .dropdown-menu > li > a:hover {
    background: rgba(20,184,166,.12) !important;
    color: rgb(20,184,166) !important;
}

/* Lino — fondo blanco solido con borde sage olive */
:root[data-theme="lino"] .dropdown-menu[style*="position: fixed"],
:root[data-theme="lino"] .dropdown-menu[style*="position:fixed"],
:root[data-theme="lino"] .dropdown-menu[style*="position: absolute"],
:root[data-theme="lino"] .dropdown-menu[style*="position:absolute"],
:root[data-theme="lino"] #panel-devices .dropdown-menu,
:root[data-theme="lino"] .btn-group.droparrow .dropdown-menu {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(101,120,47,.22) !important;
    box-shadow: 0 8px 24px rgba(45,42,31,.12), 0 2px 6px rgba(45,42,31,.07) !important;
    color: #2D2A1F !important;
}
:root[data-theme="lino"] .dropdown-menu[style*="position: fixed"] > li > a,
:root[data-theme="lino"] .dropdown-menu[style*="position:fixed"] > li > a,
:root[data-theme="lino"] .dropdown-menu[style*="position: absolute"] > li > a,
:root[data-theme="lino"] .dropdown-menu[style*="position:absolute"] > li > a,
:root[data-theme="lino"] #panel-devices .dropdown-menu > li > a,
:root[data-theme="lino"] .btn-group.droparrow .dropdown-menu > li > a {
    color: #2D2A1F !important;
    background: transparent !important;
}
:root[data-theme="lino"] .dropdown-menu[style*="position: fixed"] > li > a:hover,
:root[data-theme="lino"] .dropdown-menu[style*="position:fixed"] > li > a:hover,
:root[data-theme="lino"] .dropdown-menu[style*="position: absolute"] > li > a:hover,
:root[data-theme="lino"] .dropdown-menu[style*="position:absolute"] > li > a:hover,
:root[data-theme="lino"] #panel-devices .dropdown-menu > li > a:hover,
:root[data-theme="lino"] .btn-group.droparrow .dropdown-menu > li > a:hover {
    background: rgba(101,120,47,.10) !important;
    color: rgb(101,120,47) !important;
}

/* Lavanda — fondo blanco con borde violet */
:root[data-theme="lavanda"] .dropdown-menu[style*="position: fixed"],
:root[data-theme="lavanda"] .dropdown-menu[style*="position:fixed"],
:root[data-theme="lavanda"] .dropdown-menu[style*="position: absolute"],
:root[data-theme="lavanda"] .dropdown-menu[style*="position:absolute"],
:root[data-theme="lavanda"] #panel-devices .dropdown-menu,
:root[data-theme="lavanda"] .btn-group.droparrow .dropdown-menu {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(124,58,237,.22) !important;
    box-shadow: 0 8px 24px rgba(40,31,63,.12), 0 2px 6px rgba(40,31,63,.07) !important;
    color: #281F3F !important;
}
:root[data-theme="lavanda"] .dropdown-menu[style*="position: fixed"] > li > a,
:root[data-theme="lavanda"] .dropdown-menu[style*="position:fixed"] > li > a,
:root[data-theme="lavanda"] .dropdown-menu[style*="position: absolute"] > li > a,
:root[data-theme="lavanda"] .dropdown-menu[style*="position:absolute"] > li > a,
:root[data-theme="lavanda"] #panel-devices .dropdown-menu > li > a,
:root[data-theme="lavanda"] .btn-group.droparrow .dropdown-menu > li > a {
    color: #281F3F !important;
    background: transparent !important;
}
:root[data-theme="lavanda"] .dropdown-menu[style*="position: fixed"] > li > a:hover,
:root[data-theme="lavanda"] .dropdown-menu[style*="position:fixed"] > li > a:hover,
:root[data-theme="lavanda"] .dropdown-menu[style*="position: absolute"] > li > a:hover,
:root[data-theme="lavanda"] .dropdown-menu[style*="position:absolute"] > li > a:hover,
:root[data-theme="lavanda"] #panel-devices .dropdown-menu > li > a:hover,
:root[data-theme="lavanda"] .btn-group.droparrow .dropdown-menu > li > a:hover {
    background: rgba(124,58,237,.10) !important;
    color: rgb(124,58,237) !important;
}

/* Piedra — fondo blanco con borde stone neutral */
:root[data-theme="piedra"] .dropdown-menu[style*="position: fixed"],
:root[data-theme="piedra"] .dropdown-menu[style*="position:fixed"],
:root[data-theme="piedra"] .dropdown-menu[style*="position: absolute"],
:root[data-theme="piedra"] .dropdown-menu[style*="position:absolute"],
:root[data-theme="piedra"] #panel-devices .dropdown-menu,
:root[data-theme="piedra"] .btn-group.droparrow .dropdown-menu {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(87,83,78,.22) !important;
    box-shadow: 0 8px 24px rgba(28,28,26,.12), 0 2px 6px rgba(28,28,26,.07) !important;
    color: #1C1C1A !important;
}
:root[data-theme="piedra"] .dropdown-menu[style*="position: fixed"] > li > a,
:root[data-theme="piedra"] .dropdown-menu[style*="position:fixed"] > li > a,
:root[data-theme="piedra"] .dropdown-menu[style*="position: absolute"] > li > a,
:root[data-theme="piedra"] .dropdown-menu[style*="position:absolute"] > li > a,
:root[data-theme="piedra"] #panel-devices .dropdown-menu > li > a,
:root[data-theme="piedra"] .btn-group.droparrow .dropdown-menu > li > a {
    color: #1C1C1A !important;
    background: transparent !important;
}
:root[data-theme="piedra"] .dropdown-menu[style*="position: fixed"] > li > a:hover,
:root[data-theme="piedra"] .dropdown-menu[style*="position:fixed"] > li > a:hover,
:root[data-theme="piedra"] .dropdown-menu[style*="position: absolute"] > li > a:hover,
:root[data-theme="piedra"] .dropdown-menu[style*="position:absolute"] > li > a:hover,
:root[data-theme="piedra"] #panel-devices .dropdown-menu > li > a:hover,
:root[data-theme="piedra"] .btn-group.droparrow .dropdown-menu > li > a:hover {
    background: rgba(87,83,78,.10) !important;
    color: rgb(87,83,78) !important;
}

/* ════════════════════════════════════════════════════════════════
   FIX contraste .fdb-tab-btn (Mantenciones / Conductores / Reparto / etc.)
   en los 8 themes — antes el color #6b6b68 hardcoded se perdia en oscuros.
   ════════════════════════════════════════════════════════════════ */

/* Arctic */
:root[data-theme="arctic"] .fdb-tab-btn { color: #2D4070 !important; }
:root[data-theme="arctic"] .fdb-tab-btn:hover { background: rgba(30,64,175,.08) !important; color: #1849D6 !important; }
:root[data-theme="arctic"] .fdb-tab-btn.fdb-tab-active { background: #1849D6 !important; color: #fff !important; }

/* Lino — sage olive */
:root[data-theme="lino"] .fdb-tab-btn { color: #7D7A6F !important; }
:root[data-theme="lino"] .fdb-tab-btn:hover { background: rgba(101,120,47,.10) !important; color: rgb(101,120,47) !important; }
:root[data-theme="lino"] .fdb-tab-btn.fdb-tab-active { background: rgb(101,120,47) !important; color: #fff !important; }

/* Lavanda — violet */
:root[data-theme="lavanda"] .fdb-tab-btn { color: #767086 !important; }
:root[data-theme="lavanda"] .fdb-tab-btn:hover { background: rgba(124,58,237,.10) !important; color: rgb(124,58,237) !important; }
:root[data-theme="lavanda"] .fdb-tab-btn.fdb-tab-active { background: rgb(124,58,237) !important; color: #fff !important; }

/* Piedra — stone neutral */
:root[data-theme="piedra"] .fdb-tab-btn { color: #70706E !important; }
:root[data-theme="piedra"] .fdb-tab-btn:hover { background: rgba(87,83,78,.10) !important; color: rgb(87,83,78) !important; }
:root[data-theme="piedra"] .fdb-tab-btn.fdb-tab-active { background: rgb(87,83,78) !important; color: #fff !important; }

/* Carbon — gold */
:root[data-theme="carbon"] .fdb-tab-btn { color: #8C877E !important; }
:root[data-theme="carbon"] .fdb-tab-btn:hover { background: rgba(201,168,76,.10) !important; color: #E8E0D0 !important; }
:root[data-theme="carbon"] .fdb-tab-btn.fdb-tab-active { background: #C9A84C !important; color: #0D0D0D !important; }

/* Grafito — silver */
:root[data-theme="grafito"] .fdb-tab-btn { color: #92959B !important; }
:root[data-theme="grafito"] .fdb-tab-btn:hover { background: rgba(203,213,225,.10) !important; color: #E4E8EF !important; }
:root[data-theme="grafito"] .fdb-tab-btn.fdb-tab-active { background: rgb(203,213,225) !important; color: #16181D !important; }

/* Medianoche — cyan */
:root[data-theme="medianoche"] .fdb-tab-btn { color: #8A93A6 !important; }
:root[data-theme="medianoche"] .fdb-tab-btn:hover { background: rgba(56,189,248,.10) !important; color: #E0EAFF !important; }
:root[data-theme="medianoche"] .fdb-tab-btn.fdb-tab-active { background: rgb(56,189,248) !important; color: #000 !important; }

/* Obsidiana — jade */
:root[data-theme="obsidiana"] .fdb-tab-btn { color: #808786 !important; }
:root[data-theme="obsidiana"] .fdb-tab-btn:hover { background: rgba(20,184,166,.10) !important; color: #E5F0EE !important; }
:root[data-theme="obsidiana"] .fdb-tab-btn.fdb-tab-active { background: rgb(20,184,166) !important; color: #000 !important; }

/* SVG icons del fdb-tab-btn — heredan el color del texto */
:root[data-theme="arctic"] .fdb-tab-btn svg,
:root[data-theme="lino"] .fdb-tab-btn svg,
:root[data-theme="lavanda"] .fdb-tab-btn svg,
:root[data-theme="piedra"] .fdb-tab-btn svg,
:root[data-theme="carbon"] .fdb-tab-btn svg,
:root[data-theme="grafito"] .fdb-tab-btn svg,
:root[data-theme="medianoche"] .fdb-tab-btn svg,
:root[data-theme="obsidiana"] .fdb-tab-btn svg {
  color: currentColor !important;
}

/* ════════════════════════════════════════════════════════════════
   Theme toggle button (.mb-theme-toggle) — al lado de cinemática
   en la barra superior. Sol visible cuando estamos en oscuro,
   Luna visible cuando estamos en claro.
   ════════════════════════════════════════════════════════════════ */
.mb-theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important; height: 30px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.7) !important;
  cursor: pointer !important;
  transition: all .15s !important;
  margin-right: 6px !important;
  flex-shrink: 0 !important;
}
.mb-theme-toggle:hover {
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  transform: scale(1.05) !important;
}
.mb-theme-toggle:active { transform: scale(.95) !important; }
.mb-theme-toggle svg { flex-shrink: 0; transition: opacity .25s, transform .35s; }

/* Mostrar luna cuando estamos en CLARO (sugiere ir a oscuro) */
.mb-theme-toggle .mb-theme-icon-sun { display: none !important; }
.mb-theme-toggle .mb-theme-icon-moon { display: block !important; }

/* Mostrar sol cuando estamos en OSCURO (sugiere ir a claro) */
.mb-theme-toggle.is-dark .mb-theme-icon-sun { display: block !important; }
.mb-theme-toggle.is-dark .mb-theme-icon-moon { display: none !important; }

/* Tint del botón con el primary del theme actual al hover */
:root[data-theme="arctic"] .mb-theme-toggle:hover { background: rgba(24,73,214,.20) !important; color: #fff !important; }
:root[data-theme="lino"] .mb-theme-toggle:hover { background: rgba(101,120,47,.25) !important; }
:root[data-theme="lavanda"] .mb-theme-toggle:hover { background: rgba(124,58,237,.25) !important; }
:root[data-theme="piedra"] .mb-theme-toggle:hover { background: rgba(87,83,78,.25) !important; }
:root[data-theme="carbon"] .mb-theme-toggle:hover { background: rgba(201,168,76,.20) !important; color: #C9A84C !important; }
:root[data-theme="grafito"] .mb-theme-toggle:hover { background: rgba(203,213,225,.20) !important; color: rgb(203,213,225) !important; }
:root[data-theme="medianoche"] .mb-theme-toggle:hover { background: rgba(56,189,248,.20) !important; color: rgb(56,189,248) !important; }
:root[data-theme="obsidiana"] .mb-theme-toggle:hover { background: rgba(20,184,166,.20) !important; color: rgb(20,184,166) !important; }

/* Estado guardando del toggle: spinner sutil */
.mb-theme-toggle.is-saving {
  opacity: .6 !important;
  cursor: wait !important;
}
.mb-theme-toggle.is-saving svg {
  animation: mb-theme-spin .8s linear infinite;
}
@keyframes mb-theme-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════════════
   Widget Sensores — layout en 2 columnas (label izquierda, valor derecha
   alineado). Aumenta ancho mínimo para que valores largos no se corten.
   ══════════════════════════════════════════════════════════════════════ */
#widgets .widget-sensors {
    min-width: 360px !important;
    width: auto !important;
}
#widgets .widget-sensors .widget-body {
    padding: 4px 0 !important;
}
#widgets .widget-sensors .table {
    width: 100% !important;
    table-layout: auto !important;
    margin: 0 !important;
    /* Borde interno entre columnas para que el ojo perciba el alineamiento. */
}
#widgets .widget-sensors .table tr {
    border-bottom: 1px solid rgba(0,0,0,.05) !important;
}
#widgets .widget-sensors .table tr:last-child {
    border-bottom: 0 !important;
}
#widgets .widget-sensors .table td {
    padding: 7px 14px !important;
    vertical-align: middle !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    border: none !important;
}
/* Columna del nombre — toma el espacio que necesite el más largo. */
#widgets .widget-sensors .table td:first-child {
    color: var(--text-color, #1F2937) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    padding-right: 10px !important;
    width: auto !important;
}
#widgets .widget-sensors .table td:first-child .icon,
#widgets .widget-sensors .table td:first-child .sensor-icon {
    margin-right: 7px !important;
    color: var(--nav-primary, #1849D6) !important;
    vertical-align: -2px !important;
}
/* Columna del valor — alineada a la derecha, ocupa todo el espacio restante,
   números con tabular-nums para que las cifras alineen dígito por dígito.
   Sin width específico, deja crecer el contenido en una sola línea. */
#widgets .widget-sensors .table td:last-child {
    text-align: right !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    color: var(--text-color, #18243C) !important;
    font-family: 'JetBrains Mono', 'DM Mono', 'Courier New', monospace !important;
    padding-left: 16px !important;
    padding-right: 14px !important;
    width: 100% !important;
    font-variant-numeric: tabular-nums !important;
    -moz-font-feature-settings: 'tnum' !important;
    -webkit-font-feature-settings: 'tnum' !important;
    font-feature-settings: 'tnum' !important;
}
/* Si el valor viene envuelto en span/div, hereda alineación derecha. */
#widgets .widget-sensors .table td:last-child > *,
#widgets .widget-sensors .table td:last-child > * > * {
    display: inline-block !important;
    text-align: right !important;
}

/* Themes oscuros — separadores y colores ajustados. */
:root[data-theme="carbon"]    #widgets .widget-sensors .table tr,
:root[data-theme="grafito"]   #widgets .widget-sensors .table tr,
:root[data-theme="medianoche"] #widgets .widget-sensors .table tr,
:root[data-theme="obsidiana"] #widgets .widget-sensors .table tr {
    border-bottom-color: rgba(255,255,255,.06) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Widget Sensores — siempre desplegado al inicio.
   Neutraliza cualquier estado "colapsado" que aplique JS o herencia.
   ────────────────────────────────────────────────────────────────────── */
#widgets .widget-sensors .widget-body {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 4px !important;
}
#widgets .widget-sensors .widget-body .table {
    display: table !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* Si algún JS escribe inline display:none, prevalece el block. */
#widgets .widget-sensors .widget-body[style*="display: none"],
#widgets .widget-sensors .widget-body[style*="display:none"] {
    display: block !important;
}
/* Caret/chevron del header del widget (si existe): apuntando hacia abajo,
   indica "expandido". Si existe la clase 'collapsed' sobre el widget la
   neutralizamos para que nunca arranque cerrado. */
#widgets .widget-sensors.collapsed .widget-body,
#widgets .widget-sensors[data-collapsed="1"] .widget-body,
#widgets .widget-sensors[aria-expanded="false"] .widget-body {
    display: block !important;
    height: auto !important;
}
#widgets .widget-sensors.collapsed,
#widgets .widget-sensors[data-collapsed="1"] {
    /* Removemos visualmente la marca de "collapsed" — siempre se ve expandido. */
    height: auto !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Zoom local 90% — Reemplaza al `body{zoom:.9}` que tuvimos que sacar
   porque rompía coordenadas de eventos (DragSelect, click en grilla
   horario de alertas, etc.). Aplicamos zoom localmente solo a contenedores
   donde no hay drag-select / clicks calculados por coords:
     - Sidebar de iconos (rail izquierda)
     - Panel del sidebar (Dispositivos / Geocercas / Rutas / POIs)
     - Widgetsbar inferior (street view, sensores, parámetros, etc.)
   El resto del sistema (mapa, modales, dashboard) queda al 100% y los
   clicks caen donde apuntan.
   ────────────────────────────────────────────────────────────────────── */
#nav-icons,
#nav-panel,
#widgetsbar,
#arctic-dv,
#arctic-dv-devicelist,
#arctic-dv-focus-restore {
    zoom: 0.9 !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Mini-velocímetro en la lista de devices (versión compacta del widget
   arctic-wb-speedo). Arco con 4 zonas (verde 0-37 / amarillo 37-75 /
   naranja 75-112 / rojo 112-150) que se rellenan progresivamente, ticks
   y aguja con color por zona. SVG inyectado por JS.
   ────────────────────────────────────────────────────────────────────── */
.dev-speed-wrap {
    position: relative !important;
    display: inline-block !important;
    width: 64px !important;
    height: 50px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}
.dev-speed-gauge {
    position: absolute !important;
    top: -3px !important;            /* aguja un poco más arriba */
    left: 0 !important;
    width: 100% !important;
    height: 36px !important;          /* recortado para dejar espacio al número abajo */
    display: block !important;
    overflow: visible !important;
}
/* Lectura de velocidad — número grande + unidad chica, abajo del gauge */
.dev-speed-wrap .dev-speed-readout {
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 2px !important;
    line-height: 1 !important;
    color: var(--text-color, #1a1a1a) !important;
    pointer-events: none !important;
    transition: color .25s linear !important;
}
.dev-speed-wrap .dev-speed-num {
    font-size: 14px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
}
.dev-speed-wrap .dev-speed-unit {
    font-size: 8px !important;
    font-weight: 600 !important;
    opacity: .7 !important;
    text-transform: lowercase !important;
}
/* El span original con "45 km/h" lo dejamos invisible (lo lee el JS para
   extraer el número y reflejarlo en .dev-speed-num + las zonas).
   Selector por atributo: app.js reemplaza el span entero perdiendo la
   clase 'dev-speed-src', pero conserva data-device="speed". */
.dev-speed-wrap [data-device="speed"] {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}
.dev-speed-gauge .ds-zone {
    transition: stroke-dasharray .45s ease-out;
}
.dev-speed-gauge .ds-needle {
    transform-origin: 50px 55px;
    transition: transform .55s cubic-bezier(.5, 1.4, .4, 1);
}
.dev-speed-gauge .ds-needle line,
.dev-speed-gauge .ds-pivot {
    transition: stroke .25s linear, fill .25s linear;
}

/* ── Indicador de motor encendido / apagado ──
   El cambio entre var(--t3) y var(--color-primary) era casi invisible en
   temas claros (ambos están en la misma familia). Forzamos gris claro vs
   verde brillante con halo, para que el estado se lea de un vistazo en
   cualquier tema. */
#ajax-items li[data-device-id] [data-device="detect_engine"],
#objects [data-device="detect_engine"],
[data-device="detect_engine"] {
    color: #b8bcc4 !important;          /* off: gris muteado */
    text-shadow: none !important;
    transition: color .18s ease, text-shadow .18s ease, transform .18s ease;
}
#ajax-items li[data-device-id] [data-device="detect_engine"].on,
#objects [data-device="detect_engine"].on,
[data-device="detect_engine"].on {
    color: #1f9d55 !important;          /* on: verde encendido */
    text-shadow:
        0 0 6px rgba(31, 157, 85, 0.55),
        0 0 2px rgba(31, 157, 85, 0.85) !important;
}
/* En temas oscuros bajamos un poco el verde para que no queme;
   off mantiene gris pero más claro para que contraste bien con fondo oscuro. */
:root[data-theme="carbon"] [data-device="detect_engine"],
:root[data-theme="medianoche"] [data-device="detect_engine"],
:root[data-theme="obsidiana"] [data-device="detect_engine"],
:root[data-theme="grafito"] [data-device="detect_engine"] {
    color: #6e7480 !important;
}
:root[data-theme="carbon"] [data-device="detect_engine"].on,
:root[data-theme="medianoche"] [data-device="detect_engine"].on,
:root[data-theme="obsidiana"] [data-device="detect_engine"].on,
:root[data-theme="grafito"] [data-device="detect_engine"].on {
    color: #2ecc71 !important;
    text-shadow:
        0 0 7px rgba(46, 204, 113, 0.65),
        0 0 2px rgba(46, 204, 113, 0.95) !important;
}