#navitrax-map-counters{

    position:absolute;

    top:18px;

    right:60px;

    width:160px;

    z-index:650;

    background:rgb(255, 255, 255);

    border:1px solid rgba(0,0,0,.06);

    border-radius:12px;

    overflow:hidden;

    box-shadow:
        0 6px 18px rgba(0,0,0,.12);

    font-family:'Inter',sans-serif;

}


/* CABECERA */

.counter-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px 16px;

}

.counter-title{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    font-weight:600;

    color:#222;

}



.counter-total{

    font-size:13px;

    font-weight:700;

    color:#111;

    line-height:1;

}


/* DIVISOR */

.counter-divider{

    height:1px;

    background:rgba(0,0,0,.06);

}


/* LISTA */

.counter-list{

    padding:12px 0;

}

.counter-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:6px 16px;

    transition:.20s;

}

@media (hover:hover){

    .counter-row:hover{
        background:rgba(106,61,232,.05);
    }

}

.counter-label{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:11px;

    color:#444;

    font-weight:500;

}

.counter-row strong{

    font-size:11px;

    font-weight:700;

    color:#222;

}


/* DOTS */

.dot{

    width:8px;

    height:8px;

    border-radius:50%;

    flex-shrink:0;

}

.dot.moving{

    background:#22c55e;

}

.dot.stopped{

    background:#fbff00;

}

.dot.offline{

    background:#ef4444;

}

.dot.engine{

    background:#fcc102;

}


/* DARK MODE */

body[class*=dark-] #navitrax-map-counters{

    background:rgb(44, 44, 44);

    border-color:rgba(255,255,255,.08);

}

body[class*=dark-] .counter-title,
body[class*=dark-] .counter-row strong,
body[class*=dark-] .counter-total{

    color:#fff;

}

body[class*=dark-] .counter-label{

    color:#ddd;

}

body[class*=dark-] .counter-divider{

    background:rgba(255,255,255,.08);

}


/* TABLETS */

@media (max-width:1200px){

    #navitrax-map-counters{

        width:145px;

        top:25px;

        right:60px;

    }

}


/* MOBILE */

@media (max-width:768px){

    #navitrax-map-counters{

        top:20px;
        right:55px;
        width:132px;

        border-radius:10px;

    }

    .counter-header{

        padding:6px 10px;

    }

    .counter-title{

        font-size:11px;

    }

    .counter-total{

        font-size:11px;

    }

    .counter-list{

        padding:6px 0;

    }

    .counter-row{

        padding:4px 10px;

    }

    .counter-label{

        font-size:10px;

        gap:6px;

    }

    .counter-row strong{

        font-size:10px;

    }

    .dot{

        width:6px;
        height:6px;

    }

}