/* CRM — lead lookup (crm.js). Reference + rules in crm.js's header.
   House defaults carry the chrome: ev-table (bbui.css), tb-seg, tb-btn, bp-chip,
   tb-empty / tb-err, tb-sec-head, .besc-drawer. This file adds layout only. */

.crm { display: flex; flex-direction: column; gap: 12px; padding-bottom: 32px; }
.crm-head { display: flex; align-items: baseline; gap: 12px; }
.crm-h1 { margin: 0; font: 650 22px/1.2 'Outfit', system-ui, sans-serif; color: var(--bb-ink); }

/* 1 · La barra: buscar · período · filtro / columnas. */
.crm-bar { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-bar-r { display: flex; gap: 8px; margin-left: auto; }
.crm-search {
  flex: 1 1 340px; min-width: 0; display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; border-radius: var(--bb-r-control);
  background: var(--bb-surface); box-shadow: var(--bb-sh-btn); color: var(--bb-ink-3);
  cursor: text;
}
.crm-search:focus-within { box-shadow: var(--bb-sh-focus); }
.crm-search svg { width: 15px; height: 15px; flex: none; max-width: none; }
.crm-search input {
  flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font: 500 13.5px/1 'Outfit', system-ui, sans-serif; color: var(--bb-ink);
}
.crm-search input::placeholder { color: var(--bb-ink-3); }
.crm-period button { white-space: nowrap; }

/* 2 · Los filtros puestos. */
.crm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crm-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 3px 4px 3px 9px; border-radius: var(--bb-r-chip);
  background: var(--bb-accent-tint); color: var(--bb-accent-ink);
  font: 500 12px/1.5 'Outfit', system-ui, sans-serif; cursor: pointer;
  transition: background var(--bb-t-fast) ease-out;
}
.crm-chip:hover { background: color-mix(in srgb, var(--bb-accent-tint) 70%, var(--bb-accent) 8%); }
.crm-chip:focus-visible { outline: 0; box-shadow: var(--bb-sh-focus); }
.crm-chip b { font-weight: 650; }
.crm-chip i { font-style: normal; opacity: .75; }
.crm-chip-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.crm-chip-x {
  appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer;
  width: 20px; height: 20px; border-radius: 5px; font: 600 14px/1 'Outfit', system-ui, sans-serif;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.crm-chip-x:hover { background: color-mix(in srgb, var(--bb-accent) 14%, transparent); }
.crm-clear {
  appearance: none; border: 0; background: transparent; cursor: pointer; padding: 3px 6px;
  font: 500 12px/1.5 'Outfit', system-ui, sans-serif; color: var(--bb-ink-3);
}
.crm-clear:hover { color: var(--bb-ink); }

/* 3 · El total y el paginado. */
.crm-meta {
  display: flex; align-items: center; gap: 12px; min-height: 28px;
  font: 500 12.5px/1 'Outfit', system-ui, sans-serif; color: var(--bb-ink-3);
  transition: opacity var(--bb-t-base) ease-out;
}
.crm-meta.is-busy { opacity: .45; }
.crm-total b, .crm-range, .crm-mono {
  font-family: var(--bb-mono); font-variant-numeric: tabular-nums; color: var(--bb-ink);
}
.crm-total b { font-weight: 650; font-size: 14px; }
.crm-pager { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.crm-pager .tb-btn { min-width: 30px; justify-content: center; font-size: 14px; }
.crm-pager .tb-btn:disabled { opacity: .4; cursor: not-allowed; }

/* 4 · La tabla. El contenedor scrollea en los dos ejes; el encabezado se queda. */
.crm-tablewrap {
  max-height: calc(100vh - 250px); min-height: 200px; overflow: auto;
  border-radius: var(--bb-r-card); box-shadow: var(--bb-sh-hairline);
  background: var(--bb-surface); overscroll-behavior: contain;
}
.crm-table { box-shadow: none; border-radius: 0; overflow: visible; }
.crm-table thead th { position: sticky; top: 0; z-index: 1; }
.crm-table th.num { text-align: right; }
.crm-table th.is-sort { cursor: pointer; user-select: none; }
.crm-table th.is-sort:hover, .crm-table th.is-on { color: var(--bb-ink); }
.crm-arrow { margin-left: 4px; }
.crm-table td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.crm-table tbody tr { cursor: pointer; }
.crm-table tbody tr:focus-visible { outline: 0; }
.crm-table tbody tr:focus-visible td { background: var(--bb-accent-tint); }
.crm-table td.is-nil, .crm-kv dd.is-nil { color: var(--bb-ink-3); }
.crm-retry { margin-top: 10px; }

/* 5 · El editor de filtro / el selector de columnas (popover bajo la barra). */
.crm-pop {
  position: absolute; z-index: 50; top: calc(100% + 6px); right: 0;
  width: min(440px, 100%); max-height: min(70vh, 560px); overflow: auto;
  padding: 14px; border-radius: var(--bb-r-card);
  background: var(--bb-surface); box-shadow: var(--bb-sh-overlay);
  display: flex; flex-direction: column; gap: 10px;
  animation: crmPop var(--bb-t-base) var(--bb-ease-strong) both;
}
.crm-pop[hidden] { display: none; }
.crm-pop[data-kind="cols"] { width: min(560px, 100%); }
@keyframes crmPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .crm-pop { animation: none; } }
.crm-pop-h { display: flex; align-items: center; gap: 8px; font: 650 13px/1.3 'Outfit', system-ui, sans-serif; color: var(--bb-ink); }
.crm-pop-h .tb-btn { margin-left: auto; }
.crm-pop-f { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.crm-ferr { margin-right: auto; font-size: 12px; color: var(--bb-red); }
.crm-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-in {
  width: 100%; min-width: 0; height: 34px; padding: 0 10px; border: 0;
  border-radius: var(--bb-r-control); background: var(--bb-field); color: var(--bb-ink);
  font: 500 13px/1 'Outfit', system-ui, sans-serif; box-sizing: border-box;
}
textarea.crm-in { height: auto; padding: 8px 10px; line-height: 1.4; resize: vertical; }
.crm-in:focus { outline: 0; box-shadow: var(--bb-sh-focus); }
.crm-in[type="date"], .crm-in[type="number"] { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; }
.crm-between { display: flex; align-items: center; gap: 8px; color: var(--bb-ink-3); }
.crm-facet-q { margin-bottom: 6px; }
.crm-facet {
  max-height: 260px; overflow: auto; display: flex; flex-direction: column;
  border-radius: var(--bb-r-control); box-shadow: var(--bb-sh-hairline); padding: 4px;
}
.crm-facet.is-loading { min-height: 120px; background: var(--bb-inset); box-shadow: none; }
.crm-fopt {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px;
  font: 500 12.5px/1.3 'Outfit', system-ui, sans-serif; color: var(--bb-ink); cursor: pointer;
}
.crm-fopt:hover { background: var(--bb-hover); }
.crm-fopt input { margin: 0; accent-color: var(--bb-accent); flex: none; }
.crm-fopt span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-fopt em { font-style: normal; font-family: var(--bb-mono); font-variant-numeric: tabular-nums; color: var(--bb-ink-3); font-size: 11.5px; }
.crm-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 12px; }
.crm-cols-g { display: flex; flex-direction: column; }
.crm-cols-t {
  padding: 6px 6px 4px; font: 700 10px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .07em; text-transform: uppercase; color: var(--bb-ink-3);
}

/* 6 · El detalle del lead (dentro de .besc-drawer). Quién → cuándo → de dónde → la nota →
   Power BI → todos los campos, plegados. Ref: @joshpensky timeline (crm.js). */
.crm-drawer { width: min(600px, 94vw); background: var(--bb-page); }
.crm-drawer-h {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; background: var(--bb-surface); border-bottom: 1px solid var(--bb-line);
}
.crm-drawer-t { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crm-drawer-t .crm-mono { font-size: 18px; font-weight: 650; }
.crm-x { margin-left: auto; font-size: 18px; min-width: 32px; justify-content: center; }
.crm-drawer-b { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 28px; }
.crm-drawer-load { height: 240px; border-radius: var(--bb-r-card); background: var(--bb-inset); }

/* Quién */
.crm-hero, .crm-block {
  background: var(--bb-surface); border-radius: var(--bb-r-card); box-shadow: var(--bb-sh-card);
  padding: 16px 18px;
}
.crm-hero-prog {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font: 650 17px/1.3 'Outfit', system-ui, sans-serif; color: var(--bb-ink);
}
.crm-hero-where { margin-top: 4px; font: 500 12.5px/1.4 'Outfit', system-ui, sans-serif; color: var(--bb-ink-2); }
.crm-hero-where i { font-style: normal; margin: 0 6px; color: var(--bb-ink-3); }
.crm-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px;
  border-radius: var(--bb-r-control); overflow: hidden; background: var(--bb-surface); box-shadow: var(--bb-sh-hairline);
}
/* Each cell draws its own right + bottom hairline, so a short last row leaves blank
   surface — not a grey hole where the grid gap shows through. */
.crm-fact {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; min-width: 0;
  box-shadow: 1px 0 0 var(--bb-line), 0 1px 0 var(--bb-line);
}
.crm-fact span {
  font: 700 9.5px/1 'Outfit', system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--bb-ink-3);
}
.crm-fact b { font: 600 12.5px/1.3 'Outfit', system-ui, sans-serif; color: var(--bb-ink); overflow-wrap: anywhere; }

.crm-block-h {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font: 700 10px/1 'Outfit', system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--bb-ink-3);
}
.crm-block-n { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--bb-ink-2); }

/* Cuándo — nodo teñido sobre un riel. */
.crm-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.crm-tl-i { position: relative; padding: 0 0 14px 26px; }
.crm-tl-i:last-child { padding-bottom: 0; }
.crm-tl-i::before {
  content: ''; position: absolute; left: 7px; top: 16px; bottom: -2px; width: 1px; background: var(--bb-line);
}
.crm-tl-i:last-child::before { display: none; }
.crm-tl-dot {
  position: absolute; left: 0; top: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--bb-field); box-shadow: inset 0 0 0 4px var(--bb-field), inset 0 0 0 8px var(--bb-ink-3);
}
.crm-tl-i.is-pos .crm-tl-dot { background: var(--bb-green-tint); box-shadow: inset 0 0 0 4px var(--bb-green-tint), inset 0 0 0 8px var(--bb-green); }
.crm-tl-i.is-accent .crm-tl-dot { background: var(--bb-accent-tint); box-shadow: inset 0 0 0 4px var(--bb-accent-tint), inset 0 0 0 8px var(--bb-accent); }
.crm-tl-i.is-cyan .crm-tl-dot { background: var(--bb-cyan-tint); box-shadow: inset 0 0 0 4px var(--bb-cyan-tint), inset 0 0 0 8px var(--bb-cyan); }
.crm-tl-i.is-ink .crm-tl-dot { background: var(--bb-hover); box-shadow: inset 0 0 0 4px var(--bb-hover), inset 0 0 0 8px var(--bb-ink); }
.crm-tl-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.crm-tl-t b { font: 600 13px/1.35 'Outfit', system-ui, sans-serif; color: var(--bb-ink); }
.crm-tl-t time { font: 500 12px/1.35 var(--bb-mono); font-variant-numeric: tabular-nums; color: var(--bb-ink-3); }
.crm-tl-i.is-muted .crm-tl-t b { color: var(--bb-ink-2); font-weight: 500; }
.crm-tl-s { margin-top: 2px; font: 500 12px/1.4 'Outfit', system-ui, sans-serif; color: var(--bb-ink-2); }

/* De dónde — la tarjeta de campaña. */
.crm-camp { display: flex; flex-direction: column; gap: 10px; }
.crm-camp-top { display: flex; align-items: center; gap: 8px; }
.crm-camp-top:empty { display: none; }
.crm-plat {
  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--bb-r-chip);
  font: 700 11px/1.35 'Outfit', system-ui, sans-serif; color: var(--bb-accent-ink); background: var(--bb-accent-tint);
}
.crm-plat.is-google { color: var(--bb-green); background: var(--bb-green-tint); }
.crm-camp-name { font: 600 13.5px/1.4 'Outfit', system-ui, sans-serif; color: var(--bb-ink); overflow-wrap: anywhere; }
.crm-camp-name.is-nil { color: var(--bb-ink-3); }
.crm-camp-m {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  padding: 10px 12px; border-radius: var(--bb-r-control); background: var(--bb-inset);
}
.crm-camp-m > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.crm-camp-m span { font: 600 10.5px/1.2 'Outfit', system-ui, sans-serif; color: var(--bb-ink-3); }
.crm-camp-m b { font: 650 16px/1.1 var(--bb-mono); font-variant-numeric: tabular-nums; color: var(--bb-ink); }
.crm-camp-m .crm-camp-win { grid-column: 1 / -1; font: 500 11px/1 var(--bb-mono); color: var(--bb-ink-3); }
.crm-camp-rows { display: grid; grid-template-columns: 70px 1fr; gap: 5px 10px; margin: 0; font: 500 12px/1.4 'Outfit', system-ui, sans-serif; }
.crm-camp-rows dt { color: var(--bb-ink-3); }
.crm-camp-rows dd { margin: 0; color: var(--bb-ink); overflow-wrap: anywhere; }
.crm-camp-a { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-camp-n { margin-left: 6px; font: 650 12px/1 var(--bb-mono); font-variant-numeric: tabular-nums; color: var(--bb-accent-ink); }

/* La nota */
.crm-note-b { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.crm-note-b + .crm-note-b { margin-top: 10px; }
.crm-note {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 500 13px/1.55 'Outfit', system-ui, sans-serif; color: var(--bb-ink);
}

/* Power BI — una línea por fila del export. */
.crm-pbi { display: flex; flex-direction: column; }
.crm-pbi-r {
  display: grid; grid-template-columns: 88px auto 1fr auto; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--bb-line); font: 500 12px/1.3 'Outfit', system-ui, sans-serif;
}
.crm-pbi-r:last-child { border-bottom: 0; }
.crm-pbi-p { color: var(--bb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.crm-pbi-e { color: var(--bb-ink); }

/* Todos los campos, plegados. */
.crm-fold { background: var(--bb-surface); border-radius: var(--bb-r-card); box-shadow: var(--bb-sh-card); }
.crm-fold > summary {
  list-style: none; cursor: pointer; padding: 13px 18px; display: flex; align-items: center; gap: 8px;
  font: 600 12.5px/1 'Outfit', system-ui, sans-serif; color: var(--bb-ink-2);
}
.crm-fold > summary::-webkit-details-marker { display: none; }
.crm-fold > summary::before {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--bb-t-fast) ease-out;
}
.crm-fold[open] > summary::before { transform: rotate(45deg); }
.crm-fold > summary:hover { color: var(--bb-ink); }
.crm-fold-g { padding: 0 0 8px; border-top: 1px solid var(--bb-line); }
.crm-fold-t {
  padding: 12px 18px 6px; font: 700 10px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .07em; text-transform: uppercase; color: var(--bb-ink-3);
}
.crm-kv {
  display: grid; grid-template-columns: minmax(120px, 38%) 1fr; margin: 0; padding: 0 18px 8px;
  font: 500 12px/1.45 'Outfit', system-ui, sans-serif;
}
.crm-kv dt, .crm-kv dd { margin: 0; padding: 4px 0; border-bottom: 1px solid var(--bb-line); }
.crm-kv dt { color: var(--bb-ink-3); padding-right: 12px; }
.crm-kv dd { color: var(--bb-ink); overflow-wrap: anywhere; }
.crm-kv dd.num { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; }
.crm-kv dt:nth-last-child(2), .crm-kv dd:last-child { border-bottom: 0; }
@media (max-width: 520px) { .crm-facts, .crm-camp-m { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 700px) {
  .crm-bar-r { margin-left: 0; }
  .crm-pop { left: 0; right: 0; width: auto; }
  .crm-tablewrap { max-height: none; }
}