:root{
  --brand:#6f3cf6;
  --brand-2:#9b5cfb;
  --brand-3:#ec4899;
  --bg:#f6f7fb;
  --card:#ffffff;
  --muted:#6b7280;
  --ring:rgba(111,60,246,.35);
}
html,body{height:100%}
body{background:var(--bg);color:#0f172a;font-synthesis-weight:none}

/* Shell */
.app-shell{max-width:1200px;margin:0 auto;padding:0 24px}

/* -------- NAVBAR -------- */
.navbar{background:#fff;border-bottom:1px solid rgba(2,6,23,.06);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:800}
.brand-badge{
  width:36px;height:36px;border-radius:50%;
  background:conic-gradient(from 180deg at 50% 50%, var(--brand), var(--brand-2), var(--brand-3));
  box-shadow:0 10px 24px rgba(111,60,246,.28)
}
.search-wrap{position:relative}
.search-wrap .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#64748b}
.input{
  width:100%;border:1px solid rgba(2,6,23,.12);border-radius:12px;padding:.62rem .9rem .62rem 2.2rem;background:#fff
}
.input:focus{outline:3px solid var(--ring);border-color:transparent}

/* right action buttons */
.icon-btn{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:#fff;border:1px solid rgba(2,6,23,.1);position:relative;
  transition:all .15s; color:#6b6f86;
}
.icon-btn:hover{box-shadow:0 8px 24px rgba(15,23,42,.08);transform:translateY(-1px);color:var(--brand)}
.icon-btn .dot{
  position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:999px;background:var(--brand-3);
  box-shadow:0 0 0 4px rgba(236,72,153,.18)
}
.badge-dot{
  position:absolute;top:-6px;right:-6px;background:var(--brand);color:#fff;border-radius:999px;
  font-size:.65rem;padding:.05rem .35rem;border:2px solid #fff
}
.avatar{width:38px;height:38px;border-radius:12px;overflow:hidden;border:1px solid rgba(2,6,23,.1)}

/* menu pills */
.menu-row{display:flex;align-items:center;gap:.35rem;overflow-x:auto;padding-bottom:.2rem}
.navpill{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem .8rem;border-radius:12px;
  color:#5b5fc6;background:transparent;border:1px solid transparent;
  font-weight:600
}
.navpill svg{width:18px;height:18px}
.navpill:hover{background:rgba(111,60,246,.08)}
.navpill.active{background:rgba(111,60,246,.12);border-color:rgba(111,60,246,.25);color:var(--brand)}

/* ------- Cards / dashboard ------- */
.card{background:var(--card);border-radius:16px;box-shadow:0 6px 20px rgba(15,23,42,.06);border:1px solid rgba(2,6,23,.06)}
.card-gradient{
  background: radial-gradient(120% 120% at -10% -10%, rgba(111,60,246,.15), transparent 60%),
              radial-gradient(120% 120% at 110% -20%, rgba(236,72,153,.12), transparent 50%),
              var(--card);
}
.kpi .label{font-size:.82rem;color:var(--muted)}
.kpi .value{font-size:1.85rem;font-weight:800}
.badge{font-size:.75rem;padding:.2rem .5rem;border-radius:999px;background:rgba(111,60,246,.12);color:var(--brand)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1rem;border-radius:12px;border:1px solid rgba(2,6,23,.08);background:#fff;transition:.15s}
.btn:hover{box-shadow:0 8px 24px rgba(15,23,42,.08);transform:translateY(-1px)}
.btn-primary{background:var(--brand);color:#fff;border-color:transparent}
.chart-box{height:240px}

/* Overlay de descarga */
.dl-overlay{position:fixed;inset:0;background:rgba(8,11,20,.58);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;z-index:9999}
.dl-overlay.hidden{display:none}
.dl-box{position:relative;width:200px;height:200px;border-radius:24px;
  background:linear-gradient(180deg,#0b0f1a,#141a2a);border:1px solid #2a3350;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.dl-logo{width:92px;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.dl-ring{position:absolute;width:150px;height:150px;border-radius:50%;
  border:4px solid rgba(255,255,255,.08);border-top-color:rgba(255,255,255,.55);
  animation:dl-spin 1.1s linear infinite}
.dl-text{color:#cbd5e1;font-weight:700;letter-spacing:.3px;font-size:14px;animation:dl-pulse 1.4s ease-in-out infinite;margin-top:6px}
@keyframes dl-spin{to{transform:rotate(360deg)}}
@keyframes dl-pulse{0%,100%{opacity:.75}50%{opacity:1}}

/* Footer */
.footer{color:var(--muted);font-size:.9rem}

/* Utility for print hide */
.no-print{display:block}
@media print{.no-print{display:none}}

/* --- Navbar Xintra (tu diseño, sin cambiar HTML) --- */
.navbar{
  position: sticky;        /* opcional: queda fijo al hacer scroll */
  top: 0; z-index: 40;
  background: #ffffffcc;   /* sutil translucidez */
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #eef2ff;
  /* 👇 asegura “aire” uniforme debajo en TODAS las páginas */
  margin-bottom: 1.25rem;  /* ~mb-5 */
}

/* logo de imagen en el brand */
.navbar .brand img{ display:block; height:2rem; width:auto; }

/* contenedor ancho consistente */
.app-shell{ max-width:1200px; margin:0 auto; padding:0 1.25rem; }

/* fila de menú con pills */
.menu-row{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; }

.navpill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; border-radius:.75rem;
  color:#4b5563; transition:.15s;
}
.navpill:hover{ background:rgba(124,58,237,.08); color:#111827; }
.navpill.active{ background:rgba(124,58,237,.16); color:#111827; }

.icon-btn{
  height:2.25rem;width:2.25rem;border-radius:.75rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #eee;
  position:relative;
}
.icon-btn:hover{ box-shadow:0 6px 16px rgba(0,0,0,.06); }

.badge-dot{
  position:absolute; top:-6px; right:-6px; font-size:.65rem;
  background:#7c3aed; color:#fff; border-radius:9999px; padding:2px 6px;
}
.dot{
  position:absolute; top:6px; right:6px; height:8px; width:8px;
  background:#ec4899; border-radius:50%;
}