/* ============================================================
   POSCAM GPS — Personalización de interfaz (ingreso.poscam.cl)
   Cargado por Appearance::assetFileExists('css'). NO edita el core.
   Reescrito limpio 2026-07-15 (v8).
   REGLA CLAVE: el estilo de selección circular va SOLO en la lista
   de vehículos. Las casillas de los modales de configuración NO se
   tocan → conservan el checkbox original del tema (no se deforman).
   ============================================================ */

/* ============================================================
   1. SELECCIÓN CIRCULAR — SOLO en la lista de vehículos y sus
      encabezados de grupo. Los labels aquí son vacíos (sin texto),
      así que la caja fija 18×18 con anillo + punto es estable.
   ============================================================ */
#ajax-items .group-list > li > .checkbox,
#objects_tab .group-heading > .checkbox {
    position: relative !important;
}
#ajax-items .group-list > li > .checkbox label,
#objects_tab .group-heading > .checkbox label {
    position: relative !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    cursor: pointer;
}
/* checkbox nativo transparente cubriendo TODA la celda del círculo:
   así se puede clickear en el centro (o cualquier parte) para alternar */
#ajax-items .group-list > li > .checkbox input[type=checkbox],
#objects_tab .group-heading > .checkbox input[type=checkbox] {
    position: absolute !important;
    left: 0 !important; top: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: auto !important; height: auto !important;
    min-width: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 5 !important;   /* sobre anillo (1) y punto (2) para captar el clic */
}
/* anillo (::before). El tema le pone z-index:1 → lo bajamos a 1 y
   ponemos el punto por encima (z-index:2), si no el anillo lo tapa. */
#ajax-items .group-list > li > .checkbox label::before,
#objects_tab .group-heading > .checkbox label::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important; top: 0 !important;
    width: 14px !important; height: 14px !important;
    padding: 0 !important; margin: 0 !important;
    background: #fff !important;
    border: 2px solid #b9c2cf !important;
    border-radius: 50% !important;
    box-sizing: content-box !important;   /* total 18px */
    transform: none !important;
    z-index: 1 !important;
    transition: border-color .15s ease-in-out;
}
/* punto (oculto si no está marcado); z-index:2 para quedar SOBRE el anillo */
#ajax-items .group-list > li > .checkbox label::after,
#objects_tab .group-heading > .checkbox label::after {
    content: "" !important;
    position: absolute !important;
    left: 5px !important; top: 5px !important;   /* (18-8)/2 */
    width: 8px !important; height: 8px !important;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: #054786 !important;
    transform: scale(0);
    z-index: 2 !important;
    transition: transform .15s ease-in-out;
}
/* hover: aro azul */
#ajax-items .group-list > li > .checkbox label:hover::before,
#objects_tab .group-heading > .checkbox label:hover::before {
    border-color: #054786 !important;
}
/* marcado: aro azul + punto visible */
#ajax-items .group-list > li > .checkbox input:checked + label::before,
#objects_tab .group-heading > .checkbox input:checked + label::before {
    border-color: #054786 !important;
}
#ajax-items .group-list > li > .checkbox input:checked + label::after,
#objects_tab .group-heading > .checkbox input:checked + label::after {
    transform: scale(1);
}

/* ============================================================
   2. ICONOS DE SENSORES CON COLORES (panel inferior + popup mapa)
   El tema los apaga con `#widgets .widget-sensors .table .icon
   {color:#ccc}` → igualamos especificidad con #.
   ============================================================ */
#widgets .widget-sensors .table .icon,
[data-device="sensors"] td .icon {
    display: inline-block;
    min-width: 24px;
    text-align: center;
    margin-right: 6px;
    vertical-align: middle;
    color: #54698d;
}
#widgets .widget-sensors .table .icon.battery,
#widgets .widget-sensors .table .icon[class*="battery-"],
[data-device="sensors"] .icon.battery,
[data-device="sensors"] .icon[class*="battery-"] { color: #2e9e5b !important; }
#widgets .widget-sensors .table .icon[class*="gsm"],
[data-device="sensors"] .icon[class*="gsm"] { color: #2f80c4 !important; }
#widgets .widget-sensors .table .icon.acc,
#widgets .widget-sensors .table .icon.ignition,
[data-device="sensors"] .icon.acc,
[data-device="sensors"] .icon.ignition { color: #e8912d !important; }
#widgets .widget-sensors .table .icon.satellites,
[data-device="sensors"] .icon.satellites { color: #7a5fc7 !important; }
#widgets .widget-sensors .table .icon.engine,
#widgets .widget-sensors .table .icon.detect_engine,
[data-device="sensors"] .icon.engine,
[data-device="sensors"] .icon.detect_engine { color: #d64541 !important; }
#widgets .widget-sensors .table .icon.engine_hours,
[data-device="sensors"] .icon.engine_hours { color: #d35400 !important; }
#widgets .widget-sensors .table .icon.odometer,
#widgets .widget-sensors .table .icon.counter,
#widgets .widget-sensors .table .icon.numerical,
[data-device="sensors"] .icon.odometer,
[data-device="sensors"] .icon.counter,
[data-device="sensors"] .icon.numerical { color: #1a9988 !important; }
#widgets .widget-sensors .table .icon.speed,
#widgets .widget-sensors .table .icon.speed_ecm,
#widgets .widget-sensors .table .icon.tachometer,
[data-device="sensors"] .icon.speed,
[data-device="sensors"] .icon.speed_ecm,
[data-device="sensors"] .icon.tachometer { color: #0a90b8 !important; }
#widgets .widget-sensors .table .icon.fuel,
#widgets .widget-sensors .table .icon.fuel_tank,
#widgets .widget-sensors .table .icon.fuel_consumption,
[data-device="sensors"] .icon.fuel,
[data-device="sensors"] .icon.fuel_tank,
[data-device="sensors"] .icon.fuel_consumption { color: #d68910 !important; }
#widgets .widget-sensors .table .icon.temperature,
[data-device="sensors"] .icon.temperature { color: #c2436b !important; }
#widgets .widget-sensors .table .icon.door,
#widgets .widget-sensors .table .icon.doors,
[data-device="sensors"] .icon.door,
[data-device="sensors"] .icon.doors { color: #8d6e63 !important; }
#widgets .widget-sensors .table .icon.plugged,
[data-device="sensors"] .icon.plugged { color: #43a047 !important; }
#widgets .widget-sensors .table .icon.seatbelt,
[data-device="sensors"] .icon.seatbelt { color: #5c6bc0 !important; }
#widgets .widget-sensors .table .icon.load,
[data-device="sensors"] .icon.load { color: #b7950b !important; }
#widgets .widget-sensors .table .icon.rfid,
#widgets .widget-sensors .table .icon.driver,
[data-device="sensors"] .icon.rfid,
[data-device="sensors"] .icon.driver { color: #4a69bd !important; }

/* iconos propios: VOLTAJE (rayo) y BLOQUEO (candado), los pone js.js */
#widgets .widget-sensors .table .icon.poscam-custom,
.icon.poscam-custom {
    display: inline-block;
    width: 20px; height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
    vertical-align: middle;
}
.icon.poscam-custom:before,
.icon.poscam-custom:after { content: none !important; }
.icon.poscam-ico-voltage {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8a012'%3E%3Cpath d='M13.5 2 4.8 13.4h5.2L9.6 22l8.8-11.6h-5.3L13.5 2z'/%3E%3C/svg%3E");
}
.icon.poscam-ico-lock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d64541'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6.2A2.2 2.2 0 0 0 4 12.2v7.6A2.2 2.2 0 0 0 6.2 22h11.6a2.2 2.2 0 0 0 2.2-2.2v-7.6a2.2 2.2 0 0 0-2.2-2.2H17V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3H9zm3 4.2a1.8 1.8 0 0 1 .9 3.36V19a.9.9 0 0 1-1.8 0v-1.44A1.8 1.8 0 0 1 12 14.2z'/%3E%3C/svg%3E");
}

/* ============================================================
   3. MENÚ DESPLEGABLE del header — pulido + iconos a color
   ============================================================ */
#header .dropdown-menu {
    border-radius: 8px;
    border: 1px solid rgba(5, 71, 134, .12);
    box-shadow: 0 8px 24px rgba(16, 35, 61, .16);
    padding: 6px 0;
    overflow: hidden;
}
#header .dropdown-menu > li > a { padding: 8px 16px; transition: background-color .12s ease-in-out; }
#header .dropdown-menu > li > a:hover { background-color: #eef4fb; }
#header .dropdown-menu > li > a .icon {
    display: inline-block; width: 20px; text-align: center;
    margin-right: 8px; font-size: 14px; vertical-align: middle;
}
#header .dropdown-menu .icon.alerts:before        { color: #e8912d !important; }
#header .dropdown-menu .icon.geofences:before     { color: #2e9e5b !important; }
#header .dropdown-menu .icon.routes:before        { color: #7a5fc7 !important; }
#header .dropdown-menu .icon.reports:before       { color: #2f80c4 !important; }
#header .dropdown-menu .icon.ruler:before         { color: #1a9988 !important; }
#header .dropdown-menu .icon.poi:before           { color: #d64541 !important; }
#header .dropdown-menu .icon.point:before         { color: #e8912d !important; }
#header .dropdown-menu .icon.address:before       { color: #0a90b8 !important; }
#header .dropdown-menu .icon.send-command:before  { color: #2f80c4 !important; }
#header .dropdown-menu .icon.camera:before        { color: #8e44ad !important; }
#header .dropdown-menu .icon.task:before          { color: #d68910 !important; }
#header .dropdown-menu .icon.services:before      { color: #546e7a !important; }
#header .dropdown-menu .icon.money:before         { color: #2e9e5b !important; }
#header .dropdown-menu .icon.dashboard:before     { color: #0a90b8 !important; }
#header .dropdown-menu .icon.sharing:before       { color: #3498db !important; }
#header .dropdown-menu .icon.device:before,
#header .dropdown-menu .icon.devices:before       { color: #054786 !important; }
#header .dropdown-menu .icon.chat:before          { color: #2f80c4 !important; }
#header .dropdown-menu .icon.call_action:before   { color: #d64541 !important; }
#header .dropdown-menu .icon.forwards:before      { color: #7a5fc7 !important; }
#header .dropdown-menu .icon.account:before       { color: #054786 !important; }
#header .dropdown-menu .icon.membership:before    { color: #d68910 !important; }
#header .dropdown-menu .icon.password:before      { color: #546e7a !important; }
#header .dropdown-menu .icon.setup:before         { color: #546e7a !important; }
#header .dropdown-menu .icon.admin:before         { color: #054786 !important; }
#header .dropdown-menu .icon.logout:before        { color: #d64541 !important; }
#header .dropdown-menu .icon.external-link:before { color: #546e7a !important; }
#header .dropdown-menu .icon.tools:before         { color: #546e7a !important; }

/* menú contextual de cada vehículo (3 puntitos) */
#ajax-items .dropdown-menu {
    border-radius: 8px;
    border: 1px solid rgba(5, 71, 134, .12);
    box-shadow: 0 8px 24px rgba(16, 35, 61, .16);
}
#ajax-items .dropdown-menu > li > a:hover { background-color: #eef4fb; }
#ajax-items .dropdown-menu > li > a .icon {
    display: inline-block; width: 20px; text-align: center; margin-right: 6px;
}
#ajax-items .dropdown-menu .icon.last-hour:before,
#ajax-items .dropdown-menu .icon.today:before,
#ajax-items .dropdown-menu .icon.yesterday:before { color: #2f80c4 !important; }
#ajax-items .dropdown-menu .icon.follow:before        { color: #0a90b8 !important; }
#ajax-items .dropdown-menu .icon.send-command:before  { color: #2f80c4 !important; }
#ajax-items .dropdown-menu .icon.edit:before          { color: #e8912d !important; }
#ajax-items .dropdown-menu .icon.sharing:before       { color: #3498db !important; }
#ajax-items .dropdown-menu .icon.alerts:before        { color: #e8912d !important; }
#ajax-items .dropdown-menu .icon.route_type:before    { color: #7a5fc7 !important; }
#ajax-items .dropdown-menu .icon.camera:before        { color: #8e44ad !important; }
#ajax-items .dropdown-menu .icon.qrcode:before        { color: #546e7a !important; }
#ajax-items .dropdown-menu .icon.devices:before       { color: #054786 !important; }
#ajax-items .dropdown-menu .icon.unlock:before        { color: #d64541 !important; }

/* motor encendido/apagado en cada fila */
#ajax-items [data-device="detect_engine"].on .icon.detect_engine  { color: #2e9e5b !important; }
#ajax-items [data-device="detect_engine"].off .icon.detect_engine { color: #b9c2cf !important; }

/* ============================================================
   4. BOTONES REDONDEADOS
   ============================================================ */
.btn { border-radius: 8px; }
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-radius: 8px 0 0 8px; }
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) { border-radius: 0 8px 8px 0; }
.btn-group-vertical > .btn:not(:first-child):not(:last-child) { border-radius: 0; }
.btn-group-vertical > .btn:first-child:not(:last-child) { border-radius: 10px 10px 0 0; }
.btn-group-vertical > .btn:last-child:not(:first-child) { border-radius: 0 0 10px 10px; }
.btn-group-vertical > .btn:first-child:last-child { border-radius: 10px; }
.input-group .form-control:first-child,
.input-group .form-group.search .form-control { border-radius: 18px 0 0 18px; }
.input-group-btn > .btn { border-radius: 0; }
.input-group-btn:last-child > .btn:last-child { border-radius: 0 18px 18px 0; }
.modal-footer .btn { border-radius: 999px; padding-left: 18px; padding-right: 18px; }

/* ============================================================
   5. BARRA DE CONTROLES DEL MAPA (derecha)
   ============================================================ */
.map-controls .btn-group-vertical {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(16, 35, 61, .28);
}
.map-controls .btn-group-vertical > .btn { border-radius: 0 !important; }
#map-controls .icon.map-expand:before,
#map-controls .icon.map-change:before { color: #546e7a; }
#map-controls .icon.zoomIn:before,
#map-controls .icon.zoomOut:before   { color: #054786; }
#map-controls-layers .btn .icon.group-devices:before { color: #2f80c4; }
#map-controls-layers .btn .icon.fitBounds:before     { color: #16a085; }
#map-controls-layers .btn .icon.devices:before       { color: #054786; }
#map-controls-layers .btn .icon.geofences:before     { color: #2e9e5b; }
#map-controls-layers .btn .icon.routes:before        { color: #7a5fc7; }
#map-controls-layers .btn .icon.poi:before           { color: #d64541; }
#map-controls-layers .btn .icon.show-name:before     { color: #e8912d; }
#map-controls-layers .btn .icon.show-tail:before     { color: #0a90b8; }
#map-controls-layers .btn .icon.traffic:before       { color: #d35400; }
#history-control-layers .btn .icon.routes:before  { color: #7a5fc7; }
#history-control-layers .btn .icon.device:before  { color: #054786; }
#history-control-layers .btn .icon.parking:before { color: #2f80c4; }
#history-control-layers .btn .icon.event:before   { color: #e8912d; }
.map-controls .btn.active .icon:before { color: #fff !important; }

/* ============================================================
   6. ICONOS DEL HEADER (arriba a la derecha): blancos nítidos
   ============================================================ */
#header .navbar-nav > li > a .icon {
    color: #fff; opacity: .82; transition: opacity .12s ease-in-out;
}
#header .navbar-nav > li > a:hover .icon,
#header .navbar-nav > li.open > a .icon { opacity: 1; }

/* ============================================================
   7. LISTA DE VEHÍCULOS estilo Navixy (chip + estado + grupos)
   js.js inyecta .poscam-vchip-cell y .poscam-status-text.
   ============================================================ */
#ajax-items li[data-device-id]:hover { background-color: #f4f8fd; }
#ajax-items .group-list > li > .name,
#ajax-items .group-list > li > .details,
#ajax-items .group-list > li > .checkbox,
#ajax-items .group-list > li > .poscam-vchip-cell {
    border-bottom: 1px solid #f2f4f7;
}
#ajax-items .group-list > li > .name { padding: 7px 4px; }
#ajax-items .group-list > li .name [data-device="name"] {
    font-weight: 600; font-size: 13px; color: #1c2b3a; display: block; line-height: 1.25;
}
#ajax-items .group-list > li .name [data-device="time"] { font-size: 11px; color: #8a94a3; }
.poscam-status-text { font-size: 11px; font-weight: 600; }
.poscam-vchip-cell {
    display: table-cell; vertical-align: middle; width: 1%;
    padding: 4px 2px 4px 6px; cursor: pointer;
}
.poscam-vchip {
    display: inline-block; width: 30px; height: 30px; border-radius: 10px;
    background: #fff; border: 2px solid currentColor; position: relative;
    box-shadow: 0 1px 3px rgba(16, 35, 61, .14);
}
.poscam-vchip:after {
    content: ""; position: absolute; left: 4px; right: 4px; top: 4px; bottom: 4px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#ajax-items .group-list > li .details [data-device="speed"] { font-size: 11px; color: #8a94a3; }
#ajax-items .group-list > li .details [data-device="status"] { display: none; }
#ajax-items .group-list > li.active,
#ajax-items .group-list > li.active > .name,
#ajax-items .group-list > li.active > .details,
#ajax-items .group-list > li.active > .checkbox,
#ajax-items .group-list > li.active > .poscam-vchip-cell { background-color: #eaf3fc; }
#ajax-items .group-list > li.active > .checkbox { box-shadow: inset 3px 0 0 #054786; }
#objects_tab .group-heading {
    background-color: #e7eef7;                 /* banda azul-gris para separar grupos */
    border-top: 1px solid #d4deec;
    border-bottom: 1px solid #d4deec;
    box-shadow: inset 3px 0 0 #054786;         /* barrita navy al costado */
    padding: 9px 8px;
}
#objects_tab .group-heading:hover { background-color: #dde7f4; }
#objects_tab .group-heading > .group-title {
    font-weight: 700; font-size: 12px; letter-spacing: .3px; color: #054786; text-transform: uppercase;
}
#objects_tab .group-heading > .group-title .count { color: #5a7fb0; font-weight: 600; }