/* =========================================================
   CENTRAL INTEGRACIÓN PIFEÑA S.A.
   assets/css/estilos.css
   Dashboard tipo Fleet / Central GPS
========================================================= */

:root{
    --bg-main:#07111f;
    --bg-deep:#030914;
    --bg-panel:#0b1728;
    --bg-panel-2:#102037;
    --sidebar:#071827;
    --border:rgba(148,163,184,.18);
    --text:#f8fafc;
    --muted:#94a3b8;
    --muted-2:#cbd5e1;
    --yellow:#facc15;
    --yellow-2:#f59e0b;
    --blue:#0ea5ff;
    --green:#22c55e;
    --red:#ef4444;
    --purple:#8b5cf6;
    --shadow:0 20px 55px rgba(0,0,0,.42);
    --shadow-soft:0 14px 34px rgba(0,0,0,.28);
    --sidebar-width:286px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
}

body{
    font-family:"Segoe UI", Arial, sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 20% 0%, rgba(14,165,255,.18), transparent 28%),
        radial-gradient(circle at 80% 0%, rgba(250,204,21,.08), transparent 24%),
        linear-gradient(135deg, var(--bg-deep), var(--bg-main) 55%, #0b1324);
    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font-family:inherit;
}

.app{
    min-height:100vh;
    display:flex;
}

/* ==============================
   SIDEBAR
============================== */

.sidebar{
    width:var(--sidebar-width);
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    background:
        linear-gradient(180deg, rgba(7,24,39,.98), rgba(4,13,25,.98)),
        radial-gradient(circle at top, rgba(14,165,255,.15), transparent 40%);
    border-right:1px solid var(--border);
    box-shadow:14px 0 38px rgba(0,0,0,.38);
    z-index:1000;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
}

.sidebar::-webkit-scrollbar{
    width:7px;
}

.sidebar::-webkit-scrollbar-thumb{
    background:#334155;
    border-radius:20px;
}

.brand{
    padding:28px 16px 24px;
    text-align:center;
    border-bottom:1px solid var(--border);
}

.brand-logo{
    width:126px;
    height:126px;
    margin:0 auto 16px;
    border-radius:50%;
    background:#fff;
    border:4px solid var(--yellow);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
        0 18px 38px rgba(0,0,0,.45),
        0 0 0 8px rgba(250,204,21,.08),
        0 0 30px rgba(250,204,21,.22);
}

.brand-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.brand h2{
    font-size:26px;
    font-weight:950;
    letter-spacing:-.4px;
    margin-bottom:6px;
}

.brand span{
    color:var(--muted);
    font-size:14px;
    font-weight:700;
}

.menu{
    padding:18px 14px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.menu a{
    display:flex;
    align-items:center;
    gap:14px;
    min-height:58px;
    padding:0 18px;
    border-radius:14px;
    color:#e2e8f0;
    font-size:17px;
    font-weight:800;
    transition:.22s ease;
    position:relative;
    border:1px solid transparent;
}

.menu a span{
    width:28px;
    font-size:22px;
    display:inline-flex;
    justify-content:center;
}

.menu a:hover{
    background:rgba(255,255,255,.055);
    border-color:rgba(148,163,184,.18);
    transform:translateX(4px);
}

.menu a.active{
    background:linear-gradient(135deg, var(--yellow), var(--yellow-2));
    color:#111827;
    box-shadow:0 14px 28px rgba(250,204,21,.22);
}

.menu a.active::before{
    content:"";
    width:4px;
    height:34px;
    background:#fff;
    border-radius:20px;
    position:absolute;
    left:-7px;
}

.sidebar-user{
    margin:18px 14px;
    padding:18px;
    margin-top:auto;
    border:1px solid var(--border);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(15,31,53,.92), rgba(10,22,38,.92));
    display:flex;
    align-items:center;
    gap:14px;
    box-shadow:var(--shadow-soft);
}

.user-avatar{
    width:58px;
    height:58px;
    border-radius:50%;
    background:rgba(250,204,21,.13);
    border:2px solid var(--yellow);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.sidebar-user strong{
    display:block;
    font-size:16px;
    font-weight:900;
}

.sidebar-user span{
    display:block;
    color:var(--muted-2);
    font-size:13px;
    margin:4px 0;
}

.sidebar-user small{
    display:block;
    color:#86efac;
    font-size:12px;
    font-weight:800;
}

/* ==============================
   MAIN
============================== */

.main-content{
    margin-left:var(--sidebar-width);
    width:calc(100% - var(--sidebar-width));
    min-height:100vh;
    padding:24px 28px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* ==============================
   TOP STATS
============================== */

.stats-bar{
    min-height:152px;
    width:100%;
    border:2px solid var(--yellow);
    border-radius:22px;
    background:
        linear-gradient(135deg, rgba(3,10,21,.88), rgba(9,25,43,.92)),
        radial-gradient(circle at top left, rgba(14,165,255,.18), transparent 26%);
    box-shadow:var(--shadow);
    display:grid;
    grid-template-columns:repeat(4, 1fr) 1.05fr;
    overflow:hidden;
}

.stat-item,
.stat-date{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px 28px;
    position:relative;
}

.stat-item:not(:last-child)::after{
    content:"";
    width:1px;
    height:70%;
    background:rgba(148,163,184,.20);
    position:absolute;
    right:0;
    top:15%;
}

.stat-icon{
    width:82px;
    height:82px;
    min-width:82px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    box-shadow:0 16px 30px rgba(0,0,0,.30);
}

.stat-item.blue .stat-icon{ background:linear-gradient(135deg, #0ea5ff, #1d4ed8); }
.stat-item.yellow .stat-icon{ background:linear-gradient(135deg, var(--yellow), var(--yellow-2)); }
.stat-item.green .stat-icon{ background:linear-gradient(135deg, #22c55e, #15803d); }
.stat-item.purple .stat-icon{ background:linear-gradient(135deg, #a855f7, #6d28d9); }

.stat-item h2{
    font-size:40px;
    line-height:1;
    font-weight:950;
    margin-bottom:7px;
}

.stat-item strong{
    display:block;
    font-size:20px;
    font-weight:950;
}

.stat-item span{
    display:block;
    color:var(--muted-2);
    font-size:14px;
    margin-top:5px;
}

.stat-item.purple span::before{
    content:"";
    width:9px;
    height:9px;
    background:#22c55e;
    display:inline-block;
    border-radius:50%;
    margin-right:7px;
}

.stat-date{
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    border-left:1px solid rgba(148,163,184,.20);
    color:#fff;
    font-size:18px;
    font-weight:800;
}

.stat-date div{
    display:flex;
    align-items:center;
    gap:12px;
}

/* ==============================
   MAP DASHBOARD
============================== */

.dashboard-map-panel{
    height:calc(100vh - 245px);
    min-height:620px;
    position:relative;
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(148,163,184,.24);
    box-shadow:var(--shadow);
    background:#07111f;
}

#mapa{
    width:100%;
    height:100%;
    min-height:620px;
    background:#07111f;
    z-index:1;
}

.leaflet-container{
    background:#07111f;
    font-family:"Segoe UI", Arial, sans-serif;
}

.leaflet-control-zoom{
    border:none !important;
    box-shadow:var(--shadow-soft) !important;
}

.leaflet-control-zoom a{
    background:rgba(7,17,31,.92) !important;
    color:#fff !important;
    border-color:rgba(148,163,184,.2) !important;
}

.leaflet-tile{
    filter:brightness(.52) contrast(1.22) saturate(.65) hue-rotate(165deg);
}

.map-tools{
    position:absolute;
    top:24px;
    left:24px;
    display:flex;
    gap:14px;
    z-index:500;
}

.search-map{
    width:340px;
    height:58px;
    padding:0 18px;
    display:flex;
    align-items:center;
    gap:12px;
    border-radius:14px;
    background:rgba(3,10,21,.86);
    border:1px solid rgba(148,163,184,.25);
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(10px);
}

.search-map input{
    width:100%;
    border:none;
    outline:none;
    background:transparent;
    color:#fff;
    font-size:16px;
}

.search-map input::placeholder{
    color:#cbd5e1;
}

.btn-map{
    height:58px;
    padding:0 20px;
    border-radius:14px;
    border:1px solid rgba(148,163,184,.25);
    background:rgba(3,10,21,.86);
    color:#fff;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
    box-shadow:var(--shadow-soft);
}

.map-view-toggle{
    position:absolute;
    top:24px;
    right:84px;
    z-index:500;
    display:flex;
    background:rgba(3,10,21,.86);
    border:1px solid rgba(148,163,184,.22);
    border-radius:14px;
    overflow:hidden;
    box-shadow:var(--shadow-soft);
}

.map-view-toggle button{
    height:58px;
    padding:0 24px;
    border:none;
    background:transparent;
    color:#cbd5e1;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
}

.map-view-toggle button.active{
    background:#07111f;
    color:var(--yellow);
}

.fullscreen-map{
    position:absolute;
    top:24px;
    right:24px;
    width:58px;
    height:58px;
    border-radius:14px;
    z-index:500;
    background:rgba(3,10,21,.86);
    border:1px solid rgba(148,163,184,.22);
    color:#fff;
    font-size:24px;
    cursor:pointer;
    box-shadow:var(--shadow-soft);
}

.map-status{
    position:absolute;
    left:24px;
    bottom:70px;
    width:250px;
    padding:20px;
    z-index:500;
    background:rgba(3,10,21,.88);
    border:1px solid rgba(148,163,184,.22);
    border-radius:18px;
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(10px);
}

.map-status div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:14px 0;
    color:#fff;
    font-size:15px;
    font-weight:700;
}

.dot{
    width:16px;
    height:16px;
    border-radius:50%;
    display:inline-block;
    margin-right:10px;
    box-shadow:0 0 12px currentColor;
}

.dot.green{ background:#22c55e; color:#22c55e; }
.dot.blue{ background:#0ea5ff; color:#0ea5ff; }
.dot.yellow{ background:#facc15; color:#facc15; }
.dot.red{ background:#ef4444; color:#ef4444; }

.drivers-panel{
    position:absolute;
    top:118px;
    right:24px;
    width:335px;
    max-height:calc(100% - 160px);
    overflow:auto;
    z-index:500;
    padding:22px;
    background:rgba(3,10,21,.88);
    border:1px solid rgba(148,163,184,.23);
    border-radius:18px;
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(10px);
}

.drivers-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}

.drivers-title strong{
    font-size:18px;
    font-weight:950;
}

.drivers-title a{
    color:var(--yellow);
    font-size:13px;
    font-weight:900;
}

.driver-row{
    display:grid;
    grid-template-columns:52px 1fr auto;
    gap:12px;
    align-items:center;
    padding:13px 0;
    border-bottom:1px solid rgba(148,163,184,.12);
}

.driver-row:last-child{
    border-bottom:none;
}

.avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#334155;
    font-size:25px;
}

.driver-row strong{
    display:block;
    font-size:15px;
    font-weight:900;
}

.driver-row span{
    display:block;
    color:#cbd5e1;
    font-size:13px;
    margin-top:2px;
}

.driver-row small{
    display:block;
    font-size:12px;
    margin-top:5px;
    font-weight:900;
}

.driver-row b{
    color:#cbd5e1;
    font-size:14px;
}

.online{ color:#22c55e; }
.free{ color:#0ea5ff; }

.map-bottom-menu{
    position:absolute;
    left:50%;
    bottom:22px;
    transform:translateX(-50%);
    z-index:500;
    min-width:600px;
    display:flex;
    justify-content:center;
    gap:4px;
    padding:10px;
    background:rgba(3,10,21,.90);
    border:1px solid rgba(148,163,184,.23);
    border-radius:18px;
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(10px);
}

.map-bottom-menu button{
    width:92px;
    min-height:68px;
    border:none;
    border-radius:14px;
    background:transparent;
    color:#fff;
    cursor:pointer;
    font-size:24px;
    transition:.2s ease;
}

.map-bottom-menu button span{
    display:block;
    margin-top:6px;
    font-size:12px;
    font-weight:800;
}

.map-bottom-menu button:hover,
.map-bottom-menu button.active{
    background:rgba(14,165,255,.12);
    color:#0ea5ff;
}

.car-marker{
    width:42px;
    height:42px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--yellow), var(--yellow-2));
    border:3px solid #111827;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    box-shadow:
        0 12px 28px rgba(0,0,0,.45),
        0 0 0 5px rgba(250,204,21,.18);
}

.car-marker.green{ background:linear-gradient(135deg, #22c55e, #15803d); }
.car-marker.blue{ background:linear-gradient(135deg, #0ea5ff, #1d4ed8); }
.car-marker.red{ background:linear-gradient(135deg, #ef4444, #b91c1c); }

/* ==============================
   FOOTER
============================== */

.footer{
    min-height:68px;
    padding:0 24px;
    border-radius:16px;
    background:linear-gradient(135deg, rgba(7,17,31,.86), rgba(15,31,53,.86));
    border:1px solid rgba(148,163,184,.16);
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#cbd5e1;
    box-shadow:var(--shadow-soft);
    font-size:15px;
}

/* ==============================
   MODULES, TABLES, FORMS
============================== */

.page-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:22px;
}

.page-title h1{
    font-size:32px;
    font-weight:950;
}

.panel{
    background:rgba(15,31,53,.86);
    border:1px solid rgba(148,163,184,.18);
    border-radius:20px;
    box-shadow:var(--shadow);
    overflow:hidden;
}

.panel-header{
    min-height:68px;
    padding:18px 22px;
    border-bottom:1px solid rgba(148,163,184,.15);
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight:950;
    font-size:18px;
}

.panel-body{
    padding:22px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:10px 18px;
    border-radius:12px;
    border:none;
    cursor:pointer;
    font-weight:950;
    transition:.2s ease;
}

.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:linear-gradient(135deg, #0ea5ff, #1d4ed8); color:#fff; }
.btn-warning{ background:linear-gradient(135deg, var(--yellow), var(--yellow-2)); color:#111827; }
.btn-success{ background:linear-gradient(135deg, #22c55e, #15803d); color:#fff; }
.btn-danger{ background:linear-gradient(135deg, #ef4444, #b91c1c); color:#fff; }
.btn-dark{ background:#0b1728; color:#fff; border:1px solid rgba(148,163,184,.20); }
.btn-sm{ min-height:34px; padding:7px 11px; font-size:12px; border-radius:10px; }

.form-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
}

.form-group{
    margin-bottom:16px;
}

label{
    display:block;
    color:#cbd5e1;
    font-weight:900;
    margin-bottom:8px;
}

.form-control,
input,
select,
textarea{
    width:100%;
    min-height:48px;
    padding:12px 14px;
    border-radius:13px;
    border:1px solid rgba(148,163,184,.24);
    background:#061120;
    color:#fff;
    outline:none;
    font-size:15px;
    transition:.18s ease;
}

textarea{
    min-height:110px;
    resize:vertical;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus{
    border-color:var(--yellow);
    box-shadow:0 0 0 4px rgba(250,204,21,.12);
}

.table-wrap{
    width:100%;
    overflow:auto;
    border-radius:18px;
    border:1px solid rgba(148,163,184,.16);
}

.table{
    width:100%;
    min-width:880px;
    border-collapse:collapse;
    background:rgba(15,31,53,.80);
}

.table thead{
    background:#061120;
}

.table th{
    padding:16px;
    text-align:left;
    color:#cbd5e1;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.7px;
}

.table td{
    padding:15px 16px;
    border-top:1px solid rgba(148,163,184,.13);
    font-size:14px;
}

.table tbody tr:hover{
    background:rgba(250,204,21,.055);
}

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:950;
}

.badge-success{
    background:rgba(34,197,94,.18);
    color:#86efac;
    border:1px solid rgba(34,197,94,.25);
}

.badge-danger{
    background:rgba(239,68,68,.18);
    color:#fca5a5;
    border:1px solid rgba(239,68,68,.25);
}

.badge-warning{
    background:rgba(250,204,21,.18);
    color:#fde68a;
    border:1px solid rgba(250,204,21,.25);
}

.badge-info{
    background:rgba(14,165,255,.18);
    color:#93c5fd;
    border:1px solid rgba(14,165,255,.25);
}

.text-muted{ color:var(--muted); }
.actions{ display:flex; flex-wrap:wrap; gap:8px; }
.mt-1{ margin-top:8px; }
.mt-2{ margin-top:14px; }
.mt-3{ margin-top:22px; }
.mb-1{ margin-bottom:8px; }
.mb-2{ margin-bottom:14px; }
.mb-3{ margin-bottom:22px; }
.hidden{ display:none !important; }

/* ==============================
   RESPONSIVE
============================== */

@media(max-width:1280px){
    :root{ --sidebar-width:250px; }

    .brand-logo{
        width:108px;
        height:108px;
    }

    .stats-bar{
        grid-template-columns:repeat(2, 1fr);
    }

    .stat-date{
        grid-column:1 / -1;
        flex-direction:row;
        justify-content:space-between;
    }

    .dashboard-map-panel{
        height:calc(100vh - 385px);
    }

    .drivers-panel{
        width:300px;
    }
}

@media(max-width:980px){
    .app{
        flex-direction:column;
    }

    .sidebar{
        position:relative;
        width:100%;
        height:auto;
    }

    .main-content{
        margin-left:0;
        width:100%;
        padding:18px;
    }

    .menu{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
    }

    .sidebar-user{
        margin-top:10px;
    }

    .stats-bar{
        grid-template-columns:1fr;
    }

    .stat-item::after{
        display:none;
    }

    .stat-date{
        flex-direction:column;
        align-items:flex-start;
    }

    .dashboard-map-panel{
        height:760px;
    }

    .drivers-panel{
        top:auto;
        bottom:160px;
        right:18px;
        width:300px;
        max-height:300px;
    }

    .map-bottom-menu{
        min-width:calc(100% - 40px);
        overflow:auto;
        justify-content:flex-start;
    }

    .form-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:640px){
    .brand-logo{
        width:92px;
        height:92px;
    }

    .menu{
        grid-template-columns:1fr;
    }

    .stats-bar{
        border-radius:16px;
    }

    .stat-item,
    .stat-date{
        padding:18px;
    }

    .stat-icon{
        width:64px;
        height:64px;
        min-width:64px;
        font-size:32px;
    }

    .stat-item h2{
        font-size:32px;
    }

    .map-tools{
        left:14px;
        right:14px;
        flex-direction:column;
    }

    .search-map{
        width:100%;
    }

    .map-view-toggle,
    .fullscreen-map{
        display:none;
    }

    .drivers-panel{
        left:14px;
        right:14px;
        width:auto;
    }

    .map-status{
        width:auto;
        left:14px;
        right:14px;
        bottom:156px;
    }

    .footer{
        flex-direction:column;
        align-items:flex-start;
        padding:18px;
    }
}