@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600&display=swap'); /* ========================================================================== Setra v4 — tema inspirado en la interfaz v4.6 de GPSWOX Se carga solo con "Color de la plantilla = Setra v4". Base: light-blue.css Modos: Automatico (sigue al sistema), Claro y Oscuro. Lo elige setra-v4.js poniendo . ========================================================================== */ /* ---------- Colores EXACTOS de la app Setra GPS (lib/core/theme/app_theme.dart) ---------- Azul Setra #0B5ED7 (botones), azul claro #5B9DFF (acento en oscuro), amarillo del logo #FFD004 (opcion activa del menu, como el indicador de la barra de la app) con azul marino #0A1F44 encima. */ /* ---------- OSCURO (por defecto) ---------- */ :root{ --v4-bg:#111A2B; --v4-bg2:#1B2639; --v4-input:#0F1726; --v4-line:#22304A; --v4-sep:#22304A; --v4-stripe:#0F1726; --v4-fld:#0F1726; --v4-fld-bd:#22304A; --v4-chk-bd:#3A4A63; --v4-txt:#E8EDF5; --v4-txt2:#9FB0C8; --v4-txt3:#9FB0C8; --v4-acc:#5B9DFF; --v4-acc-txt:#5B9DFF; --v4-btn:#0B5ED7; --v4-btn2:#12376F; --v4-hover:#12376F; --v4-scroll:#3A4A63; --v4-shadow:0 4px 14px rgba(0,0,0,.35); --v4-shadow2:0 10px 40px rgba(0,0,0,.55); --v4-pill:rgba(17,26,43,.94); --v4-pill-txt:#E8EDF5; --v4-body:#0B1220; /* menu lateral y botones del mapa (cambian con el modo) */ --v4-nav:#111A2B; --v4-nav2:#1B2639; --v4-nav-line:#22304A; --v4-nav-txt:#E8EDF5; --v4-nav-txt2:#9FB0C8; --v4-nav-act:#FFD004; --v4-nav-act-txt:#0A1F44; --v4-nav-seg:#0B1220; --v4-nav-bd:#3A4A63; --v4-side:222px; --v4-gap:12px; --v4-r:12px; --v4-h:36px; color-scheme:dark; } /* ---------- CLARO ---------- */ :root[data-sv4="light"]{ --v4-bg:#FFFFFF; --v4-bg2:#EFF3F9; --v4-input:#F5F8FC; --v4-line:#DAE2EE; --v4-sep:#DAE2EE; --v4-stripe:#F5F8FC; --v4-fld:#F5F8FC; --v4-fld-bd:#DAE2EE; --v4-chk-bd:#B4C0D0; --v4-txt:#14202F; --v4-txt2:#5B6575; --v4-txt3:#5B6575; --v4-acc:#0B5ED7; --v4-acc-txt:#0B5ED7; --v4-btn:#0B5ED7; --v4-btn2:#12376F; --v4-hover:#D9E7FF; --v4-scroll:#B4C0D0; --v4-shadow:0 4px 14px rgba(20,32,47,.12); --v4-shadow2:0 10px 40px rgba(20,32,47,.25); --v4-pill:rgba(255,255,255,.96); --v4-pill-txt:#14202F; --v4-body:#F3F6FB; --v4-nav:#FFFFFF; --v4-nav2:#EFF3F9; --v4-nav-line:#DAE2EE; --v4-nav-txt:#14202F; --v4-nav-txt2:#5B6575; --v4-nav-act:#FFD004; --v4-nav-act-txt:#0A1F44; --v4-nav-seg:#F5F8FC; --v4-nav-bd:#B4C0D0; color-scheme:light; } @media (prefers-color-scheme: light){ :root[data-sv4="auto"]{ --v4-bg:#FFFFFF; --v4-bg2:#EFF3F9; --v4-input:#F5F8FC; --v4-line:#DAE2EE; --v4-sep:#DAE2EE; --v4-stripe:#F5F8FC; --v4-fld:#F5F8FC; --v4-fld-bd:#DAE2EE; --v4-chk-bd:#B4C0D0; --v4-txt:#14202F; --v4-txt2:#5B6575; --v4-txt3:#5B6575; --v4-acc:#0B5ED7; --v4-acc-txt:#0B5ED7; --v4-btn:#0B5ED7; --v4-btn2:#12376F; --v4-hover:#D9E7FF; --v4-scroll:#B4C0D0; --v4-shadow:0 4px 14px rgba(20,32,47,.12); --v4-shadow2:0 10px 40px rgba(20,32,47,.25); --v4-pill:rgba(255,255,255,.96); --v4-pill-txt:#14202F; --v4-body:#F3F6FB; --v4-nav:#FFFFFF; --v4-nav2:#EFF3F9; --v4-nav-line:#DAE2EE; --v4-nav-txt:#14202F; --v4-nav-txt2:#5B6575; --v4-nav-act:#FFD004; --v4-nav-act-txt:#0A1F44; --v4-nav-seg:#F5F8FC; --v4-nav-bd:#B4C0D0; color-scheme:light; } } body:not(.sign-in-layout){background:var(--v4-body)!important} body{color:var(--v4-txt);font-family:"Libre Franklin",Roboto,system-ui,-apple-system,"Segoe UI",sans-serif} a{color:var(--v4-acc-txt)} /* ---------- Menu lateral (pantallas grandes) ---------- */ @media (min-width:1px){ #header.folded{height:0} #header .navbar.main-navbar{ position:fixed;left:0;top:0;bottom:0;width:var(--v4-side);height:auto;min-height:0; background:var(--v4-nav)!important;border:0;border-right:1px solid var(--v4-nav-line);border-radius:0; margin:0;z-index:1040;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--v4-scroll) transparent; } #header .main-navbar .container-fluid{padding:0;display:flex;flex-direction:column;height:100%} #header .main-navbar .navbar-nav,#header .main-navbar .navbar-nav>li,#header .main-navbar .navbar-header,#header .main-navbar .navbar-brand,#header .coll .navbar-nav{background:transparent!important} #header .main-navbar .navbar-header{float:none;width:100%;height:auto;padding:14px 16px 10px;margin:0!important;border-bottom:1px solid var(--v4-nav-line)} #header .main-navbar .navbar-brand{float:none;display:block;height:auto;padding:0;margin:0!important} #header .main-navbar .navbar-brand{border:0!important} #header .main-navbar .navbar-brand:before,#header .main-navbar .navbar-brand:after{display:none!important} #header .main-navbar .navbar-brand img{max-height:34px;width:auto;background:transparent;border-radius:6px} #header .main-navbar .navbar-collapse{display:block!important;height:auto!important;padding:8px 8px 12px;border:0;box-shadow:none;flex:1} #header .main-navbar .navbar-nav,#header .main-navbar .navbar-nav.navbar-right{float:none!important;margin:0!important;display:flex;flex-direction:column;width:100%;height:auto!important} #header .main-navbar .navbar-nav>li{float:none;width:100%} #header .main-navbar .navbar-nav>li>a, #header .main-navbar .navbar-nav>li.dropdown>.dropdown-menu>li>a{ display:flex!important;align-items:center;gap:10px;width:100%; padding:8px 10px!important;margin:1px 0;border-radius:8px; color:var(--v4-nav-txt)!important;background:transparent!important; font-size:13px;line-height:18px;white-space:nowrap;height:auto!important; } #header .main-navbar .navbar-nav>li>a .text, #header .main-navbar .navbar-nav .dropdown-menu .text{display:inline!important;color:inherit!important;font-size:13px} #header .main-navbar .navbar-nav .icon{color:var(--v4-nav-txt)!important;font-size:15px;width:18px;text-align:center;margin:0!important} #header .main-navbar .navbar-nav>li>a:hover, #header .main-navbar .navbar-nav .dropdown-menu>li>a:hover{background:var(--v4-nav2)!important} #header .main-navbar .navbar-nav>li.active>a,#header .main-navbar .navbar-nav>li>a.active, #header .main-navbar .navbar-nav>li.open>a{background:var(--v4-nav-act)!important;color:var(--v4-nav-act-txt)!important} #header .main-navbar .navbar-nav>li.open>a .icon,#header .main-navbar .navbar-nav>li.active>a .icon{color:var(--v4-nav-act-txt)!important} /* "Herramientas": su menu se muestra siempre, como en la v4 */ #header .main-navbar .navbar-nav>li.dropdown>a.dropdown-toggle#dropTools{display:none!important} #header .main-navbar .navbar-nav>li.dropdown>a.dropdown-toggle#dropTools + .dropdown-menu{ display:block!important;position:static!important;float:none;width:100%; background:transparent!important;border:0!important;box-shadow:none!important;padding:0 0 6px;margin:0 0 6px; border-bottom:1px solid var(--v4-nav-line)!important; } #header .main-navbar .navbar-nav .dropdown-menu .caret,#header .main-navbar .navbar-nav>li>a .caret{margin-left:auto} /* el resto de desplegables (idioma, cuenta) se abren hacia la derecha */ #header .main-navbar .navbar-nav>li.dropdown>.dropdown-menu:not([aria-labelledby="dropTools"]){ position:fixed!important;left:calc(var(--v4-side) + 8px);right:auto!important;bottom:auto!important; width:auto!important;min-width:200px;max-width:280px;margin:0!important; background:var(--v4-nav)!important;border:1px solid var(--v4-nav-line)!important;border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.45)!important;z-index:1050!important; } #header .main-navbar .navbar-nav>li.dropdown>.dropdown-menu:not([aria-labelledby="dropTools"])>li>a .icon, #header .main-navbar .navbar-nav>li.dropdown>.dropdown-menu:not([aria-labelledby="dropTools"])>li>a>i{color:var(--v4-nav-txt2)!important} #header .main-navbar .navbar-nav>li.dropdown>.dropdown-menu:not([aria-labelledby="dropTools"])>li>a:hover{background:var(--v4-nav2)!important} #header .main-navbar .navbar-nav .dropdown-menu>li>a{color:var(--v4-nav-txt)!important} /* Panel de unidades flotante */ #sidebar.sidebar.left{ left:calc(var(--v4-side) + var(--v4-gap))!important;top:var(--v4-gap)!important;bottom:var(--v4-gap)!important; height:auto!important;border-radius:var(--v4-r);overflow:visible;box-shadow:var(--v4-shadow); } #sidebar .sidebar-content{border-radius:var(--v4-r);overflow:hidden;top:0!important;height:100%!important;border:1px solid var(--v4-line)} #mapWrap{left:var(--v4-side)!important;width:auto!important;right:0} #map{width:100%!important} #bottombar{left:calc(var(--v4-side) + var(--v4-gap) + 330px + var(--v4-gap))!important;right:var(--v4-gap)!important;bottom:var(--v4-gap)!important;width:auto!important} #map-controls.top-right{top:var(--v4-gap)!important;right:var(--v4-gap)!important} } /* ---------- Selector de modo (lo crea setra-v4.js al final del menu) ---------- */ #sv4-modo{list-style:none;padding:10px 4px 4px;margin-top:auto} #sv4-modo .sv4-tit{display:flex;align-items:center;gap:8px;color:var(--v4-nav-txt2);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:0 6px 6px} #sv4-modo .sv4-seg{display:flex;background:var(--v4-nav-seg);border:1px solid var(--v4-nav-line);border-radius:10px;padding:3px;gap:3px} #sv4-modo .sv4-seg button,#sv4-modo .sv4-seg button i{color:var(--v4-nav-txt2)} #sv4-modo .sv4-seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;height:30px;border:0;border-radius:8px; background:transparent;color:var(--v4-nav-txt2);font-size:12px;font-weight:500;cursor:pointer;padding:0 4px;white-space:nowrap} #sv4-modo .sv4-seg button:hover{color:var(--v4-nav-txt);background:var(--v4-nav2)} #sv4-modo .sv4-seg button.sv4-on,#sv4-modo .sv4-seg button.sv4-on i{background:var(--v4-btn);color:#fff} #sv4-modo .sv4-seg button:focus-visible{outline:2px solid var(--v4-acc);outline-offset:1px} /* ---------- Panel lateral ---------- */ #sidebar .sidebar-content,#sidebar .tab-content,#sidebar .tab-pane,#sidebar .tab-pane-body{background:var(--v4-bg)!important;color:var(--v4-txt)} #sidebar .nav-tabs{background:var(--v4-bg)!important;border-bottom:1px solid var(--v4-line)!important;padding:8px 8px 0} #sidebar .nav-tabs>li>a{background:transparent!important;color:var(--v4-txt2)!important;border:0!important;border-radius:8px 8px 0 0;font-weight:500} #sidebar .nav-tabs>li.active>a,#sidebar .nav-tabs>li>a:hover{color:var(--v4-txt)!important;box-shadow:inset 0 -2px 0 var(--v4-acc)} #sidebar .tab-pane-header{background:var(--v4-bg)!important;border:0!important;padding:10px} #sidebar .search .form-control,#sidebar .tab-pane-header .form-control{ background:var(--v4-input)!important;border:0!important;border-radius:20px!important;color:var(--v4-txt)!important;height:34px!important;line-height:34px!important;padding-left:34px!important} #sidebar .tab-pane-header .form-control::placeholder{color:var(--v4-txt3)} #sidebar .search .icon,#sidebar .search i{color:var(--v4-txt2)!important} #sidebar .tab-pane-header .btn-primary{border-radius:8px!important;margin-left:6px;height:34px;min-width:52px} #sidebar .tab-pane-header .input-group-btn>a.btn-primary{background:transparent!important;border:1px solid var(--v4-acc)!important;color:var(--v4-acc-txt)!important} #sidebar .tab-pane-header .input-group-btn>a.btn-primary .icon{color:var(--v4-acc-txt)!important} #sidebar .tab-pane-header #device_add_btn>.btn-primary{background:var(--v4-btn)!important;border:0!important} #sidebar .input-group-btn>.btn,#sidebar .input-group-btn>.btn-group>.btn,#device_add_btn>.btn{display:inline-flex!important;align-items:center;justify-content:center;height:34px;min-width:38px;padding:0 10px!important} #sidebar .input-group-btn .btn i,#device_add_btn .btn i{line-height:1!important;vertical-align:0!important;margin:0!important} #sidebar .input-group .form-control[type=text],#sidebar .bootstrap-select .btn{min-width:0} /* grupos = tarjetas */ #objects_tab .group{background:var(--v4-bg);border:1px solid var(--v4-line)!important;border-radius:10px;margin:0 10px 10px;overflow:hidden} #objects_tab .group-heading{background:var(--v4-bg)!important;border:0!important;border-bottom:1px solid var(--v4-line)!important;color:var(--v4-txt)!important;font-weight:500} #objects_tab .group-title,#objects_tab .group-title *{color:var(--v4-txt)!important} #objects_tab .group-title .count{background:var(--v4-input);color:var(--v4-txt)!important;border-radius:6px;padding:1px 7px;font-size:11px;margin-left:6px} #objects_tab .group-list>li{background:var(--v4-bg)!important;border:0!important;border-bottom:1px solid var(--v4-sep)!important;color:var(--v4-txt)} #objects_tab .group-list>li:hover,#objects_tab .group-list>li.active{background:var(--v4-bg2)!important} #objects_tab .group-list>li.active{box-shadow:inset 3px 0 0 var(--v4-acc)} #objects_tab [data-device="name"]{color:var(--v4-txt)!important;font-weight:500} #objects_tab [data-device="time"]{color:var(--v4-txt3)!important;font-size:11px} #objects_tab [data-device="speed"]{color:var(--v4-txt)!important} #sidebar .icon.options,#objects_tab .group-heading .btn{color:var(--v4-txt2)!important} /* fila de equipo: todo centrado y sin encimarse */ #ajax-items li[data-device-id]>.name,#ajax-items li[data-device-id]>.details,#ajax-items li[data-device-id]>.checkbox{vertical-align:middle!important} #ajax-items li[data-device-id]>.name{width:100%;max-width:0;padding:6px 8px 6px 4px!important} #ajax-items li[data-device-id]>.name>*{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} #ajax-items li[data-device-id]>.details{white-space:nowrap;padding:0 4px 0 0!important;text-align:right} #ajax-items li[data-device-id]>.details>*{vertical-align:middle!important;margin-left:6px} #ajax-items li[data-device-id]>.details>*:first-child{margin-left:0} /* ---------- Casillas ---------- */ .checkbox>label,.radio>label{display:inline-flex!important;align-items:center;gap:8px;line-height:16px!important;min-height:16px;margin:0;color:var(--v4-txt)!important} .checkbox>label:before,.radio>label:before{margin:0!important;flex:0 0 auto;vertical-align:0!important;top:0!important} .checkbox>label:empty{gap:0} .checkbox input[type=checkbox]:not(:checked)+label:before{background:var(--v4-input)!important;box-shadow:inset 0 0 0 1px var(--v4-chk-bd)!important;border:0!important} .checkbox input[type=checkbox]:checked+label:before{background:var(--v4-acc)!important;border-color:var(--v4-acc)!important} .checkbox input[type=checkbox]:checked+label:after{color:#fff!important} .radio input[type=radio]+label:before{background:var(--v4-input)!important;box-shadow:inset 0 0 0 1px var(--v4-chk-bd)!important} #sidebar .checkbox input[type=checkbox]:not(:checked)+label:before{background:transparent!important;box-shadow:inset 0 0 0 2px var(--v4-acc)!important} .checkbox input[type=checkbox]:disabled+label{opacity:.55} /* ---------- Botones ---------- */ .btn-primary,.btn-action,.btn-success{background:var(--v4-btn)!important;border-color:var(--v4-btn)!important;color:#fff!important;border-radius:8px;font-weight:500} .btn-primary:hover,.btn-action:hover,.btn-success:hover{background:var(--v4-btn2)!important} .btn-default{background:transparent!important;border:1px solid var(--v4-acc)!important;color:var(--v4-acc-txt)!important;border-radius:8px;font-weight:500} .btn-default:hover{background:var(--v4-hover)!important} .btn-danger{border-radius:8px;font-weight:500} /* ---------- Controles del mapa (oscuros en los dos modos) ---------- */ #map-controls .btn-group-vertical{border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.35)} #map-controls .btn{display:flex!important;align-items:center;justify-content:center;line-height:1!important;padding:0!important; background:var(--v4-nav)!important;border:0!important;border-bottom:1px solid var(--v4-nav-line)!important;color:var(--v4-nav-txt)!important;width:36px;height:36px} #map-controls .btn .icon,#map-controls .btn i{color:var(--v4-nav-txt)!important;line-height:1!important} #map-controls #map-controls-layers .btn{background:var(--v4-btn)!important;border-bottom:1px solid rgba(0,0,0,.15)!important} #map-controls #map-controls-layers .btn .icon{color:#fff!important} #map-controls .btn:hover{filter:brightness(1.15)} /* Etiquetas de los equipos en el mapa */ .leaf-device-marker .name i{background:var(--v4-pill)!important;color:var(--v4-pill-txt)!important;border:1px solid var(--v4-line)!important;border-radius:6px!important;padding:2px 7px!important;font-style:normal;font-weight:500;box-shadow:0 2px 6px rgba(0,0,0,.25)} /* ---------- Barra inferior: tarjetas ---------- */ #bottombar,#widgets,#widgets .widgets-content{background:transparent!important;border:0!important;box-shadow:none!important} #widgets .widget{background:var(--v4-bg)!important;border:1px solid var(--v4-line)!important;border-radius:var(--v4-r);margin-right:8px;color:var(--v4-txt);box-shadow:var(--v4-shadow)} #widgets .widget .widget-heading{background:transparent!important;border-bottom:1px solid var(--v4-line)!important;color:var(--v4-txt)!important;font-weight:500} #widgets .widget .widget-heading .icon{color:var(--v4-acc)!important} #widgets .widget table td,#widgets .widget .widget-body,#widgets .widget .widget-body *:not(.icon):not(.btn){color:var(--v4-txt)!important;background:transparent!important;border-color:var(--v4-sep)!important} #widgets .widget table td:first-child,#widgets .widget .widget-body .title{color:var(--v4-txt2)!important} #bottombar .btn-collapse,#sidebar .btn-collapse{background:var(--v4-bg)!important;color:var(--v4-txt)!important;border:1px solid var(--v4-line)!important;border-radius:8px} /* ---------- Ventanas (modales) ---------- */ .modal-content{background:var(--v4-bg)!important;color:var(--v4-txt);border:1px solid var(--v4-line);border-radius:var(--v4-r);box-shadow:var(--v4-shadow2)} .modal-header{background:transparent!important;border-bottom:1px solid var(--v4-line)!important;color:var(--v4-txt)!important;padding:14px 20px!important} .modal-header .modal-title,.modal-header .icon{color:var(--v4-txt)!important} .modal-header .modal-title .icon{color:var(--v4-acc)!important} .modal-body{padding:18px 20px!important;color:var(--v4-txt)} .modal-footer{padding:12px 20px!important;border-top:1px solid var(--v4-line)!important;background:transparent!important;display:flex;gap:8px;justify-content:flex-start} .modal-footer .btn+.btn{margin-left:0!important} .modal .close{color:var(--v4-txt)!important;opacity:.8;text-shadow:none} .modal .nav-tabs,.nav-tabs.nav-default{background:var(--v4-bg2)!important;border-bottom:1px solid var(--v4-line)!important;padding:0 8px} .modal .nav-tabs>li>a{color:var(--v4-txt2)!important;background:transparent!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important} .modal .nav-tabs>li>a:hover{color:var(--v4-txt)!important} .modal .nav-tabs>li.active>a,.modal .nav-tabs>li.active>a:focus,.modal .nav-tabs>li.active>a:hover{color:var(--v4-acc-txt)!important;border-bottom-color:var(--v4-acc)!important;background:transparent!important} .modal-full .modal-content{background:var(--v4-bg)!important} /* ---------- Campos: todos del mismo alto y con el texto centrado ---------- */ .form-control,.bootstrap-select>.btn,.select2-selection,.input-group-addon{ background:var(--v4-fld)!important;border:1px solid var(--v4-fld-bd)!important;color:var(--v4-txt)!important;border-radius:8px!important} .form-control:focus,.bootstrap-select>.btn:focus{border-color:var(--v4-acc)!important;box-shadow:0 0 0 2px rgba(11,94,215,.25)!important;outline:0} .form-control::placeholder{color:var(--v4-txt3)} .form-control[disabled],.form-control[readonly]{opacity:.7} .bootstrap-select>.btn .filter-option,.bootstrap-select>.btn .caret{color:var(--v4-txt)!important} .form-control:not(textarea),.bootstrap-select>.btn,.bootstrap-select>.dropdown-toggle,.input-group-addon,.modal-footer .btn,.modal-body .btn:not(.btn-xs):not(.btn-sm){height:var(--v4-h)!important;min-height:var(--v4-h);box-sizing:border-box} .form-control:not(textarea),.bootstrap-select>.btn{padding-top:0!important;padding-bottom:0!important;line-height:34px!important} .bootstrap-select>.btn .filter-option{line-height:34px!important;top:0!important} .modal-footer .btn,.modal-body .btn:not(.btn-xs):not(.btn-sm),.input-group-addon{display:inline-flex!important;align-items:center;justify-content:center;padding-top:0!important;padding-bottom:0!important;line-height:1!important} .input-group-addon{color:var(--v4-txt2)!important} .modal .form-group{margin-bottom:14px!important} .modal .form-group>label,.modal .control-label{margin-bottom:6px!important;display:block;font-size:12px;color:var(--v4-txt2)!important;font-weight:500} label,.control-label{color:var(--v4-txt)!important;font-weight:500} .help-block,.text-muted,small{color:var(--v4-txt3)!important} .timeselect .btn.dropdown-toggle{padding-left:8px!important;padding-right:20px!important} .timeselect .bs-input{padding:0!important;min-width:40px;background:transparent!important;border:0!important;text-align:center;color:var(--v4-txt)!important} /* ---------- Desplegables y tablas ---------- */ .dropdown-menu{background:var(--v4-bg)!important;border:1px solid var(--v4-line)!important;border-radius:10px;box-shadow:var(--v4-shadow2)} .dropdown-menu>li>a,.dropdown-menu .text,.dropdown-header{color:var(--v4-txt)!important} .dropdown-menu>li>a:hover,.dropdown-menu>.active>a,.dropdown-menu>.selected>a{background:var(--v4-bg2)!important;color:var(--v4-txt)!important} .dropdown-menu .divider{background:var(--v4-line)!important} .bs-searchbox .form-control{height:32px!important} .table,.table>thead>tr>th,.table>tbody>tr>td{color:var(--v4-txt)!important;border-color:var(--v4-sep)!important;background:transparent!important} .table thead tr,.table thead th,.table-list thead tr{background:var(--v4-bg2)!important;color:var(--v4-txt2)!important;border-bottom:1px solid var(--v4-line)!important;font-weight:500} .table-striped>tbody>tr:nth-of-type(odd){background:var(--v4-stripe)!important} .table-hover>tbody>tr:hover{background:var(--v4-bg2)!important} .pagination>li>a,.pagination>li>span{background:var(--v4-bg)!important;border-color:var(--v4-line)!important;color:var(--v4-txt)!important} .pagination>.active>a,.pagination>.active>span{background:var(--v4-btn)!important;border-color:var(--v4-btn)!important;color:#fff!important} .alert{border-radius:10px} /* ---------- Ventanas emergentes del mapa ---------- */ .leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--v4-bg)!important;color:var(--v4-txt)!important;border-radius:10px;box-shadow:var(--v4-shadow2)} .leaflet-popup-content-wrapper *:not(.icon):not(.btn):not(a){color:inherit} .leaflet-popup-content-wrapper td:first-child{color:var(--v4-txt2)!important} .leaflet-container a.leaflet-popup-close-button{color:var(--v4-txt2)!important} .leaflet-tooltip{background:var(--v4-pill)!important;color:var(--v4-pill-txt)!important;border:1px solid var(--v4-line)!important;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.25)} .leaflet-tooltip::before{display:none} /* ---------- Panel (Herramientas > Panel) ---------- */ .panel,.panel-default{background:var(--v4-bg)!important;border:1px solid var(--v4-line)!important;border-radius:var(--v4-r)!important;box-shadow:var(--v4-shadow)!important;color:var(--v4-txt)} .panel-default>.panel-heading,.panel-heading{background:transparent!important;border-bottom:1px solid var(--v4-line)!important;color:var(--v4-txt)!important;font-weight:500;border-radius:var(--v4-r) var(--v4-r) 0 0} .panel-heading .icon,.panel-heading i{color:var(--v4-acc)!important} .panel-body,.panel-footer{background:transparent!important;color:var(--v4-txt)!important;border-color:var(--v4-line)!important} .panel .table td,.panel .table th,.panel li,.panel span{color:var(--v4-txt)} .panel .table>tbody>tr:nth-of-type(odd)>td{background:var(--v4-stripe)!important} .panel .table>tbody>tr>td{border-top:1px solid var(--v4-sep)!important} .flot-text,.flot-tick-label,.tickLabel,.legendLabel,.legend td{color:var(--v4-txt2)!important} .legend>div{background:transparent!important;opacity:0!important} .panel canvas{background:transparent!important} #dashboard b,#dashboard strong,#dashboard td,#dashboard a:not(.btn),#dashboard .value{color:var(--v4-txt)!important} #block_device_status_counts b,#block_device_status_counts a{color:var(--v4-acc-txt)!important;font-size:13px} /* ---------- Historial ---------- */ #sidebar .history{background:transparent!important} #sidebar .history .table>tbody>tr>td{background:transparent!important;border-top:1px solid var(--v4-sep)!important;color:var(--v4-txt)!important} #sidebar .history .table>tbody>tr>td *:not(.icon):not(i){color:inherit!important} #sidebar .history .table>tbody>tr:hover>td,#sidebar .history .table>tbody>tr.active>td{background:var(--v4-hover)!important} .action-icon.white,.badge-history{background:var(--v4-input)!important;color:var(--v4-txt)!important;border-color:var(--v4-line)!important} #bottom-history,#bottom-history .graph-controls,#bottom-history .bottom-history-header{background:var(--v4-bg)!important;color:var(--v4-txt)!important;border-color:var(--v4-line)!important} #bottom-history{border:1px solid var(--v4-line)!important;border-radius:var(--v4-r)!important;box-shadow:var(--v4-shadow2)!important;overflow:hidden} #bottom-history .bottom-history-header{border-bottom:1px solid var(--v4-line)!important} #bottom-history .nav-tabs{background:transparent!important;border:0!important} #bottom-history .nav-tabs>li>a,#bottom-history .nav-pills>li>a,#bottom-history a.btn{background:var(--v4-bg2)!important;color:var(--v4-txt2)!important;border:1px solid var(--v4-line)!important;border-radius:8px!important} #bottom-history .nav-tabs>li.active>a,#bottom-history .nav-pills>li.active>a{color:var(--v4-acc-txt)!important;border-color:var(--v4-acc)!important} #bottom-history .table td,#bottom-history .table th{color:var(--v4-txt)!important;border-color:var(--v4-sep)!important} /* ---------- Barras de desplazamiento ---------- */ *{scrollbar-width:thin;scrollbar-color:var(--v4-scroll) transparent} ::-webkit-scrollbar{width:8px;height:8px;background:transparent} ::-webkit-scrollbar-thumb{background:var(--v4-scroll);border-radius:8px} ::-webkit-scrollbar-track{background:transparent} /* ---------- Desplegables: filas iguales, icono y texto alineados y legibles ---------- */ .dropdown-menu{padding:6px!important;min-width:180px} .dropdown-menu>li>a{display:flex!important;align-items:center;gap:10px;min-height:32px;padding:6px 10px!important;border-radius:6px;line-height:18px!important;white-space:nowrap} .dropdown-menu>li>a .icon,.dropdown-menu>li>a>i{flex:0 0 16px;width:16px;text-align:center;margin:0!important;color:var(--v4-txt2)!important;font-size:13px;line-height:1} .dropdown-menu>li>a:hover .icon,.dropdown-menu>li>a:hover>i{color:var(--v4-acc-txt)!important} .dropdown-menu>li>a .text{flex:1;color:inherit!important} .dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a .icon{opacity:.5} /* dentro del menu lateral (siempre oscuro) */ #header .main-navbar .navbar-nav .dropdown-menu>li>a .icon,#header .main-navbar .navbar-nav .dropdown-menu>li>a>i, #header .main-navbar .navbar-nav .dropdown-menu>li>a:hover .icon,#header .main-navbar .navbar-nav .dropdown-menu>li>a:hover>i{color:var(--v4-nav-txt)!important} #header .main-navbar .navbar-nav .dropdown-menu>li>a,#header .main-navbar .navbar-nav .dropdown-menu>li>a:hover{color:var(--v4-nav-txt)!important} #header .main-navbar .navbar-nav .dropdown-menu>li>a:hover{background:var(--v4-nav2)!important} @media (min-width:1px){#header .main-navbar .navbar-nav>li.dropdown>a#dropTools+.dropdown-menu>li>a{padding:8px 10px!important;min-height:0}} /* selectores de varios elementos */ .bs-actionsbox .btn-group{display:flex!important;gap:6px;float:none!important} .bs-actionsbox .btn{flex:1;border-radius:8px!important;height:32px!important;min-height:32px;padding:0 8px!important;font-size:12px} .bs-actionsbox,.bs-searchbox{padding:6px!important} .bootstrap-select:has(select[multiple]) .dropdown-menu.inner>li:not(.dropdown-header){width:50%!important} .bootstrap-select:has(select[multiple]) .dropdown-menu.inner{max-height:260px!important} .bootstrap-select .dropdown-menu.inner>li>a{min-height:32px} .bootstrap-select .dropdown-menu.inner>li.selected>a{background:var(--v4-hover)!important} .bootstrap-select .dropdown-header{color:var(--v4-txt2)!important;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:8px 10px 4px!important} .bootstrap-select .dropdown-menu.inner>li.selected>a{color:var(--v4-txt)!important;font-weight:600;box-shadow:inset 3px 0 0 var(--v4-acc)} .bootstrap-select .dropdown-menu.inner>li.selected>a .check-mark{color:var(--v4-acc-txt)!important} /* ---------- Mapa: ocupa justo el espacio a la derecha del menu (sin desplazamiento lateral) ---------- */ @media (min-width:1px){#mapWrap{left:0!important;margin-left:var(--v4-side)!important;width:auto!important}} html{overflow-x:hidden} /* ---------- Lista de tipos de mapa (Carto, Google, OpenStreetMap...) ---------- */ .leaflet-control-layers{background:transparent!important;border:0!important;box-shadow:none!important} .leaflet-control-layers .leaflet-control-layers-list{background:var(--v4-bg)!important;color:var(--v4-txt)!important;border:1px solid var(--v4-line)!important;border-radius:10px!important;box-shadow:var(--v4-shadow2)!important;padding:6px!important;min-width:215px;max-height:calc(100vh - 80px);overflow-y:auto} .leaflet-control-layers-list label{display:block;margin:0!important;font-weight:400!important} .leaflet-control-layers-list label>div{position:relative;display:flex;align-items:center;min-height:32px;padding:4px 10px;border-radius:6px;cursor:pointer} .leaflet-control-layers-list label:hover>div{background:var(--v4-bg2)} .leaflet-control-layers-list input{position:absolute!important;opacity:0!important;width:0!important;height:0!important;margin:0!important} .leaflet-control-layers-list label span{display:flex!important;align-items:center;gap:10px;position:relative;white-space:nowrap;color:var(--v4-txt)!important;font-size:13px;line-height:18px} .leaflet-control-layers-list input:checked+span{color:var(--v4-acc-txt)!important;font-weight:600} .leaflet-control-layers-list label span::before{margin:0!important;flex:0 0 15px;background:var(--v4-input)!important;box-shadow:inset 0 0 0 1px var(--v4-chk-bd)!important;border:0!important;border-radius:4px!important;vertical-align:0!important;top:0!important} .leaflet-control-layers-list input:checked+span::before{background:var(--v4-acc)!important;box-shadow:none!important} .leaflet-control-layers-list label span::after{border:0!important;background:transparent!important;color:#fff!important;top:50%!important;left:0!important;width:15px!important;height:15px!important;line-height:15px!important;transform:translateY(-50%);text-align:center;font-size:10px!important} .leaflet-control-layers-separator{border-top:1px solid var(--v4-line)!important;margin:6px 0!important} /* ========================================================================== Ajustes 2-nov (comparado con gps.setragps.com v4.6) ========================================================================== */ /* franja blanca arriba (adorno del tema original) */ #header::before,#header::after,#header.folded::before{display:none!important} /* casillas: una sola caja de 16px (sin el marco claro de GPSWOX) */ .checkbox label::after,.checkbox-inline label::after{display:none!important} .checkbox label::before,.checkbox-inline label::before{content:""!important;width:16px!important;height:16px!important;padding:0!important;box-sizing:border-box!important;margin:0!important;border:0!important;border-radius:4px!important; display:inline-flex!important;align-items:center;justify-content:center;font-size:10px!important;line-height:1!important;color:transparent!important; background:var(--v4-input)!important;box-shadow:inset 0 0 0 1px var(--v4-chk-bd)!important;position:relative!important;left:0!important;top:0!important;vertical-align:middle!important} .checkbox input:checked+label::before,.checkbox-inline input:checked+label::before{font-family:icomoon!important;content:"\e90b"!important;background:var(--v4-acc)!important;box-shadow:none!important;color:#fff!important} .checkbox input[type=radio]+label::before{border-radius:50%!important} #sidebar .checkbox input:not(:checked)+label::before{background:transparent!important;box-shadow:inset 0 0 0 2px var(--v4-acc)!important} .icon-list .checkbox>label::before,.icon-list .checkbox-inline>label::before{display:none!important} /* textos como en gps */ @media (min-width:1px){ #header .main-navbar .navbar-nav>li>a,#header .main-navbar .navbar-nav>li.dropdown>.dropdown-menu>li>a{font-size:14px;min-height:34px;border-radius:10px!important} #header .main-navbar .navbar-nav>li>a .text,#header .main-navbar .navbar-nav .dropdown-menu .text{font-size:14px!important} #header .main-navbar .navbar-nav .icon{font-size:14px!important} } #objects_tab [data-device="name"]{font-size:12px!important;font-weight:500!important} #objects_tab [data-device="time"]{font-size:10px!important} #objects_tab [data-device="speed"]{font-size:10px!important} #ajax-items li[data-device-id]>.name{padding-left:8px!important} #objects_tab .group-heading{font-size:14px} #sidebar .search .form-control{height:32px!important;line-height:32px!important;font-size:12px;font-weight:500} /* barra inferior: contenedor redondeado con tarjetas de 280 x 184, como gps */ @media (min-width:1px){ #bottombar{padding:8px!important;background:var(--v4-bg)!important;border-radius:16px!important;box-shadow:var(--v4-shadow)!important;height:auto!important;max-width:calc(100% - var(--v4-side) - 330px - 3 * var(--v4-gap))} } #widgets,#widgets .widgets-content{width:100%!important;height:auto!important} #widgets .widgets-content{display:flex!important;gap:8px;overflow-x:auto!important;overflow-y:hidden!important;white-space:normal!important} #widgets .widget{flex:0 0 280px;width:280px!important;max-width:280px;height:184px!important;margin:0!important;background:transparent!important;box-shadow:none!important;border:1px solid var(--v4-line)!important;border-radius:12px!important;overflow:hidden;display:flex!important;flex-direction:column} #widgets .widget>.widget-heading{flex:0 0 38px;display:flex;align-items:center;padding:0 12px!important;font-size:14px} #widgets .widget>.widget-body,#widgets .widget>.widget-content,#widgets .widget>*:not(.widget-heading){flex:1 1 auto;overflow:auto;min-height:0} #widgets .widget:empty,#widgets .widget-camera:not(:has(.widget-heading)){display:none!important} #widgets .widget table td{font-size:12px;padding:5px 8px!important} /* pantalla de carga: oscura/clara segun el modo, con el logo centrado (como gps) */ #loading{background:var(--v4-body)!important} #loading::before{content:"";position:absolute;inset:0;background:url(/images/background.png) center/cover no-repeat;opacity:.2;pointer-events:none} #loading .middle,#loading .inner{position:relative;z-index:1} #loading .inner{text-align:center} #loading .inner::before{content:"";display:block;width:200px;height:200px;margin:0 auto 20px;background:var(--sv4-logo,none) center/contain no-repeat} #loading .loader{color:var(--v4-acc)!important;border-color:var(--v4-acc)!important} /* sin el gris mientras cargan los mapas */ .leaflet-container{background:var(--v4-body)!important} /* logo centrado y boton para plegar el menu */ @media (min-width:1px){ #header .main-navbar .navbar-header{position:relative;display:flex!important;align-items:center;justify-content:center;min-height:76px;padding:12px 40px!important} #header .main-navbar .navbar-brand{display:flex!important;align-items:center;justify-content:center} #header .main-navbar .navbar-brand img{height:52px!important;max-height:52px!important;width:auto} #sv4-plegar{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center; border:1px solid var(--v4-nav-bd);border-radius:8px;background:transparent;color:var(--v4-nav-txt2);cursor:pointer;padding:0;font-size:12px;line-height:1} #sv4-plegar:hover{color:var(--v4-nav-txt);background:var(--v4-nav2)} #header .navbar.main-navbar,#sidebar.sidebar.left,#mapWrap{transition:width .2s,left .2s,margin-left .2s} /* menu plegado: solo iconos */ html.sv4-mini{--v4-side:64px} html.sv4-mini #header .main-navbar .navbar-brand{display:none!important} html.sv4-mini #header .main-navbar .navbar-header{padding:14px 0!important;min-height:64px} html.sv4-mini #sv4-plegar{position:static;transform:none;width:36px;height:36px;font-size:16px} html.sv4-mini #header .main-navbar .navbar-collapse{padding:8px 6px 12px!important} html.sv4-mini #header .main-navbar .navbar-nav>li>a,html.sv4-mini #header #dropTools+.dropdown-menu>li>a{justify-content:center;padding:9px 0!important;gap:0} html.sv4-mini #header .main-navbar .navbar-nav .text,html.sv4-mini #header .main-navbar .navbar-nav .caret{display:none!important} html.sv4-mini #sv4-modo{padding:8px 2px 4px} html.sv4-mini #sv4-modo .sv4-tit,html.sv4-mini #sv4-modo .sv4-lbl{display:none} html.sv4-mini #sv4-modo .sv4-seg{flex-direction:column} } @media (min-width:1px){ #header .main-navbar .navbar-nav>li.dropdown>a#dropTools+.dropdown-menu{min-width:0!important;width:100%!important;padding:0 0 6px!important} html.sv4-mini #header .main-navbar .navbar-nav>li.dropdown>a#dropTools+.dropdown-menu>li>a{padding:9px 0!important;justify-content:center;gap:0} html.sv4-mini #header .navbar.main-navbar{scrollbar-width:none} html.sv4-mini #header .navbar.main-navbar::-webkit-scrollbar{display:none} } /* ---------- Tableta y celular (menu arriba, GPSWOX lo muestra por debajo de 992 px) ---------- */ #header .main-navbar .navbar-brand{border:0!important} #header .main-navbar .navbar-brand:before,#header .main-navbar .navbar-brand:after,#header .main-navbar .navbar-nav::before,#header .main-navbar .navbar-nav::after{display:none!important} #header .main-navbar .navbar-collapse,#header .main-navbar .navbar-header{border-color:var(--v4-nav-line)!important;box-shadow:none!important} /* ---------- Botones para contraer el panel y la barra inferior (sin triangulos blancos) ---------- */ .btn-collapse::before,.btn-collapse::after{display:none!important} #sidebar>.btn-collapse,#widgets>.btn-collapse,#bottombar .btn-collapse{background:var(--v4-bg)!important;border:1px solid var(--v4-line)!important;color:var(--v4-txt)!important;box-shadow:var(--v4-shadow)!important;display:flex!important;align-items:center;justify-content:center} #sidebar>.btn-collapse{border-radius:0 8px 8px 0!important;border-left:0!important} #widgets>.btn-collapse{border-radius:8px 8px 0 0!important;border-bottom:0!important} .btn-collapse i,.btn-collapse i::before{color:var(--v4-txt)!important} /* panel contraido: sin la linea */ #sidebar.collapsed{box-shadow:none!important} #sidebar.collapsed .sidebar-content{border:0!important;box-shadow:none!important} /* barra inferior contraida (GPSWOX pone la clase "collapsed") */ #widgets.collapsed .widgets-content{height:0!important;min-height:0!important;overflow:hidden!important;padding:0!important} #bottombar:has(#widgets.collapsed){padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important} /* botones de la derecha del mapa: sin marcos blancos; los no activos con el icono atenuado */ #map-controls .btn{box-shadow:none!important} #map-controls #map-controls-layers .btn{background:var(--v4-btn)!important;border-bottom:1px solid rgba(0,0,0,.18)!important} #map-controls #map-controls-layers .btn:not(.active) .icon{opacity:.55} #map-controls #map-controls-layers .btn.active{background:var(--v4-btn2)!important} #map-controls #map-controls-layers .btn.active .icon{opacity:1} /* ========================================================================== Ajustes 2-nov (2): otras paginas, ventanas y selectores ========================================================================== */ /* paginas con barra superior propia (Mantenimiento, etc.): el menu lateral es solo del mapa */ #header .navbar-main{background:var(--v4-nav)!important;border:0!important;border-bottom:1px solid var(--v4-nav-line)!important;border-radius:0!important;margin:0!important} #header .navbar-main .navbar-nav>li>a,#header .navbar-main .navbar-nav>li>a .icon,#header .navbar-main .navbar-nav .text{color:var(--v4-nav-txt)!important;background:transparent!important} #header .navbar-main .navbar-nav>li>a:hover{background:var(--v4-nav2)!important} #header .navbar-main .navbar-brand img{height:40px;width:auto} /* filas de tablas al pasar el raton (Alertas, Logs de comandos...) */ .table>tbody>tr:hover,.table.table-list>tbody>tr:hover,.table>tbody>tr:hover>td{background:var(--v4-bg2)!important;color:var(--v4-txt)!important} .history .table tr.active>td{background:var(--v4-hover)!important} /* calendario (selector de fechas) */ .datepicker,.datepicker.dropdown-menu{background:var(--v4-bg)!important;color:var(--v4-txt)!important;border:1px solid var(--v4-line)!important;border-radius:10px!important} .datepicker:before,.datepicker:after{border-bottom-color:var(--v4-bg)!important} .datepicker table tr td,.datepicker table tr th{color:var(--v4-txt)!important;background:transparent!important;text-shadow:none!important;border-color:transparent!important} .datepicker table tr td.old,.datepicker table tr td.new,.datepicker table tr td.disabled{color:var(--v4-txt3)!important} .datepicker table tr td.day:hover,.datepicker table tr td span:hover,.datepicker th.prev:hover,.datepicker th.next:hover,.datepicker th.datepicker-switch:hover{background:var(--v4-bg2)!important} .datepicker table tr td.today{background:var(--v4-hover)!important;color:var(--v4-txt)!important} .datepicker table tr td.active,.datepicker table tr td.active:hover,.datepicker table tr td.selected,.datepicker table tr td.selected:hover,.datepicker table tr td span.active{background:var(--v4-btn)!important;color:#fff!important;border-color:var(--v4-btn)!important} /* selectores de varios dispositivos (Enviar comando, Compartir ubicacion...): casilla de una sola caja */ .bootstrap-select.btn-group.show-tick .dropdown-menu>li a span.text::after{display:none!important} .bootstrap-select.btn-group.show-tick .dropdown-menu>li a span.text::before{content:""!important;width:16px!important;height:16px!important;padding:0!important;margin:0 8px 0 0!important;box-sizing:border-box!important;border:0!important;border-radius:4px!important; display:inline-flex!important;align-items:center;justify-content:center;vertical-align:middle!important;font-size:10px!important;line-height:1!important;color:transparent!important; background:var(--v4-input)!important;box-shadow:inset 0 0 0 1px var(--v4-chk-bd)!important;position:relative!important;top:-1px!important} .bootstrap-select.btn-group.show-tick .dropdown-menu>li.selected a span.text::before{font-family:icomoon!important;content:"\e90b"!important;background:var(--v4-acc)!important;box-shadow:none!important;color:#fff!important} /* encabezados de grupo dentro del selector ("Sin grupo", etc.) */ .bootstrap-select .dropdown-menu li.dropdown-header,.dropdown-menu>li.dropdown-header{background:var(--v4-bg2)!important;color:var(--v4-txt)!important;border-radius:6px;display:flex;align-items:center;gap:8px;text-transform:none!important;font-size:12px!important} .bootstrap-select .dropdown-menu li.dropdown-header .text{color:var(--v4-txt)!important} /* el selector abierto queda por encima de los campos de abajo (Email...) */ .bootstrap-select.open>.dropdown-menu{z-index:1060!important} .bs-pagination .pagination{margin:6px 0 0!important} /* opciones redondas (Ninguna / Duracion / Fecha...) */ .radio>label,.radio-inline>label{display:inline-block!important;line-height:normal!important;gap:0} .radio label::before,.radio-inline label::before{margin:3px 5px 3px 3px!important;box-shadow:none!important;background:transparent!important;flex:none} .radio input:checked+label::before,.radio-inline input:checked+label::before{background:var(--v4-acc)!important} .radio label::after,.radio-inline label::after{background:var(--v4-input)!important;border-color:var(--v4-chk-bd)!important} .radio input:checked+label::after,.radio-inline input:checked+label::after{border-color:var(--v4-acc)!important} .radio label,.radio-inline label{color:var(--v4-txt)!important} /* grupos del panel lateral en todas las pestanas (Geocercas, Puntos de interes, Rutas...) */ #sidebar .group{background:var(--v4-bg)!important;border:1px solid var(--v4-line)!important;border-radius:10px;margin:0 10px 10px;overflow:hidden} #sidebar .group-heading{background:var(--v4-bg)!important;border:0!important;color:var(--v4-txt)!important;font-weight:500} #sidebar .group-heading *:not(.icon):not(.btn):not(i){color:var(--v4-txt)!important} #sidebar .group-heading .btn,#sidebar .group-heading i{color:var(--v4-txt2)!important} #sidebar .group-list>li,#sidebar .tab-pane-body li{background:var(--v4-bg)!important;color:var(--v4-txt)!important;border-color:var(--v4-sep)!important} #sidebar .group-list>li:hover{background:var(--v4-bg2)!important} #sidebar .no-results{color:var(--v4-txt2)!important} /* selectores multiples (GPSWOX los muestra siempre abiertos): cerrados hasta hacer clic y se abren encima, como en gps */ .bootstrap-select.multiexpand{position:relative!important;height:auto!important} .bootstrap-select.multiexpand:not(.open)>.dropdown-menu{display:none!important} .bootstrap-select.multiexpand.open>.dropdown-menu{display:block!important;position:absolute!important;top:100%!important;left:0!important;right:0!important;width:100%!important;max-width:none!important;float:none!important;margin-top:4px!important;z-index:1060!important; background:var(--v4-bg)!important;border:1px solid var(--v4-line)!important;border-radius:10px!important;box-shadow:var(--v4-shadow2)!important;padding:6px!important} .bootstrap-select.multiexpand .dropdown-menu.inner{clear:both;position:static!important;box-shadow:none!important;border:0!important} /* Configuracion > Pestanas / Panel: cajas de widgets */ .dashboard-widget{background:var(--v4-bg2)!important;border:1px solid var(--v4-line)!important;border-radius:8px!important;color:var(--v4-txt)!important} .dashboard-widget label,.dashboard-widget .checkbox-inline label{color:var(--v4-txt)!important} .dashboard-widget .sortdragger,.dashboard-widget .sortdragger i{color:var(--v4-txt2)!important;background:transparent!important;border:0!important} [data-disablable] .checkbox-inline input:disabled+label,[data-disablable] .checkbox input:disabled+label{opacity:.6} /* ---------- Celular y tableta: barra inferior ---------- */ /* GPSWOX deja a la izquierda el espacio del panel (padding-left en linea); se respeta */ /* computadora: con el panel contraido, la barra ocupa ese espacio */ @media (min-width:1px){ body:has(#sidebar.collapsed) #bottombar{left:calc(var(--v4-side) + var(--v4-gap))!important;max-width:none!important} } #bottombar{transition:none!important} /* ---------- Tableta y celular: el mismo diseno de la web (como gps v4.6 en el telefono) ---------- */ #header .main-navbar .navbar-toggle{display:none!important} #sv4-velo{display:none} @media (max-width:991px){ #header .main-navbar .navbar-collapse{max-height:none!important;overflow:visible!important} #header .main-navbar .container-fluid>.navbar-header,#header .main-navbar .container-fluid>.navbar-collapse{margin-left:0!important;margin-right:0!important} } @media (min-width:768px) and (max-width:991px){#sidebar.sidebar.left{width:330px!important;padding-bottom:0!important}} @media (max-width:767px){ /* riel de iconos de 52 px */ html.sv4-mini{--v4-side:52px} html.sv4-mini #header .main-navbar .navbar-header{padding:10px 0!important;min-height:52px} html.sv4-mini #sv4-plegar{width:32px;height:32px;font-size:15px} html.sv4-mini #header .main-navbar .navbar-collapse{padding:6px 5px 10px!important} html.sv4-mini #header .main-navbar .navbar-nav>li>a,html.sv4-mini #header #dropTools+.dropdown-menu>li>a{padding:8px 0!important;min-height:32px} /* panel flotante: ancho de la pantalla menos el riel, y alto segun el contenido */ #sidebar.sidebar.left{width:calc(100vw - var(--v4-side) - 2 * var(--v4-gap))!important;max-width:330px; bottom:calc(200px + 2 * var(--v4-gap))!important;padding-bottom:0!important;background:transparent!important} #header .navbar.main-navbar{max-height:100vh} body:has(#widgets.collapsed) #sidebar.sidebar.left{bottom:calc(46px + var(--v4-gap))!important} #sidebar.sidebar.left.collapsed{width:0!important} /* barra inferior flotante debajo del panel */ #bottombar,body:has(#sidebar.collapsed) #bottombar{left:calc(var(--v4-side) + var(--v4-gap))!important;right:var(--v4-gap)!important;max-width:none!important} #widgets .widgets-content{scroll-snap-type:x mandatory} #widgets .widget{scroll-snap-align:start;max-width:calc(100vw - var(--v4-side) - 2 * var(--v4-gap) - 18px)!important} /* botones del mapa a la derecha, sin meterse bajo la barra inferior */ #map-controls,#map-controls.top-right{top:var(--v4-gap)!important;right:var(--v4-gap)!important;bottom:auto!important;max-height:calc(100vh - 2 * var(--v4-gap) - 212px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none} #map-controls::-webkit-scrollbar{display:none} body:has(#widgets.collapsed) #map-controls{max-height:calc(100vh - 70px)} /* menu abierto con nombres (boton de arriba), encima del mapa */ html.sv4-abierto{--v4-side:52px} html.sv4-abierto #header .navbar.main-navbar{width:222px!important;z-index:1200!important;box-shadow:6px 0 24px rgba(0,0,0,.45)} html.sv4-abierto #sv4-velo{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1190} html.sv4-abierto #header{z-index:1200!important} } /* ===================== Igual que gps.setragps.com (v4.6) ===================== */ /* menu en 3 zonas: arriba (☰ y Administrador), en medio la lista con desplazamiento, abajo fijo (configuracion, cuenta, idioma, apariencia) */ #header .navbar.main-navbar{overflow:hidden!important} #header .main-navbar .container-fluid{height:100%;min-height:0} #header .main-navbar .navbar-header{flex:0 0 auto} #header .main-navbar .navbar-collapse{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden!important} #header .main-navbar .navbar-nav.navbar-right{flex:1 1 auto;min-height:0;flex-wrap:nowrap} #header .main-navbar .navbar-nav.navbar-right>li:first-child{flex:0 0 auto;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--v4-nav-line)} #header .main-navbar .navbar-nav.navbar-right>li.dropdown:has(>#dropTools){flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--v4-scroll) transparent;margin-bottom:6px} #header .main-navbar .navbar-nav.navbar-right>li.dropdown:has(>#dropTools)>.dropdown-menu{border-bottom:0!important;margin:0!important} #header .main-navbar .navbar-nav.navbar-right>li.dropdown:has(>#dropTools)+li{border-top:1px solid var(--v4-nav-line);padding-top:6px} #header .main-navbar .navbar-nav.navbar-right>li:not(:first-child):not(:has(>#dropTools)){flex:0 0 auto} #sv4-modo{margin-top:0!important} /* elemento activo: cuadro claro con icono oscuro */ #header .main-navbar .navbar-nav li.sv4-act>a,#header .main-navbar .navbar-nav>li.dropdown>.dropdown-menu>li.sv4-act>a,#header .main-navbar .navbar-nav>li.dropdown>a#dropTools+.dropdown-menu>li.sv4-act>a{background:var(--v4-nav-act)!important;color:var(--v4-nav-act-txt)!important} #header .main-navbar .navbar-nav li.sv4-act>a .icon,#header .main-navbar .navbar-nav li.sv4-act>a i,#header .main-navbar .navbar-nav>li.dropdown>.dropdown-menu>li.sv4-act>a .icon,#header .main-navbar .navbar-nav>li.dropdown>.dropdown-menu>li.sv4-act>a .text{color:var(--v4-nav-act-txt)!important} #sv4-unidades .icon{font-family:FontAwesome!important;font-style:normal} /* sin la pestana lateral para plegar el panel: se pliega con ‹ y se abre con "Unidades" (como gps) */ #sidebar>.btn-collapse{display:none!important} /* apariencia en el menu plegado: un solo boton que cambia de modo */ html.sv4-mini #sv4-modo .sv4-seg{background:transparent;border:0;padding:0} html.sv4-mini #sv4-modo .sv4-seg button:not(.sv4-on){display:none} html.sv4-mini #sv4-modo .sv4-seg button.sv4-on{height:34px;border-radius:17px;background:var(--v4-btn)} /* encabezado del panel: boton para plegar + titulo (como "‹ Unidades") */ #sv4-cab{display:flex;align-items:center;gap:12px;padding:12px 12px 10px;border-bottom:1px solid var(--v4-line);background:var(--v4-bg)} #sv4-cab button{flex:0 0 36px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--v4-line);border-radius:10px;background:transparent;color:var(--v4-txt);padding:0;cursor:pointer;font-size:15px} #sv4-cab button:hover{background:var(--v4-hover)} #sv4-cab .sv4-cab-ic{color:var(--v4-acc);font-size:18px} #sv4-cab .sv4-cab-tit{font-size:18px;font-weight:500;color:var(--v4-txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #sidebar.sv4-sub .sidebar-content>.nav-tabs{display:none!important} #sidebar .nav-tabs{padding-top:4px} /* grupos: flecha a la izquierda, contador como etiqueta, sin + / − */ #objects_tab .group-heading{position:relative;padding-left:34px!important} #objects_tab .group-heading .group-title{position:static!important} #objects_tab .group-heading .group-title::after{content:"\f107"!important;font-family:FontAwesome!important;position:absolute!important;left:12px!important;right:auto!important;top:50%!important;transform:translateY(-50%);width:14px!important;text-align:center;font-size:18px!important;color:var(--v4-txt)!important;background:none!important} #objects_tab .group-heading .group-title.collapsed::after,#objects_tab .group-heading .group-title[aria-expanded="false"]::after{content:"\f105"!important} #objects_tab .group-heading .count{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:24px;padding:0 8px;margin-left:8px;border-radius:6px;background:var(--v4-input);color:var(--v4-txt)!important;font-size:12px;font-weight:500;vertical-align:middle} #objects_tab .group-heading .count::before,#objects_tab .group-heading .count::after{content:none!important;display:none!important} /* unidades: el menu de 3 puntos queda discreto */ #ajax-items li[data-device-id] .details .btn-group .options{opacity:.45} #ajax-items li[data-device-id]:hover .details .btn-group .options{opacity:1} /* tarjeta inferior como gps */ #widgets{position:relative} #widgets:not(.collapsed)>.btn-collapse{position:absolute!important;top:8px!important;right:8px!important;left:auto!important;bottom:auto!important;margin:0!important;width:36px!important;height:36px!important;border-radius:10px!important;border:1px solid var(--v4-line)!important;background:var(--v4-bg)!important;box-shadow:none!important;z-index:5;transform:none!important} #widgets .widget>.widget-heading{padding-right:52px!important} #widgets .widget-device .widget-title{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;font-size:16px!important;font-weight:500} #widgets .widget-device .widget-title [data-device="name"]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} #widgets .widget-device .widget-title>.icon{color:var(--v4-acc)!important;flex:0 0 auto} #widgets .widget-device .widget-actions{display:none!important} #widgets .widget .table>tbody>tr>td{vertical-align:top!important;border-top:0!important;border-bottom:1px solid var(--v4-line)!important;padding:8px 10px!important} #widgets .widget .table>tbody>tr:last-child>td{border-bottom:0!important} #widgets .widget .table>tbody>tr>td:first-child{width:42%;color:var(--v4-txt)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0} #widgets .widget .table [data-device="address"]{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} @media (max-width:767px){ #widgets .widget{flex:0 0 100%!important;width:100%!important;max-width:100%!important;height:184px!important} #widgets .widget>.widget-heading{flex:0 0 46px!important;font-size:16px} } /* formularios del panel (Historial, Eventos...): etiqueta arriba y campo a todo el ancho, como gps */ #sidebar .bootstrap-select.form-control{padding:0!important;background:transparent!important} #sidebar .bootstrap-select.form-control>.dropdown-toggle{width:100%!important;float:none!important} #sidebar .tab-pane .form-group{margin-left:0!important;margin-right:0!important;margin-bottom:12px} #sidebar .tab-pane .form-group>.control-label[class*="col-"]{float:none!important;width:100%!important;display:block;text-align:left!important;padding:0 2px 6px!important;margin:0!important;font-size:13px;color:var(--v4-txt2)!important} #sidebar .tab-pane .form-group>[class*="col-"]:not(.control-label){float:none!important;width:100%!important;padding:0!important} #sidebar .tab-pane .form-group .input-group{display:flex!important;width:100%!important;gap:8px} #sidebar .tab-pane .form-group .input-group>.form-control{flex:1 1 auto;width:auto!important;min-width:0!important;border-radius:10px!important} #sidebar .tab-pane .form-group .input-group>.input-group-btn{flex:0 0 112px;width:112px!important;min-width:0;display:block} #sidebar .tab-pane .form-group .input-group-btn .bootstrap-select,#sidebar .tab-pane .form-group .input-group-btn .bootstrap-select>.dropdown-toggle{width:100%!important;margin:0!important;left:0!important} #sidebar .tab-pane .form-group .bootstrap-select>.dropdown-toggle{background:var(--v4-input)!important;border-color:transparent!important;border-radius:10px!important} #sidebar .tab-pane .form-group .timeselect .dropdown-toggle{display:flex!important;align-items:center;padding:0 10px!important} #sidebar .tab-pane .form-group .timeselect .dropdown-toggle .bs-input{flex:1;min-width:0;width:100%!important;height:auto!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;text-align:left;color:var(--v4-txt)!important} #sidebar .tab-pane .form-group .datepicker{border-radius:10px!important;text-align:left;padding-left:14px!important} /* logo del menu: el de cada cliente (puede ser ancho), sin salirse */ #header .main-navbar .navbar-brand img{max-width:100%!important;object-fit:contain} /* ===================== Grafico del historial (como gps) ===================== */ #bottom-history{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;color:var(--v4-txt)} #bottom-history .bottom-history-header{display:flex!important;flex-direction:column;gap:8px;padding:0 0 8px!important;margin:0!important;background:transparent!important;border:0!important;height:auto!important} #bottom-history .bottom-history-header>ul.pull-right{float:none!important;display:flex!important;gap:8px;width:100%;margin:0!important;padding:0!important;border:0!important;background:transparent!important} #bottom-history .bottom-history-header>ul.pull-right>li{float:none!important;flex:1 1 0;margin:0!important;min-width:0} #bottom-history .bottom-history-header>ul.pull-right>li:last-child{flex:0 0 36px} #bottom-history .bottom-history-header>ul.pull-right>li>a{display:flex!important;align-items:center;justify-content:center;gap:6px;height:36px!important;padding:0 10px!important;margin:0!important; border:1px solid var(--v4-line)!important;border-radius:10px!important;background:transparent!important;color:var(--v4-txt)!important;font-size:14px!important;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:none!important} #bottom-history .bottom-history-header>ul.pull-right>li>a i{display:none} #bottom-history .bottom-history-header>ul.pull-right>li:last-child>a i{display:inline-block;color:var(--v4-txt)!important} #bottom-history .bottom-history-header>ul.pull-right>li.active>a{border-color:var(--v4-acc)!important;color:var(--v4-txt)!important} #bottom-history .bottom-history-header>ul.pull-right>li>a:hover{background:var(--v4-hover)!important} /* sensores: lista desplegable en lugar de muchos botones */ #graph_sensors.sv4-oculto{display:none!important} #sv4-sensor{position:relative;width:100%} #sv4-sensor select{appearance:none;-webkit-appearance:none;width:100%;height:40px;padding:0 40px 0 14px;border:1px solid var(--v4-line);border-radius:10px;background:var(--v4-bg);color:var(--v4-txt);font:inherit;font-size:14px;cursor:pointer} #sv4-sensor select:focus{outline:0;border-color:var(--v4-acc)} #sv4-sensor::after{content:"\f107";font-family:FontAwesome;position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--v4-txt);font-size:18px} #sv4-sensor option{background:var(--v4-bg);color:var(--v4-txt)} /* controles: reproducir / pausa / detener, velocidad, zoom */ #bottom-history .graph-controls{display:flex!important;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:8px 0 4px!important;margin:0!important;border-top:1px solid var(--v4-line);background:transparent!important;height:auto!important} #bottom-history .graph-controls>ul{float:none!important;display:flex!important;align-items:center;gap:4px;margin:0!important;padding:0!important} #bottom-history .graph-controls>ul.pull-right{margin-left:auto!important} #bottom-history .graph-controls>ul>li{float:none!important;margin:0!important} #bottom-history .graph-controls .btn-xs{display:flex!important;align-items:center;justify-content:center;width:34px!important;height:34px!important;padding:0!important;border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;color:var(--v4-txt)!important} #bottom-history .graph-controls .btn-xs:hover{background:var(--v4-hover)!important} #bottom-history .graph-controls .btn-xs i{font-size:16px!important;color:var(--v4-txt)!important} #bottom-history .graph-controls>ul.pull-right .btn-xs i{color:var(--v4-acc)!important;font-size:18px!important} #bottom-history .graph-controls .bootstrap-select.form-control{width:84px!important;height:34px!important;padding:0!important;background:transparent!important;margin:0 0 0 6px!important} #bottom-history .graph-controls .bootstrap-select>.dropdown-toggle{height:34px!important;border:1px solid var(--v4-line)!important;border-radius:10px!important;background:transparent!important;color:var(--v4-txt)!important;padding:0 10px!important;display:flex!important;align-items:center;justify-content:space-between} #bottom-history .graph-controls #hoverdata,#bottom-history .graph-controls #hoverdata-date{font-size:13px;color:var(--v4-txt);padding:0 4px;white-space:nowrap} #bottom-history .collapse-control a{background:var(--v4-bg)!important;border:1px solid var(--v4-line)!important;color:var(--v4-txt)!important} #bottom-history .graph-1-wrap{background:transparent!important;padding:4px 0 0!important} @media (max-width:767px){ body:has(#bottom-history[style*="block"]) #sidebar.sidebar.left{bottom:calc(var(--sv4-hist-h, 380px) + 2 * var(--v4-gap))!important} } #bottom-history .bottom-history-header>ul.pull-right{padding:0!important;margin:0!important} #bottom-history .bottom-history-header>ul.pull-right>li>a{width:100%} @media (max-width:767px){ #bottom-history .graph-controls>ul.pull-right{display:contents!important;width:auto} #bottom-history .graph-controls>ul.pull-right>li:nth-child(3){margin-left:auto!important} #bottom-history .graph-controls #hoverdata{order:20;margin-left:auto!important} #bottom-history .graph-controls #hoverdata-date{order:21} #bottom-history .graph-1{height:200px!important} } /* ===================== Ventanita de la unidad en el mapa (y las de historial, eventos, geocercas) ===================== */ .leaflet-popup-content-wrapper{padding:0!important;overflow:hidden;border:1px solid var(--v4-line)!important;border-radius:12px!important} .leaflet-popup-content{margin:0!important;color:var(--v4-txt)!important;background:var(--v4-bg)!important;box-shadow:none!important} .leaflet-popup .popup-content,.leaflet-popup .popup-content .tab-content,.leaflet-popup .popup-content .tab-pane, .leaflet-popup .popup-body,.leaflet-popup .popup-body *,.leaflet-popup table,.leaflet-popup tbody,.leaflet-popup tr,.leaflet-popup th,.leaflet-popup td{background-color:transparent!important} .leaflet-popup .popup-content,.leaflet-popup .popup-body{color:var(--v4-txt)!important} .leaflet-popup .popup-header{display:flex!important;align-items:center;gap:8px;flex-direction:row-reverse;min-height:46px;padding:0 6px 0 14px!important; background:var(--v4-bg2)!important;border:0!important;border-bottom:1px solid var(--v4-line)!important;color:var(--v4-txt)!important} .leaflet-popup .popup-header .popup-title{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;font-weight:600;color:var(--v4-txt)!important;background:transparent!important;padding:0!important;opacity:1!important} .leaflet-popup .popup-header .nav,.leaflet-popup .popup-header ul{float:none!important;display:flex!important;gap:2px;margin:0!important;padding:0!important;border:0!important;background:transparent!important;flex:0 0 auto} .leaflet-popup .popup-header .nav>li{float:none!important;margin:0!important;background:transparent!important;border:0!important} .leaflet-popup .popup-header .nav>li>a,.leaflet-popup .popup-header .btn,.leaflet-popup .popup-header a{display:flex!important;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 8px!important;margin:0!important; border:0!important;border-radius:8px!important;background:transparent!important;color:var(--v4-txt)!important;box-shadow:none!important} .leaflet-popup .popup-header .nav>li>a:hover,.leaflet-popup .popup-header a:hover{background:var(--v4-hover)!important} .leaflet-popup .popup-header .nav>li.active>a{box-shadow:inset 0 -2px 0 var(--v4-acc)!important;color:var(--v4-acc-txt)!important} .leaflet-popup .popup-header i,.leaflet-popup .popup-header .icon{color:inherit!important} .leaflet-popup .popup-header::before,.leaflet-popup .popup-header::after,.leaflet-popup .popup-header .nav::before,.leaflet-popup .popup-header .nav::after{display:none!important} .leaflet-popup .popup-body{padding:6px 12px 4px!important} .leaflet-popup .popup-body table{width:100%;margin:0!important} .leaflet-popup .popup-body th,.leaflet-popup .popup-body td{padding:6px 4px!important;border:0!important;border-bottom:1px solid var(--v4-line)!important;vertical-align:top;font-size:13px;line-height:1.4;opacity:1!important} .leaflet-popup .popup-body tr:last-child>th,.leaflet-popup .popup-body tr:last-child>td{border-bottom:0!important} .leaflet-popup .popup-body th{color:var(--v4-txt2)!important;font-weight:500;text-align:left!important;white-space:nowrap;width:1%;padding-right:12px!important} .leaflet-popup .popup-body td,.leaflet-popup .popup-body td *{color:var(--v4-txt)!important} .leaflet-popup .popup-body td a,.leaflet-popup .popup-body td a *{color:var(--v4-acc-txt)!important} .leaflet-popup .popup-body .ico-options-h,.leaflet-popup .popup-body .btn.icon{color:var(--v4-txt2)!important;background:transparent!important;border:0!important} .leaflet-popup-device .leaflet-popup-content{width:min(340px,calc(100vw - var(--v4-side) - 40px))!important} .leaflet-popup-device .popup-body{max-height:calc(100vh - 260px);overflow-y:auto} /* cargando (listas, grupos, ventanas): velo del color del tema en lugar de gris/blanco */ .loading .backdrop,#loading .backdrop{background-color:var(--v4-bg)!important;opacity:.7!important;border-radius:inherit} .loading{border-radius:inherit} .loading .loader,.loader{color:var(--v4-acc)!important;border-color:var(--v4-acc)!important} /* listas de varios elementos: buscador y "Seleccionar / Deseleccionar todo" cada uno en su fila, sin encimarse */ .bootstrap-select .dropdown-menu>.bs-searchbox,.bootstrap-select .dropdown-menu>.bs-actionsbox{float:none!important;width:100%!important;display:block!important;clear:both;box-sizing:border-box} .bootstrap-select .bs-searchbox .form-control{width:100%!important;padding-left:34px!important} .bootstrap-select .bs-actionsbox .btn-group{width:100%!important} .bootstrap-select .bs-actionsbox .btn{flex:1 1 0!important;width:auto!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important; display:flex!important;align-items:center;justify-content:center;text-align:center;line-height:1!important;background:transparent!important;border:1px solid var(--v4-fld-bd)!important;color:var(--v4-acc-txt)!important} .bootstrap-select .bs-actionsbox .btn:hover{background:var(--v4-hover)!important} @media (max-width:767px){ /* en el celular, una sola columna para que los nombres no se corten */ .bootstrap-select:has(select[multiple]) .dropdown-menu.inner>li:not(.dropdown-header){width:100%!important;float:none!important} .bootstrap-select .dropdown-menu.inner>li>a .text{white-space:normal!important;word-break:break-word} } /* menus del panel (Exportar, + Agregar...): se abren hacia adentro para no cortarse en el borde */ #sidebar .btn-group:not(.dropleft):not(.bootstrap-select)>.dropdown-menu{left:auto!important;right:0!important} /* barra inferior en computadora/tableta: tarjeta de la unidad y de sensores con TODO el contenido (como gps) */ @media (min-width:768px){ #widgets .widget.widget-device{flex:0 0 auto!important;width:auto!important;min-width:280px;max-width:430px!important} #widgets .widget-device .table>tbody>tr>td:first-child{width:1%!important;max-width:none!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;padding-right:16px!important} #widgets .widget-device .table>tbody>tr>td{padding:6px 10px!important;line-height:1.35} #widgets .widget-device .table>tbody>tr>td:last-child{white-space:normal} #widgets .widget-device .table [data-device="address"]{display:inline!important;-webkit-line-clamp:unset!important;overflow:visible!important} #widgets .widget.widget-sensors{flex:0 0 auto!important;width:auto!important;min-width:280px;max-width:none!important} #widgets .widget-sensors .widget-body{overflow-x:hidden;overflow-y:auto} #widgets .widget-sensors [data-device="sensors"] table{display:block!important;width:auto!important;margin:0!important} #widgets .widget-sensors [data-device="sensors"] tbody{display:grid!important;grid-auto-flow:column;grid-template-rows:repeat(4,auto);column-gap:28px;padding:2px 4px} #widgets .widget-sensors [data-device="sensors"] tr{display:flex!important;align-items:center;gap:14px;min-width:190px;border-bottom:1px solid var(--v4-line)} #widgets .widget-sensors [data-device="sensors"] tr>td{display:block;border:0!important;padding:6px 2px!important;white-space:nowrap!important;width:auto!important;max-width:none!important;overflow:visible!important;text-overflow:clip!important} #widgets .widget-sensors [data-device="sensors"] tr>td:last-child{margin-left:auto;text-align:right} #widgets .widget-sensors [data-device="sensors"] tr>td .icon{margin-right:8px;color:var(--v4-txt2)} } @media (min-width:768px){ /* sensores compactos: 4 filas por columna que caben sin desplazarse (tamano como gps) */ #widgets .widget-sensors [data-device="sensors"] tbody{row-gap:0;padding:0 2px} #widgets .widget-sensors [data-device="sensors"] tr{min-height:0;height:33px} #widgets .widget-sensors [data-device="sensors"] tr>td{font-size:12px!important;line-height:16px!important;padding:0 2px!important;display:flex!important;align-items:center;height:32px} #widgets .widget-sensors [data-device="sensors"] tr>td img{width:16px!important;height:16px!important;max-width:16px;margin-right:8px;object-fit:contain} #widgets .widget-sensors [data-device="sensors"] tr>td .icon,#widgets .widget-sensors [data-device="sensors"] tr>td i{font-size:14px!important;width:16px;text-align:center;margin-right:8px} #widgets .widget-sensors .widget-body{overflow:hidden!important;padding-top:2px} #widgets .widget-device .table>tbody>tr>td{font-size:12px!important} #widgets .widget>.widget-heading{font-size:14px!important} } /* menu lateral: sin la forma de pastilla al final de la lista de herramientas */ #header .main-navbar .navbar-nav.navbar-right>li.dropdown:has(>#dropTools), #header .main-navbar .navbar-nav.navbar-right>li.dropdown:has(>#dropTools)>.dropdown-menu{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important} #header .main-navbar .navbar-nav.navbar-right>li.dropdown:has(>#dropTools)::before,#header .main-navbar .navbar-nav.navbar-right>li.dropdown:has(>#dropTools)::after, #header .main-navbar .navbar-nav.navbar-right>li.dropdown:has(>#dropTools)>.dropdown-menu::before,#header .main-navbar .navbar-nav.navbar-right>li.dropdown:has(>#dropTools)>.dropdown-menu::after{display:none!important;content:none!important} #header .main-navbar .navbar-nav.navbar-right>li.dropdown:has(>#dropTools)>.dropdown-menu>li:last-child>a{margin-bottom:0} /* paginas de listas (Dispositivos, etc.): buscador, paginacion y logo con el tema */ #header .navbar-main .navbar-brand{display:flex!important;align-items:center;padding-top:6px!important;padding-bottom:6px!important} #header .navbar-main .navbar-brand img{height:40px!important;max-height:40px!important;width:auto!important} body input[type="text"]:not(.form-control):not(.bs-input),body input[type="search"]:not(.form-control),body input:not([type]):not(.form-control):not(.bs-input){ background:var(--v4-input)!important;color:var(--v4-txt)!important;border:1px solid var(--v4-fld-bd)!important;border-radius:8px!important;height:34px;padding:0 10px!important;box-shadow:none!important;outline:0} body input[type="text"]:not(.form-control):focus,body input[type="search"]:not(.form-control):focus{border-color:var(--v4-acc)!important} .pagination{display:inline-flex!important;gap:4px;align-items:center} .pagination>li>a,.pagination>li>span{background:var(--v4-bg)!important;border:1px solid var(--v4-line)!important;color:var(--v4-txt)!important;border-radius:8px!important;min-width:34px;height:34px;display:flex!important;align-items:center;justify-content:center;padding:0 10px!important;margin:0!important} .pagination>li>a:hover{background:var(--v4-hover)!important} .pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover{background:var(--v4-btn)!important;border-color:var(--v4-btn)!important;color:#fff!important} .pagination>.disabled>a,.pagination>.disabled>span{color:var(--v4-txt3)!important;opacity:.6} /* menu en computadora: GPSWOX forzaba el menu a "bloque" con alto maximo de 340 px y una linea gris debajo; por eso Apariencia quedaba fuera y salia doble linea. Ahora las 3 zonas caben en la pantalla. */ #header.folded .main-navbar .navbar-collapse.collapse,#header .main-navbar .navbar-collapse.collapse{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0;max-height:none!important;height:auto!important;overflow:hidden!important} #header.folded .main-navbar .navbar-nav,#header .main-navbar .navbar-nav{border:0!important;border-radius:0!important} /* paginacion de las tablas (DataTables: « 1 2 3 … ») */ .dataTables_paginate{display:flex!important;align-items:center;gap:4px;justify-content:flex-end} .dataTables_paginate .paginate_button,.dataTables_paginate a.paginate_button{background:var(--v4-bg)!important;border:1px solid var(--v4-line)!important;color:var(--v4-txt)!important;border-radius:8px!important;margin:0!important; min-width:34px;height:34px;display:inline-flex!important;align-items:center;justify-content:center;padding:0 10px!important;box-shadow:none!important;text-decoration:none!important} .dataTables_paginate .paginate_button:hover{background:var(--v4-hover)!important;color:var(--v4-txt)!important} .dataTables_paginate .paginate_button.current,.dataTables_paginate .paginate_button.current:hover{background:var(--v4-btn)!important;border-color:var(--v4-btn)!important;color:#fff!important} .dataTables_paginate .paginate_button.disabled,.dataTables_paginate .paginate_button.disabled:hover{opacity:.45;background:var(--v4-bg)!important} .dataTables_paginate .ellipsis,.dataTables_paginate span{color:var(--v4-txt2)!important;background:transparent!important} .dataTables_paginate span{display:inline-flex;gap:4px} #header .navbar-main .navbar-brand img{height:46px!important;max-height:46px!important} /* pagina de inicio de sesion con el tema (gana a los estilos personalizados del texto inferior) */ html body.sign-in-layout{color:var(--v4-txt)} html body.sign-in-layout .panel{background:transparent!important;border:1px solid var(--v4-line)!important;border-radius:16px!important;box-shadow:var(--v4-shadow2)!important} /* recuadro: "Color de fondo del panel" y "Transparencia" de Apariencia (si no hay color, oscuro del tema) */ html body.sign-in-layout .panel .panel-background{background:var(--sv4-l-panel,#111A2B)!important;opacity:var(--sv4-l-op,.8)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} html body.sign-in-layout .panel .panel-body{background:transparent!important;color:var(--v4-txt)!important} html body.sign-in-layout .panel hr{border-color:var(--v4-line)!important} html body.sign-in-layout .panel input#sign-in-form-email,html body.sign-in-layout .panel input#sign-in-form-password,html body.sign-in-layout .panel .form-control{ background:var(--v4-input)!important;color:var(--v4-txt)!important;border:1px solid var(--v4-fld-bd)!important;border-radius:10px!important;font-size:16px!important;font-weight:500!important;height:48px!important;box-shadow:none!important} html body.sign-in-layout .panel .form-control::placeholder{color:var(--v4-txt3)!important} html body.sign-in-layout .panel .form-control:focus{border-color:var(--v4-acc)!important} html body.sign-in-layout .panel .checkbox label{color:var(--v4-txt2)!important;font-size:13px} html body.sign-in-layout .panel button.btn.btn-lg.btn-primary.btn-block{background:var(--v4-btn)!important;color:#fff!important;border:0!important;border-radius:10px!important;font-size:18px!important;font-weight:600!important;height:48px} html body.sign-in-layout .panel button.btn.btn-lg.btn-primary.btn-block:hover{background:var(--v4-btn2)!important;border:0!important} html body.sign-in-layout .panel a.btn.btn-block.btn-lg.btn-default{background:transparent!important;border:1px solid var(--v4-acc)!important;color:var(--v4-acc-txt)!important;border-radius:10px!important;font-size:15px!important} html body.sign-in-layout .panel a.btn.btn-block.btn-lg.btn-default:hover{background:var(--v4-hover)!important} /* flecha de las listas desplegables centrada en vertical (todas: 10, x1, horas, dispositivos...) */ .bootstrap-select>.dropdown-toggle{position:relative} .bootstrap-select.btn-group .dropdown-toggle .caret,.bootstrap-select .dropdown-toggle .bs-caret .caret{position:absolute!important;top:50%!important;margin-top:0!important;transform:translateY(-50%);line-height:1!important;height:auto!important;font-size:14px} .bootstrap-select .dropdown-toggle .caret::before{display:block;line-height:1} /* ===== Historial en computadora/tableta como gps: grafico a todo lo ancho, sensores como pestanas en una fila ===== */ @media (min-width:768px){ body:has(#bottom-history[style*="block"]) #bottombar{left:calc(var(--v4-side) + var(--v4-gap))!important;max-width:none!important} body:has(#bottom-history[style*="block"]) #sidebar.sidebar.left{bottom:calc(var(--sv4-hist-h, 330px) + 2 * var(--v4-gap))!important} #bottom-history .bottom-history-header{flex-direction:row!important;align-items:center;gap:10px;padding:0!important;margin:0 0 6px!important;border-bottom:1px solid var(--v4-line)!important;min-height:46px} #bottom-history .bottom-history-header>#graph_sensors,#bottom-history .bottom-history-header>#graph_sensors.sv4-oculto{order:1;display:flex!important;flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin; margin:0!important;padding:0!important;border:0!important;background:transparent!important} #bottom-history #sv4-sensor{display:none!important} #bottom-history #graph_sensors>li{float:none!important;flex:0 0 auto;margin:0!important;border:0!important;background:transparent!important} #bottom-history #graph_sensors>li>a{display:flex!important;align-items:center;height:46px;padding:0 16px!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important; color:var(--v4-txt)!important;font-size:13px;font-weight:500;white-space:nowrap;box-shadow:none!important} #bottom-history #graph_sensors>li>a:hover{color:var(--v4-acc-txt)!important} #bottom-history #graph_sensors>li.active>a{color:var(--v4-acc-txt)!important;box-shadow:inset 0 -2px 0 var(--v4-acc)!important} #bottom-history .bottom-history-header>ul.pull-right{order:2;flex:0 0 auto!important;width:auto!important;gap:8px} #bottom-history .bottom-history-header>ul.pull-right>li{flex:0 0 auto!important} #bottom-history .bottom-history-header>ul.pull-right>li>a{height:30px!important;padding:0 14px!important;font-size:13px!important;width:auto} #bottom-history .bottom-history-header>ul.pull-right>li:last-child>a{width:30px;padding:0!important} #bottom-history .graph-controls{border-top:0!important;padding:2px 0 4px!important} #bottom-history .graph-1{height:200px!important} } /* historial: boton contraer/expandir y sin la barra vacia al cerrarlo */ #bottom-history .collapse-control{display:none!important} #bottom-history .bottom-history-header>ul.pull-right>li.sv4-hp{flex:0 0 36px!important} #bottom-history .bottom-history-header>ul.pull-right>li.sv4-hp>a i{display:inline-block!important;color:var(--v4-txt)!important} @media (min-width:768px){#bottom-history .bottom-history-header>ul.pull-right>li.sv4-hp>a{width:30px;padding:0!important}} #bottom-history.sv4-hmin>.tab-content{display:none!important} #bottom-history.sv4-hmin .bottom-history-header{margin-bottom:0!important;border-bottom:0!important} #bottom-history.sv4-hmin #sv4-sensor{display:none!important} #bottombar:has(>#widgets[style*="display: none"]):not(:has(>#bottom-history[style*="block"])), #bottombar:has(>#widgets.hidden):not(:has(>#bottom-history[style*="block"])){padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important} /* ===== Botones del mapa (derecha) como gps: una columna ordenada, zoom al final ===== */ #map-controls{display:flex!important;flex-direction:column;align-items:flex-end;gap:10px} #map-controls>div{margin:0!important;padding:0!important;float:none!important;width:36px} #map-controls>div:empty,#map-controls>#history-control-layers:not(:has(.btn:not([style*="none"]))){display:none!important} #map-controls>div:has(> .btn-group-vertical > .btn + .btn):not(#map-controls-layers):not(#history-control-layers){order:10} #map-controls .btn-group-vertical{display:flex!important;flex-direction:column;width:36px;border-radius:10px!important;overflow:hidden;margin:0!important;box-shadow:0 2px 8px rgba(0,0,0,.3)!important} #map-controls .btn-group-vertical>.btn{width:36px!important;height:36px!important;margin:0!important;border:0!important;border-radius:0!important;border-bottom:1px solid rgba(0,0,0,.18)!important} #map-controls .btn-group-vertical>.btn:last-child{border-bottom:0!important} #map-controls .btn-group-vertical>.btn .icon,#map-controls .btn-group-vertical>.btn i{font-size:15px!important} #map-controls #map-controls-layers .btn:not(.active) .icon,#map-controls #map-controls-layers .btn .icon{opacity:1!important;color:#fff!important} #map-controls #map-controls-layers .btn:not(.active){background:var(--v4-btn)!important} #map-controls #map-controls-layers .btn:not(.active) .icon{opacity:.6!important} #map-controls #map-controls-layers .btn.active{background:var(--v4-btn2)!important;box-shadow:inset 3px 0 0 #fff!important} /* capas del mapa: ENCENDIDA = turquesa con icono blanco; APAGADA = color del menu con icono gris (se distinguen a simple vista) */ #map-controls #map-controls-layers .btn,#map-controls #map-controls-layers .btn:not(.active){background:var(--v4-nav)!important;box-shadow:none!important;border-bottom:1px solid var(--v4-nav-line)!important} #map-controls #map-controls-layers .btn:not(.active) .icon,#map-controls #map-controls-layers .btn:not(.active) i{color:var(--v4-nav-txt2)!important;opacity:.75!important} #map-controls #map-controls-layers .btn.active{background:var(--v4-acc)!important;box-shadow:none!important;border-bottom:1px solid rgba(0,0,0,.15)!important} #map-controls #map-controls-layers .btn.active .icon,#map-controls #map-controls-layers .btn.active i{color:#fff!important;opacity:1!important} #map-controls #map-controls-layers .btn:last-child{border-bottom:0!important} #map-controls #map-controls-layers .btn:not(.active):hover{background:var(--v4-nav2)!important;filter:none} #map-controls #map-controls-layers .btn.active:hover{background:var(--v4-btn)!important;filter:none} /* boton para contraer/expandir la barra de abajo: en su propia columna a la derecha (no tapa las tarjetas), como gps */ #widgets>.btn-collapse,#widgets:not(.collapsed)>.btn-collapse{position:absolute!important;top:0!important;right:0!important;left:auto!important;bottom:auto!important;width:36px!important;height:36px!important;margin:0!important; display:flex!important;align-items:center;justify-content:center;border:1px solid var(--v4-line)!important;border-radius:10px!important;background:var(--v4-bg)!important;transform:none!important;z-index:5;cursor:pointer} #widgets>.btn-collapse:hover{background:var(--v4-hover)!important} #widgets>.btn-collapse i{font-size:14px;line-height:1} #widgets:not(.collapsed) .widgets-content{padding-right:44px!important;box-sizing:border-box} #widgets .widget>.widget-heading{padding-right:12px!important} /* contraida: el boton queda abajo a la derecha, visible */ #widgets.collapsed>.btn-collapse{top:auto!important;bottom:0!important;box-shadow:var(--v4-shadow)!important} #widgets:not(.collapsed)>.btn-collapse i{transform:none!important} #widgets.collapsed>.btn-collapse i{transform:rotate(180deg)!important;display:inline-block} /* Configuracion > Pestanas / Panel: casilla y texto centrados en cada recuadro */ .dashboard-widget{display:flex!important;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:8px 10px!important} .dashboard-widget::before,.dashboard-widget::after{display:none!important} .dashboard-widget>.pull-left{float:none!important;flex:1 1 auto;min-width:0;display:flex;align-items:center} .dashboard-widget>.pull-right{float:none!important;flex:0 0 auto;display:flex;align-items:center} .dashboard-widget .checkbox-inline{display:flex!important;align-items:center;margin:0!important;padding:0!important;min-height:20px} .dashboard-widget .checkbox-inline label{display:flex!important;align-items:center;gap:10px;line-height:1.3!important;margin:0!important;padding:0!important;font-size:13px;text-align:left} .dashboard-widget .checkbox-inline label::before{flex:0 0 16px;margin:0!important;position:relative!important;top:auto!important;left:auto!important} /* computadora/tableta como gps: la barra de abajo va a todo lo ancho DEBAJO de la lista de dispositivos; la lista llega justo hasta la barra (si la barra es mas baja o esta contraida, la lista baja mas) */ @media (min-width:768px){ #bottombar,body:has(#sidebar.collapsed) #bottombar{left:calc(var(--v4-side) + var(--v4-gap))!important;max-width:none!important} #sidebar.sidebar.left,body:has(#bottom-history[style*="block"]) #sidebar.sidebar.left{bottom:calc(var(--sv4-bb-off, 0px) + var(--v4-gap))!important;max-height:none!important;height:auto!important} } /* barra de abajo en computadora: del ancho de sus tarjetas (sin espacio vacio); con el historial, a todo lo ancho */ @media (min-width:768px){ #bottombar,body:has(#sidebar.collapsed) #bottombar{right:auto!important;width:auto!important;max-width:calc(100vw - var(--v4-side) - 2 * var(--v4-gap))!important} body:has(#bottom-history[style*="block"]) #bottombar{right:var(--v4-gap)!important;width:auto!important;max-width:none!important} #widgets,#widgets .widgets-content{width:auto!important} } /* barra de abajo pegada a la DERECHA: si tiene pocas tarjetas, el espacio libre queda a la izquierda */ @media (min-width:768px){ #bottombar,body:has(#sidebar.collapsed) #bottombar{left:auto!important;right:var(--v4-gap)!important;width:auto!important;max-width:calc(100vw - var(--v4-side) - 2 * var(--v4-gap))!important} body:has(#bottom-history[style*="block"]) #bottombar{left:calc(var(--v4-side) + var(--v4-gap))!important;right:var(--v4-gap)!important;max-width:none!important} } /* ===================== Inicio de sesion como gps: fondo con imagen, tarjeta de vidrio, campos y boton redondeados ===================== */ /* fondo: la imagen y el color que se ponen en Administracion > Apariencia ("Fondo", "Color de fondo de la pagina") */ html body.sign-in-layout{background-color:var(--sv4-l-bg,#0B1220);background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;background-attachment:fixed!important;min-height:100vh;color:var(--sv4-l-txt,#ebeff4)} html body.sign-in-layout::before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(8,12,20,.25),rgba(8,12,20,.5));pointer-events:none;z-index:0} html body.sign-in-layout>*{position:relative;z-index:1} html body.sign-in-layout .center-vertical{min-height:100vh;display:flex!important;align-items:center;justify-content:center;padding:24px 0} html body.sign-in-layout .container{width:100%;max-width:520px} html body.sign-in-layout .container>[class*="col-"]{width:100%!important;margin:0!important;float:none!important;padding:0 16px} html body.sign-in-layout .panel{border-radius:24px!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 20px 60px rgba(0,0,0,.45)!important;overflow:hidden;margin-bottom:18px} /* recuadro: "Color de fondo del panel" y "Transparencia" de Apariencia (si no hay color, oscuro del tema) */ html body.sign-in-layout .panel .panel-background{background:var(--sv4-l-panel,#111A2B)!important;opacity:var(--sv4-l-op,.8)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} html body.sign-in-layout .panel .panel-body{padding:36px 40px 30px!important} html body.sign-in-layout .panel .panel-body>a>img,html body.sign-in-layout .panel .panel-body img.center-block{max-width:170px!important;max-height:170px;width:auto;margin:0 auto 6px!important} html body.sign-in-layout .panel hr{border-color:rgba(255,255,255,.08)!important;margin:22px 0!important} html body.sign-in-layout .panel .form-group{margin-bottom:14px} html body.sign-in-layout .panel input#sign-in-form-email,html body.sign-in-layout .panel input#sign-in-form-password,html body.sign-in-layout .panel .form-control{ background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.12)!important;color:#ebeff4!important;height:46px!important;border-radius:12px!important;font-size:15px!important;font-weight:500!important;padding:0 16px!important} html body.sign-in-layout .panel .form-control::placeholder{color:#9aa1b0!important;font-weight:400} html body.sign-in-layout .panel .form-control:focus{border-color:var(--v4-acc)!important;box-shadow:0 0 0 3px rgba(11,94,215,.18)!important;background:rgba(255,255,255,.09)!important} html body.sign-in-layout .panel .checkbox label{color:var(--sv4-l-txt,#d5d9e2)!important;font-size:14px} html body.sign-in-layout .panel button.btn.btn-lg.btn-primary.btn-block{height:48px!important;border-radius:14px!important;font-size:16px!important;font-weight:600!important;letter-spacing:.2px;background:var(--v4-acc)!important;color:#fff!important;border:0!important;box-shadow:0 6px 18px rgba(11,94,215,.3)!important;margin-top:6px} html body.sign-in-layout .panel button.btn.btn-lg.btn-primary.btn-block:hover{background:var(--v4-btn)!important} html body.sign-in-layout .panel a.btn.btn-block.btn-lg.btn-default{background:transparent!important;border:0!important;color:#5B9DFF!important;font-size:14px!important;height:auto!important;padding:4px 0!important;box-shadow:none!important;text-decoration:none} html body.sign-in-layout .panel a.btn.btn-block.btn-lg.btn-default:hover{text-decoration:underline!important;background:transparent!important} html body.sign-in-layout .app-links{display:flex;justify-content:center;gap:14px;margin-top:4px} html body.sign-in-layout .app-links>[class*="col-"]{width:auto!important;float:none!important;padding:0!important} html body.sign-in-layout .app-links img{height:44px;width:auto} html body.sign-in-layout .app-links .clearfix{display:none} html body.sign-in-layout h1,html body.sign-in-layout h2,html body.sign-in-layout h3{color:#fff!important;text-shadow:0 2px 8px rgba(0,0,0,.4)} @media (max-width:480px){html body.sign-in-layout .panel .panel-body{padding:28px 22px 22px!important}} /* texto de bienvenida / texto inferior con el color de texto de Apariencia */ html body.sign-in-layout .sign-in-text,html body.sign-in-layout .welcome-text,html body.sign-in-layout .panel-body p{color:var(--sv4-l-txt,#ebeff4)!important} /* tarjeta de la unidad: el estado (en linea / sin conexion) vuelve a verse, como un punto de color a la derecha del nombre (como gps) */ #widgets .widget-device .widget-title{width:100%} #widgets .widget-device .widget-actions{display:flex!important;order:3;margin-left:auto;align-items:center;float:none!important;padding:0!important;background:transparent!important} #widgets .widget-device .widget-actions [data-device="status-text"]{display:none!important} #widgets .widget-device .widget-actions [data-device="status"]{display:inline-block!important;width:10px;height:10px;min-width:10px;border-radius:50%;font-size:0!important;line-height:0;padding:0!important;margin:0 2px 0 8px;overflow:hidden;box-shadow:0 0 0 2px rgba(0,0,0,.15)} #widgets .widget-device .widget-title>.icon{order:1} #widgets .widget-device .widget-title [data-device="name"]{order:2} /* ===================== Ventanas (editar dispositivo, configuracion...) ===================== */ /* pestanas en una sola fila que se desliza de lado, en vez de 4 filas */ .modal .nav-tabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding:0 4px!important} .modal .nav-tabs::before,.modal .nav-tabs::after{display:none!important} .modal .nav-tabs>li{float:none!important;flex:0 0 auto;margin-bottom:0!important} .modal .nav-tabs>li>a{white-space:nowrap;padding:12px 14px!important;margin:0!important} /* tablas de las ventanas (sensores, servicios...): borde fino del tema, esquinas redondeadas */ .modal .table,.modal .table-bordered{border:1px solid var(--v4-line)!important;border-radius:10px;border-collapse:separate!important;border-spacing:0;overflow:hidden;width:100%} .modal .table>thead>tr>th,.modal .table>tbody>tr>td,.modal .table-bordered>thead>tr>th,.modal .table-bordered>tbody>tr>td{border:0!important;border-bottom:1px solid var(--v4-line)!important;vertical-align:middle!important} .modal .table>tbody>tr:last-child>td{border-bottom:0!important} .modal .table>thead>tr>th{background:var(--v4-bg2)!important;font-weight:600} .modal .table td:last-child{white-space:nowrap;text-align:right} @media (max-width:767px){ .modal .nav-tabs{scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)} .modal .nav-tabs::-webkit-scrollbar{display:none} .modal .nav-tabs>li>a{padding:12px 12px!important;font-size:15px} .modal .table>thead>tr>th,.modal .table>tbody>tr>td{padding:10px 8px!important;font-size:14px} .modal .modal-footer{display:flex!important;gap:8px;flex-wrap:wrap} .modal .modal-footer>.btn{flex:1 1 0;margin:0!important;min-width:0} } /* ===== Tablas en ventanas (celular): el marco blanco era de .table-responsive de Bootstrap ===== */ .modal .table-responsive,.table-responsive{border:1px solid var(--v4-line)!important;border-radius:10px;overflow-x:auto} .modal .table-responsive>.table{border:0!important;border-radius:0;margin:0!important} @media (max-width:767px){ .modal .table>tbody>tr>td,.modal .table>thead>tr>th{white-space:normal!important;padding:10px 8px!important;line-height:1.3} .modal .table>tbody>tr>td:last-child,.modal .table>thead>tr>th:last-child{white-space:nowrap!important;width:1%;padding-right:10px!important} .modal .table>tbody>tr>td:last-child .btn,.modal .table>tbody>tr>td:last-child a{padding:4px 6px!important;margin:0!important} } /* ===== Listas de seleccion multiple dentro de ventanas (Usuarios, Dispositivos...): abiertas en la pagina, como gps ===== */ .bootstrap-select.multiexpand>.dropdown-toggle{display:none!important} .bootstrap-select.multiexpand:not(.open)>.dropdown-menu,.bootstrap-select.multiexpand.open>.dropdown-menu{ display:flex!important;flex-wrap:wrap;align-items:center;gap:8px 12px;position:static!important;float:none!important;inset:auto!important; width:100%!important;min-width:0!important;max-height:none!important;margin:0!important;padding:12px!important; background:var(--v4-bg)!important;border:1px solid var(--v4-line)!important;border-radius:14px!important;box-shadow:none!important;z-index:auto!important} .bootstrap-select.multiexpand>.dropdown-menu>.bs-searchbox{flex:1 1 140px!important;width:auto!important;padding:0!important;margin:0!important;clear:none} .bootstrap-select.multiexpand>.dropdown-menu>.bs-searchbox .form-control{border-radius:20px!important;height:38px!important} .bootstrap-select.multiexpand>.dropdown-menu>.bs-actionsbox{flex:1 1 200px!important;width:auto!important;padding:0!important;margin:0!important;clear:none} .bootstrap-select.multiexpand>.dropdown-menu>.bs-actionsbox .btn-group{display:flex!important;align-items:center;justify-content:space-around;gap:0} .bootstrap-select.multiexpand>.dropdown-menu>.bs-actionsbox .btn{border:0!important;background:transparent!important;color:var(--v4-acc-txt)!important;height:auto!important;min-height:0;padding:4px 10px!important;white-space:normal!important;font-size:14px;line-height:1.25!important;overflow:visible} .bootstrap-select.multiexpand>.dropdown-menu>.bs-actionsbox .btn+.btn{border-left:1px solid var(--v4-line)!important;border-radius:0!important} .bootstrap-select.multiexpand>.dropdown-menu>.dropdown-menu.inner,.bootstrap-select.multiexpand>.dropdown-menu>.inner{ display:flex!important;flex-wrap:wrap;flex:1 1 100%;width:100%!important;max-height:300px!important;overflow-y:auto!important;position:static!important; margin:0!important;padding:6px 0 0!important;border:0!important;border-top:1px solid var(--v4-line)!important;box-shadow:none!important;background:transparent!important} .bootstrap-select.multiexpand .dropdown-menu.inner>li:not(.dropdown-header){width:50%!important;float:none!important} .bootstrap-select.multiexpand .dropdown-menu.inner>li.dropdown-header{width:100%!important} .bootstrap-select.multiexpand .dropdown-menu.inner>li>a .text{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0} .bootstrap-select.multiexpand>.dropdown-menu>.bs-pagination{flex:1 1 100%;display:flex;justify-content:center} .bootstrap-select.multiexpand,.bootstrap-select.multiexpand.form-control{height:auto!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;display:block!important;width:100%!important;position:relative!important;top:auto!important} .bootstrap-select.multiexpand:has(select[multiple]) .dropdown-menu.inner>li:not(.dropdown-header){width:50%!important;float:none!important} .bootstrap-select.multiexpand .dropdown-menu.inner>li.selected>a,.bootstrap-select.multiexpand .dropdown-menu.inner>li>a:hover{background:transparent!important;box-shadow:none!important;font-weight:400} .bootstrap-select.multiexpand .dropdown-menu.inner>li>a{display:flex!important;align-items:center;gap:8px;padding:8px 6px!important;min-width:0} .bootstrap-select.multiexpand>.dropdown-menu,.bootstrap-select.multiexpand>.dropdown-menu *{box-sizing:border-box} .bootstrap-select.multiexpand>select{display:none!important} /* lista abierta (Usuarios...): sin la barra de arriba ni el triangulito, solo la lista */ .bootstrap-select.multiexpand .dropdown-toggle,.bootstrap-select.multiexpand>button,.bootstrap-select.multiexpand>.btn, .multiexpand>.bootstrap-select>.dropdown-toggle,.form-group .bootstrap-select.multiexpand>.btn.dropdown-toggle,.modal .bootstrap-select.multiexpand>.btn.dropdown-toggle{ display:none!important;visibility:hidden!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;overflow:hidden!important} .bootstrap-select.multiexpand>.dropdown-menu::before,.bootstrap-select.multiexpand>.dropdown-menu::after, .bootstrap-select.multiexpand.droparrow>.dropdown-menu::before,.bootstrap-select.multiexpand.droparrow>.dropdown-menu::after{display:none!important;content:none!important;border:0!important} .bootstrap-select.multiexpand>.dropdown-menu{margin-top:0!important} /* avisos dentro del panel y ventanas (p. ej. "Por favor dibuje el trazado en el mapa") con el tema */ #sidebar .alert,.modal .alert{background:var(--v4-hover)!important;border:1px solid var(--v4-acc)!important;color:var(--v4-txt)!important;border-radius:10px!important;padding:10px 12px!important;font-size:13px} #sidebar .alert-warning,.modal .alert-warning{background:rgba(240,173,78,.12)!important;border-color:#c98a2d!important} #sidebar .alert-danger,.modal .alert-danger{background:rgba(217,83,79,.12)!important;border-color:#c9302c!important} /* ===== Formularios del panel (nueva geocerca, ruta, POI...): campos ordenados como gps ===== */ #sidebar .tab-pane-body .form-group{margin:0 0 14px!important} #sidebar .tab-pane-body .form-group>label{display:block;font-size:13px;font-weight:600;color:var(--v4-txt)!important;margin:0 0 6px!important;padding:0 2px} #sidebar .tab-pane-body input.form-control{height:38px!important;border-radius:10px!important;background-color:var(--v4-input)!important;border:1px solid var(--v4-fld-bd)!important;color:var(--v4-txt)!important;padding:0 12px!important;box-shadow:none!important} #sidebar .tab-pane-body input.form-control:focus{border-color:var(--v4-acc)!important} #sidebar .tab-pane-body .bootstrap-select.form-control{width:100%!important;padding:0!important;height:auto!important;border:0!important;background:transparent!important;box-shadow:none!important} #sidebar .tab-pane-body .bootstrap-select.form-control>.dropdown-toggle{width:100%!important;height:38px!important;border-radius:10px!important;background:var(--v4-input)!important;border:1px solid var(--v4-fld-bd)!important;padding:0 34px 0 12px!important;display:flex!important;align-items:center} #sidebar .tab-pane-body .form-group .input-group{display:flex!important;align-items:stretch;gap:8px;width:100%} #sidebar .tab-pane-body .form-group .input-group>div:first-child{flex:1 1 auto;min-width:0;float:none!important;width:auto!important} #sidebar .tab-pane-body .form-group .input-group>.input-group-btn{width:auto!important;display:block} #sidebar .tab-pane-body .form-group .input-group>.input-group-btn>.btn{width:38px!important;height:38px!important;border-radius:10px!important;display:flex!important;align-items:center;justify-content:center;padding:0!important;margin:0!important} #sidebar .tab-pane-body input.colorpicker,.modal input.colorpicker{padding-left:42px!important;text-transform:uppercase;background-repeat:no-repeat!important;background-size:22px 22px!important;background-position:10px center!important} #sidebar .tab-pane-body .buttons{display:flex!important;gap:10px;margin-top:6px;padding-bottom:4px} #sidebar .tab-pane-body .buttons>.btn{flex:1 1 0;height:38px;border-radius:10px!important;display:flex!important;align-items:center;justify-content:center;margin:0!important;font-weight:600} #sidebar .tab-pane-body .buttons>.btn-default{order:1;background:transparent!important;border:1px solid var(--v4-acc)!important;color:var(--v4-acc-txt)!important} #sidebar .tab-pane-body .buttons>.btn-action,#sidebar .tab-pane-body .buttons>.btn-primary{order:2;background:var(--v4-btn)!important;border:0!important;color:#fff!important} /* en esas secciones el panel mide lo que su contenido (como gps), con desplazamiento si es largo */ @media (min-width:768px){ #sidebar.sv4-sub.sidebar.left{bottom:auto!important;height:auto!important;max-height:calc(100vh - 2 * var(--v4-gap) - var(--sv4-bb-off, 0px))!important} #sidebar.sv4-sub .sidebar-content{height:auto!important} #sidebar.sv4-sub .tab-pane.active .tab-pane-body{height:auto!important;max-height:calc(100vh - 170px - var(--sv4-bb-off, 0px));overflow-y:auto} } /* ventana "Grupos" (y otras con campo + boton ×): el nombre y la × en la misma fila */ .modal .input-group:has(>.input-group-addon){display:flex!important;align-items:stretch;width:100%;gap:0} .modal .input-group:has(>.input-group-addon)>.form-control{flex:1 1 auto;width:auto!important;min-width:0;float:none!important;height:38px!important;border-radius:10px 0 0 10px!important;border-right:0!important} .modal .input-group>.input-group-addon{display:flex!important;align-items:center;justify-content:center;width:40px!important;height:38px!important;box-sizing:border-box;padding:0!important;background:var(--v4-input)!important;border:1px solid var(--v4-fld-bd)!important;border-left:0!important;border-radius:0 10px 10px 0!important;color:var(--v4-txt2)!important} .modal .input-group>.input-group-addon a.delete-item{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;color:var(--v4-txt2)!important;font-size:20px;line-height:1;text-decoration:none} .modal .input-group>.input-group-addon a.delete-item:hover{background:rgba(217,83,79,.18);color:#e5534b!important} .modal .empty-input-items>.form-group{margin-bottom:10px!important} /* Geocercas, Rutas, POI, Alertas: botones de MENU y ANADIR iguales a los de Unidades */ #sidebar .tab-pane-header .input-group{display:flex!important;align-items:center;gap:0} #sidebar .tab-pane-header .input-group>.form-group.search{flex:1 1 auto;min-width:0;margin:0!important} #sidebar .tab-pane-header .input-group-btn{display:flex!important;align-items:center;gap:6px;width:auto!important;padding-left:6px} #sidebar .tab-pane-header .input-group-btn>.btn,#sidebar .tab-pane-header .input-group-btn>.btn-group>.btn{width:38px!important;height:34px!important;min-width:38px;padding:0!important;margin:0!important;border-radius:8px!important;display:flex!important;align-items:center;justify-content:center;font-size:12px;box-shadow:none!important} #sidebar .tab-pane-header .input-group-btn>.btn-default{background:transparent!important;border:1px solid var(--v4-acc)!important;color:var(--v4-acc-txt)!important} #sidebar .tab-pane-header .input-group-btn>.btn-default i{color:var(--v4-acc-txt)!important} #sidebar .tab-pane-header .input-group-btn>a.btn-primary:has(.icon.add),#sidebar .tab-pane-header .input-group-btn>button.btn-primary:has(.icon.add){background:var(--v4-btn)!important;border:0!important;color:#fff!important} #sidebar .tab-pane-header .input-group-btn>.btn:has(.icon.add) i{color:#fff!important} /* el boton de lista/editar usa el mismo icono de menu (≡) que Unidades */ #sidebar .tab-pane-header .input-group-btn>.btn-default>.icon.edit::before{content:"\e90e"!important} /* "Compartir con otro servidor": casilla | direccion | TCP UDP en una fila ordenada */ .modal .input-group:has(>.input-group-btn.checkbox){display:flex!important;align-items:stretch;width:100%} .modal .input-group>.input-group-btn.checkbox{display:flex!important;align-items:center;justify-content:center;width:44px!important;min-width:44px;margin:0!important;padding:0!important;background:var(--v4-input)!important;border:1px solid var(--v4-fld-bd)!important;border-right:0!important;border-radius:10px 0 0 10px!important} .modal .input-group>.input-group-btn.checkbox label{margin:0!important;padding:0!important;min-height:16px;display:flex;align-items:center} .modal .input-group:has(>.input-group-btn.checkbox)>.form-control{border-radius:0!important;border-right:0!important;border-left:0!important} .modal .input-group>.input-group-addon:has(.checkbox-inline){width:auto!important;gap:14px;padding:0 14px!important} .modal .input-group>.input-group-addon .checkbox-inline{display:flex!important;align-items:center;margin:0!important;padding:0!important} .modal .input-group>.input-group-addon .checkbox-inline label{display:flex!important;align-items:center;gap:6px;margin:0!important;padding:0!important;white-space:nowrap;color:var(--v4-txt)!important;font-size:13px} /* en computadora: todas las pestanas de la ventana a la vista (en 2 filas si hace falta), sin barra de desplazamiento */ @media (min-width:768px){ .modal .nav-tabs{flex-wrap:wrap!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important} } /* casilla envio automatico (Enviar comando GPRS) */ .modal .sv4-auto{margin:0 0 14px!important} .modal .sv4-auto .checkbox{margin:0!important} .modal .sv4-cola-msg{background:#FFF3C4!important;color:#5A4500!important;border:0!important;border-radius:10px!important;padding:12px 16px!important;margin-bottom:16px!important;font-size:14px} #sv4-pend{padding-top:4px} #sv4-pend .sv4-pend-msg{padding:24px 8px;text-align:center;color:var(--v4-txt2)} #sv4-pend .sv4-pend-nota{font-size:12px;color:var(--v4-txt2);margin-top:8px} #sv4-pend .sv4-pend-t{margin:0;font-size:13px} #sv4-pend .sv4-pend-t th{color:var(--v4-txt2)!important;font-weight:600;white-space:nowrap;border-bottom:1px solid var(--v4-line)!important} #sv4-pend .sv4-pend-t td{color:var(--v4-txt)!important;vertical-align:middle!important;border-top:1px solid var(--v4-line)!important} #sv4-pend .sv4-pend-t td:nth-child(4),#sv4-pend .sv4-pend-t td:nth-child(5){white-space:nowrap} #sv4-pend .sv4-est{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--v4-bg2);color:var(--v4-txt2)} #sv4-pend .sv4-est-pendiente{background:#FFF3C4;color:#5A4500} #sv4-pend .sv4-est-enviado{background:rgba(34,197,94,.18);color:#22C55E} #sv4-pend .sv4-est-error{background:rgba(239,68,68,.18);color:#EF4444} #sv4-pend .sv4-anular{border:1px solid var(--v4-acc)!important;color:var(--v4-acc-txt)!important;background:transparent!important;border-radius:8px!important;padding:2px 10px!important} /* boton x para borrar fechas */ .modal input.sv4-con-clr{padding-right:38px!important} .modal .sv4-clr{position:absolute;transform:translateY(-50%);z-index:3;width:26px;height:26px;padding:0;margin:0;border:0!important;border-radius:50%;background:transparent!important;color:var(--v4-txt2)!important;font-size:20px;line-height:24px;text-align:center;cursor:pointer;box-shadow:none!important} .modal .sv4-clr:hover{background:var(--v4-bg2)!important;color:var(--v4-txt)!important} /* ventana Planes de dispositivos */ .modal .nav-tabs.hidden{display:none!important} .modal .plan{background:var(--v4-bg2)!important;border:1px solid var(--v4-line)!important;border-radius:14px!important;padding:16px!important;margin:0 0 16px!important;color:var(--v4-txt)!important;box-shadow:none!important;text-align:center} .modal .plan-heading{background:transparent!important;border:0!important;padding:0 0 12px!important;margin:0!important} .modal .plan-title{color:var(--v4-txt)!important;font-size:16px!important;font-weight:600!important;line-height:1.3} .modal .plan .table{background:transparent!important;margin:0 0 14px!important;border:1px solid var(--v4-line)!important;border-radius:10px!important;border-collapse:separate!important;border-spacing:0;overflow:hidden} .modal .plan .table td{color:var(--v4-txt)!important;background:transparent!important;border:0!important;border-top:1px solid var(--v4-line)!important;padding:10px 12px!important;font-size:14px} .modal .plan .table tr:first-child td{border-top:0!important} .modal .plan .table td:first-child{color:var(--v4-txt2)!important;text-align:left} .modal .plan .table td:last-child{text-align:right;font-weight:600} .modal .plan-footer{background:transparent!important;border:0!important;padding:0!important} .modal .plan .btn-plan{min-width:130px;border-radius:10px!important} .modal .plan-title{white-space:normal!important;overflow-wrap:anywhere;padding:0 4px} /* ===== ventana Chat ===== */ .modal #chats_table,.modal .conversation>.panel{display:flex!important;flex-direction:column;height:62vh;min-height:360px;margin:0!important;background:var(--v4-bg2)!important;border:1px solid var(--v4-line)!important;border-radius:14px!important;overflow:hidden;box-shadow:none!important} .modal #chats_table>.panel-heading{display:flex!important;flex-direction:column-reverse;gap:10px;padding:14px!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--v4-line)!important} .modal #chats_table>.panel-heading .panel-form{float:none!important;width:100%!important;margin:0!important;position:static!important} .modal #chats_table>.panel-heading .form-group.search{width:100%!important;margin:0!important;float:none!important} .modal #chats_table>.panel-heading .form-group.search .form-control{width:100%!important} .modal #chats_table>.panel-heading .panel-title{color:var(--v4-txt)!important;font-weight:600;font-size:15px;float:none!important} .modal #chats_table>[data-table]{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column} .modal #chats_table .table{margin:0!important;background:transparent!important} .modal #chats_table .table td{text-align:left!important;padding:0!important;border:0!important;border-bottom:1px solid var(--v4-line)!important;background:transparent!important} .modal #chats_table .table td>a{display:block;padding:11px 14px;color:var(--v4-txt)!important;text-decoration:none!important} .modal #chats_table .table td>a .name{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left!important} .modal #chats_table .table td>a .name>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .modal #chats_table .table td>a .badge{float:none!important;border-radius:999px} .modal #chats_table .table tr:hover td{background:var(--v4-hover)!important} .modal #chats_table .table tr.sv4-chat-act td{background:var(--v4-hover)!important;box-shadow:inset 3px 0 0 var(--v4-acc)} .modal #chats_table .table td.no-data{padding:24px 14px!important;color:var(--v4-txt2)!important;text-align:center!important} .modal #chats_table .nav-pagination{margin-top:auto;padding:10px;border-top:1px solid var(--v4-line);text-align:center} .modal .conversation{height:100%} .modal .conversation>.panel>.panel-heading{padding:14px!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--v4-line)!important} .modal .conversation>.panel>.panel-heading .panel-title{color:var(--v4-txt)!important;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:30px} .modal .conversation>.panel>.panel-heading .close{color:var(--v4-txt2)!important;opacity:1;text-shadow:none} .modal .conversation .messages{flex:1 1 auto;min-height:0;overflow:auto;list-style:none;margin:0!important;padding:14px!important;background:transparent!important} .modal .conversation:not([data-chatId]):not([data-chatid]) .messages{display:flex;align-items:center;justify-content:center} .modal .conversation:not([data-chatId]):not([data-chatid]) .messages::before{content:"Elige un dispositivo para ver la conversación";color:var(--v4-txt2);font-size:14px;text-align:center;padding:0 20px} .modal .conversation .messages>li{color:var(--v4-txt)} .modal .conversation>.panel>.panel-footer{padding:12px!important;background:transparent!important;border:0!important;border-top:1px solid var(--v4-line)!important} .modal .conversation>.panel>.panel-footer form{margin:0} .modal .conversation>.panel>.panel-footer .input-group{display:flex!important;gap:8px;width:100%} .modal .conversation>.panel>.panel-footer .input-group .form-control{flex:1 1 auto;border-radius:10px!important;float:none!important} .modal .conversation>.panel>.panel-footer .input-group-btn{width:auto!important;display:block} .modal .conversation>.panel>.panel-footer .input-group-btn .btn{border-radius:10px!important;height:100%;min-width:90px} @media (max-width:991px){.modal #chats_table{height:34vh;min-height:220px;margin-bottom:12px!important}.modal .conversation>.panel{height:48vh;min-height:300px}} /* chat: busqueda ancha, altura y burbujas */ .modal #chats_table>.panel-heading .panel-form,.modal #chats_table>.panel-heading .panel-form .form-group,.modal #chats_table>.panel-heading .panel-form .form-control{width:100%!important;max-width:none!important;min-width:0!important} .modal .conversation>.panel>.messages{height:auto!important;max-height:none!important} .modal .conversation .messages>li.message{display:flex!important;flex-direction:column;align-items:flex-start;margin:0 0 12px!important;padding:0!important;background:transparent!important;border:0!important;float:none!important;width:auto!important} .modal .conversation .messages>li.message.me{align-items:flex-end} .modal .conversation .messages>li.message>.text{display:inline-block;max-width:78%;padding:9px 13px!important;border-radius:14px 14px 14px 4px!important;background:var(--v4-input)!important;color:var(--v4-txt)!important;border:1px solid var(--v4-line)!important;font-size:14px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:none!important;float:none!important} .modal .conversation .messages>li.message.me>.text{background:var(--v4-btn)!important;color:#fff!important;border-color:var(--v4-btn)!important;border-radius:14px 14px 4px 14px!important} .modal .conversation .messages>li.message>.author{display:block;margin-top:4px;padding:0 4px;font-size:11px;color:var(--v4-txt2)!important;float:none!important;text-align:inherit} .modal .conversation .messages>li.message.me>.author{text-align:right} .modal .conversation .messages>li.message>.text:before,.modal .conversation .messages>li.message>.text:after{display:none!important} /* ventanas con tabla (geocercas, POI, rutas...): botones de arriba y flechas de orden */ .modal .row>.pull-right>.nav-tabs.nav-icons{display:flex!important;flex-wrap:nowrap!important;gap:8px;background:transparent!important;border:0!important;box-shadow:none!important;padding:0 15px!important;margin:0 0 15px!important;height:auto!important;overflow:visible!important;-webkit-mask:none!important;mask:none!important} .modal .row>.pull-right>.nav-tabs.nav-icons>li{float:none!important;margin:0!important;border:0!important;background:transparent!important} .modal .row>.pull-right>.nav-tabs.nav-icons>li>a{display:flex!important;align-items:center;justify-content:center;width:38px;height:38px;padding:0!important;margin:0!important;border:1px solid var(--v4-fld-bd)!important;border-radius:10px!important;background:var(--v4-fld)!important;color:var(--v4-txt2)!important;box-shadow:none!important} .modal .row>.pull-right>.nav-tabs.nav-icons>li>a:hover{border-color:var(--v4-acc)!important;color:var(--v4-acc-txt)!important} .modal .row>.pull-right>.nav-tabs.nav-icons>li>a:after,.modal .row>.pull-right>.nav-tabs.nav-icons>li>a:before{display:none!important} .modal .row>.pull-right>.nav-tabs.nav-icons>li>a>.icon{margin:0!important;font-size:16px;color:inherit!important} .table.table-list th.sorting,.table.table-list th.sorting_asc,.table.table-list th.sorting_desc{white-space:nowrap} .table.table-list th.sv4-th-sort:before,.table.table-list th.sv4-th-sort:after{display:none!important} .table.table-list th .sv4-sort{position:relative;display:inline-block;padding-right:16px} .table.table-list th .sv4-sort:before,.table.table-list th .sv4-sort:after{content:"";position:absolute;right:2px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.45} .table.table-list th .sv4-sort:before{top:calc(50% - 6px);border-bottom:5px solid var(--v4-txt2)} .table.table-list th .sv4-sort:after{top:calc(50% + 1px);border-top:5px solid var(--v4-txt2)} .table.table-list th.sorting_asc .sv4-sort:before{border-bottom-color:var(--v4-acc-txt);opacity:1} .table.table-list th.sorting_desc .sv4-sort:after{border-top-color:var(--v4-acc-txt);opacity:1} /* listas desplegables en ventanas: ancho minimo y opcion marcada legible */ .modal .bootstrap-select>.dropdown-menu{min-width:max(100%,440px)!important} .bootstrap-select .dropdown-menu li.active>a,.bootstrap-select .dropdown-menu li.active>a:hover,.bootstrap-select .dropdown-menu li.active>a:focus{background:var(--v4-btn)!important;color:#fff!important} .bootstrap-select .dropdown-menu li.active>a *{color:#fff!important} @media (max-width:767px){.modal .bootstrap-select>.dropdown-menu{min-width:100%!important;max-width:calc(100vw - 32px)}} /* listas en ventanas: busqueda y botones dentro del cuadro */ .modal .bootstrap-select>.dropdown-menu{box-sizing:border-box!important;overflow:hidden} .modal .bootstrap-select>.dropdown-menu>.bs-searchbox,.modal .bootstrap-select>.dropdown-menu>.bs-actionsbox{box-sizing:border-box!important;width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:12px!important;padding-right:12px!important} .modal .bootstrap-select>.dropdown-menu>.bs-searchbox .form-control,.modal .bootstrap-select>.dropdown-menu>.bs-actionsbox .btn-group{box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin:0!important} .modal .bootstrap-select>.dropdown-menu>.bs-actionsbox .btn-group{display:flex!important;gap:8px} .modal .bootstrap-select>.dropdown-menu>.bs-actionsbox .btn-group>.btn{flex:1 1 0;width:auto!important;min-width:0;float:none!important;margin:0!important} /* lupa dentro de la busqueda y seleccion igual en todas las listas */ .modal .bootstrap-select>.dropdown-menu>.bs-searchbox{position:relative!important} .modal .bootstrap-select>.dropdown-menu>.bs-searchbox:before{position:absolute!important;left:24px!important;top:50%!important;transform:translateY(-50%);line-height:1!important;margin:0!important} .modal .bootstrap-select>.dropdown-menu>.bs-searchbox .form-control{padding-left:38px!important} .modal .bootstrap-select .dropdown-menu.inner>li>a{border-radius:8px!important;box-shadow:none!important;outline:0!important} .modal .bootstrap-select .dropdown-menu.inner>li>a:hover,.modal .bootstrap-select .dropdown-menu.inner>li>a:focus{background:var(--v4-bg2)!important;color:var(--v4-txt)!important;border-color:transparent!important} .modal .bootstrap-select .dropdown-menu.inner>li>a:hover *,.modal .bootstrap-select .dropdown-menu.inner>li>a:focus *{color:var(--v4-txt)!important} .modal .bootstrap-select .dropdown-menu.inner>li.dropdown-header,.modal .bootstrap-select .dropdown-menu.inner>li.dropdown-header>a,.modal .bootstrap-select .dropdown-menu.inner>li.dropdown-header:hover{background:transparent!important;box-shadow:none!important} .modal .bootstrap-select .dropdown-menu.inner>li.dropdown-header{border-bottom:1px solid var(--v4-line)!important;margin-bottom:4px!important} /* lupa centrada y sin "pastilla" al pasar el mouse (solo cambia el color del texto) */ .modal .bootstrap-select>.dropdown-menu>.bs-searchbox:before{top:0!important;bottom:0!important;height:auto!important;transform:none!important;display:flex!important;align-items:center;line-height:1!important} .modal .bootstrap-select:has(select[multiple]) .dropdown-menu.inner>li>a:hover,.modal .bootstrap-select:has(select[multiple]) .dropdown-menu.inner>li>a:focus,.modal .bootstrap-select:has(select[multiple]) .dropdown-menu.inner>li.active>a,.modal .bootstrap-select:has(select[multiple]) .dropdown-menu.inner>li.selected>a{background:transparent!important;box-shadow:none!important} .modal .bootstrap-select:has(select[multiple]) .dropdown-menu.inner>li>a:hover,.modal .bootstrap-select:has(select[multiple]) .dropdown-menu.inner>li>a:hover *{color:var(--v4-acc-txt)!important} .modal .bootstrap-select:has(select[multiple]) .dropdown-menu.inner>li.active:not(.selected)>a *{color:var(--v4-txt)!important} /* ===== ventana Camara ===== */ .modal:has(#requestPhoto) .row.no-padding{display:flex;flex-wrap:wrap;row-gap:16px} .modal:has(#requestPhoto) .row.no-padding>[class*=col-]>.panel{display:flex!important;flex-direction:column;height:min(70vh,640px);min-height:360px;margin:0 8px!important;background:var(--v4-bg2)!important;border:1px solid var(--v4-line)!important;border-radius:14px!important;overflow:hidden;box-shadow:none!important} .modal:has(#requestPhoto) .row.no-padding>[class*=col-]>.panel>.panel-heading{display:flex!important;flex-direction:column-reverse;gap:10px;padding:14px!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--v4-line)!important} .modal:has(#requestPhoto) .panel-heading .panel-form{float:none!important;width:100%!important;margin:0!important;position:static!important} .modal:has(#requestPhoto) .panel-heading .panel-form .form-group,.modal:has(#requestPhoto) .panel-heading .panel-form .form-control{width:100%!important;max-width:none!important;margin:0!important;float:none!important} .modal:has(#requestPhoto) .panel-heading .panel-title,.modal:has(#requestPhoto) .panel-heading .panel-title-overflow{color:var(--v4-txt)!important;font-weight:600;font-size:15px;float:none!important} .modal:has(#requestPhoto) #setup-form-itemsSimple>[data-table]{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column} .modal:has(#requestPhoto) #setup-form-itemsSimple .table{margin:0!important;background:transparent!important} .modal:has(#requestPhoto) #setup-form-itemsSimple .table th{text-align:left!important;color:var(--v4-txt2)!important;padding:10px 14px!important;border:0!important;border-bottom:1px solid var(--v4-line)!important;background:transparent!important} .modal:has(#requestPhoto) #setup-form-itemsSimple .table td{text-align:left!important;padding:10px 14px!important;border:0!important;border-bottom:1px solid var(--v4-line)!important;background:transparent!important;color:var(--v4-txt)!important;cursor:pointer} .modal:has(#requestPhoto) #setup-form-itemsSimple .table tr:hover td{background:var(--v4-hover)!important} .modal:has(#requestPhoto) #setup-form-itemsSimple .table tr.active td,.modal:has(#requestPhoto) #setup-form-itemsSimple .table tr.sv4-chat-act td{background:var(--v4-hover)!important;box-shadow:inset 3px 0 0 var(--v4-acc)} .modal:has(#requestPhoto) #setup-form-itemsSimple .nav-pagination{margin-top:auto;padding:10px;border-top:1px solid var(--v4-line);text-align:center} .modal:has(#requestPhoto) #requestPhoto{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0} .modal:has(#requestPhoto) #requestPhoto .sv4-auto{order:2;margin:0!important} .modal:has(#requestPhoto) #takePhoto{background:var(--v4-btn)!important;color:#fff!important;border:0!important;border-radius:10px!important;height:38px;padding:0 16px!important;display:inline-flex;align-items:center;gap:6px} .modal:has(#requestPhoto) #takePhoto[disabled]{opacity:.5;cursor:not-allowed} .modal:has(#requestPhoto) #takePhoto .icon{color:#fff!important} .modal:has(#requestPhoto) #ajax-photos,.modal:has(#requestPhoto) #imgContainer{flex:1 1 auto;min-height:0;overflow:auto;padding:12px} .modal:has(#requestPhoto) #ajax-photos:empty::before{content:"Elige un dispositivo para ver sus imágenes";display:block;color:var(--v4-txt2);text-align:center;padding:40px 16px;font-size:14px} .modal:has(#requestPhoto) #mapWrapForPhoto{flex:1 1 auto;min-height:0} .modal:has(#requestPhoto) #mapForPhoto{height:100%;min-height:200px} @media (max-width:991px){.modal:has(#requestPhoto) .row.no-padding>[class*=col-]>.panel{height:auto;min-height:0;max-height:60vh}} /* mensajes de error de los formularios (antes rosado con letra clara) */ .modal .help-block.error,.modal .has-error .help-block,.modal .error-block,#sidebar .help-block.error{background:rgba(239,68,68,.12)!important;color:#F87171!important;border:1px solid rgba(239,68,68,.45)!important;border-radius:10px!important;padding:8px 12px!important;margin:6px 0 0!important;font-size:13px} .modal .alert-danger,.modal .alert-danger *{color:#F87171!important} .modal .has-error .form-control{border-color:rgba(239,68,68,.7)!important} /* ventanas altas: el comentario no tan alto y se puede bajar hasta los botones */ .modal textarea.form-control{min-height:90px;max-height:160px;resize:vertical} .modal{overflow-y:auto!important} /* Tareas > Todas las tareas: filtros en 3 columnas */ #setup-form-task-list :has(> :has(> .form-group) ~ :has(> .form-group)){display:flex!important;flex-wrap:wrap;column-gap:16px} #setup-form-task-list :has(> :has(> .form-group) ~ :has(> .form-group))>*{flex:1 1 100%;min-width:0} #setup-form-task-list :has(> :has(> .form-group) ~ :has(> .form-group))>:has(> .form-group){flex:1 1 calc(33.333% - 11px);max-width:calc(33.333% - 11px);width:auto!important;float:none!important} @media (max-width:767px){#setup-form-task-list :has(> :has(> .form-group) ~ :has(> .form-group))>:has(> .form-group){flex-basis:100%;max-width:100%}} /* botones de accion en tablas (engranaje, editar, etc.): sin cuadro blanco */ .table .actions .btn.icon,.table td .btn.icon,.table .actions .btn.icon:hover,.table .actions .btn.icon:focus,.table .actions .btn.icon:active,.table .actions .open>.btn.icon,.table td .btn.icon:focus,.table td .btn.icon:active{background:transparent!important;border-color:transparent!important;box-shadow:none!important;outline:0!important} .table .actions .btn.icon:hover,.table .actions .open>.btn.icon,.table td .btn.icon:hover{color:var(--v4-acc-txt)!important} .table th .btn.icon,.table th .btn.icon:hover,.table th .btn.icon:focus,.table th .btn.icon:active,.table th .open>.btn.icon,.table th .dropdown-toggle{background:transparent!important;border-color:transparent!important;box-shadow:none!important;outline:0!important} .table th .btn.icon:hover,.table th .open>.btn.icon{color:var(--v4-acc-txt)!important} .table td.dataTables_empty,.table td.no-data{text-align:center!important;color:var(--v4-txt2)!important;padding:20px!important} .modal .modal-body>.alert.sv4-movida{margin:12px 0!important} /* aviso arriba de pestanas: que las pestanas no se suban encima del aviso */ .modal .modal-body .alert~.nav-tabs,.modal .modal-body .alert+.nav-tabs{margin-top:0!important} .modal .modal-body>.alert{position:relative;z-index:2} /* error general arriba de las pestanas (ej. Reportes sin dispositivo) */ .modal .modal-body>.help-block.error{margin:0!important} .modal .modal-body>.help-block.error+.nav-tabs,.modal .modal-body>.help-block.error~.nav-tabs{margin-top:12px!important} /* ===== Telefono compacto: que quepa todo ===== */ @media (max-width:767px){ :root,:root[data-sv4]{--v4-gap:6px} html.sv4-mini,html.sv4-abierto{--v4-side:46px} html.sv4-mini #header .main-navbar .navbar-header{padding:6px 0!important;min-height:44px} html.sv4-mini #sv4-plegar{width:30px;height:30px;font-size:14px} html.sv4-mini #header .main-navbar .navbar-collapse{padding:4px 3px 6px!important} html.sv4-mini #header .main-navbar .navbar-nav>li>a,html.sv4-mini #header #dropTools+.dropdown-menu>li>a{padding:6px 0!important;min-height:28px} /* panel */ #sidebar.sidebar.left{bottom:calc(150px + 2 * var(--v4-gap))!important;max-width:none!important} #sv4-cab{padding:6px 8px 6px!important} #sv4-cab button,#sv4-cab .sv4-back,#sv4-cab>a{width:32px!important;height:32px!important;min-width:32px} #sv4-cab,#sv4-cab *{font-size:16px} #sidebar .sidebar-content>.nav-tabs{padding:0 6px!important;min-height:0} #sidebar .sidebar-content>.nav-tabs>li>a{padding:7px 6px!important;font-size:13px!important} #sidebar .tab-pane-header{padding:6px!important} #sidebar .tab-pane-header .form-control,#sidebar .tab-pane-header .btn{height:32px!important;min-height:32px!important} #sidebar .tab-pane-header .btn-primary,#sidebar .tab-pane-header .btn-default{min-width:40px} /* grupos y equipos mas bajos */ #ajax-items .group{margin:0 6px 6px!important} #ajax-items .group-heading{padding:4px 6px 4px 30px!important;font-size:13px!important;min-height:0} #ajax-items .group-heading *{font-size:13px} #ajax-items li[data-device-id]{min-height:0!important;padding-top:3px!important;padding-bottom:3px!important} #ajax-items li[data-device-id] .name{font-size:13px!important;line-height:1.25} #ajax-items li[data-device-id] .name small,#ajax-items li[data-device-id] .name .time,#ajax-items li[data-device-id] [data-device="time"]{font-size:11px!important} #ajax-items li[data-device-id] .details{font-size:11px!important} /* barra inferior mas baja */ #widgets{max-height:150px!important} #widgets .widget{height:142px!important;max-height:142px!important} #widgets .widget>.widget-heading{padding-top:6px!important;padding-bottom:6px!important;min-height:0} #widgets .widget>.widget-heading,#widgets .widget>.widget-heading *{font-size:14px} #widgets .widget .widget-body,#widgets .widget .widget-content{font-size:12px} #widgets .widget table td,#widgets .widget .table td{padding:4px 6px!important;font-size:12px!important} #map-controls,#map-controls.top-right{max-height:calc(100vh - 2 * var(--v4-gap) - 160px)} #map-controls .btn,#map-controls a,#map-controls button{width:36px!important;height:36px!important;min-height:36px} /* ventanas en el telefono */ .modal-dialog{margin:6px!important} .modal .modal-header{padding:10px 12px!important} .modal .modal-body{padding:10px 12px!important} .modal .modal-footer{padding:8px 12px!important} .modal .form-group{margin-bottom:10px!important} .modal .form-control,.modal .bootstrap-select>.dropdown-toggle{height:36px!important;min-height:36px} } /* telefono: submenus del riel (Mi cuenta, etc.) con nombre al lado del icono */ @media (max-width:767px){ html.sv4-mini #header .main-navbar .navbar-nav .dropdown-menu:not(#dropTools + .dropdown-menu){min-width:210px!important;width:auto!important;padding:6px 0!important} html.sv4-mini #header .main-navbar .navbar-nav .dropdown-menu:not(#dropTools + .dropdown-menu)>li>a{display:flex!important;align-items:center;justify-content:flex-start!important;gap:12px!important;padding:10px 16px!important;white-space:nowrap} html.sv4-mini #header .main-navbar .navbar-nav .dropdown-menu:not(#dropTools + .dropdown-menu) .text{display:inline!important} } /* telefono: submenu abierto (Mi cuenta, etc.) por encima del panel y la barra inferior */ @media (max-width:767px){ #header:has(.navbar-nav .dropdown.open),body:has(#header .navbar-nav .dropdown.open) #header{z-index:1300!important} #header .navbar-nav .dropdown.open>.dropdown-menu{z-index:1301!important;box-shadow:0 10px 40px rgba(0,0,0,.55)!important} } /* telefono: historial compacto (grafico visible sin bajar) */ @media (max-width:767px){ #bottom-history{max-height:none!important} #bottom-history .bottom-history-header{gap:6px!important;padding:6px 6px 4px!important} #bottom-history .bottom-history-header>.nav-tabs>li{height:32px!important} #bottom-history .bottom-history-header>.nav-tabs>li>a{height:32px!important;min-height:32px!important;padding:0 10px!important;font-size:13px!important;line-height:32px!important} #bottom-history .bottom-history-header>.nav-tabs>li.sv4-hp>a,#bottom-history .bottom-history-header>.nav-tabs>li:last-child>a{width:32px!important;padding:0!important} #sv4-sensor select{height:32px!important;font-size:13px!important;padding-top:0!important;padding-bottom:0!important} #bottom-history .graph-controls{padding:2px 6px!important;min-height:0!important;height:auto!important} #bottom-history .graph-controls .btn,#bottom-history .graph-controls select,#bottom-history .graph-controls .bootstrap-select>.dropdown-toggle{height:30px!important;min-height:30px!important} #bottom-history .graph-1-wrap{height:110px!important} #bottom-history .graph-1-wrap>*{max-height:110px} } /* telefono: en Historial, el formulario sube con la lista para ver los resultados */ @media (max-width:767px){ #sidebar #history_tab.sv4-hscroll{overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch} #sidebar #history_tab.sv4-hscroll>.tab-pane-body{height:auto!important;max-height:none!important;overflow:visible!important} #bottom-history .bottom-history-header>.nav-tabs>li:not(.sv4-hp):not(:last-child)>a{padding:0 6px!important;font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} } /* telefono: en Registro de datos no hace falta el selector de sensor; tabla mas compacta */ @media (max-width:767px){ #bottom-history:has(#datalog.active) #sv4-sensor{display:none!important} #bottom-history #datalog .table td,#bottom-history #datalog .table th{font-size:11px!important;padding:4px 6px!important;white-space:nowrap} #bottom-history #datalog .pagination>li>a,#bottom-history #datalog .pagination>li>span{min-width:30px;height:30px;padding:0 6px!important;line-height:30px;font-size:12px} } /* telefono: botones Grafico / Registro de datos con el texto completo y centrado */ @media (max-width:767px){ #bottom-history .bottom-history-header>.nav-tabs>li:first-child{flex:0 0 92px!important} #bottom-history .bottom-history-header>.nav-tabs>li:nth-child(2){flex:1 1 auto!important;min-width:0} #bottom-history .bottom-history-header>.nav-tabs>li:nth-child(2)>a{padding:0 8px!important;overflow:visible!important;text-overflow:clip!important} /* boton para volver a abrir el panel cuando se oculta */ #sv4-abrir{display:none} body:has(#sidebar.collapsed) #sv4-abrir{display:flex;position:fixed;top:var(--v4-gap);left:calc(var(--v4-side) + var(--v4-gap));z-index:1050;width:40px;height:40px;align-items:center;justify-content:center;border:0;border-radius:12px;background:var(--v4-nav);color:var(--v4-nav-txt);box-shadow:var(--v4-shadow);font-size:16px;padding:0} html.sv4-abierto #sv4-abrir{display:none!important} } /* telefono: que Chrome no agrande las letras por su cuenta, y "Registro de datos" siempre dentro de su casilla */ @media (max-width:767px){ html{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important} #bottom-history .bottom-history-header>.nav-tabs>li:first-child{flex:0 0 78px!important} #bottom-history .bottom-history-header>.nav-tabs>li:first-child>a,#bottom-history .bottom-history-header>.nav-tabs>li:nth-child(2)>a{font-size:12px!important;padding:0 4px!important;justify-content:center!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;letter-spacing:-.1px} } /* ventana del equipo en el mapa: boton activo sin la linea azul de abajo */ .leaflet-popup .popup-header .nav>li.active>a,.leaflet-popup .popup-header .nav>li>a{box-shadow:none!important;border-bottom:0!important} .leaflet-popup .popup-header .nav>li.active>a::after,.leaflet-popup .popup-header .nav>li.active::after{display:none!important} /* Panel: cuadros de estado con fondo claro -> texto oscuro */ .stat-box.sv4-claro,.stat-box.sv4-claro *{color:#14202F!important} /* Panel en telefono: la leyenda del grafico de torta debajo, sin taparlo */ @media (max-width:767px){ #device-statuses-graph{margin-bottom:190px!important;overflow:visible!important} #device-statuses-graph .legend>div{display:none!important} #device-statuses-graph .legend table{top:calc(100% + 12px)!important;right:auto!important;left:50%!important;transform:translateX(-50%);color:var(--v4-txt)!important;font-size:13px!important} #device-statuses-graph .legend table td{padding:3px 6px!important;color:var(--v4-txt)!important} } /* telefono con el menu abierto (con nombres): Mi cuenta se despliega debajo, dentro del menu */ @media (max-width:767px){ html.sv4-abierto #header .main-navbar .navbar-nav .dropdown.open>.dropdown-menu:not(#dropTools + .dropdown-menu){position:static!important;float:none!important;transform:none!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;min-width:0!important;max-width:none!important;margin:4px 0 8px 18px!important;box-shadow:none!important;border:0!important;border-left:2px solid var(--v4-nav-line)!important;border-radius:0!important;background:transparent!important;padding:2px 0!important} html.sv4-abierto #header .main-navbar .navbar-nav .dropdown.open>.dropdown-menu:not(#dropTools + .dropdown-menu)>li>a{padding:8px 14px!important;white-space:normal} } /* telefono: elegir idioma compacto */ @media (max-width:767px){ .modal .lang-list{display:grid!important;grid-template-columns:1fr 1fr;gap:6px} .modal .lang-list>.lang-item{width:auto!important;float:none!important;margin:0!important;padding:0!important;min-width:0} .modal .lang-list>.lang-item>.btn{height:34px!important;min-height:34px!important;margin:0!important;padding:0 8px!important;font-size:12px!important;display:flex!important;align-items:center;justify-content:flex-start;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:8px!important} .modal .lang-list>.lang-item>.btn img{height:13px;width:auto;flex:0 0 auto;margin:0!important} } /* telefono: inicio de sesion compacto */ @media (max-width:767px){ html body.sign-in-layout .center-vertical{padding:12px 0!important;align-items:flex-start} html body.sign-in-layout .container>[class*="col-"]{padding:0 12px} html body.sign-in-layout .panel{border-radius:18px!important;margin-bottom:12px} html body.sign-in-layout .panel .panel-body{padding:18px 18px 14px!important} html body.sign-in-layout .panel .panel-body>a>img,html body.sign-in-layout .panel .panel-body img.center-block{max-width:110px!important;max-height:110px!important;margin:0 auto 2px!important} html body.sign-in-layout .panel hr{margin:12px 0!important} html body.sign-in-layout .panel .form-group{margin-bottom:10px!important} html body.sign-in-layout .panel input#sign-in-form-email,html body.sign-in-layout .panel input#sign-in-form-password,html body.sign-in-layout .panel .form-control{height:42px!important;font-size:15px!important} html body.sign-in-layout .panel .g-recaptcha{transform:scale(.88);transform-origin:left top;height:70px;margin-bottom:4px} html body.sign-in-layout .panel .checkbox{margin:6px 0 10px!important} html body.sign-in-layout .panel button.btn.btn-lg.btn-primary.btn-block{height:44px!important;font-size:15px!important} html body.sign-in-layout .app-links img{height:38px} } @media (max-width:767px){ .modal .lang-list::before,.modal .lang-list::after{display:none!important;content:none!important} .modal .lang-list>.lang-item>.btn{height:auto!important;white-space:normal!important;line-height:1.15;text-align:left;padding:6px 8px!important} } /* inicio de sesion: "No soy un robot" oscuro, centrado y con esquinas redondeadas como los campos */ html body.sign-in-layout .panel .g-recaptcha{display:flex!important;justify-content:center;transform:none!important;height:auto!important;margin:2px 0 10px!important} html body.sign-in-layout .panel .g-recaptcha>div{border-radius:12px;overflow:hidden;filter:invert(.9) hue-rotate(180deg) contrast(.92);box-shadow:0 0 0 1px rgba(255,255,255,.08)} @media (max-width:340px){html body.sign-in-layout .panel .g-recaptcha>div{transform:scale(.9);transform-origin:center top}} /* paginas sin menu lateral (Compartir ubicacion): el mapa ocupa todo el ancho */ html:not(:has(#header .main-navbar)),html.sv4-mini:not(:has(#header .main-navbar)),html.sv4-abierto:not(:has(#header .main-navbar)){--v4-side:0px!important} html:not(:has(#header .main-navbar)) #mapWrap{left:0!important;margin-left:0!important} /* boton de los 3 puntos (menu del equipo / grupo): sin cuadro blanco al abrirlo */ #sidebar .open>[data-toggle="dropdown"],#sidebar [data-toggle="dropdown"]:focus,#sidebar [data-toggle="dropdown"]:active,#sidebar [data-toggle="dropdown"][aria-expanded="true"], #sidebar .open>.btn,#sidebar .btn-group.open .dropdown-toggle{background:var(--v4-hover)!important;border-color:transparent!important;box-shadow:none!important;outline:0!important;color:var(--v4-acc-txt)!important;border-radius:8px!important} #sidebar .open>[data-toggle="dropdown"] *,#sidebar [data-toggle="dropdown"][aria-expanded="true"] *{color:var(--v4-acc-txt)!important} /* flechita blanca del menu de 3 puntos (y otros menus con flecha) */ .droparrow>.dropdown-menu::before,.droparrow>.dropdown-menu::after{display:none!important;content:none!important} /* botones de icono (3 puntos de grupos y equipos, etc.): al pasar el mouse sin fondo blanco */ .btn.icon:hover,.btn.icon:focus,.group-heading>.btn-group .btn.options:hover,.group-heading>.btn-group .btn.options:focus{background:var(--v4-hover)!important;color:var(--v4-acc-txt)!important;border-color:transparent!important;box-shadow:none!important;border-radius:8px!important} .table .btn.icon:hover,.table .btn.icon:focus{background:transparent!important}