/* =============================
   RESET / BASE
   ============================= */
* { box-sizing: border-box; }

body {
    margin:0;
    padding:0;
    font-family:"Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background:#eef1f5;
    color:#2b2b2b;
    overflow-x:hidden;
}

/* =============================
   BOTONES MODERNOS (GLOBAL)
   ============================= */
.btn-ui {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 18px;
    border-radius:12px;
    font-size:14px;
    font-weight:600;
    border:none;
    cursor:pointer;
    text-decoration:none;
    transition:all .25s ease;
    box-shadow:0 6px 14px rgba(0,0,0,0.12);
    white-space:nowrap;
}

.btn-ui:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,0.18);
    opacity:.95;
}

/* Variantes */
.btn-volver {
    background:#6c757d;
    color:#fff;
}

.btn-pdf {
    background:#0d6efd;
    color:#fff;
}

.btn-excel {
    background:#198754;
    color:#fff;
}

.btn-detalle {
    padding:7px 14px;
    background:#0275d8;
    color:#fff;
    border-radius:8px;
    font-size:13px;
}

.btn-detalle:hover {
    background:#0256a3;
}

/* =============================
   ACCIONES SUPERIORES
   ============================= */
.acciones-top {
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    margin:20px 0 25px 0;
}

/* =============================
   INPUTS / FORMULARIOS
   ============================= */
.input-group input,
form input,
form select {
    width:100%;
    max-width:260px;
    padding:10px 14px;
    border:1px solid #dcdfe6;
    border-radius:10px;
    font-size:15px;
    background:#fff;
    height:44px;
    margin:6px auto;
    display:block;
}

form button {
    width:100%;
    max-width:260px;
    background:#0275d8;
    color:white;
    padding:12px;
    border:none;
    border-radius:10px;
    font-size:16px;
    cursor:pointer;
    margin:10px auto 0 auto;
    height:46px;
    transition:0.25s;
}

form button:hover {
    background:#0256a3;
}

/* =============================
   HAMBURGUESA
   ============================= */
.hamburger {
    display:none;
    font-size:30px;
    position:fixed;
    top:18px;
    left:18px;
    cursor:pointer;
    z-index:3001;
    color:#0275d8;
}

/* =============================
   SIDEBAR
   ============================= */
.sidebar {
    position:fixed;
    top:0;
    left:0;
    width:260px;
    height:100%;
    background:linear-gradient(180deg,#0275d8,#025bb0);
    color:white;
    padding-top:25px;
    z-index:3000;
    transform:translateX(0);
    transition:transform .3s ease;
}

.sidebar img {
    width:120px;
    display:block;
    margin:0 auto 12px auto;
}

.sidebar h2 {
    text-align:center;
    margin:10px 0 25px 0;
    font-size:20px;
    font-weight:600;
}

.sidebar a {
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 20px;
    color:white;
    text-decoration:none;
    font-size:15px;
    transition:.2s;
}

.sidebar a:hover {
    background:rgba(255,255,255,0.15);
}

.sidebar .logout {
    background:#d9534f;
}

.sidebar .logout:hover {
    background:#b94643;
}

/* =============================
   OVERLAY MOBILE
   ============================= */
.overlay {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.45);
    z-index:2500;
}

/* =============================
   CONTENIDO
   ============================= */
.content {
    margin-left:260px;
    padding:30px;
    transition:margin-left .3s ease;
}

.box {
    background:white;
    padding:30px;
    border-radius:16px;
    box-shadow:0 8px 26px rgba(0,0,0,0.1);
}

.box h2 {
    font-size:26px;
    margin-bottom:12px;
}

/* =============================
   RESPONSIVE
   ============================= */
@media (max-width: 950px) {

    .sidebar {
        transform:translateX(-260px);
    }

    .sidebar.show {
        transform:translateX(0);
    }

    .hamburger {
        display:block;
    }

    .overlay.show {
        display:block;
    }

    .content {
        margin-left:0;
        padding:20px 16px;
        padding-top:70px;
    }

    .acciones-top {
        flex-direction:column;
        align-items:stretch;
    }

    .btn-ui {
        width:100%;
        font-size:15px;
    }
}
.kpi-container{
  max-width:1200px;
  margin:auto;
}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin-top:25px;
}

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

.card h4{
  font-size:14px;
  color:#555;
  margin-bottom:8px;
}

.card p{
  font-size:26px;
  font-weight:700;
  margin:0;
}

.card small{
  display:block;
  margin-top:6px;
  color:#777;
}
/* ================================
   KPI GERENCIAL - GRID HORIZONTAL
================================ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 25px;
}

.kpi-grid .card {
    margin: 0;
}

/* Responsive: en tablets / móvil baja a 1 columna */
@media (max-width: 900px) {
    .kpi-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}
/* ================================
   BOTONES KPI – CENTRADOS Y RESPONSIVE
================================ */
.kpi-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0 30px 0;
}

.kpi-actions .btn {
    min-width: 110px;
    text-align: center;
}

/* En móviles: botones más grandes */
@media (max-width: 768px) {
    .kpi-actions .btn {
        width: 100%;
        max-width: 260px;
    }
}
/* ================================
   BOTÓN CONSULTAR CENTRADO
================================ */
.form-kpi-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.form-kpi-center button {
    min-width: 220px;
}

@media (max-width: 768px) {
    .form-kpi-center button {
        width: 100%;
        max-width: 260px;
    }
}
.dashboard-hero{
    margin-top:30px;
    text-align:center;
    padding:30px;
    background:linear-gradient(180deg,#ffffff,#f1f4ff);
    border-radius:16px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.dashboard-hero img{
    max-width:420px;
    width:100%;
    margin-bottom:20px;
}

.dashboard-hero h3{
    margin:10px 0 5px;
    font-size:18px;
    color:#1f2fa5;
    font-weight:600;
}

.dashboard-hero p{
    font-size:14px;
    color:#666;
    max-width:600px;
    margin:0 auto;
}