/* assets/ui.css */
:root{
  --bg1: 246 247 252; /* #f6f7fc */
  --bg2: 240 242 250; /* #f0f2fa */
  --card: 255 255 255;
}
body.bg-surface{
  background: radial-gradient(1000px 600px at -10% -10%, rgba(90,110,255,.08), transparent 60%),
              radial-gradient(800px 500px at 120% -10%, rgba(110,90,255,.08), transparent 60%),
              rgb(var(--bg1));
}

/* Sidebar */
.sidebar{
  position: fixed;
  z-index: 40;
  inset: 0 auto 0 0;
  width: 260px;
  background: rgb(var(--card));
  border-right: 1px solid rgba(0,0,0,.06);
  flex-direction: column;
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.06));
}
.nav-link{
  display:flex; align-items:center; gap:.75rem;
  padding:.65rem .75rem; margin:.25rem 0;
  border-radius:.75rem;
  transition: all .15s ease;
}
.nav-link .size-5{ opacity:.9 }
.btn-outline{
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem .75rem; border:1px solid rgba(0,0,0,.08);
  border-radius:.75rem; background:#fff;
  transition:.15s; width:auto; justify-content:center;
}
.btn-outline:hover{ background:#fafafa }

/* Topbar */
.topbar{
  position: sticky; top:0; z-index:20;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem;
}
.btn-icon{
  display:grid; place-items:center; width:2.25rem; height:2.25rem;
  border:1px solid rgba(0,0,0,.08); border-radius:.75rem; background:#fff;
}
.avatar{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:12px; background:#111; color:#fff; font-weight:700;
}

/* Content wrapper */
.content{
  padding: 1rem; max-width: 1200px; margin: 0 auto; width: 100%;
}

/* Cards */
.card{
  background: rgb(var(--card));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.card-stat{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff, #fafbff);
}
.card-stat .hint{
  font-size:.8rem; color:#6b7280;
}
.card-stat .value{
  font-weight: 800; font-size: 2rem; letter-spacing: -0.02em;
}

/* Badges & buttons */
.badge{
  display:inline-block; font-size:.75rem; padding:.25rem .5rem;
  border-radius:.5rem; border:1px solid rgba(0,0,0,.08); background:#fff;
}
.badge-dot{ display:inline-flex; align-items:center; gap:.5rem; }
.badge-dot::before{ content:''; width:.5rem; height:.5rem; border-radius:999px; }
.badge-new::before{ background:#0ea5e9 }
.badge-contactado::before{ background:#f59e0b }
.badge-interesado::before{ background:#8b5cf6 }
.badge-completado::before{ background:#22c55e }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.65rem 1rem; border-radius:.75rem; color:#fff;
  background:#111; transition:.15s;
}
.btn:hover{ filter: brightness(.95) }
.btn-secondary{
  color:#111; background:#fff; border:1px solid rgba(0,0,0,.08);
}
.input, .select{
  border:1px solid rgba(0,0,0,.12); border-radius:.75rem;
  padding:.55rem .8rem; background:#fff;
}

/* Tables */
.table-wrap{ overflow:auto; }
.table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.92rem }
.table thead th{
  position:sticky; top:0; background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08); text-align:left;
  padding:.75rem .75rem; font-weight:600; color:#6b7280;
}
.table tbody td{
  border-bottom:1px solid rgba(0,0,0,.05); padding:.65rem .75rem;
}
.table tbody tr:hover{ background:#fafafa }