/* ============================================================
   THEME PART 06 — WhatsApp (agente-ia.js) · Formularios (formularios.js)
   · Importar leads (importar-leads.js) · Funnel (funnel.js)
   Solo aspecto: colores, radios, bordes, tipografía, sombras, paddings.
   La mecánica de layout (columnas, scrolls, posiciones) no se toca.
   ============================================================ */

/* ============================================================
   1. WHATSAPP — Captación y CRM → WhatsApp
   ============================================================ */
#conversacionesRoot { padding: 20px 24px 24px; }
/* El aspecto de la bandeja de WhatsApp (lista + chat) vive en agente-ia.js
   (rediseño 22-09-2026); aquí solo quedan los modales del agente. */

/* --- Modal de ajustes del agente --- */
.wa-modal { background: rgba(17, 30, 33, 0.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.wa-modal-box { border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.wa-modal-head { padding: 20px 24px 14px; border-bottom: 1px solid var(--line-soft); }
.wa-modal-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.wa-modal-body { padding: 18px 24px; }
.wa-field { margin-bottom: 14px; }
.wa-field label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.wa-field input, .wa-field select, .wa-field textarea {
  min-height: var(--h-ctl); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-ctl); color: var(--text); background: var(--card);
  transition: border-color .12s, box-shadow .12s;
}
.wa-field input:hover, .wa-field select:hover, .wa-field textarea:hover { border-color: var(--line-strong); }
.wa-field input:focus, .wa-field select:focus, .wa-field textarea:focus { border-color: var(--primary); box-shadow: var(--ring); }
.wa-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237f8f91' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px;
}
.wa-modal-foot {
  padding: 14px 24px 18px; border-top: 1px solid var(--line-soft); background: var(--card-soft);
  border-radius: 0 0 var(--r-xl) var(--r-xl); gap: 8px;
}
.wa-modal-foot .wa-btn { height: var(--h-ctl); border-radius: var(--r-md); padding: 0 14px; font-size: var(--fs-ctl); }
.wa-popup-msgs { background: var(--card-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; }

/* ============================================================
   2. FORMULARIOS — lista, editor, diseño, preview, embed
   ============================================================ */
.forms-root { padding: 20px 24px 80px; }
.forms-header { margin-bottom: 20px; padding-bottom: 0; border-bottom: 0; gap: 14px; }
.forms-header-icon { width: 36px; height: 36px; border-radius: var(--r-md); }
.forms-header-icon svg { width: 18px; height: 18px; }
.forms-title { font-size: var(--fs-title); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.forms-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.forms-new-btn {
  height: var(--h-ctl); padding: 0 14px; border-radius: var(--r-md); font-size: var(--fs-ctl);
  box-shadow: 0 1px 2px rgba(10, 20, 28, .25), inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.forms-new-btn svg { width: 14px; height: 14px; }
.forms-list { gap: 14px; }
.forms-card {
  border-radius: var(--r-lg); padding: 18px; gap: 10px; box-shadow: var(--shadow-card);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.forms-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.forms-card-color { border-radius: var(--r-md); }
.forms-card-name { font-size: 14px; font-weight: 700; }
.forms-card-folder { font-size: 11.5px; }
.forms-card-meta { font-size: 11.5px; color: var(--text-muted); border-top: 1px solid var(--line-soft); padding-top: 10px; }
.forms-card-btn {
  height: 30px; padding: 0 10px; font-size: 12px; border-radius: var(--r-sm);
  background: var(--card); color: var(--text-secondary); box-shadow: var(--shadow-xs);
  transition: background .12s, border-color .12s, color .12s;
}
.forms-card-btn:hover { background: var(--bg-hover); border-color: var(--line-strong); color: var(--text); }
.forms-card-btn.danger:hover { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); }
.forms-empty { border-radius: var(--r-lg); border: 1px dashed var(--line-strong); background: var(--card); }
.forms-empty-icon { border-radius: var(--r-lg); }
.forms-empty-title { font-size: 15px; font-weight: 800; }

/* Modal crear formulario */
.form-create-modal { background: rgba(17, 30, 33, 0.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.form-create-content { border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 24px; }
.form-create-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.form-create-desc { font-size: 12.5px; }
.form-create-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); }
.form-create-input, .form-create-select {
  height: var(--h-ctl); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .12s, box-shadow .12s;
}
.form-create-input:focus, .form-create-select:focus { border-color: var(--primary); box-shadow: var(--ring); outline: none; }
.form-create-btn { height: var(--h-ctl); padding: 0 14px; border-radius: var(--r-md); font-size: var(--fs-ctl); font-weight: 600; }
.form-create-msg { font-size: 12.5px; }
.form-create-msg.error { color: var(--bad); }
.form-create-msg.success { color: var(--ok); }

/* Editor */
.form-editor { padding: 20px 24px 80px; }
.form-editor-header { margin-bottom: 16px; padding-bottom: 0; border-bottom: 0; gap: 10px; }
.form-editor-back {
  height: 32px; padding: 0 11px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.form-editor-back:hover { border-color: var(--line-strong); }
.form-editor-name { font-size: 18px; font-weight: 800; letter-spacing: -.015em; border-radius: var(--r-sm); }
.form-editor-save-status { font-size: 11.5px; font-style: normal; font-weight: 500; }
.form-embed-btn {
  height: 32px; padding: 0 12px; border-radius: var(--r-sm); font-size: 12.5px;
  box-shadow: 0 1px 2px rgba(10, 20, 28, .25);
}
.form-editor-tabs { gap: 2px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.form-editor-tab { padding: 9px 12px; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.form-editor-tab:hover { color: var(--text); border-bottom-color: var(--line-strong); }
.form-editor-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.form-editor-body { gap: 20px; }
.form-editor-panel { border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-card); }
.form-editor-panel-title { font-size: var(--fs-label); letter-spacing: var(--ls-label); margin-bottom: 14px; }

/* Pasos y preguntas */
.form-step-block { background: var(--card-soft); border-radius: var(--r-md); padding: 14px; margin-bottom: 12px; }
.form-step-num { width: 24px; height: 24px; font-size: 11.5px; font-weight: 800; }
.form-step-title-input { font-size: 13.5px; font-weight: 700; border-radius: var(--r-sm); }
.form-step-action { height: 26px; padding: 0 7px; border-radius: var(--r-xs); background: var(--card); display: inline-flex; align-items: center; }
.form-step-action.danger:hover { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); }
.form-step-intro { border-radius: var(--r-sm); padding: 8px 10px; font-size: 12.5px; }
.form-step-intro:focus { border-color: var(--primary); box-shadow: var(--ring); }
.form-questions-list { gap: 6px; }
.form-question-item { padding: 9px 12px; border-radius: var(--r-sm); box-shadow: var(--shadow-xs); transition: border-color .12s, box-shadow .12s; }
.form-question-item:hover { border-color: var(--line-strong); }
.form-question-name { font-size: 12.5px; font-weight: 600; }
.form-question-required { font-size: 9.5px; color: var(--bad); }
.form-question-type { font-size: 10.5px; }
.form-question-req-toggle { font-size: 10.5px; font-weight: 600; padding: 3px 7px; border-radius: var(--r-xs); }
.form-question-req-toggle.is-required { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); }
.form-question-remove { border-radius: var(--r-xs); padding: 4px 6px; }
.form-question-remove:hover { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); }
.form-add-question-select { border-radius: var(--r-sm); padding: 8px 10px; font-size: 12.5px; font-weight: 500; }
.form-add-step { border-radius: var(--r-md); padding: 10px; font-size: 12.5px; }

/* Diseño */
.form-design-field label { font-size: var(--fs-label); letter-spacing: var(--ls-label); font-weight: 700; }
.form-design-swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.form-design-swatch.selected { border-color: var(--text); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--text); }
.form-design-font { height: 32px; padding: 0 12px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; }
.form-design-font.selected { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.form-design-hex-input, .form-design-text-input { border-radius: var(--r-sm); }
.form-design-hex-input:focus, .form-design-text-input:focus { border-color: var(--primary); box-shadow: var(--ring); }
.form-design-subsection-title { font-size: var(--fs-label); letter-spacing: var(--ls-label); }
.form-folder-selector { background: var(--primary-soft); border: 1px solid var(--primary-light); border-radius: var(--r-lg); padding: 14px 16px; }
.form-folder-selector-input { height: var(--h-ctl); padding: 0 12px; border-radius: var(--r-md); }
.form-folder-selector-input:focus { border-color: var(--primary); box-shadow: var(--ring); }
.form-folder-selector-warn { border-radius: var(--r-sm); color: var(--bad); }

/* Preview (la vista previa emula la web del cliente: solo pulir el marco) */
.form-preview-frame { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card-soft); }

/* Modal embed */
.embed-modal { background: rgba(17, 30, 33, 0.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.embed-modal-content { border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.embed-modal-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.embed-tabs { gap: 2px; }
.embed-tab { padding: 9px 12px; font-size: 13px; }
.embed-tab:hover { border-bottom-color: var(--line-strong); }
.embed-section-title { font-size: var(--fs-label); letter-spacing: var(--ls-label); }
.embed-code-wrap { background: #142b2f; border-radius: var(--r-md); }
.embed-copy-btn { border-radius: var(--r-xs); }
.embed-copy-btn.copied { background: var(--ok); border-color: var(--ok); }
.embed-help { border-radius: var(--r-md); border: 1px solid var(--primary-light); }

/* ============================================================
   3. IMPORTAR LEADS — asistente en modal
   ============================================================ */
.imp-modal-bg { background: rgba(17, 30, 33, 0.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.imp-modal { border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.imp-modal-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--line-soft); }
.imp-modal-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.imp-modal-close { border-radius: var(--r-sm); }
.imp-modal-close:hover { background: var(--bg-hover); }
.imp-stepper { background: var(--card-soft); border-bottom: 1px solid var(--line-soft); padding: 12px 24px; }
.imp-step { font-size: 12.5px; font-weight: 500; }
.imp-step.active { color: var(--primary); font-weight: 700; }
.imp-step.done { color: var(--ok); }
.imp-step-num { width: 24px; height: 24px; background: var(--line-soft); color: var(--text-muted); font-size: 11.5px; font-weight: 700; }
.imp-step.active .imp-step-num { background: var(--primary); color: #fff; box-shadow: 0 0 0 3px var(--primary-soft); }
.imp-step.done .imp-step-num { background: var(--ok); color: #fff; }
.imp-modal-body { padding: 22px 24px; }
.imp-dropzone { border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--card-soft); padding: 40px 20px; }
.imp-dropzone:hover, .imp-dropzone.dragover { border-color: var(--primary); background: var(--primary-soft); }
.imp-dropzone-icon { opacity: .6; }
.imp-dropzone-text { font-weight: 600; }
.imp-divider { font-size: var(--fs-label); letter-spacing: var(--ls-label); font-weight: 700; color: var(--text-faint); }
.imp-divider::before, .imp-divider::after { background: var(--line-soft); }
.imp-paste-area { border-radius: var(--r-md); padding: 12px 14px; }
.imp-paste-area:focus { border-color: var(--primary); box-shadow: var(--ring); }
.imp-help-box { background: var(--card-soft); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.imp-help-box code { background: var(--card); border: 1px solid var(--line-soft); border-radius: 4px; }
.imp-folder-row { background: var(--primary-soft); border: 1px solid var(--primary-light); border-radius: var(--r-md); }
.imp-folder-row-label { font-weight: 600; color: var(--primary); }
.imp-folder-select, .imp-mapping-select {
  height: var(--h-ctl-sm); padding: 0 10px; border-radius: var(--r-sm); font-size: 12.5px;
  border: 1px solid var(--line); background: var(--card); transition: border-color .12s, box-shadow .12s;
}
.imp-folder-select:focus, .imp-mapping-select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.imp-mapping-table th, .imp-preview-table th {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-muted); background: var(--card-soft); border-bottom: 1px solid var(--line);
}
.imp-mapping-table th, .imp-mapping-table td { padding: 10px 12px; border-bottom-color: var(--line-soft); }
.imp-preview-table th, .imp-preview-table td { padding: 9px 12px; border-bottom-color: var(--line-soft); }
.imp-mapping-table tbody tr:hover td, .imp-preview-table tbody tr:hover td { background: var(--bg-subtle); }
.imp-mapping-table td:first-child { font-weight: 600; }
.imp-summary-grid { gap: 12px; }
.imp-summary-box { border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-xs); }
.imp-summary-box .imp-sum-lbl { font-size: var(--fs-label); letter-spacing: var(--ls-label); font-weight: 700; margin-bottom: 6px; }
.imp-summary-box .imp-sum-val { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.imp-summary-box.warn { background: var(--warn-soft); border-color: var(--warn-line); }
.imp-summary-box.warn .imp-sum-val { color: var(--warn); }
.imp-modal-foot { padding: 14px 24px 18px; border-top: 1px solid var(--line-soft); background: var(--card-soft); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.imp-foot-status.error { color: var(--bad); }
.imp-foot-status.success { color: var(--ok); }
.imp-btn {
  height: var(--h-ctl); padding: 0 14px; border-radius: var(--r-md); font-size: var(--fs-ctl); font-weight: 600;
  box-shadow: var(--shadow-xs); transition: background .12s, border-color .12s;
}
.imp-btn:hover:not(:disabled) { opacity: 1; background: var(--bg-subtle); border-color: var(--line-strong); }
.imp-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(10, 20, 28, .25), inset 0 -1px 0 rgba(0, 0, 0, .12); }
.imp-btn.primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.imp-progress { height: 6px; background: var(--line-soft); border-radius: var(--r-pill); }
.imp-progress-bar { background: var(--primary); border-radius: var(--r-pill); }

/* ============================================================
   4. FUNNEL — lienzo (solo aspecto; posiciones y tamaños intactos)
   ============================================================ */
.fnl-scroll { background: var(--canvas); }
.fnl-board {
  background-color: var(--card);
  background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.2px);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.fnl-modelo-col { border-right: 1px dashed var(--line-strong); }
.fnl-lane { border-top: 1px solid var(--line-soft); }
.fnl-fase-h {
  font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--text-muted);
  background: var(--card-soft); border: 1px solid var(--line); border-radius: var(--r-md);
}
.fnl-fase-h:hover { border-color: var(--line-strong); color: var(--text); }
.fnl-fase-h small { color: var(--text-faint); }
.fnl-el { border-radius: 5px; box-shadow: var(--shadow-xs); border-color: var(--line); transition: border-color .12s, box-shadow .12s; }
.fnl-el:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); }
.fnl-el.dragging { box-shadow: var(--shadow-lg); }
.fnl-el.link-hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.fnl-el-name { font-size: 12px; font-weight: 700; }
.fnl-el-producto { border-color: var(--primary); }
.fnl-el-del { border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
.fnl-el-del:hover { background: var(--bad); border-color: var(--bad); }
.fnl-btn-danger { border-color: var(--bad-line); color: var(--bad); }
.fnl-btn-danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }
.fnl-kpis { gap: 4px; }
.fnl-kpi {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 7px; border-radius: var(--r-pill); background: var(--card-soft); color: var(--text-muted); border: 1px solid var(--line);
}
.fnl-kpi.hot { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.fnl-ghost { border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); color: var(--text-muted); font-size: 12px; }
.fnl-ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.fnl-banner { background: var(--accent-soft); border: 1px solid #bfe8dc; border-radius: var(--r-lg); font-size: 13px; }
.fnl-loose { background: var(--card-soft); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.fnl-loose-title { font-size: 12px; font-weight: 700; }
.fnl-loose-tag { font-size: 10.5px; letter-spacing: var(--ls-label); border-radius: var(--r-pill); border-color: var(--line); }
.fnl-assign { border-radius: var(--r-sm); font-size: 11px; font-weight: 700; }
.fnl-empty h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.fnl-empty p { font-size: 13px; }
.fnl-popover { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 12px; }
.fnl-pop-title { font-size: 12.5px; font-weight: 700; }
.fnl-pop-link { border-radius: var(--r-sm); font-size: 12.5px; font-weight: 500; }
.fnl-thumb-group { font-size: 10px; letter-spacing: var(--ls-label); font-weight: 700; }
.fnl-thumb-tag { background: var(--accent); color: var(--accent-ink); }
.fnl-thumbs { gap: 8px; }
.fnl-thumb { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); transition: border-color .12s, box-shadow .12s; }
.fnl-thumb:hover { border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
.fnl-thumb.sel { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
.fnl-thumb-name { font-size: 10px; font-weight: 700; color: var(--text-secondary); }
.fnl-kpi-del:hover { color: var(--bad); }
.fnl-crumbs { font-size: 10.5px; letter-spacing: var(--ls-label); font-weight: 700; }
.fnl-empty-table { color: var(--text-muted); font-size: 13px; }
.fnl-origen { font-size: 12px; color: var(--text-secondary); }
.fnl-rowbtn { border-radius: var(--r-sm); font-size: 11px; font-weight: 700; }
.fnl-rowbtn:hover { background: var(--primary); color: #fff; }
.fnl-foot-hint { font-size: 11.5px; color: var(--text-faint); }