:root{
  --lateral:250px;
  --tinta:#1c2434; --tinta-suave:#5b6577;
  --papel:#f5f6f8; --linea:#e4e7ec;
  --bs-primary:#1f4f7a;
}
body{background:var(--papel);color:var(--tinta);font-size:.95rem}
.app{display:flex;min-height:100vh}

/* ---------- Sidebar ---------- */
.sidebar{width:var(--lateral);flex:0 0 var(--lateral);background:#16202f;color:#c9d2df;
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:1040;transition:transform .2s}
.sidebar .marca{display:flex;gap:.65rem;align-items:center;padding:1.1rem 1rem;border-bottom:1px solid #22304a;color:#fff}
.sidebar .marca i{font-size:1.5rem;color:#7db3e0}
.sidebar .marca small{display:block;font-size:.72rem;color:#8fa0b8}
.sidebar .nav{padding:.6rem}
.sidebar .nav-link{color:#c9d2df;border-radius:.5rem;padding:.55rem .75rem;display:flex;gap:.7rem;align-items:center;font-size:.9rem}
.sidebar .nav-link:hover{background:#1e2b3f;color:#fff}
.sidebar .nav-link.activo{background:#2b6ca3;color:#fff;font-weight:600}
.sidebar .pie{margin-top:auto;padding:.8rem 1rem;font-size:.72rem;color:#66768f;border-top:1px solid #22304a}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1039}
.app-main{flex:1;margin-left:var(--lateral);min-width:0;display:flex;flex-direction:column}

/* ---------- Topbar ---------- */
.topbar{display:flex;gap:.75rem;align-items:center;background:#fff;border-bottom:1px solid var(--linea);
  padding:.6rem 1rem;position:sticky;top:0;z-index:1030}
.buscador-global{position:relative;flex:1;max-width:460px}
.buscador-global i{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:#98a2b3}
.buscador-global .form-control{padding-left:2rem;background:var(--papel);border-color:transparent}
.buscador-global .form-control:focus{background:#fff}
.sugerencias{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--linea);
  border-radius:.5rem;box-shadow:0 8px 24px rgba(16,24,40,.12);max-height:320px;overflow:auto;z-index:1050}
.sugerencias .item{padding:.55rem .8rem;cursor:pointer;font-size:.88rem;border-bottom:1px solid #f1f3f6}
.sugerencias .item:hover,.sugerencias .item.activo{background:#eef4fa}
.contenido{padding:1.25rem;flex:1}

/* ---------- Tarjetas KPI ---------- */
.tarjeta-kpi{display:flex;gap:.85rem;align-items:center;background:#fff;border:1px solid var(--linea);
  border-left-width:4px;border-radius:.7rem;padding:.9rem 1rem;text-decoration:none;color:inherit;height:100%;
  transition:box-shadow .15s,transform .15s}
.tarjeta-kpi:hover{box-shadow:0 6px 18px rgba(16,24,40,.08);transform:translateY(-1px)}
.tarjeta-kpi .icono{font-size:1.6rem;line-height:1}
.tarjeta-kpi .etiqueta{font-size:.75rem;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.03em}
.tarjeta-kpi .valor{font-size:1.4rem;font-weight:700;line-height:1.15}
.tarjeta-kpi .sub{font-size:.75rem;color:var(--tinta-suave)}

.card{border:1px solid var(--linea);border-radius:.7rem}
.card-header{background:#fff;border-bottom:1px solid var(--linea);border-radius:.7rem .7rem 0 0!important}
.table>thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;color:var(--tinta-suave);background:#fafbfc}
.btn-primary{--bs-btn-bg:#1f4f7a;--bs-btn-border-color:#1f4f7a;--bs-btn-hover-bg:#1a4266;--bs-btn-hover-border-color:#1a4266}
code{color:#1f4f7a;font-weight:600}

/* ---------- Login ---------- */
.pantalla-login{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#16202f,#2b4a6b);padding:1rem}
.caja-login{width:100%;max-width:390px;background:#fff;border-radius:.9rem;padding:2rem;box-shadow:0 18px 48px rgba(0,0,0,.25)}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.abierto{transform:none}
  .sidebar-overlay.visible{display:block}
  .app-main{margin-left:0}
  .contenido{padding:1rem .75rem}
}
@media print{.sidebar,.topbar,.btn,.pagination{display:none!important}.app-main{margin:0}}