/* ====================================================================
   GRIDIT - HONESTIA CONNECT: DISEÑO SÓLIDO, MINIMALISTA Y LIMPIO (MOBILE-FIRST)
   Cero Glassmorphism / Cero Blur IA / Colores Sólidos / Interfaz Despejada
   ==================================================================== */

:root {
  --bg-page: #f4f4f5;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-subtle: #fafafa;
  
  --text: #09090b;
  --text-main: #09090b;
  --text-body: #27272a;
  --text-muted: #71717a;
  --text-light: #a1a1aa;
  
  --primary: #09090b;
  --primary-hover: #27272a;
  --primary-light: #f4f4f5;
  
  --green: #059669;
  --green-light: #ecfdf5;
  --green-border: #a7f3d0;
  
  --amber: #d97706;
  --amber-light: #fffbeb;
  --amber-border: #fde68a;
  
  --red: #dc2626;
  --red-light: #fef2f2;
  --red-border: #fecdd3;
  
  --blue: #2563eb;
  --blue-light: #eff6ff;
  
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 6px;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-page);
  color: var(--text-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 72px;
  -webkit-font-smoothing: antialiased;
}

/* ====================================================================
   ENCABEZADO SÓLIDO Y MODERNO (DESIGN SYSTEM CLEAN)
   ==================================================================== */
header {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 8px 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

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

.brand-badge {
  background: var(--primary);
  color: #ffffff;
  font-weight: 800;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.03em;
}

.brand-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
}

.user-tag,
.header-user-tag {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-conmutador-dial {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 5px 9px !important;
  border-radius: 8px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-conmutador-dial:hover {
  background: #1e293b !important;
  border-color: #475569 !important;
}

.btn-header-icon {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 13px !important;
  width: 32px !important;
  height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  position: relative !important;
  cursor: pointer !important;
  transition: all 0.15s ease;
}

.btn-header-icon:hover {
  background: #e2e8f0 !important;
}

.btn-header-tarifario {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 5px 9px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease;
}

.btn-header-tarifario:hover {
  background: #fde68a !important;
}

.user-profile-header {
  text-align: right;
  margin-left: 2px;
}

.user-profile-name {
  font-weight: 800;
  color: #0f172a;
  font-size: 11.5px;
  line-height: 1.2;
}

.user-bccs-sub {
  font-size: 10px;
  color: #64748b;
  font-weight: 500;
}

.user-bccs {
  color: #0284c7;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.user-profile-links {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.2;
}

.link-logout {
  color: #dc2626;
  text-decoration: none;
  font-weight: 700;
}

.link-reload {
  color: #4f46e5;
  text-decoration: none;
  font-weight: 800;
}

/* ====================================================================
   MÉTRICAS: BARRA ULTRA-COMPACTA SÓLIDA DE 4 STATS
   ==================================================================== */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 6px 14px 4px 14px;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
}

.metric-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 5px 4px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.metric-card.highlight-green {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.metric-card.highlight-purple {
  background: #faf5ff;
  border-color: #e9d5ff;
}

.metric-label {
  display: block;
  font-size: 8.5px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric-value {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  margin-top: 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.val-green { color: var(--green); }
.val-purple { color: #7c3aed; }
.val-yellow { color: var(--amber); }
.val-blue { color: var(--blue); }

/* ====================================================================
   CONTENEDOR PRINCIPAL
   ==================================================================== */
main {
  flex: 1;
  padding: 8px 14px 16px 14px;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ====================================================================
   TARJETAS SÓLIDAS LIMPIAS
   ==================================================================== */
.card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}

.card-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-main);
}

/* ====================================================================
   SPEECH WHATSAPP COMPACTO Y MODERNO
   ==================================================================== */
.wa-pitch-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid #10b981;
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.wa-pitch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wa-pitch-select {
  width: 100%;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.15s ease;
}

.wa-pitch-select:focus {
  border-color: #059669;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

.wa-pitch-textarea {
  width: 100%;
  min-height: 54px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11.5px;
  color: var(--text-main);
  font-family: inherit;
  outline: none;
}

.wa-pitch-textarea:focus {
  border-color: #059669;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

/* ====================================================================
   SELECTOR DE MODO (SEGMENTADO LIMPIO)
   ==================================================================== */
.mode-toggle {
  display: flex;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  margin-bottom: 6px;
  gap: 3px;
}

.mode-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #64748b;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.mode-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mode-btn svg {
  width: 14px;
  height: 14px;
}

/* ====================================================================
   BUSCADOR RÁPIDO
   ==================================================================== */
.search-bento-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 8px;
  margin-bottom: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* ====================================================================
   BANNER DE CAMPAÑA
   ==================================================================== */
.campaign-banner {
  background: #ffffff;
  border: 1px solid #e0e7ff;
  border-left: 4px solid var(--primary);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.campaign-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}

.pulse-dot {
  width: 5px;
  height: 5px;
  background: var(--primary);
  border-radius: 50%;
}

/* ====================================================================
   BOTONES SÓLIDOS
   ==================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-weight: 700;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease;
  width: 100%;
  text-decoration: none;
}

.btn-primary {
  background: var(--primary);
  color: #ffffff;
  padding: 11px 16px;
  font-size: 13px;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-primary:active {
  background: #3730a3;
}

.btn-secondary {
  background: #ffffff;
  color: var(--text-body);
  border: 1px solid var(--border-strong);
  padding: 8px 12px;
  font-size: 12px;
}

.btn-secondary:hover {
  background: #f9fafb;
}

.btn-whatsapp {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #ffffff;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 800;
  border-radius: 10px;
  border: none;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-whatsapp:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35);
  transform: translateY(-1px);
}

.btn-whatsapp:active {
  transform: translateY(0);
}

/* ====================================================================
   HERO CARD: GESTIÓN 1 A 1 (FOCAL POINT DEL ASESOR)
   ==================================================================== */
#lead-1x1-card,
.lead-hero-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.15s ease;
}

.lead-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.lead-badge-live {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lead-badge-live::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.lead-hero-phone {
  font-size: 25px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: 0.04em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.1;
  margin: 6px 0 3px 0;
}

.lead-hero-name {
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
  margin-top: 2px;
}

.lead-meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.lead-meta-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lead-meta-pill.pill-dni {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

.lead-meta-pill.pill-plan {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}

.lead-outcomes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

.btn-outcome {
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 8px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.btn-outcome-nocontesta {
  background: #fff1f2 !important;
  color: #e11d48 !important;
  border: 1px solid #fecdd3 !important;
}
.btn-outcome-nocontesta:hover {
  background: #ffe4e6 !important;
}

.btn-outcome-rellamar {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}
.btn-outcome-rellamar:hover {
  background: #fef3c7 !important;
}

.btn-outcome-nointeresa {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}
.btn-outcome-nointeresa:hover {
  background: #f1f5f9 !important;
}

.btn-outcome-venta {
  margin-top: 10px !important;
  width: 100% !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 12px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #09090b 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  border: 1px solid #09090b !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.btn-outcome-venta:hover {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  transform: translateY(-1px);
}

.btn-outline {
  background: #ffffff;
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 7px 12px;
  font-size: 11.5px;
}

.btn-sm {
  padding: 6px 10px;
  font-size: 11.5px;
  width: auto;
}

.btn-xs {
  padding: 3px 6px;
  font-size: 10px;
  width: auto;
}

/* ====================================================================
   FORMULARIOS E INPUTS
   ==================================================================== */
.form-group {
  margin-bottom: 10px;
}

.form-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 4px;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--text-main);
  font-size: 13px;
  outline: none;
  font-family: inherit;
}

.form-input::placeholder, .form-textarea::placeholder {
  color: var(--text-light);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.form-section-tag {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin: 14px 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-section-tag::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ====================================================================
   ALERTAS
   ==================================================================== */
.alert-box {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 600;
  margin-bottom: 10px;
}

.alert-warning {
  background: var(--amber-light);
  color: var(--amber);
  border: 1px solid var(--amber-border);
}

.alert-danger {
  background: var(--red-light);
  color: var(--red);
  border: 1px solid var(--red-border);
}

.alert-info {
  background: var(--blue-light);
  color: var(--blue);
  border: 1px solid #bfdbfe;
}

/* ====================================================================
   ELEMENTOS DE LEADS
   ==================================================================== */
.lead-lote-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
}

.badge-pos {
  background: #f3f4f6;
  color: var(--text-body);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.lead-status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.status-asignado {
  background: var(--blue-light);
  color: var(--blue);
}

.status-venta {
  background: var(--green-light);
  color: var(--green);
}

.status-nocontesto {
  background: var(--red-light);
  color: var(--red);
}

.status-nointeresado {
  background: #f3f4f6;
  color: var(--text-muted);
}

/* ====================================================================
   BANNER DE LEAD VINCULADO
   ==================================================================== */
.selected-lead-banner {
  background: var(--primary-light);
  border: 1px solid #c7d2fe;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 12px;
}

.btn-desvincular {
  background: #ffffff;
  border: 1px solid var(--red-border);
  color: var(--red);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

/* ====================================================================
   HISTORIAL DE VENTAS
   ==================================================================== */
.sales-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sale-item {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}

.sale-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.sale-order {
  font-weight: 800;
  font-size: 13px;
  color: var(--text-main);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.status-audit {
  background: var(--amber-light);
  color: var(--amber);
}

.status-confirmed {
  background: var(--green-light);
  color: var(--green);
}

.status-rejected {
  background: var(--red-light);
  color: var(--red);
}

.status-route {
  background: var(--blue-light);
  color: var(--blue);
}

/* ====================================================================
   ACORDEONES
   ==================================================================== */
.accordion-item {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  overflow: hidden;
}

.accordion-header {
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
  background: #f9fafb;
}

.accordion-body {
  display: none;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: #ffffff;
}

.accordion-body.open {
  display: block;
}

/* ====================================================================
   BARRA DE NAVEGACIÓN INFERIOR (SÓLIDA DOCKED, CERO FLOTANTE)
   ==================================================================== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  padding: 6px 0;
  z-index: 1000;
}

.nav-item {
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 10px;
  flex: 1;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-muted);
}

.nav-item.active {
  color: var(--primary);
}

.nav-item.active svg {
  stroke: var(--primary);
}

/* ====================================================================
   BOTÓN HERO DE VENTA EN BARRA INFERIOR (CÍRCULO NEGRO PROMINENTE)
   ==================================================================== */
.nav-item-sale-hero {
  position: relative;
  overflow: visible !important;
}

.nav-item-sale-hero .sale-circle-btn {
  width: 48px;
  height: 48px;
  background: #09090b;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -20px;
  border: 3.5px solid #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s ease, box-shadow 0.15s ease;
}

.nav-item-sale-hero .sale-circle-btn svg {
  width: 22px;
  height: 22px;
  stroke: #ffffff !important;
}

.nav-item-sale-hero:active .sale-circle-btn {
  transform: scale(0.92);
}

.nav-item-sale-hero.active .sale-circle-btn {
  background: #000000;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px #6366f1, 0 6px 16px rgba(99, 102, 241, 0.4);
}

.nav-item-sale-hero span {
  font-size: 10px;
  font-weight: 800;
  color: #09090b;
  margin-top: 1px;
}

body.dark-mode .nav-item-sale-hero .sale-circle-btn {
  background: #09090b;
  border-color: #27272a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

body.dark-mode .nav-item-sale-hero span {
  color: #f4f4f5;
}

.btn-header-perfil {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease;
}

.btn-header-perfil:hover {
  background: #e2e8f0 !important;
}

body.dark-mode .btn-header-perfil {
  background: #27272a !important;
  border-color: #3f3f46 !important;
  color: #f4f4f5 !important;
}

.base-info-footer {
  border-top: 1px dashed var(--border) !important;
  border-bottom: none !important;
  border-left: none !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding-top: 6px !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.dark-mode .base-info-footer {
  border-top-color: #334155 !important;
}

/* ====================================================================
   LOGIN OVERLAY (SÓLIDO)
   ==================================================================== */
.login-overlay {
  position: fixed;
  inset: 0;
  background: #f3f4f6;
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
}

.login-overlay form {
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  box-shadow: var(--shadow-card);
}

/* ====================================================================
   TOAST
   ==================================================================== */
.toast-container {
  position: fixed;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  width: calc(100% - 32px);
  max-width: 380px;
}

.toast {
  background: #111827;
  color: #ffffff;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.toast-success { background: #065f46; color: #ffffff; }
.toast-warning { background: #92400e; color: #ffffff; }
.toast-danger { background: #991b1b; color: #ffffff; }
.toast-error { background: #b91c1c; color: #ffffff; border: 1px solid #f87171; }
.toast-info { background: #1e293b; color: #ffffff; border: 1px solid #334155; }

/* ====================================================================
   MECÁNICAS DOPAMÍNICAS & CLÍMAX DE VENTA (ESTILO VISUAL EJECUTIVO)
   ==================================================================== */

/* 1. Ticker Social de Actividad en Vivo (Ultra Compacto) */
.live-ticker-bar {
  display: none !important;
}

.ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffcc00;
  box-shadow: 0 0 5px #ffcc00;
  animation: pulse-dot 1.5s infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.ticker-marquee {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  font-weight: 500;
}

.ticker-marquee span {
  color: #fbbf24;
  font-weight: 700;
}

/* 2. Barra de Rango y Escalafón Meritocrático (Ultra Compacto) */
.rango-banner {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  margin: 4px 14px 2px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: var(--shadow-sm);
}

.rango-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
}

.rango-badge-pill {
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.badge-junior { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.badge-senior { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.badge-master { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff; }
.badge-elite { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; box-shadow: 0 0 8px rgba(16, 185, 129, 0.25); }

.rango-progress-track {
  width: 100%;
  height: 3px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.rango-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.status-rellamar {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Chips Rápidos de Distritos de Lima */
.district-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.district-chip {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #374151;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.district-chip:hover, .district-chip:active {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4f46e5;
}

.rango-meta-label {
  font-size: 10.5px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}

/* 3. Modal de Celebración de Venta (El Clímax de Venta) */
.celebracion-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(4px);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fade-in 0.25s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

#canvas-confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3001;
}

.celebracion-card {
  position: relative;
  z-index: 3002;
  background: #ffffff;
  border-radius: var(--radius-lg);
  max-width: 360px;
  width: 100%;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  border: 2px solid #ffcc00;
  animation: pop-up 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop-up {
  0% { transform: scale(0.7) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.celebracion-icono {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px auto;
  border-radius: 50%;
  background: #fef3c7;
  border: 2px solid #fde68a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  animation: pulse-icon 1.2s infinite;
}

@keyframes pulse-icon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.celebracion-titulo {
  font-size: 19px;
  font-weight: 900;
  color: #111827;
  letter-spacing: -0.02em;
}

.celebracion-monto {
  font-size: 34px;
  font-weight: 900;
  color: #059669;
  margin: 8px 0;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 4px rgba(5, 150, 105, 0.15);
}

.celebracion-detalles {
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 12px;
  color: #4b5563;
  margin: 14px 0;
  text-align: left;
  line-height: 1.5;
}

.celebracion-racha {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
  font-weight: 800;
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}

/* 4. Modales Genéricos Sólidos (Tarifario & Ajustes) */
.modal-overlay {
  position: fixed;
  inset: 0;
  height: 100%;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-content {
  background: #ffffff;
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.modal-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
}

.modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.setting-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.setting-toggle-row:last-child {
  border-bottom: none;
}

.switch-input {
  width: 44px;
  height: 24px;
  appearance: none;
  background: #d1d5db;
  border-radius: 12px;
  position: relative;
  outline: none;
  cursor: pointer;
  transition: background 0.2s;
}

.switch-input:checked {
  background: var(--primary);
}

.switch-input::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.switch-input:checked::after {
  transform: translateX(20px);
}

/* ====================================================================
   SUB-VISTAS DE VENTAS, BALANCE MENSUAL & RANKING PODIO
   ==================================================================== */
.subvista-ventas-content {
  display: none;
}

.subvista-ventas-content.active {
  display: block;
}

/* Podio de Competitividad */
.podio-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
}

.podio-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 4px;
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.podio-corona {
  position: absolute;
  top: -12px;
  font-size: 16px;
}

.podio-block {
  width: 100%;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px 4px;
}

.podio-1 .podio-avatar { background: #fef3c7; border: 2px solid #f59e0b; }
.podio-1 .podio-block { height: 95px; background: linear-gradient(180deg, #fef3c7, #fde68a); border: 1px solid #f59e0b; }

.podio-2 .podio-avatar { background: #f1f5f9; border: 2px solid #94a3b8; }
.podio-2 .podio-block { height: 75px; background: linear-gradient(180deg, #f8fafc, #e2e8f0); border: 1px solid #cbd5e1; }

.podio-3 .podio-avatar { background: #ffedd5; border: 2px solid #ea580c; }
.podio-3 .podio-block { height: 60px; background: linear-gradient(180deg, #fff7ed, #ffedd5); border: 1px solid #fed7aa; }

.podio-pos-label {
  font-size: 18px;
  font-weight: 900;
  color: #1e293b;
}

.podio-nombre {
  font-size: 11px;
  font-weight: 800;
  color: #1e293b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 85px;
}

.podio-ventas {
  font-size: 10px;
  font-weight: 700;
  color: #059669;
}

/* Fila de la Tabla del Ranking */
.ranking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
}

.ranking-row.mi-usuario {
  background: #eff6ff;
  border-color: #93c5fd;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.2);
}

.ranking-pos {
  font-weight: 900;
  width: 24px;
  color: #475569;
}

/* ====================================================================
   TEMA MODO OSCURO (PROFESIONAL, ALTO CONTRASTE, DESCANSO VISUAL)
   Paleta Zinc sólida, sin parches claros y máxima legibilidad
   ==================================================================== */
body.dark-mode {
  --bg-page: #09090b;
  --bg-card: #18181b;
  --bg-input: #121215;
  --bg-subtle: #202024;

  --text: #f4f4f5;
  --text-main: #f4f4f5;
  --text-body: #d4d4d8;
  --text-muted: #a1a1aa;
  --text-light: #71717a;

  --border: #27272a;
  --border-strong: #3f3f46;

  --primary: #f4f4f5;
  --primary-hover: #e4e4e7;
  --primary-light: #202024;

  --green: #10b981;
  --green-light: #052e16;
  --green-border: #047857;

  --amber: #f59e0b;
  --amber-light: #451a03;
  --amber-border: #78350f;

  --red: #ef4444;
  --red-light: #450a0a;
  --red-border: #7f1d1d;

  --blue: #3b82f6;
  --blue-light: #172554;
}

body.dark-mode header,
body.dark-mode .bottom-nav,
body.dark-mode .card,
body.dark-mode .metric-card,
body.dark-mode .modal-content,
body.dark-mode .search-bento-box,
body.dark-mode .lead-lote-card,
body.dark-mode #lead-1x1-card,
body.dark-mode .lead-hero-card,
body.dark-mode .sale-item,
body.dark-mode .campaign-banner,
body.dark-mode .wa-pitch-box,
body.dark-mode .login-overlay form,
body.dark-mode .rango-banner,
body.dark-mode .agenda-lead-card,
body.dark-mode .wizard-step-card,
body.dark-mode .notif-item {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-body);
}

body.dark-mode .lead-hero-phone {
  color: #f4f4f5 !important;
}

body.dark-mode .lead-hero-name {
  color: #f4f4f5 !important;
}

body.dark-mode .lead-meta-pill {
  background: var(--bg-subtle) !important;
  color: var(--text-body) !important;
  border-color: var(--border) !important;
}

body.dark-mode .btn-outcome-nocontesta {
  background: #450a0a !important;
  color: #fecdd3 !important;
  border-color: #7f1d1d !important;
}

body.dark-mode .btn-outcome-rellamar {
  background: #272008 !important;
  color: #fef08a !important;
  border-color: #78350f !important;
}

body.dark-mode .btn-outcome-nointeresa {
  background: var(--bg-subtle) !important;
  color: var(--text-body) !important;
  border-color: var(--border) !important;
}

body.dark-mode .btn-outcome-venta {
  background: #f4f4f5 !important;
  color: #09090b !important;
  border-color: #f4f4f5 !important;
}

body.dark-mode .btn-header-icon {
  background: var(--bg-subtle) !important;
  color: var(--text-body) !important;
  border-color: var(--border) !important;
}

body.dark-mode .btn-header-icon:hover {
  background: #27272a !important;
}

body.dark-mode .user-profile-name {
  color: var(--text-main) !important;
}

body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode .form-textarea,
body.dark-mode .wa-pitch-select,
body.dark-mode .wa-pitch-textarea {
  background-color: var(--bg-input) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-main) !important;
}

body.dark-mode .form-label,
body.dark-mode .brand-title,
body.dark-mode .card-title,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode .modal-header h3 {
  color: var(--text-main) !important;
}

body.dark-mode .setting-toggle-row {
  border-color: var(--border) !important;
}

body.dark-mode .setting-toggle-row div div:first-child {
  color: var(--text-main) !important;
}

body.dark-mode .switch-input {
  background: #3f3f46 !important;
}

body.dark-mode .switch-input:checked {
  background: #10b981 !important;
}

body.dark-mode .mode-toggle {
  background-color: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}

body.dark-mode .mode-btn {
  color: var(--text-muted);
}

body.dark-mode .mode-btn.active {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
}

body.dark-mode .ranking-row {
  background-color: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--text-body);
}

body.dark-mode .ranking-row.mi-usuario {
  background-color: #172554 !important;
  border-color: #3b82f6 !important;
}

body.dark-mode .ranking-pos {
  color: var(--text-muted) !important;
}

body.dark-mode #card-desglose-ajustes {
  background-color: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}

body.dark-mode #card-ver-tarifario-venta {
  background-color: #272008 !important;
  border-color: #78350f !important;
}

body.dark-mode #card-bitel-credenciales {
  background-color: #272008 !important;
  border-color: #78350f !important;
}

body.dark-mode #card-bitel-credenciales div {
  color: #fde68a !important;
}

body.dark-mode #card-bitel-credenciales span {
  color: #fef08a !important;
}

body.dark-mode #historial-resumen-barra {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-body) !important;
}

body.dark-mode .btn-secondary,
body.dark-mode .btn-outline {
  background-color: var(--bg-subtle) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-main) !important;
}

body.dark-mode .btn-primary {
  background-color: #f4f4f5 !important;
  color: #09090b !important;
  border-color: #f4f4f5 !important;
}

body.dark-mode .btn-primary:hover {
  background-color: #e4e4e7 !important;
}

body.dark-mode .rango-progress-track {
  background-color: var(--bg-subtle) !important;
}

body.dark-mode .podio-1 .podio-avatar {
  background: #272008 !important;
  border-color: #f59e0b !important;
}

body.dark-mode .podio-1 .podio-block {
  background: linear-gradient(180deg, #3b2a05, #1c1402) !important;
  border-color: #b45309 !important;
}

body.dark-mode .podio-2 .podio-avatar {
  background: #27272a !important;
  border-color: #71717a !important;
}

body.dark-mode .podio-2 .podio-block {
  background: linear-gradient(180deg, #27272a, #18181b) !important;
  border-color: #3f3f46 !important;
}

body.dark-mode .podio-3 .podio-avatar {
  background: #2c1205 !important;
  border-color: #ea580c !important;
}

body.dark-mode .podio-3 .podio-block {
  background: linear-gradient(180deg, #361705, #190a02) !important;
  border-color: #9a3412 !important;
}

body.dark-mode .podio-pos-label,
body.dark-mode .podio-nombre {
  color: #f4f4f5 !important;
}

/* ====================================================================
   SOBREESCRITURAS GLOBALES CONTRA PARCHES CLAROS Y TEXTO ILEGIBLE
   ==================================================================== */
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode [style*="background: #fff;"],
body.dark-mode [style*="background:#fff;"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:white"] {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-body);
}

body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background:#f8fafc"],
body.dark-mode [style*="background: #f1f5f9"],
body.dark-mode [style*="background:#f1f5f9"],
body.dark-mode [style*="background: #f9fafb"],
body.dark-mode [style*="background:#f9fafb"] {
  background-color: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--text-body);
}

/* Cajas y alertas ámbar/amarillo */
body.dark-mode [style*="background: #fffbeb"],
body.dark-mode [style*="background:#fffbeb"],
body.dark-mode [style*="background: #fef3c7"],
body.dark-mode [style*="background:#fef3c7"] {
  background-color: #272008 !important;
  border-color: #78350f !important;
  color: #fef08a !important;
}

/* Cajas y badges verdes */
body.dark-mode [style*="background: #ecfdf5"],
body.dark-mode [style*="background:#ecfdf5"],
body.dark-mode [style*="background: #f0fdf4"],
body.dark-mode [style*="background:#f0fdf4"],
body.dark-mode [style*="background: #dcfce7"],
body.dark-mode [style*="background:#dcfce7"] {
  background-color: #052e16 !important;
  border-color: #047857 !important;
  color: #86efac !important;
}

/* Cajas y badges azules */
body.dark-mode [style*="background: #eff6ff"],
body.dark-mode [style*="background:#eff6ff"],
body.dark-mode [style*="background: #eef2ff"],
body.dark-mode [style*="background:#eef2ff"] {
  background-color: #172554 !important;
  border-color: #1e3a8a !important;
  color: #93c5fd !important;
}

/* Cajas y badges rojas */
body.dark-mode [style*="background: #fff1f2"],
body.dark-mode [style*="background:#fff1f2"],
body.dark-mode [style*="background: #fef2f2"],
body.dark-mode [style*="background:#fef2f2"] {
  background-color: #450a0a !important;
  border-color: #7f1d1d !important;
  color: #fecdd3 !important;
}

/* Corrección de textos oscuros hardcodeados a alto contraste */
body.dark-mode [style*="color: #0f172a"],
body.dark-mode [style*="color:#0f172a"],
body.dark-mode [style*="color: #1e293b"],
body.dark-mode [style*="color:#1e293b"],
body.dark-mode [style*="color: #111827"],
body.dark-mode [style*="color:#111827"],
body.dark-mode [style*="color: #1f2937"],
body.dark-mode [style*="color:#1f2937"],
body.dark-mode [style*="color: #334155"],
body.dark-mode [style*="color:#334155"],
body.dark-mode [style*="color: #374151"],
body.dark-mode [style*="color:#374151"] {
  color: var(--text-main) !important;
}

body.dark-mode [style*="color: #475569"],
body.dark-mode [style*="color:#475569"],
body.dark-mode [style*="color: #64748b"],
body.dark-mode [style*="color:#64748b"],
body.dark-mode [style*="color: #6b7280"],
body.dark-mode [style*="color:#6b7280"] {
  color: var(--text-muted) !important;
}

body.dark-mode [style*="color: #92400e"],
body.dark-mode [style*="color:#92400e"],
body.dark-mode [style*="color: #78350f"],
body.dark-mode [style*="color:#78350f"],
body.dark-mode [style*="color: #713f12"],
body.dark-mode [style*="color:#713f12"] {
  color: #fde68a !important;
}

body.dark-mode [style*="color: #065f46"],
body.dark-mode [style*="color:#065f46"],
body.dark-mode [style*="color: #047857"],
body.dark-mode [style*="color:#047857"] {
  color: #6ee7b7 !important;
}

body.dark-mode [style*="color: #1e40af"],
body.dark-mode [style*="color:#1e40af"],
body.dark-mode [style*="color: #1d4ed8"],
body.dark-mode [style*="color:#1d4ed8"],
body.dark-mode [style*="color: #2563eb"],
body.dark-mode [style*="color:#2563eb"] {
  color: #93c5fd !important;
}

/* Bordes hardcodeados claros a borde oscuro */
body.dark-mode [style*="border: 1px solid #e2e8f0"],
body.dark-mode [style*="border:1px solid #e2e8f0"],
body.dark-mode [style*="border: 1px solid #cbd5e1"],
body.dark-mode [style*="border:1px solid #cbd5e1"],
body.dark-mode [style*="border: 1px solid #e5e7eb"],
body.dark-mode [style*="border:1px solid #e5e7eb"],
body.dark-mode [style*="border: 1.5px solid #cbd5e1"],
body.dark-mode [style*="border: 1px solid var(--border)"],
body.dark-mode [style*="border-color: #cbd5e1"],
body.dark-mode [style*="border-color:#cbd5e1"],
body.dark-mode [style*="border-color: #e2e8f0"],
body.dark-mode [style*="border-color:#e2e8f0"],
body.dark-mode [style*="border-color: #e5e7eb"],
body.dark-mode [style*="border-color:#e5e7eb"],
body.dark-mode [style*="border-bottom: 2px solid #e2e8f0"],
body.dark-mode [style*="border-bottom: 1px solid #f1f5f9"],
body.dark-mode [style*="border-top: 1px dashed #e2e8f0"] {
  border-color: var(--border) !important;
}

/* Tablas en modo oscuro */
body.dark-mode table thead tr {
  background: var(--bg-subtle) !important;
}
body.dark-mode table th {
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
body.dark-mode table td {
  color: var(--text-body) !important;
  border-color: var(--border) !important;
}
body.dark-mode table tr {
  border-color: var(--border) !important;
}

/* Botones chips, acordeones y modales */
body.dark-mode .wa-var-chip {
  background: var(--bg-subtle) !important;
  color: var(--text-main) !important;
  border-color: var(--border-strong) !important;
}
body.dark-mode #btn-toggle-speech-editor {
  background: var(--bg-subtle) !important;
  color: var(--text-main) !important;
  border-color: var(--border-strong) !important;
}
body.dark-mode .lead-acordeon-panel,
body.dark-mode .lead-1x1-acordeon-panel {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}
body.dark-mode .celebracion-card {
  background: var(--bg-card) !important;
  color: var(--text-body) !important;
}
body.dark-mode .celebracion-titulo {
  color: var(--text-main) !important;
}
body.dark-mode .celebracion-detalles {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--text-body) !important;
}
body.dark-mode .accordion-item {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
body.dark-mode .accordion-header {
  background: var(--bg-subtle) !important;
  color: var(--text-main) !important;
}
body.dark-mode .accordion-body {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* ====================================================================
   ESTUDIO WHATSAPP EN MODO OSCURO (SIN BLANCOS NI GRADIENTES CLAROS)
   ==================================================================== */
body.dark-mode #wa-pitch-container,
body.dark-mode .wa-pitch-box {
  background: var(--bg-card) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid #10b981 !important;
  box-shadow: none !important;
  color: var(--text-body) !important;
}

body.dark-mode .wa-pitch-header span {
  color: #6ee7b7 !important;
}

body.dark-mode #wa-pitch-status {
  background: #052e16 !important;
  color: #86efac !important;
  border: 1px solid #047857 !important;
}

body.dark-mode #btn-nuevo-speech {
  background: #172554 !important;
  color: #93c5fd !important;
  border-color: #1e3a8a !important;
}

body.dark-mode #btn-ir-promos-quick {
  background: #052e16 !important;
  color: #86efac !important;
  border-color: #047857 !important;
}

body.dark-mode #btn-toggle-speech-editor {
  background: var(--bg-subtle) !important;
  color: var(--text-main) !important;
  border-color: var(--border-strong) !important;
}

body.dark-mode #wa-template-select {
  background-color: var(--bg-input) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-main) !important;
}

body.dark-mode #wa-custom-pitch-box {
  border-top-color: var(--border) !important;
}

body.dark-mode #wa-custom-pitch-name {
  background-color: var(--bg-input) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-main) !important;
}

body.dark-mode #wa-custom-pitch-text {
  background-color: var(--bg-input) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-main) !important;
}

body.dark-mode #wa-autosave-indicator {
  background: #052e16 !important;
  color: #86efac !important;
  border-color: #047857 !important;
}

body.dark-mode #btn-auto-sinonimos {
  background: #272008 !important;
  color: #fef08a !important;
  border-color: #78350f !important;
}

body.dark-mode #btn-upload-custom-promo-quick {
  background: #052e16 !important;
  color: #86efac !important;
  border-color: #047857 !important;
}

body.dark-mode #btn-quick-toggle-promo {
  background: #172554 !important;
  color: #93c5fd !important;
  border-color: #1e3a8a !important;
}

body.dark-mode #wa-promo-selector-section {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}

body.dark-mode #wa-promo-selector-section span {
  color: var(--text-main) !important;
}

body.dark-mode #btn-upload-custom-promo {
  background: #172554 !important;
  color: #93c5fd !important;
  border-color: #1e3a8a !important;
}

body.dark-mode #wa-promo-thumbs-strip button {
  background: var(--bg-card) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-main) !important;
}

body.dark-mode #wa-preview-wrapper,
body.dark-mode [style*="background: #efeae2"],
body.dark-mode [style*="background:#efeae2"] {
  background: #0c1317 !important;
  border-color: #1f2c34 !important;
}

body.dark-mode #wa-bubble-preview-card,
body.dark-mode [style*="background: #dcf8c6"],
body.dark-mode [style*="background:#dcf8c6"] {
  background: #005c4b !important;
  color: #e9edef !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode #wa-bubble-preview-card #wa-bubble-preview-text {
  color: #e9edef !important;
}

body.dark-mode #wa-bubble-preview-img-wrap {
  background: #111b21 !important;
  border-color: #222e35 !important;
}

body.dark-mode #btn-preview-rotate-antiban {
  background: var(--bg-subtle) !important;
  color: var(--text-main) !important;
  border-color: var(--border-strong) !important;
}

/* Modales con gradiente inline */
body.dark-mode [style*="linear-gradient(135deg, #eff6ff"],
body.dark-mode [style*="linear-gradient(135deg, #fffbeb"],
body.dark-mode [style*="linear-gradient(135deg, #f8fafc"] {
  background-image: none !important;
  background-color: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}

/* ====================================================================
   SECCIÓN GUÍAS: VIDEOTUTORIALES Y MATERIAL PROMOCIONAL
   ==================================================================== */
.guide-nav-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
  scrollbar-width: none;
}
.guide-nav-pills::-webkit-scrollbar {
  display: none;
}
.guide-pill {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--bg-card);
  color: var(--text-body);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.guide-pill:hover, .guide-pill.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.guide-video-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.guide-video-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 8px;
}
.guide-video-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.3;
}
.guide-video-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 10px;
}
.guide-video-player-box {
  position: relative;
  background: #000000;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid #1f2937;
}
.guide-video-player {
  width: 100%;
  max-height: 280px;
  display: block;
  background: #000;
  outline: none;
}
.guide-video-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  gap: 6px;
  flex-wrap: wrap;
}

/* Galería de Promociones */
.promo-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.promo-filter-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
}
.promo-filter-btn.active {
  background: #059669;
  border-color: #059669;
  color: #ffffff;
}

.promo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 640px) {
  .promo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.promo-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.promo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.promo-thumb-container {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background: #e5e7eb;
  cursor: pointer;
  overflow: hidden;
}
.promo-thumb-container.vertical {
  padding-top: 155%;
}
.promo-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}
.promo-card:hover .promo-thumb {
  transform: scale(1.03);
}
.promo-tag-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(17, 24, 39, 0.85);
  backdrop-filter: blur(4px);
  color: #fef08a;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.promo-card-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}
.promo-card-title {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.25;
  margin-bottom: 4px;
}
.promo-card-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.promo-card-actions {
  display: flex;
  gap: 4px;
}

/* Modal Lightbox de Imagen */
.promo-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 3500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.promo-lightbox-content {
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.promo-lightbox-img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Dark mode overrides */
body.dark-mode .guide-video-card,
body.dark-mode .promo-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}
body.dark-mode .guide-pill {
  background-color: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}
body.dark-mode .guide-pill.active {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}
body.dark-mode .promo-filter-btn {
  background-color: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
body.dark-mode .promo-filter-btn.active {
  background-color: #059669 !important;
  color: #ffffff !important;
}

/* ====================================================================
   ESTRUCTURA BASE ADAPTABLE (MOBILE-FIRST)
   Por defecto en móvil (< 1024px) los contenedores son transparentes
   ==================================================================== */
.desktop-nav {
  display: none;
}

.base-info-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0 0 6px 0;
  margin-bottom: 8px;
  font-size: 11px;
  box-shadow: none;
  transition: all 0.15s ease;
}

.base-info-strip:hover {
  background: transparent;
  opacity: 0.9;
}

body.dark-mode .base-info-strip {
  background: transparent;
  border-color: #334155;
  border-left: none;
}

.btn-request-lote {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.25);
  transition: all 0.15s ease;
}

.btn-request-lote:hover:not(:disabled) {
  background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(79, 70, 229, 0.35);
}

.btn-request-lote:active:not(:disabled) {
  transform: translateY(0);
}

.btn-request-lote:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  box-shadow: none;
}

.tab-base-layout,
.tab-base-controls,
.tab-base-workspace {
  display: contents;
}

/* ====================================================================
   DRAWER LATERAL DESLIZABLE: PERFIL & CENTRO DE CONFIGURACIÓN
   ==================================================================== */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: #ffffff;
  box-shadow: -4px 0 25px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}

.drawer-overlay.open .drawer-panel {
  transform: translateX(0);
}

.drawer-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
}

.drawer-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #09090b;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
}

.drawer-close-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
}

.drawer-body {
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drawer-card {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.drawer-card-label {
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.drawer-menu-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.drawer-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  text-align: left;
}

.drawer-menu-item:hover {
  background: #f8fafc;
  border-color: var(--border-strong);
}

.drawer-menu-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drawer-item-icon {
  font-size: 16px;
  line-height: 1;
}

.drawer-item-chevron {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

.drawer-footer-actions {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.dark-mode .drawer-panel {
  background: #18181b;
  box-shadow: -4px 0 25px rgba(0, 0, 0, 0.6);
}

body.dark-mode .drawer-header {
  background: #121215;
  border-color: #27272a;
}

body.dark-mode .drawer-card {
  background: #202024;
  border-color: #2e2e33;
}

body.dark-mode .drawer-menu-item {
  background: #202024;
  border-color: #2e2e33;
  color: #f4f4f5;
}

body.dark-mode .drawer-menu-item:hover {
  background: #27272a;
}

/* ====================================================================
   OPTIMIZACIÓN MÓVIL: CERO BOTONES ARRIBA - INTERFAZ 100% LIMPIA
   ==================================================================== */
@media (max-width: 1023px) {
  header {
    display: none !important;
  }

  main {
    padding-top: 10px !important;
  }

  /* Ocultar etiquetas largas en botones del header para móvil */
  .hide-mobile-label {
    display: none !important;
  }

  /* MÉTRICAS EN MÓVIL: OCULTAS DEL TOP PARA DEJAR PANTALLA 100% LIMPIA */
  .metrics-grid {
    display: none !important;
  }

  .rango-banner {
    margin: 0 0 6px 0;
    padding: 5px 8px;
    border-radius: 8px;
  }

  .card {
    padding: 10px 12px;
    margin-bottom: 6px;
  }
}

body.dark-mode .metrics-grid {
  background: #18181b !important;
  border-color: #27272a !important;
}

body.dark-mode .metric-card:not(:last-child)::after {
  background: #27272a !important;
}

/* ====================================================================
   OPTIMIZACIÓN EXCLUSIVA PARA ESCRITORIO / PC (PANTALLAS >= 1024px)
   Convierte la pantalla de PC en un centro de operaciones profesional
   ==================================================================== */
@media (min-width: 1024px) {
  body {
    background-color: #f1f5f9;
    padding-bottom: 24px;
  }

  body.dark-mode {
    background-color: var(--bg-page);
  }

  /* Centro de Trabajo BPO Proporcional en PC */
  #dashboard-app {
    max-width: 1240px;
    margin: 0 auto;
    min-height: 100vh;
    background: #ffffff;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    position: relative;
    display: flex;
    flex-direction: column;
  }

  body.dark-mode #dashboard-app {
    background: var(--bg-page);
    border-color: var(--border);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  }

  header {
    padding: 10px 24px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  /* Navegación de Escritorio en Cabecera */
  .desktop-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid var(--border);
    padding: 3px 5px;
    border-radius: 10px;
  }

  body.dark-mode .desktop-nav {
    background: var(--bg-card);
    border-color: var(--border);
  }

  .desktop-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .desktop-nav-item:hover {
    color: var(--text-main);
    background: #e2e8f0;
  }

  body.dark-mode .desktop-nav-item:hover {
    color: var(--text-main);
    background: var(--bg-subtle);
  }

  .desktop-nav-item.active {
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  body.dark-mode .desktop-nav-item.active {
    background: var(--bg-subtle);
    color: var(--text-main);
    border: 1px solid var(--border-strong);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  .live-ticker-bar {
    margin: 6px 20px;
    border-radius: 8px;
  }

  /* Barra de Métricas y KPIs con proporciones amplias */
  .metrics-grid {
    max-width: 100%;
    padding: 8px 20px;
    gap: 12px;
  }

  .metric-card {
    padding: 10px 14px;
    border-radius: var(--radius-md);
  }

  .metric-label {
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .metric-value {
    font-size: 18px;
  }

  .rango-banner {
    margin: 4px 20px 10px 20px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
  }

  main {
    max-width: 100%;
    padding: 8px 20px 30px 20px;
  }

  /* Distribución de 2 Columnas para Prospección en PC */
  .tab-base-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 18px;
    align-items: start;
  }

  .tab-base-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 68px;
    z-index: 10;
  }

  .tab-base-workspace {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .card {
    padding: 14px 16px;
    margin-bottom: 12px;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.05);
  }

  .lead-lote-card {
    padding: 12px 14px;
    border-radius: 10px;
  }

  /* Barra de Navegación Dock en Escritorio (elegante, discreta y funcional) */
  .bottom-nav {
    max-width: 460px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    border-radius: 9999px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    padding: 4px 14px;
    z-index: 90;
  }

  body.dark-mode .bottom-nav {
    background: rgba(24, 24, 27, 0.95);
    border-color: var(--border);
    box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.5);
  }

  .nav-item {
    padding: 5px 14px;
    border-radius: 20px;
    transition: all 0.15s ease;
    cursor: pointer;
  }

  .nav-item:hover {
    background: #f3f4f6;
  }

  body.dark-mode .nav-item:hover {
    background: var(--bg-subtle);
  }

  .nav-item.active {
    background: #eef2ff;
    color: var(--primary);
  }

  body.dark-mode .nav-item.active {
    background: var(--bg-subtle);
    color: var(--text-main);
  }
}

/* ====================================================================
   WIZARD DE VENTA MÓVIL (3 PASOS INTUITIVOS)
   ==================================================================== */
.wizard-stepper-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-bottom: 12px;
}

body.dark-mode .wizard-stepper-container {
  background: var(--bg-card);
  border-color: var(--border);
}

.wizard-step-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s ease;
}

.wizard-step-item.active {
  opacity: 1;
}

.wizard-step-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

body.dark-mode .wizard-step-circle {
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.wizard-step-item.active .wizard-step-circle {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

body.dark-mode .wizard-step-item.active .wizard-step-circle {
  background: #f4f4f5;
  color: #09090b;
  box-shadow: 0 0 0 3px rgba(244, 244, 245, 0.2);
}

.wizard-step-item.completed .wizard-step-circle {
  background: var(--green);
  color: #ffffff;
}

.wizard-step-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

body.dark-mode .wizard-step-label {
  color: var(--text-light);
}

.wizard-step-item.active .wizard-step-label {
  color: var(--primary);
}

body.dark-mode .wizard-step-item.active .wizard-step-label {
  color: var(--text-main);
}

.wizard-step-line {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  margin: 0 8px;
  transition: background 0.2s ease;
}

body.dark-mode .wizard-step-line {
  background: var(--border);
}

.wizard-step-card {
  border-radius: var(--radius-md);
  border: 1px solid #e2e8f0;
  padding: 12px;
  margin-bottom: 12px;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.dark-mode .wizard-step-card {
  background: var(--bg-card);
  border-color: var(--border);
}

.wizard-step-card.active-step {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

body.dark-mode .wizard-step-card.active-step {
  border-color: #52525b;
  box-shadow: 0 0 0 1px #52525b;
}

.wizard-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #e2e8f0;
}

body.dark-mode .wizard-step-header {
  border-bottom-color: var(--border);
}

.wizard-step-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wizard-step-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #eef2ff;
  color: var(--primary);
}

body.dark-mode .wizard-step-badge {
  background: var(--bg-subtle);
  color: var(--text-main);
}

.wizard-nav-btn {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ====================================================================
   CENTRO DE NOTIFICACIONES Y RE-ENGANCHE (RETENCIÓN)
   ==================================================================== */
.btn-notif-bell {
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.btn-notif-bell:hover {
  transform: scale(1.05);
}

.notif-badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ffffff;
  animation: pulseNotif 2s infinite;
}

@keyframes pulseNotif {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); }
  100% { transform: scale(1); }
}

.notif-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif-item {
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: #ffffff;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  transition: all 0.2s ease;
  position: relative;
}

body.dark-mode .notif-item {
  background: var(--bg-card);
  border-color: var(--border);
}

.notif-item.unread {
  border-left: 4px solid var(--primary);
  background: #f8fafc;
}

body.dark-mode .notif-item.unread {
  background: #182235;
  border-left-color: #3b82f6;
}

.notif-item-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.notif-item-content {
  flex: 1;
  min-width: 0;
}

.notif-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.notif-item-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.notif-item-time {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

.notif-item-body {
  font-size: 11.5px;
  color: #4b5563;
  line-height: 1.35;
  margin-bottom: 6px;
}

body.dark-mode .notif-item-body {
  color: #94a3b8;
}

.notif-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary);
  color: #ffffff;
  border: none;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.notif-cta-btn:hover {
  opacity: 0.9;
}

/* ====================================================================
   APARTADO: AGENDA DE CONTACTOS & SEGUIMIENTO (LEADS CON NOTAS)
   ==================================================================== */
.badge-agenda-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 9999px;
  margin-left: 4px;
}

.badge-agenda-pill-mobile {
  position: absolute;
  top: 1px;
  right: 14px;
  background: #f59e0b;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  padding: 0.5px 4.5px;
  border-radius: 9999px;
  line-height: 1.2;
}

.agenda-lead-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.agenda-lead-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.agenda-nota-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0;
  font-size: 11.5px;
  color: #92400e;
  line-height: 1.4;
}

.agenda-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
}

body.dark-mode .agenda-lead-card {
  background: var(--bg-card);
  border-color: var(--border);
}

body.dark-mode .agenda-nota-box {
  background: #272008;
  border-color: #78350f;
  color: #fde68a;
}

body.dark-mode .agenda-date-badge {
  background: #052e16;
  border-color: #047857;
  color: #86efac;
}

/* ====================================================================
   SEGMENTED TABS (BASE NUEVA / PENDIENTES VS SEGUNDO PLANO)
   ==================================================================== */
.btn-subtab {
  transition: all 0.15s ease;
  user-select: none;
}
.btn-subtab:hover {
  color: var(--text-main, #1e293b);
}
.btn-subtab.active {
  background: #ffffff !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  font-weight: 800 !important;
}
body.dark-mode .btn-subtab.active {
  background: #27272a !important;
  color: #f4f4f5 !important;
}