:root {
  --bg: #f7f3ff;
  --bg-soft: #fbfaff;
  --panel: rgba(255, 255, 255, 0.94);
  --panel-2: #ffffff;
  --panel-3: #f1ecff;
  --text: #171227;
  --muted: #6f6880;
  --line: rgba(92, 70, 150, 0.16);
  --accent: #7c3aed;
  --accent-2: #a855f7;
  --accent-3: #ede9fe;
  --danger: #ef4444;
  --success: #16a34a;
  --warning: #f59e0b;
  --info: #2563eb;
  --shadow: 0 24px 70px rgba(80, 53, 156, 0.16);
  --soft-shadow: 0 14px 38px rgba(80, 53, 156, 0.10);
  --radius: 22px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(214, 165, 30, 0.16), transparent 34rem),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.06), transparent 28rem),
    var(--bg);
  color: var(--text);
}

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

button {
  cursor: pointer;
}

.app-shell {
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 800;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 3.7vw, 4rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

h1 span {
  color: var(--accent);
}

h2 {
  letter-spacing: -0.035em;
}

.topbar-actions,
.toolbar-buttons,
.stack-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.88);
  backdrop-filter: blur(18px);
}

.tab {
  border: 0;
  border-radius: 999px;
  padding: 11px 16px;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
  font-weight: 800;
  transition: 0.18s ease;
}

.tab:hover,
.tab.active {
  background: var(--accent);
  color: #111;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.card,
.lead-card,
.task-card,
.metric-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)), var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 180px 180px auto auto;
  gap: 14px;
  align-items: end;
  padding: 16px;
  margin-bottom: 20px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0b0b0b;
  color: var(--text);
  outline: none;
  padding: 12px 13px;
  transition: 0.18s ease;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(214, 165, 30, 0.9);
  box-shadow: 0 0 0 3px rgba(214, 165, 30, 0.12);
}

.btn {
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 12px 15px;
  font-weight: 900;
  transition: 0.18s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary {
  background: var(--accent);
  color: #111;
}

.btn-primary:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
}

.btn-ghost {
  background: #111;
  color: var(--text);
  border-color: var(--line);
}

.btn-ghost:hover,
.btn-muted:hover {
  border-color: var(--accent);
  color: var(--accent-2);
}

.btn-muted {
  background: var(--panel-2);
  color: var(--muted);
  border-color: var(--line);
}

.btn-danger {
  background: rgba(226, 85, 85, 0.14);
  border-color: rgba(226, 85, 85, 0.5);
  color: #ffb1b1;
}

.btn-whatsapp {
  background: rgba(37, 211, 102, 0.14);
  border-color: rgba(37, 211, 102, 0.45);
  color: #bfffd5;
}

.btn-whatsapp:hover:not(:disabled) {
  border-color: rgba(37, 211, 102, 0.9);
  color: #e0ffea;
}

.btn:disabled,
.view-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.view-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0b0b0b;
}

.view-btn {
  border: 0;
  border-radius: 10px;
  padding: 9px 11px;
  background: transparent;
  color: var(--muted);
  font-weight: 950;
  white-space: nowrap;
}

.view-btn.active,
.view-btn:hover {
  background: var(--accent);
  color: #111;
}

.file-btn {
  position: relative;
  overflow: hidden;
}

.file-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 14px;
}

.section-head p {
  color: var(--muted);
  margin-bottom: 0;
}

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

.lead-grid.list-view {
  grid-template-columns: 1fr;
}

.lead-grid.list-view .lead-card {
  min-height: auto;
}

.lead-grid.list-view .lead-info {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lead-grid.list-view .lead-summary {
  max-width: 980px;
}

.lead-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 260px;
}

.lead-card.archived {
  opacity: 0.82;
}

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

.lead-name {
  font-size: 1.18rem;
  font-weight: 950;
  letter-spacing: -0.035em;
  margin-bottom: 4px;
}

.lead-meta,
.lead-summary,
.task-meta {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--panel-3);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 900;
}

.badge.hot {
  color: #111;
  background: var(--accent);
  border-color: var(--accent);
}

.badge.success {
  color: #d6ffe2;
  background: rgba(81, 200, 120, 0.16);
  border-color: rgba(81, 200, 120, 0.35);
}

.badge.danger {
  color: #ffd2d2;
  background: rgba(226, 85, 85, 0.16);
  border-color: rgba(226, 85, 85, 0.35);
}

.badge.warning {
  color: #ffe2ad;
  background: rgba(243, 178, 59, 0.16);
  border-color: rgba(243, 178, 59, 0.35);
}

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

.info-box {
  background: #0d0d0d;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px;
}

.info-box span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.info-box strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-actions {
  margin-top: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.card-actions .btn {
  padding: 9px 10px;
  font-size: 0.8rem;
}

.empty-state {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 36px;
  text-align: center;
  color: var(--muted);
}

.hidden {
  display: none !important;
}

.task-list {
  display: grid;
  gap: 12px;
}

.task-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.task-title {
  font-weight: 950;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.metric-card {
  padding: 17px;
}

.metric-card p {
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 8px;
}

.metric-card strong {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  letter-spacing: -0.055em;
}

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

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

.settings-card {
  padding: 18px;
}

.settings-card p {
  color: var(--muted);
  line-height: 1.45;
}

.danger-card {
  border-color: rgba(226, 85, 85, 0.35);
}

.breakdown {
  display: grid;
  gap: 10px;
  padding-top: 8px;
}

.breakdown-row {
  display: grid;
  grid-template-columns: 170px 1fr 42px;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-weight: 800;
}

.progress {
  height: 10px;
  border-radius: 999px;
  background: #0a0a0a;
  overflow: hidden;
  border: 1px solid var(--line);
}

.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.system-info {
  display: grid;
  gap: 10px;
  color: var(--muted);
  font-weight: 800;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal {
  width: min(1050px, 100%);
  max-height: min(92vh, 1100px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 18px;
  background: rgba(17, 17, 17, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #0b0b0b;
  color: var(--text);
  font-weight: 950;
}

.lead-form {
  padding: 18px;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  margin: 0 0 16px;
  background: rgba(255,255,255,0.018);
}

legend {
  padding: 0 8px;
  color: var(--accent-2);
  font-weight: 950;
}

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

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

.checkbox-label {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 45px;
  color: var(--text);
}

.checkbox-label input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.modal-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 0 0;
  background: linear-gradient(transparent, var(--panel) 22%);
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  max-width: 360px;
  background: var(--accent);
  color: #111;
  font-weight: 950;
  border-radius: 14px;
  padding: 13px 16px;
  box-shadow: var(--shadow);
}

@media (max-width: 1100px) {
  .toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .lead-grid,
  .metrics-grid,
  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: min(100% - 18px, 1440px);
    padding-top: 14px;
  }

  .topbar,
  .section-head,
  .task-card {
    align-items: stretch;
    flex-direction: column;
    display: flex;
  }

  .topbar-actions,
  .toolbar-buttons,
  .view-toggle {
    width: 100%;
  }

  .topbar-actions .btn,
  .toolbar-buttons .btn,
  .toolbar-buttons .file-btn {
    flex: 1;
  }

  .tabs {
    border-radius: 18px;
  }

  .toolbar,
  .lead-grid,
  .lead-grid.list-view .lead-info,
  .metrics-grid,
  .split-grid,
  .settings-grid,
  .form-grid,
  .form-grid-wide {
    grid-template-columns: 1fr;
  }

  .modal-backdrop {
    padding: 8px;
  }

  .modal {
    max-height: 96vh;
    border-radius: 18px;
  }

  .lead-info {
    grid-template-columns: 1fr;
  }

  .breakdown-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .modal-actions {
    flex-direction: column-reverse;
  }

  .modal-actions .btn {
    width: 100%;
  }
}

/* V4 — Dashboard profesional y métricas editables */
.metrics-editor {
  padding: 18px;
  margin-bottom: 16px;
}

.metrics-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.metrics-editor-head h3 {
  margin-bottom: 6px;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
}

.metrics-editor-head p:not(.eyebrow) {
  color: var(--muted);
  margin-bottom: 0;
  line-height: 1.45;
}

.month-label {
  min-width: 190px;
}

.manual-metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.manual-metrics-grid label:last-child {
  grid-column: span 2;
}

.metrics-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.metric-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.metric-card-top p {
  margin-bottom: 0;
}

.source-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 4px 8px;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  color: var(--muted);
  background: #0c0c0c;
}

.source-pill.manual {
  color: #111;
  background: var(--accent);
  border-color: var(--accent);
}

.source-pill.auto {
  color: #bfffd5;
  border-color: rgba(37, 211, 102, 0.45);
  background: rgba(37, 211, 102, 0.12);
}

.source-pill.calc {
  color: #cfc7ff;
  border-color: rgba(160, 140, 255, 0.45);
  background: rgba(160, 140, 255, 0.12);
}

@media (max-width: 1100px) {
  .manual-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .metrics-editor-head,
  .metrics-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .manual-metrics-grid,
  .manual-metrics-grid label:last-child {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .month-label {
    min-width: 0;
  }
}


/* V4 — Dashboard profesional */
.dashboard-pro {
  display: grid;
  gap: 16px;
}

.hero-metrics .pro-metric-card {
  position: relative;
  overflow: hidden;
  min-height: 142px;
  background:
    linear-gradient(140deg, rgba(214,165,30,0.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012)),
    var(--panel);
}

.hero-metrics .pro-metric-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -42px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid rgba(214,165,30,0.22);
  background: radial-gradient(circle, rgba(214,165,30,0.12), transparent 62%);
}

.pro-metric-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
  position: relative;
  z-index: 1;
}

.pro-metric-card strong,
.pro-metric-card .metric-card-top {
  position: relative;
  z-index: 1;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.75fr);
  gap: 16px;
}

.chart-card {
  padding: 18px;
  min-height: 100%;
}

.chart-card-large {
  min-height: 420px;
}

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

.chart-head h3 {
  margin-bottom: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.65rem);
  letter-spacing: -0.035em;
}

.trend-chart {
  display: grid;
  gap: 18px;
}

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--line);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot-leads,
.bar-leads { background: var(--accent); }
.dot-calls,
.bar-calls { background: #e66aa9; }
.dot-sales,
.bar-sales { background: #5ddc8b; }
.dot-money,
.bar-money { background: #7b8cff; }

.trend-bars {
  height: 315px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  padding: 12px 8px 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.055);
}

.trend-month {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 9px;
  align-items: end;
  min-width: 0;
}

.trend-month strong {
  color: var(--muted);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-pill {
  justify-self: center;
  padding: 5px 7px;
  border-radius: 999px;
  color: #dfe4ff;
  background: rgba(123,140,255,0.13);
  border: 1px solid rgba(123,140,255,0.32);
  font-size: 0.7rem;
  font-weight: 950;
}

.bar-stack {
  height: 235px;
  display: grid;
  grid-template-columns: repeat(4, minmax(5px, 1fr));
  align-items: end;
  gap: 5px;
}

.bar {
  position: relative;
  min-height: 6px;
  border-radius: 999px 999px 5px 5px;
  opacity: 0.9;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}

.bar b {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 950;
}

.funnel-chart {
  display: grid;
  gap: 18px;
}

.funnel-row {
  display: grid;
  gap: 9px;
}

.funnel-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.84rem;
}

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

.funnel-bar-wrap {
  height: 48px;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #080808;
}

.funnel-bar {
  height: 100%;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 14px;
  color: #101010;
  font-weight: 950;
  border-radius: inherit;
  transition: width 0.22s ease;
}

.funnel-bar.step-0 { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.funnel-bar.step-1 { background: linear-gradient(90deg, #e66aa9, #ff95c8); }
.funnel-bar.step-2 { background: linear-gradient(90deg, #5ddc8b, #a3ffc3); }

.business-metrics {
  margin-top: 2px;
}

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

.pro-breakdown {
  gap: 12px;
}

.pro-breakdown .breakdown-row {
  grid-template-columns: minmax(112px, 0.9fr) minmax(110px, 1fr) 36px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 14px;
  background: rgba(255,255,255,0.018);
}

.pro-breakdown .progress {
  height: 12px;
  background: #070707;
}

.health-panel {
  display: grid;
  gap: 10px;
}

.health-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.025);
}

.health-item > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #090909;
  border: 1px solid var(--line);
}

.health-item strong,
.health-item small {
  display: block;
}

.health-item small {
  color: var(--muted);
  font-weight: 800;
  margin-top: 2px;
}

.health-item.good { border-color: rgba(81,200,120,0.35); background: rgba(81,200,120,0.08); }
.health-item.warn { border-color: rgba(243,178,59,0.35); background: rgba(243,178,59,0.08); }
.health-item.bad { border-color: rgba(226,85,85,0.35); background: rgba(226,85,85,0.08); }

.muted-mini {
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 0;
}

@media (max-width: 1180px) {
  .dashboard-layout,
  .analytics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .chart-card-large {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .dashboard-layout,
  .analytics-grid,
  .chart-card-large {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .trend-bars {
    min-width: 680px;
  }

  .trend-chart {
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .pro-breakdown .breakdown-row {
    grid-template-columns: 1fr;
  }

  .funnel-label {
    flex-direction: column;
  }
}


/* =====================================================================
   V5 — LIGHT PREMIUM PURPLE THEME
   Cambio visual seguro: no modifica IDs ni lógica JS. Solo capa estética.
   ===================================================================== */
:root {
  --bg: #f6f3ff;
  --bg-soft: #fbfaff;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-2: #ffffff;
  --panel-3: #f1ecff;
  --text: #171227;
  --muted: #6f6880;
  --line: rgba(92, 70, 150, 0.16);
  --accent: #7c3aed;
  --accent-2: #a855f7;
  --accent-3: #ede9fe;
  --danger: #ef4444;
  --success: #16a34a;
  --warning: #f59e0b;
  --info: #2563eb;
  --shadow: 0 24px 70px rgba(80, 53, 156, 0.16);
  --soft-shadow: 0 14px 38px rgba(80, 53, 156, 0.10);
  --radius: 22px;
}

html { background: var(--bg); }

body {
  background:
    radial-gradient(circle at 9% 0%, rgba(124, 58, 237, 0.22), transparent 28rem),
    radial-gradient(circle at 88% 8%, rgba(168, 85, 247, 0.18), transparent 31rem),
    radial-gradient(circle at 50% 105%, rgba(99, 102, 241, 0.14), transparent 30rem),
    linear-gradient(135deg, #faf8ff 0%, #f6f3ff 45%, #eef2ff 100%);
  color: var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(124,58,237,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.48), transparent 74%);
}

.app-shell {
  width: min(1480px, calc(100% - 36px));
  padding: 30px 0 54px;
}

.topbar {
  position: relative;
  padding: 26px 28px;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 32px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.96), rgba(248,245,255,.88)),
    radial-gradient(circle at 85% 30%, rgba(124,58,237,.20), transparent 20rem);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.topbar::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -95px;
  width: 290px;
  height: 290px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(124,58,237,.28), rgba(124,58,237,.05) 52%, transparent 70%);
}

.topbar > * { position: relative; z-index: 1; }

.eyebrow {
  color: var(--accent);
  letter-spacing: .18em;
  font-size: .72rem;
}

h1 {
  color: #141022;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

h1 span {
  color: transparent;
  background: linear-gradient(90deg, #6d28d9, #a855f7, #4f46e5);
  -webkit-background-clip: text;
  background-clip: text;
}

h2, h3 { color: #171227; }
p { color: var(--muted); }

.tabs {
  margin-top: 18px;
  margin-bottom: 24px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 18px 50px rgba(80, 53, 156, .10);
}

.tab {
  color: #6d6682;
  border: 1px solid transparent;
}

.tab:hover {
  background: #f4efff;
  color: var(--accent);
  border-color: rgba(124,58,237,.13);
}

.tab.active {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: white;
  box-shadow: 0 12px 24px rgba(124, 58, 237, .24);
}

.card,
.lead-card,
.task-card,
.metric-card,
.pro-metric-card,
.chart-card,
.settings-card,
.metrics-editor {
  border: 1px solid rgba(124, 58, 237, 0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,250,255,.94));
  box-shadow: var(--soft-shadow);
}

.card:hover,
.lead-card:hover,
.task-card:hover,
.metric-card:hover,
.pro-metric-card:hover,
.chart-card:hover {
  border-color: rgba(124, 58, 237, 0.26);
  box-shadow: 0 24px 58px rgba(80, 53, 156, .15);
}

.toolbar {
  border-radius: 26px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(246,242,255,.88));
}

label {
  color: #5f5871;
  letter-spacing: -0.01em;
}

input,
select,
textarea {
  background: rgba(255, 255, 255, .96);
  color: var(--text);
  border: 1px solid rgba(124, 58, 237, 0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(80, 53, 156, .045);
}

input::placeholder,
textarea::placeholder { color: #a29ab5; }

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(124, 58, 237, 0.72);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12), 0 12px 24px rgba(80, 53, 156, .09);
  background: #fff;
}

.btn {
  border-radius: 15px;
  box-shadow: 0 8px 18px rgba(80, 53, 156, .08);
}

.btn-primary {
  background: linear-gradient(135deg, #7c3aed 0%, #9f4cf5 55%, #a855f7 100%);
  color: white;
  border-color: rgba(124, 58, 237, .2);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #8b36e8 55%, #9333ea 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(124,58,237,.24);
}

.btn-ghost,
.btn-muted {
  background: rgba(255,255,255,.86);
  color: #3d3550;
  border-color: rgba(124,58,237,.17);
}

.btn-ghost:hover,
.btn-muted:hover {
  background: #f5efff;
  color: #6d28d9;
  border-color: rgba(124,58,237,.32);
  transform: translateY(-1px);
}

.btn-danger {
  background: #fff1f2;
  border-color: rgba(239, 68, 68, .28);
  color: #be123c;
}

.btn-danger:hover { background: #ffe4e6; }

.btn-whatsapp {
  background: #ecfdf5;
  border-color: rgba(22, 163, 74, .28);
  color: #047857;
}

.btn-whatsapp:hover:not(:disabled) {
  background: #dcfce7;
  color: #065f46;
  border-color: rgba(22, 163, 74, .5);
}

.view-toggle {
  background: #f3efff;
  border: 1px solid rgba(124,58,237,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.view-btn {
  color: #6f6880;
}

.view-btn.active {
  background: #fff;
  color: #6d28d9;
  box-shadow: 0 8px 18px rgba(80, 53, 156, .12);
}

.section-head {
  align-items: center;
  padding: 6px 2px;
}

.section-head h2 {
  font-size: clamp(1.55rem, 2.1vw, 2.25rem);
  margin-bottom: 4px;
}

.section-head p { color: #766f87; }

.lead-grid {
  gap: 18px;
}

.lead-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,249,255,.94));
}

.lead-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #7c3aed, #a855f7, #c084fc);
  opacity: .9;
}

.lead-card-head,
.lead-info,
.card-actions,
.lead-summary { position: relative; z-index: 1; }

.lead-name {
  color: #171227;
  font-weight: 950;
}

.lead-meta,
.task-meta,
.muted-mini {
  color: #7b738d;
}

.lead-summary,
.info-box {
  background: #faf7ff;
  border-color: rgba(124,58,237,.13);
  color: #4d465f;
}

.badge {
  border-radius: 999px;
  border: 1px solid rgba(124,58,237,.12);
  background: #f4efff;
  color: #6d28d9;
  box-shadow: 0 6px 14px rgba(80, 53, 156, .07);
}

.badge.good,
.badge.success { background: #ecfdf5; color: #047857; border-color: rgba(22,163,74,.22); }
.badge.warn,
.badge.warning { background: #fffbeb; color: #b45309; border-color: rgba(245,158,11,.28); }
.badge.bad,
.badge.danger { background: #fff1f2; color: #be123c; border-color: rgba(239,68,68,.25); }
.badge.hot { background: #faf5ff; color: #7e22ce; border-color: rgba(168,85,247,.30); }
.badge.archived { background: #f1f5f9; color: #475569; border-color: rgba(100,116,139,.20); }
.badge.auto { background: #eef2ff; color: #4338ca; border-color: rgba(79,70,229,.22); }
.badge.manual { background: #fdf2f8; color: #be185d; border-color: rgba(219,39,119,.22); }
.badge.calc { background: #f5f3ff; color: #6d28d9; border-color: rgba(124,58,237,.22); }

.metric-card,
.pro-metric-card {
  position: relative;
  overflow: hidden;
  min-height: 128px;
}

.metric-card::after,
.pro-metric-card::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -48px;
  width: 130px;
  height: 130px;
  border-radius: 999px;
  background: rgba(124,58,237,.09);
}

.metric-card h3,
.pro-metric-card h3,
.metric-card strong,
.pro-metric-card strong {
  color: #171227;
}

.metric-card .value,
.pro-metric-card .value,
.metric-value {
  color: #171227;
}

.source-pill {
  border: 1px solid rgba(124,58,237,.16);
  background: #f5f3ff;
  color: #6d28d9;
}

.source-pill.manual { background:#fdf2f8; color:#be185d; border-color:rgba(219,39,119,.20); }
.source-pill.auto { background:#eef2ff; color:#4338ca; border-color:rgba(79,70,229,.20); }
.source-pill.calc { background:#f5f3ff; color:#6d28d9; border-color:rgba(124,58,237,.20); }

.metrics-editor {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,241,255,.93));
  border-radius: 28px;
}

.metrics-editor-head {
  border-bottom: 1px solid rgba(124,58,237,.11);
  padding-bottom: 16px;
}

.manual-metrics-grid label {
  background: rgba(255,255,255,.64);
  padding: 12px;
  border: 1px solid rgba(124,58,237,.10);
  border-radius: 18px;
}

.dashboard-pro { margin-top: 20px; }

.chart-card {
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(250,247,255,.94));
}

.chart-head {
  border-bottom: 1px solid rgba(124,58,237,.10);
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.trend-chart,
.funnel-chart,
.breakdown,
.health-panel {
  background: #fbfaff;
  border: 1px solid rgba(124,58,237,.09);
  border-radius: 22px;
}

.bar-stack {
  background: linear-gradient(180deg, rgba(124,58,237,.035), rgba(124,58,237,.08));
  border-radius: 16px;
  border: 1px solid rgba(124,58,237,.09);
}

.bar {
  box-shadow: 0 -8px 20px rgba(80, 53, 156, .12);
}

.bar-leads { background: linear-gradient(180deg, #8b5cf6, #6d28d9); }
.bar-calls { background: linear-gradient(180deg, #ec4899, #be185d); }
.bar-sales { background: linear-gradient(180deg, #22c55e, #15803d); }
.bar-money { background: linear-gradient(180deg, #f59e0b, #d97706); }

.trend-month {
  color: #6f6880;
}

.trend-legend {
  color: #6f6880;
}

.dot-leads { background:#7c3aed; }
.dot-calls { background:#ec4899; }
.dot-sales { background:#22c55e; }
.dot-money { background:#f59e0b; }

.funnel-bar-wrap {
  background: #efeafe;
  border: 1px solid rgba(124,58,237,.09);
}

.funnel-bar {
  color: white;
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}

.funnel-bar.step-0 { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
.funnel-bar.step-1 { background: linear-gradient(90deg, #8b5cf6, #ec4899); }
.funnel-bar.step-2 { background: linear-gradient(90deg, #ec4899, #22c55e); }

.breakdown-row {
  color: #4d465f;
}

.progress {
  background: #eee8ff;
  border: 1px solid rgba(124,58,237,.08);
}

.progress span {
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  box-shadow: 0 8px 20px rgba(124,58,237,.22);
}

.health-item {
  background: #ffffff;
  border: 1px solid rgba(124,58,237,.11);
  box-shadow: 0 10px 22px rgba(80, 53, 156, .07);
}

.health-item.good { border-color: rgba(22,163,74,.26); background: linear-gradient(135deg, #fff, #f0fdf4); }
.health-item.warn { border-color: rgba(245,158,11,.28); background: linear-gradient(135deg, #fff, #fffbeb); }
.health-item.bad { border-color: rgba(239,68,68,.26); background: linear-gradient(135deg, #fff, #fff1f2); }

.health-item strong { color: #171227; }
.health-item span { color: #6f6880; }

.task-list { gap: 14px; }
.task-card {
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(250,247,255,.95));
}
.task-title { color:#171227; }

.empty-state {
  background: rgba(255,255,255,.72);
  border: 1px dashed rgba(124,58,237,.24);
  color: #6f6880;
}

.settings-grid .card,
.settings-card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,249,255,.94));
}

.system-info {
  background: #faf7ff;
  border: 1px solid rgba(124,58,237,.12);
  color: #4d465f;
}

.modal-backdrop {
  background: rgba(24, 18, 43, .34);
  backdrop-filter: blur(14px);
}

.modal {
  background: rgba(255, 255, 255, .98);
  color: var(--text);
  border: 1px solid rgba(124,58,237,.18);
  box-shadow: 0 34px 120px rgba(47, 30, 99, .26);
}

.modal-head {
  border-bottom: 1px solid rgba(124,58,237,.11);
}

.icon-btn {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid rgba(124,58,237,.14);
}

.icon-btn:hover {
  background: #ede9fe;
}

fieldset {
  border: 1px solid rgba(124,58,237,.12);
  background: linear-gradient(180deg, rgba(250,247,255,.78), rgba(255,255,255,.7));
  border-radius: 22px;
}

legend {
  color: #5b21b6;
  background: #fff;
  border: 1px solid rgba(124,58,237,.12);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 950;
}

.checkbox-label {
  background: #fff;
  border: 1px solid rgba(124,58,237,.11);
  border-radius: 14px;
  padding: 12px;
}

input[type="checkbox"] {
  accent-color: #7c3aed;
}

.toast {
  background: #171227;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 60px rgba(47,30,99,.30);
}

.file-btn input { display:none; }

.list-view .lead-card {
  border-left: 0;
}

.list-view .lead-card::before {
  width: 4px;
}

/* Microinteracciones premium */
.tab,
.btn,
.card,
.lead-card,
.task-card,
.metric-card,
.pro-metric-card,
.chart-card,
input,
select,
textarea {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.lead-card:hover,
.task-card:hover,
.metric-card:hover,
.pro-metric-card:hover,
.chart-card:hover {
  transform: translateY(-2px);
}

/* Mobile polish */
@media (max-width: 760px) {
  .app-shell { width: min(100% - 20px, 1480px); padding-top: 16px; }
  .topbar { padding: 22px; border-radius: 26px; }
  .topbar-actions { width: 100%; }
  .topbar-actions .btn { flex: 1; }
  .tabs { border-radius: 22px; padding: 8px; }
  .tab { padding: 11px 14px; }
  .toolbar { border-radius: 22px; }
  .modal { border-radius: 24px 24px 0 0; }
}

/* V6 · Firebase / Storage / Sheets */
.cloud-card,
.sheets-card {
  position: relative;
  overflow: hidden;
}

.cloud-card::before,
.sheets-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #7c3aed, #a855f7, #ec4899);
}

.settings-card textarea,
.settings-card input[type="password"],
.settings-card input[type="email"] {
  width: 100%;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px;
  outline: none;
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(17, 24, 39, .03);
}

.settings-card textarea:focus,
.settings-card input[type="password"]:focus,
.settings-card input[type="email"]:focus {
  border-color: rgba(124, 58, 237, .55);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .10);
}

.firebase-login-grid {
  margin-top: 14px;
}

.cloud-status {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  margin: 12px 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(236, 72, 153, .06));
  border: 1px solid rgba(124, 58, 237, .16);
  color: var(--text);
  font-size: 13px;
}

.cloud-status span,
.cloud-status em {
  color: var(--muted);
  font-style: normal;
  overflow-wrap: anywhere;
}

.fieldset-help {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.optional-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.capture-paste-zone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px dashed rgba(124, 58, 237, .42);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(236, 72, 153, .06));
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  outline: none;
}

.capture-paste-zone:hover,
.capture-paste-zone:focus,
.capture-paste-zone.is-active {
  transform: translateY(-1px);
  border-color: rgba(124, 58, 237, .72);
  box-shadow: 0 18px 45px rgba(124, 58, 237, .16);
  background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(236, 72, 153, .08));
}

.capture-paste-zone .paste-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(124, 58, 237, .15);
  font-size: 22px;
}

.capture-paste-zone strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 3px;
}

.capture-paste-zone span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.capture-paste-zone kbd {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 6px;
  border: 1px solid rgba(124, 58, 237, .24);
  background: rgba(255, 255, 255, .8);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}

.file-upload-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px dashed rgba(124, 58, 237, .28);
  border-radius: 18px;
  background: rgba(124, 58, 237, .04);
}

.file-upload-box input[type="file"] {
  flex: 1 1 260px;
}

.capture-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.capture-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(17, 24, 39, .05);
}

.capture-item:hover {
  border-color: rgba(124, 58, 237, .35);
  transform: translateY(-1px);
}

.capture-item small {
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .file-upload-box {
    align-items: stretch;
  }
  .capture-paste-zone {
    align-items: flex-start;
  }
  .file-upload-box .btn,
  .file-upload-box input[type="file"] {
    width: 100%;
  }
  .capture-item {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =====================================================================
   V3 OPERATIVA · Pipeline profesional para 200 leads
   Lista compacta, ordenación avanzada, colores por urgencia y cierre rápido.
   ===================================================================== */
.toolbar {
  grid-template-columns: minmax(260px, 1.35fr) 170px 170px 210px auto auto;
}

.sort-wrap select {
  min-width: 190px;
}

.pipeline-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 14px;
}

.pipeline-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 950;
  font-size: .78rem;
  border: 1px solid rgba(124,58,237,.13);
  background: #fff;
  color: #514866;
  box-shadow: 0 10px 22px rgba(80, 53, 156, .07);
}

.pipeline-chip.danger { background:#fff1f2; color:#be123c; border-color:rgba(239,68,68,.22); }
.pipeline-chip.hot { background:#faf5ff; color:#7e22ce; border-color:rgba(168,85,247,.24); }
.pipeline-chip.warning { background:#fffbeb; color:#b45309; border-color:rgba(245,158,11,.28); }
.pipeline-chip.money { background:#eef2ff; color:#4338ca; border-color:rgba(79,70,229,.20); }
.pipeline-chip.success { background:#ecfdf5; color:#047857; border-color:rgba(22,163,74,.22); }

.urgency-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 950;
  font-size: .78rem;
  border: 1px solid rgba(124,58,237,.16);
  background: #f5f3ff;
  color: #6d28d9;
  white-space: nowrap;
}

.urgency-pill.alta { background:#fff1f2; color:#be123c; border-color:rgba(239,68,68,.28); }
.urgency-pill.media { background:#fffbeb; color:#b45309; border-color:rgba(245,158,11,.30); }
.urgency-pill.baja { background:#f1f5f9; color:#475569; border-color:rgba(100,116,139,.20); }
.urgency-pill.cerrada { background:#ecfdf5; color:#047857; border-color:rgba(22,163,74,.25); }
.urgency-pill.perdida { background:#fef2f2; color:#991b1b; border-color:rgba(239,68,68,.22); }

.lead-card.urgency-alta::before { background: linear-gradient(180deg, #ef4444, #f97316); width: 7px; }
.lead-card.urgency-media::before { background: linear-gradient(180deg, #f59e0b, #facc15); }
.lead-card.urgency-baja::before { background: linear-gradient(180deg, #94a3b8, #cbd5e1); opacity: .72; }
.lead-card.urgency-cerrada::before { background: linear-gradient(180deg, #22c55e, #16a34a); }
.lead-card.urgency-perdida::before { background: linear-gradient(180deg, #ef4444, #991b1b); opacity: .55; }

.btn-success-soft {
  background: #ecfdf5;
  border-color: rgba(22, 163, 74, .25);
  color: #047857;
}
.btn-success-soft:hover {
  background: #dcfce7;
  color: #065f46;
  border-color: rgba(22, 163, 74, .45);
}
.btn-danger-soft {
  background: #fff7ed;
  border-color: rgba(249, 115, 22, .24);
  color: #c2410c;
}
.btn-danger-soft:hover {
  background: #ffedd5;
  color: #9a3412;
  border-color: rgba(249, 115, 22, .42);
}

/* Lista compacta real: pensada para 100-200 leads */
.lead-grid.list-view {
  gap: 8px;
}

.lead-grid.list-view .lead-card.lead-row {
  padding: 10px 12px 10px 16px;
  border-radius: 18px;
  min-height: auto;
  gap: 7px;
  box-shadow: 0 8px 20px rgba(80, 53, 156, .08);
}

.lead-grid.list-view .lead-card.lead-row:hover {
  transform: translateY(-1px);
}

.lead-row .row-main {
  display: grid;
  grid-template-columns: minmax(170px, 1.05fr) minmax(170px, .9fr) minmax(116px, .62fr) minmax(116px, .62fr) minmax(160px, .85fr) 92px minmax(350px, auto);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.row-lead-name,
.row-date,
.row-money {
  min-width: 0;
}

.row-lead-name strong,
.row-money strong,
.row-date strong {
  display: block;
  color: #171227;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}

.row-lead-name strong { font-size: .98rem; letter-spacing: -.025em; }
.row-lead-name span,
.row-date small,
.row-money small {
  display: block;
  color: #817890;
  font-size: .68rem;
  font-weight: 850;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-status {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.row-status .badge,
.lead-row .badge {
  font-size: .67rem;
  padding: 5px 7px;
}

.row-urgency {
  display: flex;
  justify-content: flex-start;
}

.row-urgency .urgency-pill {
  min-width: 70px;
  padding: 6px 8px;
  font-size: .7rem;
}

.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 1px;
}

.row-actions .btn {
  padding: 7px 8px;
  border-radius: 11px;
  font-size: .72rem;
  white-space: nowrap;
  box-shadow: none;
}

.row-subline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr);
  gap: 10px;
  color: #6f6880;
  font-size: .74rem;
  font-weight: 750;
  line-height: 1.32;
  padding-left: 2px;
}

.row-subline span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1320px) {
  .toolbar { grid-template-columns: 1fr 1fr 1fr; }
  .lead-row .row-main {
    grid-template-columns: minmax(170px, 1fr) minmax(160px, .8fr) minmax(120px, .6fr) minmax(120px, .6fr) 88px;
  }
  .row-money { display:none; }
  .row-actions { grid-column: 1 / -1; justify-content:flex-start; }
}

@media (max-width: 820px) {
  .toolbar { grid-template-columns: 1fr; }
  .pipeline-summary { overflow-x:auto; flex-wrap: nowrap; padding-bottom: 3px; }
  .pipeline-chip { flex: 0 0 auto; }
  .lead-row .row-main { grid-template-columns: 1fr; align-items: start; }
  .row-actions { flex-wrap: wrap; }
  .row-subline { grid-template-columns: 1fr; }
}


/* =====================================================================
   V4 OPERATIVA · Corrección de colores del modal y contraste premium
   Fix seguro: solo CSS. No toca JS, Firebase, Storage, IDs ni estructura.
   ===================================================================== */
.modal {
  background: #ffffff !important;
  color: #171227 !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  box-shadow: 0 34px 120px rgba(47, 30, 99, 0.28) !important;
}

.modal-head {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,242,255,0.96)) !important;
  color: #171227 !important;
  border-bottom: 1px solid rgba(124, 58, 237, 0.14) !important;
  box-shadow: 0 12px 28px rgba(80, 53, 156, 0.08) !important;
}

.modal-head h1,
.modal-head h2,
.modal-head h3,
.modal-head p,
.modal-head .lead-name {
  color: #171227 !important;
}

.modal-head .eyebrow {
  color: #7c3aed !important;
}

.modal-head .icon-btn {
  background: #f5f3ff !important;
  color: #6d28d9 !important;
  border-color: rgba(124,58,237,.18) !important;
}

.modal-head .icon-btn:hover {
  background: #ede9fe !important;
  color: #4c1d95 !important;
  transform: translateY(-1px);
}

.lead-form {
  background: #ffffff !important;
  color: #171227 !important;
}

.lead-form fieldset {
  background:
    linear-gradient(180deg, rgba(250,247,255,.88), rgba(255,255,255,.86)) !important;
  border-color: rgba(124,58,237,.14) !important;
}

.lead-form legend {
  background: #ffffff !important;
  color: #5b21b6 !important;
  border: 1px solid rgba(124,58,237,.15) !important;
}

.lead-form label,
.lead-form .checkbox-label {
  color: #514866 !important;
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  background: #ffffff !important;
  color: #171227 !important;
  border-color: rgba(124,58,237,.18) !important;
}

.lead-form input::placeholder,
.lead-form textarea::placeholder {
  color: #a29ab5 !important;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  border-color: rgba(124,58,237,.72) !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,.12), 0 12px 24px rgba(80,53,156,.09) !important;
}

.modal-actions {
  background: linear-gradient(transparent, #ffffff 24%, #ffffff 100%) !important;
  border-top: 1px solid rgba(124,58,237,.08) !important;
}

.modal-backdrop {
  background: rgba(24, 18, 43, 0.36) !important;
  backdrop-filter: blur(14px) saturate(130%) !important;
}

/* Evita que textos internos heredados del modo oscuro se queden invisibles */
.modal .info-box,
.modal .capture-list,
.modal .file-upload-box,
.modal .system-info {
  color: #171227 !important;
}

.modal small,
.modal .muted-mini,
.modal .fieldset-help,
.modal .optional-label,
.modal .capture-paste-zone span {
  color: #6f6880 !important;
}

/* Ficha en modo edición: cabecera más clara y legible */
.modal-head > div:first-child {
  min-width: 0;
}

.modal-head > div:first-child h1,
.modal-head > div:first-child h2,
.modal-head > div:first-child h3 {
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scrollbar del modal en tonos claros */
.modal::-webkit-scrollbar {
  width: 10px;
}
.modal::-webkit-scrollbar-track {
  background: #f5f3ff;
  border-radius: 999px;
}
.modal::-webkit-scrollbar-thumb {
  background: rgba(124,58,237,.35);
  border-radius: 999px;
}
.modal::-webkit-scrollbar-thumb:hover {
  background: rgba(124,58,237,.55);
}

/* ============================================================
   V5 — Mesa de trabajo, importación rápida y mensajes
============================================================ */
.quick-import-card {
  margin: 18px 0 22px;
  border: 1px solid rgba(124, 58, 237, .16);
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(246,242,255,.96));
  box-shadow: 0 22px 70px rgba(72, 47, 160, .10);
}
.quick-import-head,
.quick-import-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.quick-import-head h3,
.message-composer h3,
.message-admin h3 { margin: 4px 0 8px; }
.quick-import-head p,
.quick-import-footer small { color: var(--muted); }
.quick-import-actions,
.quick-import-footer { flex-wrap: wrap; }
#quickImportPaste {
  width: 100%;
  margin: 14px 0;
  border: 1px solid rgba(124, 58, 237, .18);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text);
  resize: vertical;
}
.worktable-view {
  display: block !important;
}
.worktable-shell {
  border: 1px solid rgba(124, 58, 237, .13);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.86);
  box-shadow: 0 24px 80px rgba(69, 39, 160, .08);
}
.worktable-head,
.worktable-row {
  display: grid;
  grid-template-columns: 68px minmax(180px, 1.2fr) minmax(170px, 1fr) minmax(180px, 1.2fr) 100px 100px minmax(130px, .8fr) 80px minmax(360px, 1.8fr);
  gap: 10px;
  align-items: center;
}
.worktable-head {
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6d5c88;
  background: linear-gradient(135deg, #f4efff, #fff);
  border-bottom: 1px solid rgba(124, 58, 237, .12);
}
.worktable-row {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(124, 58, 237, .10);
  font-size: 13px;
}
.worktable-row:last-child { border-bottom: 0; }
.worktable-row:hover { background: rgba(124, 58, 237, .035); }
.worktable-row.urgency-critica { box-shadow: inset 5px 0 0 #dc2626; background: linear-gradient(90deg, rgba(254,226,226,.55), rgba(255,255,255,.94)); }
.worktable-row.urgency-alta { box-shadow: inset 5px 0 0 #f97316; background: linear-gradient(90deg, rgba(255,237,213,.62), rgba(255,255,255,.94)); }
.worktable-row.urgency-media { box-shadow: inset 5px 0 0 #eab308; }
.worktable-row.urgency-baja { box-shadow: inset 5px 0 0 #c4b5fd; }
.worktable-row.urgency-cerrada { box-shadow: inset 5px 0 0 #16a34a; opacity: .78; }
.worktable-row.urgency-perdida { box-shadow: inset 5px 0 0 #64748b; opacity: .72; }
.work-name strong,
.work-action strong { display: block; color: var(--text); }
.work-name small,
.work-action small,
.muted-mini { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.work-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.work-actions .btn { padding: 7px 10px; border-radius: 999px; font-size: 12px; }
.badge.mini { font-size: 11px; padding: 5px 8px; margin: 2px; }
.urgency-dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.urgency-dot.critica { background: #dc2626; }
.urgency-dot.alta { background: #f97316; }
.urgency-dot.media { background: #eab308; }
.urgency-dot.baja { background: #a78bfa; }
.urgency-dot.cerrada { background: #16a34a; }
.urgency-dot.perdida { background: #64748b; }
.urgency-pill.critica { color: #991b1b; background: #fee2e2; border-color: #fecaca; }
.urgency-pill.alta { color: #9a3412; background: #ffedd5; border-color: #fed7aa; }
.urgency-pill.media { color: #854d0e; background: #fef9c3; border-color: #fde68a; }
.urgency-pill.baja { color: #5b21b6; background: #ede9fe; border-color: #ddd6fe; }
.task-card-v5.needs-action { border-color: rgba(220,38,38,.22); background: linear-gradient(135deg, rgba(254,242,242,.9), rgba(255,255,255,.96)); }
.task-message { margin: 10px 0 0; color: var(--text); font-size: 13px; line-height: 1.45; }
.messages-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1fr);
  gap: 18px;
}
.message-composer textarea,
.message-admin textarea,
.message-admin input,
.message-composer select,
.message-admin select {
  width: 100%;
}
#messagePreview {
  margin: 16px 0;
  border: 1px solid rgba(124,58,237,.16);
  border-radius: 18px;
  padding: 16px;
  min-height: 210px;
  background: rgba(255,255,255,.9);
  color: var(--text);
  resize: vertical;
}
.message-template-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.template-chip {
  border: 1px solid rgba(124,58,237,.18);
  background: linear-gradient(135deg, #fff, #f6f1ff);
  border-radius: 16px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  box-shadow: 0 10px 30px rgba(72,47,160,.08);
}
.template-chip strong { display:block; font-size: 13px; }
.template-chip span { display:block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.template-chip:hover { transform: translateY(-1px); border-color: rgba(124,58,237,.34); }
.btn-success-soft {
  color: #047857;
  background: #d1fae5;
  border-color: #a7f3d0;
}
.btn-danger-soft {
  color: #be123c;
  background: #ffe4e6;
  border-color: #fecdd3;
}
@media (max-width: 1150px) {
  .worktable-shell { overflow-x: auto; }
  .worktable-head,
  .worktable-row { min-width: 1180px; }
  .messages-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .quick-import-head, .quick-import-footer { display: block; }
  .quick-import-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
}


/* =====================================================================
   V6 — SAFE VISIBILITY PATCH
   Evita pantalla negra en previsualizadores y asegura tema blanco/violeta.
   No modifica IDs, lógica ni estructura de datos.
   ===================================================================== */
html, body {
  background: linear-gradient(135deg, #fbfaff 0%, #f7f3ff 48%, #eef2ff 100%) !important;
  color: #171227 !important;
}
body::before {
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.20), transparent 30rem),
    radial-gradient(circle at 88% 8%, rgba(168, 85, 247, 0.16), transparent 31rem) !important;
  pointer-events: none;
}
.app-shell,
.tab-panel,
.lead-card,
.task-card,
.metric-card,
.manual-metrics-panel,
.settings-card,
.breakdown-card,
.chart-card,
.health-card,
.template-card,
.import-box,
.modal,
.modal-body,
.modal-section,
.modal-head {
  background: rgba(255,255,255,0.94) !important;
  color: #171227 !important;
  border-color: rgba(124, 58, 237, 0.16) !important;
}
.modal-head {
  background: linear-gradient(135deg, #ffffff 0%, #f1ecff 100%) !important;
}
.topbar,
.tabs,
.toolbar,
.lead-table,
.list-row,
.pipeline-card {
  background: rgba(255,255,255,0.80) !important;
  color: #171227 !important;
  border-color: rgba(124, 58, 237, 0.16) !important;
}
input, select, textarea {
  background: #ffffff !important;
  color: #171227 !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
}
input::placeholder, textarea::placeholder { color: #958aa8 !important; }
button, .button, .btn {
  color: #171227;
}
.primary, .btn-primary, button.primary {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #fff !important;
  border: 0 !important;
}
.eyebrow, h1 span, .brand-mark, .tab.active, .accent-text {
  color: #7c3aed !important;
}
.lead-card,
.metric-card,
.settings-card,
.task-card,
.template-card {
  box-shadow: 0 18px 50px rgba(80, 53, 156, 0.10) !important;
}
.hidden { display: none !important; }


/* ============================================================
   V11 — Importación compacta y mesa de trabajo prioritaria
============================================================ */
.quick-import-card.quick-import-compact {
  margin: 12px 0 18px !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 12px 38px rgba(72, 47, 160, .07) !important;
}
.quick-import-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
}
.quick-import-summary::-webkit-details-marker { display: none; }
.quick-import-summary h3 {
  margin: 2px 0 3px;
  font-size: 18px;
}
.quick-import-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.quick-import-badge {
  flex: 0 0 auto;
  border: 1px solid rgba(124,58,237,.16);
  background: rgba(255,255,255,.92);
  color: #6d5c88;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
}
.quick-import-badge.ready {
  background: #ecfdf5;
  color: #047857;
  border-color: rgba(16,185,129,.28);
}
.quick-import-body {
  border-top: 1px solid rgba(124,58,237,.10);
  padding: 14px 18px 18px;
}
.quick-import-head.compact,
.quick-import-footer.compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.quick-import-head.compact p {
  margin: 0;
  max-width: 860px;
  font-size: 13px;
}
.quick-import-footer.compact {
  margin-top: 10px;
}
.quick-import-footer.compact small {
  font-size: 12px;
}
#quickImportPaste {
  min-height: 82px !important;
  margin: 12px 0 0 !important;
}
#clearLeadFiltersBtn {
  white-space: nowrap;
}
.lead-grid.worktable-view {
  margin-top: 10px;
}
@media (max-width: 820px) {
  .quick-import-summary,
  .quick-import-head.compact,
  .quick-import-footer.compact {
    align-items: flex-start;
    flex-direction: column;
  }
  .quick-import-actions {
    width: 100%;
  }
}

/* ============================================================
   V12 — Panel deslizable de edición rápida
============================================================ */
.inline-edit-cell {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 46px;
}

.inline-edit-cell:hover,
.inline-edit-cell:focus-visible {
  background: rgba(124, 58, 237, 0.08);
  outline: 2px solid rgba(124, 58, 237, 0.22);
  outline-offset: 0;
}

.inline-edit-cell small,
.product-cell small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
}

.worktable-row > .inline-edit-cell {
  align-self: stretch;
  justify-content: center;
}

.product-cell strong {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-edit-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23, 18, 39, 0.34);
  backdrop-filter: blur(3px);
  z-index: 140;
}

.quick-edit-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(460px, 94vw);
  background: var(--panel-2);
  box-shadow: -24px 0 70px rgba(80, 53, 156, 0.24);
  z-index: 150;
  padding: 24px;
  overflow-y: auto;
  transform: translateX(0);
  border-left: 1px solid var(--line);
}

.quick-edit-backdrop.hidden,
.quick-edit-panel.hidden {
  display: none;
}

.quick-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.quick-panel-head h2 {
  margin: 3px 0 4px;
  font-size: 1.35rem;
}

.quick-panel-head span {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9rem;
}

.quick-edit-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quick-section {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(247, 243, 255, 0.88), rgba(255, 255, 255, 0.98));
  border-radius: 20px;
  padding: 16px;
}

.quick-section h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.quick-section label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.quick-section input,
.quick-section select,
.quick-section textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 650;
}

.quick-section textarea {
  resize: vertical;
  min-height: 82px;
}

.quick-sold-toggle {
  flex-direction: row !important;
  align-items: center;
  background: rgba(34, 197, 94, 0.09);
  border: 1px solid rgba(34, 197, 94, 0.20);
  padding: 12px;
  border-radius: 14px;
}

.quick-sold-toggle input,
.quick-check input {
  width: auto;
}

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

.quick-check {
  margin: 0 !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 13px;
  padding: 10px;
  font-size: 0.8rem !important;
}

.quick-panel-actions {
  position: sticky;
  bottom: -24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--panel-2) 34%);
}

body.quick-edit-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .quick-edit-panel {
    width: 100vw;
    padding: 18px;
  }

  .quick-products-grid {
    grid-template-columns: 1fr;
  }
}


/* V14 - acciones limpias en tabla */
.work-actions {
  align-items: center;
  gap: 8px;
}
.work-actions .btn-action-panel {
  box-shadow: 0 12px 26px rgba(126, 58, 242, 0.16);
}
.work-actions .btn-action-archive {
  background: rgba(255, 255, 255, 0.82);
}
.card-actions .btn-action-panel {
  box-shadow: 0 12px 26px rgba(126, 58, 242, 0.16);
}
@media (max-width: 760px) {
  .work-actions {
    justify-content: flex-start;
  }
  .work-actions .btn {
    flex: 0 0 auto;
  }
}


/* V15 — Estados personalizados */
.state-settings-card {
  position: relative;
  overflow: hidden;
}

.state-settings-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #22c55e, #7c3aed, #ec4899);
}

.single-field-grid {
  grid-template-columns: 1fr;
  margin-top: 12px;
}

.custom-state-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.state-config-block {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.state-config-block h3 {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.state-chip-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.state-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.state-chip.locked {
  color: #5b21b6;
  background: rgba(124, 58, 237, .07);
  border-color: rgba(124, 58, 237, .18);
}

.state-chip.protected {
  color: #065f46;
  background: rgba(16, 185, 129, .09);
  border-color: rgba(16, 185, 129, .18);
}

.custom-state-list-inner {
  display: grid;
  gap: 10px;
}

.custom-state-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.custom-state-row input {
  width: 100%;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px;
  outline: none;
  font: inherit;
}

.muted-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .custom-state-row {
    grid-template-columns: 1fr;
  }
}


/* V16 — Ficha cliente y dolores visuales */
.pain-settings-card {
  position: relative;
  overflow: hidden;
}

.pain-settings-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #ec4899, #f97316, #7c3aed);
}

.pain-badge {
  margin-top: 7px;
  display: inline-flex;
  max-width: 230px;
  white-space: normal;
  line-height: 1.25;
  color: #6d28d9;
  background: rgba(124, 58, 237, .08);
  border-color: rgba(124, 58, 237, .18);
}

.pain-badge.muted-pain {
  color: var(--muted);
  background: rgba(111, 104, 128, .08);
}

.pain-chip.locked {
  color: #9d174d;
  background: rgba(236, 72, 153, .08);
  border-color: rgba(236, 72, 153, .18);
}

.custom-pain-list {
  margin-top: 14px;
}


/* V17 — Edición de estados base aceptados */
.base-state-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.base-state-row .base-state-edit {
  border-color: rgba(124, 58, 237, .22);
  background: rgba(124, 58, 237, .045);
  font-weight: 800;
}

@media (max-width: 760px) {
  .base-state-row {
    grid-template-columns: 1fr;
  }
}

/* V19 — Ajustes acciones/dolores más seguros */
.action-settings-card {
  position: relative;
  overflow: hidden;
}
.custom-action-list,
.custom-pain-list {
  display: grid;
  gap: 14px;
}
.base-action-row,
.base-pain-row,
.custom-action-row,
.custom-pain-row {
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
}
.custom-action-row,
.custom-pain-row {
  grid-template-columns: minmax(220px, 1fr) auto auto;
}
.custom-state-row.is-hidden-config {
  opacity: .58;
  background: rgba(15, 23, 42, .035);
  border-radius: 14px;
  padding: 6px;
}
.custom-state-row.is-hidden-config input {
  text-decoration: line-through;
}
@media (max-width: 900px) {
  .base-action-row,
  .base-pain-row,
  .custom-action-row,
  .custom-pain-row {
    grid-template-columns: 1fr;
  }
}

/* V20 — Reorganización limpia de Ajustes */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.settings-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(124, 58, 237, .18);
  background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(255,255,255,.96));
}

.settings-overview h2,
.settings-section-head h2 {
  margin: 4px 0 8px;
}

.settings-overview p,
.settings-section-head p {
  margin: 0;
  color: var(--muted);
}

.settings-overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.settings-anchor {
  text-decoration: none;
  white-space: nowrap;
}

.settings-section {
  display: grid;
  gap: 16px;
}

.settings-section-head {
  padding: 0 4px;
}

.settings-subgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

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

.config-card-primary {
  min-height: 100%;
}

.config-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.config-card-head h2 {
  margin-bottom: 8px;
}

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

.compact-admin-card {
  align-self: start;
}

.settings-subgrid-advanced {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-details {
  padding: 0;
  overflow: hidden;
}

.settings-details summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 24px;
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--text);
}

.settings-details summary::-webkit-details-marker {
  display: none;
}

.settings-details summary::after {
  content: '＋';
  float: right;
  color: var(--accent);
  font-weight: 900;
}

.settings-details[open] summary::after {
  content: '−';
}

.settings-details > p,
.settings-details > label,
.settings-details > .stack-actions,
.settings-details > .cloud-status,
.settings-details > .system-info,
.settings-details > button {
  margin-left: 24px;
  margin-right: 24px;
}

.settings-details > p:first-of-type {
  margin-top: -4px;
}

.settings-details > *:last-child {
  margin-bottom: 24px;
}

.state-settings-card,
.action-settings-card,
.pain-settings-card {
  max-height: 78vh;
  overflow: auto;
}

@media (max-width: 1280px) {
  .settings-subgrid-main {
    grid-template-columns: 1fr;
  }
  .settings-subgrid-advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .settings-overview {
    align-items: flex-start;
    flex-direction: column;
  }
  .settings-overview-actions {
    justify-content: flex-start;
  }
  .settings-subgrid,
  .settings-subgrid-advanced {
    grid-template-columns: 1fr;
  }
  .state-settings-card,
  .action-settings-card,
  .pain-settings-card {
    max-height: none;
  }
}

/* V21 — Ajustes con menú lateral y panel único activo */
.settings-shell.settings-v21 {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.settings-sidebar {
  position: sticky;
  top: 18px;
  padding: 22px;
  overflow: hidden;
}

.settings-sidebar-head h2 {
  margin: 4px 0 8px;
}

.settings-sidebar-head p {
  margin: 0;
  color: var(--muted);
}

.settings-menu {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.settings-menu-btn {
  width: 100%;
  border: 1px solid rgba(124, 58, 237, .14);
  background: rgba(255,255,255,.76);
  color: var(--text);
  border-radius: 18px;
  padding: 14px 16px;
  text-align: left;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(80, 53, 156, .06);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.settings-menu-btn span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.settings-menu-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 58, 237, .35);
}

.settings-menu-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 18px 36px rgba(124, 58, 237, .26);
}

.settings-menu-btn.active span {
  color: rgba(255,255,255,.82);
}

.settings-content {
  min-width: 0;
}

.settings-pane,
.commercial-pane {
  display: none;
}

.settings-pane.active,
.commercial-pane.active {
  display: block;
}

.settings-pane {
  animation: settingsFadeIn .16s ease;
}

@keyframes settingsFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.settings-pane-head h2 {
  margin: 4px 0 8px;
}

.settings-pane-head p {
  margin: 0;
  color: var(--muted);
}

.soft-card {
  background: linear-gradient(135deg, rgba(124, 58, 237, .07), rgba(255,255,255,.96));
  border: 1px solid rgba(124, 58, 237, .16);
}

.commercial-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.commercial-tab {
  border: 1px solid rgba(124, 58, 237, .16);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: 11px 16px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(80, 53, 156, .07);
}

.commercial-tab.active {
  background: var(--accent-3);
  color: var(--accent);
  border-color: rgba(124, 58, 237, .35);
}

.settings-editor-card,
.settings-wide-card {
  max-width: 980px;
}

.settings-two-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.settings-v21 .state-settings-card,
.settings-v21 .action-settings-card,
.settings-v21 .pain-settings-card {
  max-height: none;
  overflow: visible;
}

.settings-v21 .custom-state-list {
  max-height: 58vh;
  overflow: auto;
  padding-right: 4px;
}

@media (max-width: 1100px) {
  .settings-shell.settings-v21 {
    grid-template-columns: 1fr;
  }
  .settings-sidebar {
    position: relative;
    top: auto;
  }
  .settings-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .settings-two-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .settings-menu {
    grid-template-columns: 1fr;
  }
  .commercial-tabs {
    flex-direction: column;
  }
  .commercial-tab {
    width: 100%;
    text-align: left;
  }
}

/* ============================================================
   V24 — Blindaje visual/click de la mesa de trabajo
============================================================ */
.worktable-shell,
.worktable-row,
.worktable-row > *,
.inline-edit-cell,
.work-actions,
.work-actions .btn,
.lead-grid [data-action],
.lead-grid [data-quick-edit] {
  pointer-events: auto !important;
}

.inline-edit-cell,
.lead-grid [data-action],
.lead-grid [data-quick-edit] {
  position: relative;
  z-index: 2;
}

.quick-edit-backdrop.hidden,
.quick-edit-panel.hidden {
  display: none !important;
  pointer-events: none !important;
}


/* ============================================================
   V28 — Sistema XP editable en Firebase
============================================================ */
.xp-settings-card {
  position: relative;
  overflow: hidden;
}
.xp-settings-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #8b5cf6, #ec4899);
}
.xp-actions-bar {
  margin: 12px 0 16px;
}
.xp-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.xp-tab {
  border: 1px solid rgba(124,58,237,.16);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(80,53,156,.07);
}
.xp-tab.active {
  background: var(--accent-3);
  color: var(--accent);
  border-color: rgba(124,58,237,.35);
}
.xp-pane { display: none; }
.xp-pane.active { display: block; animation: settingsFadeIn .16s ease; }
.xp-rule-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  max-height: 58vh;
  overflow: auto;
  padding-right: 4px;
}
.xp-rule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(124,58,237,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  padding: 10px 12px;
}
.xp-rule-row .xp-rule-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.xp-rule-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xp-rule-row small {
  color: var(--muted);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xp-rule-row input {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px;
  outline: none;
  font: inherit;
  font-weight: 900;
  text-align: right;
}
.xp-rule-row.is-negative input { border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.045); }
.xp-rule-row.is-positive input { border-color: rgba(34,197,94,.22); background: rgba(34,197,94,.045); }
.xp-threshold-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.xp-threshold-card {
  border: 1px solid rgba(124,58,237,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  padding: 14px;
  display: grid;
  gap: 8px;
}
.xp-threshold-card input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  font: inherit;
  font-weight: 900;
}
@media (max-width: 760px) {
  .xp-rule-row { grid-template-columns: 1fr; }
  .xp-threshold-grid { grid-template-columns: 1fr; }
  .xp-tab { width: 100%; text-align: left; }
}


/* ============================================================
   V32 — XP por edad con rangos editables
============================================================ */
.xp-age-panel {
  margin-top: 16px;
  border: 1px solid rgba(124,58,237,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  padding: 14px;
}
.xp-age-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.xp-age-panel h4 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}
.xp-age-range-list {
  display: grid;
  gap: 10px;
}
.xp-age-range-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.3fr) 110px 110px 110px auto;
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(124,58,237,.14);
  border-radius: 16px;
  padding: 10px;
  background: #fff;
}
.xp-age-range-row label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-weight: 900;
  font-size: .82rem;
}
.xp-age-range-row input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px 11px;
  color: var(--text);
  background: #fff;
  font: inherit;
  font-weight: 900;
}
.xp-age-label {
  align-self: end;
}
@media (max-width: 980px) {
  .xp-age-panel-head { flex-direction: column; }
  .xp-age-range-row { grid-template-columns: 1fr 1fr; }
  .xp-age-label { grid-column: 1 / -1; }
  .xp-age-delete { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .xp-age-range-row { grid-template-columns: 1fr; }
}

/* V34 — país detectado por prefijo telefónico */
.country-detected {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
}

.work-name small .country-detected,
.lead-meta .country-detected {
  font-size: inherit;
}


/* ============================================================
   V37 — País/telefono visibles y auditables en nombre
============================================================ */
.lead-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  align-items: center;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.lead-meta-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  white-space: nowrap;
}
.lead-meta-chip.phone-detected {
  font-weight: 700;
  color: #6d5c88;
}
.lead-meta-chip.country-detected {
  font-weight: 900;
  color: var(--accent);
}
.work-name small.lead-meta-line,
.lead-meta.lead-meta-line {
  display: flex;
}

/* ============================================================
   V38 - Preview flotante de resumen de conversación
============================================================ */
.lead-preview-trigger-v38 {
  cursor: help;
  border-radius: 14px;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.lead-preview-trigger-v38:hover,
.lead-preview-trigger-v38:focus-visible {
  background: rgba(143, 67, 244, 0.07);
  box-shadow: 0 0 0 3px rgba(143, 67, 244, 0.08);
  outline: none;
}

.lead-hover-preview-v38 {
  position: fixed;
  z-index: 99999;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(143, 67, 244, 0.22);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(31, 25, 48, 0.22);
  padding: 18px;
  color: var(--text, #1f1930);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}

.lead-hover-preview-v38.hidden {
  display: none;
}

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

.lead-preview-kicker-v38 {
  margin: 0 0 4px;
  color: var(--primary, #8f43f4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 900;
}

.lead-preview-head-v38 h3 {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.2;
}

.lead-preview-meta-v38 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  color: var(--muted, #756f86);
  font-size: 0.78rem;
  font-weight: 800;
}

.lead-preview-close-v38 {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(143, 67, 244, 0.18);
  border-radius: 999px;
  background: white;
  color: var(--muted, #756f86);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.lead-preview-summary-v38 {
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(143, 67, 244, 0.08), rgba(236, 72, 153, 0.06));
  border: 1px solid rgba(143, 67, 244, 0.14);
  padding: 14px;
  font-size: 0.92rem;
  line-height: 1.45;
  max-height: 170px;
  overflow: auto;
  white-space: normal;
}

.lead-preview-grid-v38 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.lead-preview-grid-v38 div {
  border: 1px solid rgba(143, 67, 244, 0.12);
  border-radius: 16px;
  padding: 10px;
  background: rgba(255,255,255,0.72);
}

.lead-preview-grid-v38 small {
  display: block;
  color: var(--muted, #756f86);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.lead-preview-grid-v38 strong {
  display: block;
  font-size: 0.82rem;
  line-height: 1.25;
}

.lead-preview-actions-v38 {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.btn-small {
  padding: 0.62rem 0.9rem;
  font-size: 0.82rem;
}

@media (max-width: 760px) {
  .lead-hover-preview-v38 {
    left: 12px !important;
    right: 12px;
    width: auto !important;
    max-width: none;
  }
  .lead-preview-grid-v38 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   V39 — Preview flotante de desglose XP en puntos de urgencia
============================================================ */
.xp-score-trigger-v39 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.xp-score-trigger-v39:hover,
.xp-score-trigger-v39:focus-visible {
  background: rgba(124, 58, 237, 0.08);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(124, 58, 237, 0.14);
}

.xp-score-trigger-v39 .urgency-dot {
  flex: 0 0 auto;
}

.urgency-pill.xp-score-trigger-v39 {
  border: 1px solid rgba(124, 58, 237, 0.16);
  background: rgba(255,255,255,0.62);
}

.xp-breakdown-preview-v39 {
  position: fixed;
  z-index: 99999;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(124, 58, 237, 0.18);
  box-shadow: 0 26px 80px rgba(39, 24, 89, 0.22);
  border-radius: 22px;
  padding: 18px;
  color: var(--text);
  max-height: min(74vh, 680px);
  overflow: auto;
  backdrop-filter: blur(14px);
}

.xp-breakdown-preview-v39.hidden {
  display: none;
}

.xp-preview-head-v39 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.12);
}

.xp-preview-kicker-v39 {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 900;
}

.xp-preview-head-v39 h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.2;
}

.xp-preview-total-v39 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.10);
  color: var(--accent);
  font-weight: 950;
}

.xp-preview-close-v39 {
  border: 0;
  background: rgba(124, 58, 237, 0.09);
  color: var(--text);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  font-size: 1.35rem;
  line-height: 1;
}

.xp-preview-list-v39 {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.xp-preview-item-v39 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 14px;
  background: rgba(247, 243, 255, 0.56);
}

.xp-preview-item-v39 strong {
  font-size: 0.92rem;
}

.xp-preview-item-v39 small {
  display: block;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 700;
}

.xp-preview-value-v39 {
  font-weight: 950;
  font-size: 1.02rem;
  padding: 6px 10px;
  border-radius: 999px;
  min-width: 58px;
  text-align: center;
  background: rgba(16, 185, 129, 0.10);
  color: #047857;
}

.xp-preview-value-v39.negative {
  background: rgba(239, 68, 68, 0.10);
  color: #b91c1c;
}

.xp-preview-empty-v39 {
  padding: 14px;
  border-radius: 16px;
  background: rgba(247, 243, 255, 0.72);
  color: var(--muted);
  font-weight: 800;
}

.xp-preview-note-v39 {
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.10);
  color: #92400e;
  font-weight: 800;
  font-size: 0.86rem;
}

.xp-preview-actions-v39 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* V40 — ficha reorganizada y preview más limpio */
.form-details {
  margin-top: 16px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 18px;
  padding: 12px 14px 14px;
  background: rgba(255, 255, 255, 0.72);
}
.form-details summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--text, #1f1b2d);
  letter-spacing: .02em;
}
.form-details .fieldset-help { margin: 10px 0 12px; }
.full-span { grid-column: 1 / -1; }
.auto-field {
  background: rgba(124, 58, 237, 0.06) !important;
  cursor: not-allowed;
}
.hidden-legacy-fields {
  display: none !important;
}
.lead-preview-summary-v40 {
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(124, 58, 237, 0.045);
  line-height: 1.45;
  max-height: 180px;
  overflow: auto;
}
.lead-preview-summary-v40 + .lead-preview-summary-v40 { margin-top: 10px; }
.lead-preview-section-title-v40 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #6d42d8;
  font-weight: 950;
}

/* =========================================================
   V42 - XP solo clic + edición rápida en preview del nombre
========================================================= */
.xp-score-trigger-v39 {
  cursor: pointer;
}
.xp-score-trigger-v39:hover,
.xp-score-trigger-v39:focus-visible {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
  outline: none;
}
.lead-preview-actions-v42 {
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.lead-preview-editor-v42 {
  display: grid;
  gap: 12px;
}
.lead-preview-editor-v42 label {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 950;
  color: var(--muted, #756f86);
}
.lead-preview-editor-v42 textarea {
  width: 100%;
  resize: vertical;
  min-height: 106px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text, #171227);
  padding: 12px 13px;
  font-weight: 750;
  line-height: 1.4;
}
.lead-preview-editor-v42 textarea:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.52);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.10);
}

/* V43 - Estado y dolor clicables desde la tabla */
.inline-chip-edit-v43 {
  border: 1px solid var(--border, #e7ddff);
  cursor: pointer;
  font: inherit;
  line-height: 1.1;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.inline-chip-edit-v43:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(124, 58, 237, .14);
  border-color: rgba(124, 58, 237, .32);
}
.quick-section-primary-v43 {
  border-color: rgba(124, 58, 237, .30);
  background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(255,255,255,.92));
}
.quick-static-note-v43 {
  border: 1px dashed rgba(124, 58, 237, .25);
  border-radius: 16px;
  padding: 12px 14px;
  color: var(--muted, #6f6b80);
  background: rgba(255,255,255,.72);
  font-size: .92rem;
}
.quick-static-note-v43 small {
  color: var(--muted, #6f6b80);
}

/* ============================================================
   V44 - Ventas múltiples por lead
============================================================ */
.sales-manager-v44 {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}
.sales-manager-head-v44 {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.sales-manager-head-v44 h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}
.sales-manager-head-v44 p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}
.sales-items-v44 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sale-item-v44 {
  display: grid;
  grid-template-columns: minmax(160px, 1.25fr) minmax(140px, 1fr) minmax(110px, 0.7fr) minmax(140px, 0.85fr) minmax(160px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(247,243,255,0.58);
}
.sale-item-v44 label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
}
.sale-item-v44 input,
.sale-item-v44 select {
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 750;
  color: var(--text);
  background: #fff;
}
.sale-remove-v44 {
  min-height: 42px;
  border-color: rgba(239,68,68,0.25) !important;
  background: rgba(254,226,226,0.8) !important;
  color: #991b1b !important;
}
.sales-total-v44 {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--accent-3);
  color: var(--accent);
  font-weight: 950;
}
.sale-empty-v44 {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--muted);
  font-weight: 800;
  background: rgba(255,255,255,0.58);
}
@media (max-width: 1100px) {
  .sale-item-v44 { grid-template-columns: 1fr 1fr; }
  .sale-remove-v44 { grid-column: span 2; }
}
@media (max-width: 680px) {
  .sales-manager-head-v44 { flex-direction: column; }
  .sale-item-v44 { grid-template-columns: 1fr; }
  .sale-remove-v44 { grid-column: auto; }
}

/* ============================================================
   V46 - Métricas reorganizadas
============================================================ */
.metrics-v46-head {
  align-items: flex-end;
  gap: 18px;
}
.metrics-month-control {
  min-width: 220px;
}
.metrics-v46-shell {
  display: grid;
  gap: 22px;
}
.metrics-v46-section {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(139, 92, 246, .16);
  border-radius: 28px;
  padding: 22px;
  box-shadow: 0 18px 50px rgba(35, 20, 69, .06);
}
.metrics-v46-summary {
  border-top: 4px solid #8b3ff2;
}
.metrics-v46-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.metrics-v46-title h3 {
  margin: 4px 0 0;
  font-size: 24px;
}
.metrics-v46-title p {
  margin: 6px 0 0;
  color: var(--muted);
}
.metrics-v46-two-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 22px;
}
.metric-card-v46.featured {
  background: linear-gradient(135deg, rgba(139,63,242,.12), rgba(255,255,255,.95));
}
.metrics-v46-rings {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}
.ring-card-v46 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(139, 92, 246, .16);
  border-radius: 20px;
  background: rgba(255,255,255,.88);
}
.ring-card-v46 strong {
  display: block;
  font-size: 17px;
}
.ring-card-v46 small,
.ring-card-v46 em {
  display: block;
  color: var(--muted);
  font-style: normal;
  margin-top: 3px;
}
.ring-v46 {
  --p: 0;
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  border-radius: 50%;
  background: conic-gradient(#8b3ff2 calc(var(--p) * 1%), rgba(139, 92, 246, .12) 0);
  display: grid;
  place-items: center;
  position: relative;
}
.ring-v46::after {
  content: '';
  position: absolute;
  inset: 9px;
  background: #fff;
  border-radius: 50%;
}
.ring-v46 span {
  position: relative;
  z-index: 1;
  font-weight: 900;
  color: #241633;
  font-size: 14px;
}
.sales-table-card-v46 {
  margin-top: 16px;
}
.sales-table-v46 {
  display: grid;
  gap: 8px;
}
.sales-table-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr .9fr .8fr .6fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(139, 92, 246, .12);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  font-size: 13px;
}
.sales-table-row.head {
  background: rgba(139, 63, 242, .08);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}
.sales-table-row strong {
  text-align: right;
}
.metrics-v46-note {
  margin: -8px 0 16px;
  line-height: 1.45;
}
.manual-metrics-grid-v46 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.manual-metrics-grid-v46 label textarea {
  min-height: 84px;
}
@media (max-width: 1100px) {
  .metrics-v46-two-cols,
  .manual-metrics-grid-v46 {
    grid-template-columns: 1fr;
  }
  .sales-table-row {
    grid-template-columns: 1fr;
  }
  .sales-table-row strong {
    text-align: left;
  }
}


/* ============================================================
   V47 - Métricas: pipeline, llamadas, análisis mensual
============================================================ */
.metrics-v47-shell { gap: 22px; }
.metrics-v47-section { position: relative; }
.metrics-v47-summary { border: 1px solid rgba(255,255,255,.10); }
.metrics-v47-two-cols { align-items: stretch; }
.metrics-v47-rings { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.analytics-grid-v47 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.manual-bottom-v47 { margin-top: 6px; border-top: 1px solid rgba(255,255,255,.08); }
.manual-metrics-grid-v47 label:has(textarea) { grid-column: span 2; }
.sales-table-v47 .sales-table-row { grid-template-columns: 1.2fr 1fr .9fr .8fr .7fr .9fr; }
.sales-table-v47 .sales-table-row span:last-child { color: var(--muted); font-size: .82rem; }
.call-status-pill-v47 { display:inline-flex; align-items:center; gap:6px; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--muted); font-size: .78rem; }
.monthly-analysis-table-v47 { margin-top: 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; background: rgba(5, 9, 18, .35); }
.monthly-row-v47 { display:grid; grid-template-columns: 1fr .8fr .8fr .9fr 1fr 1fr; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.06); align-items:center; }
.monthly-row-v47:last-child { border-bottom: 0; }
.monthly-row-v47.head { background: rgba(255,255,255,.06); color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.monthly-row-v47 strong { color: var(--text); }
.metrics-mini-note-v47 { margin-top: 10px; color: var(--muted); font-size: .82rem; }
@media (max-width: 760px) {
  .monthly-row-v47 { grid-template-columns: 1fr 1fr; }
  .monthly-row-v47.head { display:none; }
  .monthly-row-v47 span::before, .monthly-row-v47 strong::before { content: attr(data-label) ': '; color: var(--muted); font-weight: 500; }
  .sales-table-v47 .sales-table-row { grid-template-columns: 1fr; }
  .manual-metrics-grid-v47 label:has(textarea) { grid-column: span 1; }
}

/* ============================================================
   V48 — Selectores rápidos directos desde tabla
============================================================ */
.quick-field-backdrop-v48 {
  position: fixed;
  inset: 0;
  background: rgba(23, 18, 39, 0.22);
  backdrop-filter: blur(2px);
  z-index: 170;
}
.quick-field-backdrop-v48.hidden,
.quick-field-popover-v48.hidden {
  display: none;
}
.quick-field-popover-v48 {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(420px, calc(100vw - 28px));
  transform: translate(-50%, -50%);
  z-index: 180;
  background: var(--panel-2, #fff);
  border: 1px solid var(--line, rgba(92,70,150,.16));
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(44, 33, 81, .24);
  padding: 20px;
}
.quick-field-head-v48 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line, rgba(92,70,150,.16));
}
.quick-field-head-v48 h2 {
  margin: 4px 0 3px;
  font-size: 1.2rem;
}
.quick-field-head-v48 span,
.quick-field-help-v48 {
  color: var(--muted, #6f6880);
  font-weight: 700;
  font-size: .9rem;
}
.quick-field-form-v48 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
.quick-field-form-v48 label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 850;
}
.quick-field-form-v48 select,
.quick-field-form-v48 input {
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid var(--line, rgba(92,70,150,.16));
  background: #fff;
  color: var(--text, #171227);
  padding: 0 14px;
  font-weight: 850;
}
.quick-field-form-v48 select:focus,
.quick-field-form-v48 input:focus {
  outline: none;
  border-color: rgba(124, 58, 237, .55);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .12);
}
.quick-field-actions-v48 {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
@media (max-width: 640px) {
  .quick-field-actions-v48 {
    flex-direction: column-reverse;
  }
  .quick-field-actions-v48 .btn {
    width: 100%;
  }
}


/* V49 — Botón Hoy + creación rápida de dolores */
.quick-date-actions-v49 {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px;
}
.quick-pain-create-v49 {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.quick-pain-create-v49 label {
  display: grid;
  gap: 7px;
  font-weight: 800;
  color: var(--muted);
}
.quick-pain-create-v49 input {
  width: 100%;
}
.quick-pain-create-actions-v49 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.date-input-with-action-v49 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.date-input-with-action-v49 input[type="date"] {
  width: 100%;
}
@media (max-width: 720px) {
  .date-input-with-action-v49 {
    grid-template-columns: 1fr;
  }
  .quick-pain-create-actions-v49 {
    flex-direction: column;
  }
}


/* ============================================================
   V54 - Leads fijados con PIN visible en raíz de nombre
============================================================ */
.pipeline-chip.pinned-summary-v54 {
  background: #fff7ed;
  color: #9a3412;
  border-color: rgba(249, 115, 22, .28);
}

.lead-name-pin-line-v54 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.pin-lead-btn-v54 {
  appearance: none;
  border: 1px solid rgba(124, 58, 237, .22);
  background: rgba(255, 255, 255, .94);
  color: #6d28d9;
  width: 25px;
  height: 25px;
  min-width: 25px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(80, 53, 156, .09);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
  vertical-align: middle;
  position: relative;
  z-index: 4;
}

.pin-lead-btn-v54:hover {
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(124, 58, 237, .42);
  background: #fff;
}

.pin-lead-btn-v54.is-pinned {
  background: #fff7ed;
  border-color: rgba(249, 115, 22, .42);
  color: #c2410c;
}

.worktable-row.lead-pinned-v54,
.lead-card.lead-pinned-v54 {
  background: linear-gradient(90deg, rgba(255, 247, 237, .82), rgba(255,255,255,.96));
  box-shadow: inset 5px 0 0 #f59e0b;
}

.work-name.lead-preview-trigger-v38:has(.pin-lead-btn-v54) {
  cursor: help;
}

.lead-name-text-v54 {
  min-width: 0;
}


/* ============================================================
   V55 - Modo Seguir/Soltar sin reordenar el lead
============================================================ */
.pipeline-chip.follow-summary-v55 {
  background: #fef2f2;
  color: #b91c1c;
  border-color: rgba(239, 68, 68, .24);
}

.btn-follow-v55 {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid rgba(249, 115, 22, .34);
  box-shadow: 0 8px 18px rgba(249, 115, 22, .08);
  white-space: nowrap;
}

.btn-follow-v55.follow-compact-v56 {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  margin-left: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
  vertical-align: middle;
}

.btn-follow-v55:hover {
  background: #ffedd5;
  border-color: rgba(249, 115, 22, .52);
  transform: translateY(-1px);
}

.btn-follow-v55.is-following {
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 12px 24px rgba(249, 115, 22, .24);
}

@keyframes leadFollowingPulseV56 {
  0%, 100% {
    box-shadow: inset 0 0 0 2px rgba(249, 115, 22, .62), inset 6px 0 0 #f97316, 0 10px 24px rgba(249, 115, 22, .10);
  }
  50% {
    box-shadow: inset 0 0 0 3px rgba(249, 115, 22, .98), inset 6px 0 0 #ea580c, 0 14px 34px rgba(249, 115, 22, .22);
  }
}

.worktable-row.lead-following-v55,
.lead-card.lead-following-v55 {
  position: relative;
  background: linear-gradient(90deg, rgba(255, 237, 213, .94), rgba(255,255,255,.98));
  outline: 2px solid rgba(249, 115, 22, .56);
  outline-offset: -2px;
  animation: leadFollowingPulseV56 1.35s ease-in-out infinite;
}

.lead-card.lead-following-v55 .work-name strong::after,
.lead-card.lead-following-v55 .lead-name::after {
  content: '  🔥 cogido';
  font-size: 11px;
  color: #c2410c;
  font-weight: 800;
  letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
  .worktable-row.lead-following-v55,
  .lead-card.lead-following-v55 {
    animation: none;
  }
}


/* ============================================================
   V57 - Seguir/Soltar minimalista
   Capa visual segura: mantiene la lógica V55/V56 intacta y reduce
   el peso del botón situado junto a los puntos.
============================================================ */
.btn-follow-v55.follow-compact-v56 {
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 4px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  opacity: .48;
  vertical-align: -2px;
  transform: none;
}

.worktable-row:hover .btn-follow-v55.follow-compact-v56,
.lead-card:hover .btn-follow-v55.follow-compact-v56,
.btn-follow-v55.follow-compact-v56:focus-visible {
  opacity: 1;
  background: rgba(249, 115, 22, .08);
  border-color: rgba(249, 115, 22, .22);
}

.btn-follow-v55.follow-compact-v56:hover {
  background: rgba(249, 115, 22, .12);
  border-color: rgba(249, 115, 22, .32);
  box-shadow: none;
  transform: none;
}

.btn-follow-v55.follow-compact-v56.is-following {
  opacity: 1;
  background: rgba(249, 115, 22, .14);
  color: #c2410c;
  border-color: rgba(249, 115, 22, .34);
  box-shadow: 0 0 0 2px rgba(249, 115, 22, .08);
  font-size: 11px;
  animation: followIconPulseV57 1.35s ease-in-out infinite;
}

@keyframes followIconPulseV57 {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .18); }
  50% { box-shadow: 0 0 0 3px rgba(249, 115, 22, .10); }
}

@keyframes leadFollowingBorderPulseV57 {
  0%, 100% {
    box-shadow: inset 4px 0 0 rgba(249, 115, 22, .82), inset 0 0 0 1px rgba(249, 115, 22, .14);
  }
  50% {
    box-shadow: inset 4px 0 0 rgba(234, 88, 12, .96), inset 0 0 0 1px rgba(249, 115, 22, .24);
  }
}

.worktable-row.lead-following-v55,
.lead-card.lead-following-v55 {
  position: relative;
  background: linear-gradient(90deg, rgba(255, 247, 237, .82), rgba(255, 255, 255, .99));
  outline: none;
  animation: leadFollowingBorderPulseV57 1.6s ease-in-out infinite;
}

.lead-card.lead-following-v55 .work-name strong::after,
.lead-card.lead-following-v55 .lead-name::after {
  content: '';
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn-follow-v55.follow-compact-v56.is-following,
  .worktable-row.lead-following-v55,
  .lead-card.lead-following-v55 {
    animation: none;
  }
}

/* ============================================================
   V58 - Marco naranja visible para lead cogido
   Capa visual segura: mantiene los botones minimalistas de V57 y
   recupera una marca de fila más fuerte para localizar el lead.
============================================================ */
@keyframes leadFollowingStrongFrameV58 {
  0%, 100% {
    box-shadow:
      inset 0 0 0 2px rgba(249, 115, 22, .62),
      inset 6px 0 0 #f97316,
      0 10px 24px rgba(249, 115, 22, .10);
  }
  50% {
    box-shadow:
      inset 0 0 0 3px rgba(249, 115, 22, .98),
      inset 6px 0 0 #ea580c,
      0 14px 34px rgba(249, 115, 22, .22);
  }
}

.worktable-row.lead-following-v55,
.lead-card.lead-following-v55 {
  position: relative;
  background: linear-gradient(90deg, rgba(255, 237, 213, .94), rgba(255, 255, 255, .98));
  outline: 2px solid rgba(249, 115, 22, .56);
  outline-offset: -2px;
  animation: leadFollowingStrongFrameV58 1.35s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .worktable-row.lead-following-v55,
  .lead-card.lead-following-v55 {
    animation: none;
  }
}


/* ============================================================
   V59 - Leads compradores marcados en verde
   Capa visual segura: detecta ventas reales sin tocar lógica de
   guardado. El modo Coger/Soltar naranja mantiene prioridad visual.
============================================================ */
.worktable-row.lead-sold-v59:not(.lead-following-v55),
.lead-card.lead-sold-v59:not(.lead-following-v55) {
  position: relative;
  opacity: 1;
  background: linear-gradient(90deg, rgba(220, 252, 231, .92), rgba(255, 255, 255, .98));
  box-shadow:
    inset 6px 0 0 #16a34a,
    inset 0 0 0 1px rgba(22, 163, 74, .22),
    0 10px 28px rgba(22, 163, 74, .07);
}

.worktable-row.lead-sold-v59:not(.lead-following-v55):hover,
.lead-card.lead-sold-v59:not(.lead-following-v55):hover {
  background: linear-gradient(90deg, rgba(187, 247, 208, .96), rgba(255, 255, 255, .99));
  box-shadow:
    inset 6px 0 0 #15803d,
    inset 0 0 0 1px rgba(22, 163, 74, .34),
    0 14px 34px rgba(22, 163, 74, .10);
}

.worktable-row.lead-sold-v59:not(.lead-following-v55) .work-name strong,
.lead-card.lead-sold-v59:not(.lead-following-v55) .lead-name {
  color: #14532d;
}

.worktable-row.lead-sold-v59:not(.lead-following-v55) .product-cell strong,
.lead-card.lead-sold-v59:not(.lead-following-v55) .info-box strong {
  color: #166534;
}

.worktable-row.lead-sold-v59:not(.lead-following-v55) .urgency-dot,
.lead-card.lead-sold-v59:not(.lead-following-v55) .urgency-pill {
  background: #16a34a;
  border-color: rgba(22, 163, 74, .32);
}

/* ============================================================
   V60 - Temperatura en Último contacto y estados visuales limpios
============================================================ */
.status-stack-v60 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-width: 118px;
}

.badge.mini.state-badge-v60,
.badge.state-badge-v60 {
  min-width: 104px;
  justify-content: center;
  padding: 5px 10px;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .01em;
  box-shadow: 0 8px 18px rgba(80, 53, 156, .07);
}

.badge.mini.pain-badge-v60 {
  max-width: 138px;
  padding: 3px 8px;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 800;
  color: #7c6f92;
  background: rgba(248, 250, 252, .82);
  border-color: rgba(148, 163, 184, .22);
  box-shadow: none;
}

.state-badge-v60.state-sold-v60 {
  color: #047857;
  background: #ecfdf5;
  border-color: rgba(22, 163, 74, .28);
}

.state-badge-v60.state-ghosting-v60 {
  color: #6d28d9;
  background: #f3e8ff;
  border-color: rgba(124, 58, 237, .26);
}

.state-badge-v60.state-lost-v60 {
  color: #64748b;
  background: #f1f5f9;
  border-color: rgba(100, 116, 139, .24);
}

.state-badge-v60.state-proposal-v60 {
  color: #4338ca;
  background: #eef2ff;
  border-color: rgba(79, 70, 229, .24);
}

.state-badge-v60.state-call-v60 {
  color: #0369a1;
  background: #e0f2fe;
  border-color: rgba(14, 165, 233, .24);
}

.state-badge-v60.state-pending-v60 {
  color: #92400e;
  background: #fffbeb;
  border-color: rgba(245, 158, 11, .28);
}

.state-badge-v60.state-active-v60 {
  color: #7e22ce;
  background: #faf5ff;
  border-color: rgba(168, 85, 247, .30);
}

.state-badge-v60.state-default-v60 {
  color: #5b21b6;
  background: #f5f3ff;
  border-color: rgba(124, 58, 237, .18);
}

.worktable-row > .inline-edit-cell.last-contact-temp-v60 {
  border-radius: 12px;
  border: 1px solid transparent;
  min-height: 42px;
  padding: 8px 10px;
  font-weight: 900;
  align-items: flex-start;
}

.last-contact-temp-v60.last-contact-temp-very-hot-v60 {
  color: #b91c1c;
  background: rgba(254, 226, 226, .72);
  border-color: rgba(239, 68, 68, .25);
}

.last-contact-temp-v60.last-contact-temp-hot-v60 {
  color: #c2410c;
  background: rgba(255, 237, 213, .76);
  border-color: rgba(249, 115, 22, .25);
}

.last-contact-temp-v60.last-contact-temp-cold-v60 {
  color: #1d4ed8;
  background: rgba(219, 234, 254, .72);
  border-color: rgba(59, 130, 246, .24);
}

.last-contact-temp-v60.last-contact-temp-normal-v60 {
  color: #047857;
  background: rgba(220, 252, 231, .70);
  border-color: rgba(22, 163, 74, .22);
}

.last-contact-temp-v60:hover,
.last-contact-temp-v60:focus-visible {
  filter: brightness(.985);
  outline: 2px solid rgba(124, 58, 237, .18);
}

.lead-card .badge-row .state-badge-v60 {
  min-width: auto;
}


/* ============================================================
   V61 — Métricas comerciales históricas
   ============================================================ */
.funnel-bar.step-3 { background: linear-gradient(90deg, #f59e0b, #fb7185); }
.funnel-bar.step-4 { background: linear-gradient(90deg, #22c55e, #16a34a); }
.metric-card-v61-historical small b,
.metric-card-v61-historical .metric-card-top + strong {
  letter-spacing: -0.03em;
}
.v61-history-note {
  margin-top: 8px;
  color: #6f6880;
  font-size: 12px;
}


/* ============================================================
   V62 — Origen, productos y calidad CRM
   Capa visual segura para métricas estratégicas sin alterar lógica.
============================================================ */
.metrics-v62-card {
  margin-top: 16px;
}
.metrics-v62-table {
  display: grid;
  gap: 8px;
}
.metrics-v62-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.25fr) 0.65fr 0.65fr 0.9fr 0.7fr 0.8fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(92, 70, 150, 0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.74);
  color: var(--text);
}
.metrics-v62-row.head {
  background: rgba(124, 58, 237, 0.08);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.metrics-v62-row strong {
  font-size: .95rem;
}
.metrics-v62-quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.quality-item-v62 {
  border: 1px solid rgba(92, 70, 150, 0.12);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,0.76);
}
.quality-item-v62 strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.1;
  margin-bottom: 4px;
}
.quality-item-v62 span {
  display: block;
  font-size: .82rem;
  color: var(--muted);
}
.quality-item-v62.good { border-color: rgba(22, 163, 74, .24); background: rgba(22, 163, 74, .06); }
.quality-item-v62.warn { border-color: rgba(245, 158, 11, .30); background: rgba(245, 158, 11, .08); }
.quality-item-v62.bad { border-color: rgba(239, 68, 68, .24); background: rgba(239, 68, 68, .07); }
.metrics-v62-mini-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: .82rem;
}
@media (max-width: 860px) {
  .metrics-v62-row {
    grid-template-columns: 1fr 1fr;
  }
  .metrics-v62-row.head {
    display: none;
  }
  .metrics-v62-row span::before,
  .metrics-v62-row strong::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 2px;
  }
}


/* ============================================================
   V63 - Dashboard ejecutivo de métricas
   Capa visual: resumen rápido, alertas operativas y embudo claro.
============================================================ */
.executive-summary-v63 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  margin: 14px 0 16px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.10), transparent 30rem),
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(250,247,255,0.92));
  box-shadow: 0 16px 36px rgba(80, 53, 156, 0.10);
}

.executive-summary-v63 h4 {
  margin: 0 0 6px;
  font-size: 1.02rem;
}

.executive-summary-v63 p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.executive-summary-v63 strong {
  color: var(--text);
}

.executive-summary-badges-v63 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.executive-badge-v63 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.08);
  color: #4c1d95;
  border: 1px solid rgba(124, 58, 237, 0.16);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.executive-alerts-v63 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 10px 0 2px;
}

.executive-alert-v63 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(245, 158, 11, 0.24);
  background: rgba(255, 251, 235, 0.72);
}

.executive-alert-v63.good {
  border-color: rgba(22, 163, 74, 0.22);
  background: rgba(240, 253, 244, 0.76);
}

.executive-alert-v63.warn {
  border-color: rgba(245, 158, 11, 0.26);
  background: rgba(255, 251, 235, 0.82);
}

.executive-alert-v63.bad {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(254, 242, 242, 0.82);
}

.executive-alert-v63 span:first-child {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.7);
  flex: 0 0 auto;
}

.executive-alert-v63 strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.86rem;
}

.executive-alert-v63 small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
}

.funnel-chart.v63-funnel {
  display: grid;
  gap: 12px;
}

.funnel-row.v63-stage {
  grid-template-columns: minmax(128px, 0.9fr) minmax(0, 2fr) minmax(92px, auto);
  align-items: center;
}

.funnel-conversion-v63 {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: right;
}

.funnel-bar.step-0 { background: linear-gradient(90deg, #7c3aed, #a855f7); }
.funnel-bar.step-1 { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.funnel-bar.step-2 { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.funnel-bar.step-3 { background: linear-gradient(90deg, #10b981, #34d399); }
.funnel-bar.step-4 { background: linear-gradient(90deg, #16a34a, #22c55e); }

.metrics-v63-section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 800;
}

@media (max-width: 760px) {
  .executive-summary-v63 {
    grid-template-columns: 1fr;
  }
  .executive-summary-badges-v63 {
    justify-content: flex-start;
  }
  .funnel-row.v63-stage {
    grid-template-columns: 1fr;
  }
  .funnel-conversion-v63 {
    text-align: left;
  }
}

/* ============================================================
   V64 — Origen visible en fila + filtro por origen
============================================================ */
.origin-filter-wrap-v64 select,
#originFilter {
  min-width: 170px;
}

.origin-chip-v64 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  padding: 4px 8px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.06);
  color: #4c1d95;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.origin-chip-v64 span {
  font-size: .78rem;
}

.origin-chip-v64:hover,
.origin-chip-v64:focus-visible {
  transform: translateY(-1px);
  background: rgba(124, 58, 237, 0.11);
  border-color: rgba(124, 58, 237, 0.34);
  box-shadow: 0 8px 18px rgba(80, 53, 156, 0.12);
  outline: none;
}

.origin-chip-v64.is-missing {
  background: rgba(107, 114, 128, 0.06);
  border-color: rgba(107, 114, 128, 0.18);
  color: #6b7280;
  font-weight: 700;
}

.work-name .origin-chip-v64 {
  display: flex;
  margin-top: 6px;
}

.lead-card .origin-chip-v64 {
  margin: 8px 0 2px;
}

@media (max-width: 760px) {
  .origin-filter-wrap-v64,
  #originFilter {
    width: 100%;
  }
  .origin-chip-v64 {
    font-size: .7rem;
    padding: 4px 7px;
  }
}

/* ============================================================
   V66 — Origen operativo visible real
============================================================ */
.origin-chip-v66 {
  margin-top: 6px;
  align-self: flex-start;
}

.work-name .origin-chip-v66 {
  display: inline-flex;
  max-width: 100%;
}

.worktable-head span:nth-child(4) {
  min-width: 96px;
}

/* ============================================================
   V67 — Métricas visuales optimizadas
============================================================ */
.metrics-nav-v67 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 18px;
  padding: 10px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 20px;
  background: rgba(255,255,255,0.74);
  box-shadow: 0 12px 34px rgba(80, 53, 156, 0.08);
  position: sticky;
  top: 8px;
  z-index: 8;
  backdrop-filter: blur(10px);
}

.metrics-nav-btn-v67 {
  border: 1px solid rgba(124, 58, 237, 0.16);
  background: rgba(124, 58, 237, 0.05);
  color: #4c1d95;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: 0.78rem;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.metrics-nav-btn-v67:hover,
.metrics-nav-btn-v67.active {
  transform: translateY(-1px);
  background: rgba(124, 58, 237, 0.13);
  border-color: rgba(124, 58, 237, 0.28);
}

.metrics-v46-section,
.metrics-v47-section {
  scroll-margin-top: 86px;
}

.state-cloud-v67 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.state-chip-v67 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.07);
  border: 1px solid rgba(124, 58, 237, 0.14);
  color: #4c1d95;
  font-size: 0.78rem;
  font-weight: 900;
}

.state-chip-v67 i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: .75;
}

.state-chip-v67 strong {
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  color: inherit;
}

.state-group-bars-v67,
.country-visual-v67,
.origin-bubble-grid-v67 {
  display: grid;
  gap: 10px;
}

.state-group-row-v67,
.country-row-v67 {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(0, 2fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(124, 58, 237, 0.10);
}

.state-group-row-v67 > span,
.country-main-v67 strong {
  font-weight: 950;
  color: var(--text);
  font-size: 0.82rem;
}

.state-group-row-v67 > strong,
.country-row-v67 small {
  color: #4c1d95;
  font-weight: 950;
}

.state-group-track-v67,
.country-track-v67 {
  height: 11px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(124, 58, 237, 0.09);
}

.state-group-track-v67 i,
.country-track-v67 i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(124,58,237,.85), rgba(168,85,247,.68));
}

.country-main-v67 {
  display: grid;
  gap: 3px;
}

.country-main-v67 span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.origin-bubble-v67 {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 17px;
  background: rgba(255,255,255,0.76);
  border: 1px solid rgba(124, 58, 237, 0.12);
}

.origin-bubble-v67 strong,
.origin-bubble-v67 em {
  position: relative;
  z-index: 1;
  font-weight: 950;
  color: var(--text);
  font-style: normal;
}

.origin-bubble-v67 span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.origin-bubble-v67 > i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, rgba(124,58,237,.8), rgba(168,85,247,.6));
}

.funnel-note-v67 {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.06);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

.funnel-note-v67.warn {
  background: rgba(255, 251, 235, 0.92);
  border: 1px solid rgba(245, 158, 11, 0.22);
  color: #92400e;
}

.metric-card-v67-country {
  border-color: rgba(16, 185, 129, 0.18);
}

@media (max-width: 760px) {
  .metrics-nav-v67 {
    position: static;
  }
  .state-group-row-v67,
  .country-row-v67 {
    grid-template-columns: 1fr;
  }
  .origin-bubble-v67 {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   V68 — Métricas por pestañas reales + países claros
============================================================ */
.metrics-nav-v67.metrics-nav-v68 {
  position: sticky;
  top: 8px;
  z-index: 12;
  margin-bottom: 20px;
  background: rgba(255,255,255,0.90);
}

.metrics-nav-v67.metrics-nav-v68::before {
  content: 'Vista';
  align-self: center;
  margin: 0 4px 0 2px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.metrics-nav-btn-v67.metrics-nav-btn-v68 {
  min-height: 34px;
}

.metrics-nav-btn-v67.metrics-nav-btn-v68.active {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  border-color: rgba(124, 58, 237, .36);
  box-shadow: 0 10px 22px rgba(124,58,237,.18);
}

.metrics-tab-hidden-v68 {
  display: none !important;
}

.metrics-tab-active-v68 {
  display: block;
  animation: metricsTabInV68 .18s ease both;
}

.metrics-v46-two-cols.metrics-tab-wrapper-v68 {
  display: contents;
}

@keyframes metricsTabInV68 {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.country-table-v68,
.origin-table-v68 {
  display: grid;
  gap: 8px;
}

.country-table-head-v68,
.country-table-row-v68,
.origin-table-head-v68,
.origin-table-row-v68 {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) .55fr .65fr .9fr .65fr;
  gap: 10px;
  align-items: center;
}

.country-table-head-v68,
.origin-table-head-v68 {
  padding: 0 10px 6px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.country-table-row-v68,
.origin-table-row-v68 {
  position: relative;
  overflow: hidden;
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid rgba(124,58,237,.12);
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 18px rgba(80,53,156,.05);
}

.country-table-row-v68::before,
.origin-table-row-v68::before {
  content: '';
  position: absolute;
  inset: auto auto 0 0;
  width: var(--bar-width, 0%);
  height: 4px;
  background: linear-gradient(90deg, rgba(124,58,237,.82), rgba(16,185,129,.58));
  border-radius: 0 999px 999px 0;
}

.country-name-v68,
.origin-name-v68 {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.country-name-v68 strong,
.origin-name-v68 strong {
  color: var(--text);
  font-size: .86rem;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-name-v68 small,
.origin-name-v68 small {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
}

.metric-num-v68 {
  color: var(--text);
  font-size: .82rem;
  font-weight: 950;
}

.metric-money-v68 {
  color: #065f46;
  font-size: .82rem;
  font-weight: 950;
}

.metric-percent-v68 {
  justify-self: start;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(124,58,237,.08);
  color: #4c1d95;
  font-size: .74rem;
  font-weight: 950;
}

.country-table-footer-v68,
.origin-table-footer-v68 {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
}

@media (max-width: 860px) {
  .country-table-head-v68,
  .origin-table-head-v68 {
    display: none;
  }
  .country-table-row-v68,
  .origin-table-row-v68 {
    grid-template-columns: 1fr 1fr;
  }
  .country-name-v68,
  .origin-name-v68 {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   V69 — Métricas ordenadas: origen/países, dolores y calidad
============================================================ */
.metrics-nav-v69 {
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(80, 53, 156, 0.08);
}

.metrics-nav-btn-v69 {
  border-radius: 999px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.metrics-nav-btn-v69:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(124,58,237,.10);
}

.acquisition-section-v69 .metrics-v46-title,
.pains-section-v69 .metrics-v46-title,
.quality-section-v69 .metrics-v46-title {
  align-items: flex-start;
}

.acquisition-section-v69 .metrics-v46-title p:not(.eyebrow),
.pains-section-v69 .metrics-v46-title p:not(.eyebrow),
.quality-section-v69 .metrics-v46-title p:not(.eyebrow) {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 750;
}

.acquisition-grid-v69,
.pains-grid-v69 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.acquisition-section-v69 .chart-card,
.pains-section-v69 .chart-card,
.quality-section-v69 .chart-card {
  min-height: auto;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,250,255,.88));
}

.origin-card-v69 {
  border-color: rgba(124, 58, 237, .20);
  box-shadow: 0 16px 34px rgba(124,58,237,.07);
}

.country-card-v69 {
  border-color: rgba(16, 185, 129, .22);
  box-shadow: 0 16px 34px rgba(16,185,129,.06);
}

.pain-top-card-v69 {
  border-color: rgba(236, 72, 153, .18);
  box-shadow: 0 16px 34px rgba(236,72,153,.06);
}

/* Las tablas de origen y país deben leerse completas, no como columnas estrechas. */
.acquisition-section-v69 .metrics-v62-card,
.pains-section-v69 .metrics-v62-card,
.quality-section-v69 .metrics-v62-card {
  min-height: auto;
}

.acquisition-section-v69 .metrics-v62-card {
  border-color: rgba(124, 58, 237, .14);
}

.pains-section-v69 .metrics-v62-card {
  border-color: rgba(236, 72, 153, .16);
}

.quality-slot-v69 > .metrics-v62-card {
  margin: 0;
}

.quality-slot-v69 .metrics-v62-quality-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.country-table-v68,
.origin-table-v68,
.metrics-v62-table {
  width: 100%;
}

.country-table-row-v68,
.origin-table-row-v68,
.metrics-v62-row {
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,243,255,.72));
}

.country-table-row-v68:nth-child(even),
.origin-table-row-v68:nth-child(even),
.metrics-v62-row:nth-child(even):not(.head) {
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,253,244,.60));
}

.country-table-row-v68:hover,
.origin-table-row-v68:hover,
.metrics-v62-row:not(.head):hover {
  transform: translateY(-1px);
  border-color: rgba(124,58,237,.24);
  box-shadow: 0 14px 26px rgba(80,53,156,.09);
}

.country-table-head-v68,
.origin-table-head-v68,
.metrics-v62-row.head {
  background: rgba(124,58,237,.045);
  border-radius: 12px;
}

.pains-section-v69 .metrics-v62-row.head {
  background: rgba(236,72,153,.055);
}

.metrics-tab-hidden-v69 {
  display: none !important;
}

.metrics-tab-active-v69 {
  display: block;
  animation: metricsTabInV68 .18s ease both;
}

@media (max-width: 1080px) {
  .acquisition-grid-v69,
  .pains-grid-v69 {
    grid-template-columns: 1fr;
  }
  .quality-slot-v69 .metrics-v62-quality-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 640px) {
  .quality-slot-v69 .metrics-v62-quality-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   V70 — Métricas clicables y panel accionable de leads
============================================================ */
.metric-clickable-v70 {
  cursor: pointer;
  position: relative;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.metric-clickable-v70:hover,
.metric-clickable-v70:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(124, 58, 237, .16);
  border-color: rgba(124, 58, 237, .34) !important;
  outline: none;
}
.metric-clickable-v70::after {
  content: 'Ver leads';
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
  color: #6d28d9;
  background: rgba(124, 58, 237, .08);
  border: 1px solid rgba(124, 58, 237, .15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
.metric-clickable-v70:hover::after,
.metric-clickable-v70:focus-visible::after { opacity: 1; }
.executive-alert-v63.metric-clickable-v70::after,
.funnel-row.metric-clickable-v70::after { top: 8px; right: 10px; }

.metrics-drawer-backdrop-v70 {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(21, 18, 35, .24);
  backdrop-filter: blur(7px);
  display: flex;
  justify-content: flex-end;
}
.metrics-drawer-backdrop-v70.hidden { display: none; }
.metrics-drawer-v70 {
  width: min(520px, 96vw);
  height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);
  border-left: 1px solid rgba(124, 58, 237, .18);
  box-shadow: -20px 0 60px rgba(42, 32, 73, .22);
  padding: 22px;
  overflow: auto;
  animation: drawerInV70 .18s ease-out;
}
@keyframes drawerInV70 { from { transform: translateX(28px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
.metrics-drawer-head-v70 {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(124, 58, 237, .14);
}
.metrics-drawer-head-v70 h3 {
  margin: 4px 0 4px;
  font-size: 22px;
  line-height: 1.1;
}
.metrics-drawer-head-v70 small {
  color: #6f6685;
  font-weight: 700;
}
.metrics-drawer-actions-v70 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.metrics-lead-list-v70 {
  display: grid;
  gap: 10px;
}
.metrics-lead-item-v70 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(124, 58, 237, .14);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 10px 24px rgba(73, 56, 122, .08);
}
.metrics-lead-main-v70 {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.metrics-lead-main-v70 strong {
  color: #161225;
  font-size: 14px;
  line-height: 1.15;
}
.metrics-lead-main-v70 small,
.metrics-lead-main-v70 span {
  color: #6f6685;
  font-size: 12px;
  font-weight: 750;
}
.metrics-lead-actions-v70 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.metrics-empty-v70 {
  padding: 18px;
  border-radius: 16px;
  border: 1px dashed rgba(124, 58, 237, .28);
  background: rgba(124, 58, 237, .04);
}
.metric-filter-chip-v70 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(124, 58, 237, .22);
  background: linear-gradient(135deg, rgba(124, 58, 237, .10), rgba(255, 255, 255, .92));
  color: #2a2240;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(124, 58, 237, .10);
}
.metric-filter-chip-v70 span { min-width: 0; }
@media (max-width: 720px) {
  .metrics-drawer-v70 { width: 100vw; padding: 16px; }
  .metrics-lead-item-v70 { grid-template-columns: 1fr; }
  .metrics-lead-actions-v70 { justify-content: flex-start; }
  .metric-filter-chip-v70 { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   V71 - Enlace llamada / Loom + color llamada trabajada
   ============================================================
   Capa visual y operativa segura sobre V70.
   - No toca cálculo de métricas ni Coger/Soltar.
   - Marca leads con llamada realizada / intento de venta.
   - Añade botón compacto para abrir o guardar Loom.
============================================================ */
.worktable-row.lead-called-v71:not(.lead-following-v55):not(.lead-sold-v59):not(.urgency-cerrada),
.lead-card.lead-called-v71:not(.lead-following-v55):not(.lead-sold-v59):not(.urgency-cerrada) {
  position: relative;
  background: linear-gradient(90deg, rgba(224, 242, 254, .82), rgba(255,255,255,.98));
  box-shadow:
    inset 6px 0 0 #0ea5e9,
    inset 0 0 0 1px rgba(14, 165, 233, .20),
    0 10px 28px rgba(14, 165, 233, .06);
}

.worktable-row.lead-called-v71.lead-lost-after-call-v71:not(.lead-following-v55):not(.lead-sold-v59),
.lead-card.lead-called-v71.lead-lost-after-call-v71:not(.lead-following-v55):not(.lead-sold-v59) {
  background: linear-gradient(90deg, rgba(243, 244, 246, .88), rgba(255,255,255,.98));
  box-shadow:
    inset 6px 0 0 #64748b,
    inset 0 0 0 1px rgba(100, 116, 139, .22),
    0 10px 28px rgba(100, 116, 139, .06);
}

.worktable-row.lead-called-v71:not(.lead-following-v55) .work-name strong,
.lead-card.lead-called-v71:not(.lead-following-v55) .lead-name {
  color: #075985;
}

.call-badge-v71 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, .28);
  background: rgba(224, 242, 254, .78);
  color: #075985;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .01em;
  white-space: nowrap;
}

.call-badge-v71.has-loom-v71 {
  border-color: rgba(124, 58, 237, .28);
  background: rgba(237, 233, 254, .84);
  color: #5b21b6;
}

.call-link-btn-v71 {
  padding-inline: 10px;
  border-color: rgba(14, 165, 233, .22) !important;
  color: #075985 !important;
  background: rgba(240, 249, 255, .92) !important;
}

.call-link-btn-v71.has-loom-v71 {
  border-color: rgba(124, 58, 237, .25) !important;
  color: #5b21b6 !important;
  background: rgba(245, 243, 255, .94) !important;
}

.call-link-btn-v71:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(14, 165, 233, .10);
}

.call-link-field-v71 input {
  border-color: rgba(14, 165, 233, .20);
  background: linear-gradient(180deg, #fff, rgba(240, 249, 255, .72));
}

.metrics-lead-item-v70.lead-called-v71 {
  border-color: rgba(14, 165, 233, .22);
  background: linear-gradient(90deg, rgba(224, 242, 254, .58), rgba(255,255,255,.98));
}

.metrics-call-link-v71 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 760px) {
  .call-badge-v71 { font-size: 9px; padding: 2px 6px; }
  .call-link-btn-v71 { padding-inline: 8px; }
}

/* ============================================================
   V72 — Post llamada, pipeline y timeline
============================================================ */
.phase-filter-wrap-v72 select {
  min-width: 190px;
}
.postcall-chip-v72,
.phase-chip-v72 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid rgba(37, 99, 235, 0.20);
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  margin-top: 5px;
}
.postcall-chip-v72.summary-done {
  border-color: rgba(22, 163, 74, 0.22);
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
}
.postcall-chip-v72.needs-action {
  border-color: rgba(245, 158, 11, 0.30);
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}
.worktable-row.lead-postcall-pending-v72,
.lead-card.lead-postcall-pending-v72 {
  box-shadow: inset 4px 0 0 rgba(245, 158, 11, 0.80), 0 12px 32px rgba(245, 158, 11, 0.10);
}
.worktable-row.lead-lost-after-call-v71,
.lead-card.lead-lost-after-call-v71,
.worktable-row.lead-lost-after-call-v72,
.lead-card.lead-lost-after-call-v72 {
  box-shadow: inset 4px 0 0 rgba(239, 68, 68, 0.72), 0 12px 32px rgba(127, 29, 29, 0.08);
}
.timeline-v72 {
  margin: 16px 0 0;
  padding: 14px;
  border: 1px solid rgba(124, 58, 237, 0.13);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(255, 255, 255, 0.75));
}
.timeline-v72 h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}
.timeline-list-v72 {
  display: grid;
  gap: 8px;
}
.timeline-item-v72 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(92, 70, 150, 0.10);
}
.timeline-dot-v72 {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(124, 58, 237, 0.10);
  font-size: 0.8rem;
}
.timeline-item-v72 strong {
  display: block;
  font-size: 0.82rem;
}
.timeline-item-v72 small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 2px;
}
.postcall-metrics-v72 {
  margin: 16px 0;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(255, 255, 255, 0.84));
}
.postcall-metrics-v72 h3 {
  margin: 0 0 4px;
}
.postcall-metrics-v72 p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.86rem;
}
.postcall-grid-v72 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.postcall-card-v72 {
  border: 1px solid rgba(37, 99, 235, 0.13);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.06);
}
.postcall-card-v72 small {
  display: block;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 4px;
}
.postcall-card-v72 strong {
  font-size: 1.25rem;
}
.price-offered-pill-v72 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.18);
  font-size: 0.72rem;
  font-weight: 800;
}

/* ============================================================
   V73 — Toolbar limpia + importación desplegable + métricas estables
============================================================ */
#tab-leads .toolbar {
  display: grid !important;
  grid-template-columns: minmax(300px, 1.45fr) repeat(5, minmax(145px, .82fr));
  gap: 12px !important;
  align-items: end !important;
  padding: 18px 20px !important;
}
#tab-leads .toolbar .view-toggle {
  grid-column: 1 / span 2;
  width: fit-content;
  min-width: 330px;
}
#tab-leads .toolbar .toolbar-buttons {
  grid-column: 3 / -1;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  width: 100%;
}
#tab-leads .toolbar .toolbar-buttons .btn,
#tab-leads .toolbar .toolbar-buttons .file-btn,
#tab-leads .toolbar .quick-import-summary-v73 {
  min-height: 42px;
  padding: 0 16px !important;
  border-radius: 14px !important;
  font-size: .88rem;
  white-space: nowrap;
}
.quick-import-card.quick-import-compact.quick-import-v73 {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  flex: 0 0 auto;
}
.quick-import-v73 .quick-import-summary-v73 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  border: 1px solid rgba(124,58,237,.17) !important;
  background: rgba(255,255,255,.92) !important;
  color: #3d3550 !important;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(80, 53, 156, .08);
}
.quick-import-v73[open] .quick-import-summary-v73,
.quick-import-v73 .quick-import-summary-v73:hover {
  background: #f5efff !important;
  color: #6d28d9 !important;
  border-color: rgba(124,58,237,.34) !important;
}
.quick-import-v73 .quick-import-summary-v73::-webkit-details-marker { display:none; }
.quick-import-v73 .quick-import-badge {
  padding: 4px 7px;
  font-size: .68rem;
  line-height: 1;
}
.quick-import-v73 .quick-import-body {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 80;
  width: min(620px, 88vw);
  padding: 16px !important;
  border: 1px solid rgba(124,58,237,.16);
  border-radius: 20px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 28px 70px rgba(80, 53, 156, .20);
}
.quick-import-v73 .quick-import-head.compact,
.quick-import-v73 .quick-import-footer.compact {
  align-items: flex-start;
  gap: 10px;
}
.quick-import-v73 .quick-import-head.compact p {
  font-size: .78rem;
  line-height: 1.35;
  max-width: none;
}
.quick-import-v73 #quickImportPaste {
  min-height: 108px !important;
  font-size: .82rem;
}
.import-links-v73 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.import-links-v73 a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(22, 163, 74, .20);
  background: rgba(240,253,244,.92);
  color: #15803d;
  font-size: .75rem;
  font-weight: 900;
  text-decoration: none;
}
.import-links-v73 a:hover {
  background: #dcfce7;
  transform: translateY(-1px);
}
.metrics-nav-v73 {
  position: sticky;
  top: 64px;
  z-index: 8;
}
.metrics-nav-btn-v73.active {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.metrics-tab-hidden-v73 { display: none !important; }
.postcall-grid-v73 {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
@media (max-width: 1380px) {
  #tab-leads .toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #tab-leads .toolbar .view-toggle,
  #tab-leads .toolbar .toolbar-buttons {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}
@media (max-width: 820px) {
  #tab-leads .toolbar { grid-template-columns: 1fr !important; }
  #tab-leads .toolbar .view-toggle,
  #tab-leads .toolbar .toolbar-buttons {
    grid-column: auto;
    width: 100%;
    min-width: 0;
  }
  #tab-leads .toolbar .toolbar-buttons {
    justify-content: stretch;
  }
  #tab-leads .toolbar .toolbar-buttons > * {
    flex: 1 1 150px;
  }
  .quick-import-v73 .quick-import-body {
    left: 0;
    right: auto;
    width: min(92vw, 560px);
  }
}

/* ============================================================
   V74 — Guardado online estable + toolbar/importación compacta
============================================================ */
#tab-leads .toolbar .toolbar-buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
#tab-leads .toolbar .toolbar-buttons > .btn,
#tab-leads .toolbar .toolbar-buttons > .file-btn,
#tab-leads .toolbar .toolbar-buttons > details.quick-import-card {
  flex: 0 0 auto !important;
}
#tab-leads #quickImportDetails.quick-import-card {
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
#tab-leads #quickImportDetails.quick-import-card:not([open]) .quick-import-body {
  display: none !important;
}
#tab-leads #quickImportDetails.quick-import-v73,
#tab-leads #quickImportDetails.quick-import-v74 {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#tab-leads #quickImportDetails .quick-import-summary-v73,
#tab-leads #quickImportDetails .quick-import-summary-v74 {
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
}
#tab-leads #quickImportDetails .quick-import-summary-v74 p,
#tab-leads #quickImportDetails .quick-import-summary-v74 h3,
#tab-leads #quickImportDetails .quick-import-summary-v73 p,
#tab-leads #quickImportDetails .quick-import-summary-v73 h3 {
  display: none !important;
}
#tab-leads #quickImportDetails .quick-import-body {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 10px) !important;
  z-index: 120 !important;
  width: min(620px, 88vw) !important;
}
.crm-online-warning-v74 {
  margin: 12px 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(245, 158, 11, .28);
  background: linear-gradient(135deg, rgba(255, 251, 235, .98), rgba(254, 243, 199, .75));
  color: #7c2d12;
  font-size: .86rem;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(245, 158, 11, .10);
}
.crm-online-warning-v74 strong { color: #9a3412; }
.crm-online-warning-v74 button {
  margin-left: 8px;
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  background: #7c3aed;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.btn.is-saving-v74,
button.is-saving-v74 {
  opacity: .68 !important;
  pointer-events: none !important;
}
@media (max-width: 1380px) {
  #tab-leads .toolbar .toolbar-buttons {
    justify-content: flex-start !important;
  }
}
@media (max-width: 820px) {
  #tab-leads .toolbar .toolbar-buttons > .btn,
  #tab-leads .toolbar .toolbar-buttons > .file-btn,
  #tab-leads .toolbar .toolbar-buttons > details.quick-import-card {
    flex: 1 1 150px !important;
  }
  #tab-leads #quickImportDetails .quick-import-body {
    left: 0 !important;
    right: auto !important;
    width: min(92vw, 560px) !important;
  }
}


/* ============================================================
   V77 — Seguridad de guardado y backup visual
   ============================================================ */
.sync-status-v77 {
  min-width: 184px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "dot title" "dot sub";
  align-items: center;
  column-gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 24px rgba(80, 53, 156, 0.08);
  color: var(--text);
}
.sync-status-v77 .sync-dot-v77 {
  grid-area: dot;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: 0 0 0 4px rgba(111, 104, 128, 0.10);
}
.sync-status-v77 strong { grid-area: title; font-size: .78rem; line-height: 1.1; }
.sync-status-v77 small { grid-area: sub; color: var(--muted); font-size: .69rem; line-height: 1.2; }
.sync-status-v77.online .sync-dot-v77 { background: var(--success); box-shadow: 0 0 0 4px rgba(22, 163, 74, .12); }
.sync-status-v77.local .sync-dot-v77 { background: var(--warning); box-shadow: 0 0 0 4px rgba(245, 158, 11, .14); }
.sync-status-v77.pending .sync-dot-v77,
.sync-status-v77.saving .sync-dot-v77 { background: var(--info); box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); animation: syncPulseV77 1.05s ease-in-out infinite; }
.sync-status-v77.error .sync-dot-v77 { background: var(--danger); box-shadow: 0 0 0 4px rgba(239, 68, 68, .14); }
@keyframes syncPulseV77 {
  0%, 100% { transform: scale(1); opacity: .65; }
  50% { transform: scale(1.35); opacity: 1; }
}
.backup-reminder-v77 {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(245, 158, 11, .25);
  background: rgba(255, 251, 235, .76);
  color: #5b4213;
  font-size: .82rem;
  font-weight: 700;
}
@media (max-width: 760px) {
  .sync-status-v77 { width: 100%; min-width: 0; }
  #quickBackupBtnV77 { flex: 1; }
}


/* V78 — llamada no cerrada y métricas post-llamada claras */
.postcall-metrics-v78 {
  border: 1px solid rgba(245, 158, 11, 0.28);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255, 247, 237, .72));
}
.postcall-grid-v78 {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.postcall-card-v78 {
  border-color: rgba(124,58,237,.14);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.postcall-card-v78.success {
  border-color: rgba(22, 163, 74, .28);
  background: linear-gradient(135deg, rgba(240,253,244,.96), rgba(255,255,255,.96));
}
.postcall-card-v78.warning {
  border-color: rgba(245, 158, 11, .34);
  background: linear-gradient(135deg, rgba(255,251,235,.96), rgba(255,255,255,.96));
}
.postcall-card-v78.danger {
  border-color: rgba(239, 68, 68, .28);
  background: linear-gradient(135deg, rgba(254,242,242,.96), rgba(255,255,255,.96));
}
.postcall-alert-title-v78 {
  margin: 18px 0 10px;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.postcall-alerts-v78 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.worktable-row.lead-called-v71:not(.lead-sold-v59):not(.lead-lost-after-call-v71) {
  box-shadow: inset 4px 0 0 rgba(37, 99, 235, .32);
}
.worktable-row:has(.postcall-chip-v72), .lead-card:has(.postcall-chip-v72) {
  position: relative;
}
.badge, .postcall-chip-v72, .call-badge-v71 {
  white-space: nowrap;
}

/* V79 — post-llamada accionable */
.postcall-clickable-v79 {
  cursor: pointer;
  position: relative;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.postcall-clickable-v79::after {
  content: 'Ver leads';
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.postcall-clickable-v79:hover,
.postcall-clickable-v79:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
  outline: none;
}
.loss-reasons-v79 {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
}
.loss-reasons-v79 h4 {
  margin: 0 0 10px;
  font-size: 15px;
}
.loss-reason-list-v79 {
  display: grid;
  gap: 9px;
}
.loss-reason-row-v79 {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}
.loss-reason-row-v79::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--loss-width, 8%);
  background: linear-gradient(90deg, rgba(239,68,68,.25), rgba(249,115,22,.10));
  pointer-events: none;
}
.loss-reason-row-v79 strong,
.loss-reason-row-v79 span {
  position: relative;
  z-index: 1;
}
.loss-reason-row-v79 strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loss-reason-row-v79 span {
  font-weight: 800;
  color: #fecaca;
}


/* ============================================================
   V80 - Panel de métricas accionables pulido
   ============================================================ */
.metrics-drawer-v70 {
  width: min(760px, 96vw);
}

.metrics-lead-list-v70 {
  gap: 14px;
}

.metrics-lead-item-v80 {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(124, 58, 237, .16);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, .07), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,247,255,.94));
  box-shadow: 0 14px 34px rgba(73, 56, 122, .10);
}

.metrics-lead-top-v80 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.metrics-lead-identity-v80 {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.metrics-lead-identity-v80 strong {
  color: #171327;
  font-size: 16px;
  line-height: 1.16;
  word-break: normal;
  overflow-wrap: anywhere;
}

.metrics-lead-identity-v80 span {
  color: #6f6685;
  font-size: 12px;
  font-weight: 750;
}

.metrics-lead-money-v80 {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, .20);
  background: rgba(236, 253, 245, .9);
  color: #047857;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.metrics-lead-chips-v80 {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.metric-chip-v80 {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  border: 1px solid rgba(124, 58, 237, .18);
  background: rgba(124, 58, 237, .08);
  color: #5b21b6;
}

.metric-chip-v80.origin {
  border-color: rgba(14, 165, 233, .20);
  background: rgba(224, 242, 254, .85);
  color: #075985;
}

.metric-chip-v80.funnel {
  border-color: rgba(245, 158, 11, .22);
  background: rgba(255, 251, 235, .92);
  color: #92400e;
}

.metric-chip-v80.status {
  border-color: rgba(124, 58, 237, .22);
  background: rgba(237, 233, 254, .86);
  color: #5b21b6;
}

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

.metrics-lead-grid-v80 div {
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(124, 58, 237, .08);
}

.metrics-lead-grid-v80 b {
  display: block;
  margin-bottom: 4px;
  color: #817595;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.metrics-lead-grid-v80 span {
  display: block;
  color: #2a2240;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.metrics-lead-extra-v80 {
  margin: 0;
  padding: 9px 11px;
  border-radius: 14px;
  background: rgba(254, 243, 199, .65);
  border: 1px solid rgba(245, 158, 11, .20);
  color: #7c4a03;
  font-size: 12px;
  font-weight: 800;
}

.metrics-lead-actions-v80 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}

@media (max-width: 760px) {
  .metrics-drawer-v70 {
    width: 100vw;
    padding: 16px;
  }
  .metrics-lead-grid-v80 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .metrics-lead-actions-v80 {
    justify-content: flex-start;
  }
}

@media (max-width: 460px) {
  .metrics-lead-grid-v80 {
    grid-template-columns: 1fr;
  }
  .metrics-lead-top-v80 {
    flex-direction: column;
  }
}


/* ============================================================
   V80 - Panel de métricas accionables limpio + origen visible
   ============================================================ */
.metrics-drawer-v70 {
  width: min(680px, 96vw);
  padding: 24px;
}

.metrics-lead-list-v70 {
  gap: 14px;
}

.metrics-lead-item-v70.metrics-lead-item-v80 {
  display: block;
  padding: 16px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(250,245,255,.92));
  border: 1px solid rgba(124, 58, 237, .16);
  box-shadow: 0 12px 32px rgba(73, 56, 122, .08);
}

.metrics-lead-top-v80 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.metrics-lead-title-v80 {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.metrics-lead-title-v80 strong {
  color: #171225;
  font-size: 16px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.metrics-lead-title-v80 small {
  width: fit-content;
  color: #6d28d9;
  font-size: 11px;
  font-weight: 850;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(124, 58, 237, .08);
  border: 1px solid rgba(124, 58, 237, .14);
}

.origin-chip-v80 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(14, 165, 233, .09);
  border: 1px solid rgba(14, 165, 233, .18);
  color: #075985;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.origin-chip-v80 strong {
  font-size: 11px;
  color: #0f172a;
}

.metrics-lead-meta-v80 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.metrics-lead-meta-v80 span {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(124, 58, 237, .10);
  color: #312a45;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.metrics-lead-meta-v80 b {
  display: block;
  margin-bottom: 2px;
  color: #817796;
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.metrics-lead-next-v80 {
  padding: 10px 12px;
  border-radius: 15px;
  background: rgba(251, 191, 36, .10);
  border: 1px solid rgba(251, 191, 36, .20);
  color: #5f4a18;
  font-size: 12px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.metrics-lead-next-v80 b {
  color: #2d243d;
}

.metrics-lead-actions-v70.metrics-lead-actions-v80 {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.metrics-origin-summary-v80 {
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(14, 165, 233, .18);
  background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(124,58,237,.06));
}

.metrics-origin-summary-title-v80 {
  display: block;
  margin-bottom: 9px;
  color: #4b3f63;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.metrics-origin-summary-chips-v80 {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

@media (max-width: 720px) {
  .metrics-drawer-v70 {
    width: 100vw;
    padding: 16px;
  }
  .metrics-lead-top-v80 {
    flex-direction: column;
  }
  .metrics-lead-meta-v80 {
    grid-template-columns: 1fr;
  }
  .origin-chip-v80 {
    white-space: normal;
  }
}


/* ============================================================
   V80.1 - Corrección final panel métricas / origen embudo
   ============================================================ */
.metrics-drawer-v70 {
  width: min(760px, 96vw) !important;
  max-width: 760px !important;
}

.metrics-lead-list-v70 {
  display: grid !important;
  gap: 14px !important;
}

.metric-origin-breakdown-v80 {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(14, 165, 233, .18);
  background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(124,58,237,.06));
}

.metric-origin-breakdown-title-v80 {
  margin-bottom: 10px;
  color: #4b3f63;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.metric-origin-breakdown-list-v80 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.metric-origin-pill-v80 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, .18);
  background: rgba(240, 249, 255, .92);
  color: #075985;
  font-size: 12px;
  font-weight: 850;
}

.metric-origin-pill-v80 b {
  color: #171225;
}

.metrics-lead-item-v80 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(250,247,255,.95)) !important;
  border: 1px solid rgba(124, 58, 237, .16) !important;
  box-shadow: 0 12px 30px rgba(73,56,122,.08) !important;
}

.metrics-lead-top-v80 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 12px !important;
}

.metrics-lead-identity-v80 {
  min-width: 0 !important;
}

.metrics-lead-identity-v80 strong {
  display: block !important;
  max-width: 100% !important;
  color: #171327 !important;
  font-size: 16px !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.metrics-lead-identity-v80 span {
  display: inline-flex !important;
  width: fit-content !important;
  margin-top: 5px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: rgba(124,58,237,.08) !important;
  border: 1px solid rgba(124,58,237,.14) !important;
  color: #6d28d9 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.metrics-lead-money-v80 {
  justify-self: end !important;
}

.metrics-lead-chips-v80 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

.metric-chip-v80 {
  white-space: normal !important;
  line-height: 1.18 !important;
}

.metrics-lead-grid-v80 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.metrics-lead-grid-v80 div {
  min-width: 0 !important;
}

.metrics-lead-actions-v80 {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

@media (max-width: 640px) {
  .metrics-drawer-v70 {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 16px !important;
  }
  .metrics-lead-top-v80 {
    grid-template-columns: 1fr !important;
  }
  .metrics-lead-money-v80 {
    justify-self: start !important;
  }
  .metrics-lead-grid-v80 {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   V81 - Llamadas + ventas limpio y eficiente
   ============================================================ */
.postcall-metrics-v81 {
  border: 1px solid rgba(245, 158, 11, .18);
  background:
    radial-gradient(circle at top left, rgba(251, 191, 36, .10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,251,235,.80));
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 18px 50px rgba(73,56,122,.07);
}

.call-sales-head-v81 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.call-sales-head-v81 h3 {
  margin: 0 0 6px;
  color: #171225;
  font-size: 19px;
  line-height: 1.15;
}

.call-sales-head-v81 p {
  margin: 0;
  color: #6f6685;
  font-size: 13px;
  font-weight: 750;
}

.call-sales-mini-v81 {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, .16);
  background: rgba(255,255,255,.82);
  color: #6d28d9;
  font-size: 12px;
  font-weight: 900;
}

.call-flow-v81 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.call-flow-step-v81,
.call-kpi-v81 {
  min-width: 0;
  text-align: left;
  border: 1px solid rgba(124, 58, 237, .14);
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 13px;
  box-shadow: 0 10px 24px rgba(73,56,122,.06);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.call-flow-step-v81:hover,
.call-kpi-v81:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 58, 237, .30);
  box-shadow: 0 16px 32px rgba(73,56,122,.10);
}

.call-flow-step-v81 span,
.call-kpi-v81 span {
  display: block;
  color: #6f6685;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.15;
}

.call-flow-step-v81 strong,
.call-kpi-v81 strong {
  display: block;
  margin: 7px 0 5px;
  color: #171225;
  font-size: 28px;
  line-height: .95;
  font-weight: 950;
}

.call-flow-step-v81 small,
.call-kpi-v81 small {
  display: block;
  color: #6f6685;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.call-flow-step-v81.success,
.call-kpi-v81.success {
  border-color: rgba(16,185,129,.22);
  background: rgba(236,253,245,.88);
}

.call-flow-step-v81.warning,
.call-kpi-v81.warning {
  border-color: rgba(245,158,11,.24);
  background: rgba(255,251,235,.92);
}

.call-flow-step-v81.danger,
.call-kpi-v81.danger {
  border-color: rgba(248,113,113,.24);
  background: rgba(254,242,242,.92);
}

.call-conversions-v81 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.call-ring-v81 {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(124,58,237,.13);
  background: rgba(255,255,255,.86);
}

.call-ring-circle-v81 {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    conic-gradient(#7c3aed var(--ring), rgba(237,233,254,.90) 0);
  position: relative;
}

.call-ring-circle-v81::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  background: #fff;
}

.call-ring-circle-v81 strong {
  position: relative;
  z-index: 1;
  color: #4c1d95;
  font-size: 11px;
  font-weight: 950;
}

.call-ring-v81 > span {
  color: #2a2240;
  font-size: 12px;
  font-weight: 950;
}

.call-ring-v81 > small {
  grid-column: 2;
  margin-top: -18px;
  color: #6f6685;
  font-size: 11px;
  font-weight: 800;
}

.call-business-v81,
.call-alerts-compact-v81 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

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

.hidden-by-v81 {
  display: none !important;
}

@media (max-width: 1050px) {
  .call-flow-v81 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .call-conversions-v81,
  .call-alerts-compact-v81 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .call-sales-head-v81 {
    flex-direction: column;
  }
  .call-flow-v81,
  .call-conversions-v81,
  .call-business-v81,
  .call-alerts-compact-v81 {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   V82 - Historial completo del cliente
   ============================================================ */
.timeline-v72 {
  margin: 18px 0;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(124, 58, 237, .16);
  background:
    radial-gradient(circle at top left, rgba(124,58,237,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,247,255,.92));
  box-shadow: 0 14px 34px rgba(73,56,122,.07);
}

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

.timeline-head-v82 h3 {
  margin: 0 0 5px;
  color: #171225;
  font-size: 18px;
}

.timeline-head-v82 p {
  margin: 0;
  color: #6f6685;
  font-size: 12px;
  font-weight: 750;
}

.timeline-origin-v82 {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(224, 242, 254, .88);
  border: 1px solid rgba(14, 165, 233, .18);
  color: #075985;
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.timeline-list-v82 {
  display: grid;
  gap: 9px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.timeline-item-v82 {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px;
  border-radius: 17px;
  border: 1px solid rgba(124, 58, 237, .10);
  background: rgba(255, 255, 255, .82);
}

.timeline-dot-v82 {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(124, 58, 237, .10);
  border: 1px solid rgba(124, 58, 237, .14);
}

.timeline-content-v82 {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.timeline-content-v82 strong {
  color: #171225;
  font-size: 13px;
  font-weight: 950;
}

.timeline-content-v82 small {
  color: #6f6685;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.timeline-item-v82.origen .timeline-dot-v82 {
  background: rgba(224,242,254,.92);
  border-color: rgba(14,165,233,.20);
}

.timeline-item-v82.venta .timeline-dot-v82 {
  background: rgba(236,253,245,.92);
  border-color: rgba(16,185,129,.20);
}

.timeline-item-v82.perdida .timeline-dot-v82 {
  background: rgba(254,242,242,.92);
  border-color: rgba(248,113,113,.24);
}

.timeline-item-v82.llamada .timeline-dot-v82,
.timeline-item-v82.loom .timeline-dot-v82 {
  background: rgba(237,233,254,.92);
  border-color: rgba(124,58,237,.20);
}

@media (max-width: 640px) {
  .timeline-head-v82 {
    flex-direction: column;
  }
  .timeline-origin-v82 {
    max-width: 100%;
    white-space: normal;
  }
}


/* ============================================================
   V83 - Historial arriba desplegable + línea cronológica
   ============================================================ */
.timeline-details-v83 {
  margin: 0 0 18px;
  border: 1px solid rgba(124, 58, 237, .16);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(124,58,237,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,247,255,.92));
  box-shadow: 0 14px 34px rgba(73,56,122,.07);
  overflow: hidden;
}

.timeline-details-v83 summary {
  cursor: pointer;
  padding: 16px 18px;
  color: #171225;
  font-size: 16px;
  font-weight: 950;
  list-style: none;
  border-bottom: 1px solid rgba(124,58,237,.10);
}

.timeline-details-v83 summary::-webkit-details-marker {
  display: none;
}

.timeline-details-v83 summary::after {
  content: "⌄";
  float: right;
  color: #7c3aed;
  font-size: 18px;
  transition: transform .16s ease;
}

.timeline-details-v83[open] summary::after {
  transform: rotate(180deg);
}

.timeline-details-v83 > .fieldset-help {
  margin: 0;
  padding: 12px 18px 0;
}

.timeline-details-v83 .timeline-v72 {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.timeline-head-v83 {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(124,58,237,.10);
}

.timeline-origin-v83 {
  background: rgba(224, 242, 254, .95);
  color: #075985;
}

.timeline-line-v83 {
  position: relative;
  display: grid;
  gap: 10px;
  max-height: 460px;
  overflow: auto;
  padding: 12px 4px 2px 0;
}

.timeline-line-v83::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 20px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(180deg, rgba(14,165,233,.40), rgba(124,58,237,.24), rgba(16,185,129,.32));
  border-radius: 99px;
}

.timeline-item-v83 {
  position: relative;
  grid-template-columns: 42px minmax(0, 1fr);
  margin-left: 0;
  border-color: rgba(124,58,237,.12);
  background: rgba(255,255,255,.82);
}

.timeline-item-v83.first {
  border-color: rgba(14,165,233,.25);
  background: rgba(240,249,255,.88);
}

.timeline-dot-v83 {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  font-size: 15px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.92);
}

.timeline-content-v83 strong {
  font-size: 13px;
}

.timeline-content-v83 small {
  font-size: 12px;
}

.timeline-item-v83.origen .timeline-dot-v83,
.timeline-item-v83.first .timeline-dot-v83 {
  background: rgba(224,242,254,.96);
  border-color: rgba(14,165,233,.26);
}

@media (max-width: 640px) {
  .timeline-details-v83 summary {
    padding: 14px;
  }
  .timeline-details-v83 > .fieldset-help {
    padding: 10px 14px 0;
  }
  .timeline-line-v83::before {
    left: 25px;
  }
}


/* ============================================================
   V85 - Origen arriba + selector predefinido
   ============================================================ */
.origin-field-v85 {
  grid-column: span 1;
}

.origin-picker-v85 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.origin-picker-v85 select {
  min-width: 0;
  width: 100%;
}

.origin-picker-v85 .btn {
  white-space: nowrap;
  height: 100%;
}

@media (max-width: 720px) {
  .origin-picker-v85 {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   V88 - Lógica llamadas / motivo no cierre / histórico editable
   ============================================================ */
#motivoNoCierreWrapV88.hidden {
  display: none !important;
}

.call-diagnostics-v88 {
  display: grid;
  gap: 7px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(245,158,11,.22);
  background: rgba(255,251,235,.88);
}

.call-diagnostics-v88.ok {
  display: block;
  border-color: rgba(16,185,129,.20);
  background: rgba(236,253,245,.88);
  color: #047857;
  font-weight: 850;
}

.call-diagnostics-v88 > strong {
  color: #7c4a03;
  font-size: 12px;
}

.call-issue-v88 {
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.call-issue-v88.info {
  background: rgba(224,242,254,.85);
  color: #075985;
}

.call-issue-v88.warning {
  background: rgba(254,243,199,.85);
  color: #92400e;
}

.call-issue-v88.error {
  background: rgba(254,226,226,.90);
  color: #b91c1c;
}

.timeline-tools-v88 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.timeline-item-v88 {
  grid-template-columns: 42px minmax(0,1fr) auto !important;
}

.timeline-actions-v88 {
  display: flex;
  align-items: center;
  gap: 5px;
}

.icon-btn-v88 {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(124,58,237,.15);
  border-radius: 10px;
  background: rgba(255,255,255,.90);
  cursor: pointer;
}

.icon-btn-v88.danger {
  border-color: rgba(248,113,113,.20);
}

.history-source-v88 {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(241,245,249,.90);
  color: #64748b;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}

.postcall-metrics-v88 .call-flow-step-v81,
.postcall-metrics-v88 .call-kpi-v81 {
  appearance: none;
  font-family: inherit;
}

@media (max-width: 640px) {
  .timeline-head-v88 {
    flex-direction: column;
  }
  .timeline-tools-v88 {
    justify-content: flex-start;
  }
  .timeline-item-v88 {
    grid-template-columns: 38px minmax(0,1fr) !important;
  }
  .timeline-actions-v88 {
    grid-column: 2;
    justify-content: flex-start;
  }
}


/* ============================================================
   V89 - Rendimiento visual de métricas
   ============================================================ */
#tab-metrics.metrics-tab-active,
#tab-metrics:not(.hidden) {
  contain: layout style paint;
}

#tab-metrics .metric-card,
#tab-metrics .call-flow-step-v81,
#tab-metrics .call-kpi-v81,
#tab-metrics .call-ring-v81 {
  will-change: auto !important;
}

@media (prefers-reduced-motion: no-preference) {
  #tab-metrics .call-flow-step-v81,
  #tab-metrics .call-kpi-v81 {
    transition: border-color .12s ease, box-shadow .12s ease !important;
  }
}


/* ============================================================
   V90 - Métricas unificadas y sin duplicados
   ============================================================ */
.hidden-by-v90 {
  display: none !important;
}

.call-flow-v90 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.call-conversions-v90,
.call-money-v90,
.summary-grid-v90 {
  display: grid;
  gap: 10px;
}

.call-conversions-v90 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}

.call-money-v90 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 10px;
}

.summary-grid-v90 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.summary-sentence-v90 {
  padding: 15px 17px;
  border-radius: 18px;
  border: 1px solid rgba(124,58,237,.16);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,244,255,.92));
  color: #4b425e;
  font-size: 14px;
  line-height: 1.45;
}

.reasons-v90 {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(124,58,237,.14);
  background: rgba(255,255,255,.82);
}

.reasons-v90 summary {
  cursor: pointer;
  color: #392b55;
  font-weight: 900;
}

.reasons-v90 > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.reasons-v90 span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(245,243,255,.95);
  border: 1px solid rgba(124,58,237,.13);
  color: #5b447c;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1200px) {
  .call-flow-v90 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .call-conversions-v90,
  .call-money-v90,
  .summary-grid-v90 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .call-flow-v90,
  .call-conversions-v90,
  .call-money-v90,
  .summary-grid-v90 {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   V91 - Reparación visual
   ============================================================ */
.metrics-error-v91 {
  display: grid;
  gap: 5px;
  margin: 18px 0;
  padding: 15px 17px;
  border-radius: 17px;
  border: 1px solid rgba(248,113,113,.28);
  background: rgba(254,242,242,.94);
  color: #991b1b;
}

.metrics-error-v91 strong {
  font-size: 14px;
}

.metrics-error-v91 span {
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

#tab-metrics {
  min-height: 460px;
}

.timeline-item-v88 .history-source-v88 {
  display: none !important;
}


/* ============================================================
   V92 - Indicador de cierre migrado
   ============================================================ */
.timeline-item-v88.cerrada {
  border-color: rgba(16, 185, 129, .24) !important;
  background: rgba(236, 253, 245, .86) !important;
}


/* V95 - Fuente única de fechas de venta */
.sale-date-source-v95 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 15px;
  border: 1px solid rgba(124,58,237,.14);
  border-radius: 16px;
  background: rgba(248,247,255,.85);
  color: #4b425e;
}
.sale-date-source-v95 strong { color: #241b36; font-size: 13px; }
.sale-date-source-v95 span { font-size: 12px; line-height: 1.35; }


/* ============================================================
   V98 - Acciones ficha
   ============================================================ */
.lead-danger-actions-v98 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-right: auto;
}

.lead-danger-actions-v98 .btn-danger,
.btn-danger.delete-lead-v98 {
  border: 1px solid rgba(248, 113, 113, .35) !important;
  background: rgba(254, 226, 226, .95) !important;
  color: #991b1b !important;
}

.lead-danger-actions-v98 .archive-lead-v98 {
  border-color: rgba(180, 83, 9, .22) !important;
  background: rgba(255, 251, 235, .9) !important;
  color: #92400e !important;
}



/* ============================================================
   V99 - Consolidación visual
   ============================================================ */
.hidden-by-v99 {
  display: none !important;
}

.summary-sentence-v99 {
  margin: 14px 0;
  padding: 15px 17px;
  border-radius: 18px;
  border: 1px solid rgba(124,58,237,.16);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,244,255,.92));
  color: #4b425e;
  font-size: 14px;
  line-height: 1.45;
}

.summary-grid-v99,
.call-flow-v99,
.call-conversions-v99,
.call-money-v99 {
  display: grid;
  gap: 10px;
}

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

.call-flow-v99 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 16px;
}

.call-conversions-v99,
.call-money-v99 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}

.postcall-metrics-v99 {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(245, 158, 11, .25);
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,251,235,.86));
}

.timeline-tools-v99,
.timeline-actions-v99,
.lead-danger-actions-v99 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.timeline-tools-v99 {
  justify-content: flex-end;
}

.timeline-item-v99 {
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
}

.timeline-item-v99.cerrada {
  border-color: rgba(16,185,129,.24) !important;
  background: rgba(236,253,245,.82) !important;
}

.timeline-item-v99.no_cerrada {
  border-color: rgba(245,158,11,.25) !important;
  background: rgba(255,251,235,.82) !important;
}

.icon-btn-v99 {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(124,58,237,.15);
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  cursor: pointer;
}

.icon-btn-v99.danger {
  border-color: rgba(248,113,113,.24);
}

.lead-danger-actions-v99 {
  margin-right: auto;
}

.lead-danger-actions-v99 .btn-danger {
  border: 1px solid rgba(248,113,113,.35) !important;
  background: rgba(254,226,226,.95) !important;
  color: #991b1b !important;
}

.lead-danger-actions-v99 .archive-lead-v99 {
  border-color: rgba(180,83,9,.22) !important;
  background: rgba(255,251,235,.92) !important;
  color: #92400e !important;
}

.reasons-v99 {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(124,58,237,.14);
  background: rgba(255,255,255,.82);
}

.reasons-v99 summary {
  cursor: pointer;
  color: #392b55;
  font-weight: 900;
}

.reasons-v99 > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.reasons-v99 span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(245,243,255,.95);
  border: 1px solid rgba(124,58,237,.13);
  color: #5b447c;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1200px) {
  .call-flow-v99 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .summary-grid-v99,
  .call-conversions-v99,
  .call-money-v99 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .summary-grid-v99,
  .call-flow-v99,
  .call-conversions-v99,
  .call-money-v99 {
    grid-template-columns: 1fr;
  }
}