/* Eventos — Eventbrite ticket sales per event + the daily buyer export.
 *
 * CollectUI reference (standing rule, scanned 2026-09-15): post
 * 276f59a5-79d6-4fd2-a502-52a0b90092c0 — @noechague, "event-listing / hover-state": an event
 * list as full-width ROWS in dense horizontal bands over one light surface, with a pointer
 * that slides to the hovered row instead of a background flash. Measured there: 8 bands,
 * ~140px each, light monochrome ground (#f9fafa) with one near-black ink. Implemented with
 * BridgeBI's own tokens — the surface is --bb-surface, the ink --bb-ink, the pointer is the
 * navy accent, and the slide is --bb-ease-link. Nothing of their palette is imported.
 *
 * Rows and not cards because the question this page answers is "which event moved tickets",
 * which a list answers in one vertical pass. Six cards make the reader hunt.
 *
 * Every svg here carries an explicit width/height: `responsive.css` sets `svg{max-width:100%}`
 * and an icon inside a flex row resolves that to ZERO (memoria: bridgebi-svg-maxwidth-flex-collapse).
 */

.page-eventos {
  --ev-gap: 14px;
}

/* ---------------------------------------------------------------- header + chips */

.ev-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.ev-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* A chip is where scope and caveats live — never a sentence in the layout. The long
 * reasoning goes in the title attribute. */
.ev-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--bb-r-chip);
  background: var(--bb-inset);
  box-shadow: var(--bb-sh-hairline);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bb-ink-2);
  white-space: nowrap;
}
.ev-chip b {
  font-family: var(--bb-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bb-ink);
}
.ev-chip svg { width: 13px; height: 13px; flex: none; }
.ev-chip.is-warn { background: var(--bb-orange-tint); color: var(--bb-orange); }
.ev-chip.is-bad  { background: var(--bb-red-tint);    color: var(--bb-red); }
.ev-chip.is-good { background: var(--bb-green-tint);  color: var(--bb-green); }

/* ---------------------------------------------------------------- KPI strip */

.ev-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ev-gap);
  margin: 0 0 18px;
}

.ev-kpi {
  position: relative;
  background: var(--bb-surface);
  border-radius: var(--bb-r-card);
  box-shadow: var(--bb-sh-card);
  padding: 14px 15px 15px;
  overflow: hidden;
}
/* The signature stat-card stripe (DESIGN.md). ::before on a clipped box is the trap in
 * memoria bridgebi-button-overflow-clips-before — here the stripe is INSIDE the box, so the
 * clip is what rounds it. */
.ev-kpi::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--bb-accent);
}
.ev-kpi.is-gold::before  { background: var(--bb-gold); }
.ev-kpi.is-green::before { background: var(--bb-green); }

.ev-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bb-ink-3);
}
.ev-kpi-value {
  font-family: var(--bb-display);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--bb-accent);
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
}
.ev-kpi-sub {
  font-family: var(--bb-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--bb-ink-3);
  font-variant-numeric: tabular-nums;
  margin-top: 5px;
}

/* ---------------------------------------------------------------- controls */

.ev-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.ev-seg {
  display: inline-flex;
  background: var(--bb-field);
  border-radius: var(--bb-r-control);
  padding: 2px;
  box-shadow: var(--bb-sh-hairline);
}
.ev-seg button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 5px 11px;
  border-radius: 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bb-ink-2);
  cursor: pointer;
  transition: background var(--bb-t-fast), color var(--bb-t-fast);
}
.ev-seg button[aria-pressed="true"] {
  background: var(--bb-surface);
  color: var(--bb-accent);
  box-shadow: var(--bb-sh-btn);
}
.ev-search, .ev-date {
  appearance: none;
  background: var(--bb-field);
  border: 0;
  box-shadow: var(--bb-sh-hairline);
  border-radius: var(--bb-r-control);
  padding: 7px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--bb-ink);
  min-width: 0;
}
.ev-date { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; }
.ev-search { flex: 1 1 200px; max-width: 320px; }
.ev-search:focus-visible, .ev-date:focus-visible { outline: none; box-shadow: var(--bb-sh-focus); }

.ev-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 0;
  border-radius: var(--bb-r-control);
  background: var(--bb-surface);
  box-shadow: var(--bb-sh-btn);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bb-ink);
  cursor: pointer;
  transition: background var(--bb-t-fast), transform var(--bb-t-fast);
}
.ev-btn svg { width: 15px; height: 15px; flex: none; }
.ev-btn:hover { background: var(--bb-hover); }
.ev-btn:active { transform: translateY(1px); }
.ev-btn[disabled] { opacity: .5; cursor: default; }
.ev-btn.is-primary { background: var(--bb-accent); color: #fff; box-shadow: none; }
.ev-btn.is-primary:hover { background: var(--bb-accent-ink); }

/* ---------------------------------------------------------------- the event rows */

.ev-list {
  background: var(--bb-surface);
  border-radius: var(--bb-r-card);
  box-shadow: var(--bb-sh-card);
  overflow: hidden;
}

/* The row is Eventbrite's own organizer list, rebuilt with our tokens: date chip · picture ·
 * name + modality + when + recurring badge · the two counts · gross · status dot.
 * Scanned 15 sep 2026 from the account's own Events screen. */
.ev-row {
  position: relative;
  display: grid;
  grid-template-columns: 22px 46px 82px minmax(0, 1fr) 92px 104px 104px 132px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 8px;
  border-bottom: 1px solid var(--bb-line);
  cursor: pointer;
  background: transparent;
  transition: background var(--bb-t-fast);
  text-align: left;
  width: 100%;
  appearance: none;
  border-left: 0; border-right: 0; border-top: 0;
  font: inherit;
  color: inherit;
}
.ev-row:last-child { border-bottom: 0; }
.ev-row:hover { background: var(--bb-hover); }
.ev-row:focus-visible { outline: none; box-shadow: var(--bb-sh-focus); }

/* A row whose sales are closed. Greyed, never hidden: the department still opens last week's
 * orientation to check who registered. Opacity alone would fade the hover and the focus ring
 * too, so the dimming is on the CONTENT and the row keeps its full interaction. */
.ev-row.is-dim .ev-name,
.ev-row.is-dim .ev-num,
.ev-row.is-dim .ev-status { color: var(--bb-ink-3); }
.ev-row.is-dim .ev-when-d { color: var(--bb-ink-3); }
.ev-row.is-dim .ev-when-m { color: var(--bb-ink-3); }
.ev-row.is-dim .ev-thumb { filter: grayscale(1); opacity: .55; }
.ev-row.is-dim .ev-mode { opacity: .7; }
/* On hover it comes back, so reading a closed event is not reading through a veil. */
.ev-row.is-dim:hover .ev-thumb { filter: none; opacity: 1; }
.ev-row.is-dim:hover .ev-name { color: var(--bb-ink); }

/* The pointer from the reference: it lives in the row's own gutter and slides in on hover
 * instead of the row flashing a colour. */
.ev-caret {
  width: 16px; height: 16px;
  color: var(--bb-accent);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity var(--bb-t-base) var(--bb-ease-link), transform var(--bb-t-base) var(--bb-ease-link);
  justify-self: center;
}
.ev-row:hover .ev-caret, .ev-row:focus-visible .ev-caret,
.ev-row.is-open .ev-caret { opacity: 1; transform: translateX(0); }
.ev-row.is-open .ev-caret { transform: rotate(90deg); }

/* The SEP / 17 chip. Two lines, mono numerals, the month in the accent. */
.ev-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ev-when-m {
  font-family: var(--bb-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--bb-red); font-variant-numeric: tabular-nums;
}
.ev-when-d {
  font-family: var(--bb-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--bb-ink);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}

/* The event picture, at Eventbrite's own 450x200 ratio. */
.ev-thumb {
  width: 82px;
  aspect-ratio: 45 / 20;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bb-canvas);
  box-shadow: var(--bb-sh-hairline);
  flex: none;
}
.ev-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ev-thumb-empty { display: block; width: 100%; height: 100%; }

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

.ev-sub {
  font-size: 11.5px;
  color: var(--bb-ink-2);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Evento recurrente", same affordance Eventbrite badges a series with. */
.ev-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: var(--bb-r-chip);
  background: var(--bb-inset);
  box-shadow: var(--bb-sh-hairline);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--bb-ink-3);
}
.ev-badge svg { width: 12px; height: 12px; flex: none; }

/* The Status column: a dot and a word, exactly as their list prints it. */
.ev-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bb-ink-2);
  white-space: nowrap;
}
.ev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--bb-ink-3);
}
.ev-dot.is-live { background: var(--bb-green); }
.ev-dot.is-off { background: var(--bb-ink-3); }
.ev-dot.is-bad { background: var(--bb-red); }
.ev-dot.is-unknown { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bb-line-strong); }

.ev-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bb-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-meta {
  font-family: var(--bb-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--bb-ink-3);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ev-mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--bb-r-chip);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.ev-mode.is-online     { background: var(--bb-cyan-tint);   color: var(--bb-cyan); }
.ev-mode.is-presencial { background: var(--bb-violet-tint); color: var(--bb-violet); }
/* "Sin dato" is its own state, never folded into presencial. */
.ev-mode.is-unknown    { background: var(--bb-inset); color: var(--bb-ink-3); box-shadow: var(--bb-sh-hairline); }

.ev-num {
  font-family: var(--bb-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--bb-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ev-num small {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--bb-ink-3);
  margin-top: 2px;
}
.ev-num.is-quiet { color: var(--bb-ink-3); }
.ev-num.is-move  { color: var(--bb-accent); }

/* Capacity bar. Only drawn when BOTH halves exist — no capacity means no percentage. */
.ev-fill { min-width: 0; }
.ev-fill-track {
  height: 6px;
  border-radius: 3px;
  background: var(--bb-canvas);
  overflow: hidden;
  box-shadow: var(--bb-sh-hairline);
}
.ev-fill-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--bb-accent);
  transition: width var(--bb-t-slow, .28s) var(--bb-ease-strong);
}
.ev-fill-bar.is-full { background: var(--bb-green); }
.ev-fill-bar.is-low  { background: var(--bb-gold); }
.ev-fill-label {
  font-family: var(--bb-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--bb-ink-3);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- the drill-in */

.ev-drill {
  background: var(--bb-inset);
  border-bottom: 1px solid var(--bb-line);
  padding: 14px 16px 16px 46px;
}
.ev-drill-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ev-table-wrap { overflow-x: auto; }
.ev-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bb-surface);
  border-radius: var(--bb-r-card);
  box-shadow: var(--bb-sh-hairline);
  overflow: hidden;
}
.ev-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bb-ink-3);
  padding: 9px 11px;
  background: var(--bb-stripe-bg);
  border-bottom: 1px solid var(--bb-line);
  white-space: nowrap;
}
.ev-table td {
  font-size: 12.5px;
  color: var(--bb-ink);
  padding: 9px 11px;
  border-bottom: 1px solid var(--bb-line);
  white-space: nowrap;
}
.ev-table tr:last-child td { border-bottom: 0; }
.ev-table tr:hover td { background: var(--bb-hover); }
.ev-table td.num {
  font-family: var(--bb-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 500;
}
.ev-table td.quiet { color: var(--bb-ink-3); }

.ev-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--bb-r-chip);
  font-size: 10.5px;
  font-weight: 700;
}
.ev-pill.ok   { background: var(--bb-green-tint); color: var(--bb-green); }
.ev-pill.warn { background: var(--bb-orange-tint); color: var(--bb-orange); }
.ev-pill.bad  { background: var(--bb-red-tint); color: var(--bb-red); }

/* ---------------------------------------------------------------- panels */

.ev-panel {
  background: var(--bb-surface);
  border-radius: var(--bb-r-card);
  box-shadow: var(--bb-sh-card);
  padding: 16px;
  margin-top: 18px;
}
.ev-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ev-panel-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}
/* ------------------------------------------------------------- el formulario
   Reference: AlignUI "Add tags" (CollectUI, @ersadwork) — addresses live as chips inside the
   field, each removable, landing in ~100ms.

   The layout it replaced was `repeat(auto-fit, minmax(150px, 1fr))` over a flat list of
   inputs, labels and buttons. Measured 17 sep 2026: the two checkbox labels are `nowrap`, so
   they overflowed their 150px cells and the Guardar button painted on top of "Adjuntar NURS
   DS NU E…". A grid cannot lay out items whose content refuses to wrap — so the fields are
   now sized in their own track and the flags and the actions get their own rows. */
.ev-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 10px;
  align-items: end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bb-line);
}
.ev-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ev-field-wide { grid-column: 1 / -1; }

/* A label, not a placeholder. A placeholder is gone the moment somebody types, so a filled
   form was a row of unlabelled boxes — and the field it mattered most for was this one. */
.ev-lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bb-ink-3);
}
.ev-lbl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ev-lbl-count {
  font-family: var(--bb-mono);
  font-size: 11px;
  color: var(--bb-ink-2);
  font-variant-numeric: tabular-nums;
}

.ev-form input[type="text"], .ev-form input[type="email"] {
  appearance: none;
  background: var(--bb-field);
  border: 0;
  box-shadow: var(--bb-sh-hairline);
  border-radius: var(--bb-r-control);
  padding: 8px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--bb-ink);
  min-width: 0;
  width: 100%;
}
.ev-form input:focus-visible {
  outline: none;
  box-shadow: var(--bb-sh-hairline), var(--bb-sh-focus);
}
.ev-form input[readonly] { color: var(--bb-ink-2); cursor: default; }

/* The chips strip reads as one field: same fill, same radius, same hairline as an input.
   Prefixed `ev-cc-*` because `.ev-chip` / `.ev-chips` are ALREADY this page's status chips
   (the header's "Sync 17 sept", "Eventos 518", the incomplete-list warning). Re-using those
   names restyled all of them from a rule 500 lines further down — caught in the headless
   drive of this form, 17 sep 2026. */
.ev-ccbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  background: var(--bb-field);
  box-shadow: var(--bb-sh-hairline);
  border-radius: var(--bb-r-control);
  padding: 7px 8px;
  min-height: 38px;
  cursor: text;
}
.ev-ccbox:focus-within { box-shadow: var(--bb-sh-hairline), var(--bb-sh-focus); }
.ev-ccbox-input {
  flex: 1 1 160px;
  /* Inside the strip it must not look like a second field. */
  background: transparent !important;
  box-shadow: none !important;
  padding: 1px 2px !important;
  min-width: 120px;
}
.ev-cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 4px 3px 9px;
  border-radius: 6px;
  background: var(--bb-surface);
  box-shadow: var(--bb-sh-hairline);
  font-size: 12px;
  color: var(--bb-ink);
  animation: ev-ccchip-in 100ms ease-out;
}
@keyframes ev-ccchip-in {
  from { opacity: 0; transform: translateY(-2px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ev-cc-chip { animation: none; } }
.ev-cc-chip-mail {
  font-family: var(--bb-mono);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* An address the server will refuse is marked ON the chip, and it stays in the list. Dropping
   it is how somebody stops getting the mail and never finds out. */
.ev-cc-chip.is-bad {
  background: var(--bb-red-tint);
  color: var(--bb-red);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bb-red) 34%, transparent);
  cursor: help;
}
.ev-cc-chip.is-bad .ev-cc-chip-mail { text-decoration: line-through; }
.ev-cc-chip-x {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  opacity: .55;
}
.ev-cc-chip-x { font-size: 15px; line-height: 1; }
.ev-cc-chip-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }

.ev-cc-bad {
  font-size: 11.5px;
  color: var(--bb-red);
  margin-top: 5px;
  font-family: var(--bb-mono); font-variant-numeric: tabular-nums;
}

.ev-flags { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
.ev-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--bb-ink-2);
  cursor: pointer;
  /* It used to be nowrap in an auto-fit cell, which is what painted a label under a button. */
  white-space: normal;
}
.ev-check input { flex: 0 0 auto; }

/* LEFT, not right: the support FAB is `position: fixed` in the bottom-right corner and floats
   over exactly where a right-aligned primary button lands on this panel — measured 17 sep 2026,
   Guardar was underneath "Ayuda". Primary first, because in a left-aligned row that is the
   first thing read. */
.ev-form-acts { flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; }
.ev-form-acts .ev-cc-bad { margin-top: 0; }
.ev-btn-sm { font-size: 11px; padding: 3px 9px; }

/* The CC list in the TABLE: the count is on screen, the addresses are in the tooltip.
   `cursor: help` is gated on [title] — the promise in DESIGN.md is that a help cursor means
   a tooltip exists, and the count renders with no title when nobody is copied. */
.ev-cc[title] {
  cursor: help;
  font-size: 12px;
  color: var(--bb-ink-2);
  border-bottom: 1px dotted var(--bb-line);
}
.ev-rcp-acts { white-space: nowrap; }
.ev-rcp-acts .ev-btn + .ev-btn { margin-left: 6px; }

/* ---------------------------------------------------------------- states */

.ev-empty {
  padding: 34px 18px;
  text-align: center;
  color: var(--bb-ink-3);
  font-size: 13px;
}
.ev-empty strong { display: block; color: var(--bb-ink); font-size: 14px; margin-bottom: 6px; }
.ev-empty code {
  display: inline-block;
  font-family: var(--bb-code);
  font-size: 12px;
  background: var(--bb-canvas);
  color: var(--bb-ink);
  padding: 7px 10px;
  border-radius: 6px;
  margin-top: 10px;
  white-space: pre-wrap;
  text-align: left;
}
.ev-note {
  font-size: 12px;
  color: var(--bb-ink-2);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

/* `hidden` loses to an author `display` (memoria: hidden-attr-loses-to-an-author-display), so
 * anything toggled in JS uses this class and nothing else sets display on those nodes. */
.ev-hide { display: none !important; }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 1240px) {
  .ev-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-row { grid-template-columns: 22px 46px 82px minmax(0, 1fr) 92px 104px 124px; }
  .ev-row .ev-cell-rev { display: none; }
}
@media (max-width: 980px) {
  .ev-row { grid-template-columns: 22px 46px minmax(0, 1fr) 92px 104px; }
  .ev-row .ev-thumb, .ev-row .ev-status { display: none; }
}
@media (max-width: 720px) {
  .ev-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ev-row { grid-template-columns: 40px minmax(0, 1fr) 84px; padding: 12px 12px 12px 8px; }
  .ev-row .ev-caret { display: none; }
  .ev-row .ev-cell-fill { display: none; }
  .ev-drill { padding-left: 14px; }
}

/* ---------------------------------------------------------------- dark */

html[data-bb-theme="dark"] .ev-kpi-value { color: #C7D6F2; }
html[data-bb-theme="dark"] .ev-btn.is-primary { color: #0B1220; }

/* ---------------------------------------------------------------- las fechas de una serie */

/* The occurrence list inside a folded series. Compact rows: date, the two counts, status.
 * They are BUTTONS, so each one still expands into its own attendee table. */
.ev-occ {
  background: var(--bb-surface);
  border-radius: var(--bb-r-card);
  box-shadow: var(--bb-sh-hairline);
  overflow: hidden;
}
.ev-occ-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 84px 132px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 13px;
  border: 0;
  border-bottom: 1px solid var(--bb-line);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--bb-t-fast);
}
.ev-occ-row:last-child { border-bottom: 0; }
.ev-occ-row:hover { background: var(--bb-hover); }
.ev-occ-row:focus-visible { outline: none; box-shadow: var(--bb-sh-focus); }
.ev-occ-row.is-open { background: var(--bb-accent-tint); }

.ev-occ-when {
  font-size: 12.5px;
  color: var(--bb-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-occ-num {
  font-family: var(--bb-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--bb-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ev-occ-num small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--bb-ink-3);
  margin-top: 1px;
}
.ev-occ-num.is-quiet { color: var(--bb-ink-3); }

/* Same rule as the main list: a closed date is greyed, not hidden, and wakes on hover. */
.ev-occ-row.is-dim .ev-occ-when,
.ev-occ-row.is-dim .ev-occ-num,
.ev-occ-row.is-dim .ev-status { color: var(--bb-ink-3); }
.ev-occ-row.is-dim:hover .ev-occ-when { color: var(--bb-ink); }

/* An occurrence's attendee panel sits inside the series panel — one step further in. */
.ev-occ .ev-drill {
  border-bottom: 1px solid var(--bb-line);
  padding: 12px 13px 14px 26px;
  background: var(--bb-canvas);
}

@media (max-width: 720px) {
  .ev-occ-row { grid-template-columns: minmax(0, 1fr) 64px 100px; }
  .ev-occ-row .ev-occ-num.is-quiet { display: none; }
}