/* Campus Marketing — sub de Traditional Brilliance. Matrículas de los leads de Campus
 * Marketing (Buzz & Exhibitions + Campus Events + Community Events) en el período global.
 *
 * Los componentes son los defaults del catálogo /ui (pm-tile, tb-seg, ev-table, tb-sec-head,
 * tb-empty) y ya traen su estilo de bbui.css / traditional.css / eventos.css. Este archivo sólo
 * pone la rejilla y tres tonos de celda. Referencia CollectUI en el comentario de campusmkt.js.
 */
.cm-page { padding-bottom: 64px; }
.cm-root { display: flex; flex-direction: column; gap: 18px; }
.cm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

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

.cm-block { display: flex; flex-direction: column; gap: 10px; }
.cm-sec { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.cm-table td.num, .cm-table th.num { text-align: right; }
.cm-table .cm-strong { font-weight: 700; color: var(--bb-ink, #1A1A1A); }
.cm-table .cm-quiet, .cm-quiet { color: var(--bb-ink-3, #6B6B6B); }
.cm-table .cm-thin { opacity: .5; }
.cm-table tfoot td {
  font-weight: 700;
  border-top: 1px solid var(--bb-line, #E6E1D8);
  background: var(--bb-inset, #FAF8F3);
}

.cm-table .cm-name { max-width: 340px; overflow-wrap: anywhere; }
.cm-table .cm-alert { color: var(--bb-red, #B42318); font-weight: 700; }
.cm-table .cm-more td { text-align: center; padding-top: 10px; padding-bottom: 10px; }

/* Status of the start's pace — a status chip (Activo/En pausa class), never a context chip.
 * 6px radius, not a pill (DESIGN.md). */
.cm-st {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font: 600 11px/1.5 'Outfit', system-ui, sans-serif;
  background: var(--bb-inset, #FAF8F3);
}
.cm-st.bp-pos { background: var(--bb-green-tint, #E7F4EC); }
.cm-st.bp-neg { background: var(--bb-red-tint, #FBEAEA); }
.cm-st.cm-watch { color: var(--bb-orange, #B54708); background: var(--bb-orange-tint, #FDF0E3); }

.cm-tile-alert .pm-tv { color: var(--bb-red, #B42318); }

@media (max-width: 640px) {
  .cm-table .cm-name { max-width: 160px; }
}

/* The funnel is the shared Initiatives component (initFunnelHtml). Its chips — "escalera por el
 * estado de hoy", "mayor caída…", "N sin estado", "poco volumen" — are context chips, which
 * Miguel's no-copy rule keeps off this page (7 oct 2026, "hide the funnel chips"). Hidden HERE
 * only; Initiatives keeps them. The bands and stage tiles already print every number. */
.cm-funnel .bbf-chips { display: none; }

/* 13 oct 2026 — controles (ventana · start · localidad · tipo), filas que abren la tarjeta,
 * separadores de grupo de columnas (YTD / Inversión) y el formulario de inversión. */
.cm-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-sel {
  height: 32px;
  min-width: 160px;
  max-width: 280px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--bb-line, #E6E1D8);
  border-radius: 8px;
  background: var(--bb-surface, #FFFFFF);
  color: var(--bb-ink, #1A1A1A);
  font: 500 13px/1 'Outfit', system-ui, sans-serif;
}

.cm-table .cm-sep { border-left: 1px solid var(--bb-line, #E6E1D8); }
.cm-table tr.cm-row { cursor: pointer; }
.cm-table tr.cm-row:hover td { background: var(--bb-hover, #F4F2EC); }
.cm-table .cm-open { color: var(--bb-navy, #0D2A5E); font-weight: 600; }
.cm-table tr.cm-row:hover .cm-open { text-decoration: underline; text-underline-offset: 3px; }
.cm-recs td { vertical-align: top; }

/* The card is the Dashboard report card; these only lay out what that primitive has no slot for. */
.cm-card-body { display: flex; flex-direction: column; gap: 14px; }
.cm-card-backdrop .report-card-table td.cm-alert { color: var(--bb-red, #B42318); font-weight: 700; }
.cm-card-funnel .bbf-chips { display: none; }
.cm-cost-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.cm-cost-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 600 11px/1.2 'Outfit', system-ui, sans-serif;
  color: var(--bb-ink-3, #6B6B6B);
}
.cm-cost-form input {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--bb-line, #E6E1D8);
  border-radius: 8px;
  background: var(--bb-surface, #FFFFFF);
  color: var(--bb-ink, #1A1A1A);
  font: 500 13px/1 var(--bb-mono);
  font-variant-numeric: tabular-nums;
}
.cm-cost-form input[name="amount"] { width: 120px; }
.cm-cost-note input { width: 200px; font-family: 'Outfit', system-ui, sans-serif; }
.cm-cost-msg { margin-top: 8px; color: var(--bb-red, #B42318); font: 600 12px/1.4 'Outfit', system-ui, sans-serif; }
.cm-del { padding: 2px 8px; font-size: 11px; }

/* Buscar — same height, border and radius as .cm-sel so the controls row reads as one strip. */
.cm-search {
  height: 32px;
  width: 240px;
  padding: 0 10px;
  border: 1px solid var(--bb-line, #E6E1D8);
  border-radius: 8px;
  background: var(--bb-surface, #FFFFFF);
  color: var(--bb-ink, #1A1A1A);
  font: 500 13px/1 'Outfit', system-ui, sans-serif;
}
.cm-search::placeholder { color: var(--bb-ink-3, #6B6B6B); }
.cm-search:focus { outline: none; border-color: var(--bb-navy, #0D2A5E); box-shadow: 0 0 0 3px rgba(13, 42, 94, .12); }

@media (max-width: 640px) {
  .cm-search { width: 100%; flex: 1 1 100%; }
  .cm-sel { min-width: 0; flex: 1 1 140px; }
  .cm-cost-note input { width: 100%; }
}

/* Report card · Motivos (Last Action themes, expandable) and the admin-only notes list. */
.cm-why summary { cursor: pointer; font-weight: 600; color: var(--bb-ink, #1A1A1A); }
.cm-why[open] summary { margin-bottom: 6px; }
.cm-why-sub { width: 100%; border-collapse: collapse; margin: 2px 0 6px 14px; }
.cm-why-sub td {
  padding: 3px 8px 3px 0;
  font: 500 12px/1.4 'Outfit', system-ui, sans-serif;
  color: var(--bb-ink-3, #6B6B6B);
  border: 0;
}
.cm-why-sub td.numeric { text-align: right; font-family: var(--bb-mono); font-variant-numeric: tabular-nums; }
.cm-notes-seg { margin: 0 0 10px; flex-wrap: wrap; }
.cm-notes-table td { vertical-align: top; }
.cm-notes-table .cm-note-txt {
  min-width: 260px;
  max-width: 520px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 400 12.5px/1.45 'Outfit', system-ui, sans-serif;
  color: var(--bb-ink, #1A1A1A);
}
.cm-notes > .tb-btn { margin-top: 10px; }

/* Por categoría — family subtotal rows, indented categories, zero rows kept but quiet. */
.cm-cat-table tr.cm-cat-fam td {
  font-weight: 700;
  background: var(--bb-inset, #FAF8F3);
  border-top: 1px solid var(--bb-line, #E6E1D8);
}
.cm-cat-table tr.cm-cat-row td:first-child { padding-left: 26px; }
.cm-cat-table tr.cm-cat-zero td { color: var(--bb-ink-3, #6B6B6B); }
.cm-cat-table tr.cm-cat-zero .cm-open { color: var(--bb-ink-3, #6B6B6B); font-weight: 500; }
.cm-cat-table tr.cm-cat-row.is-on td { background: var(--bb-hover, #F4F2EC); }
.cm-cat-table tr.cm-cat-row.is-on td:first-child { box-shadow: inset 3px 0 0 var(--bb-navy, #0D2A5E); }

/* Agrupar motivos — the Ineligible page's bubble field (.ia-bubble* in index.html), with the
 * colour carrying ONE fact: navy = a group someone made (merged or named), slate = a reason as
 * written. Pointer events, so it drags on a touch screen too. */
.cm-bub-seg { margin: 0 0 10px; }
.cm-bub-wrap { height: 440px; }
.cm-bubble { background: #6B7A99; color: #fff; touch-action: none; }
.cm-bubble.is-grouped { background: var(--bb-navy, #0D2A5E); }
.cm-bub-table { margin-top: 6px; }
.cm-bub-table td { vertical-align: top; }
.cm-bub-acts { white-space: nowrap; }
.cm-bub-acts .tb-btn + .tb-btn { margin-left: 4px; }
.cm-bub-more { margin-top: 6px; font: 500 12px/1.4 'Outfit', system-ui, sans-serif; }

/* Semana a semana — the house chart (bbchart.js) inside the report card. */
.cm-wk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cm-wk-head h4 { margin: 0; }
.cm-wk-chart { position: relative; min-height: 120px; }
.cm-wk-chart .bbc-dot.cm-wk-thin { opacity: .3; }