/* ════════════════════════════════════════════════════════════════
   SCM · v1.1 — Design System (rediseño 2026-04-25)
   Aplica decisiones de design system: paleta violeta, Geist, espaciado
   generoso, disciplina cromática. NO modifica lógica de negocio.
═════════════════════════════════════════════════════════════════ */

:root {
  /* ───── BACKGROUNDS (cálidos, baja fatiga) ───── */
  --bg-app: #0F1115;
  --bg-surface: #161922;
  --bg-elevated: #1C2030;
  --bg-hover: #1F2433;
  --bg-input: #11141B;
  --bg-sidebar: #0C0E13;

  /* ───── BORDERS ───── */
  --border-subtle: #1F2433;
  --border-default: #262B3B;
  --border-strong: #323847;

  /* ───── TEXT (no blanco puro, blanco cálido) ───── */
  --text-primary: #E5E7E2;
  --text-secondary: #B4B8C2;
  --text-tertiary: #7E8494;
  /* UX audit 2026-05-23: --text-faint era #565C6E sobre bg-app #0F1115 ≈ 2.82:1
     contrast — falla WCAG AA. Subido a #7E8494 (igual a --text-tertiary,
     5.05:1 → pasa AA) para labels footer/meta. */
  --text-faint: #7E8494;

  /* ───── ACCENT (violeta menos saturado, sostenible 8h) ───── */
  --accent: #9D85F2;
  --accent-hover: #B19CF5;
  --accent-soft: rgba(157, 133, 242, 0.10);
  --accent-medium: rgba(157, 133, 242, 0.18);
  --accent-strong: rgba(157, 133, 242, 0.30);

  /* ───── SEMANTIC (sólo cuando son funcionales) ───── */
  --success: #4ADE80;
  --success-soft: rgba(74, 222, 128, 0.10);
  --warning: #FBBF24;
  --warning-soft: rgba(251, 191, 36, 0.10);
  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, 0.10);
  --info: #60A5FA;
  --info-soft: rgba(96, 165, 250, 0.10);

  /* ───── TYPOGRAPHY ───── */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-tight: -0.02em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* ───── SPACING (4-based) ───── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ───── RADIUS ───── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 999px;

  /* ───── SHADOWS ───── */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.20);
  --shadow-md: 0 2px 8px 0 rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 24px 0 rgba(0,0,0,0.35);

  /* ───── TRANSITIONS ───── */
  --transition-fast: 100ms ease-out;
  --transition-base: 150ms ease-out;
  --transition-slow: 250ms ease-out;

  /* ───── LAYOUT ───── */
  --sidebar-width: 240px;

  /* Compatibilidad con código legacy que aún use estos nombres */
  --primary-color: var(--accent);
  --bg-active: var(--accent-soft);
  --text-main: var(--text-primary);
  --border-color: var(--border-default);
  --font-family: var(--font-sans);
  --surface-color: var(--bg-surface);
  --bg-secondary: var(--bg-input);
  --text-primary-color: var(--text-primary);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background-color: var(--bg-app);
  color: var(--text-primary);
  line-height: 1.55;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-md); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ════════════════════════════════════════════════════════════════
   AUTH SCREEN
═════════════════════════════════════════════════════════════════ */

.auth-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, var(--accent-soft), transparent 36%), var(--bg-app);
  z-index: 2000;
  padding: var(--space-6);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.auth-brand { margin-bottom: var(--space-5); }
.auth-subtitle {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-form input,
.auth-form select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);
  transition: var(--transition-fast);
}

.auth-form input:focus,
.auth-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.auth-form input::placeholder { color: var(--text-faint); }

.invite-panel {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.invite-panel h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
}

.auth-message {
  min-height: 20px;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.auth-message.error { color: var(--danger); }
.auth-message.success { color: var(--success); }

/* ════════════════════════════════════════════════════════════════
   LAYOUT
═════════════════════════════════════════════════════════════════ */

.ai-studio-layout {
  display: flex;
  /* UX audit 2026-05-23: 100vh rompe iOS Safari (chrome bar). 100dvh es dynamic
     viewport units, ajusta automaticamente cuando aparece/desaparece la barra. */
  height: 100dvh;
  min-height: 100vh; /* fallback para browsers que no soporten dvh */
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR
═════════════════════════════════════════════════════════════════ */

.sidebar {
  width: var(--sidebar-width);
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width var(--transition-slow);
}

.sidebar.collapsed { width: 64px; overflow-x: hidden; }
.sidebar.collapsed .menu-group { overflow-x: hidden; }
.sidebar.collapsed .logo h1,
.sidebar.collapsed .menu-group-label,
.sidebar.collapsed #logout-btn,
.sidebar.collapsed .sidebar-footer,
.sidebar.collapsed .menu-item > span:not(.menu-icon) { display: none !important; }
.sidebar.collapsed .menu-item {
  justify-content: center;
  padding: 0;
  margin: var(--space-1) auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  position: relative;
  gap: 0;
}
.sidebar.collapsed .menu-item:hover::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + var(--space-3));
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  white-space: nowrap;
  font-size: var(--text-xs);
  z-index: 1000;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

.sidebar-header {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  gap: var(--space-2);
}

.logo,
.logo-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: var(--space-1);
  margin-left: -4px;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  color: inherit;
  font-family: inherit;
}

.logo-toggle:hover { background: var(--bg-hover); }

.logo-mark {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent) 0%, #7C5DDB 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  color: var(--bg-app);
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.logo-toggle:hover .logo-mark { transform: scale(1.06); }

.logo h1 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  color: var(--text-primary);
}

/* En sidebar colapsado: la S queda centrada y es el toggle. Oculto el menu-toggle redundante. */
.sidebar.collapsed .sidebar-header {
  padding: 0;
  justify-content: center;
}

.sidebar.collapsed .logo-toggle {
  margin: 0;
  padding: var(--space-2);
}

.sidebar.collapsed .menu-toggle {
  display: none;
}

.menu-toggle {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.menu-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-3) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.menu-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: rgba(229, 231, 226, 0.35);
  font-weight: 700;
  padding: 0 12px;
  margin-top: 18px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Línea sutil después del label para separar visualmente la categoría */
.menu-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(229, 231, 226, 0.08), transparent 80%);
}

.menu-group-label:first-child { margin-top: 4px; }

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition-fast);
  margin-bottom: 1px;
}

.menu-item .menu-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 1.75;
  color: currentColor;
}

.menu-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.menu-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--weight-medium);
}

.sidebar-footer {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.history-badge {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

#logout-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: var(--transition-fast);
  width: 100%;
  text-align: left;
}

#logout-btn:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

/* ════════════════════════════════════════════════════════════════
   CONTENT MAIN
═════════════════════════════════════════════════════════════════ */

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--bg-app);
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-8) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.content-header h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.header-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.text-link {
  font-size: var(--text-sm);
  color: var(--accent);
  text-decoration: none;
  transition: var(--transition-fast);
}

.text-link:hover { color: var(--accent-hover); }

/* ════════════════════════════════════════════════════════════════
   BOTONES (Design System)
═════════════════════════════════════════════════════════════════ */

.btn,
.pill-btn,
.btn-table-action {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  line-height: 1;
  height: 32px;
  white-space: nowrap;
}

.btn-primary,
.pill-btn.btn-primary,
button.btn-primary {
  background: var(--accent);
  color: var(--bg-app);
  border-color: transparent;
}

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

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger-soft);
}
.btn-danger:hover {
  background: var(--danger-soft);
}

.btn-sm,
.btn-table-action.btn-sm { height: 26px; font-size: var(--text-xs); padding: 0 var(--space-3); }
.btn-lg { height: 38px; font-size: var(--text-base); padding: 0 var(--space-5); }

/* btn-table-action: estilo neutro por default, hover sutil */
.btn-table-action {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  height: 28px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}

.btn-table-action:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-table-action:disabled {
  background: var(--bg-surface);
  color: var(--text-faint);
  border-color: var(--border-subtle);
  cursor: not-allowed;
}

/* btn-text + loader interno */
.btn-text { display: inline-flex; align-items: center; gap: var(--space-2); }
.loader {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--accent-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   INPUTS / SELECTS / TEXTAREA
═════════════════════════════════════════════════════════════════ */

.input,
.select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
  font-family: inherit;
  font-size: var(--text-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  transition: var(--transition-fast);
}

input:not([type="checkbox"]):not([type="radio"]),
select { height: 32px; }

textarea {
  height: auto;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input::placeholder, textarea::placeholder { color: var(--text-faint); }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237E8494' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

/* Follow-up checkboxes en tabla de setteo: cuadraditos custom para que no se
   vean como cuadrado blanco del browser default. */
input.fu-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: var(--transition-fast);
}

input.fu-cb:hover {
  border-color: var(--accent);
}

input.fu-cb:checked {
  background: var(--accent);
  border-color: var(--accent);
}

input.fu-cb:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid var(--bg-app);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Social chips (IG/FB/IN) en tabla — mini-chips clickeables */
.social-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 26px;
  padding: 0 var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  text-decoration: none;
  margin: 0 2px;
  transition: var(--transition-fast);
}

.social-chip:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-strong);
}

/* <option> nativos: en muchos browsers no respetan background del padre.
   Forzamos colores oscuros para que el dropdown abierto se vea bien. */
option {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* Selects compactos en tablas (inline-select) */
.inline-select,
table select,
td select {
  height: 28px;
  font-size: var(--text-xs);
  padding: 0 var(--space-6) 0 var(--space-2);
  background-color: var(--bg-input);
  background-position: right var(--space-2) center;
  width: auto;
  min-width: 84px;
  max-width: 120px;
}

/* Inputs tipo "buscador" con icono dentro: aseguramos que no haya bg blanco */
input[type="search"],
input.search-input {
  background: var(--bg-input);
  color: var(--text-primary);
}

/* Override para autofill (Chrome pone bg blanco en autofill) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--bg-input) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  transition: background-color 5000s ease-in-out 0s;
}

/* Inputs de búsqueda específicos del legacy HTML (tienen styles inline). Los normalizamos. */
#setter-search,
#faq-search,
#training-search,
#history-search,
#cmd-variable-search,
#wsp-search {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: 0 var(--space-3) !important;
  height: 32px !important;
  font-size: var(--text-sm) !important;
  font-family: inherit !important;
}

#setter-search:focus,
#faq-search:focus,
#training-search:focus,
#history-search:focus,
#cmd-variable-search:focus,
#wsp-search:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL LOCATION PANEL + FILTERS
   Sólo se muestra cuando hay una vista activa que lo necesita
   (Maps, Redes). En Setteo, Llamadas, Comando, etc. queda oculto.
═════════════════════════════════════════════════════════════════ */

.global-location-panel {
  padding: var(--space-4) var(--space-8) var(--space-2);
  border-bottom: 0;
  display: none; /* default: oculto, se muestra abajo según vista activa */
}

/* Mostrar el filtro sólo cuando Maps o Redes están activos */
body:has(#view-maps.active) .global-location-panel,
body:has(#view-social.active) .global-location-panel {
  display: block;
}

.filters-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.agrupar-por {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
  margin-right: var(--space-2);
}

.ai-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
}

.ai-input-group.expanded { flex: 1; }

.floating-label {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
}

.select-pill select {
  background: var(--bg-input);
  border-radius: var(--radius-md);
}

.selected-cities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.city-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
  padding: 0 var(--space-2) 0 var(--space-3);
  background: var(--accent-soft);
  border: 1px solid var(--accent-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--accent);
}

.city-tag .remove-city {
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0 var(--space-1);
  font-size: var(--text-base);
}

/* ════════════════════════════════════════════════════════════════
   MODULE VIEWS
═════════════════════════════════════════════════════════════════ */

.module-view {
  display: none;
  padding: 0;
}

.module-view.active {
  display: block;
  flex: 1;
}

.module-view.hidden { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   SEARCH PANEL (Maps)
═════════════════════════════════════════════════════════════════ */

.search-panel {
  padding: var(--space-4) var(--space-8) var(--space-6);
}

.main-search-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}

.results-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-8);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.toolbar-left, .toolbar-right {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.results-count-wrapper {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.results-count-wrapper #results-count {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.filter-info {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

/* Progress bar */
.enrich-progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-8);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}

.progress-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width var(--transition-base);
}

#progress-text {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ════════════════════════════════════════════════════════════════
   RESULTS PANEL + TABLES
═════════════════════════════════════════════════════════════════ */

.results-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.table-container {
  overflow-x: auto;
  padding: var(--space-4) var(--space-8) var(--space-10);
}

/* La tabla del Setteo (view-crm) tiene 19 columnas — fuerza un ancho minimo
   en base al contenido real (max-content) Y un piso de 1800px para garantizar
   que SIEMPRE haya overflow horizontal en viewports estandar (incluso 1920px
   con sidebar colapsada). Antes, table { width: 100% } comprimia las celdas y
   los follow-ups (24h/48h/72h/7d/15d) quedaban casi invisibles a la derecha. */
#setter-table {
  width: auto;
  min-width: 1800px;
  table-layout: auto;
}

/* ════════════════════════════════════════════════════════════════
   PHASE setter-ux-redesign (2026-05-22)
   Mejoras de UX para setters: tabla mas aireada, modal con tabs,
   widget Hoy, banner welcome, sidebar separadores
═════════════════════════════════════════════════════════════════ */

/* Modo simple de la tabla del CRM (default para setters).
   Cuando setter-table tiene data-mode="simple", solo se muestran las
   columnas marcadas con data-essential="1" en el render. */
#setter-table[data-mode="simple"] {
  min-width: 0;
  width: 100%;
}
#setter-table[data-mode="simple"] td,
#setter-table[data-mode="simple"] th {
  padding: 16px 14px;
  font-size: 13px;
}
#setter-table[data-mode="simple"] tbody tr {
  min-height: 60px;
  transition: background-color 0.12s ease;
}
#setter-table[data-mode="simple"] tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.012);
}
#setter-table[data-mode="simple"] tbody tr:hover {
  background: rgba(157, 133, 242, 0.07);
}
/* Cuando modo simple esta activo, ocultar el floating scrollbar (no necesario) */
#view-crm:has(#setter-table[data-mode="simple"]) #crm-floating-scrollbar {
  display: none !important;
}

/* Botón toggle "ver tabla completa" — solo admin */
.table-mode-toggle {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(157, 133, 242, 0.08);
  color: var(--accent, #9d85f2);
  border: 1px solid rgba(157, 133, 242, 0.25);
  cursor: pointer;
  margin-left: 8px;
}
.table-mode-toggle:hover {
  background: rgba(157, 133, 242, 0.15);
}

/* ── Widget "Hoy" ────────────────────────────────────────── */
.hoy-widget {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  margin: 10px 0 14px;
  background: linear-gradient(135deg, rgba(157, 133, 242, 0.08) 0%, rgba(157, 133, 242, 0.02) 100%);
  border: 1px solid rgba(157, 133, 242, 0.22);
  border-radius: 14px;
}
.hoy-greet {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.hoy-greet #hoy-greet-text {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary, #E6EDF3);
}
.hoy-date {
  font-size: 12px;
  color: var(--text-secondary, #B8C2CC);
}
.hoy-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hoy-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color, #21262D);
  color: var(--text-primary, #E6EDF3);
  cursor: pointer;
  transition: all 0.15s ease;
}
.hoy-action-chip:hover {
  background: rgba(157, 133, 242, 0.10);
  border-color: var(--accent, #9d85f2);
  transform: translateY(-1px);
}
.hoy-action-chip.urgent {
  background: rgba(248, 81, 73, 0.10);
  border-color: rgba(248, 81, 73, 0.35);
  color: #f85149;
}
.hoy-action-chip.urgent:hover { background: rgba(248, 81, 73, 0.18); }
.hoy-action-chip.attention {
  background: rgba(255, 200, 40, 0.10);
  border-color: rgba(255, 200, 40, 0.35);
  color: #ffc828;
}
.hoy-action-chip.attention:hover { background: rgba(255, 200, 40, 0.18); }
.hoy-action-chip .num {
  font-weight: 700;
  font-size: 14px;
}
.hoy-today {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--text-secondary, #B8C2CC);
  padding-top: 8px;
  border-top: 1px dashed var(--border-color, #21262D);
  flex-wrap: wrap;
}
.hoy-today strong { color: var(--text-primary, #E6EDF3); margin-right: 4px; }

/* ── Modal del lead: tabs ────────────────────────────────── */
.lead-tabs-nav {
  display: flex;
  gap: 4px;
  margin: 16px 0 12px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  border: 1px solid var(--border-color, #21262D);
}
.lead-tab-btn {
  flex: 1;
  padding: 9px 14px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-secondary, #B8C2CC);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lead-tab-btn:hover {
  color: var(--text-primary, #E6EDF3);
  background: rgba(255, 255, 255, 0.03);
}
.lead-tab-btn.active {
  background: var(--accent, #9d85f2);
  color: #0E1117;
  font-weight: 600;
}
.lead-tab-content {
  animation: leadTabFadeIn 0.18s ease-out;
}
@keyframes leadTabFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Banner de bienvenida ────────────────────────────────── */
.welcome-banner {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 0;
  margin: 0 0 16px;
  background: linear-gradient(135deg, rgba(157, 133, 242, 0.12) 0%, rgba(91, 185, 116, 0.06) 100%);
  border: 1px solid rgba(157, 133, 242, 0.30);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.welcome-banner::before {
  content: '';
  width: 5px;
  background: linear-gradient(180deg, var(--accent, #9d85f2) 0%, var(--success, #5bb974) 100%);
}
.welcome-content {
  padding: 18px 20px;
  flex: 1;
}

/* ── Toast unificado (action feedback) ───────────────────── */
#scm-toast-container {
  position: fixed;
  bottom: 80px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}
.scm-toast {
  pointer-events: auto;
  padding: 11px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(30, 33, 40, 0.95);
  backdrop-filter: blur(8px);
  animation: scmToastIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scm-toast.success { background: rgba(91, 185, 116, 0.96); }
.scm-toast.error { background: rgba(248, 81, 73, 0.96); }
.scm-toast.warning { background: rgba(255, 200, 40, 0.96); color: #1a1d24; }
.scm-toast.info { background: rgba(121, 184, 255, 0.96); color: #0E1117; }
.scm-toast.removing {
  animation: scmToastOut 0.2s ease-in forwards;
}
@keyframes scmToastIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scmToastOut {
  to { opacity: 0; transform: translateX(40px); }
}

/* ── Sidebar separadores entre secciones ─────────────────── */
.sidebar-menu .menu-divider {
  height: 1px;
  margin: 14px 16px 6px;
  background: var(--border-color, #21262D);
  opacity: 0.5;
}
.sidebar-menu .menu-section-label {
  padding: 8px 18px 4px;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-tertiary, #7E8494);
  font-weight: 600;
}

/* Cuando la tabla está vacía (filtros sin resultados), quitar el min-width para
   que no aparezca scroll horizontal innecesario (causaba doble scrollbar al
   verse junto al floating scrollbar del viewport). */
#setter-table[data-empty="1"] {
  min-width: 100%;
  width: 100%;
}
/* Y ocultar el floating scrollbar cuando la tabla está vacía. */
#setter-table[data-empty="1"] ~ #crm-floating-scrollbar,
#view-crm:has(#setter-table[data-empty="1"]) #crm-floating-scrollbar {
  display: none !important;
}

/* Container de la tabla del Setteo: altura limitada para que el scrollbar
   horizontal NO quede al fondo del array completo de leads. Ademas tenemos
   un twin scrollbar fijo al fondo del viewport (#crm-floating-scrollbar) que
   se sincroniza con este container — asi en notebooks chiquitas siempre
   esta a mano. */
#view-crm .table-container {
  max-height: calc(100vh - 240px);
  overflow: auto;
  /* Engrosar scrollbar para que sea facil de agarrar */
  scrollbar-width: auto;
}
#view-crm .table-container::-webkit-scrollbar { height: 14px; width: 14px; }
#view-crm .table-container::-webkit-scrollbar-thumb {
  background: var(--accent, #9d85f2);
  border-radius: 7px;
  border: 2px solid var(--bg-app, #0f1115);
}
#view-crm .table-container::-webkit-scrollbar-track { background: var(--bg-elevated, #1a1d24); }

/* Twin scrollbar flotante: siempre visible al fondo del viewport mientras
   estoy en la vista CRM. Se sincroniza con la tabla via JS (ver crm-sticky-scrollbar). */
#crm-floating-scrollbar {
  position: fixed;
  bottom: 0;
  z-index: 50;
  height: 16px;
  background: var(--bg-app, #0f1115);
  border-top: 1px solid var(--border-color, #21262d);
  overflow-x: scroll;
  overflow-y: hidden;
  display: none; /* Se prende via JS solo cuando view-crm esta activo y hay overflow */
}
#crm-floating-scrollbar > div { height: 1px; }
#crm-floating-scrollbar::-webkit-scrollbar { height: 14px; }
#crm-floating-scrollbar::-webkit-scrollbar-thumb {
  background: var(--accent, #9d85f2);
  border-radius: 7px;
  border: 2px solid var(--bg-app, #0f1115);
}
#crm-floating-scrollbar::-webkit-scrollbar-track { background: var(--bg-elevated, #1a1d24); }
/* Encabezado sticky para no perder contexto al scrollear vertical dentro del container. */
#view-crm #setter-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-elevated);
}

/* Telefonos: nunca cortar a 2 lineas — leerlos asi es horrible y rompe la
   busqueda visual. La columna de telefono es la 4ta (#, fecha, nombre, telefono).
   Forzamos una sola linea aunque tenga espacios entre digitos. */
#view-crm #setter-table td:nth-child(4),
#view-crm #setter-table td:nth-child(4) a,
#view-crm #setter-table td:nth-child(4) span {
  white-space: nowrap;
}

/* Tabla compacta para listados densos (ej: tabla de Equipo en Centro de Comando)
   Reduce el padding y el font-size para que entren mas filas en pantalla. */
.compact-table table { font-size: 12px; }
.compact-table th { padding: 8px 12px; }
.compact-table td { padding: 8px 12px; }
.compact-table .btn-table-action { padding: 4px 8px; font-size: 11px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

thead {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
}

th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  white-space: nowrap;
}

td {
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

tbody tr { transition: var(--transition-fast); }
tbody tr:hover td {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Compatibility: leads-table del módulo WA usa estilos genéricos */
.leads-table {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Empty state — patrón DS: cuadradito accent + texto centrado */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  color: var(--text-tertiary);
}

.empty-state-content {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.empty-state-content::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  border: 1px solid var(--accent-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239D85F2' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='12' y1='18' x2='12' y2='12'/%3E%3Cline x1='9' y1='15' x2='15' y2='15'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: var(--space-2);
}

.empty-state h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.empty-state p {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0;
}

/* Cuando empty-state está dentro de una <td>, no aplicar el cuadradito (tablas viejas) */
td.empty-state {
  padding: var(--space-10) var(--space-4);
}

td.empty-state .empty-state-content::before {
  display: none;
}

/* ════════════════════════════════════════════════════════════════
   CHIPS / STATUS BADGES
═════════════════════════════════════════════════════════════════ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.chip-neutral {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

.chip-accent {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-strong);
}

.chip-success { background: var(--success-soft); color: var(--success); }
.chip-warning { background: var(--warning-soft); color: var(--warning); }
.chip-danger  { background: var(--danger-soft);  color: var(--danger); }
.chip-info    { background: var(--info-soft);    color: var(--info); }

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.dot-success { background: var(--success); box-shadow: 0 0 6px var(--success); }
.dot-neutral { background: var(--text-faint); }
.dot-accent  { background: var(--accent);  box-shadow: 0 0 6px var(--accent); }

/* Lead status badges (legacy) */
.lead-status-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.status-nuevo       { background: var(--bg-elevated);   color: var(--text-secondary); border-color: var(--border-default); }
.status-contactado  { background: var(--accent-soft);   color: var(--accent); border-color: var(--accent-strong); }
.status-respondio   { background: var(--info-soft);     color: var(--info); }
.status-interesado  { background: var(--warning-soft);  color: var(--warning); }
.status-agendado    { background: var(--success-soft);  color: var(--success); }
.status-cerrado     { background: var(--success-soft);  color: var(--success); }
.status-descartado  { background: var(--danger-soft);   color: var(--danger); }

/* ════════════════════════════════════════════════════════════════
   FILTER PILLS (pipeline-filters)
═════════════════════════════════════════════════════════════════ */

.pipeline-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
}

.pipe-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 30px;
  padding: 0 var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.pipe-filter:hover {
  border-color: var(--border-default);
  color: var(--text-primary);
}

.pipe-filter.active {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  color: var(--accent);
  font-weight: var(--weight-medium);
}

.pipe-filter-count {
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.pipe-filter.active .pipe-filter-count {
  background: var(--accent-strong);
  color: var(--accent);
}

/* Filtros especiales: Hacer hoy (verde) y Atrasados (naranja). Solo brillan
   cuando hay items pendientes (filter-badge visible). */
.pipe-filter-urgent.has-items {
  border-color: rgba(91, 185, 116, 0.5);
  color: #5bb974;
}
.pipe-filter-urgent.has-items.active {
  background: rgba(91, 185, 116, 0.10);
  border-color: #5bb974;
  color: #5bb974;
}
.pipe-filter-overdue.has-items {
  border-color: rgba(255, 138, 61, 0.55);
  color: #ff8a3d;
}
.pipe-filter-overdue.has-items.active {
  background: rgba(255, 138, 61, 0.10);
  border-color: #ff8a3d;
  color: #ff8a3d;
}
.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(91, 185, 116, 0.20);
  color: #5bb974;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.pipe-filter-overdue .filter-badge {
  background: rgba(255, 138, 61, 0.20);
  color: #ff8a3d;
}

/* Chip de step de follow-up en cada lead row */
.followup-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.followup-chip-today {
  background: rgba(91, 185, 116, 0.12);
  color: #5bb974;
  border-color: rgba(91, 185, 116, 0.40);
}
.followup-chip-yesterday {
  background: rgba(255, 138, 61, 0.12);
  color: #ff8a3d;
  border-color: rgba(255, 138, 61, 0.45);
}
.followup-chip-overdue {
  background: rgba(248, 81, 73, 0.10);
  color: #f85149;
  border-color: rgba(248, 81, 73, 0.40);
}
.followup-row-note {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 2px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge del sidebar al lado de "Setteo (WhatsApp)" */
.sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 999px;
  background: #f85149;
  color: white;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* Banner sutil de bienvenida con cantidad de follow-ups */
.followups-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  margin: 8px 0 0;
  background: rgba(157,133,242,0.06);
  border: 1px solid rgba(157,133,242,0.25);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
}
.followups-banner .fb-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.followups-banner .fb-text { flex: 1; min-width: 200px; line-height: 1.4; }
.followups-banner .fb-text strong { color: var(--accent); font-weight: 600; }
.followups-banner .fb-overdue { font-size: 11px; color: var(--text-secondary); opacity: 0.8; }
.followups-banner .fb-cta {
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  padding: 4px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 500; cursor: pointer;
  transition: all 0.15s;
}
.followups-banner .fb-cta:hover { background: var(--accent); color: white; }
.followups-banner .fb-dismiss {
  background: transparent; color: var(--text-secondary); border: none;
  padding: 2px 6px; cursor: pointer; font-size: 14px; line-height: 1;
  opacity: 0.7;
}
.followups-banner .fb-dismiss:hover { opacity: 1; color: var(--text-primary); }

/* ════════════════════════════════════════════════════════════════
   SETTER STATS (cards de métricas)
═════════════════════════════════════════════════════════════════ */

.setter-stats {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  flex-wrap: wrap;
}

.stat-card {
  flex: 1;
  min-width: 140px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: var(--transition-base);
}

.stat-card:hover { border-color: var(--border-default); }

.stat-card-accent {
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 100%);
  border-color: var(--accent-strong);
}

.stat-num,
.stat-card .stat-num,
.stat-card[style] .stat-num {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-primary) !important; /* override de inline styles legacy */
}

/* Sólo "Agendados" puede tener el highlight (card con .stat-card-accent) */
.stat-card-accent .stat-num,
.stat-card.is-highlight .stat-num {
  color: var(--accent) !important;
}

.stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary) !important;
  font-weight: var(--weight-semibold);
}

.stat-pct-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary) !important;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════
   Mi rendimiento — tiles premium (2026-07-07)
   Reemplazan las cajas planas por tiles con acento por métrica,
   medidor de conversión y chip de delta. --tile-accent se setea inline.
═════════════════════════════════════════════════════════════════ */
.myp-tile {
  --tile-accent: var(--accent);
  position: relative;
  padding: 17px 19px 15px;
  border-radius: 16px;
  background:
    radial-gradient(130% 130% at 0% 0%, color-mix(in srgb, var(--tile-accent) 9%, transparent) 0%, transparent 46%),
    linear-gradient(180deg, var(--bg-surface) 0%, rgba(15, 17, 21, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 22px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 126px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.myp-tile::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--tile-accent), transparent 78%);
  opacity: 0.9;
}
.myp-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tile-accent) 42%, transparent);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.30), 0 0 0 1px color-mix(in srgb, var(--tile-accent) 22%, transparent);
}
.myp-tile-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.myp-tile-num {
  font-size: 33px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.myp-tile-num.is-accent { color: var(--tile-accent); }
.myp-tile-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.myp-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.myp-delta.up { color: #6ee7a0; background: rgba(74, 222, 128, 0.13); }
.myp-delta.down { color: #ff9089; background: rgba(248, 81, 73, 0.13); }
.myp-delta.flat { color: var(--text-tertiary); background: rgba(255, 255, 255, 0.05); }
.myp-conv {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.myp-meter {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.myp-meter > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tile-accent) 50%, transparent), var(--tile-accent));
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ════════════════════════════════════════════════════════════════
   Vista Hoy — secciones y filas premium (2026-07-07)
   Mismo lenguaje que los tiles de Mi rendimiento (acento por sección,
   superficie con gradiente, hover en las filas).
═════════════════════════════════════════════════════════════════ */
.hoy-section {
  --sec-accent: var(--accent);
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(15, 17, 21, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 22px rgba(0, 0, 0, 0.20);
}
.hoy-section::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sec-accent), transparent 85%);
}
.hoy-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px 18px;
}
.hoy-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sec-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sec-accent) 18%, transparent);
  flex-shrink: 0;
}
.hoy-section-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.hoy-section-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--sec-accent);
  background: color-mix(in srgb, var(--sec-accent) 14%, transparent);
  padding: 2px 9px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.hoy-section-hint { font-size: 11px; color: var(--text-tertiary); margin-left: auto; }
.hoy-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 11px 18px;
  border-top: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
}
.hoy-row:hover { background: rgba(255, 255, 255, 0.025); }
.hoy-score {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: center;
  padding: 4px 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}
.hoy-call-btn {
  background: var(--success);
  color: #0F1115;
  border: none;
  padding: 7px 16px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.hoy-call-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(74, 222, 128, 0.22);
}
.hoy-empty { padding: 4px 18px 16px; color: var(--text-tertiary); font-size: 11.5px; }

/* Biblioteca de llamadas (Entrenamiento IA) — tarjeta premium */
.train-call-card {
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(15, 17, 21, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 6px 18px rgba(0, 0, 0, 0.16);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.train-call-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-strong);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}
.train-call-card.win { border-left: 3px solid #5BB974; }

/* Highlight metric (e.g. agendados) */
.stat-card.is-highlight,
.stat-card-highlight {
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 100%);
  border-color: var(--accent-strong);
}

.stat-num.is-success { color: var(--success); }
.stat-num.is-accent { color: var(--accent); }

/* Session banner */
.session-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-8);
  background: var(--success-soft);
  border-bottom: 1px solid var(--success);
  color: var(--success);
  font-size: var(--text-sm);
}

.session-timer {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

/* ════════════════════════════════════════════════════════════════
   VARIANT BOXES + BLOCKS
═════════════════════════════════════════════════════════════════ */

.variant-active-box {
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 60%), var(--bg-surface);
  border: 1px solid var(--accent-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-4) var(--space-8);
  position: relative;
}

.variant-active-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.variant-active-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.variant-active-name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--accent) !important; /* override inline styles legacy */
  letter-spacing: var(--tracking-tight);
}

.variant-active-label {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
}

.variant-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.vmsg {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}

.vmsg-label {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  display: inline-block;
  min-width: 90px;
}

.variant-block-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

/* ────── Modal "Gestión de Variantes": cards por variante ────── */
#variants-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.variant-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.variant-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.variant-card-name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.variant-card-week {
  display: inline-block;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-strong);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-weight: var(--weight-semibold);
}

.variant-card-blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (max-width: 720px) {
  .variant-card-blocks { grid-template-columns: 1fr; }
}

.variant-card-block {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.variant-card-block-label {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

.variant-card-block-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.variant-card-assign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.variant-card-assign-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-semibold);
}

.variant-card-assign-value {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.variant-card-assign-buttons {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
  flex-wrap: wrap;
}

.copy-block-btn {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-size: var(--text-2xs);
  cursor: pointer;
  transition: var(--transition-fast);
}

.copy-block-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════════════
   MODALS
═════════════════════════════════════════════════════════════════ */

.lead-modal,
.modal-overlay,
.variants-modal,
.faq-modal,
.training-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: var(--space-6);
  animation: fadeIn 150ms ease-out;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.98); } to { transform: scale(1); } }

.lead-modal-content,
.modal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  max-width: 920px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: scaleIn 250ms ease-out;
}

.lead-modal-header,
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.lead-modal-header h3,
.modal-header h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.modal-close-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  font-size: var(--text-lg);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.lead-modal-body,
.modal-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lead-modal-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.lead-modal-info > div {
  padding: var(--space-3);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
}

.lead-modal-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
}

.lead-modal-notes,
.notes-list {
  display: block;
  width: 100%;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.lead-modal-notes h4,
.notes-list h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-3);
}

.lead-modal-notes .note,
.notes-list .note {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.55;
}

.lead-modal-notes .note:last-child,
.notes-list .note:last-child {
  border-bottom: none;
}

.note-input-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  width: 100%;
}

.note-input-row textarea,
.note-input-row input {
  flex: 1;
  min-height: 60px;
  resize: vertical;
}

.lead-modal-actions,
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.lead-variable-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-subtle);
}

.lead-variable-row > :first-child {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.lead-variable-blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.lead-variable-blocks > div,
.variant-block-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

.lead-variable-blocks > div > strong:first-child,
.lead-variable-blocks > div > b:first-child,
.variant-block-card > strong:first-child,
.variant-block-card > b:first-child {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--accent);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}

.lead-variable-blocks > div button,
.variant-block-card button {
  align-self: flex-start;
}

.quick-message-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
}

/* ════════════════════════════════════════════════════════════════
   KANBAN
═════════════════════════════════════════════════════════════════ */

.kanban-board {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding: var(--space-6) var(--space-8);
}

.kanban-col {
  width: 320px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}

.kanban-col-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
}

.kanban-qty {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  overflow-y: auto;
  flex: 1;
}

.k-card {
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: var(--transition-fast);
}

.k-card:hover { border-color: var(--border-default); }

.k-card-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.k-card-meta, .k-card-owner, .k-card-contact, .k-card-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.k-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.k-tag {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.k-tag-alert   { background: var(--warning-soft); color: var(--warning); }
.k-tag-success { background: var(--success-soft); color: var(--success); }

.k-card-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.k-btn {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: var(--transition-fast);
}

.k-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.k-btn-wa { color: var(--success); border-color: var(--success-soft); }
.k-btn-wa:hover { background: var(--success-soft); }
.k-btn-ai { color: var(--accent); border-color: var(--accent-strong); }
.k-btn-ai:hover { background: var(--accent-soft); }

/* ════════════════════════════════════════════════════════════════
   ADMIN USERS PANEL
═════════════════════════════════════════════════════════════════ */

.admin-users-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) var(--space-8);
}

.admin-users-form {
  display: grid;
  grid-template-columns: 1fr 1fr 160px auto;
  gap: var(--space-3);
  align-items: end;
}

.admin-variable-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) var(--space-8);
}

.setter-input { width: 100%; }

/* ════════════════════════════════════════════════════════════════
   ALERTS / NOTES
═════════════════════════════════════════════════════════════════ */

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border: 1px solid transparent;
  display: flex;
  gap: var(--space-3);
  line-height: 1.55;
}

.alert-info    { background: var(--info-soft);    border-color: var(--info);    color: var(--text-primary); }
.alert-success { background: var(--success-soft); border-color: var(--success); color: var(--text-primary); }
.alert-warning { background: var(--warning-soft); border-color: var(--warning); color: var(--text-primary); }
.alert-danger  { background: var(--danger-soft);  border-color: var(--danger);  color: var(--text-primary); }

/* ════════════════════════════════════════════════════════════════
   PAGE HEADER PATTERN
═════════════════════════════════════════════════════════════════ */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--space-6);
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-1);
  color: var(--text-primary);
}

.page-desc {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.page-actions {
  display: flex;
  gap: var(--space-2);
}

/* ════════════════════════════════════════════════════════════════
   UTILITIES
═════════════════════════════════════════════════════════════════ */

.hidden { display: none !important; }

.text-muted { color: var(--text-tertiary); }
.text-primary-color { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-faint { color: var(--text-faint); }

.tabular-nums { font-variant-numeric: tabular-nums; }

.truncate-text {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-link {
  color: var(--text-tertiary);
  text-decoration: none;
  transition: var(--transition-fast);
}
.icon-link:hover { color: var(--text-primary); }

.history-badge {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ════════════════════════════════════════════════════════════════
   WSP TIMER WIDGET
═════════════════════════════════════════════════════════════════ */

#wsp-timer-widget {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

#wsp-timer-fab {
  background: var(--accent);
  color: var(--bg-app);
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}

#wsp-timer-fab:hover {
  background: var(--accent-hover);
  transform: scale(1.05);
}

/* ════════════════════════════════════════════════════════════════
   ONBOARDING / TRAINING
═════════════════════════════════════════════════════════════════ */

.onboarding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
}

.onboarding-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.onboarding-card:hover {
  border-color: var(--accent-strong);
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.onboarding-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
  opacity: 0;
  transition: var(--transition-base);
}

.onboarding-card:hover::before { opacity: 1; }

.onboarding-card-num {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--accent) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.onboarding-card-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary) !important;
  letter-spacing: var(--tracking-tight);
}

.onboarding-card-desc {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════
   SETTER TOOLBAR + RESUME BAR
═════════════════════════════════════════════════════════════════ */

.setter-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-8);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-subtle);
}

.setter-toolbar input[type="text"]#setter-search {
  width: 360px;
  max-width: 100%;
}

.setter-total-badge {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.resume-last-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) var(--space-8);
  background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 100%);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.resume-last-ago {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

/* ════════════════════════════════════════════════════════════════
   FORM FIELD PATTERN (label + input/select/textarea)
═════════════════════════════════════════════════════════════════ */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-field > span {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
}

.form-field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.form-field-label-row > span {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}

.form-field-help {
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 600px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   FAQ GRID
═════════════════════════════════════════════════════════════════ */

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
}

/* ════════════════════════════════════════════════════════════════
   ROUTINE DIALOG FIELDS
═════════════════════════════════════════════════════════════════ */

.rt-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.rt-field > span {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}

.rt-field input,
.rt-field textarea {
  width: 100%;
  font-family: inherit;
}

/* ════════════════════════════════════════════════════════════════
   SESSION SUMMARY MODAL (al cerrar sesión de setter)
═════════════════════════════════════════════════════════════════ */

.session-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

@media (max-width: 540px) {
  .session-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

.session-summary-stat {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}

.session-summary-stat.is-highlight {
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 100%);
  border-color: var(--accent-strong);
}

.session-summary-num {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}

.session-summary-stat.is-highlight .session-summary-num {
  color: var(--accent);
}

.session-summary-lbl {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-1);
}

.session-summary-ai {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-2);
}

.session-summary-ai-label {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--accent);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.session-summary-ai p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   FOCUS RING (accesibilidad)
═════════════════════════════════════════════════════════════════ */

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════
   SCM IDENTITY v1 — "Sales Closing Machine"
   ─────────────────────────────────────────────────────────────
   Lema visual: máquina industrial elegante — precisión, velocidad,
   foco. Sin saturar. Sin distracciones. Cada pixel sirve al cierre.

   Principios:
   1. El violeta acento es para CTA y datos críticos, no decoración
   2. Tipografía: Geist con peso semibold/700 en titulares
   3. Microcopy con personalidad (no genérico de SaaS)
   4. Bordes y sombras sutiles, no glassmorphism
   5. Stats con tipografía "marcador" (mono o tabular)
═════════════════════════════════════════════════════════════════ */

/* Login / Auth screen — hero rediseñado */
.auth-screen {
  background:
    radial-gradient(ellipse at top right, rgba(157, 133, 242, 0.18), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(157, 133, 242, 0.08), transparent 45%),
    var(--bg-app);
}

.auth-card {
  position: relative;
  overflow: hidden;
}

.auth-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
  opacity: 0.7;
}

.auth-brand-enhanced {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Logo del login — S violeta gradient (achicado 2026-05-23: era 72/42 → ahora 48/30) */
.auth-logo-mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--accent) 0%, #7C5DDB 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--bg-app);
  letter-spacing: -0.02em;
  box-shadow:
    0 8px 24px rgba(157, 133, 242, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(157, 133, 242, 0.25);
  margin-bottom: 10px;
}

.auth-wordmark {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 2px 0 !important;
  color: var(--text-primary);
  line-height: 1.1;
}

.auth-tagline {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: 0 !important;
  opacity: 0.9;
}

.auth-subtitle {
  font-size: 13px !important;
  line-height: 1.55;
  max-width: 320px;
  margin-top: 8px !important;
  color: rgba(229, 231, 226, 0.65) !important;
}

/* ════════════════════════════════════════════════════════════════
   Login premium (2026-07-07) — mismo lenguaje que los tiles/cards.
   Tarjeta con gradiente + hairline de acento + glow; inputs y botón
   con más profundidad.
═════════════════════════════════════════════════════════════════ */
.auth-screen {
  background:
    radial-gradient(ellipse 70% 55% at 50% -8%, rgba(157, 133, 242, 0.22), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(157, 133, 242, 0.07), transparent 45%),
    var(--bg-app);
}
.auth-card {
  max-width: 428px;
  border-radius: 22px;
  padding: 34px 32px;
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(157, 133, 242, 0.07) 0%, transparent 42%),
    linear-gradient(180deg, var(--bg-surface) 0%, rgba(15, 17, 21, 0.7) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.30);
}
.auth-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
  opacity: 0.55;
}
.auth-form input,
.auth-form select {
  background: rgba(17, 20, 27, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  padding: 13px 15px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.auth-form input:hover,
.auth-form select:hover { border-color: rgba(255, 255, 255, 0.14); }
.auth-form input:focus,
.auth-form select:focus {
  border-color: var(--accent);
  background: rgba(17, 20, 27, 1);
  box-shadow: 0 0 0 3px var(--accent-medium);
}
.auth-form .pill-btn,
.auth-form .btn-primary {
  margin-top: 4px;
  padding-top: 13px;
  padding-bottom: 13px;
  border-radius: 12px;
  font-weight: 600;
  background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);
  box-shadow: 0 8px 22px rgba(157, 133, 242, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.15s ease;
}
.auth-form .pill-btn:hover,
.auth-form .btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 12px 30px rgba(157, 133, 242, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.auth-form .pill-btn:active,
.auth-form .btn-primary:active { transform: translateY(0); }

/* Sidebar logo-mark refinado: la S original, con inner highlight + ring sutil */
.logo-mark {
  position: relative;
  background:
    radial-gradient(110% 80% at 30% 20%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--accent) 0%, #7C5DDB 100%);
  box-shadow:
    0 4px 10px rgba(157, 133, 242, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 0 1px rgba(157, 133, 242, 0.2);
}

.logo-toggle:hover .logo-mark {
  transform: scale(1.06);
  box-shadow:
    0 6px 16px rgba(157, 133, 242, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(157, 133, 242, 0.35);
}

/* Sidebar branding con tagline mini */
.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}

.sidebar-brand-text h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sidebar-brand-tagline {
  font-size: 8.5px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.75;
  white-space: nowrap;
}

/* Cuando el sidebar está colapsado, ocultar el tagline.
   IMPORTANTE: usar .sidebar.collapsed (clase real del JS), NO .sidebar.is-collapsed
   que era un typo del commit de branding (esa clase no existe → tagline desbordaba
   los 64px del sidebar colapsado y rompía el layout). */
.sidebar.collapsed .sidebar-brand-text {
  display: none !important;
}

/* Headers de las views con más impacto */
.page-header .page-title {
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Stat cards con tipografía "marcador" tabular */
.stat-card [id^="calls-stat-"],
.stat-card [id^="myp-"],
.stat-card [id^="chist-"],
#tlx-metrics-cards > div,
#tlx-eff-kpis > div {
  font-variant-numeric: tabular-nums;
}

/* Mejorar foco visual de CTAs principales (botones .btn-primary grandes) */
.btn-primary.pill-btn {
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.15s ease;
}

.btn-primary.pill-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(157, 133, 242, 0.32);
}

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

/* Subtle pulse en el logo del sidebar cuando hay llamada activa */
@keyframes scmLogoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(157, 133, 242, 0); }
  50% { box-shadow: 0 0 0 6px rgba(157, 133, 242, 0.18); }
}

body.has-active-call .sidebar .logo-mark {
  animation: scmLogoPulse 2s ease-in-out infinite;
}

/* Empty states con micro-copy con personalidad */
.empty-state {
  font-style: italic;
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════
   SCM IDENTITY v2 — PREMIUM POLISH
   ─────────────────────────────────────────────────────────────
   Refinamiento general — sin cambiar paleta. Más jerarquía,
   espaciado, sombras sofisticadas, microinteracciones sutiles.
═════════════════════════════════════════════════════════════════ */

/* Cards más definidas con borde + sombra interna sutil */
.card {
  background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(15, 17, 21, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 8px 24px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Headers de página — más impactantes */
.page-header {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 22px;
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Menu items del sidebar — premium hover state */
.menu-item {
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}

.menu-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transition: height 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-item.active::before {
  height: 60%;
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.025);
}

.menu-item.active {
  background: linear-gradient(90deg, rgba(157, 133, 242, 0.1), rgba(157, 133, 242, 0.02));
}

/* ════════════════════════════════════════════════════════════════
   Sidebar premium (2026-07-07) — profesional, mismo lenguaje que
   los tiles/cards. Solo estética; estructura y colapsado intactos.
═════════════════════════════════════════════════════════════════ */
.sidebar {
  background:
    linear-gradient(180deg, #10131C 0%, var(--bg-sidebar) 44%),
    var(--bg-sidebar);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.35), 10px 0 30px rgba(0, 0, 0, 0.18);
}
.sidebar-header {
  height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 4px;
}
/* Logo S — un poco más de presencia (el gradiente + sombra ya vienen del
   bloque .logo-mark refinado más arriba). */
.sidebar .logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 15px;
}
.sidebar-brand-text h1 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.015em;
  color: var(--text-primary);
}
/* Etiquetas de grupo — más aire y sutileza */
.menu-group-label {
  color: rgba(229, 231, 226, 0.30);
  letter-spacing: 0.15em;
  margin-top: 20px;
  margin-bottom: 7px;
}
/* Ítems de navegación */
.menu-item {
  padding: 9px 12px;
  border-radius: 9px;
  gap: 11px;
  color: var(--text-secondary);
}
.menu-item .menu-icon {
  transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  opacity: 0.82;
}
.menu-item:hover {
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-primary);
}
.menu-item:hover .menu-icon { opacity: 1; transform: translateX(1px); }
.menu-item.active {
  background: linear-gradient(90deg, var(--accent-medium), rgba(157, 133, 242, 0.03));
  color: var(--text-primary);
  font-weight: 600;
}
.menu-item.active .menu-icon { color: var(--accent); opacity: 1; }
.menu-item.active::before {
  height: 55%;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
  box-shadow: 0 0 8px rgba(157, 133, 242, 0.5);
}
/* Colapsado: el ítem activo se ve como chip de acento, no barra lateral */
.sidebar.collapsed .menu-item.active {
  background: var(--accent-medium);
  box-shadow: inset 0 0 0 1px var(--accent-strong);
}
.sidebar.collapsed .menu-item.active::before { display: none; }

/* Botones premium con micro lift */
.btn-primary,
.btn-secondary {
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.15s ease, border-color 0.15s ease;
}

/* Stats prominentes con sombra interna sutil */
.stat-card {
  background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.stat-card:hover {
  transform: translateY(-1px);
  border-color: rgba(157, 133, 242, 0.18);
}

/* Inputs con focus state más prominente */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(157, 133, 242, 0.12);
}

/* Modal overlays con backdrop más sofisticado */
.modal-overlay {
  background: rgba(8, 9, 12, 0.7) !important;
  animation: scmFadeIn 0.18s ease-out;
}

.modal-card {
  animation: scmModalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

@keyframes scmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scmModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Scrollbars premium dark */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(157, 133, 242, 0.3);
  background-clip: padding-box;
}

/* Chips premium */
.chip {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Disabled state con menos opacity pero coherente */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.45;
  cursor: not-allowed !important;
}

/* Loader spinner sutil pero premium */
.loader {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: scmSpin 0.7s linear infinite;
  display: inline-block;
}

@keyframes scmSpin {
  to { transform: rotate(360deg); }
}

/* Selection color con brand */
::selection {
  background: rgba(157, 133, 242, 0.35);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   SPRINT 21 — LLAMADAS: chips por país + panel expandible
   ═══════════════════════════════════════════════════════════════ */

.calls-country-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.calls-country-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}

.calls-country-chip:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  background: rgba(157, 133, 242, 0.06);
}

.calls-country-chip.is-active {
  background: linear-gradient(135deg, rgba(157, 133, 242, 0.18) 0%, rgba(124, 93, 219, 0.12) 100%);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(157, 133, 242, 0.18);
}

.calls-country-chip .chip-count {
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-tertiary);
  padding: 1px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.calls-country-chip.is-active .chip-count {
  background: rgba(157, 133, 242, 0.25);
  color: #fff;
}

.calls-country-chip .chip-flag {
  font-size: 14px;
  line-height: 1;
}

/* Panel expandible de cada call-row */
.call-row {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.call-row.is-expanded {
  border-color: var(--accent) !important;
  box-shadow: 0 4px 18px rgba(157, 133, 242, 0.12);
}

.call-expand-btn {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 14px;
}

.call-expand-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(157, 133, 242, 0.05);
}

.call-expand-btn.is-open {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-app);
}

.call-detail-panel {
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: -2px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 22px;
  animation: callDetailIn 0.18s cubic-bezier(.2,.8,.3,1);
}

@keyframes callDetailIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.call-detail-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.call-detail-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.call-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  font-size: 12.5px;
}

.call-detail-grid .label {
  color: var(--text-tertiary);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.call-detail-grid .value {
  color: var(--text-primary);
  word-break: break-word;
}

.call-detail-grid .value a {
  color: var(--accent);
  text-decoration: none;
}

.call-detail-grid .value a:hover { text-decoration: underline; }

.call-followups {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.call-fup-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.call-fup-chip:hover { border-color: var(--accent); color: var(--text-primary); }

.call-fup-chip.is-on {
  background: rgba(157, 133, 242, 0.18);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.call-fup-due {
  font-size: 10.5px;
  color: var(--warning);
  margin-top: 4px;
  font-weight: 500;
}

.call-notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
}

.call-note-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.45;
  position: relative;
}

.call-note-meta {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.call-note-delete {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.call-note-delete:hover { opacity: 1; color: var(--danger); }

.call-note-input-row {
  display: flex;
  gap: 6px;
}

.call-note-input {
  flex: 1;
  padding: 8px 11px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: inherit;
  resize: vertical;
  min-height: 32px;
  max-height: 100px;
}

.call-note-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(157, 133, 242, 0.12);
}

.call-note-add-btn {
  background: var(--accent);
  color: var(--bg-app);
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s, box-shadow 0.15s;
}

.call-note-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(157, 133, 242, 0.3);
}

.call-history-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
}

.call-history-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-surface);
  border-radius: 6px;
  font-size: 11.5px;
}

.call-history-icon { font-size: 14px; }

.call-history-text { color: var(--text-primary); }

.call-history-time {
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.call-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 4px;
}

.call-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.call-action-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  background: rgba(157, 133, 242, 0.06);
}

.call-action-btn.is-wsp:hover {
  border-color: #25D366;
  color: #25D366;
  background: rgba(37, 211, 102, 0.08);
}

/* Mobile collapse */
@media (max-width: 880px) {
  .call-detail-panel {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ═══ GUÍA DE USO ═══ */
.guide-tab {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.guide-tab:hover { color: var(--text-primary); }
.guide-tab.active {
  color: var(--accent, #9D85F2);
  border-bottom-color: var(--accent, #9D85F2);
}
.guide-section {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(15, 17, 21, 0.5) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 22px rgba(0, 0, 0, 0.18);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.guide-section:hover { border-color: var(--accent-strong); }
.guide-section.open { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 30px rgba(0, 0, 0, 0.26); }
.guide-section:hover { border-color: rgba(157,133,242,0.35); }
.guide-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}
.guide-section-header:hover { background: rgba(157,133,242,0.04); }
.guide-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.guide-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(157,133,242,0.15);
  color: var(--accent, #9D85F2);
  font-size: 12px;
  font-weight: 700;
}
.guide-chevron {
  color: var(--text-secondary);
  transition: transform .2s;
  font-size: 12px;
}
.guide-section.open .guide-chevron { transform: rotate(90deg); }
.guide-section-body {
  display: none;
  padding: 4px 22px 18px 22px;
  border-top: 1px solid var(--border-color);
  background: rgba(0,0,0,0.12);
}
.guide-section.open .guide-section-body { display: block; }
.guide-section-body p { color: var(--text-secondary); font-size: 13.5px; line-height: 1.65; margin: 12px 0; }
.guide-section-body ol, .guide-section-body ul { color: var(--text-secondary); font-size: 13.5px; line-height: 1.7; padding-left: 22px; margin: 10px 0; }
.guide-section-body li { margin-bottom: 6px; }
.guide-section-body strong { color: var(--text-primary); font-weight: 600; }
.guide-section-body code {
  background: rgba(157,133,242,0.12);
  color: var(--accent, #9D85F2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12.5px;
}
.guide-section-body .guide-callout {
  border-left: 3px solid var(--accent, #9D85F2);
  background: rgba(157,133,242,0.06);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  margin: 12px 0;
  color: var(--text-primary);
  font-size: 13px;
}
.guide-section-body .guide-callout.warn {
  border-left-color: #f59e0b;
  background: rgba(245,158,11,0.06);
}
.guide-section-body .guide-callout.danger {
  border-left-color: #ef4444;
  background: rgba(239,68,68,0.06);
}
.guide-section-body .guide-goto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(157,133,242,0.12);
  color: var(--accent, #9D85F2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border: 0;
  transition: background .15s;
}
.guide-section-body .guide-goto:hover { background: rgba(157,133,242,0.22); }
.guide-search-hit { background: rgba(245,158,11,0.25); border-radius: 3px; padding: 0 2px; }
.guide-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

/* ════════════════════════════════════════════════════════════════
   SPRINT 38 — Refactor visual Llamadas (B2B prospecting CRM look)
═════════════════════════════════════════════════════════════════ */

/* Header pro: title left + acciones right */
.calls-header-pro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 28px 32px 18px;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0;
}
.calls-header-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.calls-header-left h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.calls-header-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.calls-header-pro .header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* CTAs del header */
.calls-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: linear-gradient(135deg, var(--accent) 0%, #7C5DDB 100%);
  color: #0F1115;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 2px 10px rgba(157,133,242,0.2);
  font-family: inherit;
}
.calls-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(157,133,242,0.35); }
.calls-cta-primary:active { transform: translateY(0); }
.calls-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.calls-cta-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* Filters bar: subheader sutil */
.calls-filters-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.015);
  border-bottom: 1px solid var(--border-subtle);
}
.calls-filters-left {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.calls-filters-right { display: flex; gap: 8px; align-items: center; }

.calls-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bg-input);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23A8AAB5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 5 5 9 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 7px 28px 7px 12px;
  font-size: 13px;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
  min-height: 34px;
}
.calls-filter-select:hover { border-color: var(--border-default); }
.calls-filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(157,133,242,0.12);
}

.calls-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.calls-search-input {
  padding: 7px 12px 7px 32px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
  width: 240px;
  font-family: inherit;
  transition: border-color 0.15s;
  min-height: 34px;
}
.calls-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(157,133,242,0.12);
}
.calls-search-input::placeholder { color: var(--text-tertiary); }

.calls-toggle-discarded {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  user-select: none;
  font-weight: 500;
  transition: border-color 0.15s;
}
.calls-toggle-discarded:hover { border-color: var(--border-default); color: var(--text-primary); }
.calls-toggle-discarded input { accent-color: var(--accent); margin: 0; }

/* KPI grid B2B sobrio */
.calls-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 22px 0 20px;
}
.calls-kpi {
  position: relative;
  padding: 15px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(15, 17, 21, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 22px rgba(0, 0, 0, 0.20);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.calls-kpi:hover {
  transform: translateY(-2px);
  border-color: var(--accent-strong);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--accent-medium);
}
.calls-kpi:hover { background: rgba(157,133,242,0.03); }
.calls-kpi-label {
  font-size: 10.5px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.calls-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Refinar chips de país: más limpios, B2B */
.calls-country-chip {
  padding: 6px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}
.calls-country-chip .fi {
  margin-right: 1px;
}
.calls-country-chip svg { color: var(--text-tertiary); }
.calls-country-chip:hover svg { color: var(--accent); }

/* ════════════════════════════════════════════════════════════════
   SPRINT 39 — Power Dialer disposition buttons grid (B2B control panel)
═════════════════════════════════════════════════════════════════ */

.pd-disposition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.pd-disp-btn {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.pd-disp-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.pd-disp-btn:active { transform: translateY(0); }

.pd-disp-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: currentColor;
  opacity: 0.6;
}

.pd-disp-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(255,255,255,0.08);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.pd-disp-text { min-width: 0; }
.pd-disp-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 2px;
}
.pd-disp-sub {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Color variants */
.pd-disp-success { color: #5BB974; }
.pd-disp-success:hover { background: rgba(91,185,116,0.07); border-color: rgba(91,185,116,0.4); }
.pd-disp-success:hover .pd-disp-label { color: #5BB974; }
.pd-disp-success:hover .pd-disp-key { background: rgba(91,185,116,0.2); color: #5BB974; border-color: rgba(91,185,116,0.35); }

.pd-disp-danger { color: #F47272; }
.pd-disp-danger:hover { background: rgba(244,114,114,0.07); border-color: rgba(244,114,114,0.4); }
.pd-disp-danger:hover .pd-disp-label { color: #F47272; }
.pd-disp-danger:hover .pd-disp-key { background: rgba(244,114,114,0.2); color: #F47272; border-color: rgba(244,114,114,0.35); }

.pd-disp-warning { color: #FFB341; }
.pd-disp-warning:hover { background: rgba(255,179,65,0.07); border-color: rgba(255,179,65,0.4); }
.pd-disp-warning:hover .pd-disp-label { color: #FFB341; }
.pd-disp-warning:hover .pd-disp-key { background: rgba(255,179,65,0.2); color: #FFB341; border-color: rgba(255,179,65,0.35); }

.pd-disp-info { color: #5BA3F2; }
.pd-disp-info:hover { background: rgba(91,163,242,0.07); border-color: rgba(91,163,242,0.4); }
.pd-disp-info:hover .pd-disp-label { color: #5BA3F2; }
.pd-disp-info:hover .pd-disp-key { background: rgba(91,163,242,0.2); color: #5BA3F2; border-color: rgba(91,163,242,0.35); }

.pd-disp-neutral { color: var(--text-secondary); }
.pd-disp-neutral::before { opacity: 0.25; }
.pd-disp-neutral:hover { background: rgba(255,255,255,0.03); border-color: var(--border-default); }
.pd-disp-neutral:hover .pd-disp-label { color: var(--text-primary); }
.pd-disp-neutral:hover .pd-disp-key { background: rgba(255,255,255,0.12); color: var(--text-primary); }

/* Quick-links: outline limpio sin emojis */
.pd-quick-link {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  padding: 6px 12px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: 7px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.15s;
  font-family: inherit;
}
.pd-quick-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(157,133,242,0.06);
}

/* Phase 13: dialpad 3×4 (modal de discar + DTMF en llamada) */
.dialpad-key {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 0; background: var(--bg-app); border: 1px solid var(--border-color);
  border-radius: 12px; color: var(--text-primary); font-size: 20px; font-weight: 600;
  cursor: pointer; font-family: inherit; user-select: none;
  transition: background 0.12s, transform 0.05s, border-color 0.12s;
}
.dialpad-key:hover { background: var(--surface-color); border-color: var(--accent); }
.dialpad-key:active { transform: scale(0.95); background: rgba(157,133,242,0.15); }
.dk-sub { font-size: 9px; color: var(--text-tertiary); letter-spacing: 1px; margin-top: 2px; font-weight: 500; }


/* ── Configuración de audio (modal de micrófono / llamadas) ───────────── */
.audio-cfg-label { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-tertiary); margin-bottom:8px; }
.audio-cfg-select { width:100%; padding:10px 12px; background:var(--bg-input,var(--bg-app)); border:1px solid var(--border-default,var(--border-color)); border-radius:9px; color:var(--text-primary); font-size:13px; box-sizing:border-box; }
.audio-cfg-help { margin:8px 0 0; font-size:11px; color:var(--text-tertiary); line-height:1.5; }
.audio-cfg-check { display:flex; align-items:flex-start; gap:9px; font-size:12px; color:var(--text-secondary); line-height:1.5; margin-top:9px; cursor:pointer; }
.audio-cfg-check input { margin-top:2px; flex-shrink:0; accent-color:var(--accent); }
.audio-cfg-check strong { color:var(--text-primary); font-weight:600; }
.audio-meter { height:10px; border-radius:6px; background:rgba(255,255,255,0.07); overflow:hidden; margin-top:10px; border:1px solid var(--border-color); }
.audio-meter-fill { height:100%; width:0%; background:#FFB341; border-radius:6px; transition:width 0.08s linear, background 0.2s; }