@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@900&family=Rajdhani:wght@700&display=swap');

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  /* Cyber Neon Palette */
  --bg: #000000;
  --bg2: #0a0a0a;
  --bg3: #121212;
  --border: #1a1a1a;
  --border-hover: #2a2a2a;
  --text: #f0f0f0;
  --text-muted: #888;
  --text-dim: #555;

  /* Electric Lime - Primary Accent */
  --accent: #C6FF00;
  --accent-dim: rgba(198, 255, 0, 0.12);
  --accent-hover: #b3e600;

  /* Glow Effects */
  --glow-lime: 0 0 20px rgba(198, 255, 0, 0.4);
  --glow-magenta: 0 0 20px rgba(255, 0, 255, 0.4);
  --glow-cyan: 0 0 20px rgba(0, 229, 255, 0.4);

  /* Cyber Magenta - Secondary Accent */
  --magenta: #FF00FF;
  --magenta-dim: rgba(255, 0, 255, 0.12);
  --magenta-hover: #e600e6;

  /* Deep Azure - Tertiary Accent */
  --cyan: #00E5FF;
  --cyan-dim: rgba(0, 229, 255, 0.12);
  --cyan-hover: #00ccff;

  /* Status Colors - Neon Enhanced */
  --success: #22c55e;
  --success-dim: rgba(34, 197, 94, 0.12);
  --danger: #ef4444;
  --danger-dim: rgba(239, 68, 68, 0.12);
  --warning: #f59e0b;
  --warning-dim: rgba(245, 158, 11, 0.12);
  --info: #00E5FF;
  --info-dim: rgba(0, 229, 255, 0.12);
  --purple: #FF00FF;
  --purple-dim: rgba(255, 0, 255, 0.12);

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  --sidebar-w: 230px;
  --transition: 0.18s ease;

  /* ── Dashboard gradient theme (original dark) ── */
  --dash-orb1: rgba(44, 199, 255, 0.08);
  --dash-orb2: rgba(126, 87, 255, 0.13);
  --dash-base-start: #05050c;
  --dash-base-mid: #0a0914;
  --dash-base-end: #0e0c1d;
  --dash-dot: rgba(176, 155, 255, 0.06);
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* modal-open: NO usar touch-action:none en mobile porque bloquea scroll permanente */
html.modal-open,
body.modal-open {
  overflow: hidden !important;
}

/* ── MOBILE: ocultar fondo animado ANTES que cargue JS para evitar flash negro ── */
@media (pointer: coarse), (max-width: 1024px) {
  #bg-canvas,
  #aurora,
  .noise,
  .grid-bg {
    display: none !important;
  }
}

/* Mobile-safe mode: mantiene estilo pero baja carga gráfica */
body.mobile-safe .main {
  animation: none !important;
  background-size: 100% 100%, 100% 100%, 100% 100%;
}
body.mobile-safe .main::before {
  opacity: 0.09;
  animation: none !important;
}
body.mobile-safe .sidebar::before {
  filter: blur(6px);
  opacity: 0.65;
}
body.mobile-safe .kpi-card:hover,
body.mobile-safe .btn:hover {
  transform: none;
}
body.mobile-safe * {
  text-rendering: optimizeLegibility;
}
body.mobile-safe #aurora,
body.mobile-safe .noise,
body.mobile-safe .grid-bg,
body.mobile-safe #bg-canvas {
  display: none !important;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; outline: none; }
input, select, textarea {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--cyan)); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent-hover), var(--cyan-hover)); }

/* ── LAYOUT ──────────────────────────────────────────────── */
.app {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  width: 100%;
  max-width: 100%;
}

.kpi-card {
  background: var(--bg2);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--accent);
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border: 1px solid transparent;
}
.kpi-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0,0,0,0.4), var(--glow-lime);
  border-color: rgba(198, 255, 0, 0.3);
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #1f2023 0%, #1d1e21 52%, #1b1c1f 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: transform var(--transition);
  overflow: visible;
}
.sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  width: 3px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(198, 255, 0, 0) 0,
    rgba(198, 255, 0, 0) 52px,
    rgba(198, 255, 0, 0.05) 64px,
    rgba(198, 255, 0, 0.027) 96px,
    rgba(198, 255, 0, 0.015) 230px,
    rgba(198, 255, 0, 0.009) 42%,
    rgba(198, 255, 0, 0.004) 56%,
    rgba(198, 255, 0, 0) 68%
  );
  filter: blur(1.1px);
  pointer-events: none;
}
.sidebar::before {
  content: '';
  position: absolute;
  right: -22px;
  top: 52px;
  width: 46px;
  height: 360px;
  background: radial-gradient(ellipse at top, rgba(198, 255, 0, 0.04) 0%, rgba(198, 255, 0, 0.016) 38%, rgba(198, 255, 0, 0.005) 60%, rgba(198, 255, 0, 0) 82%);
  filter: blur(10px);
  pointer-events: none;
}
.sidebar-logo {
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--border);
}
.sidebar-logo .logo-mark {
  display: flex; align-items: center; gap: 10px;
}
.sidebar-logo .logo-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; color: #000;
  box-shadow: 0 0 12px rgba(198, 255, 0, 0.3);
}
.sidebar-logo .logo-name {
  font-weight: 700; font-size: 1rem;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}
.sidebar-logo .logo-sub {
  font-size: 0.7rem; color: var(--text-muted); font-weight: 400;
}

.sidebar-nav {
  flex: 1; padding: 14px 10px; overflow-y: auto;
}
.nav-section-label {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--text-dim); text-transform: uppercase;
  padding: 10px 10px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 0.9rem; font-weight: 500;
  transition: all var(--transition); cursor: pointer;
  user-select: none;
  margin-bottom: 2px;
  position: relative;
}
.nav-item:hover {
  background: var(--bg3);
  color: var(--magenta);
  box-shadow: inset 0 0 20px rgba(255, 0, 255, 0.05);
}
.nav-item.active {
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: 0 0 15px rgba(198, 255, 0, 0.2);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px var(--accent);
}
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; transition: all var(--transition); }
.nav-item:hover svg { transform: scale(1.1); }
.nav-item.active svg { filter: drop-shadow(0 0 4px var(--accent)); }
.nav-badge {
  margin-left: auto;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  color: #000;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

.sidebar-footer {
  padding: 14px 10px; border-top: 1px solid var(--border);
}
.user-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.user-pill:hover { background: var(--bg3); }
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-dim), var(--cyan-dim));
  border: 1.5px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem; color: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(198, 255, 0, 0.2);
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role {
  font-size: 0.78rem;
  color: #f3f4f6;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Main content */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  position: relative;
  /* IMPORTANTE: NO usar isolation:isolate — rompe position:fixed en Android/iOS */
  overflow-x: hidden;
  /* El scroll principal lo maneja .main */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(circle at 68% 24%, var(--dash-orb1) 0%, transparent 42%),
    radial-gradient(circle at 28% 84%, var(--dash-orb2) 0%, transparent 46%),
    linear-gradient(160deg, var(--dash-base-start) 0%, var(--dash-base-mid) 46%, var(--dash-base-end) 100%);
  background-size: 170% 170%, 170% 170%, 100% 100%;
  animation: main-gradient-drift 24s ease-in-out infinite alternate;
}
.main::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dash-dot) 0.55px, transparent 0.55px);
  background-size: 24px 24px;
  opacity: 0.19;
  pointer-events: none;
  z-index: 0;
  animation: main-grid-drift 34s linear infinite;
}
.main > * {
  position: relative;
  z-index: 1;
}

@keyframes main-gradient-drift {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 50%;
  }
  50% {
    background-position: 34% 20%, 66% 80%, 50% 50%;
  }
  100% {
    background-position: 14% 34%, 86% 66%, 50% 50%;
  }
}

@keyframes main-grid-drift {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 18px -12px;
  }
  100% {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main,
  .main::before {
    animation: none;
  }
}
.topbar {
  background: linear-gradient(180deg, #1f2023 0%, #1d1e21 52%, #1b1c1f 100%);
  border-bottom: 1px solid var(--border);
  padding: 18px 28px;
  min-height: 70px;
  display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 90;
  overflow: visible;
}
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(154, 163, 182, 0.18) 0%,
    rgba(154, 163, 182, 0.09) 22%,
    rgba(154, 163, 182, 0.035) 48%,
    rgba(154, 163, 182, 0.012) 70%,
    rgba(154, 163, 182, 0) 100%
  );
  filter: blur(0.7px);
  pointer-events: none;
}
.topbar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 16px;
  background: linear-gradient(
    to right,
    rgba(154, 163, 182, 0.07) 0%,
    rgba(154, 163, 182, 0.028) 34%,
    rgba(154, 163, 182, 0) 72%
  );
  filter: blur(7px);
  pointer-events: none;
}
.topbar-title { font-size: 1.05rem; font-weight: 600; flex: 1; }
.topbar-business-name {
  font-family: Helvetica, 'Helvetica Neue', 'Arial Black', Arial, sans-serif;
  font-weight: 900;
  font-size: 1.68rem;
  line-height: 1;
  letter-spacing: 0;
  color: #f5ecff;
  text-shadow: none;
}
.topbar-user-meta {
  opacity: 0.52;
  font-weight: 500;
  font-size: 0.84em;
}
.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
/* Tarjetas de la misma fila igualan altura → grilla homogénea, sin escalonado */
.dashboard-main-grid > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}
/* El contenido (tabla/lista) se mantiene arriba; el sobrante va al fondo */
.dashboard-main-grid > .card > .table-wrap,
.dashboard-main-grid > .card > div:last-child {
  flex: 1 1 auto;
}
/* ── Tarjetas colapsables del dashboard ─────────────────── */
/* Si una tarjeta de la fila está colapsada, la fila no la estira */
.dashboard-main-grid:has(.dash-collapsed) { align-items: start; }
.zx-dash-card.dash-collapsed { height: auto; }
.zx-dash-card.dash-collapsed .dash-card-body { display: none; }
.zx-dash-card.dash-collapsed .card-header { margin-bottom: 0; }
.dash-collapse-btn {
  background: none; border: 1px solid transparent; cursor: pointer;
  color: var(--text-muted); padding: 5px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.dash-collapse-btn:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.dash-collapse-chev { transition: transform 0.18s ease; }
.dash-collapsed .dash-collapse-chev { transform: rotate(-90deg); }
.page-content { padding: 28px; flex: 1; }

/* ── AUTH SCREEN ─────────────────────────────────────────── */
.auth-screen {
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  padding: 20px;
  position: relative;
  overflow-x: clip;
  overflow-y: auto;
}
/* Subtle cyber glow background */
.auth-screen::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 20%, rgba(198, 255, 0, 0.03) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(255, 0, 255, 0.03) 0%, transparent 50%),
              radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.02) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.auth-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px;
  width: 100%; max-width: 380px;
  box-shadow: var(--shadow), 0 0 40px rgba(198, 255, 0, 0.05);
  position: relative;
  z-index: 1;
}
.auth-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}
.auth-logo {
  text-align: center; margin-bottom: 28px;
}
.auth-logo-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.4rem; color: #000;
  margin: 0 auto 12px;
  box-shadow: var(--glow-lime);
}
.auth-logo h1 {
  font-size: 1.3rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.auth-logo p { color: var(--text-muted); font-size: 0.85rem; margin-top: 3px; }

/* ── CARDS & GRIDS ───────────────────────────────────────── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 2px 24px rgba(0,0,0,0.32), 0 0 0 1px rgba(198,255,0,0.04);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.card-title {
  font-size: 0.9rem; font-weight: 600; color: var(--text);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: all var(--transition);
}
.stat-card:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
  transform: translateY(-2px);
}
.stat-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; margin-bottom: 8px; }
.stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.stat-sub { font-size: 0.72rem; color: var(--text-dim); margin-top: 4px; }

/* ── FORMS ───────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 0.8rem; font-weight: 500;
  color: var(--text-muted); margin-bottom: 6px;
}
.form-control {
  width: 100%; background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text); padding: 9px 12px;
  transition: all var(--transition);
}
.form-control:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15), 0 0 15px rgba(0, 229, 255, 0.1);
}
.form-control::placeholder { color: var(--text-dim); }
select.form-control { cursor: pointer; }
select.form-control option { background: var(--bg3); color: var(--text); }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
input[type="color"].form-control {
  padding: 4px; height: 40px; cursor: pointer;
}
input[type="color"].form-control::-webkit-color-swatch-wrapper {
  padding: 0; border-radius: 4px;
}
input[type="color"].form-control::-webkit-color-swatch {
  border: 1px solid var(--border); border-radius: 4px;
}
.form-divider {
  border: none; border-top: 1px solid var(--border);
  margin: 20px 0;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 9px 16px;
  border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 500;
  transition: all var(--transition); cursor: pointer;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; }
.btn-primary {
  background: var(--accent);
  color: #000;
  border: 1px solid var(--accent);
  box-shadow: 0 0 15px rgba(198, 255, 0, 0.3);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 0 25px rgba(198, 255, 0, 0.5);
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.btn-secondary:hover {
  background: var(--bg3);
  border-color: var(--magenta);
  box-shadow: inset 0 0 15px rgba(255, 0, 255, 0.05);
  color: var(--magenta);
}
.btn-order-cancel-soft {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
}
.btn-order-cancel-soft:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fee2e2;
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.22);
}
.btn-danger { background: var(--danger-dim); color: var(--danger); border: 1px solid transparent; }
.btn-danger:hover { background: var(--danger); color: #fff; box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); }
.btn-success {
  background: var(--success-dim);
  color: var(--success);
  border: 1px solid transparent;
}
.btn-success:hover {
  background: var(--success);
  color: #fff;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid transparent; padding: 7px 10px; }
.btn-ghost:hover { color: var(--cyan); background: var(--bg3); border-color: var(--cyan); }
.btn-sm { padding: 6px 12px; font-size: 0.78rem; }
.btn-lg { padding: 12px 22px; font-size: 0.95rem; font-weight: 600; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ai {
  background: linear-gradient(135deg, var(--magenta), var(--purple));
  color: #fff;
  border: none;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
}
.btn-ai:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 0 25px rgba(255, 0, 255, 0.5);
}

/* Minimalist 3D Action Buttons (for Modal Footers) */
.btn-action-3d {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem; font-weight: 500;
  color: #fff;
  cursor: pointer; user-select: none;
  transition: all 0.1s ease;
}
.btn-action-3d:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0 0 transparent !important;
}

.btn-action-3d-print {
  background: var(--info);
  border: 1px solid #2563eb;
  box-shadow: 0 2px 0 #1e40af, 0 2px 4px rgba(0,0,0,0.2);
}
.btn-action-3d-print:hover { background: #60a5fa; border-color: #3b82f6; }

.btn-action-3d-email {
  background: var(--purple);
  border: 1px solid #9333ea;
  box-shadow: 0 2px 0 #6b21a8, 0 2px 4px rgba(0,0,0,0.2);
}
.btn-action-3d-email:hover { background: #c084fc; border-color: #a855f7; }

.btn-action-3d-wa {
  background: var(--success);
  border: 1px solid #16a34a;
  box-shadow: 0 2px 0 #15803d, 0 2px 4px rgba(0,0,0,0.2);
}
.btn-action-3d-wa:hover { background: #4ade80; border-color: #22c55e; }

/* ── TABLE ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead tr { border-bottom: 1px solid var(--border); }
th {
  text-align: left; padding: 12px 14px;
  font-size: 0.75rem; font-weight: 700;
  color: #9ca3af; text-transform: uppercase; letter-spacing: 0.08em;
}
td { padding: 12px 14px; font-size: 0.85rem; border-bottom: 1px solid var(--border); }
tbody tr {
  transition: background 0.14s ease, box-shadow 0.14s ease;
  position: relative;
}
tbody tr:hover { background: var(--bg3); }
tbody tr[style*="cursor:pointer"]:hover {
  background: rgba(198,255,0,0.03);
  box-shadow: inset 3px 0 0 rgba(198,255,0,0.22);
}
tbody tr[style*="cursor:pointer"]:active {
  background: rgba(198,255,0,0.055);
}
tbody tr:last-child td { border-bottom: none; }

/* ── BADGES ──────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 99px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: 0 0 10px currentColor;
}
.badge::before {
  content: ''; width: 5px; height: 5px;
  border-radius: 50%; background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.badge-ingresado { background: var(--info-dim); color: var(--cyan); box-shadow: 0 0 10px rgba(0, 229, 255, 0.3); }
.badge-proceso { background: var(--warning-dim); color: var(--warning); box-shadow: 0 0 10px rgba(245, 158, 11, 0.3); }
.badge-listo { background: var(--success-dim); color: var(--success); box-shadow: 0 0 10px rgba(34, 197, 94, 0.3); }
.badge-entregado { background: rgba(100,100,100,0.15); color: #888; }
.badge-cancelado { background: var(--danger-dim); color: var(--danger); box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
.badge-pendiente { background: var(--warning-dim); color: var(--warning); box-shadow: 0 0 10px rgba(245, 158, 11, 0.3); }
.badge-confirmado { background: var(--success-dim); color: var(--success); box-shadow: 0 0 10px rgba(34, 197, 94, 0.3); }
.badge-respondido { background: var(--magenta-dim); color: var(--magenta); box-shadow: 0 0 10px rgba(255, 0, 255, 0.3); }

/* WhatsApp Sidebar States - Cyber Neon */
.wa-neon-online {
  color: var(--cyan) !important;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.6), 0 0 20px rgba(0, 229, 255, 0.3);
  font-weight: 700 !important;
}

.wa-dot-orange {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--magenta);
  border-radius: 50%;
  margin-left: 6px;
  box-shadow: 0 0 8px var(--magenta), 0 0 16px rgba(255, 0, 255, 0.4);
  animation: wa-pulse 2s ease-in-out infinite;
}

@keyframes wa-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

/* ── MODAL ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(8px);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%; max-width: 700px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow), 0 0 40px rgba(198, 255, 0, 0.1);
  transform: translateY(20px);
  transition: transform var(--transition);
  position: relative;
}
.modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--cyan), var(--magenta), transparent);
  opacity: 0.6;
}
.modal-overlay.open .modal { transform: translateY(0); }

/* Date icon contrast (el tono del modal de orden vive en index.html) */
input[type="date"],
input[type="month"] {
  color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.35);
  opacity: 0.85;
  cursor: pointer;
}
#order-modal input[type="date"] {
  color-scheme: dark;
}
.modal-header {
  padding: 20px 24px 0;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.modal-title {
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.modal-body { padding: 20px 24px; }
.modal-footer {
  padding: 0 24px 20px;
  display: flex; justify-content: flex-end; gap: 10px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 15px;
}
.modal-close {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 4px;
  transition: color var(--transition);
}
.modal-close:hover { color: var(--magenta); }

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

.mini-switch-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.mini-switch-wrap input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.mini-switch-slider {
  position: relative;
  width: 42px;
  height: 22px;
  border-radius: 999px;
  background: #262b35;
  border: 1px solid #394152;
  transition: all .18s ease;
  display: inline-block;
}
.mini-switch-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d2d7e2;
  transition: transform .18s ease;
}
.mini-switch-wrap input:checked + .mini-switch-slider {
  background: rgba(34, 197, 94, 0.22);
  border-color: rgba(34, 197, 94, 0.65);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25), 0 0 10px rgba(34, 197, 94, 0.2);
}
.mini-switch-wrap input:checked + .mini-switch-slider::after {
  transform: translateX(20px);
  background: #22c55e;
}
.mini-switch-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── SEARCH / FILTERS BAR ────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.search-wrap svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-dim); pointer-events: none;
}
.search-wrap input { padding-left: 34px; }

/* ── TOAST ───────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(92vw, 560px);
  pointer-events: none;
}
.toast {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 13px 18px;
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-width: 260px; max-width: 560px;
  box-shadow: var(--shadow);
  animation: toastRise 0.22s ease;
  font-size: 0.85rem;
  pointer-events: auto;
}
.toast-success { border-left: 3px solid var(--success); }
.toast-error   { border-left: 3px solid var(--danger); }
.toast-info    { border-left: 3px solid var(--info); }
@keyframes toastRise {
  from { transform: translateY(24px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.order-client-search-wrap {
  position: relative;
}
.order-client-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgba(15, 16, 20, 0.98);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.45);
  overflow: hidden;
  z-index: 40;
  max-height: 260px;
  overflow-y: auto;
}
.autocomplete-item {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background .15s ease;
}
.autocomplete-item:last-child {
  border-bottom: none;
}
.autocomplete-item:hover {
  background: rgba(198,255,0,0.08);
}
.client-selected-indicator {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,229,255,0.2);
  background: rgba(0,229,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.client-selected-name {
  font-weight: 700;
  color: var(--text);
}
.client-selected-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.client-doc-lookup-status {
  min-height: 20px;
  margin-top: -10px;
  margin-bottom: 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.client-doc-lookup-status.is-loading { color: var(--info); }
.client-doc-lookup-status.is-found { color: var(--success); }
.client-doc-lookup-status.is-notfound { color: #f59e0b; }
.client-doc-lookup-status.is-error { color: var(--danger); }
.client-doc-lookup-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ── TABS ────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab {
  padding: 9px 16px; font-size: 0.85rem; font-weight: 500;
  color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: all var(--transition); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  position: relative;
}
.tab:hover { color: var(--cyan); }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-shadow: 0 0 10px rgba(198, 255, 0, 0.4);
}
.tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  box-shadow: 0 0 10px var(--accent);
}

/* ── AI RESPONSE BOX ─────────────────────────────────────── */
.ai-box {
  background: linear-gradient(135deg, rgba(255, 0, 255, 0.08), rgba(0, 229, 255, 0.05));
  border: 1px solid rgba(255, 0, 255, 0.3);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre-wrap;
  color: #fff;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 30px rgba(0, 229, 255, 0.02);
  position: relative;
  overflow: hidden;
}
.ai-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--magenta), var(--cyan));
  box-shadow: 0 0 10px var(--magenta);
}
.ai-box-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 10px;
  text-shadow: 0 0 8px rgba(255, 0, 255, 0.4);
}

/* ── CALENDAR / SLOTS ────────────────────────────────────── */
.slots-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px; margin-top: 12px;
}
.slot {
  padding: 9px 6px; text-align: center;
  border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 500;
  cursor: pointer; transition: all var(--transition);
  border: 1px solid var(--border);
}
.slot.available { background: var(--bg3); color: var(--text); }
.slot.available:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--cyan-dim);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
}
.slot.taken { background: transparent; color: var(--text-dim); cursor: not-allowed; text-decoration: line-through; border-style: dashed; }
.slot.selected {
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  color: #000;
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(198, 255, 0, 0.4);
}

/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 60px 20px; color: var(--text-muted);
}
.empty-state svg { width: 48px; height: 48px; margin-bottom: 14px; opacity: 0.3; }
.empty-state p { font-size: 0.9rem; }

/* ── LOADING ─────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--border) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 4px; height: 14px;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── PRINT ORDER ─────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .no-print, #toast-container { display: none !important; }
  .main { margin-left: 0 !important; }
  .card { border: 1px solid #ccc !important; }
  body { background: white !important; color: black !important; }
}

/* ── PAGINATION ──────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; margin-top: 18px;
}
.page-btn {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.8rem; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition);
}
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,0.5); z-index: 200; }
  .main { margin-left: 0; }
  .page-content { padding: 16px; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dashboard-main-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .card { padding: 16px; }
  .card-header { margin-bottom: 14px; }
  .mobile-menu-btn { display: flex !important; }
  .topbar {
    min-height: 56px;
    height: auto;
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .topbar-title { font-size: 0.95rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-business-name { font-size: 1.15rem !important; }
  #topbar-branch-selector-wrap {
    min-width: 120px !important;
    max-width: 180px !important;
    flex: 0 1 160px;
  }
  .topbar-actions {
    margin-left: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-shrink: 0;
  }
  .page-content {
    padding: 16px;
  }
  .dashboard-main-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* Modales en móvil */
  .toolbar { flex-wrap: wrap; gap: 10px; }
  .search-wrap { min-width: 100%; max-width: 100%; }
  .modal {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 92vh;
    /* Asegurar que el modal sea scrolleable en iOS */
    -webkit-overflow-scrolling: touch;
  }
  .modal-body {
    max-height: calc(92vh - 130px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Modal overlay: asegurar que ocupe toda la pantalla en iOS */
  .modal-overlay {
    padding: 10px;
    align-items: flex-end;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0,0,0,0.72);
  }
  .modal-overlay .modal {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 92vh;
  }
}

@media (max-width: 900px) {
  #login-screen {
    padding: 14px !important;
    align-items: flex-start !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .reg-card {
    max-width: 100% !important;
    padding: 24px 18px 22px !important;
    border-radius: 16px !important;
    margin-top: 12px;
  }
  #profiles-screen {
    padding: 22px 12px !important;
    justify-content: flex-start !important;
    padding-top: 36px !important;
  }
  #profiles-business-name {
    font-size: 2.05rem !important;
  }
  #profiles-branch-name {
    font-size: 1.05rem !important;
  }
  #profiles-grid > div {
    width: min(46vw, 190px) !important;
    padding: 22px 12px !important;
  }
  /* Evitar que el dashboard se trabe al cargar en mobile */
  #app-screen {
    overflow-x: hidden;
  }
}

@media (max-width: 640px) {
  #login-screen {
    padding: 10px !important;
  }
  .reg-card {
    padding: 18px 14px 18px !important;
    border-radius: 14px !important;
    margin-top: 8px !important;
  }
  .auth-card {
    padding: 24px 20px !important;
  }
  .reg-header h1 {
    font-size: 1.25rem !important;
  }
  #profiles-business-name {
    font-size: 1.68rem !important;
    line-height: 1.1;
  }
  #profiles-branch-name {
    font-size: 0.92rem !important;
  }
  #profiles-branch-switch-wrap {
    max-width: 100% !important;
  }
  #profiles-grid {
    gap: 14px !important;
    max-width: 100% !important;
  }
  #profiles-grid > div {
    width: calc(50% - 10px) !important;
    min-width: 132px !important;
    max-width: none !important;
    padding: 16px 10px !important;
  }

  /* Ocultar elementos marcados hide-mobile en pantallas pequeñas */
  .hide-mobile { display: none !important; }

  /* Topbar: reducir gap y asegurar visibilidad de botones de acción */
  .topbar {
    padding: 6px 10px !important;
    gap: 6px !important;
  }
  .topbar-actions {
    gap: 6px !important;
  }
  .topbar-icon-btn {
    width: 34px !important;
    height: 34px !important;
  }

  /* ZXION BLACK hero row — teléfonos pequeños: ocultar tarjetas laterales */
  .zx-compact-hero {
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  .zx-hero-side {
    display: none !important;
  }
  .zx-compact-hero > div:not(.zx-hero-side) {
    width: 100% !important;
    flex: 1 !important;
  }
}

/* ZXION BLACK hero row — tablets (640–900px): tarjetas más compactas */
@media (min-width: 641px) and (max-width: 900px) {
  .zx-compact-hero {
    gap: 10px !important;
  }
  .zx-hero-side {
    width: 118px !important;
    height: 118px !important;
    min-width: 118px !important;
  }
}

/* ── PATTERN LOCK ─────────────────────────────────────────── */
.pat-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
}
.pat-dot div {
  width: 14px;
  height: 14px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: all 0.2s ease;
  pointer-events: none;
}
.pat-dot.active div {
  background: var(--accent);
  box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.2);
  transform: scale(1.2);
}

.mobile-menu-btn {
  display: none; background: none; border: none; color: var(--text);
  padding: 4px; cursor: pointer;
}
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  /* z-index debe ser mayor que sidebar (100) pero menor que modales (500) */
  z-index: 101;
  pointer-events: none;
}
.sidebar-overlay.open { display: block; pointer-events: auto; }

/* ── PRIORITY BADGES ─────────────────────────────────────── */
.priority-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 99px;
  font-size: 0.68rem; font-weight: 600;
}
.priority-baja    { background: rgba(100,100,100,0.2); color: #999; }
.priority-normal  { background: var(--info-dim); color: var(--info); }
.priority-alta    { background: rgba(249,115,22,0.12); color: #f97316; }
.priority-urgente { background: var(--danger-dim); color: var(--danger); }

/* ── NEW STATUS BADGES ───────────────────────────────────── */
.badge-por-asignar  { background: var(--info-dim); color: var(--info); }
.badge-asignado     { background: rgba(34,197,94,0.12); color: #22c55e; }
.badge-en-proceso   { background: var(--warning-dim); color: var(--warning); }
.badge-espera-repuesto { background: rgba(6,182,212,0.12); color: #06b6d4; }
.badge-por-entregar { background: rgba(168,85,247,0.12); color: var(--purple); }
.badge-entregado    { background: rgba(100,100,100,0.15); color: #888; }
.badge-garantia     { 
  background: rgba(249, 115, 22, 0.15); 
  color: #f97316; 
  box-shadow: 0 0 0 0 rgba(249,115,22,0.5);
  animation: garantia-pulse 2s ease-in-out infinite;
}
@keyframes garantia-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(249,115,22,0); }
}
.badge-sin-solucion { background: var(--danger-dim); color: var(--danger); }
.badge-cancelado    { background: var(--danger-dim); color: var(--danger); }

/* ── Acciones de la fila de órdenes: medidas uniformes para alinear ── */
.order-act-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Selector de estado tipo "badge-pill" (vive en la columna ESTADO).
   El color se inyecta por fila con la variable --st. */
.status-select {
  -webkit-appearance: none;
  appearance: none;
  height: 30px;
  max-width: 100%;
  padding: 0 30px 0 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--st, #888) 55%, transparent);
  background-color: color-mix(in srgb, var(--st, #888) 16%, transparent);
  color: var(--st, var(--text));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a0a0b0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  transition: filter .15s, box-shadow .15s;
}
.status-select:hover { filter: brightness(1.18); }
.status-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st, #888) 28%, transparent);
}
.status-select option {
  background: var(--bg3);
  color: var(--text);
  text-transform: none;
  font-weight: 500;
}
/* Carril fijo para los CTAs: todas las filas reservan el mismo ancho,
   con los botones alineados a la derecha — así la columna no queda
   "dentada" cuando una orden tiene 0, 1 o 2 acciones principales. */
.order-act-ctas {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  width: 226px;
  flex: 0 0 auto;
}
.order-act-cta {
  height: 32px;
  flex: 0 0 auto;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.order-act-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.order-act-cta:active { transform: translateY(0); }
/* Informe técnico — violeta, secundario pero visible */
.order-act-cta-report {
  background: linear-gradient(135deg, #9333ea, #c026d3);
  color: #fff;
  box-shadow: 0 2px 8px rgba(192, 38, 211, 0.35);
}
.order-act-cta-report:hover { box-shadow: 0 4px 14px rgba(192, 38, 211, 0.5); }
/* Entregar — acción primaria del flujo, color de marca */
.order-act-cta-deliver {
  background: var(--accent);
  color: #000;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(198, 255, 0, 0.25);
}
.order-act-cta-deliver:hover { box-shadow: 0 4px 14px rgba(198, 255, 0, 0.4); }
/* Ya entregada — estado consultivo, estilo ghost */
.order-act-cta-delivered {
  background: rgba(198, 255, 0, 0.08);
  color: var(--accent);
  border: 1px solid rgba(198, 255, 0, 0.3);
}

.warranty-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.05em;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── WORKFLOW KPI CARDS ──────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.kpi-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(14, 18, 30, 0.9) 0%, rgba(8, 11, 22, 0.98) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  border-top: 3px solid transparent;
  transition: border-color var(--transition), box-shadow 0.3s ease, background 0.3s ease;
}
.kpi-card::before {
  content: "";
  position: absolute;
  inset: -35% -8% auto -8%;
  height: 80%;
  background: radial-gradient(closest-side, var(--kpi-glow, rgba(0, 229, 255, 0.14)) 0%, transparent 78%);
  filter: blur(16px);
  opacity: 0.65;
  pointer-events: none;
}
.kpi-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -8%;
  width: 116%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--kpi-line, rgba(0, 229, 255, 0.9)) 45%, var(--kpi-line, rgba(0, 229, 255, 0.9)) 55%, transparent 100%);
  pointer-events: none;
}
.kpi-card > * {
  position: relative;
  z-index: 1;
}
.kpi-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 0 0 1px var(--kpi-border-hover, rgba(168,85,247,0.35)),
              0 8px 28px rgba(0,0,0,0.55),
              0 0 40px var(--kpi-glow, rgba(168,85,247,0.14));
  background: rgba(168,85,247,0.06);
  border-color: rgba(168,85,247,0.3);
}
.kpi-card:active {
  transform: translateY(-2px) scale(0.99);
  transition: transform 0.08s ease;
}
.kpi-card-blue {
  --kpi-line: rgba(0, 229, 255, 0.92);
  --kpi-glow: rgba(0, 229, 255, 0.18);
  --kpi-border-hover: rgba(0, 229, 255, 0.38);
  border-top-color: rgba(0, 229, 255, 0.45);
}
.kpi-card-blue:hover {
  box-shadow: 0 0 0 1px rgba(0,229,255,0.38),
              0 8px 28px rgba(0,0,0,0.55),
              0 0 40px rgba(0,229,255,0.16);
  background: rgba(0,229,255,0.05);
  border-color: rgba(0,229,255,0.3);
}
.kpi-card-orange {
  --kpi-line: rgba(249, 115, 22, 0.92);
  --kpi-glow: rgba(249, 115, 22, 0.16);
  --kpi-border-hover: rgba(249,115,22,0.38);
  border-top-color: rgba(249, 115, 22, 0.45);
}
.kpi-card-orange:hover {
  box-shadow: 0 0 0 1px rgba(249,115,22,0.38),
              0 8px 28px rgba(0,0,0,0.55),
              0 0 40px rgba(249,115,22,0.14);
  background: rgba(249,115,22,0.05);
  border-color: rgba(249,115,22,0.3);
}
.kpi-card-purple {
  --kpi-line: rgba(168, 85, 247, 0.92);
  --kpi-glow: rgba(168, 85, 247, 0.18);
  --kpi-border-hover: rgba(168,85,247,0.38);
  border-top-color: rgba(168, 85, 247, 0.45);
}
.kpi-card-purple:hover {
  box-shadow: 0 0 0 1px rgba(168,85,247,0.38),
              0 8px 28px rgba(0,0,0,0.55),
              0 0 40px rgba(168,85,247,0.16);
  background: rgba(168,85,247,0.05);
  border-color: rgba(168,85,247,0.3);
}
.kpi-card-emerald {
  --kpi-line: rgba(16, 185, 129, 0.92);
  --kpi-glow: rgba(16, 185, 129, 0.18);
  --kpi-border-hover: rgba(16, 185, 129, 0.38);
  border-top-color: rgba(16, 185, 129, 0.45);
}
.kpi-card-emerald:hover {
  box-shadow: 0 0 0 1px rgba(16,185,129,0.38),
              0 8px 28px rgba(0,0,0,0.55),
              0 0 40px rgba(16,185,129,0.16);
  background: rgba(16,185,129,0.05);
  border-color: rgba(16,185,129,0.3);
}
.kpi-card .kpi-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-card .kpi-value { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.kpi-card .kpi-icon { font-size: 1.4rem; margin-bottom: 8px; }

/* ── PRIORITY ORDER ROW PULSE ────────────────────────────── */
@keyframes pulse-alta {
  0%   { background-color: var(--pulse-bg-off, transparent); box-shadow: none; }
  50%  { background-color: var(--pulse-bg-on,  rgba(100,100,255,0.1)); box-shadow: inset 0 0 0 1px var(--pulse-border, rgba(100,100,255,0.3)), 0 0 10px var(--pulse-glow, rgba(100,100,255,0.08)); }
  100% { background-color: var(--pulse-bg-off, transparent); box-shadow: none; }
}
@keyframes pulse-urgente {
  0%   { background-color: var(--pulse-bg-off, transparent); box-shadow: none; }
  50%  { background-color: var(--pulse-bg-on,  rgba(239,68,68,0.12)); box-shadow: inset 0 0 0 1px var(--pulse-border, rgba(239,68,68,0.4)), 0 0 12px var(--pulse-glow, rgba(239,68,68,0.15)); }
  100% { background-color: var(--pulse-bg-off, transparent); box-shadow: none; }
}
.order-row-pulse-alta    { animation: pulse-alta    3s ease-in-out infinite; }
.order-row-pulse-urgente { animation: pulse-urgente 1.3s ease-in-out infinite; }

/* ── FINANCIAL KPI ROW ───────────────────────────────────── */
.fin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.fin-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.35s ease,
              box-shadow 0.3s ease;
}
.fin-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  border-color: rgba(198,255,0,0.2);
}
.fin-label { font-size: 0.68rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.fin-value { font-size: 1.1rem; font-weight: 700; }
.fin-value.positive { color: var(--success); }
.fin-value.negative { color: var(--danger); }
.fin-value.neutral  { color: var(--text); }

/* ── FINANCIAL REVEAL SYSTEM ─────────────────────────────── */
.fin-reveal-wrap {
  margin-bottom: 24px;
  position: relative;
}

/* Trigger Card — integrated with dashboard card system */
.fin-trigger-card {
  position: relative;
  cursor: pointer;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: background 0.2s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
/* Lime top accent line (same language as KPI cards) */
.fin-trigger-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(198,255,0,0.55) 0%, rgba(0,229,255,0.35) 60%, transparent 100%);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.fin-trigger-card:hover {
  background: var(--bg3);
  border-color: var(--border-hover);
  box-shadow: 0 4px 18px rgba(0,0,0,0.3);
}
.fin-trigger-card:hover::before { opacity: 1; }
.fin-trigger-card.expanded {
  border-color: rgba(198,255,0,0.18);
  background: var(--bg3);
}
.fin-trigger-card.expanded::before { opacity: 1; }
.fin-trigger-card:active {
  transform: scale(0.998);
  transition: transform 0.08s ease;
}

/* Left section */
.fin-trigger-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fin-trigger-icon-wrap {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(198,255,0,0.07);
  border: 1px solid rgba(198,255,0,0.14);
  border-radius: 9px;
  color: #C6FF00;
}
.fin-trigger-icon-bg { display: none; }
.fin-trigger-icon {
  display: flex; align-items: center; justify-content: center;
}
.fin-trigger-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.fin-trigger-sub {
  font-size: 0.67rem;
  color: var(--text-dim);
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* Right section: mini bar chart + chevron */
.fin-trigger-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.fin-trigger-previews {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 18px;
}
.fin-trigger-bar {
  width: 4px;
  border-radius: 2px 2px 0 0;
  background: rgba(198,255,0,0.22);
}
.fin-trigger-bar:nth-child(1) { height: 35%; background: rgba(198,255,0,0.30); }
.fin-trigger-bar:nth-child(2) { height: 60%; background: rgba(198,255,0,0.42); }
.fin-trigger-bar:nth-child(3) { height: 45%; background: rgba(198,255,0,0.36); }
.fin-trigger-bar:nth-child(4) { height: 80%; background: rgba(198,255,0,0.56); }
.fin-trigger-bar:nth-child(5) { height: 55%; background: rgba(198,255,0,0.44); }
.fin-trigger-bar:nth-child(6) { height: 70%; background: rgba(198,255,0,0.50); }

.fin-trigger-chevron {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1),
              color 0.2s ease,
              background 0.2s ease,
              border-color 0.2s ease;
  flex-shrink: 0;
}
.fin-trigger-card.expanded .fin-trigger-chevron {
  transform: rotate(180deg);
  color: #C6FF00;
  background: rgba(198,255,0,0.07);
  border-color: rgba(198,255,0,0.18);
}

/* ── Expanded cards container */
.fin-expanded-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.48s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.32s ease;
  margin-top: 0;
}
.fin-expanded-wrap.open {
  max-height: 600px;
  opacity: 1;
  margin-top: 10px;
}

/* Cards grid */
.fin-expanded-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
/* Tarjetas financieras de altura uniforme → matriz pareja sin huérfanas raras */
.fin-expanded-inner .fin-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 92px;
}

/* ── Staggered entrance — slide from sides (kept, tightened) */
@keyframes fin-card-in-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fin-card-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.fin-expanded-wrap.open .fin-card:nth-child(1) { animation: fin-card-in-left  0.36s cubic-bezier(0.4,0,0.2,1) 0.00s both; }
.fin-expanded-wrap.open .fin-card:nth-child(2) { animation: fin-card-in-left  0.36s cubic-bezier(0.4,0,0.2,1) 0.05s both; }
.fin-expanded-wrap.open .fin-card:nth-child(3) { animation: fin-card-in-left  0.36s cubic-bezier(0.4,0,0.2,1) 0.10s both; }
.fin-expanded-wrap.open .fin-card:nth-child(4) { animation: fin-card-in-right 0.36s cubic-bezier(0.4,0,0.2,1) 0.04s both; }
.fin-expanded-wrap.open .fin-card:nth-child(5) { animation: fin-card-in-right 0.36s cubic-bezier(0.4,0,0.2,1) 0.09s both; }
.fin-expanded-wrap.open .fin-card:nth-child(6) { animation: fin-card-in-right 0.36s cubic-bezier(0.4,0,0.2,1) 0.14s both; }
.fin-expanded-wrap.open .fin-card:nth-child(7) { animation: fin-card-in-right 0.36s cubic-bezier(0.4,0,0.2,1) 0.19s both; }

/* ── Fin-card design — elevated dark data card */
.fin-expanded-inner .fin-card {
  background: #191919;
  border: 1px solid #232323;
  border-top: none;
  border-radius: var(--radius);
  padding: 13px 14px;
  position: relative;
  overflow: hidden;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.fin-expanded-inner .fin-card:hover {
  background: #1e1e1e;
  border-color: #2c2c2c;
  transform: translateY(-1px);
}
.fin-expanded-inner .fin-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--fin-accent, #C6FF00);
}
/* Color coding — solid, no glow */
.fin-expanded-inner .fin-card:nth-child(1) { --fin-accent: #C6FF00; }
.fin-expanded-inner .fin-card:nth-child(2) { --fin-accent: #f97316; }
.fin-expanded-inner .fin-card:nth-child(3) { --fin-accent: #00E5FF; }
.fin-expanded-inner .fin-card:nth-child(4) { --fin-accent: #ef4444; }
.fin-expanded-inner .fin-card:nth-child(5) { --fin-accent: #22c55e; }
.fin-expanded-inner .fin-card:nth-child(6) { --fin-accent: #a855f7; }
.fin-expanded-inner .fin-card:nth-child(7) { --fin-accent: #00E5FF; }

.kpi-grid.has-reveal {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── TIME FILTER BUTTONS ─────────────────────────────────── */
.period-filter {
  display: flex; gap: 4px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.period-btn {
  padding: 5px 16px; border-radius: 4px;
  font-size: 0.8rem; font-weight: 500;
  color: var(--text-muted); background: transparent;
  border: none; cursor: pointer; transition: all var(--transition);
}
.period-btn.active { background: var(--accent); color: #000; font-weight: 600; }
.period-btn:hover:not(.active) { color: var(--text); }

/* ── AUTOCOMPLETE DROPDOWN ───────────────────────────────── */
.autocomplete-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  z-index: 200; max-height: 200px; overflow-y: auto;
  margin-top: 2px;
}
.autocomplete-item {
  padding: 9px 14px; cursor: pointer; font-size: 0.85rem;
  transition: background var(--transition);
  border-bottom: 1px solid var(--border);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: var(--bg3); }
.autocomplete-item .ai-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

/* ── FORM SECTION TITLE ──────────────────────────────────── */
.form-section-title {
  font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 14px;
}

/* ── RADIO PILLS ─────────────────────────────────────────── */
.radio-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 99px;
  border: 1px solid var(--border);
  cursor: pointer; font-size: 0.82rem; font-weight: 500;
  color: var(--text-muted); transition: all var(--transition);
}
.radio-pill input { display: none; }
.radio-pill:has(input:checked) {
  background: var(--accent-dim); border-color: var(--accent); color: var(--accent);
}

/* ── CONFIG TOGGLE (Settings) ───────────────────────────── */
.cfg-toggle {
  width: 42px; height: 22px; border-radius: 11px;
  background: var(--border); position: relative; cursor: pointer;
  transition: background 0.2s; flex-shrink: 0;
}
.cfg-toggle.on { background: var(--accent); }
.cfg-toggle.on::after {
  content: ''; position: absolute; top: 3px; left: 22px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: left 0.2s;
}
.cfg-toggle:not(.on)::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: left 0.2s;
}

/* ── STOCK ALERT ─────────────────────────────────────────── */
.nav-badge-warn { background: var(--danger); color: #fff; }
.stock-low { color: var(--danger); font-weight: 600; }
.stock-ok  { color: var(--success); }
.stock-row-low { background: rgba(239,68,68,0.04) !important; }

/* ── DETAIL GRID ─────────────────────────────────────────── */
.detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.detail-item label { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; display: block; margin-bottom: 3px; }
.detail-item span  { font-size: 0.88rem; color: var(--text); }

/* ── SCROLLBAR in sidebar ────────────────────────────────── */
.sidebar-nav::-webkit-scrollbar { width: 3px; }

@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .fin-grid { grid-template-columns: repeat(3, 1fr); }
  .fin-expanded-inner { grid-template-columns: repeat(3, 1fr); }
  .fin-trigger-card { padding: 15px 18px; gap: 12px; }
  .split-layout { flex-direction: column !important; }
  .split-sidebar { border-left: none !important; border-top: 1px solid var(--border); padding-top: 20px; }
}
@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fin-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fin-expanded-inner { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fin-trigger-previews { display: none; }
  .fin-trigger-title { font-size: 0.85rem; }
  .fin-trigger-card { padding: 12px 14px; }
  .stat-card { padding: 12px 14px; }
  .stat-value { font-size: 1.5rem; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .fin-grid { grid-template-columns: 1fr; }
  .fin-expanded-inner { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .dashboard-main-grid { gap: 12px; }
  .card { padding: 14px; }
}

/* ── MODAL SPLIT-LAYOUT (SAMII-STYLE) ────────────────────── */
.split-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
.split-main {
  flex: 7;
  min-width: 0; /* flexbug fix */
}
.split-sidebar {
  flex: 3;
  min-width: 250px;
  border-left: 1px solid var(--border);
  padding-left: 30px;
  position: sticky;
  top: 0;
}

/* ── LIVE SUMMARY BOX ──────────────────────────────────────── */
.live-summary-box {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--radius-sm);
  padding: 15px;
  margin-top: -10px;
  margin-bottom: 20px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
}
.live-summary-box .summary-header {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 15px;
  letter-spacing: 0.05em;
  text-align: center;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  transition: color 0.2s ease;
}
.summary-row:hover {
  color: var(--text);
}
.summary-row span:last-child {
  font-family: monospace;
  font-size: 1rem;
}
.summary-row.highlight {
  font-weight: 600;
  color: var(--text);
}
.summary-row.highlight span:last-child {
  font-size: 1.15rem;
}

@media (max-width: 1200px) {
  .modal.order-split-modal {
    max-width: 95% !important;
  }
}

/* ── WHATSAPP CHAT INTERFACE ────────────────────────────── */
.wa-layout {
  display: flex;
  height: calc(100vh - 160px);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.wa-sidebar {
  width: 320px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--bg3);
}

.wa-sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.wa-chat-list {
  flex: 1;
  overflow-y: auto;
}

.wa-chat-item {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.wa-chat-item:hover { background: rgba(255,255,255,0.05); }
.wa-chat-item.active { background: var(--accent-dim); border-left: 3px solid var(--accent); }

.wa-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
  border: 1px solid var(--border-hover);
}

.wa-chat-info { flex: 1; min-width: 0; }
.wa-chat-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-chat-last { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wa-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: url('https://w0.peakpx.com/wallpaper/580/678/HD-wallpaper-whatsapp-dark-stark-mode-amoled.jpg');
  background-size: cover;
  position: relative;
}

.wa-main::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(13,13,13,0.85); z-index: 1;
}

.wa-main-header {
  padding: 12px 20px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  z-index: 2;
}

.wa-msg-container {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}

.wa-bubble {
  max-width: 75%;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.4;
  position: relative;
  word-wrap: break-word;
}

.wa-bubble-in {
  align-self: flex-start;
  background: var(--bg3);
  color: var(--text);
  border-bottom-left-radius: 2px;
  border: 1px solid var(--border);
}

.wa-bubble-out {
  align-self: flex-end;
  background: #056162;
  color: #fff;
  border-bottom-right-radius: 2px;
}

.wa-bubble-time {
  font-size: 0.65rem;
  opacity: 0.6;
  text-align: right;
  margin-top: 4px;
}

.wa-input-area {
  padding: 16px 20px;
  background: var(--bg2);
  display: flex; gap: 12px; align-items: center;
  z-index: 2;
  border-top: 1px solid var(--border);
}

.wa-ai-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 600;
  padding: 4px 10px; border-radius: 4px;
  background: var(--purple-dim); color: var(--purple);
  text-transform: uppercase;
}

.wa-ai-badge {
  background: var(--purple); color: #fff;
  padding: 1px 4px; border-radius: 3px; font-size: 0.6rem;
  margin-left: 5px;
}

/* ── BRANCH SELECTOR PREMIUM ─────────────────────────────── */
.branch-selector-btn {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.78rem; font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
#branch-selector-wrap .branch-selector-btn,
#topbar-branch-selector-wrap .branch-selector-btn {
  background: linear-gradient(135deg, rgba(198, 255, 0, 0.18), rgba(0, 229, 255, 0.10) 60%, rgba(10, 16, 28, 0.96));
  border-color: rgba(198, 255, 0, 0.45);
  color: #f1ffd6;
  box-shadow: 0 0 0 1px rgba(198, 255, 0, 0.08) inset, 0 8px 20px rgba(0,0,0,0.35);
}
#branch-selector-wrap .branch-selector-btn:hover,
#topbar-branch-selector-wrap .branch-selector-btn:hover {
  border-color: rgba(198, 255, 0, 0.75);
  color: #fbffef;
  box-shadow: 0 0 0 1px rgba(198, 255, 0, 0.16) inset, 0 0 18px rgba(198, 255, 0, 0.18);
}
#profiles-branch-switch-wrap .branch-selector-btn {
  background: linear-gradient(135deg, rgba(198, 255, 0, 0.16), rgba(72, 138, 255, 0.12));
  border-color: rgba(198, 255, 0, 0.5);
  color: #f6ffd9;
}
.branch-selector-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(198,255,0,0.15);
}
.branch-selector-btn.open {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(198,255,0,0.2);
}
.branch-selector-btn.open svg {
  transform: rotate(180deg);
}
.branch-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(198,255,0,0.08);
  z-index: 999;
  overflow: hidden;
  animation: branchDropIn 0.18s ease;
}
@keyframes branchDropIn {
  from { opacity:0; transform: translateY(-6px); }
  to   { opacity:1; transform: translateY(0); }
}
.branch-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: all 0.15s;
  border-left: 2px solid transparent;
}
.branch-item:hover {
  background: var(--bg3);
  color: var(--text);
  border-left-color: var(--cyan);
}
.branch-item.active {
  color: var(--accent);
  background: var(--accent-dim);
  border-left-color: var(--accent);
  font-weight: 600;
}
.branch-item .branch-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border); flex-shrink: 0;
  transition: background 0.15s;
}
.branch-item.active .branch-dot {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
.branch-item:hover .branch-dot { background: var(--cyan); }
.branch-dropdown-divider {
  border-top: 1px solid var(--border);
  margin: 4px 0;
}
.branch-manage-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: transparent;
  color: var(--text-dim); font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 2px solid transparent;
}
.branch-manage-btn:hover {
  background: var(--bg3);
  color: var(--accent);
  border-left-color: var(--accent);
}

/* ── UPGRADE BANNER ──────────────────────────────────────── */
.upgrade-banner {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  min-height: 60vh;
  padding: 40px 20px;
}
.upgrade-banner-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px 40px;
  max-width: 480px;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow), 0 0 60px rgba(198,255,0,0.05);
}
.upgrade-banner-card::before {
  content: '';
  position: absolute; top:0; left:0; right:0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--cyan), var(--magenta));
}
.upgrade-banner-icon {
  font-size: 3.5rem; margin-bottom: 20px;
  animation: floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.upgrade-banner h2 {
  font-size: 1.4rem; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
}
.upgrade-banner p {
  color: var(--text-muted); font-size: 0.9rem;
  line-height: 1.6; margin-bottom: 28px;
}
.upgrade-banner-badge {
  display: inline-block;
  background: rgba(198,255,0,0.1);
  border: 1px solid rgba(198,255,0,0.3);
  color: var(--accent);
  font-size: 0.72rem; font-weight: 700;
  padding: 4px 12px; border-radius: 99px;
  letter-spacing: 0.05em; text-transform: uppercase;
  margin-bottom: 20px;
}
.upgrade-btn-row {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* ── STATS / CHART CARDS ──────────────────────────────────── */
.stats-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 24px;
}
.stats-scope-toggle {
  display: flex; background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.stats-scope-btn {
  padding: 7px 16px; font-size: 0.8rem; font-weight: 500;
  background: transparent; color: var(--text-muted);
  border: none; cursor: pointer; transition: all 0.15s;
  border-right: 1px solid var(--border);
}
.stats-scope-btn:last-child { border-right: none; }
.stats-scope-btn.active {
  background: var(--accent-dim); color: var(--accent);
  font-weight: 600;
}
.chart-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: all 0.25s;
  position: relative; overflow: hidden;
}
.chart-card::before {
  content: '';
  position: absolute; top:0; left:0; right:0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.3;
}
.chart-card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(198,255,0,0.06);
  transform: translateY(-2px);
}
.chart-card-title {
  font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.chart-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-bottom: 20px;
}
.chart-grid-1 { margin-bottom: 20px; }
.stats-kpi-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 14px;
  margin-bottom: 24px;
}
.stats-kpi-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  transition: all 0.2s;
  position: relative; overflow: hidden;
}
.stats-kpi-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(198,255,0,0.1);
  transform: translateY(-3px);
}
.stats-kpi-icon { font-size: 1.4rem; margin-bottom: 8px; }
.stats-kpi-value {
  font-size: 1.7rem; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.stats-kpi-label {
  font-size: 0.72rem; color: var(--text-muted);
  margin-top: 6px; font-weight: 500;
}

/* Plan Limit Bar */
.plan-limit-bar-track {
  height: 6px; background: var(--bg3);
  border-radius: 99px; overflow: hidden;
  margin-top: 8px;
}
.plan-limit-bar-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  transition: width 0.5s ease;
}
.plan-limit-bar-fill.warn { background: linear-gradient(90deg, var(--warning), var(--danger)); }

@media (max-width: 768px) {
  .chart-grid-2  { grid-template-columns: 1fr; }
  .stats-kpi-row { grid-template-columns: repeat(2,1fr); }
}

/* Cookie consent toast */
#zx-cookie-consent {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 360px);
  background: rgba(15, 16, 20, 0.92);
  border: 1px solid rgba(198, 255, 0, 0.24);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  padding: 10px 12px;
  backdrop-filter: blur(10px);
}
.zx-cookie-consent__text {
  color: #d7dce3;
  font-size: 0.78rem;
  line-height: 1.35;
  flex: 1;
}
.zx-cookie-consent__btn {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.74rem;
  font-weight: 800;
}
.zx-cookie-consent__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════
   INFORME TÉCNICO MODAL — Sistema de diseño refinado
   Principio: elevación de superficies escalonada para contraste
   Paleta: #161616 → #1e1e1e → #252525 (modal → card → input)
   Acento lime solo en acción primaria y foco — resto neutro
════════════════════════════════════════════════════════════════ */

/* ── Superficie del modal ── */
.it-modal-wrap {
  background: #161616;
  border: 1px solid #282828;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
}

/* ── Header ── */
.it-header {
  background: #1a1a1a;
  border-bottom: 1px solid #252525;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.it-header-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  background: rgba(198,255,0,0.1);
  border: 1px solid rgba(198,255,0,0.2);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.it-header-meta { min-width: 0; }
.it-header-label {
  font-size: 0.6rem; color: #555;
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
  margin-bottom: 2px;
}
.it-header-title {
  font-size: 0.97rem; font-weight: 700; color: #f0f0f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Body ── */
.it-body {
  padding: 18px 20px;
  overflow-y: auto;
  max-height: calc(100dvh - 200px);
  -webkit-overflow-scrolling: touch;
}

/* ── Info grid (Cliente + Dispositivo) ── */
.it-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.it-card {
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 13px 14px;
  position: relative;
  overflow: hidden;
}
.it-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
.it-card--client::before { background: linear-gradient(90deg, rgba(198,255,0,0.5), transparent); }
.it-card--device::before { background: linear-gradient(90deg, rgba(0,229,255,0.5), transparent); }
.it-card-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.6rem; color: #555;
  text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700;
  margin-bottom: 5px;
}
.it-card-value {
  font-weight: 700; font-size: 0.88rem; color: #e8e8e8;
  margin-bottom: 2px;
}

/* ══════════════════════════════════════════════════════════════
   SETTINGS PAGE — cfg-page design system
   Matches the informe-técnico / modal elevated dark aesthetic
   ══════════════════════════════════════════════════════════════ */

/* ── CSS variable overrides for elevated surface hierarchy */
.cfg-page {
  --bg2: #161616;
  --bg3: #1e1e1e;
  --border: #252525;
  --border-hover: #333;
  --text-muted: #666;
  --radius-sm: 8px;
}

/* ── Tab bar */
/* ── Settings — Apple Sidebar Layout ── */
.cfg-settings-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 980px;
  margin: 0 auto;
}

/* Sidebar */
.cfg-sidebar {
  width: 210px;
  flex-shrink: 0;
  background: #0d0d0d;
  border-radius: 14px;
  padding: 10px 8px 14px;
  border: 1px solid rgba(255,255,255,0.07);
  position: sticky;
  top: 16px;
}

.cfg-sidebar-group {
  margin-bottom: 2px;
}
.cfg-sidebar-group + .cfg-sidebar-group {
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 4px;
  padding-top: 4px;
}

.cfg-sidebar-group-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  padding: 8px 10px 4px;
}

.cfg-sidebar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,0.52);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
  text-align: left;
  line-height: 1.3;
}
.cfg-sidebar-item:hover:not(.active) {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.82);
}
.cfg-sidebar-item.active {
  background: rgba(198,255,0,0.08);
  color: #C6FF00;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #C6FF00;
}
.cfg-sidebar-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* Content area */
.cfg-content-area {
  flex: 1;
  min-width: 0;
}

/* Tab content fade-in */
@keyframes cfg-btn-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cfg-tab-content-active {
  animation: cfg-btn-in 0.2s cubic-bezier(0.4,0,0.2,1) both;
}

/* Mobile: stack sidebar on top */
@media (max-width: 640px) {
  .cfg-settings-layout { flex-direction: column; }
  .cfg-sidebar { width: 100%; position: static; display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; }
  .cfg-sidebar-group { display: contents; }
  .cfg-sidebar-group-label { display: none; }
  .cfg-sidebar-group + .cfg-sidebar-group { border-top: none; margin-top: 0; padding-top: 0; }
  .cfg-sidebar-item { width: auto; padding: 6px 10px; font-size: 12px; border-radius: 8px; }
  .cfg-sidebar-item.active { box-shadow: none; background: rgba(198,255,0,0.12); }
}

/* ── Cards */
.cfg-page .card {
  background: #161616 !important;
  border: 1px solid #242424 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 14px !important;
  position: relative;
  overflow: hidden;
}
.cfg-page .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(198,255,0,0.2), transparent);
}

/* ── Card headings */
.cfg-page .card h3 {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #e0e0e0 !important;
  letter-spacing: 0.03em;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #252525 !important;
  margin: 0 0 16px !important;
}
.cfg-page .card h4 {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #a0a0a0 !important;
  margin: 14px 0 8px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Muted descriptive text inside settings cards */
.cfg-page p,
.cfg-page .text-muted,
.cfg-page [style*="color:var(--text-muted)"] {
  color: #707070 !important;
}
/* Regular text / labels that aren't form-labels */
.cfg-page label:not(.form-label):not(.btn) {
  color: #8a8a8a;
}

/* ── Form labels */
.cfg-page .form-label {
  color: #8a8a8a !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
/* Required asterisk highlight */
.cfg-page .form-label .req,
.cfg-page .form-label > span[style*="color:var(--danger)"] {
  color: #ff5e5e !important;
}
/* Subtext / hint below labels */
.cfg-page .form-label + small,
.cfg-page .form-label ~ .form-hint {
  color: #666 !important;
  font-size: 0.75rem;
}

/* ── Inputs / selects / textareas */
.cfg-page .form-control {
  background: #242424 !important;
  border: 1px solid #303030 !important;
  border-radius: 8px !important;
  color: #e0e0e0 !important;
  font-size: 0.88rem !important;
}
.cfg-page .form-control:focus {
  border-color: rgba(198,255,0,0.45) !important;
  box-shadow: 0 0 0 3px rgba(198,255,0,0.07) !important;
  outline: none !important;
}
.cfg-page .form-control:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* ── Buttons — Primary (lime) */
.cfg-page .btn.btn-primary {
  background: #C6FF00 !important;
  border: none !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: background 0.15s, box-shadow 0.15s !important;
}
.cfg-page .btn.btn-primary:hover {
  background: #b8ef00 !important;
  box-shadow: 0 0 14px rgba(198,255,0,0.22) !important;
}

/* ── Buttons — Secondary */
.cfg-page .btn.btn-secondary {
  background: #1e1e1e !important;
  border: 1px solid #2e2e2e !important;
  color: #999 !important;
  border-radius: 8px !important;
  transition: border-color 0.15s, color 0.15s !important;
}
.cfg-page .btn.btn-secondary:hover {
  border-color: #444 !important;
  color: #d0d0d0 !important;
}

/* ── Buttons — Danger */
.cfg-page .btn.btn-danger {
  background: transparent !important;
  border: 1px solid rgba(239,68,68,0.35) !important;
  color: #ef4444 !important;
  border-radius: 8px !important;
  transition: background 0.15s !important;
}
.cfg-page .btn.btn-danger:hover {
  background: rgba(239,68,68,0.08) !important;
  border-color: rgba(239,68,68,0.6) !important;
}

/* ── Buttons — Ghost */
.cfg-page .btn.btn-ghost {
  color: #666 !important;
  border-radius: 8px !important;
}
.cfg-page .btn.btn-ghost:hover {
  color: #ccc !important;
  background: rgba(255,255,255,0.05) !important;
}

/* ── Inner bg sections (via CSS variable override) */
.cfg-page [style*="var(--bg3)"] {
  background: #1e1e1e !important;
}

/* ── Logo preview / file upload area */
.cfg-page #logo-preview-wrap {
  background: #1c1c1c !important;
  border-color: #2e2e2e !important;
}

/* ── Status color swatches & color inputs */
.cfg-page input[type="color"] {
  border: 1px solid #303030;
  border-radius: 6px;
  background: #1e1e1e;
  cursor: pointer;
  padding: 2px;
}

/* ── Small helper text / sub-paragraphs */
.cfg-page .card > p {
  color: #555 !important;
  font-size: 0.82rem !important;
  margin-bottom: 18px !important;
}

/* ── Section dividers */
.cfg-page hr,
.cfg-page .form-divider {
  border-color: #222 !important;
}

/* ── Toggle switch — enhanced for the design system */
.cfg-page .cfg-toggle {
  border: 1px solid #2a2a2a;
}

/* ── WA / AI status indicator boxes */
.cfg-page [style*="background:rgba"] {
  border-radius: 8px;
}


/* ────────────────────────────────────────────────────────────────
   COLLAPSIBLE SETTINGS CARDS
   ──────────────────────────────────────────────────────────────── */
.cfg-collapsible-card {
  overflow: hidden;
}
.cfg-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 0 0 14px;
  border-bottom: 1px solid #222;
  margin-bottom: 0;
  gap: 12px;
}
.cfg-col-header:hover .cfg-col-title {
  color: #fff !important;
}
.cfg-col-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #d0d0d0;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.cfg-col-sub {
  display: block;
  font-size: 0.76rem;
  color: #555;
  margin-top: 3px;
  font-weight: 400;
}
.cfg-col-arrow {
  font-size: 1.1rem;
  color: #555;
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), color 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.cfg-col-header:hover .cfg-col-arrow {
  color: #C6FF00;
}

/* Body — collapsed by default */
.cfg-col-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1),
              opacity 0.2s ease,
              padding-top 0.25s ease;
}

/* Expanded state */
.cfg-collapsible-card.is-open .cfg-col-body {
  max-height: 2000px;
  opacity: 1;
  padding-top: 16px;
}
.cfg-collapsible-card.is-open .cfg-col-arrow {
  transform: rotate(180deg);
  color: #C6FF00;
}
.cfg-collapsible-card.is-open .cfg-col-header {
  border-bottom-color: #252525;
}

/* First card in each tab opens by default */
.cfg-collapsible-card.is-open-default .cfg-col-body {
  max-height: 2000px;
  opacity: 1;
  padding-top: 16px;
}
.cfg-collapsible-card.is-open-default .cfg-col-arrow {
  transform: rotate(180deg);
  color: #C6FF00;
}

/* ═══════════════════════════════════════════════════════════════
   MÓDULO CAJA — POS / Facturación
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout 3 columnas ── */
.cash-layout {
  display: grid;
  /* El área de trabajo (órdenes/servicios/inventario) es la que necesita
     espacio para navegar; el ticket es un recibo — ancho fijo tipo POS. */
  grid-template-columns: minmax(340px, 1fr) 420px 270px;
  gap: 12px;
  height: calc(100vh - 110px);
  overflow: hidden;
}
@media (max-width: 1280px) {
  .cash-layout { grid-template-columns: minmax(300px, 1fr) 360px 240px; }
}
.cash-partial-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px; padding: 2px 8px; border-radius: 10px;
  font-size: 0.68rem; font-weight: 700;
  background: rgba(198,255,0,0.08); border: 1px solid rgba(198,255,0,0.3);
  color: var(--accent); width: fit-content;
}
.cash-left, .cash-center, .cash-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.cash-panel {
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cash-left .cash-panel, .cash-right .cash-panel { flex: 1; overflow: hidden; }
.cash-center .cash-panel { flex: 1; }

/* ── Tabs de selección ── */
.cash-panel-tabs {
  display: flex;
  background: var(--bg3);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 6px 8px 0;
  gap: 4px;
  flex-shrink: 0;
}
.cash-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 7px 12px;
  border-radius: 8px 8px 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background var(--transition), color var(--transition);
}
.cash-tab:hover { background: var(--bg2); color: var(--text); }
.cash-tab.active { background: var(--bg2); color: var(--accent); }
.cash-tab-badge {
  background: var(--accent);
  color: #000;
  border-radius: 100px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 700;
}
.cash-tab-content { display: none; flex: 1; overflow-y: auto; padding: 8px; }
.cash-tab-content.active { display: flex; flex-direction: column; gap: 6px; }

/* ── Órdenes pendientes ── */
.cash-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg3);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  border: 1px solid transparent;
}
.cash-order-row:hover {
  background: rgba(198,255,0,0.06);
  border-color: rgba(198,255,0,0.2);
  transform: translateX(2px);
}
.cash-order-info { display: flex; flex-direction: column; gap: 2px; }
.cash-order-code { font-size: 0.78rem; font-weight: 700; color: var(--accent); }
.cash-order-client { font-size: 0.85rem; font-weight: 500; color: var(--text); }
.cash-order-device { font-size: 0.72rem; color: var(--text-muted); }
.cash-order-amount { font-weight: 700; font-size: 0.9rem; color: var(--text); white-space: nowrap; }

/* ── Búsqueda inventario ── */
.cash-search-wrap { padding: 8px 4px 4px; }
.cash-inv-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.cash-inv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg3);
  cursor: pointer;
  transition: background var(--transition);
}
.cash-inv-row:hover { background: rgba(198,255,0,0.06); }
.cash-inv-info { display: flex; flex-direction: column; gap: 1px; }
.cash-inv-name { font-size: 0.83rem; font-weight: 500; color: var(--text); }
.cash-inv-brand { font-size: 0.7rem; color: var(--text-muted); }
.cash-inv-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cash-inv-price { font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.cash-inv-stock { font-size: 0.7rem; color: var(--success); }
.cash-inv-nostock { color: var(--danger) !important; }
.cash-inv-badge {
  font-size: 0.68rem; background: var(--success-dim); color: var(--success);
  border-radius: 4px; padding: 1px 5px; font-weight: 700;
}

/* ── Ítem libre ── */
.cash-free-form { display: flex; flex-direction: column; gap: 8px; padding: 8px 4px; }

/* ── Ticket central ── */
.cash-ticket-panel { height: 100%; }
.cash-ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.cash-ticket-title { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.cash-session-info { font-size: 0.72rem; color: var(--text-muted); }
.cash-items { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.cash-item-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg3);
  transition: background var(--transition);
}
.cash-item-row:hover { background: #1a1a1a; }
.cash-item-info { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cash-item-desc { font-size: 0.83rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cash-item-tag {
  font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; white-space: nowrap;
  background: var(--cyan-dim); color: var(--cyan); font-weight: 600;
}
.cash-item-tag-inv { background: var(--magenta-dim); color: var(--magenta); }
.cash-item-controls { display: flex; align-items: center; gap: 5px; }
.cash-qty-input { width: 52px; text-align: center; padding: 4px 6px; font-size: 0.82rem; }
.cash-price-input { width: 76px; text-align: right; padding: 4px 6px; font-size: 0.82rem; }
.cash-item-x { color: var(--text-dim); font-size: 0.75rem; }
.cash-item-subtotal { font-size: 0.82rem; font-weight: 600; color: var(--accent); min-width: 80px; text-align: right; }
.cash-item-remove {
  background: none; border: none; cursor: pointer; color: var(--text-dim);
  padding: 3px; border-radius: 4px; line-height: 0;
  transition: color var(--transition);
}
.cash-item-remove:hover { color: var(--danger); }

/* ── Totales del ticket ── */
.cash-ticket-footer {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.cash-totals { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.cash-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.83rem;
  color: var(--text-muted);
}
.cash-total-final { color: var(--text) !important; font-size: 1rem !important; font-weight: 700; margin-top: 4px; }
.cash-total-final span:last-child { color: var(--accent); font-size: 1.2rem; }
.cash-discount-row span:last-child { color: var(--magenta); }
.cash-ticket-actions { display: flex; align-items: center; gap: 8px; }
.cash-discount-wrap { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-muted); margin-right: auto; }
.cash-cobrar-btn { min-width: 150px; font-weight: 700; }

/* ── Panel derecho ── */
.cash-status-panel {
  flex-shrink: 0;
  height: auto;
  padding: 14px;
}
.cash-status-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--success);
  margin-bottom: 12px;
}
.cash-status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: pulse 2s infinite;
}
.cash-status-actions { display: flex; flex-direction: column; gap: 6px; }
.cash-action-btn { width: 100%; justify-content: flex-start; gap: 8px; font-size: 0.8rem; padding: 8px 12px; }
.cash-close-btn { border-color: rgba(239,68,68,0.3) !important; color: var(--danger) !important; }
.cash-close-btn:hover { background: var(--danger-dim) !important; }
.cash-sales-panel { flex: 1; overflow: hidden; }
.cash-panel-title { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 14px 6px; flex-shrink: 0; }
.cash-recent-list { flex: 1; overflow-y: auto; padding: 4px 8px 8px; }
.cash-recent-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 7px 6px; border-radius: 6px; gap: 6px;
  transition: background var(--transition); cursor: default;
}
.cash-recent-row:hover { background: var(--bg3); }
.cash-recent-code { display: block; font-size: 0.7rem; font-weight: 700; color: var(--accent); }
.cash-recent-client { display: block; font-size: 0.78rem; color: var(--text-muted); }
.cash-recent-total { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; }

/* ── Pantalla cerrada ── */
.cash-closed-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh;
}
.cash-closed-card {
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 48px 56px;
  text-align: center;
  max-width: 400px;
  width: 100%;
}
.cash-closed-icon { color: var(--accent); margin-bottom: 18px; }
.cash-closed-title { font-size: 1.4rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cash-closed-sub { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 28px; }
.cash-open-btn { width: 100%; padding: 13px; font-size: 0.95rem; font-weight: 700; gap: 8px; }
.cash-pending-notice {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2);
  border-radius: 8px; padding: 8px 14px; margin-bottom: 16px;
  font-size: 0.82rem; color: var(--warning);
}

/* ── Modal de cobro ── */
.cash-pay-modal { display: flex; flex-direction: column; gap: 14px; }
.cash-modal-section {
  background: var(--bg3);
  border-radius: 10px;
  padding: 12px 14px;
}
.cash-section-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.cash-toggle-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.82rem; color: var(--text); }
.cash-client-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cash-inv-type-row { display: flex; gap: 6px; flex-wrap: wrap; }
.cash-inv-type-btn {
  background: var(--bg2); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted); border-radius: 8px; padding: 6px 14px;
  cursor: pointer; font-size: 0.82rem; font-weight: 500; transition: all var(--transition);
}
.cash-inv-type-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.cash-pay-row {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cash-pay-row:last-child { border-bottom: none; }
.cash-pay-method { flex: 0 0 160px; }
.cash-pay-amount { flex: 0 0 110px; }
.cash-pay-ref { flex: 0 0 110px; }
.cash-pay-remove { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 1.1rem; padding: 2px 6px; }
.cash-pay-extra { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.cash-pay-summary {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.82rem; display: flex; gap: 12px; align-items: center;
}
.cash-arqueo-header {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 0 8px; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 8px;
}
.cash-arqueo-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  align-items: center; gap: 8px; padding: 5px 0; font-size: 0.85rem;
}
.cash-result-block { text-align: center; padding: 16px 0; }
.cash-result-code { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px; }
.cash-result-total { font-size: 2.2rem; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; margin-bottom: 18px; }
.cash-cae-box {
  background: var(--bg3); border: 1px solid rgba(198,255,0,0.15);
  border-radius: 10px; padding: 14px 18px; text-align: left;
}
.cash-cae-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.cash-cae-type { font-size: 0.78rem; color: var(--text-muted); }
.cash-cae-num { font-size: 1rem; font-weight: 700; color: var(--text); margin: 4px 0; }
.cash-cae-code { font-family: monospace; font-size: 0.88rem; color: var(--accent); font-weight: 700; }
.cash-cae-vto { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }

/* ── Vacíos y small ── */
.cash-empty { display: flex; align-items: center; justify-content: center; height: 100%; padding: 20px; }
.cash-empty p { color: var(--text-dim); font-size: 0.83rem; text-align: center; }
.cash-ticket-empty { min-height: 80px; }
.cash-empty-sm { color: var(--text-dim); font-size: 0.78rem; padding: 8px 6px; }

/* ════════════════════════════════════════════════════════════
   ZX LANG SWITCHER — pill button group, used on all pages
   ════════════════════════════════════════════════════════════ */
.zx-lang-switcher {
  display: inline-flex;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.zx-ls-btn {
  background: none;
  border: 1px solid transparent;
  color: rgba(255,255,255,0.45);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1;
}
.zx-ls-btn:hover {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.07);
}
.zx-ls-btn.active {
  background: rgba(198,255,0,0.13);
  color: #C6FF00;
  border-color: rgba(198,255,0,0.28);
}

/* ════════════════════════════════════════════════════════════
   ZX PERF TOGGLE WIDGET — lime green, shown on login/register
   ════════════════════════════════════════════════════════════ */
.zx-perf-widget {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(198,255,0,0.04);
  border: 1px solid rgba(198,255,0,0.14);
  border-radius: 12px;
  margin-top: 14px;
  cursor: default;
  transition: background 0.2s, border-color 0.2s;
}
.zx-perf-widget:hover {
  background: rgba(198,255,0,0.07);
  border-color: rgba(198,255,0,0.25);
}
.zpw-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1;
}
.zpw-text {
  flex: 1;
  min-width: 0;
}
.zpw-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #C6FF00;
  line-height: 1.2;
}
.zpw-hint {
  display: block;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.3;
  margin-top: 2px;
}
/* iOS-style toggle */
.zpw-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.zpw-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.zpw-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}
.zpw-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), background 0.2s;
}
.zpw-toggle input:checked + .zpw-slider {
  background: #A3E635;
  border-color: #A3E635;
  box-shadow: 0 0 12px rgba(163,230,53,0.45);
}
.zpw-toggle input:checked + .zpw-slider::before {
  transform: translateX(18px) translateY(-50%);
  background: #000;
}

/* ════════════════════════════════════════════════════════════
   PERFORMANCE LITE MODE — flat render, zero GPU overhead
   ════════════════════════════════════════════════════════════ */
html[data-perf="lite"] {
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.12);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.18);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.22);
}
/* Snap entrance animations to final state, kill transitions heavy */
html[data-perf="lite"] *,
html[data-perf="lite"] *::before,
html[data-perf="lite"] *::after {
  animation-duration: .01ms !important;
  animation-delay: .01ms !important;
  transition-duration: 60ms !important;
  will-change: auto !important;
}
/* Kill GPU-heavy blur filters on pseudo-elements */
html[data-perf="lite"] *::before,
html[data-perf="lite"] *::after {
  filter: none !important;
}
/* Kill ALL backdrop-filter (biggest GPU consumer) */
html[data-perf="lite"] *,
html[data-perf="lite"] [class*="glass"],
html[data-perf="lite"] [style*="backdrop-filter"],
html[data-perf="lite"] .modal-overlay,
html[data-perf="lite"] .drawer-overlay,
html[data-perf="lite"] .inv-sidebar-panel,
html[data-perf="lite"] .zx-cookie-consent {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Hide heavy animated background layers */
html[data-perf="lite"] .aurora,
html[data-perf="lite"] #bg-canvas,
html[data-perf="lite"] .noise,
html[data-perf="lite"] .particles-wrap {
  display: none !important;
}
html[data-perf="lite"] .grid-bg {
  opacity: 0.3 !important;
}
/* Kill kpi-card glow pseudo-element (radial-gradient + blur) */
html[data-perf="lite"] .kpi-card::before {
  display: none !important;
}
/* Flat kpi-card background (no complex dark gradient) */
html[data-perf="lite"] .kpi-card {
  background: rgba(14,14,16,0.98) !important;
}
/* No hover transforms (eliminates GPU compositing layer) */
html[data-perf="lite"] .kpi-card:hover,
html[data-perf="lite"] .kpi-card:active,
html[data-perf="lite"] .card:hover,
html[data-perf="lite"] .stats-kpi-card:hover {
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
/* Flatten heavy inline box-shadows */
html[data-perf="lite"] [style*="box-shadow: 0 0 30px"],
html[data-perf="lite"] [style*="box-shadow: 0 0 35px"],
html[data-perf="lite"] [style*="box-shadow: 0 40px"] {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* ── Mobile ── */
@media (max-width: 1024px) {
  .cash-layout {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }
  .cash-left, .cash-center, .cash-right { height: auto; overflow: visible; }
  .cash-left .cash-panel { min-height: 260px; }
  .cash-center .cash-panel { min-height: 320px; }
  .cash-right { flex-direction: row; flex-wrap: wrap; }
  .cash-status-panel { flex: 0 0 100%; }
  .cash-sales-panel { flex: 1; min-height: 180px; }
  .cash-ticket-footer { position: sticky; bottom: 0; background: var(--bg2); z-index: 10; }
  .cash-item-row { grid-template-columns: 1fr; gap: 6px; }
  .cash-item-controls { flex-wrap: wrap; }
}

/* =========================================
   INVENTORY NEXT-GEN UX (Era del Scroll)
   ========================================= */

/* Chips Filter Bar */
.inv-chips-bar {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 20px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.inv-chips-bar::-webkit-scrollbar { display: none; }
.inv-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 6px 14px; font-size: 0.8rem;
  color: var(--text-muted); cursor: pointer;
  white-space: nowrap; transition: 0.2s ease;
}
.inv-chip:hover { border-color: rgba(255,255,255,0.2); color: #fff; }
.inv-chip.active {
  background: var(--accent);
  color: #000; font-weight: 600;
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(198,255,0,0.2);
}

/* Toggle Grid/List buttons */
.inv-view-toggle { display: flex; gap: 4px; background: rgba(0,0,0,0.3); padding: 4px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); }
.inv-view-toggle button {
  background: transparent; border: none; padding: 4px 6px; border-radius: 4px;
  color: var(--text-dim); cursor: pointer; transition: 0.2s ease;
}
.inv-view-toggle button.active { background: rgba(255,255,255,0.1); color: var(--accent); }

/* Layout Grid */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; width: 100%;
}

/* Product Card */
.inv-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer; position: relative;
  overflow: hidden;
}
.inv-card:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* Low stock — soft orange backlight */
.inv-card--low {
  border-color: rgba(251, 146, 60, 0.35);
  background: rgba(251, 146, 60, 0.06);
  box-shadow: 0 0 18px rgba(251, 146, 60, 0.12), inset 0 0 30px rgba(251, 146, 60, 0.05);
}
.inv-card--low:hover {
  border-color: rgba(251, 146, 60, 0.55);
  box-shadow: 0 6px 24px rgba(251, 146, 60, 0.22), inset 0 0 30px rgba(251, 146, 60, 0.08);
}

/* Out of stock — soft red backlight */
.inv-card--out {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.06);
  box-shadow: 0 0 18px rgba(248, 113, 113, 0.14), inset 0 0 30px rgba(248, 113, 113, 0.06);
}
.inv-card--out:hover {
  border-color: rgba(248, 113, 113, 0.55);
  box-shadow: 0 6px 24px rgba(248, 113, 113, 0.25), inset 0 0 30px rgba(248, 113, 113, 0.10);
}
.inv-card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.inv-card-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.inv-card-stock {
  padding: 4px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 700;
}
.inv-card-stock.ok { background: rgba(0,255,0,0.1); color: #4ade80; }
.inv-card-stock.low { background: rgba(255,255,0,0.1); color: #facc15; }
.inv-card-stock.out { background: rgba(255,0,0,0.1); color: #f87171; box-shadow: 0 0 8px rgba(248,113,113,0.3); }

.inv-card-body { flex: 1; }
.inv-card-title { font-size: 1.05rem; font-weight: 600; color: #fff; margin-bottom: 4px; line-height: 1.2; word-break: break-word; }
.inv-card-sku { font-size: 0.7rem; color: var(--text-dim); font-family: monospace; letter-spacing: 1px; }

.inv-card-footer {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px dashed rgba(255,255,255,0.08); padding-top: 12px;
}
.inv-price-row { display: flex; justify-content: space-between; font-size: 0.85rem; }
.inv-price-row .label { color: var(--text-muted); }
.inv-price-row .val { color: #fff; font-weight: 500; }
.inv-price-row .val.sell { color: var(--accent); font-size: 0.95rem; font-weight: 700; }

/* ── Inventory Label select — card footer button ─────────── */
.inv-card-label-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; margin: 0 -4px -4px;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-radius: 0 0 10px 10px;
  cursor: pointer; font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.02);
  transition: all 0.18s ease;
  user-select: none;
}
.inv-card-label-btn:hover {
  background: rgba(124,58,237,0.08);
  color: #c4b5fd;
  border-top-color: rgba(124,58,237,0.2);
}
.inv-card-label-btn.active {
  background: rgba(124,58,237,0.15);
  color: #a78bfa;
  border-top-color: rgba(124,58,237,0.35);
}
.inv-card-label-check {
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
  transition: all 0.15s ease;
}
.inv-card-label-btn.active .inv-card-label-check {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.inv-card-label-btn:not(.active) .inv-card-label-check { color: transparent; }

/* Table view label button */
.inv-tbl-label-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; padding: 5px 7px;
  cursor: pointer; color: var(--text-muted);
  transition: all 0.15s ease; display: flex; align-items: center;
}
.inv-tbl-label-btn:hover { background: rgba(124,58,237,0.12); border-color: rgba(124,58,237,0.4); color: #c4b5fd; }
.inv-tbl-label-btn.active { background: rgba(124,58,237,0.2); border-color: rgba(124,58,237,0.6); color: #a78bfa; }

/* Selected card/row highlight */
.inv-card--selected {
  border-color: rgba(124,58,237,0.5) !important;
  box-shadow: 0 0 0 1px rgba(124,58,237,0.25), 0 4px 16px rgba(124,58,237,0.15) !important;
}
.inv-row--selected { background: rgba(124,58,237,0.07) !important; }

/* ── Floating label action bar ───────────────────────────── */
.inv-label-bar {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--bg-card); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 10px 18px;
  display: flex; align-items: center; gap: 14px;
  z-index: 1000; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  backdrop-filter: blur(16px);
  animation: slideUpBar 0.25s cubic-bezier(0.2,0.8,0.2,1);
  white-space: nowrap;
}
@keyframes slideUpBar {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.inv-label-bar-count {
  font-size: 0.83rem; font-weight: 500; color: var(--text-muted);
}

/* ── CSV Drop Zone ───────────────────────────────────────── */
.csv-drop-zone {
  border: 2px dashed rgba(255,255,255,0.12);
  border-radius: 12px; padding: 36px 24px;
  text-align: center; cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(255,255,255,0.02);
}
.csv-drop-zone:hover, .csv-drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(124,58,237,0.06);
}
.csv-drop-zone.drag-over { transform: scale(1.01); }

/* Skeleton Loading Pulse effect */
.skeleton-card {
  background: rgba(255,255,255,0.02); border-radius: 12px;
  height: 180px; position: relative; overflow: hidden;
}
.skeleton-card::after {
  content: ""; position: absolute; top:0; left:0; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: skel-pulse 1.5s infinite;
}
@keyframes skel-pulse {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Off-Canvas Drawer styles */
.drawer-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.drawer-right {
  position: absolute; top: 0; right: -100%; width: 450px; height: 100vh; max-width: 100vw;
  background: var(--bg2); border-left: 1px solid rgba(255,255,255,0.05);
  box-shadow: -10px 0 30px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  transition: right 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.drawer-overlay.open .drawer-right { right: 0; }

.drawer-header {
  padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,0.01);
}
.drawer-title { font-size: 1.1rem; font-weight: 600; color: #fff; }
.drawer-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 4px; border-radius: 6px; transition: 0.2s;
}
.drawer-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

.drawer-body {
  padding: 24px; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 16px;
}
.drawer-footer {
  padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.05);
  display: flex; justify-content: flex-end; gap: 10px; background: rgba(0,0,0,0.2);
}


/* ══════════════════════════════════════════════════════
   INVENTORY LAYOUT
══════════════════════════════════════════════════════ */
.inv-layout-shell {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 10px;
  min-height: calc(100vh - 160px);
}

/* ───────────────────────────────────────────────────────
   SIDEBAR — Apple Finder aesthetic
   Depth: backdrop-blur + semi-transparent bg layering
──────────────────────────────────────────────────────── */
.inv-sidebar-panel {
  width: 228px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
  align-self: flex-start;
  height: calc(100vh - 130px);
  overflow-y: auto;
  overflow-x: hidden;

  /* Glass-panel effect */
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);

  /* Separator: hairline + gradient accent fade */
  border-right: 1px solid var(--border);
  position: relative;  /* needed for ::after */
  padding: 20px 8px 40px;

  /* Scrollbar — nearly invisible */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.05) transparent;
}
.inv-sidebar-panel::-webkit-scrollbar { width: 3px; }
.inv-sidebar-panel::-webkit-scrollbar-track { background: transparent; }
.inv-sidebar-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 99px; }

/* Accent gradient on top-right border — signature Apple detail */
.inv-sidebar-panel::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px;
  height: 45%;
  background: linear-gradient(to bottom, rgba(198,255,0,0.18), transparent);
  pointer-events: none;
}

/* Content zone */
.inv-content-zone {
  flex: 1;
  min-width: 0;
  padding-left: 24px;
}

/* ───────────────────────────────────────────────────────
   TREE ROOT
──────────────────────────────────────────────────────── */
.inv-tree-root {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* Section label — "EXPLORAR INVENTARIO" — integrated dark dashboard style */
.inv-tree-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 14px;
  margin-bottom: 6px;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  /* Lime accent text — brand identity without overwhelming the panel */
  color: var(--accent, #C6FF00);
  opacity: 0.85;
  /* Subtle separator below */
  border-bottom: 1px solid rgba(198, 255, 0, 0.12);
  /* NO background — integrates with the panel */
  background: none;
  text-shadow: 0 0 10px rgba(198, 255, 0, 0.2);
  position: relative;
}
/* Leading accent bar — slim, brand signature */
.inv-tree-header::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--accent, #C6FF00);
  box-shadow: 0 0 6px rgba(198, 255, 0, 0.5);
  flex-shrink: 0;
}

/* ───────────────────────────────────────────────────────
   TREE NODES — universal base
   - transition: cubic-bezier for that springy Apple feel
──────────────────────────────────────────────────────── */
.inv-tree-all,
.inv-tree-device,
.inv-tree-cat,
.inv-tree-brand,
.inv-tree-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 12px;
  border-radius: 7px;
  margin-bottom: 1px;
  cursor: pointer;
  user-select: none;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.42);
  transition: background 0.18s cubic-bezier(0.2,0.8,0.2,1),
              color 0.15s ease,
              transform 0.12s ease;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover */
.inv-tree-all:hover,
.inv-tree-device:hover,
.inv-tree-cat:hover,
.inv-tree-brand:hover,
.inv-tree-sub:hover {
  background: rgba(255,255,255,0.055);
  color: rgba(255,255,255,0.78);
}

/* Active pill — white bg like Apple's sidebar selection */
.inv-tree-all.active,
.inv-tree-device.active,
.inv-tree-cat.active,
.inv-tree-brand.active,
.inv-tree-sub.active {
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-weight: 600;
}

/* Accent left bar on active — Finder detail */
.inv-tree-all.active::before,
.inv-tree-device.active::before,
.inv-tree-cat.active::before,
.inv-tree-brand.active::before,
.inv-tree-sub.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 2.5px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(198,255,0,0.4);
}

/* ── Per-level visual hierarchy ──────────────────── */
.inv-tree-all {
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  margin-bottom: 10px;
  padding-left: 12px;
}

.inv-tree-device {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  margin-bottom: 1px;
}

.inv-tree-cat {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255,255,255,0.46);
  padding-left: 26px;
  /* Connecting indent line */
  border-left: 1px solid rgba(255,255,255,0.07);
  margin-left: 18px;
  border-radius: 0 7px 7px 0;
}

.inv-tree-brand {
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255,255,255,0.36);
  padding-left: 22px;
  border-left: 1px solid rgba(255,255,255,0.05);
  margin-left: 32px;
  border-radius: 0 6px 6px 0;
}

.inv-tree-sub {
  font-size: 0.74rem;
  font-weight: 400;
  color: rgba(255,255,255,0.26);
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,0.03);
  margin-left: 44px;
  border-radius: 0 5px 5px 0;
  letter-spacing: 0.01em;
}

/* Active overrides for indented items */
.inv-tree-cat.active, .inv-tree-brand.active, .inv-tree-sub.active {
  border-left-color: transparent;
  margin-left: 0;
  padding-left: calc(26px + 18px); /* keep visual position */
}
.inv-tree-brand.active { padding-left: calc(22px + 32px); }
.inv-tree-sub.active   { padding-left: calc(18px + 44px); }

/* ── Caret ───────────────────────────────────────── */
.tree-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.42rem;
  opacity: 0.28;
  flex-shrink: 0;
  width: 10px;
  transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.2,0.8,0.2,1);
}
.active > .tree-caret { opacity: 0.7; }

/* ── SVG icon ────────────────────────────────────── */
.tree-icon {
  opacity: 0.45;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  transition: opacity 0.15s ease;
}
.inv-tree-all:hover .tree-icon,
.inv-tree-device:hover .tree-icon { opacity: 0.7; }
.active .tree-icon { opacity: 0.85; }

/* Label text */
.tree-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

/* Sub-level bullet */
.tree-bullet {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   LOW STOCK TABLE
═══════════════════════════════════════════════════ */
.stock-row-low { background: rgba(255,80,80,0.03); }
.stock-ok { color: #4ade80; }
.stock-low { color: #f87171; }

/* ═══════════════════════════════════════════════════
   SUPPLIERS MODULE — Cards grid
═══════════════════════════════════════════════════ */
.sup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding: 4px 0 24px;
}

.sup-card {
  background: var(--card-bg, #1a1a2e);
  border: 1px solid var(--border, rgba(255,255,255,0.07));
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.15s, box-shadow 0.18s;
}
.sup-card:hover {
  border-color: var(--accent, #6c63ff);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}

.sup-card-header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}

.sup-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent, #6c63ff);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

.sup-card-name {
  font-weight: 700;
  font-size: .9rem;
  color: var(--text, #e8e8f0);
  line-height: 1.2;
}

.sup-card-location {
  font-size: .72rem;
  color: var(--text-muted, #888);
  margin-top: 2px;
}

.sup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.sup-type-chip {
  font-size: .68rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 2px 8px;
  color: var(--text-muted, #aaa);
  white-space: nowrap;
}

.sup-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  font-size: .74rem;
  color: var(--text-muted, #888);
}
.sup-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sup-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sup-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted, #aaa);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sup-action-btn:hover { background: rgba(255,255,255,0.08); color: var(--text, #e8e8f0); }
.sup-action-btn.wa { color: #25D366; border-color: rgba(37,211,102,0.25); }
.sup-action-btn.wa:hover { background: rgba(37,211,102,0.08); }
.sup-action-btn.accent { color: var(--accent, #6c63ff); border-color: rgba(108,99,255,0.3); }
.sup-action-btn.accent:hover { background: rgba(108,99,255,0.1); }

/* ═══════════════════════════════════════════════════
   SUPPLIER DRAWER
═══════════════════════════════════════════════════ */
.sdw-drawer {
  position: fixed;
  top: 0;
  right: -480px;
  width: 460px;
  max-width: 100vw;
  height: 100vh;
  background: var(--sidebar-bg, #13131f);
  border-left: 1px solid var(--border, rgba(255,255,255,0.07));
  z-index: 1100;
  display: flex;
  flex-direction: column;
  transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -8px 0 40px rgba(0,0,0,0.35);
}
.sdw-drawer.open { right: 0; }

#supplier-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1099;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
#supplier-drawer-overlay.open { opacity: 1; pointer-events: all; }

.sdw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
  flex-shrink: 0;
}

.sdw-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text, #e8e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.sdw-del-btn-header {
  background: none;
  border: 1px solid rgba(255,80,80,0.25);
  border-radius: 7px;
  color: #f87171;
  cursor: pointer;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  transition: background 0.15s;
}
.sdw-del-btn-header:hover { background: rgba(255,80,80,0.1); }

.sdw-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
  flex-shrink: 0;
  background: rgba(255,255,255,0.02);
}

.sdw-hero-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent, #6c63ff);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

.sdw-hero-name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text, #e8e8f0);
  line-height: 1.2;
}

.sdw-hero-sub {
  font-size: .75rem;
  color: var(--text-muted, #888);
  margin-top: 3px;
}

.sdw-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}

.sdw-section-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted, #888);
  margin-bottom: 10px;
}

.sdw-field { margin-bottom: 12px; }

.sdw-label {
  display: block;
  font-size: .73rem;
  font-weight: 600;
  color: var(--text-muted, #aaa);
  margin-bottom: 4px;
}

.sdw-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.09));
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .83rem;
  color: var(--text, #e8e8f0);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.sdw-input:focus { border-color: var(--accent, #6c63ff); }
textarea.sdw-input { font-family: inherit; }

.sdw-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.sdw-row .sdw-field { margin-bottom: 0; }

.sdw-icon-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border, rgba(255,255,255,0.09));
  border-radius: 8px;
  color: var(--text-muted, #aaa);
  cursor: pointer;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.sdw-icon-btn:hover { background: rgba(255,255,255,0.09); }

.sdw-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.sdw-type-pill {
  padding: 5px 11px;
  border-radius: 20px;
  font-size: .73rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted, #aaa);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sdw-type-pill:hover { background: rgba(255,255,255,0.08); }
.sdw-type-pill.active { background: rgba(108,99,255,0.15); border-color: var(--accent, #6c63ff); color: var(--accent, #6c63ff); }

.sdw-add-vendor-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: .73rem;
  font-weight: 600;
  border: 1px dashed rgba(255,255,255,0.18);
  background: none;
  color: var(--text-muted, #aaa);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sdw-add-vendor-btn:hover { background: rgba(255,255,255,0.06); color: var(--text, #e8e8f0); }

.sdw-vendor-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, rgba(255,255,255,0.07));
  border-radius: 9px;
  padding: 11px 12px;
  margin-bottom: 8px;
}

.sdw-vendor-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 28px;
  gap: 8px;
  align-items: end;
}

.sdw-vendor-del-btn {
  background: none;
  border: 1px solid rgba(255,80,80,0.2);
  border-radius: 6px;
  color: #f87171;
  cursor: pointer;
  width: 28px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.sdw-vendor-del-btn:hover { background: rgba(255,80,80,0.1); }

.sdw-vendor-actions { display: flex; gap: 6px; margin-top: 8px; }

.sdw-vendor-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: .7rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted, #aaa);
  cursor: pointer;
  transition: background 0.15s;
}
.sdw-vendor-action-btn.wa { color: #25D366; border-color: rgba(37,211,102,0.2); }
.sdw-vendor-action-btn.mail { color: var(--cyan, #00e5ff); border-color: rgba(0,229,255,0.2); }

.sdw-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.07));
  flex-shrink: 0;
  background: rgba(255,255,255,0.01);
}

/* ═══════════════════════════════════════════════════
   ORDER BUILDER MODAL
═══════════════════════════════════════════════════ */
.obm-sup-name {
  font-size: .78rem;
  color: var(--text-muted, #888);
  margin-bottom: 14px;
  font-weight: 500;
}

.obm-vendor-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.obm-vendor-pill {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted, #aaa);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.obm-vendor-pill:hover { background: rgba(255,255,255,0.08); }
.obm-vendor-pill.active { background: rgba(108,99,255,0.15); border-color: var(--accent, #6c63ff); color: var(--accent, #6c63ff); }

.obm-item-row {
  display: grid;
  grid-template-columns: 1fr 70px 100px 80px 32px;
  gap: 4px;
  align-items: center;
  margin-bottom: 5px;
}

.obm-item-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.09));
  border-radius: 7px;
  padding: 7px 8px;
  font-size: .8rem;
  color: var(--text, #e8e8f0);
  outline: none;
  box-sizing: border-box;
}
.obm-item-input:focus { border-color: var(--accent, #6c63ff); }

.obm-subtotal {
  font-size: .76rem;
  color: var(--text-muted, #aaa);
  text-align: right;
  white-space: nowrap;
}

.obm-del-btn {
  background: none;
  border: 1px solid rgba(255,80,80,0.18);
  border-radius: 6px;
  color: #f87171;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.obm-del-btn:hover { background: rgba(255,80,80,0.1); }

.obm-add-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  margin-bottom: 12px;
  padding: 5px 11px;
  border-radius: 7px;
  font-size: .76rem;
  font-weight: 600;
  border: 1px dashed rgba(255,255,255,0.16);
  background: none;
  color: var(--text-muted, #aaa);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.obm-add-row-btn:hover { background: rgba(255,255,255,0.05); color: var(--text, #e8e8f0); }

.obm-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--border, rgba(255,255,255,0.07));
}

.obm-total-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, #e8e8f0);
}



/* -- THEME: ZXION BLACK -------------------------------------- */
/*
 * Diseño: Alienware × Apple — black premium, bordes visibles,
 * texto legible, glow lime preciso. Todo scoped a este tema.
 *
 * Principio de visibilidad: sobre #000 puro, el borde debe
 * alcanzar mínimo #303030 para ser percibido claramente.
 * Se añade shadow permanente (no solo hover) para "elevar"
 * la tarjeta visualmente sobre el fondo negro.
 */
body.theme-zxion-black {
  --bg: #000000;
  --bg2: #0b0b0b;
  --bg3: #111111;
  /* Borde visible: #303030 = 18% brillo — perceptible sobre negro */
  --border: #303030;
  --border-hover: #484848;
  --dash-base-start: #000000;
  --dash-base-mid: #000000;
  --dash-base-end: #000000;
  /* Texto legible sobre negro puro */
  --text: #f0f0f0;
  --text-muted: #b0b0b0;
  --text-dim: #686868;
}

body.theme-zxion-black .main::before {
  opacity: 0;
}

/* ── Sidebar ─────────────────────────────────────────────── */
body.theme-zxion-black .sidebar {
  background: #000000;
  border-right: 1px solid #282828;
}
body.theme-zxion-black .sidebar::after {
  background: linear-gradient(
    to bottom,
    transparent 0,
    rgba(198,255,0,0.14) 18%,
    rgba(198,255,0,0.07) 52%,
    transparent 88%
  );
}
body.theme-zxion-black .sidebar::before {
  background: radial-gradient(ellipse at top, rgba(198,255,0,0.07) 0%, rgba(198,255,0,0.02) 40%, transparent 75%);
}
body.theme-zxion-black .nav-item:hover {
  background: rgba(198,255,0,0.05);
  color: #C6FF00;
  box-shadow: none;
}
body.theme-zxion-black .sidebar-logo {
  border-bottom-color: #222222;
}
body.theme-zxion-black .sidebar-footer {
  border-top-color: #222222;
}

/* ── Cards / ventanas — Alienware panel feel ─────────────── */
/*
 * Técnica de visibilidad:
 *   1. Fondo #0c0c0c — contraste real contra #000
 *   2. Borde #303030 — visible sin ser agresivo
 *   3. Shadow permanente con highlight blanco ultra-fino (1px)
 *      que crea ilusión de "panel elevado"
 *   4. Hover: borde lime + glow difuso
 */
body.theme-zxion-black .card {
  background: #0c0c0c;
  border: 1px solid #303030;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 2px 16px rgba(0,0,0,0.85),
    0 1px 0 rgba(255,255,255,0.05) inset;
}
body.theme-zxion-black .card:hover {
  border-color: rgba(198,255,0,0.40);
  box-shadow:
    0 0 0 1px rgba(198,255,0,0.15),
    0 0 32px rgba(198,255,0,0.08),
    0 8px 36px rgba(0,0,0,0.9),
    0 1px 0 rgba(255,255,255,0.06) inset;
}

/* ── Stat cards ──────────────────────────────────────────── */
body.theme-zxion-black .stat-card {
  background: #0c0c0c;
  border: 1px solid #303030;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 2px 12px rgba(0,0,0,0.8);
}
body.theme-zxion-black .stat-card:hover {
  border-color: rgba(198,255,0,0.38);
  box-shadow: 0 0 0 1px rgba(198,255,0,0.14), 0 0 20px rgba(198,255,0,0.07), 0 4px 20px rgba(0,0,0,0.8);
  transform: translateY(-2px);
}

/* ── KPI cards ───────────────────────────────────────────── */
body.theme-zxion-black .kpi-card {
  background: #0c0c0c;
  border: 1px solid #303030;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 2px 14px rgba(0,0,0,0.8);
}
body.theme-zxion-black .kpi-card:hover {
  border-color: rgba(198,255,0,0.40);
  box-shadow:
    0 0 0 1px rgba(198,255,0,0.16),
    0 0 28px rgba(198,255,0,0.09),
    0 6px 24px rgba(0,0,0,0.8);
}
/* .kpi-card-black — barra lime superior + glow verde */
body.theme-zxion-black .kpi-card-black {
  --kpi-line: rgba(198,255,0,0.92);
  --kpi-glow: rgba(198,255,0,0.18);
  --kpi-border-hover: rgba(198,255,0,0.38);
  border-top: 2px solid rgba(198,255,0,0.55);
  background: #0c0c0c;
}
body.theme-zxion-black .kpi-card-black:hover {
  box-shadow:
    0 0 0 1px rgba(198,255,0,0.30),
    0 8px 28px rgba(0,0,0,0.85),
    0 0 40px rgba(198,255,0,0.12);
  background: rgba(198,255,0,0.03);
  border-color: rgba(198,255,0,0.45);
}

/* ── Financial cards ─────────────────────────────────────── */
body.theme-zxion-black .fin-trigger-card {
  background: #0c0c0c;
  border: 1px solid #303030;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 2px 14px rgba(0,0,0,0.8);
}
body.theme-zxion-black .fin-trigger-card:hover,
body.theme-zxion-black .fin-trigger-card.expanded {
  border-color: rgba(198,255,0,0.38);
  box-shadow: 0 0 0 1px rgba(198,255,0,0.12), 0 0 24px rgba(198,255,0,0.07), 0 6px 24px rgba(0,0,0,0.8);
}
body.theme-zxion-black .fin-card {
  background: #0c0c0c;
  border: 1px solid #2e2e2e;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 2px 10px rgba(0,0,0,0.7);
}
body.theme-zxion-black .fin-card:hover {
  border-color: rgba(198,255,0,0.35);
  box-shadow: 0 0 0 1px rgba(198,255,0,0.12), 0 0 20px rgba(198,255,0,0.07), 0 4px 18px rgba(0,0,0,0.8);
}

/* ── Settings collapsible cards ──────────────────────────── */
body.theme-zxion-black .cfg-collapsible-card {
  background: #0c0c0c;
  border: 1px solid #303030;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 2px 12px rgba(0,0,0,0.75);
}
body.theme-zxion-black .cfg-collapsible-card.is-open {
  border-color: #3a3a3a;
  box-shadow: 0 0 0 1px rgba(198,255,0,0.07), 0 2px 16px rgba(0,0,0,0.85);
}

/* ── Period filter ───────────────────────────────────────── */
body.theme-zxion-black .period-filter {
  background: #0c0c0c !important;
  border: 1px solid #303030 !important;
}
body.theme-zxion-black .period-btn.active {
  color: #000000 !important;
  background: #C6FF00;
  font-weight: 700;
}

/* ── Topbar ──────────────────────────────────────────────── */
body.theme-zxion-black .topbar {
  background: #000000;
  border-bottom: 1px solid #202020;
}
body.theme-zxion-black .topbar::after {
  background: linear-gradient(
    to right,
    rgba(198,255,0,0.14) 0%,
    rgba(198,255,0,0.06) 40%,
    transparent 80%
  );
  filter: blur(0.5px);
}
body.theme-zxion-black .topbar::before { display: none; }

/* ── Botón dark mode — iluminado cuando está activo ──────── */
body.theme-zxion-black #zx-darkmode-btn {
  color: #C6FF00 !important;
  border-color: rgba(198,255,0,0.40) !important;
  background: rgba(198,255,0,0.07) !important;
  box-shadow: 0 0 10px rgba(198,255,0,0.18);
}
body.theme-zxion-black #zx-darkmode-btn:hover {
  background: rgba(198,255,0,0.12) !important;
  box-shadow: 0 0 16px rgba(198,255,0,0.28);
}

/* ── AI Hub — protagonista ───────────────────────────────── */
body.theme-zxion-black .alien-ai-hub {
  padding: 12px 0 4px;
}

/* ── Scrollbar ───────────────────────────────────────────── */
body.theme-zxion-black ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(198,255,0,0.65), rgba(143,184,0,0.45));
}

/* ── Pulse keyframe (anillo del AI Hub) ──────────────────── */
@keyframes zx-pulse {
  0%   { transform: scale(1);    opacity: 0.65; }
  50%  { transform: scale(1.18); opacity: 0.18; }
  100% { transform: scale(1);    opacity: 0.65; }
}

/* ── Presupuestos comerciales: builder ───────────────────── */
.cq-section-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin: 6px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--bg3);
}
.cq-add-box {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 12px;
}
.cq-search-results { max-height: 220px; overflow-y: auto; margin-top: 8px; }
.cq-search-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px; cursor: pointer; transition: background .12s;
}
.cq-search-row:hover { background: var(--bg2); }
.cq-sr-name { font-weight: 600; font-size: 0.86rem; color: var(--text); }
.cq-sr-sub  { font-size: 0.74rem; color: var(--text-muted); margin-left: 8px; }
.cq-sr-price { font-weight: 700; font-size: 0.86rem; color: var(--accent); margin-left: 12px; }
.cq-sr-stock { font-size: 0.72rem; color: var(--text-muted); margin-right: 12px; }
.cq-sr-stock.lowstock { color: var(--warning); }
.cq-sr-stock.nostock  { color: var(--danger); }
.cq-empty-sm { color: var(--text-muted); font-size: 0.82rem; padding: 10px; text-align: center; }

.cq-items-empty {
  color: var(--text-muted); font-size: 0.84rem; text-align: center;
  padding: 18px; border: 1px dashed var(--border); border-radius: 10px;
}
.cq-items-head {
  display: grid; grid-template-columns: 1fr 80px 110px 110px 34px; gap: 8px;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); padding: 0 4px 6px;
}
.cq-item-row {
  display: grid; grid-template-columns: 1fr 80px 110px 110px 34px; gap: 8px; align-items: center;
  padding: 7px 4px; border-bottom: 1px solid var(--bg3);
}
.cq-ir-desc { font-size: 0.86rem; color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.cq-ir-input { padding: 6px 8px !important; font-size: 0.84rem !important; text-align: right; }
.cq-ir-total { text-align: right; font-weight: 700; font-size: 0.86rem; color: var(--text); }
.cq-ir-remove {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 6px;
}
.cq-ir-remove:hover { color: var(--danger); background: var(--danger-dim); }
.cq-stock-warn {
  font-size: 0.66rem; font-weight: 700; color: var(--danger);
  background: var(--danger-dim); padding: 1px 6px; border-radius: 99px;
}
.item-tag {
  display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 1px 6px; border-radius: 99px;
}
.item-tag.stock { background: rgba(34,197,94,0.15); color: #4ade80; }
.item-tag.svc   { background: rgba(59,130,246,0.15); color: #60a5fa; }

/* ── Nav tag "NEW" (novedad de función) ──────────────────── */
.nav-new {
  display: inline-flex; align-items: center;
  font-size: 0.56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #0a0a12; background: var(--accent);
  padding: 1px 6px; border-radius: 5px; line-height: 1.5; flex-shrink: 0;
}

/* ── Notificaciones flotantes (nuevas solicitudes) ───────── */
#notif-stack {
  /* bottom 92px: deja libre la esquina para el botón del Asistente IA */
  position: fixed; right: 24px; bottom: 92px; z-index: 4000;
  display: flex; flex-direction: column; gap: 12px;
  width: 380px; max-width: calc(100vw - 32px); pointer-events: none;
}
.notif-pop {
  pointer-events: auto;
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 42px 16px 16px; border-radius: 16px;
  background: rgba(20,20,30,0.97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.10); border-left: 4px solid var(--accent);
  box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 30px rgba(198,255,0,0.18);
  cursor: pointer; position: relative; overflow: hidden;
  opacity: 0; transform: translateX(30px) scale(0.96);
  transition: opacity .3s ease, transform .34s cubic-bezier(.22,.68,0,1.3);
}
.notif-pop.show { opacity: 1; transform: translateX(0) scale(1); }
.notif-pop.hide { opacity: 0; transform: translateX(30px) scale(0.96); }
.notif-pop:hover { border-color: rgba(255,255,255,0.2); }
.notif-pop.quote { border-left-color: #c084fc; box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 30px rgba(192,132,252,0.25); }
.notif-pop.appt  { border-left-color: #22d3ee; box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 30px rgba(34,211,238,0.25); }
.notif-pop:not(.settled) { animation: notifAttention 0.9s ease-in-out 2; }
@keyframes notifAttention {
  0%,100% { box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 24px rgba(198,255,0,0.18); }
  50%     { box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 42px rgba(198,255,0,0.5); }
}
.notif-ic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
}
.notif-ic svg { width: 20px; height: 20px; }
.notif-pop.quote .notif-ic svg { color: #c084fc; }
.notif-pop.appt  .notif-ic svg { color: #22d3ee; }
.notif-ping {
  position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: #ff3b6b;
  animation: notifPing 1.6s ease-out infinite;
}
@keyframes notifPing {
  0% { box-shadow: 0 0 0 0 rgba(255,59,107,0.6); }
  70%,100% { box-shadow: 0 0 0 9px rgba(255,59,107,0); }
}
.notif-bd { min-width: 0; }
.notif-bd .nt-kicker {
  font-size: 0.6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 3px;
}
.notif-pop.quote .nt-kicker { color: #c084fc; }
.notif-pop.appt  .nt-kicker { color: #22d3ee; }
.notif-bd .nt { font-size: 0.95rem; font-weight: 700; color: var(--text); margin: 0 0 2px; line-height: 1.25; }
.notif-bd .nx { font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; }
.notif-bd .notif-cta { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); margin-top: 6px; }
.notif-x {
  position: absolute; top: 10px; right: 10px; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-dim); cursor: pointer; border-radius: 6px;
}
.notif-x:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.notif-progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  animation-name: notifCountdown; animation-timing-function: linear; animation-fill-mode: forwards;
}
.notif-pop.quote .notif-progress { background: linear-gradient(90deg, #c084fc, #818cf8); }
.notif-pop.appt  .notif-progress { background: linear-gradient(90deg, #22d3ee, #38bdf8); }
@keyframes notifCountdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 600px) {
  #notif-stack { right: 12px; left: 12px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .notif-pop { transition: opacity .2s ease; transform: none; }
  .notif-pop.show, .notif-pop.hide { transform: none; }
  .notif-pop:not(.settled) { animation: none; }
  .notif-ping { animation: none; }
  .notif-progress { animation: none; }
}

/* ── Onboarding "Presupuestos" (first-time intro) ────────── */
.qintro { max-width: 560px; width: 100%; padding: 0; overflow: hidden; }
.qintro-hero {
  position: relative; padding: 30px 30px 22px; text-align: center; overflow: hidden;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,0,255,0.16), transparent 55%),
    radial-gradient(120% 120% at 100% 0%, rgba(0,229,255,0.16), transparent 55%),
    linear-gradient(180deg, #15151c 0%, #0e0e14 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.qintro-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #0a0a12; background: linear-gradient(100deg, var(--accent), var(--cyan));
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
  box-shadow: 0 4px 18px rgba(198,255,0,0.25);
}
.qintro-icon {
  width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, rgba(198,255,0,0.16), rgba(0,229,255,0.10));
  border: 1px solid rgba(198,255,0,0.30);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
.qintro-icon svg { width: 30px; height: 30px; color: var(--accent); }
.qintro-hero h2 { font-size: 1.45rem; font-weight: 800; color: #fff; margin: 0 0 6px; letter-spacing: -0.01em; }
.qintro-hero p  { font-size: 0.9rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
.qintro-body { padding: 22px 26px 6px; }
.qintro-feature {
  display: flex; align-items: flex-start; gap: 14px; padding: 12px;
  border-radius: 12px; transition: background .15s ease;
}
.qintro-feature + .qintro-feature { margin-top: 4px; }
.qintro-feature:hover { background: rgba(255,255,255,0.03); }
.qintro-fic {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
}
.qintro-fic svg { width: 19px; height: 19px; }
.qintro-feature h4 { font-size: 0.92rem; font-weight: 700; color: var(--text); margin: 1px 0 3px; }
.qintro-feature p  { font-size: 0.82rem; color: var(--text-muted); margin: 0; line-height: 1.45; }
.qintro-foot {
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
  padding: 18px 26px 24px; flex-wrap: wrap;
}
@media (max-width: 520px) {
  .qintro-foot { flex-direction: column-reverse; align-items: stretch; }
  .qintro-foot .btn { width: 100%; justify-content: center; }
}

/* Demo Data Banner — pulse glow animation */
@keyframes demo-banner-pulse {
  0%, 100% { box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.2), 0 0 0 0 rgba(198,255,0,0.5); }
  50% { box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(198,255,0,0.4), 0 0 16px 8px rgba(198,255,0,0.3); }
}