:root{
  --azul:#0d6efd; --azul-osc:#0a58ca; --cian:#0dcaf0;
  --sidebar:#0f2b46; --sidebar-hover:#1b3e63; --texto-side:#c7d5e4;
  --bg:#eef2f6; --card:#fff; --borde:#e3e8ef;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:#1c2733}
.app{display:flex;min-height:100vh}

/* SIDEBAR */
.sidebar{width:250px;background:linear-gradient(180deg,#0f2b46,#123a5e);color:var(--texto-side);
  display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:1030;transition:.25s}
.sidebar-brand{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-brand .bi{font-size:1.8rem;color:var(--cian)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-title{font-weight:700;color:#fff;font-size:.95rem}
.brand-sub{font-size:.72rem;opacity:.7}
.sidebar-nav{flex:1;padding:.6rem .5rem;overflow-y:auto}
.sidebar .nav-link{display:flex;align-items:center;gap:.7rem;color:var(--texto-side);
  padding:.65rem .85rem;border-radius:.55rem;margin-bottom:.15rem;font-size:.92rem;text-decoration:none;transition:.15s}
.sidebar .nav-link .bi{font-size:1.1rem}
.sidebar .nav-link:hover{background:var(--sidebar-hover);color:#fff}
.sidebar .nav-link.active{background:var(--azul);color:#fff;box-shadow:0 2px 8px rgba(13,110,253,.4)}
.sidebar-foot{padding:.6rem .5rem;border-top:1px solid rgba(255,255,255,.08)}

/* MAIN */
.main{flex:1;margin-left:250px;display:flex;flex-direction:column;min-width:0}
.topbar{height:62px;background:var(--card);display:flex;align-items:center;gap:1rem;
  padding:0 1.2rem;border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:1020}
.btn-toggle{border:0;background:transparent;font-size:1.5rem;color:#475569;cursor:pointer;display:none}
.page-title{font-size:1.15rem;font-weight:600;margin:0;flex:1}
.user-btn{border:1px solid var(--borde);background:#fff;border-radius:2rem;padding:.3rem .8rem;
  display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9rem}
.user-btn .bi{font-size:1.3rem;color:var(--azul)}
.content{padding:1.4rem;flex:1}

/* TARJETAS DE MÉTRICAS */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-bottom:1.4rem}
.stat{background:var(--card);border:1px solid var(--borde);border-radius:.85rem;padding:1.1rem 1.2rem;
  display:flex;align-items:center;gap:1rem;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.stat .ico{width:52px;height:52px;border-radius:.75rem;display:grid;place-items:center;font-size:1.5rem;color:#fff;flex-shrink:0}
.stat .ico.blue{background:#0d6efd}.stat .ico.green{background:#198754}
.stat .ico.red{background:#dc3545}.stat .ico.cyan{background:#0dcaf0}
.stat .ico.orange{background:#fd7e14}.stat .ico.purple{background:#6f42c1}
.stat .val{font-size:1.5rem;font-weight:700;line-height:1}
.stat .lbl{font-size:.82rem;color:#64748b;margin-top:.2rem}

/* TARJETA GENÉRICA */
.card{border:1px solid var(--borde);border-radius:.85rem;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.card-header{background:#fff;border-bottom:1px solid var(--borde);font-weight:600}
.table thead th{background:#f1f5f9;font-size:.82rem;text-transform:uppercase;letter-spacing:.02em;color:#475569}
.table td{vertical-align:middle;font-size:.9rem}
.badge-estado{font-size:.72rem}

/* LOGIN */
.login-wrap{min-height:100vh;display:grid;place-items:center;
  background:linear-gradient(135deg,#0f2b46,#0d6efd)}
.login-card{background:#fff;border-radius:1rem;padding:2.2rem;width:100%;max-width:390px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.login-logo{width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,#0d6efd,#0dcaf0);
  display:grid;place-items:center;margin:0 auto 1rem;color:#fff;font-size:2rem}

@media(max-width:992px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .btn-toggle{display:block}
}