/* ═══════════════════════════════════════════════════════
   DistLaPoderosaTokio — Premium CSS v5
   Dark SaaS · Glass Morphism · Fluid Animations
═══════════════════════════════════════════════════════ */

/* ─── Google Fonts loaded in header ─── */
/* Fonts loaded dynamically in header.php based on appearance settings */

/* ─── VARIABLES ─────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-void:   #060810;
  --bg-deep:   #0b0d1a;
  --bg-card:   #10132a;
  --bg-card2:  #141830;
  --bg-hover:  #191d38;
  --bg-input:  rgba(255,255,255,.04);
  --bg-glass:  rgba(16,19,42,.75);

  /* Borders */
  --border:    rgba(255,255,255,.07);
  --border-hi: rgba(99,102,241,.35);
  --border-card: rgba(255,255,255,.05);

  /* Brand colors */
  --blue:    #6366f1;
  --blue-l:  #818cf8;
  --blue-d:  #4f46e5;
  --blue-bg: rgba(99,102,241,.15);
  --blue-glow: rgba(99,102,241,.25);

  --violet:    #8b5cf6;
  --violet-bg: rgba(139,92,246,.15);

  --cyan:    #22d3ee;
  --cyan-bg: rgba(34,211,238,.12);

  --green:    #10b981;
  --green-l:  #34d399;
  --green-bg: rgba(16,185,129,.13);
  --green-glow: rgba(16,185,129,.3);

  --amber:    #f59e0b;
  --amber-bg: rgba(245,158,11,.13);

  --rose:    #f43f5e;
  --rose-bg: rgba(244,63,94,.13);

  /* ── Dynamic appearance (overridden by PHP/JS) ── */
  --app-primary:       var(--blue);
  --app-primary-l:     var(--blue-l);
  --app-primary-d:     var(--blue-d);
  --app-primary-bg:    var(--blue-bg);
  --app-primary-glow:  var(--blue-glow);
  --app-radius-scale:  1;

  /* Text */
  --t1: #eef2ff;
  --t2: #94a3b8;
  --t3: #475569;
  --t4: #2d3f5a;

  /* Layout */
  --sidebar-w: 265px;
  --topbar-h:  68px;
  --radius:    18px;
  --radius-sm: 11px;
  --radius-xs: 7px;

  /* Effects */
  --shadow-card: 0 4px 32px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-glow: 0 0 40px rgba(99,102,241,.12);
  --shadow-btn:  0 4px 20px rgba(99,102,241,.3);
  --shadow-drop: 0 16px 48px rgba(0,0,0,.4);

  /* Transitions */
  --tr: .28s cubic-bezier(.4,0,.2,1);
  --tr-fast: .16s cubic-bezier(.4,0,.2,1);
  --tr-bounce: .4s cubic-bezier(.34,1.56,.64,1);

  /* Typography */
  --font-head: var(--app-font-head, 'Space Grotesk', sans-serif);
  --font-body: var(--app-font-body, 'Plus Jakarta Sans', sans-serif);
}

/* ─── RESET & BASE ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg-void);
  color: var(--t1);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(99,102,241,.35); color: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: var(--font-body); }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,.5); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ─── ANIMATIONS ───────────────────────────────── */
@keyframes fadeUp     { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn     { from{opacity:0} to{opacity:1} }
@keyframes slideLeft  { from{opacity:0;transform:translateX(-28px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideRight { from{opacity:0;transform:translateX(28px)}  to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn    { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
@keyframes float      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes blob       { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%} 50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%} }
@keyframes pulseRing  { 0%{box-shadow:0 0 0 0 rgba(99,102,241,.5)} 70%{box-shadow:0 0 0 12px rgba(99,102,241,0)} 100%{box-shadow:0 0 0 0 rgba(99,102,241,0)} }
@keyframes spin       { to{transform:rotate(360deg)} }
@keyframes shimmer    { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes countUp    { from{opacity:0;transform:scale(.8) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes bgShift    { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes barGrow    { from{width:0} to{width:var(--w,100%)} }
@keyframes dotPulse   { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.7} }
@keyframes notifBounce { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-12deg)} 75%{transform:rotate(12deg)} }

/* Stagger delays */
.stagger>*:nth-child(1){animation-delay:.04s}
.stagger>*:nth-child(2){animation-delay:.09s}
.stagger>*:nth-child(3){animation-delay:.14s}
.stagger>*:nth-child(4){animation-delay:.19s}
.stagger>*:nth-child(5){animation-delay:.24s}
.stagger>*:nth-child(6){animation-delay:.29s}
.stagger>*:nth-child(7){animation-delay:.34s}
.stagger>*:nth-child(8){animation-delay:.39s}

/* ─── LOGIN PAGE ───────────────────────────────── */
.login-scene {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}
.login-left {
  background: radial-gradient(ellipse at 30% 40%, rgba(99,102,241,.25) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 80%, rgba(139,92,246,.2) 0%, transparent 50%),
              var(--bg-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  position: relative;
  overflow: hidden;
}
.login-brand-big {
  text-align: center;
  position: relative;
  z-index: 2;
}
.login-brand-icon {
  width: 90px; height: 90px;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  border-radius: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
  margin: 0 auto 28px;
  box-shadow: 0 16px 48px rgba(99,102,241,.45);
  animation: float 4s ease-in-out infinite;
}
.login-brand-big h1 {
  font-family: var(--font-head);
  font-size: 48px;
  font-weight: 800;
  background: linear-gradient(135deg, #fff 30%, var(--blue-l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}
.login-brand-big p {
  color: var(--t2);
  font-size: 16px;
  margin-top: 12px;
  letter-spacing: .5px;
}
.login-features {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 50px;
  width: 100%;
  max-width: 380px;
}
.lf-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  animation: slideLeft .5s ease both;
}
.lf-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.lf-item strong { display: block; font-size: 13px; font-weight: 600; }
.lf-item span   { font-size: 11px; color: var(--t2); }
.login-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.login-blobs i {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .12;
  animation: blob 10s ease-in-out infinite;
}
.login-blobs i:nth-child(1){width:350px;height:350px;background:var(--blue);top:-100px;right:-80px}
.login-blobs i:nth-child(2){width:300px;height:300px;background:var(--violet);bottom:-80px;left:-60px;animation-delay:-5s}
.login-right {
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}
.login-form-wrap {
  width: 100%;
  max-width: 400px;
  animation: slideRight .5s ease;
}
.login-form-wrap h2 {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 6px;
}
.login-form-wrap p { color: var(--t2); font-size: 14px; margin-bottom: 36px; }
@media (max-width: 768px) {
  .login-scene { grid-template-columns: 1fr; }
  .login-left { display: none; }
  .login-right { background: radial-gradient(ellipse at 50% 20%,rgba(99,102,241,.1),transparent 60%), var(--bg-void); padding: 30px 20px; }
}

/* ─── FORM CONTROLS ─────────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--t2);
  letter-spacing: .7px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.form-control {
  width: 100%;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--t1);
  font-size: 14px;
  transition: var(--tr);
  outline: none;
  appearance: none;
}
.form-control:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(99,102,241,.15);
  background: rgba(99,102,241,.05);
}
.form-control::placeholder { color: var(--t3); }
.form-control option { background: var(--bg-card2); }
.input-group { position: relative; }
.input-group .form-control { padding-left: 44px; }
.input-group .ig-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--t3);
  font-size: 14px;
  pointer-events: none;
}
.input-group .ig-action {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--t3);
  font-size: 13px;
  cursor: pointer;
  transition: var(--tr);
}
.input-group .ig-action:hover { color: var(--blue-l); }

/* Error */
.form-error { font-size: 12px; color: var(--rose); margin-top: 5px; display: flex; align-items: center; gap: 5px; }
.alert-box {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 20px;
  animation: fadeUp .3s ease;
}
.alert-box.danger  { background:var(--rose-bg);  border:1px solid rgba(244,63,94,.28);  color:var(--rose); }
.alert-box.warning { background:var(--amber-bg); border:1px solid rgba(245,158,11,.28); color:var(--amber); }
.alert-box.info    { background:var(--blue-bg);  border:1px solid rgba(99,102,241,.28); color:var(--blue-l); }
.alert-box.success { background:var(--green-bg); border:1px solid rgba(16,185,129,.28); color:var(--green); }

/* ─── BUTTONS ───────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--tr);
  white-space: nowrap;
  user-select: none;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--violet));
  color: #fff;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(99,102,241,.45); }

.btn-success {
  background: linear-gradient(135deg, var(--green), var(--green-l));
  color: #fff;
  box-shadow: 0 4px 18px rgba(16,185,129,.3);
}
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(16,185,129,.42); }

.btn-danger {
  background: linear-gradient(135deg, var(--rose), #fb7185);
  color: #fff;
  box-shadow: 0 4px 18px rgba(244,63,94,.25);
}
.btn-danger:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(244,63,94,.38); }

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--t2);
}
.btn-outline:hover { border-color: var(--blue-l); color: var(--blue-l); background: var(--blue-bg); }

.btn-ghost {
  background: rgba(255,255,255,.05);
  color: var(--t2);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: rgba(255,255,255,.09); color: var(--t1); }

.btn-sm { padding: 7px 14px; font-size: 12px; border-radius: var(--radius-xs); }
.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { padding: 9px; aspect-ratio: 1; border-radius: var(--radius-xs); }

/* ─── BADGES ────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge i { font-size: 9px; }
.badge.bg { background: var(--green-bg); color: var(--green); }
.badge.br { background: var(--rose-bg);  color: var(--rose); }
.badge.ba { background: var(--amber-bg); color: var(--amber); }
.badge.bb { background: var(--blue-bg);  color: var(--blue-l); }
.badge.bv { background: var(--violet-bg); color: #a78bfa; }
.badge.bc { background: var(--cyan-bg);  color: var(--cyan); }
.badge.bt { background: rgba(255,255,255,.07); color: var(--t2); }
.badge-lg { padding: 5px 14px; font-size: 12px; }

/* ─── APP LAYOUT ─────────────────────────────────── */
.app-wrapper { display: flex; min-height: 100vh; }

/* ─── SIDEBAR ─────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--bg-deep);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0;
  z-index: 300;
  transition: transform var(--tr);
  animation: slideLeft .4s ease;
}
.sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--blue) 40%, var(--violet) 60%, transparent);
  opacity: .15;
}

.sb-logo {
  padding: 20px 18px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.sb-logo-mark {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(99,102,241,.35);
}
.sb-logo-text { flex: 1; overflow: hidden; }
.sb-logo-text h2 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg, #fff, var(--blue-l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  white-space: nowrap;
}
.sb-logo-text small {
  font-size: 10px;
  color: var(--t3);
  letter-spacing: .8px;
  white-space: nowrap;
}

.sb-nav { flex: 1; overflow-y: auto; padding: 14px 10px; }
.sb-nav::-webkit-scrollbar { width: 3px; }

.sb-section {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t4);
  padding: 4px 10px 10px;
  margin-top: 16px;
}
.sb-section:first-child { margin-top: 4px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border-radius: 11px;
  cursor: pointer;
  transition: var(--tr);
  color: var(--t3);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
  position: relative;
  user-select: none;
  text-decoration: none;
}
.nav-link .nav-icon {
  width: 18px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: var(--tr);
}
.nav-link .nav-text { flex: 1; }
.nav-link .nav-badge {
  margin-left: auto;
  background: var(--rose);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 20px;
  min-width: 18px;
  text-align: center;
}
.nav-link .nav-badge.amber { background: var(--amber); }
.nav-link .nav-badge.blue  { background: var(--blue); }

.nav-link:hover {
  background: rgba(99,102,241,.08);
  color: var(--t1);
}
.nav-link:hover .nav-icon { color: var(--blue-l); }

.nav-link.active {
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(139,92,246,.1));
  color: var(--t1);
  border: 1px solid rgba(99,102,241,.2);
}
.nav-link.active .nav-icon { color: var(--blue-l); }
.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 55%;
  background: linear-gradient(to bottom, var(--blue), var(--violet));
  border-radius: 0 4px 4px 0;
}

.sb-footer {
  padding: 14px 10px;
  border-top: 1px solid var(--border);
}
.sb-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: var(--tr);
  border: 1px solid transparent;
}
.sb-user-card:hover { background: rgba(99,102,241,.08); border-color: var(--border-hi); }
.sb-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.sb-user-info { flex: 1; overflow: hidden; }
.sb-user-info strong {
  display: block;
  font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user-info span { font-size: 10px; color: var(--t3); }
.sb-more { color: var(--t3); font-size: 12px; }

/* ─── MAIN WRAPPER ─────────────────────────────── */
.main-wrapper {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ─── TOPBAR ────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: rgba(10,12,24,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 200;
}
.topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(99,102,241,.3), transparent);
}

.tb-breadcrumb { flex: 1; display: flex; align-items: center; gap: 8px; }
.tb-breadcrumb .tb-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--blue-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-l);
  font-size: 14px;
  flex-shrink: 0;
}
.tb-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}
.tb-title small { display: block; font-size: 11px; color: var(--t3); font-family: var(--font-body); font-weight: 400; }

.tb-search {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: 11px;
  padding: 8px 14px;
  gap: 8px;
  width: 230px;
  transition: var(--tr);
}
.tb-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(99,102,241,.12); background: rgba(99,102,241,.05); }
.tb-search i { color: var(--t3); font-size: 12px; }
.tb-search input { background: none; border: none; outline: none; color: var(--t1); font-size: 13px; width: 100%; }
.tb-search input::placeholder { color: var(--t3); }

.tb-actions { display: flex; align-items: center; gap: 8px; }

.tb-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--t2);
  transition: var(--tr);
  position: relative;
  font-size: 15px;
}
.tb-btn:hover { background: var(--blue-bg); color: var(--blue-l); border-color: var(--border-hi); }
.tb-btn .tb-dot {
  position: absolute;
  top: -4px; right: -4px;
  width: 16px; height: 16px;
  background: var(--rose);
  border-radius: 50%;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  border: 2px solid var(--bg-void);
}

.tb-user-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 5px;
  border-radius: 12px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: var(--tr);
}
.tb-user-btn:hover { border-color: var(--border-hi); background: var(--blue-bg); }
.tb-user-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700;
  animation: pulseRing 4s ease-in-out infinite;
}
.tb-user-info strong { display: block; font-size: 12px; font-weight: 600; }
.tb-user-info span   { display: block; font-size: 10px; color: var(--t3); }

/* ─── PAGE CONTENT ─────────────────────────────── */
.page-content {
  padding: 28px;
  flex: 1;
  animation: fadeIn .35s ease;
}
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.page-header-info h1 {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.page-header-info p { color: var(--t2); font-size: 13px; margin-top: 4px; }
.page-header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ─── CARDS ──────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-card);
  transition: var(--tr);
}
.card:hover { border-color: rgba(99,102,241,.12); }
.card-sm { padding: 16px; border-radius: var(--radius-sm); }
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.card-title {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title i { color: var(--blue-l); font-size: 14px; }
.card-subtitle { font-size: 11px; color: var(--t3); margin-top: 2px; }

/* ─── STAT CARDS ─────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 26px;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
  overflow: hidden;
  transition: var(--tr);
  animation: fadeUp .5s ease both;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.stat-card::after {
  content: '';
  position: absolute;
  right: -24px; top: -24px;
  width: 100px; height: 100px;
  border-radius: 50%;
  opacity: .06;
  transition: var(--tr);
}
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-drop); }
.stat-card:hover::after { transform: scale(1.3); opacity: .09; }

.stat-card.blue::before  { background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.stat-card.green::before { background: linear-gradient(90deg, var(--green), var(--green-l)); }
.stat-card.amber::before { background: linear-gradient(90deg, var(--amber), #fbbf24); }
.stat-card.rose::before  { background: linear-gradient(90deg, var(--rose), #fb7185); }
.stat-card.blue::after  { background: var(--blue); }
.stat-card.green::after { background: var(--green); }
.stat-card.amber::after { background: var(--amber); }
.stat-card.rose::after  { background: var(--rose); }

.stat-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  margin-bottom: 18px;
}
.stat-card.blue  .stat-icon { background: var(--blue-bg);  color: var(--blue-l); }
.stat-card.green .stat-icon { background: var(--green-bg); color: var(--green); }
.stat-card.amber .stat-icon { background: var(--amber-bg); color: var(--amber); }
.stat-card.rose  .stat-icon { background: var(--rose-bg);  color: var(--rose); }

.stat-val {
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 5px;
  animation: countUp .6s var(--tr-bounce) both;
}
.stat-label { font-size: 12px; color: var(--t2); font-weight: 500; }
.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  margin-top: 10px;
}
.stat-trend.up   { background: var(--green-bg); color: var(--green); }
.stat-trend.down { background: var(--rose-bg);  color: var(--rose); }
.stat-trend.neu  { background: var(--blue-bg);  color: var(--blue-l); }

/* ─── CHARTS GRID ─────────────────────────────────── */
.charts-row { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-bottom: 24px; }
.charts-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 24px; }
.bottom-row   { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }

.chart-wrap { position: relative; }

/* ─── DATA TABLE ─────────────────────────────────── */
.table-responsive { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table thead th:first-child { padding-left: 4px; }
.data-table tbody tr {
  transition: var(--tr-fast);
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover td { background: rgba(99,102,241,.05); }
.data-table tbody td {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--t2);
  vertical-align: middle;
}
.data-table tbody td:first-child { padding-left: 4px; }
.data-table .td-strong { color: var(--t1); font-weight: 600; }
.data-table .td-mono   { font-family: var(--font-head); font-size: 12px; letter-spacing: 1px; color: var(--blue-l); }
.data-table .td-money  { color: var(--green); font-weight: 700; font-family: var(--font-head); }
.data-table .td-muted  { color: var(--t3); }

/* ─── SEARCH/FILTER BAR ─────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.filter-input {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  gap: 8px;
  width: 240px;
  transition: var(--tr);
}
.filter-input:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.filter-input i { color: var(--t3); font-size: 12px; }
.filter-input input { background: none; border: none; outline: none; color: var(--t1); font-size: 13px; width: 100%; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--t2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--tr);
  white-space: nowrap;
}
.filter-chip:hover { border-color: var(--blue-l); color: var(--blue-l); background: var(--blue-bg); }
.filter-chip.active { border-color: var(--blue); background: var(--blue-bg); color: var(--blue-l); }
.filter-spacer { flex: 1; }
.filter-date {
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 13px;
  color: var(--t1);
  font-size: 13px;
  outline: none;
  transition: var(--tr);
  cursor: pointer;
}
.filter-date:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.filter-select {
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 13px;
  color: var(--t1);
  font-size: 12px;
  outline: none;
  transition: var(--tr);
  cursor: pointer;
  appearance: none;
  padding-right: 30px;
}
.filter-select:focus { border-color: var(--blue); }

/* ─── POS / VENTAS ────────────────────────────────── */
.pos-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 22px; align-items: start; }

.pos-search-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.pos-search-title {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--t1);
}
.pos-search-title i { color: var(--blue-l); }
.dni-row { display: flex; gap: 9px; }
.dni-input {
  flex: 1;
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: 11px;
  padding: 13px 18px;
  color: var(--t1);
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 5px;
  outline: none;
  transition: var(--tr);
  text-align: center;
}
.dni-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(99,102,241,.15);
  background: rgba(99,102,241,.05);
}
.dni-input::placeholder { letter-spacing: 2px; color: var(--t3); font-size: 15px; }

/* Client found card */
.client-found {
  background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(139,92,246,.06));
  border: 1px solid rgba(99,102,241,.25);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  animation: scaleIn .3s var(--tr-bounce);
}
.cf-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: 20px; font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(99,102,241,.35);
}
.cf-info strong { font-size: 15px; font-weight: 600; display: block; }
.cf-info span   { font-size: 11px; color: var(--t3); }
.cf-tags { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

/* Selector group */
.sel-group {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  transition: var(--tr);
}
.sel-group:hover { border-color: rgba(99,102,241,.1); }
.sel-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sel-group-title i { font-size: 13px; }
.sel-opts { display: flex; gap: 9px; flex-wrap: wrap; }
.sel-opt {
  flex: 1;
  min-width: 110px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: rgba(255,255,255,.02);
  cursor: pointer;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  user-select: none;
}
.sel-opt i    { font-size: 20px; transition: var(--tr); }
.sel-opt span { font-size: 12px; font-weight: 600; }
.sel-opt small{ font-size: 10px; color: var(--t3); }
.sel-opt:hover { transform: translateY(-2px); }

/* Color variants for sel-opt */
.sel-opt.c-blue:hover,  .sel-opt.c-blue.on  { border-color:var(--blue);  background:var(--blue-bg);  color:var(--blue-l); box-shadow:0 0 20px rgba(99,102,241,.2); }
.sel-opt.c-green:hover, .sel-opt.c-green.on { border-color:var(--green); background:var(--green-bg); color:var(--green);  box-shadow:0 0 20px rgba(16,185,129,.18); }
.sel-opt.c-rose:hover,  .sel-opt.c-rose.on  { border-color:var(--rose);  background:var(--rose-bg);  color:var(--rose);   box-shadow:0 0 20px rgba(244,63,94,.18); }
.sel-opt.c-amber:hover, .sel-opt.c-amber.on { border-color:var(--amber); background:var(--amber-bg); color:var(--amber);  box-shadow:0 0 20px rgba(245,158,11,.18); }
.sel-opt.c-violet:hover,.sel-opt.c-violet.on{ border-color:var(--violet);background:var(--violet-bg);color:#a78bfa;        box-shadow:0 0 20px rgba(139,92,246,.18); }
.sel-opt.c-cyan:hover,  .sel-opt.c-cyan.on  { border-color:var(--cyan);  background:var(--cyan-bg);  color:var(--cyan);   box-shadow:0 0 20px rgba(34,211,238,.18); }
.sel-opt.on i { transform: scale(1.15); }

/* Extra amount inputs */
.extra-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  margin-top: 10px;
  animation: fadeIn .2s ease;
}
.extra-field.rose  { background: rgba(244,63,94,.07);  border: 1px solid rgba(244,63,94,.22); }
.extra-field.blue  { background: rgba(99,102,241,.07); border: 1px solid rgba(99,102,241,.22); }
.extra-field label { font-size: 12px; font-weight: 600; white-space: nowrap; }
.extra-field.rose  label { color: var(--rose); }
.extra-field.blue  label { color: var(--blue-l); }
.extra-input {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 12px;
  color: #fff;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  outline: none;
  transition: var(--tr);
}
.extra-field.rose  .extra-input { border-color:rgba(244,63,94,.3); }
.extra-field.rose  .extra-input:focus { border-color:var(--rose); box-shadow:0 0 0 3px var(--rose-bg); }
.extra-field.blue  .extra-input { border-color:rgba(99,102,241,.3); }
.extra-field.blue  .extra-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-bg); }

/* Order Summary */
.order-summary {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 22px;
  position: sticky;
  top: calc(var(--topbar-h) + 28px);
}
.os-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.os-title i { color: var(--cyan); }
.os-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 13px;
}
.os-row:last-of-type { border-bottom: none; }
.os-row .os-key { color: var(--t2); }
.os-row .os-val { font-weight: 600; }

.price-display {
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.08));
  border: 1px solid rgba(99,102,241,.22);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  margin: 16px 0;
}
.price-lbl { font-size: 10px; color: var(--t3); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.price-amount {
  font-family: var(--font-head);
  font-size: 38px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--blue-l), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.price-amount sup { font-size: 20px; }

/* Mini sales list */
.mini-sales { margin-top: 20px; }
.ms-title { font-size: 10px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 11px; }
.ms-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
  font-size: 12px;
}
.ms-item:last-child { border-bottom: none; }
.ms-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ─── CLIENT CARDS GRID ─────────────────────────── */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.client-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 20px;
  transition: var(--tr);
  cursor: pointer;
  animation: fadeUp .4s ease both;
  position: relative;
  overflow: hidden;
}
.client-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.05));
  transition: height var(--tr);
}
.client-card:hover::before { height: 100%; }
.client-card:hover {
  transform: translateY(-5px);
  border-color: rgba(99,102,241,.28);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 20px rgba(99,102,241,.1);
}
.cc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; position: relative; z-index: 1; }
.cc-av {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(99,102,241,.3);
}
.cc-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.cc-dni  { font-size: 11px; color: var(--t3); }
.cc-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; position: relative; z-index: 1; }
.cc-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; position: relative; z-index: 1; }
.cc-stat {
  text-align: center;
  padding: 8px 6px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  transition: var(--tr);
}
.cc-stat:hover { background: rgba(255,255,255,.06); }
.cc-stat-v { font-family: var(--font-head); font-size: 16px; font-weight: 700; }
.cc-stat-l { font-size: 9px; color: var(--t3); margin-top: 2px; }
.cc-actions {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: var(--tr);
}
.client-card:hover .cc-actions { opacity: 1; }

/* ─── PROGRESS BAR ─────────────────────────────── */
.progress { height: 6px; background: rgba(255,255,255,.07); border-radius: 10px; overflow: hidden; }
.progress-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 10px; height: 100%;
  background: rgba(255,255,255,.3);
  border-radius: 10px;
  animation: shimmer 2s infinite;
}

/* ─── MODAL ──────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; animation: fadeIn .2s ease; }
.modal {
  background: var(--bg-card2);
  border: 1px solid var(--border-hi);
  border-radius: 22px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: scaleIn .3s var(--tr-bounce);
  box-shadow: var(--shadow-drop);
}
.modal-sm { max-width: 380px; }
.modal-lg { max-width: 680px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 26px 0;
  margin-bottom: 22px;
}
.modal-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
}
.modal-title i { color: var(--blue-l); }
.modal-close {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,.05);
  border: 1.5px solid var(--border);
  color: var(--t2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: var(--tr);
}
.modal-close:hover { background: var(--rose-bg); color: var(--rose); border-color: rgba(244,63,94,.3); }
.modal-body { padding: 0 26px 26px; }
.modal-footer { padding: 0 26px 26px; display: flex; gap: 10px; justify-content: flex-end; }

/* Success modal */
.modal-result {
  text-align: center;
  padding: 36px 30px;
}
.modal-result-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.modal-result-icon.ok  { background: var(--green-bg); color: var(--green); animation: pulseRing 2s ease-in-out infinite; }
.modal-result-icon.err { background: var(--rose-bg);  color: var(--rose); }
.modal-result h2 { font-family: var(--font-head); font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.modal-result p  { color: var(--t2); font-size: 14px; margin-bottom: 22px; line-height: 1.6; }
.modal-result-details {
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 22px;
  text-align: left;
}
.mrd-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.mrd-row:last-child { border-bottom: none; }
.mrd-row .k { color: var(--t3); }
.mrd-row .v { font-weight: 600; }

/* ─── FORM GRID ─────────────────────────────────── */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.col-full { grid-column: 1 / -1; }

/* ─── TOAST NOTIFICATIONS ────────────────────────── */
#toasts {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  min-width: 280px;
  max-width: 380px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-drop);
  animation: slideRight .35s var(--tr-bounce);
  pointer-events: all;
  transition: opacity .3s, transform .3s;
}
.toast.hiding { opacity: 0; transform: translateX(20px); }
.toast i { font-size: 16px; flex-shrink: 0; }
.toast.ok  { border-color: rgba(16,185,129,.3); }  .toast.ok  i { color: var(--green); }
.toast.err { border-color: rgba(244,63,94,.3); }   .toast.err i { color: var(--rose); }
.toast.inf { border-color: rgba(99,102,241,.3); }  .toast.inf i { color: var(--blue-l); }
.toast.wrn { border-color: rgba(245,158,11,.3); }  .toast.wrn i { color: var(--amber); }

/* ─── LOADING OVERLAY ─────────────────────────────── */
#loadingOverlay {
  position: fixed;
  inset: 0;
  background: rgba(6,8,16,.82);
  backdrop-filter: blur(6px);
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
}
#loadingOverlay.show { display: flex; animation: fadeIn .2s ease; }
.spinner {
  width: 48px; height: 48px;
  border: 3px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.loading-text { font-family: var(--font-head); font-size: 14px; color: var(--blue-l); letter-spacing: .5px; }

/* ─── DROPDOWN ─────────────────────────────────────── */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-card2);
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  padding: 8px;
  min-width: 200px;
  box-shadow: var(--shadow-drop);
  z-index: 500;
  display: none;
  animation: scaleIn .2s var(--tr-bounce);
}
.dropdown-menu.open { display: block; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--t2);
  cursor: pointer;
  transition: var(--tr-fast);
}
.dropdown-item:hover { background: rgba(99,102,241,.1); color: var(--t1); }
.dropdown-item i { width: 16px; text-align: center; }
.dropdown-sep { height: 1px; background: var(--border); margin: 6px 0; }

/* ─── NOTIFICATION PANEL ─────────────────────────── */
.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: var(--bg-card2);
  border: 1px solid var(--border-hi);
  border-radius: 16px;
  box-shadow: var(--shadow-drop);
  z-index: 600;
  display: none;
  animation: scaleIn .2s var(--tr-bounce);
  overflow: hidden;
}
.notif-panel.open { display: block; }
.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.notif-header strong { font-family: var(--font-head); font-size: 14px; }
.notif-list { max-height: 320px; overflow-y: auto; }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: var(--tr-fast);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(99,102,241,.06); }
.notif-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}
.notif-icon.alerta      { background: var(--rose-bg);  color: var(--rose); }
.notif-icon.info        { background: var(--blue-bg);  color: var(--blue-l); }
.notif-icon.advertencia { background: var(--amber-bg); color: var(--amber); }
.notif-msg  { font-size: 12px; line-height: 1.5; flex: 1; }
.notif-time { font-size: 10px; color: var(--t3); margin-top: 3px; }
.notif-footer { padding: 12px 18px; border-top: 1px solid var(--border); text-align: center; }
.notif-footer button { font-size: 12px; color: var(--blue-l); background: none; border: none; cursor: pointer; }

/* ─── STATS ROW (mini) ─────────────────────────── */
.mini-stat-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.mini-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
.msr-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.msr-label { font-size: 13px; font-weight: 500; flex: 1; }
.msr-val   { font-family: var(--font-head); font-size: 18px; font-weight: 700; }

/* ─── EMPTY STATE ─────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--t3);
}
.empty-state i { font-size: 48px; margin-bottom: 16px; display: block; opacity: .4; }
.empty-state p { font-size: 14px; }

/* ─── LEGEND ──────────────────────────────────────── */
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.cl-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--t2); }
.cl-dot  { width: 8px; height: 8px; border-radius: 50%; }

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-row { grid-template-columns: 1fr; }
  .charts-row-3 { grid-template-columns: 1fr 1fr; }
  .bottom-row { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  :root { --sidebar-w: 240px; }
  .pos-grid { grid-template-columns: 1fr; }
  .order-summary { position: static; }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 40px rgba(0,0,0,.5); }
  .main-wrapper { margin-left: 0; }
  :root { --topbar-h: 60px; }
  .page-content { padding: 16px; }
  .topbar { padding: 0 16px; }
  .tb-search { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .charts-row-3 { grid-template-columns: 1fr; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .col-full { grid-column: 1; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .clients-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   DistLaPoderosaTokio — Design Enhancement v5
   Mejoras estéticas premium agregadas
═══════════════════════════════════════════════════ */

/* ── Fondo animado con malla de gradiente ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(99,102,241,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(139,92,246,.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 30% at 50% 50%, rgba(34,211,238,.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.app-wrapper { position: relative; z-index: 1; }

/* ── Stat cards mejoradas con glow ── */
.stat-card {
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-card2) 100%);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.stat-card.blue  { box-shadow: var(--shadow-card), 0 4px 24px rgba(99,102,241,.08); }
.stat-card.green { box-shadow: var(--shadow-card), 0 4px 24px rgba(16,185,129,.08); }
.stat-card.amber { box-shadow: var(--shadow-card), 0 4px 24px rgba(245,158,11,.08); }
.stat-card.rose  { box-shadow: var(--shadow-card), 0 4px 24px rgba(244,63,94,.08); }
.stat-card:hover.blue  { box-shadow: var(--shadow-drop), 0 8px 40px rgba(99,102,241,.18); }
.stat-card:hover.green { box-shadow: var(--shadow-drop), 0 8px 40px rgba(16,185,129,.15); }
.stat-card:hover.amber { box-shadow: var(--shadow-drop), 0 8px 40px rgba(245,158,11,.15); }
.stat-card:hover.rose  { box-shadow: var(--shadow-drop), 0 8px 40px rgba(244,63,94,.15); }

/* Barra top con gradiente más rico */
.stat-card.blue::before  { background: linear-gradient(90deg, var(--blue), var(--cyan), var(--blue-l)); background-size: 200%; animation: bgShift 4s ease infinite; }
.stat-card.green::before { background: linear-gradient(90deg, var(--green), #6ee7b7, var(--green-l)); background-size: 200%; animation: bgShift 4s ease infinite; }
.stat-card.amber::before { background: linear-gradient(90deg, var(--amber), #fcd34d, #f97316); background-size: 200%; animation: bgShift 4s ease infinite; }
.stat-card.rose::before  { background: linear-gradient(90deg, var(--rose), #fb7185, #f97316); background-size: 200%; animation: bgShift 4s ease infinite; }

/* Iconos de stat con glow */
.stat-card.blue  .stat-icon { box-shadow: 0 4px 20px rgba(99,102,241,.25); }
.stat-card.green .stat-icon { box-shadow: 0 4px 20px rgba(16,185,129,.22); }
.stat-card.amber .stat-icon { box-shadow: 0 4px 20px rgba(245,158,11,.22); }
.stat-card.rose  .stat-icon { box-shadow: 0 4px 20px rgba(244,63,94,.22); }

/* Número con gradiente de color */
.stat-card.blue  .stat-val { background: linear-gradient(135deg, #fff 40%, var(--blue-l)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat-card.green .stat-val { background: linear-gradient(135deg, #fff 40%, var(--green-l)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat-card.amber .stat-val { background: linear-gradient(135deg, #fff 40%, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat-card.rose  .stat-val { background: linear-gradient(135deg, #fff 40%, #fb7185); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ── Cards generales mejoradas ── */
.card {
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-card2) 100%);
  position: relative;
  overflow: hidden;
}
.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  pointer-events: none;
}

/* ── Sidebar con identidad visual mejorada ── */
.sb-logo-mark {
  box-shadow: 0 6px 24px rgba(99,102,241,.45), 0 0 0 1px rgba(255,255,255,.15) inset;
  position: relative;
}
.sb-logo-mark::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(99,102,241,.4), rgba(139,92,246,.3));
  z-index: -1;
  filter: blur(6px);
}

.nav-link.active {
  background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(139,92,246,.12)) !important;
  box-shadow: 0 2px 12px rgba(99,102,241,.12), 0 0 0 1px rgba(99,102,241,.2) inset;
}

/* ── Topbar mejorada ── */
.topbar {
  background: linear-gradient(180deg, rgba(10,12,26,.98) 0%, rgba(8,10,22,.97) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 24px rgba(0,0,0,.3);
}

/* ── Botones con efectos premium ── */
.btn-primary {
  background: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%);
  box-shadow: 0 4px 20px rgba(99,102,241,.35), 0 0 0 1px rgba(255,255,255,.12) inset;
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .5s ease;
}
.btn-primary:hover::before { left: 100%; }
.btn-primary:hover {
  box-shadow: 0 8px 32px rgba(99,102,241,.5), 0 0 0 1px rgba(255,255,255,.15) inset;
}

.btn-success {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-l) 100%);
  box-shadow: 0 4px 18px rgba(16,185,129,.3), 0 0 0 1px rgba(255,255,255,.1) inset;
}
.btn-success:hover { box-shadow: 0 8px 28px rgba(16,185,129,.45), 0 0 0 1px rgba(255,255,255,.15) inset; }

/* ── Badges mejorados ── */
.badge {
  letter-spacing: .4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.badge.bg { border: 1px solid rgba(16,185,129,.2); }
.badge.br { border: 1px solid rgba(244,63,94,.2); }
.badge.ba { border: 1px solid rgba(245,158,11,.2); }
.badge.bb { border: 1px solid rgba(99,102,241,.2); }
.badge.bv { border: 1px solid rgba(139,92,246,.2); }

/* ── Tabla mejorada ── */
.data-table thead th {
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.data-table tbody tr {
  transition: background var(--tr-fast);
}
.data-table tbody tr:hover td {
  background: linear-gradient(90deg, rgba(99,102,241,.06), rgba(99,102,241,.03));
}

/* ── Modales con efecto glass premium ── */
.modal {
  background: linear-gradient(145deg, var(--bg-card2) 0%, var(--bg-card) 100%);
  box-shadow: var(--shadow-drop), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 60px rgba(99,102,241,.08);
}
.modal-overlay {
  background: rgba(0,0,0,.8);
}

/* ── Formularios mejorados ── */
.form-control {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  transition: var(--tr);
}
.form-control:focus {
  background: rgba(99,102,241,.06);
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(99,102,241,.12), 0 2px 8px rgba(0,0,0,.2);
}

/* ── Price display mejorado ── */
.price-display {
  background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(139,92,246,.08), rgba(34,211,238,.05));
  border: 1px solid rgba(99,102,241,.25);
  box-shadow: 0 4px 24px rgba(99,102,241,.08), 0 0 0 1px rgba(255,255,255,.05) inset;
}

/* ── Client card mejorada ── */
.client-card {
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-card2) 100%);
  box-shadow: 0 2px 16px rgba(0,0,0,.25);
}
.client-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 0 24px rgba(99,102,241,.12);
}
.cc-av {
  box-shadow: 0 4px 16px rgba(99,102,241,.35), 0 0 0 2px rgba(255,255,255,.08) inset;
}

/* ── Toasts premium ── */
.toast {
  background: linear-gradient(135deg, var(--bg-card2), var(--bg-card));
  box-shadow: var(--shadow-drop), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.toast.ok  { box-shadow: var(--shadow-drop), 0 0 0 1px rgba(16,185,129,.25) inset; }
.toast.err { box-shadow: var(--shadow-drop), 0 0 0 1px rgba(244,63,94,.25) inset; }
.toast.inf { box-shadow: var(--shadow-drop), 0 0 0 1px rgba(99,102,241,.25) inset; }

/* ── Scrollbar elegante ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--blue), var(--violet));
  border-radius: 10px;
}

/* ── Spinner de carga con gradiente ── */
.spinner {
  border-color: rgba(99,102,241,.15);
  border-top-color: var(--blue);
  border-right-color: var(--violet);
  box-shadow: 0 0 20px rgba(99,102,241,.2);
}

/* ── Dashboard: header greeting ── */
.dash-greeting {
  background: linear-gradient(135deg, rgba(99,102,241,.12) 0%, rgba(139,92,246,.08) 50%, rgba(34,211,238,.05) 100%);
  border: 1px solid rgba(99,102,241,.18);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  overflow: hidden;
  animation: fadeUp .4s ease both;
}
.dash-greeting::before {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(99,102,241,.12), transparent 70%);
  pointer-events: none;
}
.dash-greeting::after {
  content: '';
  position: absolute;
  left: -30px; bottom: -50px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(139,92,246,.1), transparent 70%);
  pointer-events: none;
}
.dg-text h2 {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, #fff, var(--blue-l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}
.dg-text p { color: var(--t2); font-size: 13px; }
.dg-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.dg-pill {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dg-pill i { color: var(--blue-l); font-size: 11px; }

/* ── Progress bar mejorada ── */
.progress {
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  border-radius: 10px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.progress-bar::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 20px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4));
  border-radius: 10px;
}

/* ── Login page upgrade ── */
.login-scene::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 30%, rgba(99,102,241,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 70%, rgba(139,92,246,.14) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.login-brand-icon {
  box-shadow: 0 16px 48px rgba(99,102,241,.5), 0 0 0 2px rgba(255,255,255,.12) inset;
}
.login-form-wrap {
  background: linear-gradient(145deg, var(--bg-card2), var(--bg-card));
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05) inset;
}

/* ── Skeleton loading pulso mejorado ── */
.skeleton::before {
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.12), rgba(139,92,246,.08), transparent);
  animation: shimmer 2.5s ease-in-out infinite;
}

/* ── Dropdown mejorado ── */
.dropdown-menu {
  background: linear-gradient(145deg, var(--bg-card2), var(--bg-card));
  box-shadow: var(--shadow-drop), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.dropdown-item:hover {
  background: linear-gradient(90deg, rgba(99,102,241,.1), rgba(139,92,246,.06));
}

/* ── Filtros mejorados ── */
.filter-chip.active {
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(139,92,246,.12));
  border-color: rgba(99,102,241,.4);
  box-shadow: 0 2px 12px rgba(99,102,241,.15);
}
.filter-chip:hover {
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.08));
}

/* ── Notif panel mejorado ── */
.notif-panel {
  background: linear-gradient(145deg, var(--bg-card2), var(--bg-card));
  box-shadow: var(--shadow-drop), 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* ── Keyframe extra: glowPulse para elementos activos ── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(99,102,241,.25); }
  50%       { box-shadow: 0 0 28px rgba(99,102,241,.45), 0 0 50px rgba(99,102,241,.15); }
}
.glow-pulse { animation: glowPulse 3s ease-in-out infinite; }

/* ── Animación de entrada más suave para cards ── */
.card, .stat-card, .client-card {
  will-change: transform, box-shadow;
}

/* ── Meta progress en dashboard ── */
.meta-ring-wrap {
  position: relative;
  width: 90px; height: 90px;
  flex-shrink: 0;
}
.meta-ring-wrap svg { transform: rotate(-90deg); }
.meta-ring-bg { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 8; }
.meta-ring-fill {
  fill: none;
  stroke: url(#metaGrad);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
}
.meta-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.meta-ring-pct {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--blue-l), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.meta-ring-lbl { font-size: 8px; color: var(--t3); letter-spacing: .5px; margin-top: 2px; }

/* ── Selector de opciones con mejor feel ── */
.sel-opt {
  background: rgba(255,255,255,.02);
  position: relative;
  overflow: hidden;
}
.sel-opt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.04), transparent);
  opacity: 0;
  transition: opacity var(--tr);
}
.sel-opt:hover::after, .sel-opt.on::after { opacity: 1; }
.sel-opt.on { transform: translateY(-2px); }

/* ── Order summary con glassmorphism ── */
.order-summary {
  background: linear-gradient(145deg, rgba(16,19,42,.95), rgba(20,24,48,.98));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(99,102,241,.15);
  box-shadow: 0 8px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
}

/* ── Barra lateral bottom user card ── */
.sb-user-card {
  background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(99,102,241,.05));
  border: 1px solid rgba(255,255,255,.05) !important;
}
.sb-user-card:hover {
  background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(139,92,246,.06)) !important;
  border-color: rgba(99,102,241,.25) !important;
}

/* ── Mejora login right panel ── */
.login-right {
  background:
    radial-gradient(ellipse 60% 50% at 50% 20%, rgba(99,102,241,.06), transparent),
    var(--bg-card);
}

/* ── Número de venta con estilo ── */
.data-table .td-mono {
  background: rgba(99,102,241,.08);
  border-radius: 6px;
  padding: 3px 8px;
  display: inline-block;
}

/* ── Ajuste de tabla más elegante con zebra sutil ── */
.data-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.01);
}

/* ── Alias progress-fill → progress-bar ── */
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  border-radius: 10px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.progress-fill::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 20px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4));
  border-radius: 10px;
}