*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}

body{
    background:#eef3f9;
    color:#333;
}

/* ===========================
   CABECERA
=========================== */

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:70px;
    background:#003b70;
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 25px;
    z-index:1000;
    box-shadow:0 2px 8px rgba(0,0,0,.20);
}

.header h2{
    font-size:24px;
    font-weight:bold;
}

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

.sidebar{
    position:fixed;
    top:70px;
    left:0;
    width:230px;
    height:calc(100vh - 70px);
    background:#0d2d57;
    overflow:auto;
}

.sidebar a{
    display:block;
    padding:15px 20px;
    color:#fff;
    text-decoration:none;
    transition:.3s;
    font-size:15px;
}

.sidebar a i{
    width:25px;
}

.sidebar a:hover{
    background:#1d5da5;
}

/* ===========================
   CONTENIDO
=========================== */

.main{
    margin-left:230px;
    margin-top:70px;
    padding:20px;
}

/* ===========================
   KPI
=========================== */

.kpi{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:25px;
}

.card{
    background:#fff;
    border-radius:12px;
    padding:20px;
    text-align:center;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
}

.card h1{
    margin-top:10px;
    color:#003b70;
    font-size:38px;
}

.card p{
    font-size:16px;
    color:#555;
}

/* ===========================
   FILTROS
=========================== */

.filtros{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:25px;
}

.filtros select{
    width:100%;
    padding:12px;
    border-radius:8px;
    border:1px solid #ccc;
    background:#fff;
}

/* ===========================
   TABS
=========================== */

.tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
}

.tab{
    background:#003b70;
    color:#fff;
    padding:10px 18px;
    border-radius:8px;
    cursor:pointer;
    transition:.3s;
}

.tab:hover{
    background:#0057a5;
}

/* ===========================
   PANEL
=========================== */

.panel{
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
}

/* ===========================
   GRAFICOS
=========================== */

/*==========================
GRAFICOS
==========================*/

.graficos{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(480px,1fr));

    gap:25px;

    margin-top:20px;

    align-items:start;

}

.box{

    background:#fff;

    border-radius:15px;

    padding:20px;

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

    border-top:5px solid #1565C0;

    transition:.30s;

    min-height:420px;

}

.box:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}

.box canvas{

    width:100%!important;

    height:360px!important;

}

/* ===========================
   TABLAS
=========================== */

table{
    width:100%;
    border-collapse:collapse;
}

table th{
    background:#003b70;
    color:white;
    padding:10px;
}

table td{
    padding:10px;
    border-bottom:1px solid #ddd;
}

/* ===========================
   BOTONES
=========================== */

button{
    background:#003b70;
    color:white;
    border:none;
    padding:10px 18px;
    border-radius:8px;
    cursor:pointer;
}

button:hover{
    background:#0057a5;
}

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

@media(max-width:1200px){

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

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

}

@media(max-width:768px){

.header{
padding:15px;
}

.header h2{
font-size:18px;
}

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

.main{
margin-left:0;
margin-top:140px;
}

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

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

.tabs{
flex-direction:column;
}

.graficos{
grid-template-columns:1fr;
}
.card i{
    color:#1565C0;
    margin-bottom:10px;
}

.card{
    transition:0.3s;
}

.card:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 20px rgba(0,0,0,.20);
}
}
/*==========================
SECCIONES DEL DASHBOARD
==========================*/

.graficos h3{

    background:#1565C0;

    color:#fff;

    padding:12px 18px;

    border-radius:8px;

    margin-top:30px;

    margin-bottom:20px;

    font-size:20px;

    box-shadow:0 2px 6px rgba(0,0,0,.15);

}

.graficos h3 i{

    margin-right:8px;

}

/*==========================
SECCIONES DEL DASHBOARD
==========================*/

.graficos .w-100{

    grid-column:1 / -1;

    width:100%;

}

.graficos h3{

    background:#1565C0;

    color:#fff;

    padding:12px 18px;

    border-radius:8px;

    margin:10px 0;

    font-size:22px;

    font-weight:bold;

    box-shadow:0 2px 6px rgba(0,0,0,.15);

}

.graficos h3 i{

    margin-right:10px;

}

html{

    scroll-behavior:smooth;

}
/* ==========================
   SECCIONES DEL DASHBOARD
========================== */

.modulo{
    margin-top:40px;
    scroll-margin-top:90px;
}


.modulo h3{

    background:#1565C0;

    color:white;

    padding:12px 18px;

    border-radius:8px;

    font-size:20px;

    box-shadow:0 2px 8px rgba(0,0,0,.15);

}


.modulo h3 i{

    margin-right:10px;

}


/* desplazamiento suave */

html{

    scroll-behavior:smooth;

}
/* ==========================
   BOTONES REPORTES
========================== */


.panel-reportes{

    display:flex;

    gap:20px;

    margin-top:20px;

}



.btn-reporte{

    padding:15px 25px;

    color:white;

    text-decoration:none;

    border-radius:10px;

    font-weight:bold;

    display:inline-flex;

    align-items:center;

    gap:10px;

}



.excel{

    background:#2E7D32;

}



.pdf{

    background:#C62828;

}



.btn-reporte:hover{

    opacity:.85;

    transform:translateY(-2px);

}
/* ==========================
   BOTONES DE REPORTES
========================== */

.panel-reportes{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-top:20px;
}


.btn-reporte{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:8px;

    text-decoration:none;

    font-size:15px;

    font-weight:bold;

    width:auto;

    height:auto;

}


.btn-reporte i{

    font-size:18px;

}



.btn-reporte.excel{

    background:#198754;

    color:white;

}



.btn-reporte.pdf{

    background:#dc3545;

    color:white;

}



.btn-reporte:hover{

    opacity:.85;

}
.panel-reportes .btn-reporte{

    width:auto !important;

    height:45px !important;

    padding:10px 20px !important;

    display:inline-flex !important;

    font-size:15px !important;

}


.panel-reportes{

    display:flex !important;

    gap:15px;

    align-items:center;

}
/*=========================
USUARIO HEADER
=========================*/

.header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

}

.usuario-header{

    display:flex;

    align-items:center;

    gap:20px;

}

.usuario-info{

    display:flex;

    align-items:center;

    gap:12px;

    color:white;

}

.usuario-info i{

    color:#FFD54F;

}

.usuario-info strong{

    font-size:15px;

}

.usuario-info small{

    color:#E0E0E0;

}

.btn-salir{

    background:#d32f2f;

    color:#fff;

    text-decoration:none;

    padding:10px 18px;

    border-radius:8px;

    transition:.3s;

    font-weight:600;

}

.btn-salir:hover{

    background:#b71c1c;

}
/* ===============================
   FORMULARIO USUARIOS
================================ */

.form-usuario{

    width:100%;

}


.form-usuario label{

    display:block;

    color:#333;

    font-weight:600;

    margin-bottom:8px;

}


.form-usuario input,
.form-usuario select{

    display:block;

    width:100%;

    padding:12px;

    border:1px solid #ccc;

    border-radius:8px;

    background:#fff;

    color:#333;

    font-size:15px;

}


.form-usuario .campo{

    margin-bottom:20px;

}
/* =================================
   FORMULARIO USUARIOS
================================= */

.formulario-contenedor{

    max-width:600px;

    margin:30px auto;

    background:white;

    padding:30px;

    border-radius:12px;

}


.form-usuario{

    width:100%;

}


.form-usuario .campo{

    margin-bottom:18px;

}


.form-usuario label{

    display:block;

    width:100%;

    color:#333;

    font-size:15px;

    font-weight:600;

    margin-bottom:8px;

}


.form-usuario input,
.form-usuario select{

    width:100%;

    height:42px;

    padding:8px 12px;

    border:1px solid #ccc;

    border-radius:6px;

    font-size:14px;

    box-sizing:border-box;

}


.form-usuario button{

    width:auto;

    padding:12px 25px;

    background:#0B5394;

    color:white;

    border:none;

    border-radius:8px;

    cursor:pointer;

}


.form-usuario button:hover{

    background:#083763;

}
.btn-regresar{

    display:inline-block;

    background:#0B5394;

    color:white;

    padding:10px 18px;

    border-radius:8px;

    text-decoration:none;

    margin-bottom:20px;

    font-size:14px;

}


.btn-regresar:hover{

    background:#083763;

}
/* ===========================
   MEJORAS BI UBE
=========================== */
.usuario-header,
.usuario-info,
.panel-reportes{
    display:flex;
    align-items:center;
    gap:14px;
}
.btn-salir{
    color:#fff;
    text-decoration:none;
    background:#b3261e;
    padding:9px 13px;
    border-radius:8px;
}
.sidebar-titulo{
    padding:14px 20px 7px;
    color:#9fc5ef;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.8px;
}
.modulo{
    scroll-margin-top:90px;
    margin-bottom:35px;
}
.modulo > h3{
    background:#1565C0;
    color:#fff;
    padding:12px 18px;
    border-radius:9px;
    margin:20px 0;
}
.filtros{
    grid-template-columns:repeat(4,1fr);
}
.filtros label{
    display:block;
    font-weight:600;
    margin-bottom:6px;
}
.panel-reportes{
    flex-wrap:wrap;
    margin:20px 0;
}
.btn-reporte{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:13px 18px;
    border-radius:9px;
    color:#fff;
    text-decoration:none;
    font-weight:700;
}
.btn-reporte.excel{ background:#217346; }
.btn-reporte.pdf{ background:#b3261e; }
.ubicacion-kpi{ margin-top:20px; }
.grafico-alto{ min-height:760px; }
.grafico-alto canvas{ height:700px!important; }
.grafico-centros{ min-height:2200px; }
.grafico-centros canvas{ height:2140px!important; }

@media(max-width:1000px){
    .filtros{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
    .filtros{ grid-template-columns:1fr; }
    .usuario-header{ gap:7px; }
    .usuario-info{ display:none; }
}