/* ─────────────────────────────────────────────────────────────
   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: 4px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  background: transparent;
  border: 0;
  color: #d6ebe0;
  text-align: left;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  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; }

/* 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;
  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; }
.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.err { background: #f7e0e0; color: var(--danger); }
.badge.warn { background: #fbead9; color: var(--warn); }

.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); }
.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-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); }

.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-sep { text-align: center; margin: 14px 0; }
.day-sep span { background: rgba(15,61,46,.07); color: var(--muted); font-size: 11px; padding: 3px 12px; border-radius: 20px; }

/* ── 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); }