:root{
    --g-0:#0a0a0a;   /* fondo más oscuro */
    --g-1:#111111;
    --g-2:#1a1a1a;
    --g-3:#222222;   /* cards */
    --g-4:#2b2b2b;   /* bordes suaves */
    --g-5:#3a3a3a;   /* hover */
    --g-6:#888888;   /* texto mutedo */
    --g-7:#e5e5e5;   /* texto principal */
    --ok:#86efac;    /* éxito tenue */
    --warn:#fde68a;  /* advertencia tenue */
    --bad:#fca5a5;   /* error tenue */
    --radius:16px;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --w:#fff; /*blanco*/


}
h3{
    margin: 0px;
    padding: 0px;
    font-size: 14px;

}
h2{
    font-size: 20px;
    margin: 0px;
    padding: 0px;
    font-weight: bold;
    color: #5c5c5c;
}
body{
    background-color: #efefef;
}
a{
    color:#086074;
    text-decoration: none;
}

.app{
    display:grid;
    grid-template-columns:260px 1fr;
    grid-template-rows:64px 1fr;
    grid-template-areas:"sidebar topbar" "sidebar main";
    min-height:100vh
} /* Sidebar */
.sidebar{
    grid-area:sidebar;
    position:sticky;
    top:0;
    height:100vh;
    background:linear-gradient(180deg,var(--g-2),var(--g-1));
    border-right:1px solid var(--g-4);
    padding:18px
}
.main{
    grid-area:main;
    padding:16px
}
.brand{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px
}
.brand-logo{
    background-image: url('../imagenes/logo.png');
    width: 37px;
    height: 49px;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(181, 181, 181, 0.04);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position-x: 7px;
    background-position-y: 9px;
    background-color: #000;
}
.brand h1 {
    font-size: 15px;
    margin: 0;
    color: #f1f1f1;
    font-weight: bold;
}
.menu{
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.menu li{
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #d9d9d9;
    padding: 10px 12px;
    margin-bottom: 4px;
}
.menu li.active{
    background: linear-gradient(180deg,#2a2a2a,#202020);
    border-color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #d9d9d9;
    padding: 10px 12px;
    border-radius: 5px;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;

}
.menu li a{
    color:var(--w);
    text-decoration: none;
}
.menu li:hover{
    background: var(--g-3);
    border-color: var(--g-4);
    border-radius: 5px;
}
.divider{
    height: 1px;
    background: var(--g-4);

}

.topbar{
    grid-area:topbar;
    gap:10px;
    padding:10px 14px;
    border-bottom:1px solid var(--g-4);
    backdrop-filter:blur(8px);
    position:sticky;
    top:0;
    background:#121212e5;
    z-index: 999;
}
.breadcrumb{
    font-size: 12px;
    color: #b3b3b3;
}
.head{

    margin-bottom: 24px;
    border-bottom: 2px solid #69696921;
    padding-bottom: 12px;
}
.btn{
    background-color: #23527c;
    color: #fff;
    border-color: #23527c;
}
.btn:hover{
    background-color: #23527c;
    color: #fff;
    border-color: #23527c;
}
.btn:visited{
    background-color: #23527c;
    color: #fff;
    border-color: #23527c;
}
.btn-danger{
    background-color: #a41c8f;
    border-color:#a41c8f;
}
.btn-danger:hover{
    background-color: #a41c8f;
    border-color:#a41c8f;
}
.btn-danger:visited{
    background-color: #a41c8f;
    border-color:#a41c8f;
}
.panel-default  .panel-heading{
    color: #d5d5d5;
    background-color: #404040;
    border-color: #ddd;
    font-size: 14px;
    font-weight: bold;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color: #fff;
    background-color: #888;
    border: 1px solid #888;
}
.btn-100{
    width: 100%;
}

.indicadores h2{
    font-size: 36px;
    color: #d71aa8;
}

.panel-primary {
    background: linear-gradient(180deg,#222,#1a1a1a);

    border:var(--g-2);
    color: var(--w);
    border-radius: 12px;

}

#div-conexion{
    position: absolute;
    background-color: #000;
    padding: 15px;
    z-index: 99;
    bottom: 15px;
    color: #fff;
}
.desconectado{
    color: #ff0000;
}
.conectado{
    color: #5cff00;
}

.gm-ui-hover-effect{
    width: 24px !important;
    height: 24px !important;
    margin-right: 6px !important;
}

.mensaje-success{
    font-size: 24px;
    color: #fff;
    font-weight: bold;
}
.mensaje-danger{
    font-size: 24px;
    color: #f00;
    font-weight: bold;
}
#conductores-activos{
    font-size: 50px;
    font-weight: bold;
}