/* ─────────────────────────────────────────────────────────────
   MAS Bodega · Panel administrativo — tema verde
   ───────────────────────────────────────────────────────────── */
:root {
  --green-900: #0f3d2e;
  --green-800: #145a3f;
  --green-700: #1b7a52;
  --green-600: #209a66;
  --green-500: #27ae72;
  --green-300: #7fd1a8;
  --green-100: #e6f6ee;
  --green-50:  #f2fbf6;

  --ink:       #173027;
  --muted:     #6b8378;
  --line:      #dce8e1;
  --bg:        #f5faf7;
  --card:      #ffffff;
  --danger:    #d64545;
  --warn:      #d9933a;

  --radius: 12px;
  --shadow: 0 1px 3px rgba(15, 61, 46, .08), 0 6px 18px rgba(15, 61, 46, .05);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --dash-jumpnav-h: 52px; /* alto real de .dash-jumpnav, para apilar .filters-bar debajo sin taparlo */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
}
code { background: var(--green-100); padding: 1px 5px; border-radius: 5px; font-size: .9em; }
.muted { color: var(--muted); }

.layout { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  width: 248px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--green-900), var(--green-800));
  color: #eaf6ef;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 22px; }
.brand-mark {
  font-size: 22px;
  background: rgba(255,255,255,.12);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-size: 15px; }
.brand-text small { color: var(--green-300); font-size: 11.5px; }

.nav { display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.nav-section {
  margin: 14px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--green-300);
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  background: transparent;
  border: 0;
  color: #d6ebe0;
  text-align: left;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: var(--green-500); color: #fff; font-weight: 600; }
.nav-ico { font-size: 16px; width: 20px; text-align: center; }
.nav-badge {
  margin-left: auto; background: var(--warn); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 20px; flex-shrink: 0;
}

.sidebar-foot {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--green-300);
  padding: 10px 12px 2px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); }
.dot.ok { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.dot.bad { background: var(--danger); }

/* ── Content ─────────────────────────────────────────────── */
.content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.view { display: none; flex-direction: column; flex: 1; overflow: hidden; padding: 26px 30px; }
.view.active { display: flex; }
.view-head { margin-bottom: 18px; }
.view-head h1 { margin: 0; font-size: 22px; }
.view-head p { margin: 4px 0 0; }
/* Modificador para encabezados con una acción a la derecha (p.ej. "Exportar
   datos"): separa el bloque de título del botón sin afectar los encabezados
   simples (h1+p), que se quedan con el layout de bloque de arriba. */
.view-head.has-action {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap;
}

/* Inicio: la página completa hace scroll (tarjetas + gráficas juntas),
   en vez de fijar las tarjetas y solo hacer scroll en la grilla de gráficas.
   padding-top en 0: si el contenedor con scroll tuviera padding-top, un hijo
   sticky con top:0 igual respeta ese padding como hueco permanente (se ve el
   contenido de abajo asomando por ahí al hacer scroll). El espacio inicial se
   restituye como margin-top en el header, que no tiene ese problema. */
#view-home.active { display: block; overflow-y: auto; padding-top: 0; scroll-behavior: smooth; }
#view-home .view-head { margin-top: 26px; }

/* Mini-nav de anclas: pegajoso dentro del scroll de #view-home (por eso el
   truco de padding-top:0 de arriba importa — si no, se vería un hueco). */
.dash-jumpnav {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: 6px; flex-wrap: wrap;
  background: var(--bg); padding: 12px 0; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.dash-jumpnav a {
  font-size: 12px; font-weight: 600; color: var(--green-700); text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 5px 12px; white-space: nowrap; transition: background .1s, border-color .1s;
}
.dash-jumpnav a:hover { background: var(--green-50); border-color: var(--green-500); }

.section-title {
  font-size: 15px; font-weight: 700; color: var(--green-800);
  margin: 30px 0 14px;
  /* Todas las secciones salvo "General" quedan por debajo de .filters-bar (sticky,
     apilado bajo .dash-jumpnav) en el documento, así que al saltar por el ancla
     hay que reservar también su alto — si no, el título (y el primer título de
     tabla/gráfico debajo) queda tapado. Ambas alturas las mide JS en tiempo real
     (updateStickyOffsets en app.js), por si .dash-jumpnav o .filters-bar hacen wrap. */
  scroll-margin-top: calc(var(--dash-jumpnav-h) + var(--dash-filtersbar-h, 0px));
}
.section-title:first-of-type {
  margin-top: 4px;
  scroll-margin-top: var(--dash-jumpnav-h); /* antes de .filters-bar en el documento: no hace falta su alto */
}
.section-title small { font-weight: 400; font-size: 12px; color: var(--muted); }

/* ── Tooltip de ayuda ("?") — aparición casi instantánea, sin el delay
   nativo de [title]. Se usa en tarjetas de stats y encabezados de gráficas. */
.hint-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  background: var(--green-100); color: var(--green-700);
  font-size: 10px; font-weight: 700; line-height: 1;
  cursor: help; position: relative; vertical-align: middle;
}
.hint-icon::after {
  content: attr(data-hint);
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  /* --tt-shift lo calcula JS (adjustHintPosition) para que el tooltip no se
     salga de la ventana cuando el ícono está cerca del borde izq./der. */
  transform: translateX(calc(-50% + var(--tt-shift, 0px)));
  background: var(--green-900); color: #fff; text-align: left;
  padding: 8px 11px; border-radius: 8px;
  font-size: 11.5px; font-weight: 400; line-height: 1.4;
  white-space: normal; width: max-content; max-width: 240px;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .08s linear;
  z-index: 30;
}
.hint-icon:hover::after, .hint-icon:focus-visible::after { opacity: 1; visibility: visible; }
.stat-label .hint-icon { margin-left: 1px; }
/* .stat-card/.an-card tienen su propio position+z-index (stacking context):
   sin esto, el tooltip queda atrapado detrás de la tarjeta vecina aunque su
   z-index sea mayor. Al hacer hover, se sube toda la tarjeta por encima. */
.stat-card:hover, .stat-card:focus-within,
.an-card:hover, .an-card:focus-within { z-index: 5; }

/* ── Stats ───────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.stat-card {
  position: relative; z-index: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
  min-height: 96px;
}
.stat-card .stat-label { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 7px; }
.stat-card.clickable { cursor: pointer; transition: border-color .1s, box-shadow .1s; }
.stat-card.clickable:hover { border-color: var(--green-500); box-shadow: 0 1px 3px rgba(15,61,46,.12), 0 6px 18px rgba(15,61,46,.1); }
.stat-card .stat-value { font-size: 30px; font-weight: 700; margin-top: 10px; color: var(--green-800); }
.stat-card.danger .stat-value { color: var(--danger); }
.skeleton { background: linear-gradient(90deg, #eef5f1, #f7fbf9, #eef5f1); background-size: 200% 100%; animation: sk 1.1s infinite; border: 0; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Barra de filtros única (fechas + registro), en una sola fila compacta.
   Sticky bajo el header al hacer scroll. Se extiende a todo el ancho del
   panel (fuera del padding de .view, sin invadir el sidebar) para que el
   fondo cubra de borde a borde y no queden franjas sin cubrir a los lados;
   el padding interno mantiene los controles alineados con el resto del contenido. */
.filters-bar {
  position: sticky; top: var(--dash-jumpnav-h); z-index: 9;
  background: var(--bg);
  margin: 20px -30px 8px;
  padding: 14px 30px;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 12px -6px rgba(15, 61, 46, .10);
}
.filters-bar .an-toolbar { margin: 0; }
.reg-group { display: flex; align-items: center; gap: 8px; }
.filter-label { font-size: 13px; }

/* ── Analítica ───────────────────────────────────────────── */
.an-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap; margin: 20px 0 16px;
}
.an-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.an-presets button {
  border: 1px solid var(--line); background: var(--card); color: var(--green-700);
  padding: 7px 13px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.an-presets button:hover { background: var(--green-50); }
.an-presets button.active { background: var(--green-500); color: #fff; border-color: var(--green-500); font-weight: 600; }
.an-presets button[data-pending-reg] { border-color: #f0dcb8; color: var(--warn); }
.an-presets button[data-pending-reg].active { background: var(--warn); border-color: var(--warn); color: #fff; }
.an-range { display: flex; align-items: center; gap: 8px; }
.range-input {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 13px;
  background: var(--card); color: var(--ink); cursor: pointer; min-width: 190px;
}
.range-input:focus { outline: none; border-color: var(--green-500); }

.amount-filter { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.amount-filter input[type="number"] {
  width: 90px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13px;
  background: var(--card); color: var(--ink);
}
.amount-filter input[type="number"]:focus { outline: none; border-color: var(--green-500); }

/* Flatpickr: tema verde a juego con el resto del panel */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--green-500); border-color: var(--green-500);
}
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
  background: var(--green-600); border-color: var(--green-600);
}
.flatpickr-day.inRange {
  background: var(--green-100); border-color: var(--green-100);
  box-shadow: -5px 0 0 var(--green-100), 5px 0 0 var(--green-100);
}
.flatpickr-day.today { border-color: var(--green-500); }
.flatpickr-day:hover { background: var(--green-50); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--green-800);
}
.flatpickr-weekday { color: var(--green-700); }
.flatpickr-calendar { box-shadow: var(--shadow); border-radius: var(--radius); }

.an-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  align-content: start;
}
.an-card {
  position: relative; z-index: 0; min-width: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px;
}
.an-card.wide { grid-column: 1 / -1; }
.an-card h3 { margin: 0 0 12px; font-size: 14px; color: var(--green-800); }
.an-card h3 small { font-weight: 400; }
.an-canvas { position: relative; height: 240px; width: 100%; overflow: hidden; }
.status-glossary {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.sg-item { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.sg-item .badge { flex-shrink: 0; }

/* Cross-tab Nuevos/Recurrentes × Registrado/No registrado (no se solapan con el total) */
.crosstab-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.crosstab-table th, .crosstab-table td {
  padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--line);
}
.crosstab-table thead th { text-align: right; color: var(--muted); font-weight: 600; font-size: 12px; }
.crosstab-table thead th:first-child, .crosstab-table tbody th { text-align: left; color: var(--ink); font-weight: 600; }
.crosstab-table tbody td { font-weight: 600; color: var(--green-800); font-variant-numeric: tabular-nums; }
.crosstab-total-row th, .crosstab-total-row td {
  border-top: 2px solid var(--green-500); border-bottom: 0; color: var(--green-800);
}
.an-card.wide .an-canvas { height: 220px; }

.an-comments { max-height: 220px; overflow-y: auto; }
.comment-row { padding: 8px 0; border-top: 1px solid var(--line); }
.comment-row:first-child { border-top: 0; }
.comment-top { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; }
.comment-text { font-size: 12.5px; color: var(--ink); margin-top: 2px; }

/* ── Inbox (conversaciones) ──────────────────────────────── */
.inbox, .tpl { display: flex; gap: 18px; flex: 1; overflow: hidden; }
.inbox-list, .tpl-list {
  width: 320px; flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.search-bar { padding: 12px; border-bottom: 1px solid var(--line); }
.search-bar input {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 9px;
  font-size: 13.5px; outline: none; background: var(--green-50);
}
.search-bar input:focus { border-color: var(--green-500); background: #fff; }

.conv-items { overflow-y: auto; flex: 1; }
.conv-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s;
}
.conv-item:hover { background: var(--green-50); }
.conv-item.active { background: var(--green-100); border-left: 3px solid var(--green-500); padding-left: 11px; }
.conv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.conv-name { font-weight: 600; font-size: 13.5px; }
.conv-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.conv-phone { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.conv-preview { font-size: 12.5px; color: var(--muted); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-badges { display: flex; gap: 6px; margin-top: 6px; }
.badge {
  font-size: 10.5px; padding: 2px 7px; border-radius: 20px;
  background: var(--green-100); color: var(--green-800); font-weight: 600;
}
.badge.reg { background: #def3e6; color: var(--green-700); }
.badge.unreg { background: #f3eede; color: #97781f; }
.badge.order { background: var(--green-500); color: #fff; }
.badge.demo { background: #e3e8f3; color: #3a4b97; }
.badge.test { background: #f0e6f7; color: #6b3fa0; }
.badge.err { background: #f7e0e0; color: var(--danger); }
.badge.warn { background: #fbead9; color: var(--warn); }
.badge.bsuid { background: #f0e6f7; color: #6b3fa0; }

.orders-tab-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.orders-tab-panel[hidden] { display: none; }

/* ── Clientes con pedidos ─────────────────────────────────── */
.clients-wrap {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.search-bar.wide { border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.search-bar.wide input { width: auto; flex: 1; }
.clients-table { flex: 1; overflow-y: auto; }
.ct-head, .ct-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1.1fr;
  gap: 12px; align-items: center;
  padding: 11px 18px; border-bottom: 1px solid var(--line);
}
.ct-head {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--green-700); background: var(--green-50); position: sticky; top: 0;
}
.ct-row:hover { background: var(--green-50); }
.ct-client { display: flex; flex-direction: column; min-width: 0; }
.ct-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-order-id { font-weight: 400; font-size: 11px; color: var(--muted); }
.ct-phone { font-size: 11.5px; color: var(--muted); }
.ct-orders { display: flex; flex-wrap: wrap; gap: 5px; }
.ct-amount { font-weight: 600; color: var(--green-800); }
.ct-date { font-size: 12.5px; color: var(--muted); }
.ct-actions { text-align: right; }

/* Pedidos agrega una 5a columna a la derecha para el botón "Ver artículos" */
#orders-table .ct-head, #orders-table .ct-row { grid-template-columns: 2fr 2fr 1fr 1.1fr auto; }

.thread-toggle, .items-toggle { cursor: pointer; }
.thread-toggle:hover { filter: brightness(0.95); }
.items-toggle.btn-ghost { font-size: 12px; padding: 5px 10px; white-space: nowrap; }
.ct-thread {
  padding: 8px 18px 12px 18px; background: var(--green-50);
  border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px;
}
.ct-thread[hidden] { display: none; }
.ct-thread-item {
  display: flex; align-items: center; gap: 10px; font-size: 12.5px;
}

.inbox-foot { padding: 8px; border-top: 1px solid var(--line); text-align: center; }
.btn-ghost {
  background: transparent; border: 1px solid var(--line); color: var(--green-700);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.btn-ghost:hover { background: var(--green-50); }
.btn-ghost:disabled { opacity: .4; cursor: default; background: transparent; }

/* Paginación de tablas (Usuarios, Clientes, Duración de sesión) */
.pagination-bar {
  padding: 10px 16px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.page-size { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.page-size select {
  border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px;
  font-size: 13px; background: var(--card); color: var(--ink);
}
.page-nav { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }

/* ── Thread (chat) ───────────────────────────────────────── */
.thread, .tpl-editor {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.thread-empty { margin: auto; text-align: center; color: var(--muted); padding: 40px; }
.big-ico { font-size: 40px; display: block; margin-bottom: 12px; opacity: .6; }

.thread-head {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--green-50);
}
.thread-head .t-name { font-weight: 700; }
.thread-head .t-phone { font-size: 12px; color: var(--muted); }
.thread-body { flex: 1; overflow-y: auto; padding: 18px; background: var(--green-50); }

.msg { max-width: 72%; margin-bottom: 12px; clear: both; }
.msg.inbound { float: left; }
.msg.outbound { float: right; }
.bubble {
  padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45;
  white-space: pre-wrap; word-wrap: break-word;
}
.msg.inbound .bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.outbound .bubble { background: var(--green-500); color: #fff; border-bottom-right-radius: 4px; }
.msg-meta { font-size: 10.5px; color: var(--muted); margin-top: 4px; display: flex; gap: 7px; align-items: center; }
.msg.outbound .msg-meta { justify-content: flex-end; }
.msg-type-tag { font-size: 10px; background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 10px; }
.msg.outbound .msg-type-tag { background: rgba(255,255,255,.25); color: #eafff3; }
.ticks { font-weight: 700; }
.ticks.read { color: #4aa3ff; }
.ticks.failed { color: var(--danger); }
.day-group { display: flow-root; }
.day-sep {
  clear: both; text-align: center; padding: 10px 0; margin: 0;
  position: sticky; top: 0; z-index: 2; pointer-events: none;
}
.day-sep span {
  display: inline-block; background: #eaf2ee; color: var(--muted); font-size: 11px;
  padding: 4px 14px; border-radius: 20px; box-shadow: 0 1px 3px rgba(15,61,46,.15);
}

/* ── Plantillas ──────────────────────────────────────────── */
.tpl-items { overflow-y: auto; flex: 1; }
.tpl-group {
  padding: 9px 14px 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--green-700); background: var(--green-50);
  border-bottom: 1px solid var(--line); position: sticky; top: 0;
}
.tpl-list .tpl-item {
  padding: 13px 14px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.tpl-list .tpl-item:hover { background: var(--green-50); }
.tpl-list .tpl-item.active { background: var(--green-100); border-left: 3px solid var(--green-500); padding-left: 11px; }
.tpl-item .tpl-title { font-weight: 600; font-size: 13.5px; }
.tpl-item .tpl-file { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.tpl-editor .ed-head {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--green-50);
}
.tpl-editor .ed-head .t-name { font-weight: 700; }
.tpl-editor .ed-head .t-file { font-size: 12px; color: var(--muted); }
.ed-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Barra de variables */
.ed-vars {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  padding: 11px 18px; border-bottom: 1px solid var(--line);
  background: #fbfdfc;
}
.ed-vars .vars-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.ed-vars .vars-label.none { font-style: italic; }
.var-chip {
  font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: 12px; font-weight: 600;
  color: var(--green-800); background: var(--green-100);
  border: 1px solid var(--green-300); border-radius: 7px;
  padding: 3px 9px; cursor: pointer; transition: background .12s, transform .05s;
}
.var-chip:hover { background: var(--green-300); }
.var-chip:active { transform: scale(.96); }

/* Split editor | preview */
.ed-split { flex: 1; display: flex; min-height: 0; }
.ed-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ed-pane + .ed-pane { border-left: 1px solid var(--line); }
.ed-pane-label {
  font-size: 11.5px; font-weight: 600; color: var(--green-700);
  padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--green-50);
}
.ed-pane-label small { color: var(--muted); font-weight: 400; }

.tpl-editor textarea {
  flex: 1; width: 100%; border: 0; outline: none; resize: none;
  padding: 16px; font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: 13px; line-height: 1.6; color: var(--ink);
}

/* Vista previa estilo WhatsApp */
.wa-preview {
  flex: 1; overflow-y: auto; padding: 18px;
  background: var(--green-50);
}
.wa-bubble {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; border-top-left-radius: 4px;
  padding: 10px 13px; font-size: 13.5px; line-height: 1.5;
  color: var(--ink); max-width: 100%; word-wrap: break-word;
  box-shadow: 0 1px 1px rgba(15,61,46,.06);
}
.wa-bubble b { font-weight: 700; }
.wa-bubble code {
  background: var(--green-100); padding: 0 4px; border-radius: 4px;
  font-size: .92em;
}
.ed-note {
  font-size: 11.5px; color: var(--muted); padding: 8px 18px;
  background: #fffaf0; border-top: 1px solid var(--line);
}
.btn {
  background: var(--green-600); color: #fff; border: 0;
  padding: 9px 18px; border-radius: 9px; cursor: pointer; font-size: 13.5px; font-weight: 600;
}
.btn:hover { background: var(--green-700); }
.btn:disabled { opacity: .5; cursor: default; }

/* ── Carritos sugeridos ──────────────────────────────────── */
.sc-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.sc-item-badges { margin-top: 5px; display: flex; gap: 5px; flex-wrap: wrap; }
.sc-form { padding: 18px; }
.sc-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.sc-field label { font-size: 12px; font-weight: 600; color: var(--green-700); }
.sc-field input[type="text"], .sc-field input[type="date"], .sc-field select {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13.5px; font-family: var(--font); outline: none;
  background: var(--card); color: var(--ink); height: 38px;
}
.sc-field input:focus, .sc-field select:focus { border-color: var(--green-500); }
.sc-field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8378' stroke-width='2' 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 10px center; background-size: 16px;
}
.sc-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
.sc-row { display: flex; gap: 14px; }
.sc-row .sc-field { flex: 1; }
.sc-actions { display: flex; gap: 10px; margin-top: 6px; }
.sc-products { border-top: 1px solid var(--line); padding: 16px 18px; }
.sc-products h3 { font-size: 13px; margin: 0 0 10px; color: var(--green-700); }
.sc-product-search { position: relative; }
#sc-product-list { margin-top: 14px; }
.sc-product-search input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13.5px; outline: none; background: var(--green-50);
}
.sc-product-search input:focus { border-color: var(--green-500); background: #fff; }
.sc-product-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; margin-top: 4px;
}
.sc-product-results .sc-result {
  display: flex; align-items: center; gap: 9px; padding: 7px 12px; cursor: pointer; font-size: 13px;
}
.sc-product-results .sc-result:hover { background: var(--green-50); }
.sc-result-thumb {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; background: var(--green-50);
  display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 14px;
}
.sc-result-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Cuadrícula de productos agregados */
.sc-product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px;
}
.sc-product-card {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--card); display: flex; flex-direction: column;
}
.sc-product-thumb {
  position: relative; aspect-ratio: 1 / 1; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sc-product-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px; background: #fff; }
.sc-thumb-fallback { font-size: 26px; opacity: .5; }
.sc-product-check {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  width: 20px; height: 20px; border-radius: 5px;
  background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.sc-product-check input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--green-600); }
.sc-product-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; font-size: 12.5px;
}
.sc-select-all { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); }
.sc-select-all input { accent-color: var(--green-600); cursor: pointer; }
.btn-ghost.sc-danger { color: var(--danger); border-color: #f0c9c9; }
.btn-ghost.sc-danger:hover:not(:disabled) { background: #fbeaea; }
.sc-product-name {
  font-size: 12px; font-weight: 600; padding: 8px 8px 0; min-height: 30px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-product-sku { font-size: 10.5px; padding: 2px 8px 0; }
.sc-product-card .badge { margin: 5px 8px 0; align-self: flex-start; }
.sc-product-card .btn-ghost { margin: 8px; padding: 6px 10px; font-size: 12px; }

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--green-800); color: #fff; padding: 11px 20px;
  border-radius: 10px; box-shadow: var(--shadow); font-size: 13.5px; z-index: 50;
}
.toast.bad { background: var(--danger); }

.loading { padding: 24px; text-align: center; color: var(--muted); }

/* ── Whitelist (transición de teléfono) ─────────────────────── */
.wl-toggle-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 20px; margin-bottom: 14px;
}
.wl-toggle-card p { margin: 3px 0 0; font-size: 12.5px; }
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--line); border-radius: 999px; transition: background .15s;
}
.switch .slider::before {
  content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + .slider { background: var(--green-500); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.wl-msg-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 20px; margin-bottom: 14px;
}
.wl-msg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wl-msg-card p { margin: 4px 0 10px; font-size: 12.5px; }
.wl-msg-card textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; outline: none; resize: vertical;
  padding: 12px; font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: 13px; line-height: 1.6; color: var(--ink); background: var(--bg); box-sizing: border-box;
}
.wl-msg-card textarea:focus { border-color: var(--green-500); background: #fff; }
.wl-add-card {
  display: flex; gap: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px;
}
.wl-add-card input {
  flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font-size: 13px;
}
.wl-add-card input:focus { border-color: var(--green-500); background: #fff; }
.wl-head, .wl-row {
  display: grid; grid-template-columns: 1.4fr 2fr 1.1fr auto;
  gap: 12px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--line);
}
.wl-head {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--green-700); background: var(--green-50); position: sticky; top: 0;
}
.wl-row:hover { background: var(--green-50); }

/* ── Recontacto ──────────────────────────────────────────── */
.rc-alert {
  background: #fbead9; color: var(--warn); border: 1px solid #f1cfa9; border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 14px; font-size: 13px; line-height: 1.5;
}
.rc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-top: 12px; }
.rc-field label, .rc-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.rc-fixed { padding: 8px 0; font-size: 13px; }
.rc-field p { margin: 6px 0 0; font-size: 12px; }
.rc-control { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-control input, .rc-control select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font-size: 13px;
}
.rc-control input:focus, .rc-control select:focus { border-color: var(--green-500); background: #fff; outline: none; }
.rc-num { width: 90px; }
.rc-error { color: var(--danger); font-size: 12.5px; margin: 12px 0 0; }
.rc-subhead { margin: 18px 0 10px; font-size: 15px; }
.rc-head, .rc-row {
  display: grid; grid-template-columns: 1fr 1.3fr 1fr 1fr 3fr;
  gap: 12px; align-items: start; padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 13px;
}
.rc-head {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--green-700); background: var(--green-50); position: sticky; top: 0;
}
.rc-msg { color: var(--muted); white-space: pre-wrap; }
@media (max-width: 760px) {
  .rc-grid { grid-template-columns: 1fr; }
  .rc-head { display: none; }
  .rc-row { grid-template-columns: 1fr; gap: 4px; }
}
.wl-date { font-size: 12.5px; color: var(--muted); }
.wl-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.wl-inline-input {
  width: 100%; border: 1px solid transparent; background: transparent; color: var(--ink);
  font-size: 13px; padding: 6px 8px; border-radius: 6px; font-family: inherit; box-sizing: border-box;
}
.wl-inline-input:hover { border-color: var(--line); }
.wl-inline-input:focus { outline: none; border-color: var(--green-500); background: #fff; }
.wl-inline-input[data-field="note"] { color: var(--muted); }

/* ── Plantillas META ─────────────────────────────────────── */
.mt-config-warn {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
  background: #fbead9; color: var(--warn); font-size: 13px; line-height: 1.45;
}
.mt-foot { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-status-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.mt-status-card .badge { font-size: 12px; padding: 4px 10px; }
.mt-checked { font-size: 12px; }
.mt-reason {
  flex-basis: 100%; margin: 4px 0 0; padding: 9px 12px; border-radius: 8px;
  background: #f7e0e0; color: var(--danger); font-size: 13px;
}
.mt-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.mt-meta b { color: var(--ink); font-weight: 600; }
.mt-h3 { font-size: 13px; margin: 20px 0 10px; color: var(--green-700); border-top: 1px solid var(--line); padding-top: 16px; }
.mt-note { font-size: 12.5px; margin: 0 0 10px; }
.mt-hint { font-size: 11.5px; margin-left: 8px; }
.mt-test { border: 0; padding: 0; margin: 0; min-width: 0; }
.mt-test[disabled] { opacity: .55; }
.sc-field textarea {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; resize: vertical;
  font-size: 13.5px; font-family: var(--font); outline: none; background: var(--card); color: var(--ink);
}
.sc-field textarea:focus { border-color: var(--green-500); }
.sc-field input[type="file"] { font-size: 13px; }
.mt-var { background: #fff3c4; color: #7a5b00; border-radius: 4px; padding: 0 3px; font-weight: 600; }
.mt-var.filled { background: #d6f0ff; color: #1d4e7a; }
@media (max-width: 720px) { .sc-row { flex-direction: column; gap: 0; } }

/* ── Plantillas META: todos los tipos ────────────────────── */
.mt-type-ico { display: inline-block; width: 20px; margin-right: 4px; text-align: center; }
.mt-hint0 { font-size: 11.5px; line-height: 1.4; }
.mt-count { font-weight: 500; color: var(--muted); margin-left: 6px; font-size: 11px; }
.mt-count.over { color: var(--danger); font-weight: 700; }
.mt-primary-ghost { border-color: var(--green-500) !important; color: var(--green-700) !important; font-weight: 600; }

/* Paso 1: elegir tipo */
.mt-pick-group {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--green-700); margin: 6px 0 10px;
}
.mt-pick-group:not(:first-child) { margin-top: 22px; }
.mt-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.mt-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  cursor: pointer; font: inherit; color: var(--ink); transition: border-color .12s, box-shadow .12s, transform .05s;
}
.mt-pick:hover:not(:disabled) { border-color: var(--green-500); box-shadow: var(--shadow); }
.mt-pick:active:not(:disabled) { transform: scale(.99); }
.mt-pick:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }
.mt-pick:disabled { opacity: .5; cursor: not-allowed; }
.mt-pick-ico { font-size: 24px; line-height: 1; }
.mt-pick-name { font-weight: 700; font-size: 14px; }
.mt-pick-desc { font-size: 12.5px; line-height: 1.4; }
.mt-pick-use { font-size: 11.5px; color: var(--muted); }
.mt-pick-cats { display: flex; gap: 4px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }

/* Paso 2: formulario + vista previa */
.mt-builder { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; min-height: 100%; }
.mt-b-form { padding: 6px 18px 24px; min-width: 0; }
.mt-b-side {
  position: sticky; top: 0; padding: 16px; border-left: 1px solid var(--line);
  background: var(--green-50); display: flex; flex-direction: column; gap: 12px; min-height: 100%;
}
.mt-b-submit { width: 100%; padding: 11px; }
.mt-sec { padding: 16px 0 6px; border-bottom: 1px solid var(--line); }
.mt-sec:last-child { border-bottom: 0; }
.mt-sec-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 0 0 12px; color: var(--green-800); }
.mt-sec-n {
  width: 22px; height: 22px; border-radius: 50%; background: var(--green-100); color: var(--green-700);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.mt-sec-hint { font-size: 12px; margin: -6px 0 12px; }
.mt-sub-h { font-size: 12.5px; font-weight: 600; color: var(--green-700); margin: 14px 0 8px; }
.mt-info {
  font-size: 12.5px; line-height: 1.5; padding: 10px 12px; border-radius: 8px; margin-bottom: 12px;
  background: #eef6ff; color: #29486b;
}
.mt-narrow { max-width: 260px; }
.sc-field input[type="number"], .sc-field input[type="datetime-local"] {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px;
  outline: none; background: var(--card); color: var(--ink); font-family: inherit;
}
.sc-field input[type="number"]:focus, .sc-field input[type="datetime-local"]:focus { border-color: var(--green-500); }
.mt-check-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin: 0 0 12px; cursor: pointer; line-height: 1.4; }
.mt-check-row input { margin-top: 2px; accent-color: var(--green-600); }

/* Barra de formato del texto */
.mt-toolbar { display: flex; gap: 4px; flex-wrap: wrap; }
.mt-toolbar button {
  min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); color: var(--ink); cursor: pointer; font-size: 13px;
}
.mt-toolbar button:hover { background: var(--green-50); border-color: var(--green-300); }
.mt-toolbar .mt-tb-var { color: var(--green-700); font-weight: 600; margin-left: auto; }

/* Variables */
.mt-vars { display: flex; flex-direction: column; gap: 8px; margin: -4px 0 14px; padding: 10px; background: #fffbea; border: 1px solid #f3e6b5; border-radius: 8px; }
.mt-var-row { display: flex; gap: 8px; align-items: center; }
.mt-var-row input {
  flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px;
  font-size: 13px; outline: none; background: #fff;
}
.mt-var-row input:focus { border-color: var(--green-500); }
.mt-var-tag {
  font-family: "SF Mono", "Cascadia Code", Consolas, monospace; font-size: 12px; font-weight: 700;
  color: #7a5b00; background: #fff3c4; border-radius: 5px; padding: 3px 7px; flex-shrink: 0;
}

/* Archivo de ejemplo */
.mt-drop {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
  border: 1.5px dashed var(--green-300); border-radius: 10px; background: var(--green-50);
  font-size: 13px; font-weight: 600; color: var(--green-700) !important;
}
.mt-drop:hover { border-color: var(--green-500); background: var(--green-100); }
.mt-drop:focus-within { outline: 2px solid var(--green-500); outline-offset: 2px; }
.mt-drop.done { border-style: solid; }
.mt-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mt-drop-ico { font-size: 20px; }
.mt-up { font-size: 12px; }
.mt-up.ok { color: var(--green-700); font-weight: 600; }
.mt-up.err { color: var(--danger); font-weight: 600; }

/* Botones de la plantilla */
.mt-btn-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.mt-btn-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 0; background: #fbfdfc; }
.mt-btn-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mt-btn-type { font-size: 12px; font-weight: 700; color: var(--green-800); }
.mt-x {
  border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px;
  width: 24px; height: 24px; border-radius: 6px; line-height: 1;
}
.mt-x:hover { background: #f7e0e0; color: var(--danger); }
.mt-addbtns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.mt-addbtns .btn-ghost { font-size: 12.5px; padding: 6px 10px; }
.mt-addbtns .btn-ghost:disabled { opacity: .45; cursor: not-allowed; }
.mt-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; align-self: flex-start; }
.mt-seg button { border: 0; background: var(--card); padding: 6px 12px; font-size: 12.5px; cursor: pointer; color: var(--ink); }
.mt-seg button + button { border-left: 1px solid var(--line); }
.mt-seg button.active { background: var(--green-500); color: #fff; font-weight: 600; }
.mt-url-compose { display: flex; align-items: stretch; }
.mt-url-compose input { flex: 1; min-width: 0; }
.mt-url-var, .mt-url-prefix {
  display: flex; align-items: center; padding: 0 9px; font-size: 12px; background: #fff3c4; color: #7a5b00;
  border: 1px solid var(--line); font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
}
.mt-url-var { border-left: 0; border-radius: 0 8px 8px 0; font-weight: 700; }
.mt-url-compose:has(.mt-url-var) input { border-radius: 8px 0 0 8px; }
.mt-url-prefix { border-right: 0; border-radius: 8px 0 0 8px; background: var(--green-50); color: var(--muted); max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-url-compose .mt-url-prefix + input { border-radius: 0 8px 8px 0; }

/* Tarjetas del carrusel */
.mt-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mt-tab {
  border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 6px 11px;
  font-size: 12.5px; cursor: pointer; color: var(--ink);
}
.mt-tab.active { background: var(--green-500); border-color: var(--green-500); color: #fff; font-weight: 600; }
.mt-tab.warn:not(.active)::after { content: " •"; color: var(--warn); font-weight: 700; }
.mt-tab.add { font-weight: 700; color: var(--green-700); }
.mt-card-edit { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 4px; background: #fbfdfc; }
.mt-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px; }

/* Lista de pendientes */
.mt-check { font-size: 12.5px; }
.mt-check-title { font-weight: 700; color: var(--warn); margin-bottom: 6px; }
.mt-check ul { margin: 0; padding-left: 18px; color: var(--ink); display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow-y: auto; }
.mt-check-ok { font-weight: 700; color: var(--green-700); background: var(--green-100); padding: 8px 10px; border-radius: 8px; }
.mt-preview-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--green-700); }

/* Detalle */
.mt-detail { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; min-height: 100%; }
.mt-detail-main { min-width: 0; }
.mt-detail-preview {
  position: sticky; top: 0; padding: 16px; border-left: 1px solid var(--line); background: var(--green-50);
  display: flex; flex-direction: column; gap: 10px; min-height: 100%;
}
.mt-test-group { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 0; margin-bottom: 14px; }
.mt-test-title { font-size: 12px; font-weight: 700; color: var(--green-800); margin-bottom: 8px; }
.mt-test-card { border-top: 1px dashed var(--line); padding-top: 10px; margin-bottom: 4px; }
.mt-test-group > .mt-test-card:first-of-type, #mt-test-sections > .mt-test-card:first-child { border-top: 0; padding-top: 0; }
.mt-test-card-title { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.mt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mt-chip-prod {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px; max-width: 100%;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12.5px; margin-bottom: 8px;
}
.mt-chips .mt-chip-prod { margin-bottom: 0; }
.mt-chip-prod img { width: 26px; height: 26px; object-fit: contain; border-radius: 5px; background: #fff; }
.mt-chip-prod span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.mt-sec-del { align-self: flex-end; margin-bottom: 14px; }

/* Vista previa de WhatsApp (como la ve el cliente) */
.wa-chat {
  background: #efeae2; border-radius: 12px; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid #e2dbd0;
}
.wa-msg {
  background: #fff; border-radius: 0 10px 10px 10px; padding: 4px 4px 0; max-width: 100%;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13); font-size: 13.5px; line-height: 1.45; color: #111b21;
  word-wrap: break-word; overflow: hidden;
}
.wa-msg > .wa-head, .wa-msg > .wa-body, .wa-msg > .wa-foot, .wa-msg > .wa-time { padding-left: 7px; padding-right: 7px; }
.wa-head { font-weight: 700; padding-top: 4px; }
.wa-body { padding-top: 3px; }
.wa-body code { background: #f0f2f5; padding: 0 3px; border-radius: 3px; font-size: .92em; }
.wa-foot { font-size: 12px; color: #667781; padding-top: 4px; }
.wa-time { font-size: 10.5px; color: #667781; text-align: right; padding-bottom: 4px; }
.wa-media { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 7px; background: #dfe5e7; }
.wa-media.ph { display: flex; align-items: center; justify-content: center; color: #54656f; font-size: 13px; }
.wa-media.map { background: repeating-linear-gradient(45deg, #dde8d8, #dde8d8 12px, #e6efe2 12px, #e6efe2 24px); }
.wa-doc { display: flex; align-items: center; gap: 8px; padding: 10px; background: #f0f2f5; border-radius: 7px; font-size: 12.5px; }
.wa-doc span:first-child { font-size: 22px; }
.wa-catalog { display: flex; gap: 10px; align-items: center; padding: 8px; background: #f0f2f5; border-radius: 7px; font-size: 12.5px; }
.wa-thumb { width: 54px; height: 54px; border-radius: 6px; background: #dfe5e7; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.wa-lto { display: flex; gap: 10px; align-items: flex-start; padding: 10px; background: #f0f2f5; border-radius: 7px; font-size: 12.5px; }
.wa-lto-ico { font-size: 22px; }
.wa-lto-exp { color: #c2410c; font-size: 12px; margin-top: 2px; }
.wa-lto-code { font-size: 12px; color: #667781; margin-top: 2px; }
.wa-btns { border-top: 1px solid #e9edef; margin: 0 -4px; }
.wa-btn {
  text-align: center; color: #027eb5; font-size: 13.5px; padding: 9px 8px; border-bottom: 1px solid #e9edef;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-btn:last-child { border-bottom: 0; }
.wa-cards { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.wa-card {
  flex: 0 0 78%; background: #fff; border-radius: 10px; padding: 4px 4px 0; scroll-snap-align: start;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13); font-size: 13px; overflow: hidden;
}
.wa-card .wa-media { height: 120px; }
.wa-card > .wa-body { padding: 6px; }

@media (max-width: 1100px) {
  .mt-builder, .mt-detail { grid-template-columns: 1fr; }
  .mt-b-side, .mt-detail-preview { position: static; border-left: 0; border-top: 1px solid var(--line); min-height: 0; }
}
#mt-editor .ed-head { flex-wrap: wrap; }
#mt-editor .ed-head > div:first-child { min-width: 0; flex: 1 1 260px; }
#mt-editor .ed-head-actions { flex-wrap: wrap; flex-shrink: 1; justify-content: flex-end; }
.mt-b-form .sc-row, .mt-detail-main .sc-row { flex-wrap: wrap; }
.mt-b-form .sc-row .sc-field, .mt-detail-main .sc-row .sc-field { min-width: 200px; }
.mt-b-form .sc-field input, .mt-b-form .sc-field select, .mt-b-form .sc-field textarea,
.mt-detail-main .sc-field input, .mt-detail-main .sc-field select { min-width: 0; width: 100%; }
.mt-b-form .mt-url-compose input { width: auto; }

/* Plantillas META: la vista previa se queda fija al bajar por el formulario.
   La columna de color se pinta en la cuadrícula para que el panel pegajoso no
   tenga que medir todo el alto (con min-height: 100% no podía moverse). */
.mt-builder, .mt-detail {
  background: linear-gradient(to right, transparent calc(100% - 331px), var(--line) calc(100% - 331px),
    var(--line) calc(100% - 330px), var(--green-50) calc(100% - 330px));
  flex-shrink: 0; /* dentro de .sc-body (flex) no debe encogerse: si no, el contenido se desborda */
}
.mt-b-side, .mt-detail-preview {
  min-height: 0; border-left: 0; background: transparent;
  max-height: calc(100vh - 190px); overflow-y: auto;
}
@media (max-width: 1100px) {
  .mt-builder, .mt-detail { background: none; }
  .mt-b-side, .mt-detail-preview { max-height: none; overflow: visible; background: var(--green-50); border-top: 1px solid var(--line); }
}

/* Carrusel de productos: dato por variable y textos propios */
.mt-var-row select { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 13px; }
.mt-var-row select:focus { outline: none; border-color: var(--green-500); }
.mt-insert { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; }
.mt-insert-btn { padding: 3px 9px; border: 1px dashed var(--green-500); border-radius: 999px; background: transparent; color: var(--green-700); font: inherit; font-size: 12px; cursor: pointer; }
.mt-insert-btn:hover { background: var(--green-50); }
.mt-ptext-name { flex: 0 0 38%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

/* Confirmación con vista previa antes de enviar una plantilla */
.mt-confirm-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 30, 22, .45); }
.mt-confirm { width: min(460px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.25); overflow: hidden; }
.mt-confirm-head { padding: 16px 20px 10px; border-bottom: 1px solid var(--line); }
.mt-confirm-head h3 { margin: 0 0 4px; font-size: 16px; }
.mt-confirm-head p { margin: 0; font-size: 13px; }
.mt-confirm-body { padding: 14px 20px; overflow-y: auto; background: var(--green-50); }
.mt-confirm-list { margin: 12px 0 0; padding-left: 20px; font-size: 12px; }
.mt-confirm-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 12px; }
.mt-confirm-actions { display: flex; gap: 8px; margin-left: auto; }
.mt-cardtext { font-size: 12px; margin: 4px 0 6px; }
.mt-warn-inline { color: #9a6700; font-weight: 600; }

/* ── Clientes potenciales ── */
.ld-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ld-select {
  padding: 7px 30px 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: var(--font);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 8px center / 14px;
  appearance: none; -webkit-appearance: none; color: var(--ink); cursor: pointer; max-width: 100%;
}
.ld-select:focus { outline: none; border-color: var(--green-500); }
.ld-stats { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.ld-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.ld-stat b { font-size: 16px; color: var(--green-700); }
.ld-stat:hover { background: var(--green-50); }
.ld-stat.active { border-color: var(--green-500); background: var(--green-50); box-shadow: inset 0 0 0 1px var(--green-500); }
.ld-stat-total { font-size: 12.5px; margin-left: 4px; }
.ld-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 18px; background: #fff8e8; border-bottom: 1px solid var(--line); font-size: 13px; }
.ld-row.ct-head, .ld-row.ct-row { grid-template-columns: 28px minmax(0, 2fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.4fr) 236px; }
.ld-row.off { background: #fafbfa; }
.ld-row.off .ct-name, .ld-row.off .ct-phone { opacity: .65; }
.ld-check { display: flex; align-items: center; }
.ld-check input { width: 16px; height: 16px; accent-color: var(--green-500); cursor: pointer; }
.ld-sub { display: block; font-size: 11.5px; color: var(--muted, #6b8378); margin-top: 2px; }
.ld-ids { font-size: 13px; }
.ld-status { display: flex; flex-direction: column; align-items: flex-start; }
.ld-actions { display: flex; gap: 6px; justify-content: flex-end; }
.ld-extra { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--green-50); color: var(--green-700); cursor: help; }
.ld-danger { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 12.5px; }
.ld-danger-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ld-import { background: var(--card); border: 1px solid var(--green-500); border-radius: 14px; margin-bottom: 16px; overflow: hidden; transition: opacity .15s; }
.ld-import.ld-busy { opacity: .55; pointer-events: none; }
.ld-imp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px; background: var(--green-50); border-bottom: 1px solid var(--line); }
.ld-imp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.ld-imp-col { padding: 16px 18px; min-width: 0; }
.ld-imp-col + .ld-imp-col { border-left: 1px solid var(--line); }
.ld-imp-row2 { display: flex; gap: 12px; flex-wrap: wrap; }
.ld-imp-row2 .sc-field { flex: 1; min-width: 160px; margin-bottom: 10px; }
.ld-imp-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--green-700); margin: 6px 0 10px; }
.ld-map { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 8px; }
.ld-map label { font-size: 13px; font-weight: 600; }
.ld-map .ld-select { width: 100%; }
.ld-req { color: var(--danger); }
.ld-auto { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; background: #def3e6; color: var(--green-700); margin-left: 4px; }
.ld-opt { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-top: 8px; cursor: pointer; }
.ld-opt input { accent-color: var(--green-500); }
.ld-opt-group { margin-top: 12px; font-size: 13px; }
.ld-sum { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.ld-sum li { padding-left: 20px; position: relative; }
.ld-sum li::before { content: "•"; position: absolute; left: 6px; color: var(--muted, #6b8378); }
.ld-sum li.ok::before { content: "✓"; left: 3px; color: var(--green-500); font-weight: 700; }
.ld-sum li.bad::before { content: "!"; left: 6px; color: var(--warn); font-weight: 800; }
.ld-sample-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.ld-sample { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ld-sample th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--green-700); background: var(--green-50); padding: 7px 10px; white-space: nowrap; }
.ld-sample td { padding: 7px 10px; border-top: 1px solid var(--line); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ld-note { font-size: 12px; margin: 6px 0 0; }
.ld-imp-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 12.5px; }
.ld-imp-actions { display: flex; gap: 8px; margin-left: auto; }
.ld-imp-error { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 18px; color: var(--danger); font-size: 13.5px; }

@media (max-width: 900px) {
  .ld-imp-grid { grid-template-columns: 1fr; }
  .ld-imp-col + .ld-imp-col { border-left: 0; border-top: 1px solid var(--line); }
  .ld-row.ct-head { display: none; }
  .ld-row.ct-row { grid-template-columns: 28px minmax(0, 1fr) auto; row-gap: 4px; }
  .ld-row.ct-row > :nth-child(3), .ld-row.ct-row > :nth-child(4), .ld-row.ct-row > :nth-child(5) { grid-column: 2 / 4; font-size: 12.5px; }
  .ld-row.ct-row > .ld-actions { grid-column: 3; grid-row: 1; }
  .ld-map { grid-template-columns: 1fr; gap: 4px; }
}

/* Clientes potenciales: alta / edición / registro directo */
.ld-name-btn { all: unset; cursor: pointer; font-weight: inherit; color: inherit; }
.ld-name-btn:hover, .ld-name-btn:focus-visible { color: var(--green-700); text-decoration: underline; }
.ld-reg-btn { color: var(--green-700); border-color: var(--green-500); }
.ld-modal { width: min(560px, 100%); }
.ld-modal .mt-confirm-body { background: var(--card); }
.ld-form .sc-field textarea { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13.5px; resize: vertical; }
.ld-form .sc-field textarea:focus { outline: none; border-color: var(--green-500); }
.ld-form .sc-row .sc-field { flex: 1; min-width: 0; }
.ld-extra-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px; margin-bottom: 6px; }
.ld-extra-row input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; min-width: 0; }
.ld-extra-row input:focus { outline: none; border-color: var(--green-500); }
.ld-extra-add { align-self: flex-start; font-size: 12.5px; }
.ld-form-error { color: var(--danger); font-size: 13px; margin: 4px 0 0; }
.ld-foot-left { display: flex; gap: 8px; }
.ld-reg-data { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: 13.5px; }
.ld-reg-data dt { color: var(--muted); }
.ld-reg-data dd { margin: 0; }
.ld-bulk[hidden], .ld-import[hidden] { display: none; }

/* ── Campañas ── */
.cp-banner { padding: 10px 14px; border-radius: 10px; background: var(--green-50); border: 1px solid var(--line); font-size: 13px; margin-bottom: 10px; }
.cp-banner.warn { background: #fff6e6; border-color: #f0dcb8; }
.cp-banner.bad { background: #fbeaea; border-color: #f0c9c9; color: var(--danger); }
.cp-empty { text-align: center; padding: 50px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.cp-empty .big-ico { font-size: 34px; }
.cp-empty p { max-width: 520px; margin: 8px auto; }
.cp-row.ct-head, .cp-row.ct-row { grid-template-columns: minmax(0, 2.4fr) 1fr minmax(0, 1.6fr) .7fr .7fr .7fr; }
button.ct-row.cp-row { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cp-progress-cell { display: flex; align-items: center; gap: 8px; }
.cp-progress { flex: 1; height: 8px; border-radius: 99px; background: var(--green-100); overflow: hidden; min-width: 60px; }
.cp-progress span { display: block; height: 100%; background: var(--green-500); border-radius: 99px; }
.cp-progress-txt { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cp-bad { color: var(--danger); }
.cp-builder { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.cp-builder-main { min-width: 0; }
.cp-builder-side { position: sticky; top: 0; background: var(--green-50); border: 1px solid var(--line); border-radius: 14px; padding: 14px; max-height: calc(100vh - 150px); overflow-y: auto; }
.cp-side-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cp-head-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cp-sec { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.cp-sec h3 { margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.cp-sec .sc-row .sc-field { flex: 1; min-width: 0; }
.cp-src { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.cp-src-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-size: 14px; }
.cp-src-head input { accent-color: var(--green-500); width: 16px; height: 16px; }
.cp-src-body { display: none; padding: 0 14px 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.cp-src.on { border-color: var(--green-500); }
.cp-src.on .cp-src-body { display: block; }
.cp-days { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cp-day { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink); }
.cp-day.active { background: var(--green-500); border-color: var(--green-500); color: #fff; font-weight: 600; }
.cp-inline { margin: 0 0 0 6px; }
.cp-sec textarea { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13.5px; resize: vertical; }
.cp-sec input[type="number"] { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; height: 38px; }
.cp-aud-result { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--green-50); font-size: 13.5px; }
.cp-aud-total b, .cp-rev-total b { font-size: 20px; color: var(--green-700); }
.cp-var { display: grid; grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 8px; }
.cp-var select, .cp-var input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff; min-width: 0; }
.cp-var-name { font-size: 12px; }
.cp-review { width: min(860px, 100%); }
.cp-rev-total { margin-bottom: 8px; }
.cp-samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 12px 0; }
.cp-sample-who { display: flex; flex-direction: column; font-size: 13px; margin-bottom: 6px; }
.cp-sample-who .muted { font-size: 12px; }
.cp-rev-test { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; font-size: 13px; }
.cp-rev-test input, .cp-rev-when input[type="datetime-local"] { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.cp-rev-when { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.cp-detail-title { display: flex; align-items: center; gap: 10px; }
.cp-detail-title h2 { margin: 0; font-size: 20px; }
.cp-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-progress-big { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.cp-progress-big .cp-progress { height: 12px; }
.cp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cp-tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; }
.cp-tile b { font-size: 22px; color: var(--green-700); }
.cp-tile span { font-size: 12.5px; color: var(--muted); }
.cp-tile.bad b { color: var(--danger); }
.cp-sub { margin: 4px 0 8px; }
.cp-rec-row.ct-head, .cp-rec-row.ct-row { grid-template-columns: minmax(0, 1.6fr) 1fr minmax(0, 1.6fr) minmax(0, 1.2fr) .8fr; }
.cp-params { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.cp-opt-add { display: flex; gap: 8px; }
.cp-opt-add input, #cp-opt-search { flex: 1; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; width: 100%; }
.cp-opt-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 1100px) {
  .cp-builder { grid-template-columns: 1fr; }
  .cp-builder-side { position: static; max-height: none; }
  .cp-row.ct-head { display: none; }
  .cp-row.ct-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cp-row.ct-row > :nth-child(n+3) { display: none; }
  .cp-var { grid-template-columns: auto minmax(0, 1fr); }
}

/* Scroll de página en apartados largos (el resto hace scroll en paneles internos) */
#view-campaigns.active { display: block; overflow-y: auto; }
#view-leads.active { overflow-y: auto; }
#view-leads > :not(.clients-wrap) { flex-shrink: 0; }
#view-leads > .clients-wrap { min-height: 460px; }

/* Campañas: lista de personas */
.cp-people { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; }  /* sin overflow: el buscador flota encima */
.cp-people-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--green-50); border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.cp-people-head input { flex: 1; min-width: 200px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.cp-add { position: relative; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cp-add input { width: 100%; padding: 8px 12px; border: 1px dashed var(--green-500); border-radius: 8px; font-size: 13px; }
.cp-add input:focus { outline: none; border-style: solid; }
.cp-add-results { position: absolute; top: calc(100% - 6px); left: 12px; right: 12px; z-index: 60; max-height: 340px; box-shadow: 0 12px 32px rgba(15, 30, 22, .18); }
.cp-add-results .sc-result { padding: 9px 12px; cursor: pointer; }
#cp-people-list { max-height: 380px; overflow-y: auto; }
.cp-person { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.cp-person:last-child { border-bottom: 0; }
.cp-person .ct-client { min-width: 0; }
.cp-added { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: #def3e6; color: var(--green-700); }
.cp-reason { font-size: 12.5px; color: var(--muted); margin-left: auto; text-align: right; }
.cp-more { margin: 8px 12px; }

.cp-pause-all { margin-top: 14px; padding: 10px 12px; border: 1px solid #f0c9c9; border-radius: 10px; background: #fdf3f3; }

/* Campañas: historial */
.cp-list-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; }
.cp-at { color: var(--muted); font-size: 12px; white-space: nowrap; }
.cp-gsid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; cursor: help; }

/* Subir archivo → URL pública */
.mt-url-upload { display: flex; gap: 6px; align-items: center; }
.mt-url-upload input { flex: 1; min-width: 0; }
.mt-url-upload .btn-ghost { white-space: nowrap; padding: 7px 10px; }
.cp-pause-all { flex-wrap: wrap; row-gap: 2px; }
.cp-pause-all .muted { flex-basis: 100%; padding-left: 24px; font-size: 12.5px; }