/* OM Dashboard — tree table (CollectUI fe9c51a2, data-table + file-tree), app tokens only.
   After any edit here: `npm run dark:build` (dark.css is generated). */
.om-page { padding-top: 8px; }
.om-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 4px 0 16px; }
.om-h1 { font-size: 22px; font-weight: 700; color: var(--bb-ink); margin: 0; letter-spacing: -0.01em; }
.om-window { font-family: var(--bb-mono); font-size: 12px; color: var(--bb-ink-3); }

.om-kpis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
/* 8 across only when each card gets ~130px (sidebar open): at 1200px they fell to ~106px. */
@media (max-width: 1400px) { .om-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .om-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.om-kpi { background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); padding: 12px 14px; position: relative; overflow: hidden; container-type: inline-size; }
.om-kpi::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--bb-accent); }
.om-kpi-dim::before { background: var(--bb-line); }
.om-kpi-l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bb-ink-3); }
/* A figure NEVER wraps (20 oct 2026: "$2,457,24 / 3" on a 140px card at 8 columns). The size
   follows the card's own width (container query): --bb-mono is Outfit with tabular figures, so
   an 11-char "$12,457,243" is ~6em — 14cqi keeps it inside the padding down to 12px (measured
   in a harness at 8/4/2 columns), and 20px is the design size whenever there is room. */
.om-kpi-v { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; font-size: 20px; font-size: clamp(12px, 14cqi, 20px); font-weight: 600; color: var(--bb-ink); margin-top: 4px; white-space: nowrap; }

.om-card { background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); overflow-x: auto; }
.om-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.om-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bb-ink-3); padding: 10px 12px; border-bottom: 1px solid var(--bb-line); white-space: nowrap; background: var(--bb-surface); position: sticky; top: 0; }
.om-table th.om-n { text-align: right; }
.om-table th[data-om-sort] { cursor: pointer; }
.om-table th.om-sorted { color: var(--bb-ink); }
.om-table td { padding: 8px 12px; border-bottom: 1px solid var(--bb-line); color: var(--bb-ink); }
.om-n { text-align: right; font-family: var(--bb-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.om-dim { color: var(--bb-ink-3); }
.om-thin { color: var(--bb-ink-3); }
.om-row:hover td { background: var(--bb-hover); }
.om-div td { font-weight: 700; }
.om-div, .om-school { cursor: pointer; }
.om-school td.om-name { padding-left: 30px; font-weight: 600; }
.om-prog td.om-name { padding-left: 52px; color: var(--bb-ink-2); }
.om-nolead td { color: var(--bb-ink-3); font-style: italic; }
.om-name { white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.om-car { display: inline-block; width: 0; height: 0; margin-right: 8px; border-left: 5px solid var(--bb-ink-3); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--bb-t-fast) var(--bb-ease-out); vertical-align: middle; }
.om-car.open { transform: rotate(90deg); }
.om-bad { color: var(--bb-red); font-weight: 600; }
.om-warn { color: var(--bb-orange); }
.om-flag { width: 1%; white-space: nowrap; }
.om-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--bb-red-tint); color: var(--bb-red); }
.om-empty { text-align: center; color: var(--bb-ink-3); padding: 28px; }

/* Stage 2 — program → campaign rows, and the campaign drawer (.besc-drawer primitive). */
.om-prog { cursor: pointer; }
.om-prog.om-leaf { cursor: default; }
.om-prog .om-car { margin-left: -16px; }
.om-camp { cursor: pointer; }
.om-camp td { font-size: 12px; color: var(--bb-ink-2); }
.om-camp td.om-name { padding-left: 74px; font-family: var(--bb-mono); font-size: 11.5px; }
.om-plat { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; font-family: var(--bb-mono); font-size: 10px; font-weight: 700; margin-right: 8px; vertical-align: middle; flex-shrink: 0; }
.om-plat-meta { background: color-mix(in srgb, var(--bb-accent) 14%, var(--bb-surface)); color: var(--bb-accent); }
.om-plat-google { background: var(--bb-green-tint); color: var(--bb-green); }

.om-drawer { width: min(980px, 96vw); overflow-x: hidden; }
.om-dscroll { overflow-x: auto; border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); }
.om-dhead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 16px 20px; background: var(--bb-surface); border-bottom: 1px solid var(--bb-line); }
.om-dtitle { flex: 1; min-width: 0; font-family: var(--bb-mono); font-size: 13px; font-weight: 600; color: var(--bb-ink); overflow-wrap: anywhere; }
.om-dx { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--bb-ink-3); cursor: pointer; padding: 4px 8px; border-radius: var(--bb-r-control); }
.om-dx:hover { background: var(--bb-hover); color: var(--bb-ink); }
.om-dbody { padding: 18px 20px 32px; }
.om-dkpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 760px) { .om-dkpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.om-dh { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bb-ink-3); margin: 22px 0 8px; }
.om-count { font-family: var(--bb-mono); font-weight: 600; color: var(--bb-ink-2); margin-left: 6px; }
.om-dtable { border-collapse: separate; border-spacing: 0; }
.om-dtable td.om-name { max-width: 300px; font-family: var(--bb-mono); font-size: 11.5px; }
.om-dtable tr:last-child td { border-bottom: 0; }
.om-dload { height: 96px; border-radius: var(--bb-r-card); background: linear-gradient(90deg, var(--bb-hover) 0%, var(--bb-surface) 50%, var(--bb-hover) 100%); background-size: 200% 100%; animation: omShimmer 1.2s linear infinite; }
@keyframes omShimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { .om-dload { animation: none; } }
.om-derr { padding: 14px; border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); color: var(--bb-ink-2); font-size: 13px; display: flex; align-items: center; gap: 12px; }
.om-retry { border: 1px solid var(--bb-line); background: var(--bb-surface); border-radius: var(--bb-r-control); padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; color: var(--bb-ink); }

.om-ads { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.om-ad { display: flex; gap: 12px; border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); padding: 10px; background: var(--bb-surface); }
.om-ad-bad { border-color: color-mix(in srgb, var(--bb-red) 45%, var(--bb-line)); }
/* Status (a STATUS chip is allowed on screen): green dot = serving; a card that is not serving
   is greyed so a $0 / 0-lead row never reads as a live ad. */
.om-st { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; padding: 1px 7px; border-radius: 6px; font: 600 10.5px/1.6 'Outfit', sans-serif; vertical-align: 1px; border: 1px solid var(--bb-line); color: var(--bb-ink-3); background: var(--bb-hover); }
.om-st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.om-st-on { color: var(--bb-green); background: color-mix(in srgb, var(--bb-green) 10%, var(--bb-surface)); border-color: color-mix(in srgb, var(--bb-green) 30%, var(--bb-line)); }
.om-ad-dim { opacity: .55; }
.om-ad-dim .om-ad-media img { filter: grayscale(1); }
.om-ad-media { width: 72px; height: 72px; flex-shrink: 0; border-radius: 8px; background: var(--bb-hover); overflow: hidden; }
.om-ad-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.om-ad-b { min-width: 0; flex: 1; }
.om-ad-n { font-family: var(--bb-mono); font-size: 11.5px; font-weight: 600; color: var(--bb-ink); overflow-wrap: anywhere; }
.om-ad-s { font-family: var(--bb-mono); font-size: 10.5px; color: var(--bb-ink-3); margin-top: 2px; overflow-wrap: anywhere; }
.om-ad-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; margin-top: 8px; }
.om-ad-g span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bb-ink-3); }
.om-ad-g b { display: block; font-family: var(--bb-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--bb-ink); }
.om-ad-live { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--bb-accent); text-decoration: none; }
.om-ad-live:hover { text-decoration: underline; }

/* Stage 3 — platforms with no API, grouped under the program. */
.om-othhead td { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bb-ink-3); background: var(--bb-hover); }
.om-othhead td.om-name { padding-left: 74px; }
.om-oth td { font-size: 12px; color: var(--bb-ink-2); }
.om-oth td.om-name { padding-left: 74px; font-family: var(--bb-mono); font-size: 11.5px; }
.om-plat-other { width: auto; min-width: 18px; padding: 0 4px; background: var(--bb-hover); color: var(--bb-ink-2); }

/* Own window: start chips + custom range; KPI change vs the comparison window. */
.om-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -4px 0 16px; }
.om-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.om-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--bb-line); background: var(--bb-surface); color: var(--bb-ink-2); border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-transform: capitalize; }
.om-chip:hover { background: var(--bb-hover); color: var(--bb-ink); }
.om-chip.on { background: var(--bb-accent); border-color: var(--bb-accent); color: var(--bb-surface); }
/* Older starts: a select (BBDrop paints the menu) sized like a chip; navy when it holds the pick. */
.om-more { border: 1px solid var(--bb-line); background-color: var(--bb-surface); color: var(--bb-ink-2); border-radius: 6px; padding: 5px 26px 5px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; height: 29px; }
.om-more.on { border-color: var(--bb-accent); color: var(--bb-accent); }
/* Recinto filter + the PUNTUAL chip (a campaign whose leads concentrate on one recinto far
   above its programs' own mix). `.on` = the recinto picked in the filter. */
.om-rec { max-width: 240px; }
.om-punt { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: color-mix(in srgb, var(--bb-orange) 14%, var(--bb-surface)); color: var(--bb-orange); font-variant-numeric: tabular-nums; }
.om-punt.on { background: var(--bb-orange); color: var(--bb-surface); }
.om-punts { margin: 0 0 16px; }
.om-punts .om-dh { margin: 0 0 10px; }
.om-chip[data-om-last] { text-transform: none; }
.om-sep { width: 1px; align-self: stretch; margin: 3px 4px; background: var(--bb-line); }
.om-live { width: 6px; height: 6px; border-radius: 50%; background: var(--bb-green); flex-shrink: 0; }
/* The header period pill (#bbPeriodBtn) on the light page: same anatomy — icon, name,
   dates, length, caret, hairline segments, context in muted ink and the value in full ink.
   It opens the header's own panel (om.js). */
.om-period { display: inline-flex; align-items: center; gap: 0; height: 34px; padding: 0 6px 0 11px; border: 1px dashed var(--bb-line); border-radius: 9px; background: var(--bb-surface); color: var(--bb-ink-2); font: 600 13px/1 'Outfit', sans-serif; cursor: pointer; transition: border-color .15s, background .15s; }
.om-period:hover { border-color: var(--bb-ink-3); }
.om-period.on { border-style: solid; border-color: var(--bb-accent); color: var(--bb-ink); }
.om-period > svg:first-child { margin-right: 8px; flex: none; }
.om-period-name { padding-right: 10px; }
.om-period-dates, .om-period-len { padding: 0 10px; border-left: 1px solid var(--bb-line); font-family: var(--bb-mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.om-period-dates { color: var(--bb-ink); }
.om-period-len { color: var(--bb-ink-3); font-weight: 500; }
.om-period-caret { margin-left: 4px; flex: none; color: var(--bb-ink-3); }
.om-kpi-d { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 600; color: var(--bb-ink-3); margin-top: 2px; }
.om-kpi-s { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 500; color: var(--bb-ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Nuevos / Retorno: the split OF the Leads column beside it — muted so Leads stays the headline. */
.om-dsort { display: inline-flex; gap: 4px; margin-left: auto; flex: none; }
.om-table td.om-sub { color: var(--bb-ink-3); }
.om-kpi-d.om-up { color: var(--bb-green); }
.om-kpi-d.om-down { color: var(--bb-red); }
.om-status { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.om-status-bad { background: var(--bb-red-tint); color: var(--bb-red); }

/* Campaign cards — the Report Card's `.rc-viz` card (its own CSS in index.html), laid out in the
   tree. Only the grid, the platform tag and the no-API placeholder are OM's. */
.om-cardrow > td { padding: 12px 16px 16px 52px; background: var(--bb-hover); }
.om-cardrow:hover > td { background: var(--bb-hover); }
.om-viz-grid, .om-viz-grid.rc-viz-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.om-viz[data-om-camp] { cursor: pointer; }
.om-viz[data-om-camp]:focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 2px; }
.om-viz .rc-viz-name { cursor: inherit; }
.om-viz .rc-viz-go { pointer-events: none; }
.om-viz-plat { position: absolute; left: 8px; bottom: 8px; margin: 0; }
.om-viz-oname { font-size: 15px; font-weight: 700; color: var(--bb-ink-3); }
/* A Google Search ad in the thumbnail slot, as it serves. */
.om-serp { position: absolute; inset: 0; padding: 34px 12px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--bb-surface); text-align: left; overflow: hidden; }
.om-serp-d { font-size: 10px; color: var(--bb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-serp-h { font-size: 14px; line-height: 1.25; font-weight: 600; color: var(--bb-accent); }
.om-serp-p { font-size: 11px; line-height: 1.35; color: var(--bb-ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rc-viz-thumb.om-serp-on .rc-viz-thumb-ph { display: none; }
.om-viz .rc-viz-rank, .om-viz .rc-viz-grade, .om-viz .om-viz-plat { z-index: 2; }
.om-serp { z-index: 1; }

/* ---- The card's loading + entrance (19 oct 2026: "this looks horrendous") ----------------
   Measured cause: on Safari an aspect-ratio box inside the card's flex column was allowed to
   SHRINK, so the thumbnail collapsed to a strip with the badges cut in half; and five stat
   columns in a 240-340px card broke "$20,444" across two lines. Fixes: the thumb never shrinks
   (flex: none, fixed 4:3), the stats are two rows of three and a number never wraps. Loading:
   a shimmer skeleton while the creative is read, the image is DECODED first and then fades in
   (no half-painted frame, no pop), and the cards of a program the user just opened cascade in —
   first open only; a repaint never animates (docs/rules/motion.md rule 3). Only opacity and
   transform; all of it off under prefers-reduced-motion. */
.om-viz .om-thumb { flex: none; aspect-ratio: 4 / 3; background: var(--bb-hover) !important; overflow: hidden; }
.om-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.04); transition: opacity .34s var(--bb-ease-out), transform .6s var(--bb-ease-out); }
.om-thumb.om-img-in .om-img { opacity: 1; transform: none; }
.om-thumb.om-wait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--bb-surface) 65%, transparent) 50%, transparent 70%); background-size: 220% 100%; animation: omShimmer2 1.15s ease-in-out infinite; }
@keyframes omShimmer2 { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.om-ph { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-ink-3); opacity: 0; transition: opacity .2s var(--bb-ease-out); }
.om-thumb.om-none .om-ph { opacity: .55; }
.om-thumb.om-has-img .om-ph, .om-thumb.om-serp-on .om-ph { display: none; }
.om-viz .rc-viz-body { padding: 12px 14px 14px; }
.om-viz .rc-viz-big .v { font-size: 22px; }
.om-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bb-line); }
.om-stats > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.om-stats .v { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--bb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-stats .v.lte { color: var(--bb-violet, #6B4FA8); }
.om-stats .v.cpe { color: var(--bb-violet-deep, #4E3579); }
.om-stats .v.cpe.thin { color: var(--bb-ink-3); font-weight: 600; }
.om-stats .v.bad { color: var(--bb-red); }
.om-stats .l { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--bb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* `backwards`, not `both`: once the entrance ends the card returns to its own styles, so the
   Report Card's hover lift (a transform) still works. */
.om-enter { animation: omCardIn .42s var(--bb-ease-out) backwards; animation-delay: calc(var(--i, 0) * 38ms); }
@keyframes omCardIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .om-enter { animation: none; }
  .om-img { transition: none; transform: none; }
  .om-thumb.om-wait::after { animation: none; }
}
/* Group label inside the card grid (Meta / Google / PMax / Otras): spans the whole row. */
.om-vgroup { grid-column: 1 / -1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bb-ink-3); padding: 6px 0 0; border-bottom: 1px solid var(--bb-line); padding-bottom: 6px; }
.om-vgroup:first-child { padding-top: 0; }
.om-wait-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--bb-orange); }
.om-wait-tag b { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; }
/* Which ad set of the campaign served THIS program, and how the campaign relates to it. */
.om-via { font-family: var(--bb-mono); font-size: 10.5px; color: var(--bb-ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Launch date + days running, on the campaign card and the ad card. */
.om-since { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--bb-ink-3); margin-top: 3px; }
.om-since b { font-weight: 700; color: var(--bb-ink-2); margin-left: 4px; }
.om-rel { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.om-rel-0 { background: var(--bb-green-tint); color: var(--bb-green); }
.om-rel-1 { background: color-mix(in srgb, var(--bb-accent) 12%, var(--bb-surface)); color: var(--bb-accent); }
.om-rel-2 { background: var(--bb-hover); color: var(--bb-ink-2); }
.om-rel-3 { background: var(--bb-orange-tint); color: var(--bb-orange); }
.om-ph.om-ph-ad { text-transform: none; letter-spacing: 0; font-family: var(--bb-mono); font-size: 11px; padding: 0 14px; text-align: center; overflow-wrap: anywhere; opacity: .7; }
.om-thumb.om-wait .om-ph.om-ph-ad { opacity: .55; }

/* Importar inversión — the manual daily export (TikTok / LinkedIn / Reddit) for Otras plataformas.
   Chip anatomy, pushed to the right of the head. The file input is driven by the button. */
.om-import { margin-left: auto; align-self: center; display: inline-flex; align-items: center; border: 1px solid var(--bb-line); background: var(--bb-surface); color: var(--bb-ink-2); border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.om-import:hover { background: var(--bb-hover); color: var(--bb-ink); }
.om-file { display: none; }

/* Otras plataformas: the creative is DROPPED on the card (click or drag) — the thumb is the target.
   Video plays as a muted loop over the same box; the upload glyph shows on hover and on drag-over. */
.om-thumb[data-om-drop] { cursor: pointer; }
.om-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.om-drop-ic { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--bb-surface); color: var(--bb-ink-2); box-shadow: 0 1px 3px color-mix(in srgb, var(--bb-accent) 18%, transparent); opacity: 0; transform: translateY(2px); transition: opacity .18s var(--bb-ease-out), transform .18s var(--bb-ease-out); z-index: 2; }
.om-thumb[data-om-drop]:hover .om-drop-ic, .om-thumb.om-drop-on .om-drop-ic { opacity: 1; transform: none; }
.om-thumb.om-drop-on { outline: 2px dashed var(--bb-accent); outline-offset: -6px; }

/* Base MD — the Marketing Dashboard's view of the same window (mdbase.js). */
.om-chip-md { text-transform: none; }
.om-kpis-md { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.om-md-lv { padding-left: 28px; color: var(--bb-ink-2); }
@media (max-width: 760px) { .om-kpis-md { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Cuadre — Base MD next to the ingested Marketing Dashboard workbooks. */
.om-cuadre { margin-top: 22px; }
.om-cq-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.om-cq-head .om-dh { margin: 0; }
.om-cq { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.om-cq-ok { background: var(--bb-green-tint); color: var(--bb-green); }
.om-cq-bad { background: var(--bb-red-tint); color: var(--bb-red); }
.om-cq-na { color: var(--bb-ink-3); }
.om-status-ok { background: var(--bb-green-tint); color: var(--bb-green); }

/* --- the Relead card (rlPopHtml in om.js) ------------------------------------------------------
 * Budgets & Goals' variance card in OM's own class names: the catalog popover tokens (surface,
 * hairline, card radius, overlay shadow) in a FIXED form, because the OM table scrolls inside its
 * card and would clip an absolute child. Months newest first, numbers in var(--bb-mono). */
#omRlPop { position: fixed; z-index: 60; pointer-events: none; }
.om-rlpop { width: 220px; padding: 10px 12px 11px;
  background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r-card);
  box-shadow: var(--bb-sh-overlay); animation: omRlIn 150ms cubic-bezier(0, 0, .58, 1) both; }
@keyframes omRlIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .om-rlpop { animation: none; } }
.om-rlpop-h { font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: .07em;
  text-transform: uppercase; color: var(--bb-ink-3); margin-bottom: 7px; }
.om-rlpop-g { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: baseline; }
.om-rlpop-k { font-size: 11px; line-height: 1.3; color: var(--bb-ink-3); }
.om-rlpop-v { font: 600 12px/1.3 var(--bb-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--bb-ink); }
.om-rlpop-sep { grid-column: 1 / -1; border-top: 1px solid var(--bb-line); margin: 3px 0 1px; }
.om-rlpop-k.is-sum, .om-rlpop-v.is-sum { font-weight: 700; color: var(--bb-ink); border-top: 1px solid var(--bb-line); padding-top: 4px; margin-top: 2px; }
.om-table td[data-om-rl]:hover, .om-kpi-s [data-om-rl]:hover { color: var(--bb-ink); }