:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #fbfcfe;
  --surface-3: #f1f3f6;
  --line: #e4e7ec;
  --line-soft: #eef0f4;
  --text: #0f1722;
  --muted: #5b6573;
  --faint: #98a2b3;
  --primary: #1fad75;
  --primary-strong: #0e9f6e;
  --gold: #d9930a;
  --gold-2: #d9930a;
  --warning: #d9930a;
  --green: #1fad75;
  --lime: #9cff57;
  --blue: #2563eb;
  --violet: #7c5cfc;
  --cyan: #0891b2;
  --red: #dc2626;
  --orange: #ea580c;
  --shadow: 0 10px 30px rgba(15, 23, 34, 0.07);
  --shadow-soft: 0 1px 2px rgba(15, 23, 34, 0.05);
  --overlay: rgba(15, 23, 34, 0.45);
  --topbar-bg: rgba(255, 255, 255, 0.9);
  --app-bg:
    linear-gradient(180deg, #fbfcfe 0%, #f5f7fa 100%);
  --auth-bg:
    radial-gradient(circle at 50% 4%, rgba(31, 173, 117, 0.10), transparent 25rem),
    linear-gradient(180deg, #ffffff, #f4f6f8);
  --input-bg: #ffffff;
  --panel-glow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --card-bg: #ffffff;
  --kanban-bg: #f4f6f8;
  --lead-bg: #ffffff;
  --code-bg: #f3f4f6;
  --radius: 10px;
  --font-xs: 10px;
  --font-sm: 12px;
  --font-md: 13px;
  --font-lg: 16px;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --card-padding-compact: 10px;
  --button-height-compact: 30px;
  /* Utility tokens added for the visual-port layer — derived from ClubCommerce's own
     palette (green --primary + neutral shadow), NOT from the source CRM. */
  --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 32%, transparent);
  --shadow-pop: 0 14px 34px rgba(15, 23, 34, 0.12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dashboard-grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.panel.nested {
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: none;
}

.debug-box {
  max-height: 260px;
  overflow: auto;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 12px;
  white-space: pre-wrap;
}

@media (max-width: 900px) {
  .dashboard-grid.two {
    grid-template-columns: 1fr;
  }

  .closer-kpi-grid,
  .workspace-main-grid {
    grid-template-columns: 1fr;
  }

  .closer-hero .panel-header,
  .priority-lead-row {
    grid-template-columns: 1fr;
  }

  .closer-hero-meta {
    justify-items: start;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-soft: #020605;
  --surface: #07110f;
  --surface-2: #0b1716;
  --surface-3: #10201c;
  --line: #17302a;
  --line-soft: #10251f;
  --text: #f7fff8;
  --muted: #8ea098;
  --faint: #66776f;
  --primary: #72efa4;
  --primary-strong: #9cff7a;
  --gold: #eca117;
  --gold-2: #eca117;
  --warning: #eca117;
  --green: #72efa4;
  --blue: #00a1be;
  --cyan: #00a1be;
  --red: #e5484d;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  --shadow-soft: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  --overlay: rgba(0, 0, 0, 0.72);
  --topbar-bg: rgba(2, 6, 5, 0.88);
  --app-bg:
    radial-gradient(circle at 75% -10%, rgba(114, 239, 164, 0.11), transparent 26rem),
    linear-gradient(180deg, #020605 0%, #000000 58%, #000000 100%);
  --auth-bg:
    radial-gradient(circle at 50% 8%, rgba(114, 239, 164, 0.12), transparent 24rem),
    linear-gradient(180deg, #020605, #000000);
  --input-bg: #020605;
  --panel-glow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  --card-bg: #07110f;
  --kanban-bg: rgba(7, 17, 15, 0.92);
  --lead-bg: rgba(11, 23, 22, 0.92);
  --code-bg: #020605;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  letter-spacing: 0;
}

body {
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
  background: var(--app-bg);
}

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 16px;
  text-align: center;
  color: var(--muted);
}

.boot-screen span {
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--auth-bg);
}

.auth-card {
  width: min(560px, 100%);
  display: grid;
  gap: 20px;
  padding: 38px 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}

.auth-logo {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--primary);
  font-weight: 900;
}

.auth-logo span {
  color: var(--muted);
  font-size: 13px;
}

.auth-logo strong {
  color: var(--text);
  font-size: 24px;
  letter-spacing: 0;
}

.auth-mark {
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--primary) 62%, transparent);
  border-radius: 28px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 16%, transparent), color-mix(in srgb, var(--surface) 86%, transparent));
  color: var(--primary-strong);
  font-size: 36px;
  box-shadow: inset 0 0 42px color-mix(in srgb, var(--primary) 10%, transparent);
}

.auth-form {
  display: grid;
  gap: 16px;
}

.auth-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-right: 52px;
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--primary-strong);
}

.auth-submit {
  min-height: 58px;
  margin-top: 14px;
  font-size: 18px;
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  text-decoration: underline;
  font-weight: 800;
}

.auth-message,
.reset-code-box {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: var(--primary);
  font-weight: 800;
}

.reset-code-box {
  display: grid;
  gap: 4px;
  text-align: center;
}

.reset-code-box span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.reset-code-box strong {
  font-size: 28px;
  letter-spacing: 0;
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent);
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, transparent), color-mix(in srgb, var(--surface) 82%, transparent));
  color: var(--primary-strong);
  font-weight: 900;
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--primary) 10%, transparent);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
}

.brand > div {
  min-width: 0;
}

.brand h1 {
  margin: 0;
  font-size: 17px;
  line-height: 1.1;
  white-space: nowrap;
}

.brand p,
.eyebrow,
.micro,
.muted {
  margin: 0;
  color: var(--muted);
}

.brand p {
  font-size: 12px;
  line-height: 1.25;
  max-width: 260px;
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.top-actions select {
  width: 210px;
  min-height: 36px;
}

.top-actions .language-select {
  width: 62px;
  min-width: 62px;
  min-height: 34px;
  padding-inline: 10px 24px;
  font-size: var(--font-sm);
  font-weight: 800;
}

.main {
  padding: 16px clamp(10px, 1.2vw, 20px) 32px;
}

.period-shell {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.strategy-row {
  min-width: 0;
}

.period-row,
.tab-row,
.toolbar-row,
.segmented {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.period-row {
  margin-bottom: 0;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: var(--shadow-soft);
}

.period-head {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.period-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.custom-period {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-left: 8px;
  border-left: 1px solid var(--line-soft);
}

.custom-period label {
  width: 150px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.period-label {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.period-summary {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.tab-row {
  margin: 18px 0;
}

.nav-shell {
  display: grid;
  gap: 8px;
  margin: 16px 0 18px;
}

.main-nav,
.subtab-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.main-nav {
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: var(--shadow-soft);
}

.main-nav-btn,
.subtab-btn {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.main-nav-btn:hover,
.subtab-btn:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 24%, transparent);
}

.main-nav-btn.active {
  color: #00150b;
  border-color: color-mix(in srgb, var(--primary) 76%, transparent);
  background: linear-gradient(180deg, var(--primary-strong), var(--primary));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 16%, transparent);
}

.subtab-row {
  padding: 2px 0;
}

.subtab-btn {
  min-height: 32px;
  padding: 0 11px;
  font-size: 13px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  border-color: var(--line-soft);
}

.subtab-btn.active {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.btn,
.tab-btn,
.period-btn,
.ghost-btn,
.primary-btn,
.danger-btn,
.icon-btn,
.chip,
.status-pill {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:hover,
.tab-btn:hover,
.period-btn:hover,
.ghost-btn:hover,
.icon-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  transform: translateY(-1px);
}

.period-btn,
.tab-btn {
  color: var(--muted);
  min-width: 88px;
}

.period-btn.active,
.tab-btn.active {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}

.tab-btn.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
}

.primary-btn {
  color: #00150b;
  background: linear-gradient(180deg, var(--primary-strong), var(--primary));
  border-color: color-mix(in srgb, var(--primary) 82%, #000);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 18%, transparent);
}

.danger-btn {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border-color: color-mix(in srgb, var(--red) 28%, transparent);
}

.ghost-btn {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.theme-toggle {
  min-width: 104px;
}

.icon-btn {
  width: 38px;
  padding: 0;
  color: var(--muted);
}

.chip,
.status-pill {
  min-height: 26px;
  padding: 0 9px;
  font-size: 12px;
  color: var(--muted);
}

.chip.gold {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.chip.green,
.status-pill.active {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 34%, transparent);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.status-pill.inactive {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 34%, transparent);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.grid {
  display: grid;
  gap: 12px;
}

.kpi-grid {
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  margin-bottom: 18px;
}

.kpi-card,
.panel,
.seller-card,
.lead-card,
.list-row,
.notice,
.link-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--panel-glow), var(--shadow-soft);
}

.kpi-card {
  min-height: 82px;
  padding: 15px 16px;
}

.kpi-card p {
  margin: 0 0 8px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.kpi-card strong {
  display: block;
  color: var(--blue);
  font-size: 26px;
  line-height: 1;
}

.kpi-card small {
  color: var(--muted);
}

.kpi-card.green strong {
  color: var(--green);
}

.kpi-card.gold strong {
  color: var(--warning);
}

.kpi-card.red strong {
  color: var(--red);
}

.kpi-card.violet strong {
  color: var(--violet);
}

.kpi-card.cyan strong {
  color: var(--cyan);
}

.content-view {
  min-height: 420px;
}

.content-view > .grid {
  align-content: start;
  gap: var(--space-2);
}

.panel {
  padding: 16px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.panel-header h2,
.panel-header h3,
.seller-card h3,
.link-card h3,
.modal-header h2 {
  margin: 0;
}

.panel-header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.section-toolbar-panel {
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  box-shadow: var(--panel-glow), var(--shadow-soft);
}

.highlight-panel {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--card-bg) 91%, transparent));
}

.two-col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.four-col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.closer-workspace {
  gap: 12px;
}

.closer-hero {
  padding: 14px;
}

.closer-hero .panel-header {
  align-items: flex-start;
  margin-bottom: 10px;
}

.closer-hero-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 150px;
}

.closer-hero-meta small {
  color: var(--muted);
  font-weight: 800;
}

.seller-quote-mini .strategy-quote-strip {
  padding: 9px 11px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.seller-quote-mini .strategy-quote-strip strong {
  font-size: 12px;
}

.seller-quote-mini .strategy-quote-strip small {
  font-size: 10px;
}

.closer-kpi-grid {
  grid-template-columns: repeat(5, minmax(128px, 1fr));
}

.workspace-main-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
}

.priority-panel {
  min-height: 100%;
}

.priority-lead-list {
  display: grid;
  gap: 8px;
}

.priority-lead-list.compact {
  gap: 7px;
}

.priority-lead-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.priority-lead-main {
  min-width: 0;
}

.priority-lead-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.priority-lead-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.priority-lead-row p,
.priority-lead-row small,
.ai-brief-row p,
.ai-brief-row small {
  display: block;
  margin: 4px 0 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.priority-lead-row p,
.ai-brief-row p {
  color: var(--text);
  font-size: 12px;
}

.priority-lead-row small,
.ai-brief-row small {
  font-size: 11px;
  white-space: nowrap;
}

.mini-tags {
  margin-top: 6px;
  gap: 4px;
}

.ai-brief-row {
  align-items: flex-start;
}

.bar-chart {
  min-height: 220px;
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 14px 4px 2px;
}

.bar-item {
  flex: 1;
  min-width: 36px;
  display: grid;
  gap: 8px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.bar {
  min-height: 10px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--green) 75%, transparent), color-mix(in srgb, var(--green) 28%, transparent));
  position: relative;
}

.bar.current {
  background: linear-gradient(180deg, var(--primary-strong), color-mix(in srgb, var(--primary) 72%, transparent));
}

.bar strong {
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  color: var(--text);
}

.progress-list {
  display: grid;
  gap: 14px;
}

.progress-row {
  display: grid;
  gap: 7px;
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-weight: 800;
}

.track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 42%, transparent);
}

.fill {
  height: 100%;
  width: var(--value);
  background: var(--accent, var(--green));
  border-radius: inherit;
}

.seller-card {
  padding: 16px;
  min-height: 158px;
  display: grid;
  gap: 14px;
}

.seller-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
  color: var(--primary);
  font-weight: 900;
  flex: 0 0 auto;
}

.avatar.green {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border-color: color-mix(in srgb, var(--green) 36%, transparent);
  color: var(--green);
}

.avatar.red {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border-color: color-mix(in srgb, var(--red) 36%, transparent);
  color: var(--red);
}

.seller-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.seller-title p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.seller-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mini-stat {
  min-height: 54px;
  border-radius: 8px;
  background: var(--surface-3);
  padding: 10px;
}

.mini-stat strong {
  display: block;
  color: var(--blue);
}

.mini-stat small {
  color: var(--muted);
}

.pipeline-filters {
  margin-bottom: 8px;
  padding: 9px 10px;
}

.pipeline-mode-chip {
  flex: 0 0 auto;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.pipeline-section-chip {
  flex: 0 0 auto;
  min-width: 78px;
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
}

.pipeline-toolbar {
  align-items: center;
  gap: var(--space-2);
}

.pipeline-filters select {
  flex: 0 0 128px;
  min-height: 30px;
}

.pipeline-filters .search-input {
  flex: 1 1 360px;
  min-height: 30px;
}

.pipeline-result-chip {
  flex: 0 0 auto;
  min-width: 98px;
}

.search-input,
input,
select,
textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  padding: 9px 11px;
  outline: none;
}

.search-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--primary) 72%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

button:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.kanban-wrap {
  overflow-x: auto;
  padding-bottom: 8px;
}

.kanban {
  display: grid;
  /* Track count follows the number of visible stages (set inline via --col-count),
     so hiding/adding columns never leaves an empty trailing track. */
  grid-template-columns: repeat(var(--col-count, 6), minmax(168px, 1fr));
  gap: 7px;
  min-width: calc(var(--col-count, 6) * 175px);
  font-size: clamp(11px, 0.68vw, 13px);
}

.stage-column {
  min-width: 0;
  min-height: 500px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--kanban-bg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.stage-column.drag-over {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.stage-head {
  min-height: 46px;
  padding: 8px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent);
}

.stage-head h3 {
  margin: 0;
  max-width: 100%;
  font-size: clamp(11px, 0.72vw, 13px);
  line-height: 1.15;
  color: var(--accent);
}

.stage-head .micro {
  margin-top: 2px;
  font-size: clamp(9px, 0.54vw, 10px);
  line-height: 1.1;
  white-space: nowrap;
}

.stage-count {
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-weight: 900;
  font-size: 11px;
}

.stage-body {
  display: grid;
  gap: 6px;
  padding: 6px;
}

.lead-card {
  padding: 8px;
  border-color: color-mix(in srgb, var(--accent, var(--line)) 34%, var(--line));
  background: var(--lead-bg);
  overflow: hidden;
}

.lead-card:hover {
  border-color: var(--accent);
}

.lead-card h4 {
  margin: 0 0 4px;
  font-size: clamp(12px, 0.72vw, 13px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-card-head {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: space-between;
  min-width: 0;
}

.lead-card-head h4 {
  flex: 1 1 auto;
  margin-bottom: 0;
  min-width: 0;
}

.value-pill {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
  border-radius: 999px;
  color: var(--green);
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  max-width: 76px;
  overflow: hidden;
  padding: 4px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-meta-line.strong {
  color: var(--text);
  font-weight: 800;
}

.lead-message-line {
  border-left: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  margin-top: 5px;
  padding-left: 6px;
}

.lead-card p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(11px, 0.66vw, 12px);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 6px;
  min-width: 0;
}

.tag {
  max-width: 100%;
  overflow: hidden;
  min-height: 18px;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: clamp(10px, 0.58vw, 11px);
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1340px) {
  .kanban {
    min-width: calc(var(--col-count, 6) * 172px);
  }
}

.tag.context {
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 14%, var(--surface-3));
  border: 1px solid color-mix(in srgb, var(--cyan) 32%, transparent);
}

.tag.objection {
  color: var(--violet);
  background: color-mix(in srgb, var(--violet) 10%, transparent);
}

.tag.money {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.tag.blue {
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 9%, transparent);
}

.tag.gold {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.tag.danger {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: middle;
}

.table th {
  color: var(--faint);
  font-size: 12px;
  text-transform: uppercase;
}

.table td {
  color: var(--text);
}

.table tr:hover td {
  background: color-mix(in srgb, var(--surface-3) 60%, transparent);
}

.list-stack {
  display: grid;
  gap: 10px;
}

.list-row {
  min-height: 66px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.list-row strong {
  display: block;
}

.list-row p {
  margin: 4px 0 0;
  color: var(--muted);
}

.notice {
  padding: 16px;
  border-color: color-mix(in srgb, var(--warning) 36%, transparent);
  background: color-mix(in srgb, var(--warning) 7%, transparent);
}

.notice.red {
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
  background: color-mix(in srgb, var(--red) 6%, transparent);
}

.notice.cyan {
  border-color: color-mix(in srgb, var(--cyan) 35%, transparent);
  background: color-mix(in srgb, var(--cyan) 6%, transparent);
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.quality-page,
.followup-page,
.whatsapp-page {
  display: grid;
  gap: 14px;
}

.quality-filters label,
.followup-page label,
.whatsapp-page label {
  min-width: 160px;
}

.whatsapp-hero {
  gap: 10px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.whatsapp-command-center.premium {
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.whatsapp-command-center.premium > * {
  min-width: 0;
}

.whatsapp-command-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 118px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 58%),
    var(--surface);
}

.command-hero-copy h2 {
  margin: 2px 0 4px;
  font-size: clamp(20px, 2vw, 28px);
  text-wrap: balance;
}

.command-hero-copy p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
}

.command-status-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(104px, 1fr));
  gap: 8px;
}

.status-pill {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
}

.status-pill b {
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-pill small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.status-pill.green {
  border-color: color-mix(in srgb, var(--green) 36%, var(--line));
}

.status-pill.gold {
  border-color: color-mix(in srgb, var(--gold) 42%, var(--line));
}

.whatsapp-command-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 8px;
}

.whatsapp-command-strip article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
}

.whatsapp-command-strip strong {
  color: var(--text);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.whatsapp-command-strip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: right;
  text-transform: uppercase;
}

.compact-command-grid {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  margin-bottom: 0;
}

.compact-command-grid .kpi-card {
  min-height: 76px;
  padding: 12px;
}

.compact-command-grid .kpi-card p {
  margin-bottom: 6px;
  line-height: 1.2;
}

.compact-command-grid .kpi-card strong {
  font-size: 24px;
}

.command-actions-panel {
  padding: 12px;
}

.command-action-buttons .primary-btn,
.command-action-buttons .ghost-btn {
  min-height: 34px;
  padding: 8px 12px;
}

.whatsapp-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.whatsapp-hero-stats span {
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.whatsapp-hero-stats strong {
  color: var(--text);
}

.whatsapp-sync-status {
  align-items: center;
  background: color-mix(in srgb, var(--cyan) 9%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--cyan) 24%, var(--line-soft));
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  min-height: 30px;
  padding: 5px 9px;
}

.whatsapp-hero-stats .danger strong {
  color: var(--red);
}

.whatsapp-hero-stats .success strong {
  color: var(--green);
}

.whatsapp-hero-stats .info strong {
  color: var(--cyan);
}

.whatsapp-workspace {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(460px, 1fr) minmax(300px, 360px);
  gap: 8px;
  min-height: min(760px, calc(100vh - 220px));
}

.whatsapp-sidebar,
.whatsapp-chat-panel,
.whatsapp-context-panel {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-soft);
}

.whatsapp-sidebar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
}

.whatsapp-sidebar-tools {
  display: grid;
  gap: 8px;
}

.inbox-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.inbox-segment-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.segment-chip {
  min-width: 0;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 900;
  line-height: 1.1;
}

.segment-chip span {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 11px;
}

.segment-chip:hover,
.segment-chip.active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--text);
}

.filter-chip {
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.filter-chip:hover,
.filter-chip.active {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--text);
}

.whatsapp-sidebar-tools label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.whatsapp-sidebar-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.whatsapp-inbox-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.whatsapp-monitor-layout {
  display: block;
  gap: 8px;
}

.line-monitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.line-monitor-column {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-soft);
  padding: 8px;
}

.conversation-monitor-card,
.whatsapp-monitor-detail {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-soft);
}

.conversation-monitor-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 8px;
}

.conversation-monitor-card.selected {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
}

.conversation-monitor-card.needs-human {
  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
}

.monitor-card-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
}

.monitor-card-head h3 {
  margin: 0;
  font-size: 14px;
}

.monitor-card-head p,
.monitor-card-message {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.monitor-card-message {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-monitor-header {
  display: grid;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.line-monitor-header div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.line-monitor-header strong {
  color: var(--text);
  font-size: 14px;
}

.line-monitor-header p {
  margin: 0;
}

.line-monitor-list {
  display: grid;
  gap: 6px;
}

.empty-line {
  min-height: 84px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-soft);
  border-radius: 10px;
  text-align: center;
}

.bot-intake-pending-list {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

.bot-intake-pending-card {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--yellow) 36%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--yellow) 7%, var(--surface-2));
}

.whatsapp-monitor-detail {
  display: grid;
  gap: 8px;
}

.whatsapp-monitor-detail .whatsapp-chat-panel,
.whatsapp-monitor-detail .whatsapp-context-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.whatsapp-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--surface-2);
  color: inherit;
  text-align: left;
}

.whatsapp-row:hover,
.whatsapp-row.selected {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-2));
}

.whatsapp-row.needs-human {
  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
  background: color-mix(in srgb, var(--red) 5%, var(--surface-2));
}

.whatsapp-row.unlinked,
.whatsapp-row.opportunity {
  border-color: color-mix(in srgb, var(--gold) 32%, var(--line));
}

.wa-avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--green) 32%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  color: var(--green);
  font-size: 12px;
  font-weight: 1000;
}

.wa-avatar.large {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  font-size: 14px;
}

.wa-row-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.whatsapp-main {
  min-width: 0;
}

.whatsapp-main h3 {
  margin: 0 0 2px;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-unread {
  flex: 0 0 auto;
  min-width: 19px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--green);
  color: #04110b;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
}

.whatsapp-main p {
  margin: 0 0 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whatsapp-main small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.wa-row-badges em {
  padding: 3px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.whatsapp-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 72px;
  text-align: right;
}

.whatsapp-meta strong {
  max-width: 92px;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whatsapp-meta span,
.whatsapp-meta em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.whatsapp-meta em {
  color: var(--gold);
}

.whatsapp-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--cyan) 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cyan) 9%, transparent);
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
}

.whatsapp-status.human {
  border-color: color-mix(in srgb, var(--green) 38%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, transparent);
  color: var(--green);
}

.whatsapp-status.handoff,
.whatsapp-status.needs-human {
  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red);
}

.whatsapp-status.unlinked,
.whatsapp-status.opportunity {
  border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  color: var(--gold);
}

.whatsapp-status.archived,
.whatsapp-status.opt-out {
  border-color: color-mix(in srgb, var(--muted) 34%, var(--line));
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  color: var(--muted);
}

.whatsapp-chat-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  overflow: hidden;
}

.whatsapp-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.wa-chat-title {
  flex: 1 1 auto;
  min-width: 0;
}

.wa-chat-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.whatsapp-chat-header h3,
.wa-chat-title-row h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.whatsapp-chat-header p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
}

.whatsapp-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.whatsapp-thread-inline {
  max-height: none;
  min-height: 0;
  padding: 12px 14px;
  overflow: auto;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 84%, transparent), transparent),
    var(--bg-soft);
}

.handoff-decision-card {
  display: grid;
  gap: 8px;
  margin: 8px 12px 0;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--red) 28%, var(--line));
  background: color-mix(in srgb, var(--red) 5%, var(--surface));
}

.handoff-decision-card p {
  margin: 0;
  color: var(--text);
  line-height: 1.4;
}

.mini-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mini-meta-row span {
  display: inline-flex;
  padding: 5px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.whatsapp-bubble {
  display: grid;
  gap: 4px;
  width: fit-content;
  max-width: min(72%, 600px);
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: none;
}

.whatsapp-bubble + .whatsapp-bubble {
  margin-top: 2px;
}

.whatsapp-bubble p {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}

.whatsapp-bubble small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.whatsapp-bubble.inbound {
  justify-self: start;
  border-bottom-left-radius: 4px;
  border-color: color-mix(in srgb, var(--cyan) 34%, var(--line));
}

.whatsapp-bubble.outbound {
  justify-self: end;
  border-bottom-right-radius: 4px;
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
}

.whatsapp-bubble.system {
  justify-self: center;
  max-width: 82%;
  border-style: dashed;
  background: color-mix(in srgb, var(--surface) 54%, transparent);
  opacity: .72;
  padding: 5px 8px;
}

.whatsapp-bubble.failed {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}

.whatsapp-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 8px 10px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}

.whatsapp-composer textarea {
  min-height: 48px;
  max-height: 88px;
  resize: vertical;
}

.whatsapp-send-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  align-self: end;
  min-width: 0;
}

.whatsapp-send-actions select {
  width: auto;
  min-width: 120px;
  max-width: 180px;
}

.whatsapp-send-actions .primary-btn,
.whatsapp-send-actions .ghost-btn {
  width: auto;
  min-height: 36px;
  padding: 8px 13px;
  white-space: nowrap;
}

.form-status {
  min-height: 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.form-status[data-status="loading"] {
  color: var(--cyan);
}

.form-status[data-status="success"] {
  color: var(--green);
}

.form-status[data-status="error"] {
  color: var(--red);
}

.whatsapp-helper {
  margin: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--cyan) 7%, var(--surface));
  color: var(--muted);
  font-weight: 800;
}

.whatsapp-template-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 160px) auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--gold) 6%, var(--surface));
}

.wa-activity-rail {
  margin: 0;
  border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}

.wa-activity-rail summary {
  cursor: pointer;
  padding: 7px 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.wa-activity-rail summary span {
  margin-left: 6px;
  color: var(--gold);
}

.wa-activity-rail > div {
  display: grid;
  gap: 6px;
  padding: 0 12px 10px;
}

.wa-activity-rail article {
  padding: 7px 8px;
  border: 1px dashed var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.wa-activity-rail strong,
.wa-activity-rail p {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-activity-rail strong {
  color: var(--text);
  font-size: 11px;
}

.wa-activity-rail p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.whatsapp-template-inline strong {
  color: var(--text);
}

.whatsapp-template-inline p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.compact-whatsapp-form {
  gap: 10px;
  padding: 12px;
}

.compact-whatsapp-form textarea {
  min-height: 80px;
  max-height: 120px;
}

.whatsapp-context-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  overflow: auto;
}

.context-lead-card {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.context-lead-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.context-lead-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.context-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.context-mini-grid span,
.whatsapp-context-block {
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
}

.inbox-only-actions {
  border-color: color-mix(in srgb, var(--gold) 34%, var(--line));
  background: color-mix(in srgb, var(--gold) 5%, var(--surface-2));
}

.wa-action-form {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.wa-action-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.wa-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.context-mini-grid strong {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.whatsapp-context-panel .handoff-decision-card {
  margin: 0;
}

.whatsapp-context-block h4 {
  margin: 0 0 8px;
  color: var(--text);
}

.whatsapp-context-block p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.context-answer-list.compact {
  grid-template-columns: 1fr;
  margin-top: 10px;
}

.context-answer-list.compact article {
  padding: 9px;
}

.quality-kpis {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.quality-table {
  min-width: 1180px;
}

.quality-table th,
.quality-table td {
  font-size: 12px;
}

.mini-actions,
.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ghost-btn.slim,
.primary-btn.slim {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.compact-list {
  display: grid;
  gap: 10px;
}

.compact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.compact-row p,
.compact-row small {
  display: block;
  margin: 4px 0 0;
  color: var(--muted);
}

.quality-score {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.quality-score.alta {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 42%, transparent);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.quality-score.media {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 42%, transparent);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.quality-score.baja {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 42%, transparent);
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

.followup-groups,
.alert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.followup-group {
  align-content: start;
}

.followup-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--cyan) 5%, var(--surface));
}

.alert-column {
  display: grid;
  align-content: start;
  gap: 10px;
}

.alert-column h3 {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
}

.alert-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.alert-card p {
  margin: 0;
  color: var(--muted);
}

.alert-card.critical {
  border-color: color-mix(in srgb, var(--red) 36%, var(--line));
}

.alert-card.high {
  border-color: color-mix(in srgb, var(--red) 36%, var(--line));
  background: color-mix(in srgb, var(--red) 5%, var(--surface-2));
}

.alert-card.attention {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
}

.alert-card.medium {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
}

.alert-card.recommendation {
  border-color: color-mix(in srgb, var(--cyan) 36%, var(--line));
}

.alert-card.low {
  border-color: color-mix(in srgb, var(--cyan) 36%, var(--line));
}

.priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 900;
}

.priority-badge.high {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

.priority-badge.medium {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
  background: color-mix(in srgb, var(--warning) 8%, transparent);
}

.priority-badge.low {
  color: var(--cyan);
  border-color: color-mix(in srgb, var(--cyan) 42%, var(--line));
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}

.compact-notice {
  padding: 12px;
}

.timeline-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.timeline-item > span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 14%, transparent);
}

.timeline-item p {
  margin: 4px 0 0;
  color: var(--muted);
}

.links-grid {
  display: grid;
  gap: 12px;
}

.link-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-color: color-mix(in srgb, var(--provider-color, var(--blue)) 56%, var(--line));
}

.link-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.price {
  color: var(--green);
  font-size: 24px;
  font-weight: 900;
}

.copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.copy-box {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 5%, var(--surface));
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.compact-copy-row .copy-box {
  min-height: 38px;
  display: grid;
  align-items: center;
  gap: 2px;
  font-size: 12px;
}

.compact-copy-row .copy-box span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
}

.sales-kit-view,
.training-admin-view {
  align-content: start;
}

.sales-kit-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
}

.sales-kit-hero h2 {
  margin: 2px 0 4px;
}

.training-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.training-tab {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 850;
  cursor: pointer;
}

.training-tab.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}

.training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.training-card,
.training-list-item {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.training-card-head,
.training-list-row,
.training-row-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.training-card-head h3 {
  margin: 6px 0 4px;
}

.training-card-head p,
.training-card p,
.training-mini-section p,
.training-list-item p {
  margin: 0;
  color: var(--muted);
}

.training-card-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
  white-space: nowrap;
}

.training-mini-section {
  display: grid;
  gap: 8px;
}

.soft-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.training-list-row > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.training-list-row p,
.training-list-row small {
  margin: 0;
  color: var(--muted);
}

.training-row-actions {
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.training-form textarea {
  min-height: 92px;
}

.training-modal {
  max-width: 980px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.checkbox-grid legend {
  padding: 0 6px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.compact-check {
  min-height: 34px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.split-card {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.split-card strong,
.split-card small {
  display: block;
}

.split-card small {
  margin-top: 4px;
  color: var(--muted);
}

.split-input,
.dist-split input {
  text-align: center;
  color: var(--primary);
  font-weight: 900;
}

.pill-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.pill-check {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 900;
}

.pill-check:has(input:checked),
.pill-check.selected {
  border-color: var(--blue);
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}

.pill-check input {
  width: auto;
  min-height: auto;
}

.compact-row {
  min-height: 58px;
}

.distribution-list {
  display: grid;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
}

.distribution-view {
  gap: 14px;
}

.distribution-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 24rem),
    var(--card-bg);
}

.distribution-hero h2 {
  margin: 4px 0 5px;
  font-size: 24px;
}

.distribution-hero p {
  margin: 0;
  color: var(--muted);
}

.distribution-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.distribution-kpis {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
}

.assignment-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mode-card {
  min-height: 108px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-3) 44%, transparent);
  color: var(--muted);
}

.mode-card span {
  font-size: 21px;
}

.mode-card strong {
  color: var(--text);
}

.mode-card p {
  margin: 0;
  font-size: 13px;
}

.mode-card.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
}

.distribution-admin-panel {
  padding: 14px;
}

.distribution-table-wrap,
.rules-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.distribution-table,
.rules-table {
  width: 100%;
  border-collapse: collapse;
}

.distribution-table th,
.distribution-table td,
.rules-table th,
.rules-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: middle;
}

.distribution-table th,
.rules-table th {
  color: var(--faint);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.distribution-table td {
  min-width: 92px;
}

.distribution-table td:first-child {
  min-width: 230px;
}

.distribution-row.paused {
  background: color-mix(in srgb, var(--warning) 5%, transparent);
}

.distribution-row.inactive {
  background: color-mix(in srgb, var(--red) 4%, transparent);
  opacity: 0.86;
}

.status-segment,
.weight-segment,
.compact-toggle-row,
.row-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.dist-mini,
.account-toggle {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
}

.dist-mini {
  min-width: 36px;
  padding: 0 7px;
}

.dist-mini.active,
.account-toggle.active {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.dist-mini.active.paused,
.dist-mini.active.gold {
  color: var(--warning);
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.dist-mini.active.inactive {
  color: var(--red);
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.compact-number {
  width: 78px;
  min-height: 32px;
  padding: 6px 8px;
  text-align: center;
  font-weight: 900;
}

.split-number {
  width: 70px;
  color: var(--warning);
}

.icon-action {
  width: 34px;
  min-height: 32px;
  padding: 0;
}

.performance-cell {
  display: grid;
  gap: 3px;
  white-space: nowrap;
}

.performance-cell small {
  font-size: 11px;
}

.dist-help-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.dist-help-grid p {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-3) 48%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.campaign-rules-panel {
  padding: 14px;
}

.campaign-rule-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.5fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.compact-pills {
  margin: 0;
  gap: 6px;
}

.compact-pills .pill-check {
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
}

.campaign-rule-action {
  display: flex;
  justify-content: flex-end;
}

.blue-text {
  color: var(--blue) !important;
}

.red-text {
  color: var(--red) !important;
}

.distribution-card {
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.distribution-card.paused {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}

.distribution-card.inactive {
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
  opacity: 0.88;
}

.dist-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.dist-status-dot {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--green) 40%, transparent);
  background: radial-gradient(circle, var(--green) 0 28%, color-mix(in srgb, var(--green) 16%, transparent) 31% 100%);
  flex: 0 0 auto;
}

.dist-status-dot.paused {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  background: radial-gradient(circle, var(--warning) 0 28%, color-mix(in srgb, var(--warning) 13%, transparent) 31% 100%);
}

.dist-status-dot.inactive {
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
  background: radial-gradient(circle, var(--red) 0 28%, color-mix(in srgb, var(--red) 13%, transparent) 31% 100%);
}

.dist-metrics {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0 18px;
  text-align: right;
}

.dist-metrics strong {
  color: var(--blue);
  font-size: 24px;
}

.dist-metrics span {
  color: var(--muted);
}

.green-text {
  color: var(--green) !important;
}

.gold-text {
  color: var(--warning) !important;
}

.dist-toggle-row,
.dist-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dist-toggle {
  min-width: 170px;
  min-height: 54px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 950;
  font-size: 17px;
}

.dist-toggle.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
}

.dist-warning {
  margin: 10px 0 0;
  color: var(--orange);
  font-weight: 800;
}

.dist-controls {
  margin-top: 18px;
}

.dist-controls > div {
  min-width: 310px;
  flex: 1;
}

.dist-small {
  min-width: 92px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 900;
}

.dist-small.active {
  color: var(--green);
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.dist-small.active.gold {
  color: var(--warning);
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.dist-split {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 10px 12px;
  border: 1px solid var(--violet);
  border-radius: 8px;
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  color: var(--violet);
  font-weight: 950;
}

.lead-share-input {
  border-color: color-mix(in srgb, var(--cyan) 64%, transparent);
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
  color: var(--cyan);
}

.dist-performance {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 850;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.check-row {
  display: flex !important;
  align-items: center;
  grid-template-columns: none !important;
  flex-direction: row;
  text-transform: none !important;
}

.check-row input {
  width: auto;
  min-height: auto;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--overlay);
  backdrop-filter: blur(6px);
}

.modal-card {
  width: min(780px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

.modal-header,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-header {
  margin-bottom: 18px;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.modal-actions {
  justify-content: flex-end;
}

.whatsapp-modal {
  width: min(880px, 100%);
}

.whatsapp-modal-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--muted);
  font-weight: 800;
}

.whatsapp-thread {
  display: grid;
  gap: 10px;
  max-height: 48vh;
  overflow: auto;
  padding-right: 4px;
}

.whatsapp-message {
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.whatsapp-message.inbound {
  border-color: color-mix(in srgb, var(--cyan) 35%, var(--line));
  background: color-mix(in srgb, var(--cyan) 6%, var(--surface-2));
}

.whatsapp-message.system {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
}

.whatsapp-message strong {
  color: var(--text);
  font-size: 12px;
}

.whatsapp-message p {
  margin: 6px 0;
  color: var(--text);
}

.whatsapp-message small {
  color: var(--muted);
}

.whatsapp-lead-context,
.whatsapp-reply-box,
.lead-context-card {
  border: 1px solid color-mix(in srgb, var(--cyan) 26%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--cyan) 5%, var(--card-bg));
  padding: 14px;
}

.whatsapp-lead-context {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.whatsapp-lead-context p,
.whatsapp-lead-context ul {
  margin: 0;
  color: var(--text);
}

.whatsapp-lead-context ul {
  display: grid;
  gap: 5px;
  padding-left: 18px;
}

.whatsapp-lead-context li span {
  color: var(--cyan);
  font-weight: 900;
}

.whatsapp-reply-box {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.whatsapp-reply-box label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lead-drawer {
  width: min(1360px, calc(100vw - 24px));
  max-height: calc(100vh - 34px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.lead-detail-form {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.lead-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.lead-drawer-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.lead-title-input {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 30px;
  font-weight: 950;
}

.lead-title-input:focus {
  box-shadow: none;
  border: 0;
}

.danger-icon {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 34%, transparent);
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

.lead-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.lead-metric {
  min-width: 126px;
  min-height: 60px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--cyan) 42%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cyan) 9%, transparent);
}

.lead-metric strong {
  color: var(--blue);
  font-size: 26px;
}

.lead-metric small {
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
}

.lead-metric.green {
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
  background: color-mix(in srgb, var(--green) 8%, transparent);
}

.lead-metric.green strong {
  color: var(--green);
}

.lead-info-panel,
.commercial-card,
.tracking-card,
.stage-picker,
.lead-context-card,
.bot-decision-card,
.lead-profile,
.context-mini-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 16px;
}

.lead-profile {
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 72%, var(--card-bg));
}

.lead-profile-grid {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(420px, 1.55fr) minmax(270px, .95fr);
  gap: 10px;
  align-items: start;
}

.lead-profile-summary,
.lead-profile-main,
.lead-profile-side {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.lead-profile-summary .context-mini-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lead-profile-summary .context-mini-grid span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-profile-main {
  align-content: start;
}

.lead-score-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 7%, var(--card-bg));
}

.lead-score-card strong {
  color: var(--primary);
  font-size: 28px;
  line-height: 1;
}

.lead-score-card small,
.context-mini-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.context-mini-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-color: var(--line-soft);
}

.context-mini-card.flat {
  background: var(--surface);
}

.context-mini-card h3,
.lead-profile-section h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
}

.context-mini-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.lead-profile-section .panel-header {
  margin: 0;
}

.lead-profile-timeline {
  gap: 6px;
  max-height: 420px;
  overflow: auto;
  padding-right: 2px;
}

.timeline-item.compact {
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
}

.timeline-item.compact strong {
  font-size: 12px;
}

.timeline-item.compact p,
.timeline-item.compact small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
}

.mini-chat-preview {
  display: grid;
  gap: 7px;
  max-height: 310px;
  overflow: auto;
  padding-right: 2px;
}

.mini-chat-preview .whatsapp-bubble {
  max-width: 86%;
  padding: 8px 10px;
}

.lead-note-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0;
}

.lead-task-form,
.lead-profile-template {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(135px, .8fr) minmax(90px, .55fr) auto;
  gap: 7px;
  align-items: center;
}

.lead-profile-template {
  grid-template-columns: minmax(0, 1fr) auto;
}

.custom-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.custom-fields-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.custom-fields-grid input,
.custom-fields-grid select,
.custom-fields-grid textarea {
  width: 100%;
  min-width: 0;
  font-size: 12px;
  text-transform: none;
}

.custom-fields-grid .boolean-field {
  align-content: center;
}

.custom-field-check {
  text-transform: none;
}

.custom-field-tag {
  background: color-mix(in srgb, var(--cyan) 11%, var(--card-bg));
  border-color: color-mix(in srgb, var(--cyan) 40%, var(--line));
  color: var(--text);
  max-width: 100%;
}

.custom-fields-admin code {
  color: var(--primary);
  font-size: 11px;
}

.lead-task-item,
.profile-note-item,
.profile-action-card,
.profile-product-card {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface);
}

.lead-task-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.profile-note-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.lead-task-item.done {
  opacity: .72;
}

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.bot-decision-card {
  display: grid;
  gap: 12px;
  border-color: color-mix(in srgb, var(--red) 26%, var(--line));
  background: color-mix(in srgb, var(--red) 4%, var(--card-bg));
}

.bot-decision-card .panel-header {
  margin-bottom: 0;
}

.bot-decision-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.ai-qualification-card {
  border-color: color-mix(in srgb, var(--cyan) 26%, var(--line));
  background: color-mix(in srgb, var(--cyan) 4%, var(--card-bg));
}

.ai-error {
  color: var(--red) !important;
}

.bot-decision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.bot-decision-grid span {
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 800;
}

.bot-decision-grid strong {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.lead-context-card {
  display: grid;
  gap: 12px;
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--line));
}

.context-summary {
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px;
  font-weight: 700;
}

.context-summary.inbound {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
}

.context-source-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.context-source-grid span,
.context-answer-list article {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px;
  color: var(--muted);
}

.context-source-grid strong,
.context-answer-list strong {
  display: block;
  color: var(--cyan);
  font-size: 12px;
  margin-bottom: 5px;
}

.context-answer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.context-answer-list p {
  margin: 0;
  color: var(--text);
}

.lead-info-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.lead-info-panel label,
.commercial-card label,
.tracking-card label,
.seller-modal label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.commercial-card {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
}

.commercial-card h3,
.tracking-card h3,
.stage-picker h3,
.lead-context-card h3 {
  margin: 0 0 12px;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0;
}

.field-label {
  margin: 16px 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.offer-grid,
.stage-option-grid,
.payment-grid,
.contact-grid {
  display: grid;
  gap: 10px;
}

.offer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.offer-card,
.payment-option,
.stage-option,
.contact-btn {
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 12px;
  text-align: center;
  font-weight: 900;
}

.offer-card span {
  font-size: 24px;
}

.offer-card small {
  color: var(--muted);
}

.offer-card.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent);
}

.form-grid.compact {
  margin-top: 14px;
}

.big-check {
  min-height: 58px;
  margin-top: 12px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 8%, transparent);
  color: var(--green) !important;
  display: flex !important;
  align-items: center;
  grid-template-columns: none !important;
  flex-direction: row;
  text-transform: none !important;
  font-size: 18px !important;
}

.big-check input {
  width: auto;
  min-height: auto;
}

.payment-grid,
.contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.payment-option.active {
  color: var(--green);
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 11%, transparent);
}

.history-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.history-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-3);
}

.history-item > span {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.history-item strong {
  display: block;
}

.history-item p {
  margin: 5px 0 0;
  color: var(--muted);
}

.note-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  gap: 12px;
  margin: 8px 0 14px;
}

.contact-btn {
  min-height: 58px;
  text-decoration: none;
  font-size: 20px;
}

.contact-btn.whatsapp {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 42%, transparent);
  background: color-mix(in srgb, var(--green) 8%, transparent);
}

.contact-btn.email {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--cyan) 42%, transparent);
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}

.stage-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stage-option {
  color: var(--muted);
}

.stage-option.active {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.stage-option small {
  display: block;
  color: var(--green);
}

.drawer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.drawer-actions .primary-btn {
  min-width: 220px;
}

.empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-3) 50%, transparent);
  font-size: 13px;
}

.empty strong {
  color: var(--text);
}

.empty p {
  max-width: 460px;
  margin: 0;
}

.empty-actions {
  margin-top: 8px;
}

.meta-grid {
  grid-template-columns: 1fr 1fr;
}

.code-box {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  overflow-x: auto;
}

.checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.check-step {
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.check-step strong {
  display: block;
  margin-bottom: 8px;
}

.check-step p {
  margin: 0;
  color: var(--muted);
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 150;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--green) 32%, transparent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--green);
  box-shadow: var(--shadow);
}

/* Compact CRM density layer */
body {
  font-size: var(--font-md);
  line-height: 1.35;
}

.main {
  padding: 10px clamp(8px, 1vw, 16px) 24px;
}

.topbar {
  min-height: 52px;
  gap: var(--space-4);
  padding: 8px 14px;
}

.brand {
  gap: var(--space-3);
  min-width: 220px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  font-size: 18px;
}

.logo-mark {
  position: relative;
  overflow: hidden;
}

.logo-mark span {
  position: relative;
  z-index: 0;
}

.logo-mark img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  background: var(--surface);
}

.brand h1 {
  font-size: var(--font-lg);
}

.brand p {
  font-size: var(--font-sm);
  line-height: 1.15;
}

.top-actions {
  gap: var(--space-2);
}

.top-actions select {
  width: 178px;
  min-height: var(--button-height-compact);
}

.period-row {
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.period-head,
.period-buttons,
.custom-period,
.period-row,
.tab-row,
.toolbar-row,
.segmented {
  gap: var(--space-2);
}

.custom-period {
  padding-left: var(--space-2);
}

.custom-period label {
  width: 128px;
  font-size: var(--font-xs);
}

.period-label,
.period-summary,
.panel-header p,
.kpi-card p,
.kpi-card small,
.muted,
.micro {
  font-size: var(--font-sm);
}

.nav-shell {
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.main-nav {
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.subtab-row {
  gap: var(--space-2);
  padding: 0;
}

.main-nav-btn,
.subtab-btn {
  min-height: var(--button-height-compact);
  gap: var(--space-2);
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.main-nav-btn.active {
  box-shadow: 0 5px 14px color-mix(in srgb, var(--primary) 12%, transparent);
}

.subtab-btn {
  min-height: 28px;
  padding: 0 9px;
}

.btn,
.tab-btn,
.period-btn,
.ghost-btn,
.primary-btn,
.danger-btn,
.icon-btn,
.chip,
.status-pill {
  min-height: var(--button-height-compact);
  gap: var(--space-2);
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.period-btn,
.tab-btn {
  min-width: 72px;
}

.icon-btn {
  width: var(--button-height-compact);
  min-width: var(--button-height-compact);
}

.chip,
.status-pill,
.soft-tag,
.tag,
.whatsapp-status,
.mini-badge,
.status-badge {
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: var(--font-xs);
  line-height: 1.2;
}

.theme-toggle {
  min-width: 88px;
}

.grid,
.dashboard-grid.two,
.training-grid,
.context-mini-grid,
.bot-decision-grid,
.context-answer-list,
.context-source-grid,
.offer-grid,
.stage-option-grid,
.payment-grid,
.contact-grid,
.checklist-grid {
  gap: var(--space-3);
}

.kpi-grid {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.kpi-card {
  min-height: 66px;
  padding: var(--card-padding-compact);
}

.kpi-card p {
  margin-bottom: var(--space-2);
  letter-spacing: 0;
}

.kpi-card strong {
  font-size: 23px;
}

.panel,
.panel.nested,
.seller-card,
.link-card,
.training-card,
.training-list-item,
.list-row,
.notice,
.lead-info-panel,
.commercial-card,
.tracking-card,
.stage-picker,
.lead-context-card,
.bot-decision-card,
.followup-card,
.alert-card,
.distribution-card,
.split-card,
.mode-card {
  padding: var(--card-padding-compact);
  border-radius: var(--radius-md);
}

.panel-header {
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.panel-header h2,
.modal-header h2 {
  font-size: 18px;
  line-height: 1.15;
}

.panel-header h3,
.seller-card h3,
.link-card h3,
.training-card-head h3,
.commercial-card h3,
.tracking-card h3,
.stage-picker h3,
.lead-context-card h3 {
  font-size: var(--font-lg);
  line-height: 1.15;
}

.search-input,
input,
select,
textarea {
  min-height: 32px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
}

textarea {
  min-height: 76px;
}

.pipeline-filters {
  margin-bottom: var(--space-2);
}

.pipeline-filters select {
  flex-basis: 128px;
}

.pipeline-filters .search-input {
  flex-basis: 360px;
}

.kanban-wrap {
  padding-bottom: var(--space-2);
}

.kanban {
  gap: var(--space-2);
  font-size: 12px;
}

.stage-column {
  min-height: 430px;
  border-radius: var(--radius-md);
}

.stage-head {
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
}

.stage-head h3 {
  font-size: 12px;
}

.stage-head .micro {
  font-size: var(--font-xs);
}

.stage-count {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  font-size: var(--font-xs);
}

.stage-body {
  gap: var(--space-2);
  padding: var(--space-2);
}

.lead-card {
  padding: 7px;
  border-radius: var(--radius-sm);
}

.lead-card h4 {
  margin-bottom: 3px;
  font-size: 12px;
}

.lead-card p {
  font-size: 11px;
  line-height: 1.18;
}

.lead-tags {
  gap: 3px;
  margin-top: var(--space-2);
}

.tag {
  min-height: 17px;
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 10px;
}

.empty {
  gap: var(--space-1);
  padding: var(--space-3);
  font-size: var(--font-sm);
}

.list-row,
.training-card,
.training-list-item {
  gap: var(--space-3);
}

.training-card-head,
.training-list-row,
.training-row-actions {
  gap: var(--space-3);
}

.training-card-head h3 {
  margin: 2px 0;
}

.training-card-meta,
.training-mini-section {
  gap: var(--space-2);
}

.whatsapp-page {
  gap: var(--space-3);
}

.quality-filters label,
.followup-page label,
.whatsapp-page label {
  min-width: 132px;
}

.whatsapp-hero-stats {
  gap: var(--space-2);
}

.whatsapp-hero-stats span {
  padding: 5px 8px;
  font-size: var(--font-xs);
}

.whatsapp-workspace {
  grid-template-columns: minmax(240px, 320px) minmax(360px, 1fr) minmax(250px, 330px);
  gap: var(--space-3);
  min-height: 610px;
}

.whatsapp-sidebar,
.whatsapp-chat-panel,
.whatsapp-context-panel {
  border-radius: var(--radius-md);
}

.whatsapp-sidebar {
  gap: var(--space-2);
  padding: var(--space-3);
}

.whatsapp-sidebar-tools,
.whatsapp-inbox-list {
  gap: var(--space-2);
}

.whatsapp-sidebar-tools label {
  gap: var(--space-1);
  font-size: var(--font-xs);
}

.whatsapp-row {
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.whatsapp-main h3 {
  margin: 4px 0 2px;
  font-size: 13px;
}

.whatsapp-main p,
.whatsapp-main small,
.whatsapp-sidebar-count,
.whatsapp-template-inline p,
.form-status {
  font-size: var(--font-sm);
}

.whatsapp-meta {
  min-width: 62px;
  gap: 3px;
}

.whatsapp-meta strong,
.whatsapp-meta span,
.whatsapp-meta em {
  font-size: var(--font-xs);
}

.whatsapp-row .mini-badge,
.whatsapp-action-row .mini-badge {
  align-self: center;
  padding: 4px 7px;
}

.whatsapp-chat-header {
  gap: var(--space-3);
  padding: var(--space-3);
}

.whatsapp-chat-header h3 {
  margin: 4px 0 2px;
  font-size: var(--font-lg);
}

.whatsapp-chat-header p {
  font-size: var(--font-sm);
}

.whatsapp-action-row {
  gap: var(--space-2);
}

.whatsapp-thread-inline {
  padding: var(--space-4);
}

.handoff-decision-card {
  gap: var(--space-2);
  margin: var(--space-3) var(--space-3) 0;
}

.whatsapp-bubble {
  gap: var(--space-1);
  max-width: min(78%, 560px);
  padding: 8px 10px;
  border-radius: 10px;
}

.whatsapp-bubble p {
  line-height: 1.35;
}

.whatsapp-bubble small {
  font-size: var(--font-xs);
}

.whatsapp-composer {
  gap: var(--space-2);
  padding: var(--space-3);
}

.whatsapp-composer textarea,
.compact-whatsapp-form textarea {
  min-height: 62px;
  max-height: 100px;
}

.whatsapp-send-actions {
  gap: var(--space-2);
}

.whatsapp-send-actions select {
  min-height: var(--button-height-compact);
  font-size: var(--font-sm);
}

.whatsapp-send-actions .primary-btn,
.whatsapp-send-actions .ghost-btn {
  min-height: var(--button-height-compact);
  padding: 0 10px;
}

.whatsapp-helper,
.whatsapp-template-inline,
.compact-whatsapp-form,
.whatsapp-context-panel,
.context-lead-card,
.context-mini-grid span,
.whatsapp-context-block {
  padding: var(--card-padding-compact);
}

.whatsapp-helper {
  margin: var(--space-3);
}

.whatsapp-template-inline {
  grid-template-columns: minmax(0, 1fr) minmax(110px, 140px) auto auto;
  gap: var(--space-2);
}

.whatsapp-context-panel {
  gap: var(--space-3);
}

.context-lead-card {
  gap: var(--space-2);
}

.context-lead-card h3 {
  font-size: var(--font-lg);
}

.context-lead-card p {
  font-size: var(--font-sm);
}

.whatsapp-context-block h4 {
  margin-bottom: var(--space-2);
  font-size: var(--font-md);
}

.modal-backdrop {
  padding: var(--space-4);
}

.modal-card {
  max-height: calc(100vh - 24px);
  padding: var(--space-4);
}

.modal-header {
  margin-bottom: var(--space-4);
}

.lead-detail-form {
  gap: var(--space-4);
  padding: 16px;
}

.lead-drawer-head {
  gap: var(--space-3);
}

.lead-title-input {
  min-height: 36px;
  font-size: 24px;
}

.lead-badges {
  gap: var(--space-2);
}

.lead-metric {
  min-width: 92px;
  min-height: 46px;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
}

.lead-metric strong {
  font-size: 21px;
}

.lead-metric small {
  font-size: var(--font-xs);
}

.bot-decision-card,
.lead-context-card {
  gap: var(--space-3);
}

.bot-decision-grid span,
.context-summary,
.context-source-grid span,
.context-answer-list article {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
}

.lead-info-panel {
  gap: var(--space-3);
}

.lead-info-panel label,
.commercial-card label,
.tracking-card label,
.seller-modal label,
.whatsapp-reply-box label {
  gap: var(--space-1);
  font-size: var(--font-xs);
}

.field-label {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-xs);
}

.offer-card,
.payment-option,
.stage-option,
.contact-btn,
.check-step {
  min-height: 54px;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
}

.offer-card span {
  font-size: 18px;
}

.contact-btn {
  font-size: 15px;
}

.drawer-actions {
  gap: var(--space-2);
}

.drawer-actions .primary-btn {
  min-width: 170px;
}

.code-box,
.debug-box {
  padding: var(--space-3);
  font-size: var(--font-sm);
}

.toast {
  right: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

/* Visual QA polish for compact mode */
.topbar,
.top-actions,
.main-nav,
.subtab-row,
.period-row,
.toolbar-row {
  min-width: 0;
}

.top-actions > *,
.drawer-actions > *,
.mini-actions > *,
.row-actions > *,
.whatsapp-action-row > * {
  flex: 0 1 auto;
}

.top-actions .primary-btn,
.top-actions .ghost-btn,
.top-actions .danger-btn,
.top-actions .btn,
.top-actions .chip,
.main-nav-btn,
.subtab-btn,
.period-btn,
.tab-btn {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-actions select,
.pipeline-filters select,
.whatsapp-sidebar-tools select {
  max-width: 100%;
}

.brand > div,
.panel-header > div,
.seller-title,
.training-card-head > div,
.training-list-row > div,
.link-card-head > div,
.compact-row > div,
.list-row > div,
.whatsapp-chat-header > div,
.context-lead-card,
.stage-head > div {
  min-width: 0;
}

.brand h1,
.brand p,
.panel-header h2,
.panel-header h3,
.training-card-head h3,
.training-card-head p,
.training-list-row strong,
.training-list-row p,
.training-list-row small,
.link-card h3,
.link-card p,
.compact-row strong,
.compact-row p,
.list-row strong,
.list-row p,
.seller-title h3,
.seller-title p,
.context-lead-card h3,
.context-lead-card p {
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand h1,
.brand p,
.training-card-head h3,
.link-card h3,
.seller-title h3,
.context-lead-card h3 {
  white-space: nowrap;
}

.panel-header {
  align-items: flex-start;
}

.panel-header .toolbar-row,
.panel-header .row-actions,
.panel-header .mini-actions {
  justify-content: flex-end;
}

.table-wrap,
.quality-table,
.distribution-table-wrap,
.rules-table-wrap {
  max-width: 100%;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td,
.quality-table th,
.quality-table td,
.distribution-table th,
.distribution-table td,
.rules-table th,
.rules-table td {
  padding: 7px 8px;
  line-height: 1.25;
  vertical-align: top;
}

.table th,
.quality-table th,
.distribution-table th,
.rules-table th {
  font-size: var(--font-xs);
  letter-spacing: 0;
}

.table td,
.quality-table td,
.distribution-table td,
.rules-table td {
  font-size: var(--font-sm);
}

.table td,
.quality-table td {
  max-width: 260px;
  overflow-wrap: anywhere;
}

.quality-table {
  min-width: 1040px;
}

.compact-row {
  min-height: 48px;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
}

.timeline-item {
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: var(--space-3);
}

.timeline-item > span {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.priority-badge,
.quality-score {
  min-height: 22px;
  padding: 3px 7px;
  font-size: var(--font-xs);
}

.whatsapp-bubble.failed {
  border-color: color-mix(in srgb, var(--red) 55%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
}

.whatsapp-row {
  align-items: start;
}

.whatsapp-status {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whatsapp-template-inline select {
  min-width: 0;
}

.whatsapp-template-inline .ghost-btn,
.whatsapp-template-inline .primary-btn {
  white-space: nowrap;
}

.whatsapp-context-block p,
.handoff-decision-card p,
.bot-decision-card p,
.context-summary,
.context-answer-list p {
  overflow-wrap: anywhere;
}

.mini-meta-row {
  gap: var(--space-2);
}

.mini-meta-row span {
  min-width: 0;
  max-width: 100%;
}

.form-grid label,
.lead-info-panel label,
.commercial-card label,
.tracking-card label,
.whatsapp-page label,
.followup-page label,
.quality-filters label {
  min-width: 0;
}

.form-grid.compact {
  gap: var(--space-3);
}

.debug-box,
.code-box {
  max-width: 100%;
  overflow: auto;
}

.dist-toggle {
  min-width: 130px;
  min-height: 42px;
  font-size: var(--font-md);
}

.dist-status-dot {
  width: 42px;
  height: 42px;
  border-width: 3px;
}

.dist-metrics {
  gap: 0 var(--space-4);
}

.dist-metrics strong {
  font-size: 20px;
}

.dist-controls {
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.dist-controls > div {
  min-width: min(260px, 100%);
}

.dist-split {
  min-height: 44px;
  margin-top: var(--space-4);
  padding: var(--space-3);
}

.distribution-card {
  padding: var(--card-padding-compact);
}

.campaign-rule-grid {
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1.3fr) auto;
  gap: var(--space-3);
}

.auth-card {
  padding: 28px 32px;
}

.auth-mark {
  width: 92px;
  height: 92px;
  border-radius: 18px;
  font-size: 30px;
}

.auth-logo strong {
  font-size: 21px;
}

.auth-form {
  gap: var(--space-4);
}

:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .lead-card,
:root[data-theme="dark"] .whatsapp-sidebar,
:root[data-theme="dark"] .whatsapp-chat-panel,
:root[data-theme="dark"] .whatsapp-context-panel,
:root[data-theme="dark"] .training-card,
:root[data-theme="dark"] .training-list-item {
  border-color: color-mix(in srgb, var(--line) 78%, #ffffff 8%);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: color-mix(in srgb, var(--input-bg) 82%, #ffffff 4%);
}

/* Premium SaaS polish layer */
.compact-chrome .period-shell {
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.compact-chrome .period-row {
  align-items: center;
  padding: 6px var(--space-3);
}

.compact-chrome .period-head {
  flex: 0 1 auto;
  min-width: 220px;
}

.compact-chrome .period-label {
  display: none;
}

.compact-chrome .period-summary {
  font-size: var(--font-xs);
}

.compact-chrome .period-buttons .period-btn {
  min-height: 26px;
  min-width: auto;
  padding: 0 8px;
  font-size: var(--font-xs);
}

.compact-chrome .custom-period label {
  width: 116px;
}

.compact-chrome .nav-shell {
  margin: var(--space-3) 0;
}

.kpi-mini-strip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
  padding: 6px var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: var(--shadow-soft);
}

.kpi-mini-strip span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 850;
}

.kpi-mini-strip strong {
  color: var(--text);
}

.kpi-grid.chrome-expanded {
  position: relative;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
  align-items: stretch;
}

.kpi-toggle {
  align-self: center;
}

.main-nav-btn {
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  border-color: transparent;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  box-shadow: none;
}

.subtab-btn {
  background: transparent;
  border-color: color-mix(in srgb, var(--line-soft) 78%, transparent);
  color: var(--faint);
}

.subtab-btn.active {
  font-weight: 950;
}

.page-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 0;
  padding: var(--space-4);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 48%),
    var(--card-bg);
  box-shadow: var(--shadow-soft);
}

.page-hero .panel-header {
  width: 100%;
}

.page-hero h2,
.page-hero h3 {
  margin: 1px 0 3px;
}

.page-hero p {
  margin: 0;
  color: var(--muted);
}

.section-actions,
.page-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.link-list {
  gap: var(--space-2);
}

.link-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.1fr) minmax(260px, 1.6fr) 92px auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
}

.link-row .link-card-head {
  gap: var(--space-2);
}

.link-row h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 2px;
  font-size: var(--font-md);
}

.link-row p {
  margin: 0;
}

.link-row-url {
  min-width: 0;
}

.link-row-url .copy-box {
  min-height: 30px;
  font-size: var(--font-sm);
}

.link-row-price {
  justify-self: end;
  font-size: 17px;
}

.link-row-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.settings-grid > .wide,
.settings-grid > .modal-actions {
  grid-column: 1 / -1;
}

.settings-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--card-padding-compact);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.settings-card h4 {
  margin: 0;
  color: var(--text);
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0;
}

.settings-card textarea {
  min-height: 64px;
}

.sales-ops-page {
  gap: var(--space-3);
}

.sales-ops-hero {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.sales-ops-layout {
  padding: var(--space-3);
}

.compact-settings-grid {
  gap: var(--space-3);
}

.template-choice-grid,
.field-toggle-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.pipeline-template-choice {
  cursor: pointer;
  min-height: 0;
  padding: var(--space-3);
}

.pipeline-template-choice input {
  margin: 0;
}

.pipeline-preview-card {
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.pipeline-preview-surface {
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  display: grid;
  max-width: 360px;
  padding: var(--space-2);
}

.logo-settings-card {
  grid-column: 1 / -1;
}

.logo-upload-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}

.logo-preview {
  display: grid;
  place-items: center;
}

.logo-preview-mark {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
}

.logo-settings-card input[type="file"] {
  padding: 5px;
}

.status-metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.status-mini-card {
  min-width: 0;
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.status-mini-card span {
  color: var(--faint);
  font-size: var(--font-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.status-mini-card strong {
  color: var(--primary);
  font-size: 20px;
  line-height: 1;
}

.status-mini-card small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--font-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-monitor-panel {
  display: grid;
  gap: var(--space-3);
}

.monitor-hero {
  margin: 0;
}

.dense-list-row {
  min-height: 42px;
  padding: var(--space-3);
}

.compact-table .table th,
.compact-table .table td {
  padding: 6px 7px;
}

.training-list-item,
.training-list-row {
  min-height: 0;
}

.training-list-row p,
.training-list-row small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.sales-kit-hero {
  min-height: 0;
}

@media (max-width: 1100px) {
  .kpi-grid,
  .four-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .two-col,
  .three-col,
  .meta-grid,
  .assignment-mode-grid,
  .campaign-rule-grid {
    grid-template-columns: 1fr;
  }

  .distribution-kpis,
  .dist-help-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-info-panel,
  .offer-grid,
  .stage-option-grid,
  .checklist-grid,
  .split-grid {
    grid-template-columns: 1fr 1fr;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions {
    justify-content: flex-start;
  }

  .distribution-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .distribution-hero-actions,
  .campaign-rule-action {
    justify-content: flex-start;
  }

  .whatsapp-workspace {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  }

  .whatsapp-command-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .command-status-stack,
  .whatsapp-command-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .whatsapp-context-panel {
    grid-column: 1 / -1;
    max-height: none;
  }

  .whatsapp-row {
    grid-template-columns: 1fr;
  }

  .whatsapp-meta {
    min-width: 0;
    text-align: left;
  }

  .whatsapp-main small {
    white-space: normal;
  }

  .link-row {
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr);
  }

  .link-row-price,
  .link-row-actions {
    justify-self: start;
  }

  .settings-grid,
  .status-metric-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .main {
    padding: 18px 12px 32px;
  }

  .topbar {
    padding: 12px;
  }

  .brand {
    min-width: 0;
  }

  .kpi-grid,
  .distribution-kpis,
  .dist-help-grid,
  .four-col,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .pipeline-section-chip {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .pipeline-filters .search-input {
    flex-basis: min(100%, 420px);
    min-width: min(100%, 280px);
  }

  .command-status-stack,
  .whatsapp-command-strip,
  .compact-command-grid {
    grid-template-columns: 1fr;
  }

  .lead-detail-form {
    padding: 16px;
  }

  .lead-drawer-head,
  .drawer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .lead-title-input {
    font-size: 26px;
  }

  .lead-info-panel,
  .offer-grid,
  .stage-option-grid,
  .checklist-grid,
  .split-grid,
  .payment-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .split-card,
  .dist-split,
  .dist-head {
    grid-template-columns: 1fr;
  }

  .dist-head {
    display: grid;
  }

  .dist-metrics {
    text-align: left;
  }

  .whatsapp-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .whatsapp-sidebar,
  .whatsapp-chat-panel,
  .whatsapp-context-panel {
    max-height: none;
  }

  .whatsapp-inbox-list,
  .whatsapp-thread-inline {
    max-height: 460px;
  }

  .whatsapp-chat-header,
  .whatsapp-composer,
  .whatsapp-template-inline {
    display: grid;
    grid-template-columns: 1fr;
  }

  .whatsapp-send-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .whatsapp-action-row {
    justify-content: flex-start;
  }

  .whatsapp-bubble {
    max-width: 92%;
  }

  .period-btn,
  .tab-btn,
  .main-nav-btn,
  .subtab-btn {
    min-width: auto;
    flex: 1 1 130px;
  }

  .period-buttons,
  .custom-period {
    width: 100%;
  }

  .strategy-quote-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .custom-period {
    padding-left: 0;
    padding-top: 8px;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .custom-period label,
  .custom-period .ghost-btn {
    flex: 1 1 160px;
  }

  .list-row,
  .link-card-head,
  .sales-kit-hero,
  .training-card-head,
  .training-list-row,
  .training-row-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .training-card-meta {
    justify-items: start;
  }

  .distribution-table,
  .distribution-table tbody,
  .distribution-table tr,
  .distribution-table td,
  .rules-table,
  .rules-table tbody,
  .rules-table tr,
  .rules-table td {
    display: block;
    width: 100%;
  }

  .distribution-table thead,
  .rules-table thead {
    display: none;
  }

  .distribution-table tr,
  .rules-table tr {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--card-bg);
  }

  .distribution-table td,
  .rules-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .distribution-table td::before,
  .rules-table td::before {
    content: attr(data-label);
    color: var(--faint);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .distribution-table td:first-child,
  .rules-table td:first-child {
    display: block;
  }

  .distribution-table td:first-child::before,
  .rules-table td:first-child::before {
    display: block;
    margin-bottom: 8px;
  }

  .distribution-table td:last-child,
  .rules-table td:last-child {
    border-bottom: 0;
  }

  .context-source-grid,
  .context-answer-list {
    grid-template-columns: 1fr;
  }

  .whatsapp-reply-box {
    grid-template-columns: 1fr;
  }

  .page-hero,
  .monitor-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .kpi-grid.chrome-expanded,
  .settings-grid,
  .status-metric-row,
  .link-row {
    grid-template-columns: 1fr;
  }

  .link-row-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 1280px) {
  .lead-profile-grid {
    grid-template-columns: minmax(220px, .85fr) minmax(380px, 1.4fr);
  }

  .lead-profile-side {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .lead-profile-grid,
  .lead-profile-side,
  .lead-task-form,
  .quick-action-grid {
    grid-template-columns: 1fr;
  }

  .lead-profile-side {
    grid-column: auto;
  }

  .lead-task-item {
    grid-template-columns: 1fr;
  }

  .profile-note-item {
    grid-template-columns: 1fr;
  }

  .lead-profile-summary .context-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .lead-profile-summary .context-mini-grid {
    grid-template-columns: 1fr;
  }
}

.qr-preview {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: block;
  max-width: 220px;
  padding: 8px;
}

.strategy-quote-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow-soft);
}

.strategy-quote-strip strong {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-size: clamp(13px, .9vw, 15px);
  font-weight: 800;
  line-height: 1.3;
}

.strategy-quote-strip small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 850;
  white-space: nowrap;
}

.compact-chrome .strategy-quote-strip {
  padding: 8px 12px;
}

.compact-chrome .strategy-quote-strip strong {
  font-size: clamp(13px, .9vw, 15px);
}

.whatsapp-command-center {
  grid-template-columns: minmax(0, 1fr);
}

.whatsapp-lines-page .toolbar-row {
  align-items: end;
}

.whatsapp-lines-page table select {
  min-width: 150px;
  max-width: 190px;
}

.mini-check {
  margin-top: 5px;
  font-size: var(--font-xs);
}

.compact-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: var(--font-sm);
  line-height: 1.45;
}

.whatsapp-qr-modal {
  width: min(720px, calc(100vw - 28px));
}

.qr-modal-body {
  display: grid;
  grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.qr-preview.large {
  width: min(280px, 100%);
  max-width: 280px;
}

.distribution-page .settings-card {
  min-height: auto;
}

.distribution-page,
.distribution-page .panel,
.distribution-page .settings-card,
.distribution-page .toolbar-row,
.distribution-page .compact-row,
.distribution-page .context-mini-grid,
.distribution-page .settings-grid,
.distribution-page .compact-settings-grid,
.distribution-page .context-answer-list article {
  min-width: 0;
}

.distribution-page .sales-ops-hero,
.distribution-page .toolbar-row {
  flex-wrap: wrap;
}

.distribution-page .sales-ops-hero > div,
.distribution-page .panel-header,
.distribution-page .panel-header > div {
  min-width: 0;
}

.distribution-page .sales-ops-hero p,
.distribution-page .panel-header p,
.distribution-page label,
.distribution-page .notice p,
.distribution-page .compact-row p,
.distribution-page .mini-bullet-list,
.distribution-page .status-pill {
  overflow-wrap: anywhere;
}

.distribution-page .context-mini-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.distribution-page .settings-grid,
.distribution-page .compact-settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.distribution-table-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.distribution-table {
  min-width: 980px;
}

.distribution-table th,
.distribution-table td {
  font-size: var(--font-sm);
  vertical-align: top;
}

.score-badge {
  display: inline-grid;
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--font-sm);
  font-weight: 900;
}

.score-badge.green,
.status-pill.green {
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
}

.score-badge.gold,
.status-pill.gold {
  border-color: color-mix(in srgb, var(--gold-2) 45%, var(--line));
  background: color-mix(in srgb, var(--gold-2) 14%, transparent);
  color: var(--gold-2);
}

.score-badge.red,
.status-pill.red {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
}

.mini-badge.violet,
.status-badge.violet {
  border-color: color-mix(in srgb, var(--violet) 45%, var(--line));
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  color: var(--violet);
}

.mini-bullet-list {
  margin: 0;
  padding-left: 16px;
  color: var(--muted);
  font-size: var(--font-xs);
  line-height: 1.35;
  min-width: 150px;
}

.closer-monitoring-view {
  gap: var(--space-3);
}

.monitoring-hero {
  align-items: center;
}

.monitoring-kpi-grid {
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: var(--space-2);
}

.monitoring-kpi-grid .kpi-card {
  min-height: 92px;
  padding: var(--card-padding-compact);
}

.monitoring-filters {
  padding: var(--card-padding-compact);
}

.monitoring-filters .toolbar-row {
  align-items: end;
  gap: var(--space-2);
}

.monitoring-filters label {
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 800;
  min-width: 150px;
}

.monitoring-filters select {
  height: var(--button-height-compact);
  margin-top: 4px;
}

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

.monitoring-closer-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: var(--space-2);
  padding: 10px;
}

.monitoring-closer-card.red,
.monitoring-lead-row.red {
  border-left-color: var(--red);
}

.monitoring-closer-card.gold,
.monitoring-lead-row.gold {
  border-left-color: var(--gold-2);
}

.monitoring-closer-card.blue,
.monitoring-lead-row.blue {
  border-left-color: var(--blue);
}

.monitoring-card-head,
.monitoring-lead-row {
  align-items: start;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  min-width: 0;
}

.monitoring-card-head strong,
.monitoring-lead-row strong {
  color: var(--text);
  display: block;
  font-size: var(--font-md);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitoring-card-head p,
.monitoring-lead-row p,
.monitoring-recommendation {
  color: var(--muted);
  font-size: var(--font-xs);
  line-height: 1.35;
  margin: 2px 0 0;
}

.monitoring-metric-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.monitoring-metric-grid span {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--font-xs);
  line-height: 1.25;
  padding: 7px 8px;
}

.monitoring-metric-grid strong {
  color: var(--text);
  font-size: var(--font-sm);
  margin-right: 4px;
}

.monitoring-recommendation {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: var(--radius-sm);
  padding: 7px 8px;
}

.monitoring-queues {
  align-items: start;
}

.monitoring-lead-list {
  display: grid;
  gap: var(--space-2);
}

.monitoring-lead-row {
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 9px 10px;
}

.monitoring-lead-row > div {
  min-width: 0;
}

.monitoring-lead-row small {
  color: var(--muted);
  display: block;
  font-size: var(--font-xs);
  line-height: 1.35;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitoring-lead-row .ghost-btn {
  flex: 0 0 auto;
}

.monitoring-lead-row.handoff {
  border-left-color: var(--cyan);
}

.mini-tags {
  gap: 4px;
  margin-top: 6px;
}

@media (max-width: 720px) {
  .qr-modal-body {
    grid-template-columns: 1fr;
  }

  .monitoring-kpi-grid,
  .monitoring-queues {
    grid-template-columns: 1fr;
  }

  .monitoring-filters .toolbar-row,
  .monitoring-lead-row {
    align-items: stretch;
    flex-direction: column;
  }

  .monitoring-filters label {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 1180px) {
  .line-monitor-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 760px) {
  .line-monitor-grid {
    grid-template-columns: 1fr;
  }
}

/* Bot Inbox operations view */
.bot-inbox-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.bot-inbox-workspace {
  grid-template-columns: minmax(320px, 420px) minmax(360px, 1fr);
}

.bot-inbox-list {
  display: block;
  overflow-y: auto;
  padding: 8px;
}

.bot-inbox-section + .bot-inbox-section {
  margin-top: 12px;
}

.bot-inbox-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #8a8f98);
  padding: 4px 6px;
}

.bot-inbox-item {
  display: flex;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  padding: 8px;
  margin-bottom: 6px;
  cursor: pointer;
}

.bot-inbox-item:hover {
  border-color: color-mix(in srgb, var(--accent, #6c8cff) 50%, var(--line-soft));
}

.bot-inbox-item.selected {
  border-color: var(--accent, #6c8cff);
  box-shadow: 0 0 0 1px var(--accent, #6c8cff) inset;
}

.bot-inbox-item-main {
  min-width: 0;
  flex: 1;
}

.bot-inbox-item-main h3 {
  margin: 0;
  font-size: 14px;
}

.bot-inbox-item-main p {
  margin: 2px 0;
  font-size: 12px;
  color: var(--muted, #8a8f98);
}

.bot-inbox-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.bot-inbox-detail {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-soft);
  padding: 12px;
  overflow-y: auto;
}

.bot-inbox-detail-rows {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}

.bot-inbox-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.bot-inbox-kv span {
  color: var(--muted, #8a8f98);
}

.bot-inbox-preview {
  margin-top: 10px;
}

.bot-inbox-bubble {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  padding: 8px 10px;
  font-size: 13px;
  white-space: pre-wrap;
  margin: 4px 0 8px;
}

.bot-inbox-empty,
.bot-inbox-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 32px 16px;
  color: var(--muted, #8a8f98);
}

.bot-inbox-empty-icon {
  font-size: 32px;
}

.bot-inbox-empty h3 {
  margin: 0;
  color: var(--text, inherit);
}

.bot-inbox-empty-line {
  margin-top: 8px;
  font-size: 12px;
}

@media (max-width: 980px) {
  .bot-inbox-workspace {
    grid-template-columns: 1fr;
  }
}

/* Closer Brief (lead detail quick-read) */
.closer-brief {
  border: 1px solid color-mix(in srgb, var(--accent, #6c8cff) 40%, var(--line-soft));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent, #6c8cff) 7%, var(--surface));
  box-shadow: var(--shadow-soft);
  padding: 14px;
  margin: 10px 0 14px;
}

.closer-brief-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.closer-brief-head h2 {
  margin: 2px 0 0;
}

.closer-brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.closer-brief-action {
  grid-column: 1 / -1;
}

.closer-brief-card {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  padding: 10px 12px;
}

.closer-brief-card h4 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #8a8f98);
}

.closer-kv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.closer-kv-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.closer-kv-list li span {
  color: var(--muted, #8a8f98);
  flex-shrink: 0;
}

.closer-kv-list li strong {
  text-align: right;
  word-break: break-word;
}

.closer-brief-intent {
  margin: 0 0 8px;
  font-weight: 600;
}

.closer-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.closer-next-action {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  margin-bottom: 10px;
}

.closer-next-action.green {
  border-color: color-mix(in srgb, var(--green, #2bbf7a) 60%, transparent);
  background: color-mix(in srgb, var(--green, #2bbf7a) 14%, transparent);
}

.closer-next-action.cyan {
  border-color: color-mix(in srgb, #2bb8d8 60%, transparent);
  background: color-mix(in srgb, #2bb8d8 14%, transparent);
}

.closer-next-action.violet {
  border-color: color-mix(in srgb, #8a6cff 60%, transparent);
  background: color-mix(in srgb, #8a6cff 14%, transparent);
}

.closer-script {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 13px;
  margin: 4px 0 0;
  padding: 8px 10px;
  border: 1px dashed var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.closer-brief-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.closer-brief-raw {
  margin-top: 12px;
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
}

.closer-brief-raw summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted, #8a8f98);
}

.closer-brief-raw .closer-kv-list {
  margin-top: 8px;
}

.lead-tech-details > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 4px;
  color: var(--muted, #8a8f98);
}

@media (max-width: 760px) {
  .closer-brief-grid {
    grid-template-columns: 1fr;
  }
}

/* One-lead Bot Intake dry-run QA result */
.bot-dryrun-result:empty {
  display: none;
}

.bot-dryrun-result {
  margin-top: 10px;
}

.bot-dryrun-panel {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px 12px;
}

.bot-dryrun-panel.ok {
  border-color: color-mix(in srgb, var(--green, #2bbf7a) 55%, transparent);
  background: color-mix(in srgb, var(--green, #2bbf7a) 10%, transparent);
}

.bot-dryrun-panel.danger {
  border-color: color-mix(in srgb, var(--red, #e5484d) 60%, transparent);
  background: color-mix(in srgb, var(--red, #e5484d) 12%, transparent);
}

.bot-dryrun-head {
  margin-bottom: 8px;
}

.bot-dryrun-danger-text {
  color: var(--red, #e5484d);
}

.bot-dryrun-error {
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--red, #e5484d) 60%, transparent);
  background: color-mix(in srgb, var(--red, #e5484d) 12%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--red, #e5484d);
}

.bot-dryrun-loading {
  font-style: italic;
}

/* Bot Inbox WhatsApp-style lifecycle view */
.bot-inbox-item-last {
  font-size: 12px;
  color: var(--muted, #8a8f98);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2px 0 0;
}

.bot-inbox-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.bot-inbox-history {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  padding: 10px;
  margin-bottom: 10px;
  max-height: 360px;
  overflow-y: auto;
}

.bot-inbox-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bot-inbox-history .whatsapp-bubble {
  max-width: 80%;
}

.bot-inbox-history .whatsapp-bubble.inbound {
  align-self: flex-start;
}

.bot-inbox-history .whatsapp-bubble.outbound {
  align-self: flex-end;
}

/* Bot Inbox left-panel search + status filters */
.bot-inbox-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 8px 10px;
  margin: -8px -8px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}

.bot-inbox-toolbar .search-input {
  width: 100%;
}

.bot-inbox-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bot-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.bot-filter-chip:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
}

.bot-filter-chip.active {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  color: var(--text);
  font-weight: 600;
}

.bot-filter-count {
  font-size: 11px;
  color: var(--faint);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 999px;
  padding: 0 6px;
  min-width: 18px;
  text-align: center;
}

.bot-filter-chip.active .bot-filter-count {
  color: var(--primary-strong);
}

.bot-qa-warning {
  margin: 8px 0 0;
  border: 1px solid color-mix(in srgb, var(--red, #e5484d) 45%, transparent);
  background: color-mix(in srgb, var(--red, #e5484d) 8%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-soft, #6b7280);
}

.bot-qa-warning strong {
  color: var(--red, #e5484d);
}

/* Bot Inbox identity resolution (V2) */
.bot-inbox-identity {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-3, #f1f3f6);
  padding: 10px 12px;
  margin: 8px 0;
}
.bot-inbox-identity-reason {
  margin: 2px 0 8px;
  font-size: 13px;
  color: var(--text);
}
.identity-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}
.identity-picker label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  flex: 1;
  min-width: 200px;
}
.identity-picker select {
  width: 100%;
}

/* Bot Inbox auto-sync controls — compact horizontal toolbar.
   NOTE: uses a UNIQUE class (.bot-inbox-syncbar) to avoid colliding with the sidebar
   .bot-inbox-toolbar (search/filters) which is intentionally flex-direction: column. */
.bot-inbox-syncbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
  min-height: 0;
  flex: 0 0 auto;
}
.bot-inbox-syncbar .mini-badge,
.bot-inbox-syncbar .auto-sync-meta,
.bot-inbox-syncbar .ghost-btn.slim {
  white-space: nowrap;
}
.bot-inbox-syncbar .ghost-btn.slim {
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
}
.bot-inbox-syncbar .ghost-btn.slim:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.auto-sync-meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
/* Let the hero header wrap the whole syncbar to a second row on narrow widths,
   but keep its buttons horizontal (never one-per-line). */
.bot-inbox-page .inbox-hero .panel-header {
  flex-wrap: wrap;
  row-gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 720px) {
  .bot-inbox-syncbar {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .auto-sync-meta {
    max-width: 100%;
    flex-basis: 100%;
  }
}

/* Pipeline card cleanup (Phase A) — priority chip + muted price. Pipeline cards only. */
.lead-card .lead-priority {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.lead-card .lead-priority.red { color: var(--red, #e5484d); background: color-mix(in srgb, var(--red, #e5484d) 12%, transparent); border-color: color-mix(in srgb, var(--red, #e5484d) 35%, transparent); }
.lead-card .lead-priority.green { color: var(--green, #30a46c); background: color-mix(in srgb, var(--green, #30a46c) 12%, transparent); border-color: color-mix(in srgb, var(--green, #30a46c) 35%, transparent); }
.lead-card .lead-priority.cyan { color: var(--cyan, #0e7490); background: color-mix(in srgb, var(--cyan, #0e7490) 12%, transparent); border-color: color-mix(in srgb, var(--cyan, #0e7490) 30%, transparent); }
.lead-card .lead-priority.gold { color: var(--gold, #b7791f); background: color-mix(in srgb, var(--gold, #b7791f) 14%, transparent); border-color: color-mix(in srgb, var(--gold, #b7791f) 35%, transparent); }
.lead-card .lead-priority.warn { color: var(--muted, #6b7280); background: color-mix(in srgb, var(--muted, #6b7280) 12%, transparent); border-color: color-mix(in srgb, var(--muted, #6b7280) 28%, transparent); }
.lead-card .tag.value-muted {
  color: var(--muted, #6b7280);
  background: transparent;
  border: 1px dashed var(--line-soft, #e5e7eb);
  font-weight: 500;
}

/* Pipeline AI timing indicators — display-only chips on AI-stage cards. */
.lead-card .tag.ai-timer {
  font-weight: 600;
  white-space: nowrap;
}
.lead-card .tag.ai-timer.upcoming { color: var(--cyan, #0e7490); background: color-mix(in srgb, var(--cyan, #0e7490) 10%, transparent); }
.lead-card .tag.ai-timer.due { color: var(--gold, #b7791f); background: color-mix(in srgb, var(--gold, #b7791f) 14%, transparent); }
.lead-card .tag.ai-timer.overdue { color: var(--red, #e5484d); background: color-mix(in srgb, var(--red, #e5484d) 12%, transparent); }
.lead-card .tag.ai-timer.expired {
  color: var(--red, #e5484d);
  background: color-mix(in srgb, var(--red, #e5484d) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--red, #e5484d) 40%, transparent);
}

/* Action Queue chips (pipeline kanban) — closer ops filters. */
.action-queue-row {
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.action-queue-row .action-chip {
  cursor: pointer;
  font-size: 12px;
  border: 1px solid var(--line-soft, #e5e7eb);
  background: transparent;
}
.action-queue-row .action-chip.active {
  background: var(--primary, #16a34a);
  border-color: var(--primary, #16a34a);
  color: #fff;
  font-weight: 600;
}

/* Ops safety: collapsed danger zones + admin tools (NOT used inside Bot Inbox). */
.danger-zone {
  border: 1px dashed color-mix(in srgb, var(--red, #e5484d) 45%, transparent);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 10px 0;
}
.danger-zone > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--red, #e5484d);
  font-size: 13px;
}
.danger-zone-copy {
  margin: 8px 0;
  font-size: 12px;
  color: var(--muted, #6b7280);
}
.danger-zone button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.closer-admin-tools {
  border: 1px solid var(--line-soft, #e5e7eb);
  border-radius: 10px;
  padding: 6px 12px;
  margin-top: 8px;
}
.closer-admin-tools > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted, #6b7280);
  font-weight: 600;
}
.worker-status-strip {
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}
.worker-status-strip .chip { font-size: 12px; }
.worker-status-note {
  font-size: 12px;
  color: var(--muted, #6b7280);
}

/* Subnav group labels (WhatsApp: Operación · Contenido · Avanzado; Dashboard groups). */
.subtab-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  align-self: center;
  margin: 0 2px 0 10px;
  white-space: nowrap;
}
.subtab-group-label:first-child {
  margin-left: 0;
}
.action-queue-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  align-self: center;
  white-space: nowrap;
}

/* ============================================================
   COWORK VISUAL PASS V1 — refinement layer (appended overrides)
   CSS-only: no logic, no markup, no route changes. Bot Inbox
   component classes (.bot-inbox-*, .wa-*) intentionally NOT
   targeted; shared primitives get gentle polish only.
   ============================================================ */

/* ---- Global rhythm & typography ---- */
h1, h2, h3 { letter-spacing: -0.015em; }
.panel {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}
.panel-header p { color: var(--muted); }
.eyebrow { letter-spacing: 0.08em; }

/* ---- Buttons: consistent radius, calm motion ---- */
.primary-btn, .ghost-btn, .danger-btn {
  border-radius: 9px;
  font-weight: 600;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.primary-btn { box-shadow: 0 1px 2px rgba(14, 159, 110, 0.28); }
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14, 159, 110, 0.24); }
.ghost-btn:hover { background: var(--surface-3); }
.danger-btn:hover { transform: translateY(-1px); }

/* ---- Chips & badges: one consistent pill language ---- */
.chip { border-radius: 999px; font-weight: 600; }
.mini-badge { border-radius: 999px; }

/* ---- KPI cards: executive look, accent spine ---- */
.kpi-card {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 16px 18px;
  overflow: hidden;
}
.kpi-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--blue);
  opacity: 0.65;
}
.kpi-card.green::before { background: var(--green); }
.kpi-card.gold::before { background: var(--gold); }
.kpi-card.red::before { background: var(--red); }
.kpi-card.violet::before { background: var(--violet); }
.kpi-card strong { font-size: 30px; letter-spacing: -0.02em; }

/* ---- Pipeline kanban ---- */
.stage-column {
  border-radius: 12px;
  border-top-width: 3px;
}
.stage-head { padding: 10px 12px; }
.stage-head h3 { font-weight: 700; }
.lead-card {
  border-radius: 10px;
  padding: 10px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.lead-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 34, 0.09);
}
.lead-meta-line { color: var(--muted); }
.lead-card .tag { border-radius: 6px; font-weight: 600; }
.lead-card .lead-priority { box-shadow: var(--shadow-soft); }

/* Action Queue: contained pill bar */
.action-queue-row {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 8px 12px;
  margin-top: 10px;
}
.action-queue-row .action-chip { padding: 5px 12px; transition: border-color 0.12s ease, color 0.12s ease; }
.action-queue-row .action-chip:hover { border-color: var(--primary); color: var(--primary); }
.action-queue-row .action-chip.active:hover { color: #fff; }
.action-queue-row .action-chip.active { box-shadow: 0 1px 4px rgba(14, 159, 110, 0.35); }

/* ---- Navigation: pill subtabs, quieter group labels ---- */
.subtab-btn { border-radius: 999px; transition: background 0.12s ease, color 0.12s ease; }
.subtab-btn.active { font-weight: 700; }
.main-nav-btn { border-radius: 10px; font-weight: 600; }
.subtab-group-label { opacity: 0.8; }

/* ---- Closer Brief: sectioned cards + loud next action ---- */
.closer-brief-card {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px;
}
.closer-brief-card h4 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.closer-next-action {
  font-size: 16px;
  font-weight: 700;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
  color: var(--primary-strong);
}
.closer-next-action.red { background: color-mix(in srgb, var(--red) 9%, transparent); border-color: color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); }
.closer-next-action.gold { background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: color-mix(in srgb, var(--gold) 32%, transparent); color: var(--gold); }
.closer-next-action.cyan { background: color-mix(in srgb, var(--cyan) 9%, transparent); border-color: color-mix(in srgb, var(--cyan) 28%, transparent); color: var(--cyan); }
.closer-next-action.warn { background: var(--surface-3); border-color: var(--line); color: var(--muted); }
.closer-script {
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  padding: 12px 14px;
}
.closer-kv-list li { padding: 5px 0; border-bottom: 1px dashed var(--line-soft); }
.closer-kv-list li:last-child { border-bottom: none; }

/* ---- Agenda de seguimiento: cleaner buckets ---- */
.followup-group {
  border-radius: 14px;
}
.followup-group .panel-header h3 { font-size: 14px; }
.followup-group .compact-row {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.followup-group .compact-row:hover { border-color: var(--primary); box-shadow: var(--shadow-soft); }

/* ---- Automation Monitor: gates as a status card, calmer danger zone ---- */
.worker-status-strip {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px 12px;
}
.danger-zone { background: color-mix(in srgb, var(--red) 3%, transparent); }
.notice { border-radius: 12px; }

/* ---- Empty states: friendlier ---- */
.empty {
  padding: 32px 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

/* ---- Tables: quieter headers, hover rows ---- */
.table th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}
.table tbody tr { transition: background 0.12s ease; }
.table tbody tr:hover { background: var(--surface-2); }

/* ---- Narrow screens: keep density sane ---- */
@media (max-width: 900px) {
  .panel { padding: 14px; }
  .kpi-card strong { font-size: 24px; }
  .closer-next-action { font-size: 14px; }
}

/* ============================================================
   DASHBOARD PREMIUM V1 — premium dashboard experience layer
   Scope: pipeline dashboard shell, right rail widgets, topbar,
   KPI strip, kanban polish, navigation. CSS + rail markup only;
   no logic, stages, filters or Bot Inbox classes touched.
   ============================================================ */

/* ---- Dashboard shell: kanban + narrow executive rail ---- */
.pipeline-dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 12px;
  align-items: start;
}
.pipeline-dash-main { min-width: 0; }

.dash-rail {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.dash-card { padding: 12px 14px; }
.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.dash-card-head h3,
.dash-card-title {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.dash-card-title { margin-bottom: 10px; }
.dash-sync-chip { font-size: 9.5px; padding: 0 7px; min-height: 18px; line-height: 18px; }

/* Resumen del día */
.dash-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.dash-summary-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.dash-summary-list li:last-child { border-bottom: none; }
.dash-summary-list span { font-size: 12px; color: var(--muted); }
.dash-summary-list strong { font-size: 14px; letter-spacing: -0.01em; }

/* Actividad mensual de leads — horizontal month bars (narrow-rail friendly) */
.dash-month-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.dash-month-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 8px;
}
.dash-month-label { font-size: 10px; color: var(--faint); text-transform: capitalize; }
.dash-month-bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.dash-month-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 80%, transparent);
}
.dash-month-list li.current .dash-month-bar i { background: var(--orange, #ea580c); }
.dash-month-list li.current .dash-month-label { color: var(--orange, #ea580c); font-weight: 700; }
.dash-month-list strong { font-size: 11px; text-align: right; letter-spacing: -0.01em; }

/* Pipeline global — executive stage summary */
.dash-global-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.dash-global-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 26px;
  align-items: center;
  gap: 7px;
}
.dash-global-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.dash-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dash-global-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.dash-global-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  opacity: 0.85;
}
.dash-global-list strong {
  font-size: 12px;
  text-align: right;
  letter-spacing: -0.01em;
}

/* Tip del día — calm quote card */
.dash-tip { border-left: 3px solid color-mix(in srgb, var(--green) 55%, transparent); }
.dash-tip-quote {
  margin: 0 0 8px;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  font-style: italic;
}
.dash-tip-quote::before { content: "\201C"; color: var(--green); font-weight: 800; margin-right: 2px; }
.dash-tip-quote::after { content: "\201D"; color: var(--green); font-weight: 800; margin-left: 2px; }
.dash-tip-source { font-size: 11px; color: var(--faint); text-align: right; }

/* ---- Topbar: calmer hierarchy, harmonized controls ---- */
.topbar { padding: 12px 24px; }
.top-actions { gap: 8px; }
.top-actions .ghost-btn,
.top-actions .primary-btn,
.top-actions .export-menu summary {
  border-radius: 999px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.top-actions .ghost-btn,
.top-actions .export-menu summary { border: 1px solid var(--line-soft); background: var(--surface); }
.top-actions .ghost-btn:hover,
.top-actions .export-menu summary:hover { background: var(--surface-3); }
.top-actions .chip {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.top-actions select,
.top-actions .language-select { min-height: 36px; border-radius: 999px; }

/* Export dropdown: one button, two options */
.export-menu { position: relative; }
.export-menu summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.export-menu summary::-webkit-details-marker { display: none; }
.export-menu[open] summary { background: var(--surface-3); }
.export-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  display: grid;
  gap: 4px;
  min-width: 210px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.export-menu-list .ghost-btn {
  justify-content: flex-start;
  border: none;
  border-radius: 8px;
  width: 100%;
  text-align: left;
}

/* ---- KPI strip: executive numbers, compact scale ---- */
.kpi-mini-strip {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.kpi-grid { gap: 10px; }
.kpi-grid.chrome-expanded { grid-template-columns: repeat(5, minmax(120px, 1fr)); }
.kpi-card { padding: 10px 14px; }
.kpi-card p { font-weight: 600; font-size: 10px; margin-bottom: 2px; }
.kpi-card strong { font-size: 22px; }
.kpi-card small { color: var(--faint); font-size: 10px; }

/* ---- Pipeline header: title + compact search (mock layout) ---- */
.pipeline-filters { padding: 14px 16px; }
.pipeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pipeline-head-titles { min-width: 0; }
.pipeline-head-titles h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pipeline-head-titles p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}
.pipeline-head-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
}
.pipeline-head-tools .search-input {
  flex: 0 1 320px;
  width: 320px;
  min-height: 32px;
  font-size: 12px;
  border-radius: 10px;
}
.pipeline-head-tools select {
  flex: 0 0 110px;
  width: 110px;
  min-height: 32px;
  font-size: 12px;
}
.pipeline-queue-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.pipeline-queue-meta .chip { font-size: 10px; min-height: 20px; line-height: 20px; padding: 0 8px; font-weight: 600; }
.pipeline-meta-row { margin-top: 8px; }
.action-queue-row { margin-top: 10px; }

/* ---- Dashboard type scale: section > number > card title > body > meta ---- */
.period-label { font-size: 10px; }
.stage-head h3 { font-size: 12.5px; }
.dash-summary-list span { font-size: 11.5px; }
.dash-summary-list strong { font-size: 13px; }
.dash-global-name { font-size: 11px; }
.dash-tip-quote { font-size: 12px; }
.dash-tip-source { font-size: 10px; }

/* ---- Quiet chrome: strategy strip as plain text, calm period row ---- */
.strategy-quote-strip {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 2px 4px;
}
.strategy-quote-strip strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* ---- Kanban breathing room next to the rail ---- */
.pipeline-dash .kanban { gap: 8px; }
.pipeline-dash .stage-body { padding: 7px; gap: 7px; }

/* ---- Kanban: lighter columns, stronger heads ---- */
.stage-column { background: color-mix(in srgb, var(--kanban-bg) 62%, var(--surface)); }
.stage-head h3 { font-size: 13px; letter-spacing: -0.01em; }
.stage-head .micro { color: var(--faint); }
.stage-count {
  font-weight: 800;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
}

/* ---- Pipeline filters bar: contained, no stray borders ---- */
.pipeline-filters .pipeline-toolbar { align-items: center; }
.pipeline-filters .search-input { border-radius: 10px; }

/* ---- Navigation: clearer active states ---- */
.main-nav-btn.active { box-shadow: 0 1px 4px rgba(14, 159, 110, 0.22); }
.subtab-row { row-gap: 6px; }

/* ---- Responsive: rail stacks under the board ---- */
@media (max-width: 1280px) {
  .pipeline-dash { grid-template-columns: 1fr; }
  .dash-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-tip { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .dash-rail { grid-template-columns: 1fr; }
}

/* ============================================================
   LEAD CARD PREMIUM V1 — compact premium lead detail
   Scope: lead drawer header badges, Closer Brief layout, lead
   context card, follow-up & commercial polish. Display-only;
   form fields, names and handlers untouched. No Bot Inbox.
   ============================================================ */

/* ---- Header badges: compact strip, bot status at the right ---- */
.lead-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.lead-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
}
.lead-metric strong { font-size: 16px; letter-spacing: -0.02em; }
.lead-metric small { font-size: 10px; color: var(--faint); }
.lead-bot-chip { margin-left: auto; }

/* ---- Closer Brief: calm hero ---- */
.closer-brief {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.closer-brief-head { margin-bottom: 12px; }
.closer-brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.closer-brief-quality { margin-top: 10px; }
.closer-kv-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.closer-kv-list li span { font-size: 11.5px; color: var(--muted); }
.closer-kv-list li strong { font-size: 12.5px; text-align: right; }

/* Action band: next action + script side by side */
.closer-action-band {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 10px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line-soft));
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}
.closer-action-band h4 {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.closer-action-band .closer-script {
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  font-family: inherit;
}
.closer-action-band .closer-next-action { font-size: 14px; padding: 10px 12px; }
.closer-brief-cta { margin-top: 12px; }

/* ---- Contexto del lead: grouped, executive ---- */
.lead-context-card {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.context-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.context-group {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 12px;
  min-width: 0;
}
.context-group h4 {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.context-kv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.context-kv-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.context-kv-list li:last-child { border-bottom: none; }
.context-kv-list li span { font-size: 11px; color: var(--muted); flex: 0 0 auto; }
.context-kv-list li strong {
  font-size: 11.5px;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- Seguimiento & Valores comerciales: consistent premium cards ---- */
.followup-card,
.commercial-card,
.tracking-card {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.commercial-card h3,
.tracking-card h3,
.followup-card .panel-header h3 { font-size: 14px; letter-spacing: -0.01em; }
.offer-card {
  border-radius: 12px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.offer-card:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.offer-card.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.payment-option { border-radius: 999px; }

/* ---- Narrow screens ---- */
@media (max-width: 900px) {
  .closer-brief-grid,
  .context-groups { grid-template-columns: 1fr; }
  .closer-action-band { grid-template-columns: 1fr; }
  .lead-bot-chip { margin-left: 0; }
}

/* ============================================================
   BOT INBOX PREMIUM V1 — WhatsApp-Web-grade inbox experience
   Scope: Bot Inbox layout, hero ops bar, conversation list,
   chat column, contextual rail. Markup reorganization + CSS
   only — sync/send/identity logic and handlers untouched.
   ============================================================ */

/* ---- Hero: one intentional live-ops bar ---- */
.bot-inbox-hero {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 14px 18px;
}
.bot-inbox-hero-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.bot-inbox-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
}
.bot-inbox-hero-id h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.bot-inbox-hero-id p {
  margin: 1px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}
.bot-inbox-hero-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.bot-inbox-hero-stats .chip { font-size: 11px; min-height: 24px; line-height: 22px; }
.bot-inbox-hero .bot-inbox-syncbar {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.bot-inbox-hero .auto-sync-meta { font-size: 11px; color: var(--faint); }

/* ---- Workspace: list | chat | rail ---- */
.bot-inbox-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) minmax(240px, 290px);
  grid-template-areas: "list chat rail";
  gap: 10px;
  min-height: min(720px, calc(100vh - 230px));
}
.bot-inbox-list { grid-area: list; }
.bot-inbox-chatcol { grid-area: chat; }
.bot-inbox-rail { grid-area: rail; }

/* ---- Conversation list: a real inbox tray ---- */
.bot-inbox-list {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.bot-inbox-toolbar { display: grid; gap: 8px; }
.bot-inbox-toolbar .search-input { min-height: 32px; font-size: 12px; border-radius: 10px; }
.bot-inbox-filters {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.bot-filter-chip {
  flex: 0 0 auto;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.bot-filter-chip:hover { border-color: var(--primary); color: var(--primary); }
.bot-filter-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.bot-filter-chip.active .bot-filter-count { color: rgba(255, 255, 255, 0.85); }
.bot-filter-count { color: var(--faint); font-weight: 700; }

.bot-inbox-rows {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  margin: 0 -4px;
  padding: 0 4px;
}
.bot-inbox-section + .bot-inbox-section { margin-top: 10px; }
.bot-inbox-section-head {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--faint);
  padding: 4px 8px;
}
.bot-inbox-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  border: none;
  border-radius: 10px;
  background: transparent;
  padding: 9px 10px;
  margin: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease;
}
.bot-inbox-item + .bot-inbox-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 54px;
  right: 8px;
  border-top: 1px solid var(--line-soft);
}
.bot-inbox-item:hover { background: var(--surface-2); }
.bot-inbox-item.selected {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: inset 3px 0 0 var(--primary);
}
.bot-inbox-item.selected::before,
.bot-inbox-item.selected + .bot-inbox-item::before { border-color: transparent; }
.bot-inbox-item .wa-avatar { flex: 0 0 auto; }
.bot-inbox-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.bot-inbox-item-top h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bot-inbox-item-top time,
.bot-inbox-item-phone {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--faint);
}
.bot-inbox-item-last {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bot-inbox-item-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.bot-inbox-item-route { font-size: 10px; color: var(--faint); }

/* ---- Chat column: the conversation is the hero ---- */
.bot-inbox-chatcol {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.bot-inbox-chathead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.bot-inbox-chathead-main { min-width: 0; flex: 1; }
.bot-inbox-chathead-main h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bot-inbox-chathead-main p {
  margin: 1px 0 0;
  font-size: 11px;
  color: var(--muted);
}
.bot-inbox-history {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 0) 0 0 / 18px 18px,
    var(--bg-soft);
}
.bot-inbox-chat { display: grid; gap: 8px; }
.bot-inbox-chat .whatsapp-bubble {
  max-width: 76%;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}
.bot-inbox-chat .whatsapp-bubble.outbound {
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.bot-inbox-chat .whatsapp-bubble.inbound {
  margin-right: auto;
  border-bottom-left-radius: 4px;
}
.bot-inbox-chat .whatsapp-bubble.system {
  max-width: 88%;
  margin: 0 auto;
  text-align: center;
  box-shadow: none;
}
.bot-inbox-chat .whatsapp-bubble small {
  display: block;
  font-size: 9.5px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bot-inbox-chat.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  text-align: center;
}
.bot-inbox-chat.empty .whatsapp-bubble { max-width: 420px; text-align: left; }

/* ---- Contextual rail: lead summary card ---- */
.bot-inbox-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  overflow-y: auto;
}
.bot-inbox-rail-title {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.bot-inbox-detail-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.bot-inbox-detail-rows { display: grid; gap: 6px; margin: 0; }
.bot-inbox-kv { flex-direction: column; align-items: flex-start; gap: 3px; font-size: 12px; }
.bot-inbox-kv span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.bot-inbox-safety {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 11.5px;
}
.bot-inbox-safety.locked {
  background: color-mix(in srgb, var(--cyan) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 24%, transparent);
  color: var(--cyan);
}
.bot-inbox-safety.live {
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  color: var(--red);
}
.bot-inbox-safety span { color: var(--muted); font-size: 10.5px; }
.bot-inbox-rail-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.bot-inbox-rail .compact-actions .ghost-btn,
.bot-inbox-rail .compact-actions .primary-btn,
.bot-inbox-rail .compact-actions .danger-btn { font-size: 11.5px; }
.bot-inbox-admin-tools {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
}
.bot-inbox-admin-tools summary {
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.bot-inbox-admin-tools[open] summary { margin-bottom: 8px; }
.bot-inbox-admin-tools .bot-qa-warning { font-size: 10.5px; }

/* Identity / duplicates inside the rail stay compact */
.bot-inbox-rail .bot-inbox-identity,
.bot-inbox-rail .compact-notice { font-size: 12px; }
.bot-inbox-rail .identity-picker select { width: 100%; }

/* Empty states */
.bot-inbox-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  min-height: 220px;
  text-align: center;
  color: var(--muted);
  padding: 24px 14px;
}

/* ---- Responsive: chat keeps priority ---- */
@media (max-width: 1280px) {
  .bot-inbox-workspace {
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    grid-template-areas:
      "list chat"
      "list rail";
  }
  .bot-inbox-rail { overflow-y: visible; }
}
@media (max-width: 900px) {
  .bot-inbox-workspace {
    grid-template-columns: 1fr;
    grid-template-areas:
      "list"
      "chat"
      "rail";
  }
}

/* Bot Inbox: system events collapsed under the chat (admin peek only) */
.bot-inbox-system-log {
  margin-top: 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  padding: 6px 10px;
}
.bot-inbox-system-log summary {
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  user-select: none;
}
.bot-inbox-system-log[open] summary { margin-bottom: 8px; }
.bot-inbox-system-log .bot-inbox-chat.system-log { gap: 6px; }
.bot-inbox-system-log .whatsapp-bubble.system { opacity: 0.85; }

/* ============================================================
   WHATSAPP PHASE 2 — content consolidation helpers
   ============================================================ */
.command-ops-row { margin-top: 10px; }
.command-shortcuts {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
  align-items: center;
  gap: 6px;
}
.automation-explainer {
  margin: 0;
  padding: 8px 12px;
  border: 1px dashed var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 11.5px;
  color: var(--muted);
}
.automation-explainer strong { color: var(--text); }

/* ============================================================
   DASHBOARD EXEC SUMMARY V1 — premium executive cockpit
   Scope: Dashboard → Resumen only. Reuses the dash-card visual
   language (uppercase titles, summary lists, global bars).
   ============================================================ */
.exec-summary { gap: 12px; }

.exec-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 20px;
}
.exec-hero-copy h2 { margin: 2px 0 4px; font-size: 20px; letter-spacing: -0.02em; }
.exec-hero-copy p { margin: 0; font-size: 12px; color: var(--muted); }
.exec-leader {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 7%, transparent);
}
.exec-leader-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
}
.exec-leader strong { font-size: 16px; letter-spacing: -0.01em; }
.exec-leader-meta { font-size: 11px; color: var(--muted); }

.exec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.exec-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.exec-card .dash-card-title { margin-bottom: 0; }
.exec-card-meta { margin: 0; font-size: 11px; color: var(--muted); }
.exec-card-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
}
.exec-card-chart .bars, .exec-card-chart .bar-chart { min-height: 120px; }

.exec-big-number {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0 2px;
}
.exec-big-number strong { font-size: 34px; line-height: 1; letter-spacing: -0.03em; }
.exec-big-number span { font-size: 11.5px; color: var(--muted); }
.exec-big-number.hot strong { color: var(--primary-strong); }
.exec-gate-note {
  margin: 0;
  font-size: 10.5px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent);
  border-radius: 8px;
  padding: 6px 10px;
}

.exec-seller-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.exec-seller-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
}
.exec-seller-rank {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary-strong);
  font-size: 11px;
  font-weight: 800;
}
.exec-seller-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exec-seller-meta { font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.exec-seller-list strong { font-size: 12.5px; }

.exec-shortcuts { padding: 14px 16px; }
.exec-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.exec-shortcut {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.exec-shortcut:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}
.exec-shortcut-icon { font-size: 18px; }
.exec-shortcut-copy { display: grid; gap: 1px; min-width: 0; }
.exec-shortcut-copy strong { font-size: 12.5px; letter-spacing: -0.01em; }
.exec-shortcut-copy small { font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1280px) {
  .exec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exec-shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .exec-grid, .exec-shortcut-grid { grid-template-columns: 1fr; }
  .exec-leader { justify-items: start; text-align: left; }
}

/* ============================================================
   TYPOGRAPHY SYSTEM V1 — unified type scale across the CRM
   Appended last so it wins over older per-section rules.
   Scale (data-dense operator tool, consistent with the approved
   premium passes):
     page title 20 / compact ops header 18 / section 16 / panel 14
     body 13 / helper 12 / micro-label 10.5 uppercase
     chips 11 / buttons 13 (slim 12) / table th 11 · td 13
   ============================================================ */
:root {
  --type-page-title: 20px;
  --type-ops-title: 18px;
  --type-section: 16px;
  --type-panel: 14px;
  --type-body: 13px;
  --type-helper: 12px;
  --type-micro: 10.5px;
}

/* ---- Page titles: one size for every page hero ---- */
.page-hero h2,
.page-hero .panel-header h2,
.command-hero-copy h2,
.distribution-hero h2,
.sales-kit-hero h2,
.exec-hero-copy h2,
.monitoring-hero h2,
.whatsapp-hero h2,
.inbox-hero h2,
.lead-context-card > .panel-header h3 {
  font-size: var(--type-page-title);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
/* Compact operational headers stay denser on purpose */
.pipeline-head-titles h2,
.bot-inbox-hero-id h2,
.monitor-hero h3 {
  font-size: var(--type-ops-title);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---- Page subtitles ---- */
.page-hero p,
.page-hero .panel-header p,
.command-hero-copy p,
.distribution-hero p,
.sales-kit-hero p,
.exec-hero-copy p,
.whatsapp-hero p,
.inbox-hero p,
.monitor-hero p {
  font-size: var(--type-page-sub, 13px);
  line-height: 1.45;
  color: var(--muted);
}

/* ---- Eyebrows: one micro-label voice everywhere ---- */
.eyebrow {
  font-size: var(--type-micro);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- Section & panel titles ---- */
.panel-header h2,
.modal-header h2 { font-size: var(--type-section); font-weight: 700; }
.panel-header h3 { font-size: var(--type-panel); font-weight: 700; }
.panel-header p { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.panel.nested h3 { font-size: var(--type-panel); }

/* ---- Card micro-labels: same uppercase voice as the dashboard rail ---- */
.dash-card-title,
.dash-card-head h3,
.closer-brief-card h4,
.closer-action-band h4,
.context-group h4,
.bot-inbox-rail-title,
.settings-card h4 {
  font-size: var(--type-micro);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- Chips / badges / tags ---- */
.chip { font-size: 11px; font-weight: 600; }
.mini-badge { font-size: 10.5px; font-weight: 600; }
.tag { font-size: 10.5px; }
.status-pill b { font-size: 12.5px; }

/* ---- Buttons ---- */
.primary-btn, .ghost-btn, .danger-btn { font-size: var(--type-body); font-weight: 600; }
.primary-btn.slim, .ghost-btn.slim, .danger-btn.slim { font-size: var(--type-helper); }

/* ---- Tabs / subtabs ---- */
.main-nav-btn { font-size: var(--type-body); font-weight: 600; }
.subtab-btn { font-size: var(--type-helper); font-weight: 600; }
.training-tab { font-size: 12.5px; font-weight: 600; }
.subtab-group-label { font-size: 10px; letter-spacing: 0.07em; }

/* ---- Tables ---- */
.table th { font-size: 11px; }
.table td { font-size: var(--type-body); }
.table td .muted, .table td small { font-size: var(--type-helper); }

/* ---- Forms ---- */
.form-grid label,
.settings-grid label,
.settings-card label,
.toolbar-row label { font-size: var(--type-helper); font-weight: 600; }
input, select, textarea { font-size: var(--type-body); }

/* ---- Empty states ---- */
.empty h3 { font-size: 13.5px; font-weight: 700; }
.empty p { font-size: var(--type-helper); }

/* ---- Common body voices ---- */
.muted { font-size: 12.5px; }
.micro { font-size: var(--type-micro); }
.list-row p, .compact-row p { font-size: var(--type-helper); }

/* ============================================================
   DENSITY PASS V1 — tighter premium spacing across the CRM
   Goal: remove excess air (oversized paddings, tall KPI cards,
   wide header gaps) without crowding content. Appended last.
   ============================================================ */
/* Panels & heroes */
.panel { padding: 14px; }
.page-hero { padding: 12px 16px; }
.panel-header { gap: 12px; margin-bottom: 12px; }
.exec-hero { padding: 12px 16px; }
.exec-summary { gap: 10px; }
.exec-grid { gap: 10px; }
.exec-shortcuts { padding: 12px 14px; }

/* Global KPI row: was 82px tall with generous padding */
.kpi-card { min-height: 0; padding: 10px 14px; }
.kpi-card p { margin: 0 0 3px; }
.kpi-grid { margin-bottom: 12px; }

/* Period / filter rows */
.period-shell { padding: 8px 12px; }
.period-row { gap: 8px; }

/* Tabs rows: less vertical air between nav layers */
.training-tabs { margin-bottom: 2px; }
.config-group-tabs { margin-bottom: 0; }

/* Tables & list rows: tighter cells, same readability */
.table th, .table td { padding: 8px 10px; }
.list-row { padding: 10px 12px; }

/* Kanban: tighter columns + show-more control */
.stage-head { padding: 9px 11px; }
.stage-body { padding: 9px; gap: 9px; }
.stage-show-more {
  width: 100%;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.stage-show-more:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

/* Forms: tighter settings cards */
.settings-card { padding: 12px; }
.settings-grid { gap: 10px; }

/* Modal */
.modal-header { margin-bottom: 12px; }

/* ============================================
   PHASE A V1 — CONTEXTUAL EMPTY STATES + ALERT BADGE
   (External ideas Phase A: empty-state icon, topbar
   alert badge, subtle helper notes. Client-only.)
   ============================================ */

/* Empty state icon marker */
.empty-icon {
  display: block;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 2px;
  opacity: 0.85;
}

/* Topbar alert badge */
.alert-bell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
}

.alert-bell:hover {
  border-color: var(--red);
}

.alert-badge {
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 7px;
  min-width: 18px;
  text-align: center;
}

/* Subtle helper notes under heroes / group tabs */
.helper-note {
  font-size: 12px;
  margin: 6px 0 0;
  opacity: 0.75;
}

.exec-hero-copy .helper-note {
  margin-top: 2px;
}

/* ============================================
   GLOBAL LEAD SEARCH / CMD+K V1
   (Command palette overlay, topbar trigger,
   result rows. Client-only.)
   ============================================ */

.cmdk-backdrop {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 11vh;
}

.cmdk-panel {
  width: min(640px, 92vw);
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.cmdk-search-icon {
  font-size: 15px;
  opacity: 0.7;
}

.cmdk-input-row input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  padding: 4px 0;
}

.cmdk-hint {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
}

.cmdk-results {
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cmdk-help {
  margin: 0;
  padding: 18px 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}

.cmdk-results .empty {
  margin: 8px;
}

.cmdk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.cmdk-row:hover,
.cmdk-row.active {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.cmdk-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cmdk-row-main strong {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmdk-row-main small,
.cmdk-row-meta small {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmdk-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

@media (max-width: 900px) {
  .cmdk-trigger .cmdk-hint {
    display: none;
  }
}

/* ============================================
   NOTIFICATION CENTER LIGHT V1
   (Dropdown anchored to the topbar alert badge.
   Read-only; CTA navigates to Dashboard → Alertas.)
   ============================================ */

.notif-panel {
  position: fixed;
  z-index: 140;
  width: min(380px, calc(100vw - 24px));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  padding: 12px;
  gap: 8px;
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.notif-head strong {
  font-size: 13.5px;
  font-weight: 800;
}

.notif-count {
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 8px;
}

.notif-breakdown {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
}

.notif-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notif-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-3) 40%, transparent);
}

.notif-row .priority-badge {
  flex-shrink: 0;
  margin-top: 1px;
}

.notif-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif-row-body strong {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-row-body small {
  font-size: 11px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-cta {
  width: 100%;
}

.notif-panel .empty {
  margin: 4px 0;
}

/* ============================================
   FINANZAS CONSOLIDATION V2
   (Comisiones y pagos flow labels. UX only.)
   ============================================ */

.flow-label {
  margin: 4px 0 -6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================
   EQUIPO ROUTING CONSOLIDATION V2
   (Routing status card + rules summary. UX only.)
   ============================================ */

.routing-status-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.routing-status-chips {
  flex-wrap: wrap;
  gap: 6px;
}

/* ============================================
   V1 FINAL QA FIXES
   (Explicit overlay stacking + alerts cap button.)
   ============================================ */

/* Overlay stacking order: lead drawer (100/150) < notif panel (140) < command palette (160) */
.cmdk-backdrop {
  z-index: 160;
}

.alert-list + .stage-show-more,
.stage-show-more + .stage-show-more {
  margin-top: 10px;
}

/* ============================================
   TOP STRIP ALIGNMENT V1
   (Quote strip + period bar text aligned to the
   same 14px left axis as the KPI cards, with
   slightly larger type. Visual only.)
   ============================================ */

/* Text starts on the same axis in all three rows: shell side-padding removed,
   then 1px border + 14px padding = the KPI card's own 1px + 14px inset. */
.period-shell,
.compact-chrome .period-shell {
  padding-left: 0;
  padding-right: 0;
}

.strategy-row .strategy-quote-strip,
.compact-chrome .strategy-row .strategy-quote-strip {
  padding: 10px 14px;
}

.period-row,
.compact-chrome .period-row {
  padding: 8px 14px;
}

.strategy-row .strategy-quote-strip strong,
.compact-chrome .strategy-row .strategy-quote-strip strong {
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 800;
}

.period-summary,
.compact-chrome .period-summary {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

/* ============================================
   PIPELINE HEADER + SPACING POLISH V1
   (Kanban header compacted: quick actions first.
   Consistent 8px vertical rhythm at the top.)
   ============================================ */

/* Motivational quote sits ~2px higher; same readable size */
.compact-chrome .main {
  padding-top: 8px;
}

/* Even 8px rhythm: quote → period bar → KPIs → nav */
.compact-chrome .period-shell {
  gap: 8px;
  margin-bottom: 8px;
}

.compact-chrome .nav-shell {
  margin: 8px 0;
}

/* Kanban filter panel: just the quick-actions row, tight */
.pipeline-filters-compact {
  padding: 8px 10px;
  margin-bottom: 6px;
}

.pipeline-filters-compact .action-queue-row {
  margin: 0;
}

/* Slim account filter living inside the chips row */
.account-filter-slim {
  max-width: 96px;
  min-height: 26px;
  padding: 2px 8px;
  font-size: 11.5px;
}

.pipeline-queue-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* ============================================
   TOP HEADER SPACING FIX V1
   (The previous .compact-chrome .main rule never
   matched — compact-chrome is ON .main, not an
   ancestor. Correct selector + kill dead air:
   even 6-8px rhythm from topbar to KPI cards.)
   ============================================ */

.main.compact-chrome {
  padding-top: 4px;
}

.main.compact-chrome .period-shell {
  padding-top: 0;
  padding-bottom: 0;
  gap: 6px;
  margin-bottom: 6px;
}

.main.compact-chrome .kpi-grid {
  margin-bottom: 8px;
}

.main.compact-chrome .period-shell .period-row {
  margin-bottom: 0;
}

/* ============================================
   META CAPI V1.1
   (Conversions API section in Integraciones.)
   ============================================ */

.meta-capi-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.meta-capi-statusbar {
  flex-wrap: wrap;
  gap: 6px;
}

.meta-capi-form {
  align-items: flex-end;
  flex-wrap: wrap;
}

.meta-capi-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 170px;
  flex: 1;
}

.meta-capi-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 8px;
}

.meta-capi-toggle {
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.meta-capi-toggle span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-capi-toggle small {
  color: var(--muted);
  font-size: 11px;
}

.tag-red {
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
  color: var(--red);
}

.meta-capi-table td {
  vertical-align: top;
}

/* ============================================
   LEAD CARD SIMPLIFY V2
   (Removed the duplicate identity summary panel;
   the 360 grid is now main + side, two columns.)
   ============================================ */
.lead-profile-grid-2col {
  grid-template-columns: minmax(420px, 1.7fr) minmax(280px, .95fr);
}

/* ============================================
   VISUAL PORT FROM CORTEX — M2 SURFACE POLISH
   Geometry / motion / typography only. Every color reference uses ClubCommerce's own
   tokens (var(--primary)=green, var(--text), var(--line), var(--shadow*)), so it adapts
   to THIS palette — no source-CRM colors introduced. Topbar glass + nav underline were
   intentionally NOT ported (ClubCommerce already has its own). Appended last for override.
   ============================================ */

/* Smoother, springier interaction motion */
.primary-btn, .danger-btn, .icon-btn, .ghost-btn, .period-btn, .tab-btn,
.kpi-card, .panel, .list-row, .link-card, .seller-card, .lead-card {
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

/* Focus ring on every input + actionable control (green via --ring) */
input:focus-visible, select:focus-visible, textarea:focus-visible,
.primary-btn:focus-visible, .danger-btn:focus-visible, .ghost-btn:focus-visible,
.icon-btn:focus-visible, .period-btn:focus-visible, .tab-btn:focus-visible,
.main-nav-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
}

/* Cards lift on hover for a tactile, premium feel */
.kpi-card:hover, .panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
  border-color: color-mix(in srgb, var(--line) 60%, var(--primary) 12%);
}
.list-row:hover, .link-card:hover, .seller-card:hover {
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--line) 55%, var(--primary) 16%);
}
.kpi-card:hover::before { opacity: 1; }

/* Primary button: richer press + hover */
.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 30%, transparent);
  filter: brightness(1.03);
}
.primary-btn:active, .ghost-btn:active, .icon-btn:active, .danger-btn:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* Inputs: unified refined radius */
input, select, textarea, .search-input { border-radius: var(--radius-sm); }

/* Text selection in brand tint */
::selection { background: color-mix(in srgb, var(--primary) 30%, transparent); color: var(--text); }

/* Premium thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 18%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--primary) 45%, transparent); background-clip: padding-box; }

/* Panels get a faint brand-tinted top highlight for depth */
.panel { background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary) 3%, transparent), transparent 64px); }

/* Avatars: subtle ring */
.avatar { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); }

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .kpi-card, .panel, .primary-btn, .list-row, .link-card, .seller-card { transition: none; }
  .kpi-card:hover, .panel:hover, .primary-btn:hover { transform: none; }
}

/* ============================================
   VISUAL PORT FROM CORTEX — M1 RESPONSIVE (overflow containment + mobile rail)
   Conservative slice: prevent horizontal overflow and contain the kanban scroll on
   phones. Topbar reflow + table→cards are intentionally deferred (need DOM/data-label
   adaptation + on-device verification). No colors touched; all selectors exist in CC.
   ============================================ */

/* Contain the kanban so its horizontal rail never blows out the page width */
.kanban-wrap { min-width: 0; max-width: 100%; }

@media (max-width: 640px) {
  /* Kanban becomes a snap-scroll rail (one column per swipe) */
  .kanban { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .stage-column { scroll-snap-align: start; }

  /* Section headers / toolbars wrap instead of overflowing */
  .panel-header { flex-wrap: wrap; }
  .toolbar-row { flex-wrap: wrap; }
  .period-btn, .tab-btn { min-width: 0; }

  /* Pipeline quick-actions meta cluster wraps; account select can shrink to fit */
  .pipeline-queue-meta { display: flex; flex-wrap: wrap; width: 100%; }
  .account-filter-slim { max-width: 100%; flex: 0 1 auto; }
  .action-queue-row { flex-wrap: wrap; }
}

/* ============================================
   VISUAL PORT FROM CORTEX — M3 KPI SPARKLINES
   Geometry only. The sparkline SVG is tinted with ClubCommerce color tokens passed from
   renderKpis(); no source colors here. The mini-chart sits at the bottom of each KPI card.
   ============================================ */
.spark-card { display: flex; flex-direction: column; }
.spark-card .spark { width: 100%; height: 30px; margin-top: 8px; display: block; }

/* ============================================
   VISUAL PORT FROM CORTEX — M4 "ACCIONES RÁPIDAS" COMPACT DROPDOWN
   Turns the wide horizontal filter row into a small <details> whose chips stack in one
   narrow column, freeing toolbar width. Geometry only; all colors are ClubCommerce tokens.
   (Cortex's quick-links / discount panel was NOT ported — that is business logic.)
   ============================================ */
.actions-picker { position: relative; }
.actions-picker > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  min-height: 30px; padding: 0 12px;
  font-size: 12px; font-weight: 800;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--text);
}
.actions-picker > summary::-webkit-details-marker { display: none; }
.actions-picker[open] > summary,
.actions-picker.has-filter > summary {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  color: var(--primary);
}
.actions-picker .pp-caret { color: var(--muted); font-size: 10px; }
.actions-picker .actions-panel {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  min-width: 200px; max-width: 280px;
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow-pop, var(--shadow));
}
.actions-picker .actions-panel .action-chip {
  width: 100%; text-align: left; min-height: 30px;
}

/* ===================================================================
   M-TOPBAR REORG — visual port from Cortex (2026-06-14)
   GEOMETRY/TYPOGRAPHY ONLY. Colors come from CC's existing palette
   tokens; var(--primary) resolves to CC GREEN #1fad75 — NOT Cortex gold.
   =================================================================== */

/* Segmented theme switch (replaces the single toggle button) */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}
.theme-opt {
  min-width: 34px;
  min-height: 30px;
  padding: 0 6px;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  opacity: 0.55;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.theme-opt:hover { opacity: 0.85; }
.theme-opt.active {
  opacity: 1;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* Closer focus selector: full text dropdown on desktop; emoji on phone */
.seller-focus-wrap { position: relative; display: inline-flex; align-items: center; }
.seller-focus-emoji { display: none; }
.seller-focus-wrap #seller-focus { width: 210px; }

/* Logout: text label on desktop, door emoji on phone */
.t-exit { display: none; }

/* Forced wrap helper for the topbar action cluster (phone-only) */
.ta-break { display: none; }

@media (max-width: 640px) {
  /* Emoji-only logout: drop the text, show the door */
  .top-actions .t-label { display: none; }
  .top-actions [data-action="logout"] .t-exit { display: inline; }
  .top-actions [data-action="logout"] { min-width: 44px; padding: 0 10px; }
  .top-actions .theme-switch { flex: 0 0 auto; }
}

/* ===================================================================
   M1-DEEP + POLISH RESPONSIVE — visual port from Cortex (2026-06-14)
   GEOMETRY / TYPOGRAPHY / RESPONSIVE ONLY. Every color resolves through
   CC's existing tokens (--line/--line-soft/--surface*/--muted); no :root,
   no --primary/--accent edits, no Cortex gold.
   =================================================================== */

/* --- Lead table: contained scroll on desktop, labelled cards on phone.
       Pairs with renderLeadTable() emitting .lead-table-wrap + per-<td>
       data-label. One wrapper change card-ifies every lead-list view. --- */
.lead-table-wrap { overflow-x: auto; min-width: 0; max-width: 100%; }

@media (max-width: 640px) {
  /* Filter header above the table stacks instead of overflowing */
  .pipeline-head { flex-direction: column; align-items: stretch; }
  .pipeline-head-tools { flex-wrap: wrap; width: 100%; }
  .pipeline-head-tools .search-input { flex: 1 1 100%; width: 100%; }

  .lead-table-wrap { overflow-x: visible; }
  .lead-table-wrap table,
  .lead-table-wrap thead,
  .lead-table-wrap tbody,
  .lead-table-wrap tr,
  .lead-table-wrap td { display: block; width: 100%; }
  .lead-table-wrap thead { display: none; }
  .lead-table-wrap tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 4px 12px;
    background: var(--surface-3);
  }
  .lead-table-wrap td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border: none;
    text-align: right;
    min-height: 0;
  }
  .lead-table-wrap td + td { border-top: 1px solid var(--line-soft); }
  .lead-table-wrap td::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: left;
    flex: 0 0 auto;
  }
}

/* --- Wide analytics tables self-scroll on phones instead of widening the
       page. The lead list card-ifies above; distribution/rules tables already
       card-ify natively, so all three are excluded. --- */
@media (max-width: 640px) {
  table.table:not(.lead-table-wrap table):not(.distribution-table):not(.rules-table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* --- Mobile topbar reorder: pack controls into tidy 40px rows. Extends the
       topbar @640 block above (does NOT re-declare t-label/t-exit). Adapted to
       CC's controls: NO mask-money, NO Cortex period-picker; ADDS 💸 Saldos. --- */
@media (max-width: 640px) {
  .top-actions { gap: 8px; align-items: stretch; }
  .top-actions .cmdk-trigger,
  .top-actions .theme-switch,
  .top-actions .language-select,
  .top-actions .alert-bell,
  .top-actions [data-tab="liquidaciones"],
  .top-actions [data-action="logout"],
  .seller-focus-wrap,
  .seller-focus-emoji,
  .top-actions .export-menu > summary,
  .top-actions [data-action="new-lead"],
  .top-actions > .chip {
    height: 40px;
    min-height: 40px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 12px;
    box-sizing: border-box;
    align-items: center;
  }
  .top-actions .alert-bell,
  .top-actions [data-action="logout"],
  .seller-focus-wrap {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Row 1: search (grows) · theme · ES · bell · door */
  .top-actions .cmdk-trigger { order: 1; flex: 1 1 0; min-width: 0; overflow: hidden; justify-content: flex-start; }
  .top-actions .cmdk-trigger .cmdk-hint { display: none; }
  .top-actions .theme-switch { order: 2; flex: 0 0 auto; padding: 3px; gap: 2px; }
  .top-actions .theme-switch .theme-opt { height: 100%; display: inline-flex; align-items: center; justify-content: center; }
  .top-actions .language-select { order: 3; flex: 0 0 56px; width: 56px !important; padding: 0 6px; text-align: center; }
  .top-actions .alert-bell { order: 4; }
  .top-actions [data-action="logout"] { order: 5; }
  /* Forced row break */
  .ta-break { display: block; flex: 0 0 100%; width: 100%; height: 0; margin: 0; padding: 0; border: 0; }
  .ta-break-1 { order: 6; }
  /* Row 2: closer emoji · Saldos · Datos · Agregar lead */
  .seller-focus-wrap { order: 7; position: relative; }
  .seller-focus-emoji {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; border: 1px solid var(--line-soft); background: var(--surface);
    font-size: 17px; line-height: 1;
  }
  .seller-focus-wrap #seller-focus {
    position: absolute; inset: 0; width: 100% !important; height: 100%;
    margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
  }
  .top-actions [data-tab="liquidaciones"] { order: 8; flex: 0 0 auto; padding: 0 10px; justify-content: center; }
  .top-actions .export-menu { order: 9; flex: 0 0 auto; }
  .top-actions .export-menu > summary { justify-content: center; padding: 0 10px; }
  .top-actions [data-action="new-lead"] { order: 10; flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 10px; }
  .top-actions > .chip { order: 11; flex: 1 1 100%; display: flex; align-items: center; justify-content: center; }
}

/* --- Modals go full-bleed and wrap their header/action rows on phones.
       Height cap is left to CC's existing modal rules. --- */
@media (max-width: 640px) {
  .modal-backdrop { padding: 10px; place-items: start center; }
  .modal-card { width: 100%; padding: 16px; }
  .modal-header, .modal-head, .modal-actions { flex-wrap: wrap; }
  .lead-profile-grid-2col .panel, .lead-profile-side .panel { min-width: 0; }
}

/* --- Lead-detail 2-col profile collapses to one column below 900px so wide
       values never clip (CC's other profile grids already collapse). --- */
@media (max-width: 900px) {
  .lead-profile-grid-2col { grid-template-columns: 1fr; }
}

/* --- Narrowest phones: final tightening pass (CC had no <=430px tier). --- */
@media (max-width: 430px) {
  .main { padding: 14px 10px 28px; }
  .kpi-card strong { font-size: 20px; }
  .panel { padding: 14px; }
  .brand h1 { font-size: 15px; }
}

/* ===================================================================
   M5 — PERIOD PICKER (Shopify-style) — visual port from Cortex (2026-06-14)
   GEOMETRY/TYPOGRAPHY only. Every color resolves through CC tokens; the one
   hardcoded hex (#00150b on .cal-day.endpoint) is CC's OWN on-primary ink,
   identical to .primary-btn — NOT a Cortex color. No :root, no gold.
   =================================================================== */
.period-picker { position: relative; display: inline-flex; }
.period-picker-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
}
.period-picker-btn.open {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  color: var(--primary);
}
.period-picker .pp-caret { color: var(--muted); font-size: 10px; }
.period-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 190;
  background: color-mix(in srgb, #000 28%, transparent);
}
.period-modal {
  position: absolute;
  z-index: 200;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  width: min(680px, 94vw);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-pop, var(--shadow));
  overflow: hidden;
}
.pm-presets {
  display: flex;
  flex-direction: column;
  flex: 0 0 170px;
  padding: 8px;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
}
.pm-preset {
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.pm-preset:hover { background: var(--surface-3); }
.pm-preset.active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  font-weight: 800;
}
.pm-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px;
  display: grid;
  gap: 14px;
}
.pm-rel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}
.pm-rel-label { color: var(--muted); font-weight: 700; }
.pm-rel-n { width: 64px; text-align: center; }
.pm-rel-unit { min-width: 110px; }
.pm-include { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; }
.pm-cals {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  position: relative;
}
.cal-month { flex: 0 0 auto; }
.cal-title { margin: 0 0 10px; text-align: center; font-weight: 800; font-size: 13px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 30px); gap: 2px; }
.cal-dow {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  padding-bottom: 4px;
  text-transform: uppercase;
}
.cal-cell { min-height: 30px; }
.cal-day {
  min-height: 30px;
  min-width: 30px;
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.cal-day:hover { background: var(--surface-3); }
.cal-day.in-range {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border-radius: 0;
}
.cal-day.endpoint {
  background: var(--primary);
  color: #00150b;
  font-weight: 800;
}
.cal-day.future { color: var(--muted); opacity: 0.45; pointer-events: none; }
.cal-nav {
  position: absolute;
  top: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  z-index: 2;
}
.cal-nav.prev { left: 0; }
.cal-nav.next { right: 0; }
.pm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.pm-range { font-size: 13px; font-weight: 700; color: var(--muted); }
.pm-actions { display: flex; gap: 8px; }

@media (max-width: 760px) {
  .period-modal {
    position: fixed;
    left: 8px;
    right: 8px;
    top: 56px;
    bottom: auto;
    width: auto;
    flex-direction: column;
    max-height: calc(100vh - 72px);
    overflow: auto;
  }
  .pm-presets {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .pm-preset {
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
  }
  .cal-second { display: none; }
  .cal-grid { grid-template-columns: repeat(7, 1fr); }
  .cal-day { min-width: 0; width: 100%; }
}

/* ===================================================================
   MOBILE TOPBAR: match Cortex layout (2026-06-14)
   Row 1 = search · theme · ES · bell · door.  Row 2 = closer · period ·
   Saldos · Datos · Agregar lead.  Identity chip = own full-width row.
   The period picker moves OFF row 1 (it was crowding it and pushing the
   logout button onto a lonely row) and sits on row 2 next to the closer.
   =================================================================== */
@media (max-width: 640px) {
  /* Period picker → row 2, capped so a long (custom-range) label can't blow
     out the row; the label ellipsizes instead of pushing siblings off-screen. */
  .top-actions .topbar-period { order: 8; flex: 0 1 auto; min-width: 0; }
  .top-actions .topbar-period .period-picker-btn {
    height: 40px;
    border-radius: 12px;
    font-size: 13px;
    max-width: 150px;
  }
  .top-actions .topbar-period .period-picker-btn span:not(.pp-caret) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Hide Saldos on phones — Cortex has no such button, and it was the 5th item
     that broke row 2. Removing it makes row 2 match Cortex exactly:
     closer · period · Datos · Agregar lead. Saldos stays reachable via Finanzas. */
  .top-actions [data-tab="liquidaciones"] { display: none; }
  .top-actions .export-menu { order: 10; }
  /* Agregar lead: flex-basis auto so it stays inline on row 2 when it fits
     (like Cortex) but cleanly wraps to its own full-width row when the row is
     too tight — it can never clip either way. */
  .top-actions [data-action="new-lead"] { order: 11; flex: 1 1 auto; }
  /* Identity chip spans the full row (like Cortex). The desktop .top-actions
     .chip rule caps it at max-width:190px — lift that cap on phones. */
  .top-actions > .chip {
    order: 12;
    max-width: none;
    width: 100%;
    flex: 1 1 100%;
    justify-content: center;
  }

  /* Hide the Total leads KPI tile on phones (matches Cortex — the headline
     count is redundant on a small screen; desktop is unchanged). */
  .kpi-total-leads { display: none; }

  /* KPI cards as a 2-column grid (like Cortex) instead of the 5-column
     horizontal-scroll strip. With Total leads hidden, the 4 remaining cards
     (Cerrados · Interesados · Revenue · Descuentos) tile as a clean 2x2.
     Overrides the late no-media chrome-expanded 5-col rule (styles.css ~7519);
     minmax(0,1fr) lets the columns shrink so there is no horizontal scroll. */
  .kpi-grid.chrome-expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Kanban "Acciones rápidas" toolbar: collapse to just the dropdown button.
     On phones the informational chips (pipeline-ready count, current card mode)
     and the account filter sprawled below the button and looked messy — hide
     them so the toolbar is one clean control. A clear-search chip, if active,
     still shows. */
  .action-queue-row .pipeline-result-chip,
  .action-queue-row .pipeline-mode-chip,
  .action-queue-row .account-filter-slim { display: none; }
  .action-queue-row { gap: 8px; }
  .action-queue-row .actions-picker { width: 100%; }
  .action-queue-row .actions-picker > summary { width: 100%; justify-content: space-between; }
  /* Filter options come out in a wrapping ROW (not a vertical stack). */
  .actions-picker .actions-panel { flex-direction: row; flex-wrap: wrap; max-width: none; width: 100%; }
  .actions-picker .actions-panel .action-chip { width: auto; flex: 0 0 auto; }
}

/* ===================================================================
   BRAND LOGO LOCKUP — real ClubCommerce logo (2026-06-15)
   Replaces the "CC" square mark in the topbar + login with the full
   gradient lockup (public/logo-full.png). White-label upload overrides
   via whiteLabelLogoSrc().
   =================================================================== */
/* No pill: the logo src is theme-aware (whiteLabelLogoSrc) — dark "club" on the
   light theme, white "club" on the dark theme — so the lockup sits directly. */
/* Theme-aware lockup (Adrian's artwork): dark-"club" on light, white-"club"
   on dark, backgrounds stripped so it sits cleanly on the topbar + circuit. */
.brand-logo {
  height: 42px;
  width: auto;
  max-width: 230px;
  object-fit: contain;
  display: block;
}
.auth-logo-img {
  height: 76px;
  width: auto;
  max-width: 92%;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
}
@media (max-width: 640px) {
  .brand-logo { height: 34px; max-width: 180px; }
  .auth-logo-img { height: 60px; }
}

/* ============================================================
   CIRCUIT THEME LAYER  (2026-06-15)
   Light/"sun" theme gets the circuit-board background Adrian
   passed; cards echo the same PCB trace language. CSS + 3 assets
   only (circuit-bg.jpg, circuit-card.svg, circuit-card-dark.svg).
   Palette untouched — traces are neutral gray on light / faint
   green on dark. The DARK theme background is left exactly as-is.
   ============================================================ */

/* ---- Page background = circuit board (LIGHT theme only) ---- */
:root:not([data-theme="dark"]) .app-shell,
:root:not([data-theme="dark"]) .auth-screen {
  background-color: #eef1f4;
  background-image:
    radial-gradient(circle at 50% 46%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.14) 40%,
      rgba(255, 255, 255, 0) 60%),
    url("/circuit-bg.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
}

/* Phones: iOS ignores fixed attachment — let it scroll, lean on
   the SVG's own centered glow so dense content stays legible. */
@media (max-width: 640px) {
  :root:not([data-theme="dark"]) .app-shell,
  :root:not([data-theme="dark"]) .auth-screen {
    background-attachment: scroll, scroll;
    background-size: cover, cover;
  }
}

/* ---- Cards echo the circuit language (top-right PCB motif) ---- */
/* background-image only: the solid --surface color set in the
   layers above stays as the card fill; the SVG corner paints over
   it and is clipped to the card's rounded corner. */
.kpi-card,
.panel:not(.nested):not(.section-toolbar-panel) {
  background-image: url("/circuit-card.svg");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 116px auto;
}
:root[data-theme="dark"] .kpi-card,
:root[data-theme="dark"] .panel:not(.nested):not(.section-toolbar-panel) {
  background-image: url("/circuit-card-dark.svg");
}
/* Highlight/primary panels keep their tinted gradient fill — skip
   the motif there so it doesn't fight the green wash. */
.highlight-panel {
  background-image: none;
}

/* ============================================================
   MOBILE / TABLET QA LAYER  (2026-06-15)
   Fixes from a responsive audit. All scoped to phone (≤640) or
   tablet (641–1024); no desktop (>1024), no color/palette changes.
   ============================================================ */

/* ---- TABLET (641–1024px, touch) ---- */
@media (min-width: 641px) and (max-width: 1024px) {
  /* KPI row stayed 5-col on tablet (the late no-media .chrome-expanded
     rule at ~7519 outweighed the @1100 collapse) → overflowed the low
     tablet end. Match it to the phone 2-col intent. */
  .kpi-grid.chrome-expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  /* Comfortable tap targets: the 40px treatment was keyed to ≤640 only,
     leaving the whole tablet touch range at desktop 30/38px controls. */
  .top-actions .ghost-btn,
  .top-actions .primary-btn,
  .top-actions .cmdk-trigger,
  .top-actions .alert-bell,
  .top-actions .export-menu > summary,
  .top-actions [data-tab="liquidaciones"],
  .top-actions [data-action="logout"],
  .top-actions .language-select,
  .seller-focus-wrap #seller-focus,
  .period-picker-btn,
  .main-nav-btn {
    min-height: 40px;
  }
  .theme-switch { padding: 3px; }
  .theme-opt { min-height: 34px; min-width: 40px; }
}

/* ---- PHONE (≤640px) ---- */
@media (max-width: 640px) {
  /* iOS Safari auto-zooms when a focused field is <16px. Bump form
     controls to 16px on phone so tapping a field doesn't jolt-zoom. */
  input, select, textarea, .search-input { font-size: 16px; }

  /* Lead modal: footer + close button were 30px → below the 40px floor. */
  .modal-card .modal-actions .ghost-btn,
  .modal-card .modal-actions .primary-btn,
  .modal-card .modal-actions .danger-btn {
    min-height: 44px;
    flex: 1 1 0;
  }
  .modal-header .icon-btn,
  .modal-head .icon-btn {
    min-height: 40px;
    width: 40px;
    min-width: 40px;
  }

  /* Pipeline: snap columns were pinned to the 168px desktop floor → each
     filled <half the 390px screen. Widen to ~one comfortable card per swipe. */
  .kanban {
    grid-template-columns: repeat(var(--col-count, 6), 84vw);
    min-width: 0;
    gap: 10px;
  }
  .stage-column {
    min-width: 84vw;
    scroll-snap-align: center;
  }
  .kanban-wrap { scroll-padding-inline: 14px; }

  /* Lead cards (table→card transform): long emails/values couldn't shrink
     (default min-width:auto) → row overflow. Allow wrapping. */
  .lead-table-wrap td {
    flex-wrap: wrap;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .lead-table-wrap td > * { min-width: 0; }

  /* Config: the widest admin tables force white-space:nowrap globally on
     phone; let their descriptive cells wrap so the scroll stays short. */
  .custom-fields-admin table.table td,
  .agent-tools-admin table.table td {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 220px;
  }
  /* Slim row-action buttons in settings/danger tables → comfortable tap. */
  .danger-zone-panel .ghost-btn.slim,
  .danger-zone-panel .danger-btn.slim,
  .custom-fields-admin .ghost-btn.slim,
  .custom-fields-admin .danger-btn.slim,
  .agent-tools-admin .ghost-btn.slim {
    min-height: 40px;
    padding: 8px 12px;
  }
}

/* Period-picker calendar month nav was 28px on phone → 40px. */
@media (max-width: 760px) {
  .pm-cals .cal-nav { width: 40px; height: 40px; }
}

/* ============================================================
   HEADER: brand + centered motivational message (2026-06-15)
   Logo +4px and centered on mobile/tablet (where the topbar stacks);
   DESKTOP keeps the logo left-aligned as before. The strategy/
   motivational strip is centered + 2px bigger. Prefix labels
   ("Regla comercial:" etc.) removed in app.js.
   ============================================================ */
/* Center the logo only where the topbar stacks (mobile/tablet). On
   desktop the topbar stays a row (logo left), so this is a no-op there. */
@media (max-width: 1100px) {
  .brand { justify-content: center; }
}
/* Logo +4px (42→46; mobile 34→38). */
.brand-logo { height: 46px; }
@media (max-width: 640px) { .brand-logo { height: 38px; } }
/* Motivational message: centered + 2px bigger. */
.strategy-row .strategy-quote-strip { justify-content: center; text-align: center; }
.strategy-row .strategy-quote-strip strong { font-size: clamp(17px, 1.15vw, 19px); }