/* ============================================================
   Luzzi CRM — Design System
   Identidad: violeta (ahora #7B61FF, más vivo) + acento menta #17D9AE.
   Base: tema oscuro/claro real, profundidad, micro-interacciones,
   burbujas de chat estilo WhatsApp, soporte multimedia y leads.

   v2.66.37 — REDISEÑO VISUAL a pedido del dueño (que quede "a la par o mejor
   que las plataformas top", con botones y interacciones más dinámicas). Se
   trabajó sobre el SISTEMA DE DISEÑO centralizado (este archivo), no pantalla
   por pantalla, así el nuevo look llega a TODAS de una sin tocar su HTML:
     · Paleta refinada (fondos más profundos, mejor contraste, acento menta) y
       tokens nuevos: --primary-grad, --ease-spring, --ring, sombras más ricas.
     · Botones "vivos": resorte al hover, hundido al apretar, anillo de foco
       por teclado y un brillo que cruza el botón primario.
     · Menú lateral con microinteracción (el ícono salta apenas) y barrita
       activa con leve resplandor.
     · Topbar con vidrio esmerilado más marcado (blur + saturación).
     · Accesibilidad: foco visible solo con teclado + respeto por "reducir
       movimiento" del sistema (se apagan animaciones para quien lo pida).
   Nada de esto cambió la lógica ni la estructura de las páginas.
   ============================================================ */

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

/* v2.66.37 — REDISEÑO VISUAL. Se refinó toda la paleta para un look más
   premium (más profundidad, mejor contraste entre superficies, acento menta)
   y se sumaron tokens nuevos: gradientes de marca, easing "resorte", anillo
   de foco y sombras más ricas. Los NOMBRES de las variables no cambiaron, así
   que todas las pantallas heredan el nuevo look sin tocar su HTML. La
   identidad violeta se mantiene, solo más viva. */
:root {
  --primary: #7B61FF;
  --primary-600: #6A4DF4;
  --primary-700: #5638D8;
  --primary-soft: rgba(123, 97, 255, 0.14);
  --secondary: #17D9AE;
  --secondary-soft: rgba(23, 217, 174, 0.14);
  /* Gradientes de marca (botones, logo, acentos). */
  --primary-grad: linear-gradient(135deg, #8C74FF 0%, #6A4DF4 100%);
  --primary-grad-hover: linear-gradient(135deg, #9A83FF 0%, #755AF7 100%);

  --hot: #ff5470;
  --warm: #ffb020;
  --cold: #4aa8ff;

  --radius: 16px;
  --radius-sm: 11px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --sidebar-w: 268px;
  --topbar-h: 70px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.5, 1); /* leve rebote para microinteracciones */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.20);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.32);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.46);
  --ring: 0 0 0 3px var(--primary-soft); /* anillo de foco accesible (teclado) */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Sora', 'Inter', sans-serif;
}

/* ---- Tema oscuro (default) ---- */
:root, [data-theme="dark"] {
  --bg: #0a0b11;
  --bg-grad: radial-gradient(1100px 620px at 82% -12%, rgba(123,97,255,0.14), transparent 60%),
             radial-gradient(820px 520px at -12% 112%, rgba(23,217,174,0.10), transparent 55%);
  --surface: #14161f;
  --surface-2: #1b1e2a;
  --surface-3: #242838;
  --border: #2c3142;
  --border-soft: #1f2331;
  --text: #f0f2f9;
  --text-muted: #99a2b7;
  --text-dim: #667089;
  --bubble-in: #1f2434;
  --bubble-out: linear-gradient(135deg, #7B61FF, #6250EC);
  --sheen: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0)); /* brillo superior sutil */
}

/* ---- Tema claro ---- */
[data-theme="light"] {
  --bg: #f2f4fb;
  --bg-grad: radial-gradient(1100px 620px at 85% -12%, rgba(123,97,255,0.12), transparent 60%),
             radial-gradient(820px 520px at -12% 112%, rgba(23,217,174,0.12), transparent 55%);
  --surface: #ffffff;
  --surface-2: #f6f7fc;
  --surface-3: #edeff8;
  --border: #e2e5f0;
  --border-soft: #eceef6;
  --text: #191c28;
  --text-muted: #59627a;
  --text-dim: #93a0b7;
  --bubble-in: #ffffff;
  --bubble-out: linear-gradient(135deg, #7B61FF, #6250EC);
  --sheen: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
  --shadow-sm: 0 1px 2px rgba(20,30,60,0.07);
  --shadow-md: 0 12px 34px rgba(30,40,80,0.12);
  --shadow-lg: 0 26px 60px rgba(30,40,80,0.18);
  --ring: 0 0 0 3px var(--primary-soft);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05","ss01";
}

/* Regla de oro: nunca scroll horizontal a nivel de página. El contenido ancho
   (como el tablero del pipeline) scrollea DENTRO de su propio contenedor, nunca
   empuja la página. Es seguro para el topbar sticky: body sigue siendo el
   contenedor de scroll vertical. */
html, body { max-width: 100%; overflow-x: hidden; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }

/* ============================================================
   Layout
   ============================================================ */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  transition: transform 0.3s var(--ease);
}

.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 22px 18px;
}
.brand-logo {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #fff;
  box-shadow: 0 8px 22px rgba(123,97,255,0.45);
}
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.brand-sub { font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; text-transform: uppercase; }

/* Selector de negocio */
.biz-switch { padding: 4px 16px 14px; }
.biz-switch label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-left: 6px; }
.biz-select {
  width: 100%; margin-top: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 11px 32px 11px 12px;
  font-size: 14px; font-weight: 500;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.biz-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* R66.6 — Subdominio por cliente: reemplaza el <select> por el nombre del
   negocio como marca fija, cuando la pantalla se sirvió desde el
   subdominio propio de ESE negocio (no tiene sentido "elegir" en ese caso). */
.biz-switch-locked {
  margin-top: 6px; padding: 11px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.biz-locked-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nav { flex: 1; padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); padding: 16px 12px 6px; }
/* v2.66.37 — Ítems del menú con microinteracción: al pasar el mouse el ícono
   "salta" apenas (resorte) y el fondo se aclara; el activo tiene una barrita
   con leve resplandor. */
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-weight: 500; font-size: 14.5px;
  position: relative;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease-spring);
}
.nav-item svg { width: 19px; height: 19px; flex-shrink: 0; transition: transform 0.25s var(--ease-spring); }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item:hover svg { transform: scale(1.12); }
.nav-item:active { transform: scale(0.98); }
.nav-item:focus-visible { outline: none; box-shadow: var(--ring); }
.nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav-item.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: var(--primary);
  box-shadow: 0 0 12px var(--primary);
}
.nav-badge { margin-left: auto; background: var(--hot); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; min-width: 20px; text-align: center; }

.sidebar-foot { padding: 14px; border-top: 1px solid var(--border-soft); }
.user-card {
  display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: var(--radius-sm);
  transition: background 0.18s;
}
.user-card:hover { background: var(--surface-2); }
.user-meta { overflow: hidden; }
.user-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 12px; color: var(--text-dim); }

/* Contenido principal */
.main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }
.topbar {
  /* min-height (no height fijo): si un título largo envuelve a 2 líneas, el topbar crece
     en vez de cortar el texto. El padding vertical le da aire al título de 2 líneas;
     en el caso normal (1 línea) el min-height manda y el alto queda igual (68px). */
  min-height: var(--topbar-h); position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 28px;
  /* v2.66.37 — vidrio esmerilado más marcado (blur + saturación) para dar
     sensación premium cuando el contenido pasa por debajo. */
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
}
.page-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.page-sub { font-size: 13px; color: var(--text-dim); margin-top: 1px; }
.topbar-spacer { flex: 1; }
.content { padding: 28px; flex: 1; }

.menu-toggle { display: none; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); }

/* ============================================================
   Componentes
   ============================================================ */
.icon-btn {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  transition: all 0.18s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--primary); transform: translateY(-1px); }
.icon-btn svg { width: 19px; height: 19px; }
/* v2.66.18 — Estado "prendido" de un icon-btn que funciona como toggle (ej.
   el botón de ver archivados en Conversaciones). Mismo lenguaje visual que
   ya usan pinBtn/botBtn en el chat (color primario cuando está activo). */
.icon-btn.active { color: var(--primary); border-color: var(--primary); }

/* v2.66.37 — Botones más "vivos": levantan con un leve resorte al pasar el
   mouse, se hunden al apretar, y muestran anillo de foco por teclado. El
   primario tiene gradiente de marca y un brillo que lo cruza en el hover. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease),
              background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn svg { width: 17px; height: 17px; }
.btn-primary {
  background: var(--primary-grad); color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px rgba(123,97,255,0.34);
  position: relative; overflow: hidden;
}
/* Brillo que cruza el botón primario al pasar el mouse. */
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform 0.65s var(--ease); pointer-events: none;
}
.btn-primary:hover { background: var(--primary-grad-hover); box-shadow: 0 12px 30px rgba(123,97,255,0.5); }
.btn-primary:hover::after { transform: translateX(130%); }
.btn-primary:focus-visible { box-shadow: var(--ring), 0 6px 18px rgba(123,97,255,0.34); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 40%, var(--border)); }
.btn-danger:hover { background: color-mix(in srgb, var(--hot) 12%, transparent); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.card-pad { padding: 22px; }
/* v2.66.37 — Utilidad opcional: una tarjeta que "invita a tocar" (levanta y
   se ilumina en el hover). Se aplica solo donde tenga sentido (ej. accesos),
   no a todas, para no marear con todo moviéndose. */
.card-interactive { cursor: pointer; transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); }
.card-interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border); }

/* Stat cards */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 20px; position: relative; overflow: hidden;
  transition: transform 0.2s var(--ease), border-color 0.2s;
}
.stat:hover { transform: translateY(-3px); border-color: var(--border); }
.stat::after {
  content: ''; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px;
  border-radius: 50%; background: var(--accent, var(--primary-soft)); opacity: 0.5; filter: blur(8px);
}
.stat-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; position: relative; z-index: 1; }
.stat-ico svg { width: 22px; height: 22px; }
.stat-val { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; position: relative; z-index: 1; }
.stat-label { font-size: 13px; color: var(--text-muted); position: relative; z-index: 1; }
.stat-delta { font-size: 12px; margin-top: 6px; color: var(--secondary); font-weight: 600; }

.ico-violet { background: var(--primary-soft); color: var(--primary); }
.ico-teal { background: var(--secondary-soft); color: var(--secondary); }
.ico-hot { background: color-mix(in srgb, var(--hot) 14%, transparent); color: var(--hot); }
.ico-warm { background: color-mix(in srgb, var(--warm) 16%, transparent); color: var(--warm); }
.ico-cold { background: color-mix(in srgb, var(--cold) 14%, transparent); color: var(--cold); }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 28px 0 14px; }
.section-head h2 { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
#filters { flex-wrap: wrap; }

/* Avatares */
.avatar {
  border-radius: 50%; object-fit: cover; flex-shrink: 0;
  display: grid; place-items: center;
  font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary));
  overflow: hidden; font-size: 14px;
}
.avatar-32 { width: 32px; height: 32px; font-size: 12px; }
.avatar-40 { width: 40px; height: 40px; }
.avatar-44 { width: 44px; height: 44px; }
.avatar-52 { width: 52px; height: 52px; font-size: 18px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-hot { background: color-mix(in srgb, var(--hot) 16%, transparent); color: var(--hot); }
.badge-warm { background: color-mix(in srgb, var(--warm) 18%, transparent); color: var(--warm); }
.badge-cold { background: color-mix(in srgb, var(--cold) 16%, transparent); color: var(--cold); }
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-muted { background: var(--surface-3); color: var(--text-muted); }

/* Tablas */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); padding: 12px 16px; border-bottom: 1px solid var(--border-soft); font-weight: 600; }
table.tbl td { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr { transition: background 0.15s; }
table.tbl tbody tr:hover { background: var(--surface-2); }

/* Forms */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 7px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .field { margin-bottom: 14px; }
.hint, .field .hint { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.input, .textarea, .select {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }

/* v2.66.37 — Accesibilidad y confort de movimiento (globales):
   1) Anillo de foco visible SOLO cuando se navega con teclado (no molesta al
      usar el mouse). 2) Si el sistema del usuario pide "reducir movimiento",
      se apagan animaciones y transiciones — importante para mareos/accesibilidad. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* El listado desplegable de los <select> nativos: forzamos fondo y color para que
   se lea en modo oscuro (si no, el texto sale invisible en algunos navegadores). */
.input option, .select option, select option { background: var(--surface-2); color: var(--text); }
.textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Toggle switch */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--surface-3); border-radius: 999px; transition: background 0.2s; }
.switch .track::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s var(--ease); box-shadow: var(--shadow-sm); }
.switch input:checked + .track { background: var(--secondary); }
.switch input:checked + .track::before { transform: translateX(20px); }

/* Toast */
#toasts { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm); padding: 13px 16px; box-shadow: var(--shadow-md);
  font-size: 14px; min-width: 260px; max-width: 360px;
  animation: toastIn 0.35s var(--ease);
}
.toast.ok { border-left-color: var(--secondary); }
.toast.err { border-left-color: var(--hot); }
.toast.hot { border-left-color: var(--hot); }
.toast.warn { border-left-color: var(--warm); }
.toast b { display: block; margin-bottom: 2px; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* Empty / loading */
.empty { text-align: center; padding: 60px 20px; color: var(--text-dim); }
.empty svg { width: 48px; height: 48px; opacity: 0.4; margin-bottom: 14px; }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.fade-up { animation: fadeUp 0.5s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   Login
   ============================================================ */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 410px; background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 40px 36px; box-shadow: var(--shadow-lg);
  animation: fadeUp 0.6s var(--ease) both;
}
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 28px; }
.login-brand .brand-logo { width: 56px; height: 56px; font-size: 26px; }
.login-title { font-family: var(--font-display); font-size: 23px; font-weight: 700; }
.login-sub { color: var(--text-dim); font-size: 14px; text-align: center; }
.login-err { background: color-mix(in srgb, var(--hot) 12%, transparent); color: var(--hot); border: 1px solid color-mix(in srgb, var(--hot) 30%, transparent); padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 16px; display: none; }
.login-err.show { display: block; animation: fadeUp 0.3s var(--ease); }

/* ============================================================
   Conversaciones (chat)
   ============================================================ */
.chat-layout {
  display: grid; grid-template-columns: var(--conv-w, 340px) 6px 1fr;
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
  background: var(--surface); border-top: 1px solid var(--border-soft);
}
/* Divisor arrastrable: permite agrandar/achicar el chat a gusto del usuario.
   El ancho elegido se guarda en el navegador (localStorage) y se aplica vía
   la variable --conv-w. Doble clic restablece el ancho por defecto. */
.chat-splitter {
  cursor: col-resize; background: var(--border-soft);
  transition: background 0.15s; position: relative; z-index: 5;
}
.chat-splitter::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 2px; height: 34px;
  border-radius: 2px; background: var(--text-dim); opacity: 0.5;
}
.chat-splitter:hover, .chat-layout.resizing .chat-splitter { background: var(--primary); }
.chat-layout.resizing { user-select: none; cursor: col-resize; }
.conv-list { border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
/* v2.66.18 — Se sumó el botón "Ver archivados" (#archivedToggleBtn) al lado
   del buscador, así que .conv-search pasa de bloque simple a fila flex. El
   ícono de lupa sigue posicionado absoluto sobre el input (mismo truco de
   siempre), y el botón nuevo queda como ítem de flex aparte, sin achicarse. */
.conv-search { padding: 14px; border-bottom: 1px solid var(--border-soft); position: relative; display: flex; align-items: center; gap: 8px; }
.conv-search input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 10px 14px 10px 38px; font-size: 14px; color: var(--text); }
.conv-search input:focus { outline: none; border-color: var(--primary); }
/* v2.66.23 — este selector era ".conv-search svg" (CUALQUIER svg adentro de
   .conv-search), así que cuando se sumó el botón de filtro por canal
   (#channelFilterBtn, un .icon-btn más DENTRO de .conv-search con su propio
   svg) esta regla también lo agarraba a ÉL y lo posicionaba absoluto encima
   del buscador — el ícono del canal filtrado terminaba tapando la lupa en
   vez de quedarse adentro de su botón. Se acota a #searchIco (el span de la
   lupa, el único que necesita quedar flotando DENTRO del input) para que no
   se lleve puesto ningún ícono nuevo que se agregue más adelante. */
.conv-search #searchIco svg { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-dim); }
.conv-search .icon-btn { width: 38px; height: 38px; flex: 0 0 auto; }
.conv-items { flex: 1; overflow-y: auto; }
.conv-item { display: flex; gap: 12px; padding: 13px 16px; cursor: pointer; border-bottom: 1px solid var(--border-soft); transition: background 0.15s; position: relative; }
.conv-item:hover { background: var(--surface-2); }
.conv-item.active { background: var(--primary-soft); }
.conv-item.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
.conv-main { flex: 1; min-width: 0; }
.conv-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.conv-name { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-time { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
.conv-preview { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.conv-unread { background: var(--secondary); color: #04231d; font-size: 11px; font-weight: 700; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; }

.chat-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--border-soft); background: var(--surface); }
.chat-head .conv-name { font-size: 15px; }
.chat-head .meta { font-size: 12px; color: var(--text-dim); }
.chat-head-actions { margin-left: auto; display: flex; gap: 8px; }
.chat-body {
  flex: 1; overflow-y: auto; padding: 22px 20px;
  display: flex; flex-direction: column; gap: 4px;
  background:
    radial-gradient(circle at 20% 20%, rgba(108,99,255,0.04), transparent 25%),
    var(--bg);
}
.msg-row { display: flex; max-width: 74%; }
.msg-row.out { align-self: flex-end; flex-direction: row-reverse; }
.msg-row.in { align-self: flex-start; }
.bubble {
  padding: 9px 13px; border-radius: 16px; font-size: 14.2px; line-height: 1.45;
  position: relative; word-wrap: break-word; overflow-wrap: anywhere; box-shadow: var(--shadow-sm);
}
.msg-row.in .bubble { background: var(--bubble-in); border-bottom-left-radius: 5px; }
.msg-row.out .bubble { background: var(--bubble-out); color: #fff; border-bottom-right-radius: 5px; }
.msg-row.sys { align-self: center; max-width: 90%; }
.msg-row.sys .bubble { background: var(--surface-3); color: var(--text-muted); font-size: 12.5px; text-align: center; box-shadow: none; }
.bubble.failed { background: color-mix(in srgb, var(--hot) 18%, var(--surface-2)); color: var(--text); border: 1px solid color-mix(in srgb, var(--hot) 40%, transparent); }
.bubble-meta { display: flex; align-items: center; gap: 5px; justify-content: flex-end; margin-top: 4px; font-size: 10.5px; opacity: 0.8; }
.msg-row.in .bubble-meta { color: var(--text-dim); }
.bubble-media img { max-width: 240px; border-radius: 10px; display: block; margin-bottom: 4px; cursor: pointer; }
.bubble-media audio { max-width: 240px; }
.bubble-doc { display: flex; align-items: center; gap: 9px; padding: 4px 2px; }
.bubble-doc svg { width: 26px; height: 26px; flex-shrink: 0; }
.tick { display: inline-flex; }
.tick svg { width: 15px; height: 15px; }
.tick.read { color: #53bdeb; }
.fail-reason { font-size: 11px; color: var(--hot); margin-top: 2px; }

.chat-foot { padding: 14px 18px; border-top: 1px solid var(--border-soft); background: var(--surface); }
.chat-input-row { display: flex; gap: 10px; align-items: flex-end; }
.chat-input { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 22px; padding: 11px 16px; font-size: 14.2px; color: var(--text); resize: none; max-height: 120px; line-height: 1.4; }
.chat-input:focus { outline: none; border-color: var(--primary); }
.send-btn { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-600)); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 6px 16px rgba(108,99,255,0.35); transition: transform 0.15s; }
.send-btn:hover { transform: scale(1.06); }
.send-btn:disabled { opacity: 0.5; transform: none; }
.send-btn svg { width: 20px; height: 20px; }
.window-warn { background: color-mix(in srgb, var(--warm) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warm) 35%, transparent); color: var(--warm); font-size: 12.5px; padding: 9px 14px; border-radius: var(--radius-sm); margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.window-warn svg { width: 16px; height: 16px; flex-shrink: 0; }

.chat-empty { display: grid; place-items: center; height: 100%; text-align: center; color: var(--text-dim); padding: 20px; }
.chat-empty svg { width: 70px; height: 70px; opacity: 0.3; margin-bottom: 18px; }

/* Test chat */
.test-shell { max-width: 760px; margin: 0 auto; }
.test-chat-body { height: 460px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .chat-layout { grid-template-columns: var(--conv-w, 290px) 6px 1fr; }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .menu-toggle { display: flex; }
  .row { grid-template-columns: 1fr; }
  .chat-layout { grid-template-columns: 1fr; }
  .chat-splitter { display: none; }
  .chat-layout.show-chat .conv-list { display: none; }
  .chat-layout:not(.show-chat) .chat-panel { display: none; }
  .content { padding: 18px; }
  .topbar { padding: 0 16px; gap: 12px; }
  /* En celular la barra superior se mantiene compacta: título más chico y
     sin subtítulo (que hacía que la barra creciera y desacomodara el chat). */
  .page-title { font-size: 18px; line-height: 1.15; }
  .page-sub { display: none; }
  /* Evita cualquier scroll horizontal accidental en pantallas chicas. */
  html, body { max-width: 100%; overflow-x: hidden; }
  .app, .main { max-width: 100vw; }
  /* Título y filtros uno arriba del otro (los filtros ya no se cortan). */
  .section-head { flex-direction: column; align-items: stretch; gap: 10px; }
  /* Encabezado del chat: los botones de acción pasan a una fila propia que
     puede desplazarse en vez de salirse de la pantalla. */
  .chat-head { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .chat-head-actions { margin-left: 0; width: 100%; overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .icon-btn { width: 38px; height: 38px; flex: 0 0 auto; }
  /* La tabla de leads se desplaza dentro de su tarjeta, sin romper el ancho. */
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

.backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 40; }
.backdrop.show { display: block; }

/* ============================================================
   R18 — módulos por negocio + trazabilidad del bot
   ============================================================ */
.premium-modules {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}
/* Cada módulo es un chip compacto que fluye horizontalmente y envuelve. El estado se
   muestra con el color del chip + un puntito (verde = activo, gris = apagado), en vez
   de un cartel con texto, para que entren varios por fila — v2.56.0. */
.module-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  white-space: nowrap;
}
.module-row.on { border-color: rgba(46, 204, 113, .4); background: rgba(46, 204, 113, .12); }
.module-row.locked { opacity: .55; }
.module-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-muted); font-size: 13px; }
.module-row.on .module-label { color: var(--text); }
.module-label input { accent-color: var(--primary); flex: 0 0 auto; }
.module-label > span { overflow: hidden; text-overflow: ellipsis; }
.module-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--text-dim); }
.module-row.on .module-dot { background: #3ddc84; }
.bot-trace { display: grid; gap: 8px; text-align: left; }
.bot-trace-title { color: var(--text); font-weight: 700; margin-bottom: 2px; }
.bot-trace-row { display: grid; grid-template-columns: 130px 86px 1fr; gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.trace-step { color: var(--text); font-weight: 600; }
.trace-status { width: max-content; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.trace-status.ok { background: rgba(46,204,113,.16); color: #3ddc84; }
.trace-status.bad { background: rgba(255,84,112,.16); color: #ff8a8a; }
.trace-status.mid { background: rgba(255,176,32,.16); color: #ffcf78; }
.trace-status.muted { background: var(--surface-2); color: var(--text-dim); }
.trace-detail { color: var(--text-muted); }
@media (max-width: 720px) {
  .bot-trace-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   R23 — Navegación profesional por flujo real del bot
   ============================================================ */
.biz-note {
  margin-top: 7px;
  padding: 9px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.35;
}
.nav-section {
  margin-top: 10px;
  padding: 12px 12px 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-dim);
  font-weight: 800;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; user-select: none; border-radius: 8px;
  transition: color .15s, background .15s;
}
.nav-section:hover { color: var(--text-muted); background: var(--surface-2); }
.nav-section-chevron { font-size: 10px; opacity: .65; transition: transform .15s; }
.nav-group-items { display: flex; flex-direction: column; gap: 2px; }
.nav-group-items.collapsed { display: none; }
.nav-section:first-child { margin-top: 0; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item[title] { align-items: center; }
.top-profile-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: min(360px, 34vw);
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  border-radius: 13px;
}
.top-profile-switch span {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.top-profile-switch .biz-select {
  margin-top: 0;
  min-height: 38px;
  padding: 8px 34px 8px 10px;
  border-color: transparent;
  background-color: var(--surface-2);
}
.conv-profile-bar {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 55%, transparent), transparent);
}
.conv-profile-row { display:flex; align-items:center; gap:10px; }
.conv-profile-copy { min-width:0; flex:1; }
.conv-profile-kicker { font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.conv-profile-title { margin-top:2px; font-weight:800; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv-profile-sub { margin-top:2px; color:var(--text-muted); font-size:12px; line-height:1.35; }
.conv-profile-bar .biz-select { margin-top:8px; }
.conv-profile-chip {
  display:inline-flex;
  align-items:center;
  max-width:100%;
  margin-top:4px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:10.5px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.workflow-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(170px,1fr));
  gap:14px;
  margin-bottom:18px;
}
.workflow-card {
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:18px;
  min-height:130px;
  position:relative;
  overflow:hidden;
}
.workflow-card::after {
  content:'';
  position:absolute;
  inset:auto -28px -36px auto;
  width:110px;
  height:110px;
  border-radius:50%;
  background:var(--primary-soft);
  filter:blur(3px);
}
.workflow-step {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:10px;
  background:var(--primary-soft);
  color:var(--primary);
  font-weight:900;
  margin-bottom:11px;
}
.workflow-title { font-family:var(--font-display); font-size:17px; font-weight:800; letter-spacing:-.03em; position:relative; z-index:1; }
.workflow-text { margin-top:4px; color:var(--text-muted); font-size:12.5px; line-height:1.4; position:relative; z-index:1; }
.workflow-pill { margin-top:9px; color:var(--secondary); font-size:11.5px; font-weight:800; position:relative; z-index:1; }
@media (max-width: 1100px) {
  .workflow-grid { grid-template-columns:repeat(2,minmax(180px,1fr)); }
  .top-profile-switch { min-width:240px; }
}
@media (max-width: 760px) {
  .top-profile-switch { display:none; }
  .workflow-grid { grid-template-columns:1fr; }
}

/* ============================================================
   R25 — Perfiles/números más profesional: filtros, orden y acciones
   ============================================================ */
.profile-toolbar {
  margin-bottom: 16px;
}
.profile-toolbar-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.profile-toolbar-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.02em;
}
.profile-toolbar-head p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.4;
}
.profile-count {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
  font-size: 12px;
  font-weight: 800;
}
.profile-toolbar-grid {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) repeat(7, minmax(132px, 1fr)) auto auto;
  gap: 12px;
  align-items: end;
}
.profile-toolbar .field { margin-bottom: 0; }
.profile-toolbar .field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
}
.profile-sort-dir {
  min-width: 86px;
  white-space: nowrap;
}
.profile-table-card { overflow: hidden; }
.profile-table th,
.profile-table td {
  vertical-align: middle;
}
.sort-th {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.sort-th::after {
  content: '↕';
  opacity: .35;
  font-size: 11px;
}
.sort-th.active { color: var(--text); }
.sort-th.active::after {
  content: attr(data-dir);
  opacity: .8;
  text-transform: uppercase;
}
.sort-th.active[data-dir="asc"]::after { content: '↑'; }
.sort-th.active[data-dir="desc"]::after { content: '↓'; }
.profile-cell { min-width: 130px; }
.profile-name {
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}
.profile-sub {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
}
.feature-line {
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 12px;
}
.feature-line label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* v2.66.22 — sin white-space:nowrap, "Inactivo" (8 letras) partía a la mitad
   en pantallas donde la columna "Estado" queda angosta: la regla general
   ".profile-table td { overflow-wrap: anywhere }" (pensada para nombres o
   textos largos que no rompen en una palabra) corta CUALQUIER palabra que no
   entre, incluidas las cortas como esta. */
.status-text { color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.status-off { color: var(--text-dim); }
.profile-actions {
  display: grid;
  gap: 8px;
  justify-content: end;
}
.profile-action-btn {
  min-height: 38px;
  padding: 9px 12px;
  width: 100%;
  font-size: 13px;
  border-color: var(--border);
  background: var(--surface-2);
  box-shadow: none;
}
.profile-action-btn.wide {
  grid-column: 1 / -1;
}
.profile-action-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
}
@media (max-width: 1500px) {
  .profile-toolbar-grid { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
  .profile-search { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .profile-toolbar-head { flex-direction: column; }
  .profile-toolbar-grid { grid-template-columns: 1fr; }
  .profile-actions { grid-template-columns: 1fr; }
  .profile-action-btn.wide { grid-column: auto; }
}

/* ============================================================
   R26 — Perfiles/números sin scroll lateral
   ------------------------------------------------------------
   Objetivo: que filtros y tabla se acomoden al ancho real del panel,
   no al ancho total de la ventana. El usuario puede tener el sidebar
   abierto, zoom del navegador o menos ancho disponible; por eso se usa
   auto-fit, table-layout fixed y una vista tipo tarjeta cuando la tabla
   no entra cómoda. No cambia endpoints ni base de datos.
   ============================================================ */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
.content {
  max-width: 100%;
  overflow-x: hidden;
}
.profile-toolbar,
.profile-table-card {
  max-width: 100%;
}
.profile-toolbar-grid {
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  align-items: end;
}
.profile-toolbar-grid .field,
.profile-toolbar-grid .btn,
.profile-toolbar-grid input,
.profile-toolbar-grid select {
  min-width: 0;
}
.profile-search {
  grid-column: span 2;
}
.profile-sort-dir,
#clearFilters {
  width: 100%;
  min-width: 0;
}
.profile-table-card {
  overflow: hidden;
  container-type: inline-size;
}
.profile-table-card .table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.profile-table {
  width: 100%;
  table-layout: fixed;
}
.profile-table th,
.profile-table td {
  padding: 12px 10px;
  overflow-wrap: anywhere;
  /* v2.66.22 — overflow-wrap:anywhere corta cualquier palabra larga sin
     espacios para que no desborde la columna (necesario, ver columnas
     angostas más abajo), pero sin ayuda corta a lo bruto en cualquier
     letra ("AUTOMATIZACIÓN" del encabezado terminaba partido en
     "AUTOMATIZA" + "CIÓN"). Con hyphens:auto (y <html lang="es"> ya puesto
     en la etiqueta raíz del documento) el navegador corta por sílabas con
     un guión, mucho más prolijo cuando sí hace falta partir una palabra. */
  hyphens: auto;
}
/* Anchos de columna de la tabla de perfiles: definidos una sola vez más abajo
   (sección de layout responsive). Se quitó acá un set duplicado y desactualizado
   que quedaba pisado por el de abajo — v2.55.0. */
.profile-table .biz-select,
.profile-table select {
  width: 100%;
  min-width: 0 !important;
}
/* v2.66.21 — acá había un segundo set de .actions-cell/.profile-actions/
   .profile-action-btn (de la sección "R26") que la sección "R27" (más
   abajo) volvía a redefinir casi por completo, quedando la mayoría de
   estos valores pisados y sin efecto real — dos lugares distintos del
   archivo describiendo "casi" lo mismo, difícil de mantener. Se dejaron
   los pocos valores que SÍ seguían aplicando (width:100% de .profile-actions,
   width:auto de .actions-cell, min-width:0 y font-size:12.5px del botón)
   fusionados en la definición única de R27, y se borró este set intermedio. */
.module-row,
.module-label,
.feature-line label,
.badge {
  max-width: 100%;
}

/* v2.66.21 — acá había un @container (max-width: 1080px) que convertía la
   tabla en tarjetas apiladas, con casi las mismas reglas que el
   @container (max-width: 1180px) de la sección "R27" (más abajo). Como
   1180px > 1080px, el de 1180 ya se activa primero (a un contenedor más
   ancho) y sigue activo en todo el rango de 1080 para abajo — el de 1080
   nunca llegaba a aportar nada propio, solo un segundo lugar más para
   mantener sincronizado. Se borró, después de confirmar que su única regla
   que NO estaba en el de 1180 (".profile-table tr:last-child { border-bottom: 0; }")
   ya se sumó ahí también. */

@media (max-width: 760px) {
  .profile-search {
    grid-column: 1 / -1;
  }
  .profile-table td {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .profile-actions {
    grid-template-columns: 1fr;
  }
}
.profile-table td.empty::before {
  content: none !important;
}

/* ============================================================
   R27 — Perfiles/números más profesional y sin botones partidos
   ------------------------------------------------------------
   Unifica Premium + módulos por rubro en una sola columna y reserva
   más ancho real para Acciones. Los botones mantienen el mismo estilo,
   no cortan palabras y pasan a formato tarjeta cuando el contenedor no
   alcanza. Esto evita el aspecto desprolijo visto con textos como
   "Configurar" o "WhatsApp" partidos en dos líneas.
   ============================================================ */
/* v2.66.21 — la tabla de Perfiles/números tiene 7 columnas (Perfil, Plan,
   Automatización, Premium/rubro, Canales, Estado, Acciones — ver el <thead>
   de businesses.html), pero acá había una regla nth-child(8) que no
   apuntaba a ninguna columna real (código muerto), mientras que la columna
   7 (Acciones, la que tiene que alojar 5 botones) quedaba con un ancho fijo
   de apenas 16%. Con table-layout:fixed, eso apretaba los botones de
   "Chats/Canales/Bot/Nombre/Activar" hasta el punto de recortarlos con "…"
   (ver white-space:nowrap más abajo). Se les da más aire a Acciones y
   Premium/rubro cede un poco (sigue siendo la columna con más contenido,
   pero no necesita 29% para 2 checkboxes + una lista corta de módulos).
   Los 7 porcentajes suman 100% justo, sin columna 8 fantasma. */
/* v2.66.22 — reajuste fino sobre el de arriba, mismo criterio: "Plan" (col 2)
   truncaba "Premium" a "Premiu…" en el <select> (que se achica con
   min-width:0 !important para no forzar la columna, ver más arriba) y
   "Automatización" (col 3, una sola palabra sin espacios) no tenía margen
   para entrar en una línea y terminaba cortada a la mitad en cualquier letra.
   Les subimos ancho a costa de "Canales" (col 5, son 4 puntitos chicos, le
   sobraba lugar) y "Premium / rubro" (col 4, sigue siendo la que más
   contenido tiene, pero no necesita tanto). Los 7 valores siguen sumando 100%. */
.profile-table th:nth-child(1) { width: 10%; }
.profile-table th:nth-child(2) { width: 12%; }
.profile-table th:nth-child(3) { width: 14%; }
.profile-table th:nth-child(4) { width: 20%; }
.profile-table th:nth-child(5) { width: 8%; }
.profile-table th:nth-child(6) { width: 8%; }
.profile-table th:nth-child(7) { width: 28%; }

/* "A demanda" y los módulos se renderizan como chips en .premium-modules (arriba).
   Se quitaron .premium-cell-head y .feature-line.inline (sin uso) — v2.55.0.
   v2.66.21 — definición ÚNICA de .actions-cell/.profile-actions/
   .profile-action-btn (antes repartida en tres bloques distintos del
   archivo, ver comentario más arriba). Junto con el ancho de columna
   ampliado (28%, arriba), los botones ya no necesitan recortarse con "…"
   en el uso normal — el ellipsis queda como resguardo para pantallas
   angostas, no como el comportamiento esperado. */
.actions-cell {
  width: auto;
  min-width: 180px;
}
.profile-actions {
  width: 100%;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  gap: 8px;
}
.profile-action-btn {
  min-width: 0;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 38px;
  border-radius: 10px;
  font-weight: 800;
  line-height: 1;
}
.profile-action-btn.wide {
  grid-column: 1 / -1;
}

@container (max-width: 1180px) {
  .profile-table,
  .profile-table thead,
  .profile-table tbody,
  .profile-table tr,
  .profile-table td {
    display: block;
    width: 100%;
  }
  .profile-table thead { display: none; }
  .profile-table tr {
    padding: 16px;
    border-bottom: 1px solid var(--border-soft);
  }
  /* v2.66.21 — rescatada del @container(1080px) que se borró más arriba:
     sin esto, la última tarjeta de la lista quedaba con un borde inferior
     de más (las demás filas SÍ lo pierden, ver .profile-table tr arriba). */
  .profile-table tr:last-child {
    border-bottom: 0;
  }
  .profile-table td {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 0;
  }
  .profile-table td::before {
    content: attr(data-label);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .actions-cell .profile-actions {
    max-width: 520px;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }
  .actions-cell .profile-action-btn.wide {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .actions-cell .profile-actions,
  .profile-actions {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .profile-action-btn.wide {
    grid-column: auto;
  }
}

/* ============================================================
   R28 — Agenda, turnos, contactos y menú lateral configurable
   ------------------------------------------------------------
   Mantiene Conversaciones arriba por regla de oro, suma Agenda/Turnos,
   permite ordenar accesos por perfil y mejora modales compartidos.
   ============================================================ */
.nav-customize {
  margin: 12px 8px 4px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.nav-customize:hover { color: var(--text); border-color: var(--primary); background: var(--primary-soft); }
/* v2.66.35 — Interruptor "simple / ver todo" del menú lateral. Se ve un
   poco más marcado que "Ordenar menú" (fondo suave) porque es la acción
   que más va a usar un cliente que siente el menú cargado. */
.nav-mode-toggle {
  margin: 14px 8px 4px;
  padding: 9px 10px;
  width: calc(100% - 16px);
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--primary-soft);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.nav-mode-toggle:hover { color: var(--text); border-color: var(--primary); }
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 620px;
  width: 100%;
  padding: 20px;
  box-shadow: var(--shadow-lg);
}
.nav-order-list { display: grid; gap: 8px; max-height: 56vh; overflow: auto; }
.nav-order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.nav-order-item.dragging { opacity: .55; border-color: var(--primary); }
.nav-order-item svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.nav-order-item small { display: block; color: var(--text-dim); font-size: 11px; margin-top: 1px; }
.drag-handle { color: var(--text-dim); cursor: grab; font-weight: 900; }
.suggest-name-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--secondary-soft);
  color: var(--secondary);
  font-size: 11px;
  font-weight: 800;
  vertical-align: middle;
}
.appointments-filters { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.appointments-table { table-layout: fixed; }
.appointments-table th:nth-child(1) { width: 18%; }
.appointments-table th:nth-child(2) { width: 15%; }
.appointments-table th:nth-child(3) { width: 15%; }
.appointments-table th:nth-child(4) { width: 12%; }
.appointments-table th:nth-child(5) { width: 10%; }
.appointments-table th:nth-child(6) { width: 20%; }
.appointments-table th:nth-child(7) { width: 10%; }
.notes-preview {
  max-height: 62px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.appt-actions { grid-template-columns: 1fr; min-width: 0; }
.badge-ok { background: rgba(46,204,113,.15); color: #3ddc84; }
.badge-hot { background: rgba(255,90,90,.12); color: #ff8a8a; }
@container (max-width: 980px) {
  .appointments-table,
  .appointments-table thead,
  .appointments-table tbody,
  .appointments-table tr,
  .appointments-table td {
    display: block;
    width: 100%;
  }
  .appointments-table thead { display: none; }
  .appointments-table tr { padding: 15px; border-bottom: 1px solid var(--border-soft); }
  .appointments-table td {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 12px;
    padding: 8px 0;
    border-bottom: 0;
  }
  .appointments-table td::before {
    content: attr(data-label);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
}

/* ============================================================
   R29 — Agenda/Turnos: filtros prolijos, fin opcional y sin fallas CSS
   ------------------------------------------------------------
   Ajusta la barra de filtros para que los botones no queden desalineados
   ni empujen el layout. El alta/edición separa día, hora de inicio y hora
   de fin opcional desde appointments.html; por eso estos estilos priorizan
   lectura clara y controles táctiles consistentes.
   ============================================================ */
.appointments-filters {
  grid-template-columns: minmax(240px, 2fr) minmax(150px, 0.85fr) repeat(2, minmax(150px, 0.9fr)) minmax(240px, 1.15fr);
  gap: 12px;
  align-items: end;
}
.appointments-filter-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}
.appointments-filter-actions .btn,
#newApptBtn {
  min-height: 52px;
  width: 100%;
  white-space: nowrap;
  font-weight: 800;
}
.appointments-table th:nth-child(1) { width: 18%; }
.appointments-table th:nth-child(2) { width: 14%; }
.appointments-table th:nth-child(3) { width: 16%; }
.appointments-table th:nth-child(4) { width: 12%; }
.appointments-table th:nth-child(5) { width: 9%; }
.appointments-table th:nth-child(6) { width: 17%; }
.appointments-table th:nth-child(7) { width: 14%; }
.appointments-table .actions-cell { min-width: 0; }
.appointments-table .appt-actions {
  grid-template-columns: 1fr;
  gap: 8px;
}
.appointments-table .profile-action-btn {
  min-height: 36px;
  white-space: nowrap;
}
@media (max-width: 1280px) {
  .appointments-filters { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .appointments-filters .profile-search { grid-column: 1 / -1; }
  .appointments-filter-actions { grid-column: span 2; }
}
@media (max-width: 760px) {
  .appointments-filters { grid-template-columns: 1fr; }
  .appointments-filter-actions { grid-column: 1 / -1; grid-template-columns: 1fr; }
  #newApptBtn { width: 100%; }
}

/* ============================================================
   v2.27.0 — Primeros pasos guiados
   ------------------------------------------------------------
   Nueva pantalla /start: onboarding visual por perfil, responsive y sin
   dependencias. Usa datos reales de /api/onboarding/status.
   ============================================================ */
.start-skeleton-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 18px;
}
.start-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 22px;
  align-items: center;
  padding: 28px;
  overflow: hidden;
  position: relative;
}
.start-hero::after {
  content: '';
  position: absolute;
  right: -120px;
  top: -160px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-soft), transparent 68%);
  pointer-events: none;
}
.start-hero-main,
.start-progress-wrap { position: relative; z-index: 1; }
.start-kicker {
  color: var(--secondary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.start-hero h1 {
  margin: 6px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.03;
  letter-spacing: -.05em;
}
.start-hero p {
  max-width: 680px;
  color: var(--text-muted);
  font-size: 15px;
}
.start-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.start-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.start-next span {
  display: block;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.start-next b {
  display: block;
  margin-top: 3px;
  font-size: 15px;
}
.start-progress-wrap {
  display: grid;
  place-items: center;
}
.start-progress-ring {
  width: min(220px, 48vw);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--secondary) var(--pct), var(--surface-3) 0deg);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
}
.start-progress-ring > div {
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.start-progress-ring strong {
  font-family: var(--font-display);
  font-size: 42px;
  letter-spacing: -.05em;
}
.start-progress-ring span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}
.start-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}
.start-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.start-card-head.compact {
  padding: 0 0 14px;
  border-bottom: 0;
}
.start-card-head h2 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -.03em;
}
.start-steps-card { overflow: hidden; margin-bottom: 18px; }
.start-steps { display: grid; }
.start-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-soft);
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.start-step:last-child { border-bottom: 0; }
.start-step:hover { background: var(--surface-2); }
.start-step-index {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 900;
}
.start-step.done .start-step-index {
  background: var(--secondary-soft);
  border-color: color-mix(in srgb, var(--secondary) 42%, var(--border));
  color: var(--secondary);
}
.start-step.pending .start-step-index {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  color: var(--primary);
}
.start-step-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.start-step h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -.025em;
}
.start-step p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13.5px;
}
.start-step-evidence {
  margin-top: 7px;
  color: var(--text-dim);
  font-size: 12px;
}
.start-step-status {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 900;
}
.start-step.done .start-step-status {
  background: var(--secondary-soft);
  color: var(--secondary);
}
.start-step.pending .start-step-status {
  background: var(--primary-soft);
  color: var(--primary);
}
.start-side {
  display: grid;
  gap: 18px;
}
.start-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.start-metric {
  padding: 14px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
.start-metric-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.04em;
}
.start-metric-label {
  margin-top: 1px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 800;
}
.start-metric-hint {
  margin-top: 3px;
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.35;
}
.start-reco-list { display: grid; gap: 10px; }
.start-reco {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 12px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border-soft));
}
.start-reco span {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex: 0 0 auto;
  margin-top: 1px;
}
.start-reco svg { width: 18px; height: 18px; }
.start-reco p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}
.start-error {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 720px;
}
.start-error h2 { margin: 0 0 4px; font-family: var(--font-display); }
.start-error p { margin: 0 0 14px; color: var(--text-muted); }

@media (max-width: 1120px) {
  .start-hero,
  .start-layout,
  .start-skeleton-grid { grid-template-columns: 1fr; }
  .start-progress-wrap { justify-content: start; }
}
@media (max-width: 720px) {
  .start-hero { padding: 22px; }
  .start-next { align-items: stretch; flex-direction: column; }
  .start-next .btn { width: 100%; }
  .start-card-head { padding: 18px 18px 12px; flex-direction: column; }
  .start-step {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    padding: 16px 18px;
  }
  .start-step > .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
  .start-step-title-row { align-items: flex-start; flex-direction: column; gap: 7px; }
  .start-metrics-grid { grid-template-columns: 1fr; }
  .start-progress-ring { width: min(190px, 72vw); }
}
@media (max-width: 420px) {
  .start-hero { padding: 18px; }
  .start-step { grid-template-columns: 1fr; }
  .start-step-index { width: 34px; height: 34px; }
}

/* ============================================================
   v2.28.0 — Kits por rubro dentro de “Empezá acá”
   ------------------------------------------------------------
   Unifica la carga inicial de brief, respuestas automáticas, menú
   guiado y textos de fallback. Todo queda responsive y editable.
   ============================================================ */
.start-card-head p {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.45;
  max-width: 780px;
}
.start-quick {
  margin-top: 18px;
  overflow: hidden;
}
.start-unified-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 22px 18px;
}
.start-unified-strip div {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface-2);
}
.start-unified-strip b {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}
.start-unified-strip span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 750;
}
.start-explain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 22px 18px;
}
.start-explain-grid > div {
  padding: 15px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--secondary) 18%, var(--border-soft));
  background: color-mix(in srgb, var(--secondary) 7%, transparent);
}
.start-explain-grid h3 {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -.025em;
}
.start-explain-grid p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.start-kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  padding: 0 22px 22px;
}
.start-kit-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 100%;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--surface-2);
  cursor: pointer;
  transition: transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.start-kit-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 52%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 86%, var(--primary-soft));
}
.start-kit-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.start-kit-emoji {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 15px;
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  font-size: 24px;
}
.start-kit-card h3,
.start-modal-title h3 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -.03em;
}
.start-kit-card h3 { font-size: 16px; }
.start-kit-card p,
.start-modal-title p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.35;
}
.start-kit-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.start-kit-counts span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 850;
}
.start-kit-example {
  padding: 11px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border-soft));
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.start-kit-example span {
  display: block;
  margin-bottom: 4px;
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.start-kit-btn {
  width: 100%;
  margin-top: auto;
}
.start-flow-example {
  display: grid;
  gap: 10px;
}
.start-flow-example div {
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface-2);
}
.start-flow-example span {
  display: block;
  margin-bottom: 3px;
  color: var(--secondary);
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.start-flow-example p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.35;
}
.start-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(8px);
}
.start-kit-modal {
  width: min(920px, 100%);
  max-height: min(86vh, 920px);
  overflow: auto;
  padding: 20px;
}
.start-modal-title {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.start-info-box {
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--secondary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--secondary) 20%, var(--border-soft));
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 14px;
}
.start-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.start-modal-grid section {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--surface-2);
}
.start-modal-grid h4 {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.start-brief-preview {
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.start-preview-item {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 12px;
  background: var(--surface-3);
  margin-bottom: 8px;
}
.start-preview-item b {
  font-size: 13px;
}
.start-preview-item span {
  color: var(--text-dim);
  font-size: 11px;
}
.start-preview-item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}
.start-preview-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.start-preview-pill {
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 850;
}
.start-example-chat {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 13px;
  background: var(--surface-3);
  margin-bottom: 8px;
}
.start-example-chat b {
  display: block;
  color: var(--secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.start-example-chat p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.4;
}
.start-checkbox-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}
.start-checkbox-line input { margin-top: 3px; }
.start-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
@media (max-width: 1020px) {
  .start-unified-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-modal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .start-unified-strip,
  .start-explain-grid,
  .start-kit-grid { padding-left: 18px; padding-right: 18px; }
  .start-explain-grid,
  .start-unified-strip { grid-template-columns: 1fr; }
  .start-kit-grid { grid-template-columns: 1fr; }
  .start-kit-modal { padding: 16px; max-height: 90vh; }
  .start-modal-actions { flex-direction: column-reverse; }
  .start-modal-actions .btn { width: 100%; }
}

/* ============================================================
   v2.33.0 — Biblioteca premium de kits + onboarding más operativo
   ------------------------------------------------------------
   - Filtros responsive por rubro/caso de automatización.
   - Cards más explicativas para que el usuario entienda qué resuelve.
   - Soporta que “Empezá acá” pase a Ayuda cuando el perfil ya está listo.
   ============================================================ */
.tpl-premium-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.tpl-premium-hero h2 {
  margin: 4px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -.04em;
}
.tpl-premium-hero p {
  margin: 0;
  max-width: 860px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}
.tpl-library { overflow: hidden; }
.start-kit-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 12px;
}
.start-kit-toolbar h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -.03em;
}
.start-kit-toolbar p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}
.start-kit-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(180px, .85fr) minmax(200px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 0 22px 18px;
}
.start-filter-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.start-filter-field span {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.start-filter-field input,
.start-filter-field select {
  width: 100%;
  min-width: 0;
}
.start-kit-category {
  margin-bottom: 3px;
  color: var(--secondary);
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.start-kit-solves {
  padding: 10px 11px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--secondary) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--secondary) 16%, var(--border-soft));
}
.start-kit-solves b {
  display: block;
  margin-bottom: 7px;
  color: var(--secondary);
  font-size: 10.5px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.start-kit-solves div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.start-kit-solves span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}
.start-kit-empty {
  grid-column: 1 / -1;
  padding: 34px 18px;
  text-align: center;
}
.start-modal-grid section:nth-child(5) {
  grid-column: 1 / -1;
}
.nav-group-items.collapsed {
  display: none;
}
@media (max-width: 980px) {
  .start-kit-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .start-filter-search { grid-column: 1 / -1; }
  .start-kit-filters .btn { width: 100%; }
}
@media (max-width: 720px) {
  .tpl-premium-hero,
  .start-kit-toolbar {
    flex-direction: column;
  }
  .start-kit-filters {
    grid-template-columns: 1fr;
    padding-left: 18px;
    padding-right: 18px;
  }
  .start-filter-search { grid-column: auto; }
  .tpl-premium-hero .badge,
  .start-kit-toolbar .badge {
    align-self: flex-start;
  }
}

/* ============================================================
   v2.33.0 — Pulido premium de buscadores, topbar y kits
   ------------------------------------------------------------
   - Buscador global siempre visible en el topbar.
   - Filtros con estética consistente en modo oscuro/claro.
   - Cards de kits alineadas, con altura estable y CTA siempre abajo.
   ============================================================ */
.topbar-title {
  min-width: 0;
  flex: 0 1 auto;
}
.topbar-search {
  position: relative;
  flex: 1 1 420px;
  max-width: 680px;
  min-width: 220px;
  display: flex;
  align-items: center;
}
.topbar-search svg {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  color: var(--text-dim);
  pointer-events: none;
}
.topbar-search input {
  width: 100%;
  height: 42px;
  padding: 0 64px 0 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 82%, var(--surface-2));
  color: var(--text);
  font-size: 14px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.topbar-search input::placeholder { color: var(--text-dim); }
.topbar-search input:focus {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.topbar-search-count {
  position: absolute;
  right: 12px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 850;
  pointer-events: none;
}
.is-search-hidden { display: none !important; }

/* Filtros: terminamos con inputs/select blancos o desalineados en pantallas oscuras. */
.start-kit-filters {
  padding: 14px 22px 18px;
  margin: 0 22px 18px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.start-filter-field input,
.start-filter-field select,
input[type="search"],
select:not(.biz-select) {
  min-height: 42px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 13px;
  padding: 10px 13px;
  font-size: 14px;
  outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.start-filter-field select,
select:not(.biz-select) {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.start-filter-field input:focus,
.start-filter-field select:focus,
input[type="search"]:focus,
select:not(.biz-select):focus {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.start-kit-filters .btn { min-height: 42px; }

/* Grilla premium: cada fila queda prolija y los botones se alinean abajo. */
.start-kit-grid {
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  align-items: stretch;
  gap: 16px;
}
.start-kit-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 474px;
  gap: 12px;
  align-content: initial;
}
.start-kit-top { min-height: 118px; }
.start-kit-card h3 {
  line-height: 1.2;
  min-height: 38px;
}
.start-kit-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 52px;
}
.start-kit-counts { min-height: 30px; }
.start-kit-solves { min-height: 96px; }
.start-kit-solves div {
  max-height: 54px;
  overflow: hidden;
}
.start-kit-example {
  min-height: 116px;
  display: block;
  overflow: hidden;
}
.start-kit-btn { margin-top: auto; min-height: 48px; }
.start-kit-card.is-featured {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 86%, var(--primary-soft)), var(--surface-2));
}

@media (max-width: 1120px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--topbar-h); padding-top: 12px; padding-bottom: 12px; }
  .topbar-title { flex: 1 1 300px; }
  .topbar-search { order: 3; flex-basis: 100%; max-width: none; }
  .top-profile-switch { order: 2; }
}
@media (max-width: 720px) {
  .topbar { gap: 10px; }
  .topbar-search { min-width: 0; }
  .topbar-search input { height: 40px; font-size: 13px; }
  .start-kit-filters { margin-left: 18px; margin-right: 18px; padding-left: 14px; padding-right: 14px; }
  .start-kit-grid { grid-template-columns: 1fr; }
  .start-kit-card { min-height: initial; }
  .start-kit-top,
  .start-kit-card h3,
  .start-kit-card p,
  .start-kit-counts,
  .start-kit-solves,
  .start-kit-example { min-height: 0; }
}

/* ============================================================
   v2.33.0 — Corrección visual de buscadores + guía más limpia
   ------------------------------------------------------------
   - El buscador superior conserva padding propio y el ícono ya no pisa texto.
   - Los filtros de Kits por rubro quedan alineados y consistentes.
   - Empezá acá deja de renderizar la grilla completa de kits; usa una CTA
     compacta hacia /templates para mantener la guía simple.
   ============================================================ */
.topbar-search {
  flex: 1 1 460px;
  max-width: 720px;
}
.topbar-search svg {
  top: 50%;
  transform: translateY(-50%);
  left: 16px;
  z-index: 1;
}
.topbar-search input,
input#globalSearch {
  height: 44px;
  padding: 0 76px 0 46px;
  border-radius: 999px;
  line-height: 44px;
}
.topbar-search-count {
  top: 50%;
  transform: translateY(-50%);
  right: 14px;
  max-width: 58px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* El estilo genérico de formularios no debe pisar el buscador del topbar. */
.start-filter-field input,
.start-filter-field select,
input[type="search"]:not(#globalSearch),
select:not(.biz-select) {
  min-height: 42px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 13px;
  padding: 10px 13px;
  font-size: 14px;
  outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.start-filter-field input:focus,
.start-filter-field select:focus,
input[type="search"]:not(#globalSearch):focus,
select:not(.biz-select):focus {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.start-kit-filters {
  grid-template-columns: minmax(260px, 1.45fr) minmax(200px, .9fr) minmax(240px, 1.05fr) minmax(116px, auto);
  gap: 12px;
  align-items: end;
  padding: 16px 20px;
}
.start-kit-filters .btn {
  height: 42px;
  white-space: nowrap;
}
.start-filter-field span {
  min-height: 14px;
}
.start-filter-field input,
.start-filter-field select {
  width: 100%;
}

.start-quick-compact .start-card-head {
  align-items: flex-start;
}
.start-kit-cta-panel {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 0 22px 18px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border-soft));
  background:
    radial-gradient(520px 180px at 0% 0%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.start-kit-cta-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  font-size: 26px;
}
.start-kit-cta-copy h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  letter-spacing: -.03em;
  font-size: 18px;
}
.start-kit-cta-copy p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.48;
  font-size: 13.5px;
}
.start-cta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}
.start-cta-pills span {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 850;
}
.start-kit-cta-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.start-kit-cta-actions .btn {
  min-height: 44px;
}

.start-kit-card {
  overflow: hidden;
}
.start-kit-top > div:last-child {
  min-width: 0;
}
.start-kit-card h3,
.start-kit-card p,
.start-kit-example,
.start-kit-solves {
  overflow-wrap: anywhere;
}

@media (max-width: 1120px) {
  .topbar-search { flex-basis: 100%; max-width: none; }
  .start-kit-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-filter-search { grid-column: 1 / -1; }
  .start-kit-filters .btn { width: 100%; }
}
@media (max-width: 860px) {
  .start-kit-cta-panel {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .start-kit-cta-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .start-kit-cta-actions .btn { flex: 1 1 180px; }
}
@media (max-width: 720px) {
  .topbar-search input,
  input#globalSearch {
    height: 40px;
    line-height: 40px;
    padding-left: 44px;
    padding-right: 56px;
  }
  .topbar-search svg { left: 15px; width: 16px; height: 16px; }
  .topbar-search-count { max-width: 44px; right: 12px; }
  .start-kit-filters {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
  }
  .start-kit-cta-panel {
    margin-left: 18px;
    margin-right: 18px;
    grid-template-columns: 1fr;
  }
  .start-kit-cta-icon { width: 48px; height: 48px; }
  .start-kit-cta-actions { grid-column: auto; }
  .start-kit-cta-actions .btn { width: 100%; }
}

/* v2.33.0 — Filtro avanzado de Kits sin duplicar el buscador superior. */
.start-filter-note {
  align-self: stretch;
}
.filter-search-hint {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 10px 13px;
  border-radius: 13px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.35;
}
@media (max-width: 720px) {
  .filter-search-hint { min-height: 0; }
}

/* ============================================================
   v2.33.0 — Centro de datos del negocio / StorageService
   ------------------------------------------------------------
   UI premium para información real, stock, documentos, fuentes y storage.
   Todo responsive y alineado con el sistema visual del CRM.
   ============================================================ */
.business-data-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.data-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(720px 260px at 0% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 86%, transparent), var(--surface));
}
.data-hero h2 { margin: 4px 0 8px; font-family: var(--font-display); letter-spacing: -.04em; font-size: clamp(24px, 3vw, 34px); }
.data-hero p { margin: 0; color: var(--text-muted); max-width: 820px; line-height: 1.55; }
.data-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.data-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.data-status-card { padding: 18px; min-height: 126px; display: flex; flex-direction: column; justify-content: space-between; }
.data-status-card span { color: var(--text-muted); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.data-status-card strong { font-size: 26px; letter-spacing: -.04em; margin-top: 8px; }
.data-status-card small { color: var(--text-muted); line-height: 1.35; }
.data-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
  scrollbar-width: thin;
}
.data-tabs button {
  border: 0;
  border-radius: 13px;
  padding: 11px 14px;
  color: var(--text-muted);
  background: transparent;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}
.data-tabs button.active {
  color: #fff;
  background: var(--primary);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 22%, transparent);
}
.data-panel { display: none; }
.data-panel.active { display: block; }
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.panel-head h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.03em; }
.panel-head p { margin: 0; color: var(--text-muted); line-height: 1.45; }
.data-form-grid,
.data-import-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.data-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.data-field.full { grid-column: 1 / -1; }
.data-field span { color: var(--text-muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.data-field input,
.data-field textarea,
.data-field select {
  width: 100%;
  min-height: 42px;
  resize: vertical;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 13px;
  outline: none;
  font: inherit;
  line-height: 1.45;
}
.data-field textarea { min-height: 104px; }
.data-field input:focus,
.data-field textarea:focus,
.data-field select:focus {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  margin: 12px 0;
  font-weight: 750;
}
.data-example-box,
.data-empty-premium,
.storage-usage,
.storage-steps article,
.source-card,
.source-history {
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  border-radius: 18px;
  padding: 16px;
}
.data-example-box p,
.data-empty-premium p,
.source-card p,
.storage-steps p,
.storage-usage p { color: var(--text-muted); margin: 6px 0 0; line-height: 1.48; }
.data-table-wrap { margin-top: 18px; }
.data-table { width: 100%; border-collapse: collapse; min-width: 820px; }
.data-table th,
.data-table td { padding: 12px; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: top; }
.data-table th { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.data-table td small { display: block; color: var(--text-muted); margin-top: 4px; }
.data-empty-premium { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; align-items: start; }
.data-empty-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: var(--surface-3); font-size: 28px; }
.data-empty-premium ul { color: var(--text-muted); margin: 10px 0 0; padding-left: 18px; }
.source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.source-card { display: flex; gap: 13px; min-height: 152px; }
.source-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; background: var(--surface-3); font-size: 24px; }
.source-card h3 { margin: 0 0 6px; }
.source-history { grid-column: 1 / -1; }
.source-history p { margin: 8px 0 0; color: var(--text-muted); }
.storage-roadmap { display: grid; gap: 14px; }
.storage-usage b { display: block; font-size: 26px; letter-spacing: -.04em; }
.storage-usage span { color: var(--text-muted); }
.storage-bar { height: 10px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin: 13px 0; }
.storage-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.storage-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.storage-steps b { display: block; margin-bottom: 6px; }
code { color: var(--text); background: var(--surface-3); border: 1px solid var(--border-soft); border-radius: 8px; padding: 2px 6px; }

@media (max-width: 1120px) {
  .data-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-grid,
  .storage-steps { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .data-hero,
  .panel-head { flex-direction: column; align-items: stretch; }
  .data-hero-badges { justify-content: flex-start; }
  .data-status-grid,
  .data-form-grid,
  .data-import-grid { grid-template-columns: 1fr; }
  .data-empty-premium { grid-template-columns: 1fr; }
  .panel-head .btn { width: 100%; }
  .data-tabs { border-radius: 14px; }
  .data-tabs button { padding: 10px 12px; }
}
@media (max-width: 520px) {
  .data-hero { padding: 18px; }
  .data-status-card { min-height: 108px; }
  .data-field textarea { min-height: 118px; }
}

/* ============================================================
   v2.66.13 — Acordeón reutilizable (grupos plegables dentro de un panel)
   ------------------------------------------------------------
   Pensado para pantallas con muchos campos del mismo tipo (formularios
   largos) que antes se mostraban todos apilados de una sola vez. Se
   construye sobre <details>/<summary>, los elementos nativos de HTML para
   contenido plegable:
     - No hace falta JS para abrir/cerrar (el navegador lo maneja solo).
     - Los lectores de pantalla ya anuncian "expandido/contraído" sin que
       agreguemos aria-expanded a mano — viene gratis con el elemento nativo.
     - Funciona con teclado (Tab + Enter/Espacio) sin escribir nada extra.
   Estructura esperada:
     <div class="data-accordion">
       <details class="data-accordion-group" open>
         <summary>
           <span class="data-accordion-icon">🏬</span>
           <span class="data-accordion-title">Título<small>Bajada corta</small></span>
           <span class="data-accordion-status" data-status="clave"></span>
         </summary>
         <div class="data-accordion-body">... campos ...</div>
       </details>
       ...
     </div>
   El span .data-accordion-status es opcional: si una pantalla lo usa, un
   script puede pintarle una clase "filled" o "empty" para mostrar de un
   vistazo qué grupo ya tiene datos cargados sin necesidad de abrirlo.
   ============================================================ */
.data-accordion { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.data-accordion-group {
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  overflow: hidden; /* recorta el borde redondeado cuando el body se despliega */
}
/* El <summary> ES el encabezado clickeable. Quitamos el triángulo nativo del
   navegador (list-style + el pseudo-elemento propietario de Chrome/Safari) y
   dibujamos el nuestro con .data-accordion-group[open] más abajo, para que
   se vea igual en todos los navegadores y podamos animarlo. */
.data-accordion-group summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 800;
}
.data-accordion-group summary::-webkit-details-marker { display: none; }
.data-accordion-group summary::marker { content: ''; }
/* Flechita propia a la derecha, que rota 90° cuando el grupo está abierto. */
.data-accordion-group summary::after {
  content: '›';
  margin-left: auto;
  font-size: 20px;
  color: var(--text-muted);
  transform: rotate(90deg);
  transition: transform .15s ease;
  flex: 0 0 auto;
}
.data-accordion-group[open] summary::after { transform: rotate(-90deg); }
.data-accordion-group[open] summary {
  border-bottom: 1px solid var(--border-soft);
}
.data-accordion-icon {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--surface-3);
  font-size: 17px;
}
.data-accordion-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.data-accordion-title small { color: var(--text-muted); font-weight: 600; font-size: 12.5px; }
.data-accordion-status {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface-3);
}
.data-accordion-status.filled { color: #3ddc84; background: rgba(46, 204, 113, .15); }
.data-accordion-body { padding: 16px; }

/* ============================================================
   v2.33.0 — Unificación Empezá acá + Datos del negocio + Google
   ============================================================ */
.data-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.data-source-note,
.google-status-note {
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border-soft));
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-2));
  color: var(--text-muted);
  border-radius: 16px;
  padding: 13px 15px;
  margin-bottom: 16px;
  line-height: 1.45;
}
.data-source-note b,
.google-status-note b { color: var(--text); }
.source-grid-premium { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.source-card-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
}
.source-card-head {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr);
  gap: 13px;
  align-items: start;
}
.source-card-body { flex: 1; min-width: 0; }
.source-card-actions,
.source-inline-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.source-card-actions .btn,
.source-inline-actions .btn { flex: 1 1 130px; }
.source-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.source-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.source-form-grid input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 13px;
  outline: none;
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.source-form-grid input:focus {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.source-form-grid .check-row {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  margin: 2px 0;
}
.start-data-cta { margin-top: 14px; }
@media (max-width: 1240px) {
  .source-grid-premium { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .data-hero-actions { justify-content: stretch; width: 100%; }
  .data-hero-actions .btn { flex: 1 1 170px; }
  .source-card-actions .btn,
  .source-inline-actions .btn { flex-basis: 100%; }
  .source-card-head { grid-template-columns: 42px minmax(0,1fr); }
}

/* ============================================================
   v2.34.0 — Google: ayudas de conexión y errores accionables
   ============================================================ */
.source-help {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}
.source-help code {
  font-size: 11px;
  white-space: nowrap;
}

/* v2.34.0 — Drive/Calendar premium */
.docs-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 14px 0;
}
.docs-toolbar input {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .78);
  color: var(--text);
  padding: 0 14px;
  outline: none;
}
.docs-table small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.btn-mini {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 13px;
}
.calendar-preview {
  grid-column: 1 / -1;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(15, 23, 42, .52);
  border-radius: 16px;
  padding: 12px 14px;
  min-height: 46px;
}
.calendar-preview:empty { display: none; }
.calendar-preview b {
  display: block;
  margin-bottom: 8px;
}
.calendar-preview p {
  margin: 8px 0;
  color: var(--muted);
}
@media (max-width: 760px) {
  .docs-toolbar { grid-template-columns: 1fr; }
  .docs-toolbar .btn { width: 100%; }
}

/* ============================================================
   Sub-pestañas de grupos (El Bot, Clientes, Difusión, Administración) (Respuestas · Menú · IA · Derivación · Probar)
   Se dibuja entre el topbar y el contenido desde app.js (renderBotSubnav).
   ============================================================ */
.subnav {
  display: flex;
  gap: 6px;
  padding: 12px 28px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav .subtab {
  padding: 9px 16px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.subnav .subtab:hover { color: var(--text); background: var(--surface-2); }
.subnav .subtab.active {
  color: var(--primary);
  background: var(--primary-soft);
  border-bottom-color: var(--primary);
}
@media (max-width: 768px) {
  .subnav { padding: 10px 16px 0; }
}

/* ============================================================
   v2.66.38 — Asistente de ayuda (burbuja flotante con IA)
   Aparece abajo a la derecha en todas las pantallas del panel (lo inyecta
   app.js › mountAssistant). Usa los tokens del sistema de diseño, así queda
   coherente con el resto y funciona en tema oscuro y claro.
   ============================================================ */
.assistant-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 180;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary-grad); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(123,97,255,0.5);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease);
}
.assistant-fab svg { width: 26px; height: 26px; }
.assistant-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 34px rgba(123,97,255,0.6); }
.assistant-fab:active { transform: scale(0.96); }
.assistant-fab.active { transform: rotate(8deg) scale(1.02); }
.assistant-fab:focus-visible { outline: none; box-shadow: var(--ring), 0 10px 28px rgba(123,97,255,0.5); }

.assistant-panel {
  position: fixed; right: 22px; bottom: 90px; z-index: 181;
  width: 370px; max-width: calc(100vw - 32px);
  height: 520px; max-height: calc(100vh - 130px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  /* Oculto por defecto: aparece con un leve "pop" al abrir. */
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.2s var(--ease), transform 0.24s var(--ease-spring), visibility 0.2s;
}
.assistant-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.assistant-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border-soft);
  background: var(--sheen);
}
.assistant-head-ttl { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.assistant-head-ttl svg { width: 20px; height: 20px; color: var(--primary); }
.assistant-close { width: 30px; height: 30px; border-radius: 9px; color: var(--text-muted); display: grid; place-items: center; font-size: 15px; transition: background 0.15s, color 0.15s; }
.assistant-close:hover { background: var(--surface-2); color: var(--text); }

.assistant-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.assistant-bubble { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; animation: fadeUp 0.3s var(--ease) both; }
.assistant-bubble.bot { align-self: flex-start; background: var(--bubble-in); color: var(--text); border-bottom-left-radius: 5px; }
.assistant-bubble.user { align-self: flex-end; background: var(--bubble-out); color: #fff; border-bottom-right-radius: 5px; }
/* Botón "Ir a X" dentro de una respuesta del asistente (lleva a la pantalla). */
.assistant-golink { display: inline-flex; margin-top: 9px; padding: 6px 12px; font-size: 13px; text-decoration: none; }
/* Chips de temas sugeridos cuando el asistente no entendió (o al abrir). */
.assistant-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.assistant-chip {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: 999px; padding: 5px 11px; font-size: 12.5px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.assistant-chip:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Indicador "escribiendo…" con tres puntitos que rebotan. */
.assistant-bubble.typing { align-self: flex-start; background: var(--bubble-in); display: flex; gap: 4px; padding: 13px; }
.assistant-bubble.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); animation: assistantDot 1.2s infinite ease-in-out; }
.assistant-bubble.typing span:nth-child(2) { animation-delay: 0.18s; }
.assistant-bubble.typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes assistantDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }

.assistant-input { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--border-soft); }
.assistant-input textarea {
  flex: 1; resize: none; max-height: 120px; padding: 10px 12px; line-height: 1.45;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.assistant-input textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.assistant-send { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--primary-grad); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(123,97,255,0.34); transition: transform 0.18s var(--ease-spring), box-shadow 0.18s; }
.assistant-send svg { width: 18px; height: 18px; }
.assistant-send:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(123,97,255,0.5); }
.assistant-send:active { transform: scale(0.95); }

@media (max-width: 480px) {
  .assistant-panel { right: 12px; left: 12px; width: auto; bottom: 84px; height: min(72vh, 520px); }
  .assistant-fab { right: 16px; bottom: 16px; }
}

/* ============================================================
   Ícono de información (i) con tooltip — v2.66.46
   ------------------------------------------------------------
   Componente reutilizable para explicar cualquier campo, botón o
   sección SIN llenar la pantalla de texto. Se usa con el helper
   App.info('texto explicativo') que devuelve el HTML del ícono.
   Funciona con el mouse (al pasar por encima) y con clic/tap (útil
   en celular). La explicación se escribe en lenguaje neutro, sin
   rubro específico, para que sirva a cualquier negocio.
   ============================================================ */
.info-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-muted);
  font-size: 11px; font-weight: 700; font-style: normal; line-height: 1;
  cursor: help; vertical-align: middle; margin-left: 5px;
  user-select: none; transition: background .15s, color .15s, border-color .15s;
}
.info-i:hover, .info-i.open {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
/* Contenedor posicional del tooltip */
.info-i-wrap { position: relative; display: inline-flex; }
.info-i-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 260px; z-index: 9998;
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 11px; font-size: 12.5px; font-weight: 400; line-height: 1.45;
  font-style: normal; text-align: left; white-space: normal;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transition: opacity .14s, visibility .14s;
  pointer-events: none;
}
/* Flechita apuntando al ícono */
.info-i-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--surface-3);
}
.info-i-wrap:hover .info-i-tip,
.info-i-wrap .info-i-tip.show { opacity: 1; visibility: visible; }
/* En pantallas chicas el tooltip se ancla a la derecha para no cortarse */
@media (max-width: 560px) {
  .info-i-tip { left: auto; right: 0; transform: none; max-width: 220px; }
  .info-i-tip::after { left: auto; right: 5px; transform: none; }
}