/* ====== Tema claro ERP (sidebar + full content) ====== */
:root{ --brand:#325eae; --ring:#325eae33; }

body.no-scroll { overflow:hidden; }

/* ===== Sidebar ===== */
.sidenav{ position:sticky; top:0; height:100vh; }
.sidenav .brand-text{ color:#0f172a; }

.sidenav .item{
  display:flex; align-items:center; gap:.65rem;
  height:2.5rem; padding:0 .9rem; border-radius:.65rem;
  color:#334155; text-decoration:none; font-size:.925rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sidenav .item .ic{ width:18px; height:18px; color:#94a3b8; }
.sidenav .item:hover{ background:#f1f5f9; color:var(--brand); }
.sidenav .item:hover .ic{ color:var(--brand); }
.sidenav .item.active{
  background:linear-gradient(90deg, rgba(50,94,174,.12), rgba(50,94,174,.06));
  color:var(--brand); font-weight:600; border:1px solid rgba(50,94,174,.20);
}
.sidenav .item.active .ic{ color:var(--brand); }

/* Colapso desktop */
.sidenav.collapsed{ width:72px; }
.sidenav.collapsed .lbl, .sidenav.collapsed .brand-text{ display:none; }
.sidenav.collapsed .item{ justify-content:center; padding:0; }
.sidenav.collapsed .item .ic{ margin:0; }
.sidenav.collapsed .item{ position:relative; }
.sidenav.collapsed .item:hover::after{
  content: attr(data-tip);
  position: absolute; left: 76px; top:50%; transform:translateY(-50%);
  background:#0f172a; color:#fff; font-size:.75rem;
  padding:.25rem .5rem; border-radius:.375rem; white-space:nowrap;
  box-shadow:0 6px 18px rgba(15,23,42,.18);
}

/* Mobile open */
#scrim{ display:none; position:fixed; inset:0; background:rgba(2,6,23,.35); z-index:40; }
#scrim.show{ display:block; }
@media(max-width: 767px){
  .sidenav{ position:fixed; left:0; top:0; height:100vh; z-index:50;
            transform:translateX(-100%); transition: transform .2s ease; }
  .sidenav.open{ transform:translateX(0); }
}

/* ===== Inputs & Buttons ===== */
.input{
  border:1px solid #e2e8f0; background:#fff; color:#0f172a;
  height:2.5rem; padding:0 .9rem; border-radius:.75rem; font-size:.9rem;
}
.input:focus{ outline:none; box-shadow:0 0 0 3px var(--ring); border-color:var(--brand); }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  height:2.25rem; padding:0 .9rem; font-size:.875rem;
  border-radius:.65rem; border:1px solid #e2e8f0; background:#fff; color:#0f172a;
  transition: background .15s ease;
}
.btn:hover{ background:#f8fafc; }
.btn.ghost{ background:#fff; }

/* ===== Cards, Tables, Chips ===== */
.card{
  background:#fff; border:1px solid #e2e8f0; border-radius:1rem;
  padding:1rem; box-shadow:0 1px 2px rgba(0,0,0,0.04);
}

.table{ width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid #e2e8f0; border-radius:.75rem; overflow:hidden; }
.table thead th{
  background:#f8fafc; font-weight:600; text-align:left; font-size:.82rem;
  color:#475569; padding:.6rem .75rem; border-bottom:1px solid #e2e8f0;
  position:sticky; top:0; z-index:1;
}
.table tbody td{ padding:.65rem .75rem; border-bottom:1px solid #f1f5f9; font-size:.92rem; }
.table tbody tr:hover{ background:#f8fafc; }

/* Chips de estado */
.chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .5rem; border-radius:9999px; font-size:.75rem; border:1px solid #e2e8f0; color:#334155; background:#fff; }
.chip.blue{   background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.chip.green{  background:#ecfdf5; color:#047857; border-color:#bbf7d0; }
.chip.amber{  background:#fffbeb; color:#b45309; border-color:#fde68a; }
.chip.red{    background:#fef2f2; color:#b91c1c; border-color:#fecaca; }

/* Empty states */
.empty{
  text-align:center; padding:2.5rem 1rem; background:#fff; border:1px dashed #e2e8f0; border-radius:1rem;
}
.empty h3{ font-weight:600; color:#0f172a; }
.empty p{ color:#64748b; }

/* Skeleton loaders */
.skeleton{ position:relative; overflow:hidden; background:#e2e8f0; border-radius:.5rem; }
.skeleton::after{
  content:""; position:absolute; inset:0;
  transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation:sk 1.2s infinite;
}
@keyframes sk { 100%{ transform:translateX(100%);} }

/* Scrollbar sutil */
*{ scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
*::-webkit-scrollbar{ height:8px; width:8px; }
*::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:20px; }
*::-webkit-scrollbar-track{ background:transparent; }

/* Pagebar (cabecera de página con acciones) */
.pagebar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1rem;
}
.pagebar .title{ font-size:1.35rem; font-weight:600; color:#0f172a; }
.pagebar .actions{ display:flex; gap:.5rem; }