/* ===== Skin base (oscuro elegante opcional; si usas claro, reduce esto) ===== */
:root{
  --brand-500:#6E59A5;
  --brand-600:#5a4893;
  --text:#0f172a;           /* si prefieres modo claro */
  --muted:#64748b;
  --border:#e2e8f0;
  --bg:#f8fafc;
  --card:#ffffff;
  --radius:14px;
}
body{ background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; }

/* ===== Mini utilidades que antes te daba Tailwind ===== */
.grid{ display:grid; }
.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-2{ gap:8px; } .gap-3{ gap:12px; } .gap-4{ gap:16px; }
.mt-8{ margin-top:32px; }
.overflow-x-auto{ overflow-x:auto; }
.text-xs{ font-size:.75rem; }
.font-medium{ font-weight:600; }
.container-xl{ max-width:1200px; margin:28px auto 80px; padding:0 24px; }

/* ===== Navegación ===== */
.nav-link{
  padding: .5rem .75rem;
  border-radius: 999px;
  color: #475569;
  text-decoration: none;
  transition: .18s;
}
.nav-link:hover{ color:#0f172a; background:#f1f5f9; }
.nav-link.active{ background:#0f172a; color:#fff; }

/* ===== Buscador (input con icono a la izquierda) ===== */
.search-input{
  padding: .5rem .75rem .5rem 2.25rem; /* espacio para el icono */
  border-radius: 999px;
  border:1px solid var(--border);
  background: #fff;
  width: 16rem;
  outline: none;
}
.search-input::placeholder{ color:#94a3b8; }
.search-input:focus{ box-shadow: 0 0 0 3px rgba(110,89,165,.15); border-color: var(--brand-500); }
.icon-left{
  position:absolute; left:.5rem; top:50%; transform:translateY(-50%);
  width:1rem; height:1rem; color:#94a3b8;
}

/* ===== Botones/acciones de usuario ===== */
.btn-icon{
  padding:.5rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  transition:.18s;
}
.btn-icon:hover{ background:#f8fafc; }
.btn-user{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
}
.badge-role{
  font-size:11px; font-weight:700; padding:.1rem .4rem; border-radius:999px;
}
.badge-role.admin{ background:#d1fae5; color:#047857; }
.badge-role.vendor{ background:#e0e7ff; color:#3730a3; }

/* ===== Dropdown ===== */
.dropdown{
  position:absolute; right:0; margin-top:.5rem; width:14rem;
  border-radius:1rem; border:1px solid var(--border); background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.dropdown-item{
  display:block; padding:.5rem 1rem; font-size:.9rem; color:#0f172a; text-decoration:none;
}
.dropdown-item:hover{ background:#f8fafc; }
.dropdown-sep{ height:1px; background:var(--border); margin:.25rem 0; }

/* ===== Acciones rápidas ===== */
.quick{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem;
  border-radius:1rem;
  border:1px solid var(--border);
  background:#fff;
  transition:.18s;
  font-size:.9rem;
}
.quick:hover{ box-shadow:0 6px 14px rgba(0,0,0,.06); }

/* ===== KPIs ===== */
.kpi-card{
  border-radius: 18px;
  border:1px solid var(--border);
  background: var(--card);
  padding: 1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition:.18s;
}
.kpi-card:hover{ box-shadow:0 10px 24px rgba(0,0,0,.08); }
.kpi-title{ color: var(--muted); font-size:.9rem; font-weight:600; }
.kpi-value{ font-size:1.8rem; font-weight:800; margin-top:.25rem; }
.kpi-cta{ display:inline-block; margin-top:.35rem; font-size:.9rem; color:#5842a2; text-decoration:none; }
.kpi-cta:hover{ text-decoration:underline; }
.kpi-ghost{ font-size:.75rem; color:#94a3b8; }

/* ===== Paneles / tarjetas grandes ===== */
.panel{
  border-radius: 18px;
  border:1px solid var(--border);
  background: var(--card);
  padding:1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.panel-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.panel-link{ color:#5842a2; font-weight:600; text-decoration:none; }
.panel-link:hover{ text-decoration:underline; }

/* ===== Tablas ===== */
.tbl{ width:100%; border-collapse:collapse; font-size:.95rem; }
.tbl th,.tbl td{ padding:.6rem .75rem; border-bottom:1px solid var(--border); }
.tbl thead th{ color:#64748b; font-weight:700; text-transform:uppercase; font-size:.75rem; letter-spacing:.6px; }
.tbl tbody tr:hover{ background:#f8fafc; }

/* ===== Chips de estado ===== */
.chip{ display:inline-flex; align-items:center; padding:.25rem .5rem; border-radius:999px; font-size:.75rem; font-weight:700; }
.chip-listo{ background:#d1fae5; color:#047857; }
.chip-pendiente{ background:#fde68a; color:#92400e; }
.chip-entregado{ background:#e2e8f0; color:#1f2937; }
.chip-alert{ background:#ffe4e6; color:#9f1239; }

/* ===== Empty states ===== */
.empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2.5rem 1rem; color:#64748b; }
.empty i{ width:28px; height:28px; margin-bottom:8px; }
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:.75rem; background:#0f172a; color:#fff; text-decoration:none; }
.btn:hover{ background:#111827; }

/* ===== Grids de tu dashboard ===== */
.quickgrid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; margin:18px 0 26px; }
.kpi-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; }
@media (max-width:1200px){ .kpi-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } .quickgrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .kpi-grid{ grid-template-columns:1fr; } .quickgrid{ grid-template-columns:repeat(2,1fr); } }