/* Outreach Board — Sales > Outreach. Diseño nuevo KOK (T1, Carlos 25-sep): ~/Downloads/kok-crm-design/DESIGN_SYSTEM.md v1.0 y
   outreach/spec.md (FINAL v1.0) §4/§5/§8/§9; el mockup (Tailwind por CDN) traducido a CSS plano. Todo cuelga de #outreachPage
   y usa prefijo ob- (styles.css tiene .card/.row/.chip genéricos). Los tokens van con los nombres del DS como custom properties
   (el test de contraste de outreach-board-design.test.js los lee de acá). Sin reglas .dark-mode (CLAUDE.md).
   T2 (Carlos, 25-sep; spec §6–§11, VERIFY-TEST-2026-09-25, rulings F37–F39): el drawer viejo se fue; en su lugar, el panel
   lateral de 600 px con la ficha del contacto, y en celular (< 768) la barra superior de Outreach y el cajón del sidebar.
   ÚNICA excepción a "todo cuelga de #outreachPage" (Ruling F38): las reglas que esconden la barra global, el logo y el riel
   del sidebar, y abren el sidebar como cajón, van en @media (max-width: 767px) y con body:has(#outreachPage.active): solo en
   esta página y solo en celular. outreach-board-design.test.js hace el censo de esa guarda. */
#outreachPage {
  /* DS §2.1–2.2: marca y neutros */
  --ob-navy: #163353; --ob-navy-700: #23506e; --ob-navy-900: #18385a;
  --ob-teal: #249083; --ob-teal-600: #1f7c70; --ob-teal-700: #1c6f64;
  --ob-ink: #132434; --ob-muted: #5f6774; --ob-label: #6b7480; --ob-tab-text: #2c394a;
  --ob-page: #f3f6f9; --ob-surface: #ffffff; --ob-line: #e4e9ed; --ob-line-soft: #eeeeee; --ob-line-card: #ecf0f4;
  --ob-tag: #f1f2f4; --ob-tag-text: #626976;
  --ob-ink-body: #2d2d2d; --ob-comments: #f9f9f9; --ob-comments-bar: #e1e3e8; --ob-note: #fffaed;
  /* sidebar (DS §2.1): la barra superior de celular usa su degradado */
  --ob-side-from: #15314f; --ob-side-to: #122942; --ob-side-hover: #1b3a5a;
  /* §2.3: estados de Outreach. Texto rojo sobre rosa, siempre --ob-red-text (4.87:1; el dot da 4.10 y falla). */
  --ob-red-dot: #d33b3e; --ob-red-text: #c6292e; --ob-red-bg: #feebec;
  --ob-yellow-dot: #c98a0c; --ob-yellow-text: #9c6300; --ob-yellow-bg: #fdf5e3;
  --ob-green-dot: #00845b; --ob-green-text: #007450; --ob-green-bg: #e6f4ee;
  --ob-gray-dot: #82909c;
  --ob-hot: #d24343;
  /* §2.4: pills (bg / texto, AA) */
  --ob-pill-red-bg: #fbe4e5; --ob-pill-red-tx: #c81e24; --ob-pill-amber-bg: #fff1c2; --ob-pill-amber-tx: #8b3817;
  --ob-pill-green-bg: #c7f9e2; --ob-pill-green-tx: #00543e; --ob-pill-gray-bg: #e8e9eb; --ob-pill-gray-tx: #414b58;
  --ob-pill-teal-bg: #deeeec; --ob-pill-teal-tx: #1c6f64; --ob-pill-blue-bg: #d4e7fd; --ob-pill-blue-tx: #183aa3;
  --ob-pill-orange-bg: #ffead0; --ob-pill-orange-tx: #942d19;
  --ob-switch-off: #c9d2da;                    /* toggle apagado (DS §7.9, aprobado v1.0) */
  /* §2.5: KPI de la familia deep, a 135°. kpi-red es el rojo OVERDUE exacto: el texto chico va sobre el scrim o el chip. */
  --ob-kpi-red: linear-gradient(135deg, #f53b40 0%, #df2228 100%);
  --ob-kpi-navy: linear-gradient(135deg, #18385a 0%, #1f537f 100%);
  --ob-kpi-green: linear-gradient(135deg, #00875a 0%, #006e4b 100%);
  --ob-kpi-orange: linear-gradient(135deg, #b45309 0%, #9a3f08 100%);
  --ob-kpi-teal: linear-gradient(135deg, #1f7c70 0%, #1c6f64 100%);
  --ob-kpi-scrim: rgba(0, 0, 0, .12); --ob-kpi-chip: rgba(0, 0, 0, .12);
  /* Hover de la fila pendiente: OSCURECE el scrim (desvío del DS §7.3.1, que pide white/10: aclarar bajaba el texto
     blanco a 4.39 medido; oscurecer da 5.38 / 6.71). */
  --ob-kpi-hover: rgba(0, 0, 0, .08);
  /* §6: sombras y overlay */
  --ob-shadow-card: 0 1px 3px rgba(19, 36, 52, .06); --ob-shadow-kpi: 0 10px 24px -6px rgba(22, 51, 83, .35);
  --ob-shadow-kpi-red: 0 10px 24px -6px rgba(223, 34, 40, .40); --ob-shadow-panel: -8px 0 24px rgba(19, 36, 52, .16);
  --ob-shadow-round: 0 2px 8px rgba(19, 36, 52, .18); --ob-shadow-pop: 0 10px 24px rgba(19, 36, 52, .18);
  --ob-overlay: rgba(19, 36, 52, .45);
  /* §5: radios · spec §4: anillo de foco en todo lo interactivo */
  --ob-r-md: 6px; --ob-r-lg: 8px; --ob-r-xl: 12px; --ob-r-full: 9999px;
  --ob-focus: 0 0 0 2px #fff, 0 0 0 4px #249083;
  color: var(--ob-ink); font-family: Inter, var(--font-ui); font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums;
}
/* Sin padding propio, como #loansContent y #page-billingworkspace: .main-content ya pone 24px 32px (M12); 1100 px como el
   Main del spec §5. El logo es el de kok-banner.js (hermano de .ob-shell): no se duplica. */
#outreachPage .ob-shell { max-width: 1100px; margin: 0 auto; min-width: 0; }
/* El layout del tablero se decide por el ANCHO DISPONIBLE (container queries sobre #obMain), no por el viewport: con el
   sidebar real (260 px hasta 480 px de viewport) una media query de viewport dejaba la columna de progreso en 0 px a
   820 px. El contenedor es #obMain y no .ob-shell: el panel y el overlay (position: fixed) quedan afuera. */
#outreachPage #obMain { container: ob-main / inline-size; }
#outreachPage .ob-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── PageHeader (DS §7.2) ─────────────────────────────────────────────────────────────────────────────────────── */
#outreachPage .ob-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
#outreachPage .ob-head-l { min-width: 0; }
#outreachPage .ob-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 26px; line-height: 32px; font-weight: 800; color: var(--ob-navy); }
#outreachPage .ob-title-ic { flex-shrink: 0; color: var(--ob-teal-600); }
#outreachPage .ob-sub { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--ob-muted); }
#outreachPage .ob-live { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ob-green-dot); }
#outreachPage .ob-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
#outreachPage .ob-viewas { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 44px; padding: 0 12px; border-radius: var(--ob-r-xl); background: var(--ob-navy-900); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: var(--ob-shadow-kpi); }
/* min-width 0: en un contenedor muy angosto el select se achica (recorta su texto) en vez de sacar la caja del tablero. */
#outreachPage .ob-viewas-sel { flex: 0 1 auto; min-width: 0; height: 28px; max-width: 180px; padding: 0 6px; border: 0; border-radius: var(--ob-r-md); background: #fff; color: var(--ob-ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
#outreachPage .ob-viewas-sel:hover { background: var(--ob-line); }
#outreachPage .ob-search { position: relative; display: block; }
#outreachPage .ob-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ob-muted); pointer-events: none; }
#outreachPage .ob-search-in { width: 192px; height: 36px; padding: 0 12px 0 32px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); background: #fff; color: var(--ob-ink); font: inherit; font-size: 13px; }
#outreachPage .ob-search-in::placeholder { color: var(--ob-muted); opacity: 1; }
#outreachPage .ob-search-in:hover { border-color: var(--ob-gray-dot); }
/* Botón secundario (Refresh, el ícono de Search en celular): blanco, borde line, texto muted. */
#outreachPage .ob-btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); background: #fff; color: var(--ob-muted); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
#outreachPage .ob-btn2:hover { border-color: var(--ob-gray-dot); color: var(--ob-ink); }
#outreachPage .ob-search-tog { display: none; width: 36px; padding: 0; }
#outreachPage .ob-refresh:disabled { cursor: wait; }
#outreachPage .ob-refresh.ob-is-loading svg { animation: ob-spin 1s linear infinite; }
@keyframes ob-spin { to { transform: rotate(360deg); } }

/* ── WaveTabs (pill tabs, DS §7.7) ─────────────────────────────────────────────────────────────────────────────── */
/* El padding deja lugar al anillo de foco: overflow-x recorta lo que sale de la caja. */
#outreachPage .ob-waves { display: flex; gap: 8px; margin: 12px -4px 0; padding: 4px; overflow-x: auto; scrollbar-width: none; }
#outreachPage .ob-waves::-webkit-scrollbar { display: none; }
#outreachPage .ob-wave { flex-shrink: 0; height: 32px; padding: 0 12px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); background: #fff; color: var(--ob-tab-text); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
#outreachPage .ob-wave:hover { border-color: var(--ob-gray-dot); }
#outreachPage .ob-wave[aria-selected="true"] { background: var(--ob-navy); border-color: var(--ob-navy); color: #fff; font-weight: 700; }
#outreachPage .ob-wave[aria-selected="true"]:hover { background: var(--ob-navy-700); }
#outreachPage .ob-wave-campaigns { margin-top: 2px; font-size: 12px; color: var(--ob-muted); }
#outreachPage .ob-panel { min-width: 0; }

/* ── Avisos, error y gate ─────────────────────────────────────────────────────────────────────────────────────── */
#outreachPage .ob-banner { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--ob-r-lg); background: var(--ob-yellow-bg); border: 1px solid var(--ob-line); font-size: 13px; }
#outreachPage .ob-error, #outreachPage .ob-gate { margin-top: 20px; padding: 16px; border: 1px solid var(--ob-line-card); border-radius: var(--ob-r-xl); background: var(--ob-surface); box-shadow: var(--ob-shadow-card); }
#outreachPage .ob-gate h1 { margin: 0 0 6px; font-size: 20px; line-height: 28px; font-weight: 800; color: var(--ob-navy); }

/* ── KpiGrid y tarjetas KPI (DS §7.3; WaitingOnUs §7.3.1) ──────────────────────────────────────────────────────── */
/* <768: 2 columnas; 768–1023: 2 columnas con WaitingOnUs arriba a todo el ancho; ≥1024: 4 columnas y WaitingOnUs 2×2. */
#outreachPage .ob-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
#outreachPage .ob-kpi { position: relative; min-width: 0; padding: 16px; border-radius: var(--ob-r-xl); color: #fff; box-shadow: var(--ob-shadow-kpi); }
#outreachPage .ob-kpi-red { background: var(--ob-kpi-red); box-shadow: var(--ob-shadow-kpi-red); }
#outreachPage .ob-kpi-navy { background: var(--ob-kpi-navy); }
#outreachPage .ob-kpi-green { background: var(--ob-kpi-green); }
#outreachPage .ob-kpi-orange { background: var(--ob-kpi-orange); }
#outreachPage .ob-kpi-teal { background: var(--ob-kpi-teal); }
#outreachPage .ob-kpi-wait { grid-column: span 2; }
#outreachPage .ob-kpi-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--ob-r-xl); background: rgba(255, 255, 255, .2); }
#outreachPage .ob-kpi-label { margin: 12px 0 0; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
#outreachPage .ob-kpi-val { margin: 0; font-size: 32px; line-height: 38px; font-weight: 800; overflow-wrap: anywhere; }
#outreachPage .ob-kpi-val-date { overflow-wrap: normal; white-space: nowrap; }
#outreachPage .ob-kpi-sub { margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; }
/* Sobre kpi-red, el texto chico nunca va directo sobre el rojo: el label en el chip, la ayuda y la lista en el scrim. */
#outreachPage .ob-kpi-chip { display: block; width: fit-content; margin: 12px 0 0; padding: 2px 8px; border-radius: var(--ob-r-full); background: var(--ob-kpi-chip); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#outreachPage .ob-kpi-hero { margin: 0; font-size: 56px; line-height: 60px; font-weight: 800; }
#outreachPage .ob-kpi-scrim { margin-top: 12px; padding: 8px 10px; border-radius: var(--ob-r-lg); background: var(--ob-kpi-scrim); }
#outreachPage .ob-kpi-help { margin: 0; padding-bottom: 6px; font-size: 12px; line-height: 16px; font-weight: 500; }
#outreachPage .ob-kpi-ok { margin: 0; padding-bottom: 2px; font-size: 15px; line-height: 20px; font-weight: 700; }
/* La lista pendiente: nombre 600 + (empresa) 400, los dos en blanco sólido; horas 700 a la derecha. */
#outreachPage .ob-owe { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .25); font-size: 13px; line-height: 18px; }
#outreachPage .ob-owe li + li { border-top: 1px solid rgba(255, 255, 255, .15); }
#outreachPage .ob-owe-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: calc(100% + 8px); margin: 0 -4px; padding: 6px 4px; border: 0; border-radius: var(--ob-r-md); background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; }
#outreachPage .ob-owe-item:hover { background: var(--ob-kpi-hover); }
#outreachPage .ob-owe-who { min-width: 0; }
#outreachPage .ob-owe-name { font-weight: 600; }
#outreachPage .ob-owe-co { font-weight: 400; }
#outreachPage .ob-owe-h { flex-shrink: 0; font-weight: 700; }
#outreachPage .ob-owe-more { margin: 0; padding-top: 6px; font-size: 12px; line-height: 16px; font-weight: 600; }
/* La lista (de las filas) no suma lo mismo que la cifra (del servidor): se dice, chico y en blanco sólido sobre el scrim. */
#outreachPage .ob-owe-note { margin: 0; padding-top: 6px; font-size: 12px; line-height: 16px; font-weight: 500; }
/* Cargando (spec §9): las mismas tarjetas con bloques white/20 de la altura de cada renglón (mismo tamaño). */
#outreachPage .ob-skel { display: block; border-radius: var(--ob-r-md); background: rgba(255, 255, 255, .2); }
#outreachPage .ob-skel-label { width: 45%; height: 12px; margin: 14px 0 2px; }
#outreachPage .ob-skel-val { width: 55%; height: 30px; margin: 4px 0; }
#outreachPage .ob-skel-sub { width: 70%; height: 12px; margin: 3px 0; }
#outreachPage .ob-skel-chip { width: 128px; height: 20px; margin-top: 12px; border-radius: var(--ob-r-full); }
#outreachPage .ob-skel-hero { width: 64px; height: 48px; margin: 6px 0; }
#outreachPage .ob-skel-line { height: 12px; margin: 10px 0; }
#outreachPage .ob-kpi-skel .ob-skel, #outreachPage .ob-mb-skel .ob-skel { animation: ob-pulse 1.4s ease-in-out infinite; }
@keyframes ob-pulse { 50% { opacity: .55; } }

/* ── SectionCard (DS §7.4) ─────────────────────────────────────────────────────────────────────────────────────── */
#outreachPage .ob-sec { margin-top: 24px; overflow: hidden; border: 1px solid var(--ob-line-card); border-radius: var(--ob-r-xl); background: var(--ob-surface); box-shadow: var(--ob-shadow-card); }
#outreachPage .ob-sec-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 14px 20px; border-bottom: 1px solid var(--ob-line); }
#outreachPage .ob-sec-t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ob-navy); }
#outreachPage .ob-sec-t svg { flex-shrink: 0; color: var(--ob-teal-600); }
#outreachPage .ob-sec-meta { font-size: 12px; color: var(--ob-muted); }
#outreachPage .ob-mailboxes .ob-empty, #outreachPage .ob-results .ob-empty { padding: 20px; text-align: left; }

/* ── Filas de buzón (DS §7.5): 190px | 1fr | 130px | 90px. La fila entera es un <button> (spans adentro). ─────── */
#outreachPage .ob-mbs { list-style: none; margin: 0; padding: 0; }
#outreachPage .ob-mbs li + li { border-top: 1px solid var(--ob-line-soft); }
#outreachPage .ob-mb { display: grid; grid-template-columns: 190px minmax(0, 1fr) 130px 90px; grid-template-areas: "id prog labels over"; align-items: center; gap: 20px; width: 100%; padding: 16px 20px; border: 0; background: none; color: var(--ob-ink); font: inherit; text-align: left; cursor: pointer; }
#outreachPage .ob-mb:hover { background: var(--ob-page); }
/* label (#6b7480) sobre page da 4.37: en hover las etiquetas pasan a muted (5.26) para seguir en AA. */
#outreachPage .ob-mb:hover .ob-lab-t { color: var(--ob-muted); }
#outreachPage .ob-mb-skel { min-height: 104px; cursor: default; }
#outreachPage .ob-mb-skel:hover { background: none; }
#outreachPage .ob-mb-skel .ob-skel { background: var(--ob-line); }
#outreachPage .ob-mb-id { grid-area: id; display: block; min-width: 0; }
#outreachPage .ob-mb-name { display: block; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ob-teal-600); }
#outreachPage .ob-mb-email { display: block; font-size: 12px; line-height: 16px; color: var(--ob-muted); overflow-wrap: anywhere; }
#outreachPage .ob-mb-tag { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: var(--ob-r-md); background: var(--ob-tag); color: var(--ob-tag-text); font-size: 11px; line-height: 16px; font-weight: 500; }
#outreachPage .ob-mb-prog { grid-area: prog; display: block; min-width: 0; }
#outreachPage .ob-bar { display: flex; height: 8px; overflow: hidden; border-radius: var(--ob-r-full); background: var(--ob-line); }
#outreachPage .ob-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--ob-muted); }
#outreachPage .ob-kv b { display: block; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ob-ink); }
#outreachPage .ob-kv b.ob-kv-alert { color: var(--ob-red-text); }
#outreachPage .ob-mb-labels { grid-area: labels; display: grid; gap: 6px; min-width: 0; }
#outreachPage .ob-lab { display: block; min-width: 0; }
#outreachPage .ob-lab-t { display: block; font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ob-label); }
#outreachPage .ob-lab-v { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; font-weight: 500; }
#outreachPage .ob-pill { display: inline-block; margin-top: 2px; padding: 2px 8px; border-radius: var(--ob-r-full); font-size: 11px; line-height: 16px; font-weight: 600; }
#outreachPage .ob-pill-red { background: var(--ob-pill-red-bg); color: var(--ob-pill-red-tx); }
#outreachPage .ob-pill-amber { background: var(--ob-pill-amber-bg); color: var(--ob-pill-amber-tx); }
#outreachPage .ob-pill-green { background: var(--ob-pill-green-bg); color: var(--ob-pill-green-tx); }
#outreachPage .ob-pill-gray { background: var(--ob-pill-gray-bg); color: var(--ob-pill-gray-tx); }
#outreachPage .ob-mb-over { grid-area: over; display: block; text-align: right; color: var(--ob-red-text); font-size: 12px; line-height: 16px; font-weight: 600; }
#outreachPage .ob-mb-over b { display: block; font-size: 20px; line-height: 28px; font-weight: 800; }
#outreachPage .ob-mb-over-0 { color: var(--ob-muted); }
#outreachPage .ob-c-red { background: var(--ob-red-dot); } #outreachPage .ob-c-yellow { background: var(--ob-yellow-dot); }
#outreachPage .ob-c-green { background: var(--ob-green-dot); } #outreachPage .ob-c-gray { background: var(--ob-gray-dot); }

/* ── Search results ────────────────────────────────────────────────────────────────────────────────────────────── */
#outreachPage .ob-res-list { list-style: none; margin: 0; padding: 0; }
#outreachPage .ob-res-list li + li { border-top: 1px solid var(--ob-line-soft); }
#outreachPage .ob-res { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 56px; align-items: center; gap: 12px; width: 100%; padding: 12px 20px; border: 0; background: none; color: var(--ob-ink); font: inherit; text-align: left; cursor: pointer; }
#outreachPage .ob-res:hover { background: var(--ob-page); }
#outreachPage .ob-res .ob-dot { margin-right: 0; }
#outreachPage .ob-res-main { min-width: 0; }
#outreachPage .ob-res-name { margin-right: 8px; font-weight: 600; }
#outreachPage .ob-res-co { font-size: 13px; color: var(--ob-muted); }
#outreachPage .ob-res-mb { font-size: 12px; color: var(--ob-muted); white-space: nowrap; }
#outreachPage .ob-res-h { font-weight: 700; color: var(--ob-red-text); white-space: nowrap; text-align: right; }
#outreachPage .ob-res[data-color="yellow"] .ob-res-h { color: var(--ob-yellow-text); }

/* ── "How to read this" y el pie ───────────────────────────────────────────────────────────────────────────────── */
#outreachPage .ob-help { margin-top: 20px; }
#outreachPage .ob-help summary { display: inline-flex; align-items: center; gap: 4px; list-style: none; border-radius: var(--ob-r-md); font-size: 13px; font-weight: 600; color: var(--ob-teal-700); cursor: pointer; }
#outreachPage .ob-help summary::-webkit-details-marker { display: none; }
#outreachPage .ob-help summary:hover { text-decoration: underline; }
#outreachPage .ob-help summary svg { transition: transform .15s ease; }
#outreachPage .ob-help[open] summary svg { transform: rotate(180deg); }
#outreachPage .ob-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 12.5px; color: var(--ob-muted); }
#outreachPage .ob-dot { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; }
#outreachPage .ob-foot { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; color: var(--ob-muted); }
#outreachPage .ob-foot svg { flex-shrink: 0; }
#outreachPage .ob-empty { color: var(--ob-muted); padding: 24px 8px; text-align: center; }

/* ── Panel lateral de 600 px (spec §6, opción B; DS §7.10) ─────────────────────────────────────────────────────────
   Escritorio: 600 px (con viewport < 1100 px baja hasta 480), alto completo, shadow-panel, sobre el overlay. Encabezado y
   pie fijos (el panel es una columna flex: solo el cuerpo hace scroll). < 768: pantalla completa (abajo). */
#outreachPage .ob-scrim { position: fixed; inset: 0; background: var(--ob-overlay); opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 900; }
#outreachPage .ob-scrim.on { opacity: 1; pointer-events: auto; }
/* La sombra, solo abierto: cerrado queda a 102 % fuera de pantalla y sus 24 px de blur asomaban por el borde derecho. */
#outreachPage .ob-sp { position: fixed; top: 0; right: 0; bottom: 0; z-index: 901; display: flex; flex-direction: column; width: clamp(480px, calc(100vw - 500px), 600px); max-width: 100vw; background: var(--ob-surface); transform: translateX(102%); transition: transform .22s ease; }
#outreachPage .ob-sp.on { transform: none; box-shadow: var(--ob-shadow-panel); }
#outreachPage .ob-sp-in { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#outreachPage .ob-sp-head { flex-shrink: 0; padding: 16px 20px 12px; border-bottom: 1px solid var(--ob-line); }
#outreachPage .ob-sp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* El botón "Claude KOK" (kokbot-module.js: fixed, top 12px, right 18px, z-index 9000) queda arriba del panel y taparía la
   ×: si está en la página, el encabezado le deja lugar (pasada visual, punto 10). En celular es solo el ícono (abajo). */
body:has(#claudekok-btn) #outreachPage .ob-sp-top { padding-right: 170px; }
#outreachPage .ob-sp-id { min-width: 0; }
#outreachPage .ob-sp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
#outreachPage .ob-sp-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 800; color: var(--ob-navy); }
#outreachPage .ob-sp-over { margin-top: 0; font-size: 12px; font-weight: 700; }
#outreachPage .ob-sp-meta { margin: 0; font-size: 12px; line-height: 16px; color: var(--ob-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#outreachPage .ob-x { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--ob-r-full); background: var(--ob-surface); color: var(--ob-muted); box-shadow: var(--ob-shadow-round); cursor: pointer; }
#outreachPage .ob-x:hover { color: var(--ob-ink); }
#outreachPage .ob-ptabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
#outreachPage .ob-ptab { height: 32px; padding: 0 12px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); background: var(--ob-surface); color: var(--ob-tab-text); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
#outreachPage .ob-ptab:hover { border-color: var(--ob-gray-dot); }
#outreachPage .ob-ptab[aria-selected="true"] { background: var(--ob-navy); border-color: var(--ob-navy); color: #fff; font-weight: 700; }
#outreachPage .ob-ptab[aria-selected="true"]:hover { background: var(--ob-navy-700); }
/* Chips de filtro (DS §7.11): pill de 28 px, borde line, punto de estado; apretado, borde de 1.5 px del color del estado
   (0.5 px de sombra interna encima del borde de 1: no se mueve el ancho). */
#outreachPage .ob-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#outreachPage .ob-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 28px; padding: 0 10px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-full); background: var(--ob-surface); color: var(--ob-ink); font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums; }
#outreachPage .ob-chip:hover { border-color: var(--ob-gray-dot); }
#outreachPage .ob-chip[aria-pressed="true"] { border-color: var(--ob-chip, var(--ob-navy)); box-shadow: inset 0 0 0 .5px var(--ob-chip, var(--ob-navy)); font-weight: 600; }
#outreachPage .ob-chip-red, #outreachPage .ob-chip-hot, #outreachPage .ob-chip-needs { --ob-chip: var(--ob-red-dot); }
#outreachPage .ob-chip-yellow { --ob-chip: var(--ob-yellow-dot); }
#outreachPage .ob-chip-green { --ob-chip: var(--ob-green-dot); }
#outreachPage .ob-chip-gray { --ob-chip: var(--ob-gray-dot); }
#outreachPage .ob-chip-all { --ob-chip: var(--ob-navy); }
#outreachPage .ob-chip-needs::before, #outreachPage .ob-chip-red::before, #outreachPage .ob-chip-yellow::before, #outreachPage .ob-chip-green::before,
#outreachPage .ob-chip-gray::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ob-chip); }
#outreachPage .ob-sp-head .ob-banner { margin: 10px 0 0; }
#outreachPage .ob-sp-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#outreachPage .ob-sp-body > .ob-empty { padding: 32px 20px; }
#outreachPage .ob-sp-foot { flex-shrink: 0; display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 20px; border-top: 1px solid var(--ob-line); background: var(--ob-surface); font-size: 12px; color: var(--ob-muted); }
#outreachPage .ob-sp-foot svg { flex-shrink: 0; }

/* NavBar: "Back to list" solo en celular (en escritorio ocupa su lugar invisible) · Prev ‹ "i of n" › Next. */
#outreachPage .ob-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 20px; border-bottom: 1px solid var(--ob-line); }
#outreachPage .ob-back { visibility: hidden; display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 0; border-radius: var(--ob-r-md); background: none; color: var(--ob-teal-700); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
#outreachPage .ob-back:hover { background: var(--ob-page); }
#outreachPage .ob-nav-r { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ob-muted); }
#outreachPage .ob-nav-b { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); background: var(--ob-surface); color: var(--ob-ink); cursor: pointer; }
#outreachPage .ob-nav-b:hover:not(:disabled) { border-color: var(--ob-gray-dot); background: var(--ob-page); }
#outreachPage .ob-nav-b:disabled { opacity: .45; cursor: default; }
#outreachPage .ob-pos { padding: 0 6px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── ContactCard ───────────────────────────────────────────────────────────────────────────────────────────────── */
#outreachPage .ob-cc { padding: 16px 20px 20px; transition: opacity .2s ease, transform .2s ease; }
/* "Needs action" después de un Confirm (spec §9): al cerrarse el toast, la ficha se colapsa en 200 ms y abre la siguiente. */
#outreachPage .ob-cc.ob-cc-out { opacity: 0; transform: translateY(-12px); }
#outreachPage .ob-cc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#outreachPage .ob-cc-id { min-width: 0; }
#outreachPage .ob-cc-name { margin: 0; font-size: 20px; line-height: 28px; font-weight: 800; color: var(--ob-navy); }
#outreachPage .ob-cc-sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--ob-muted); overflow-wrap: anywhere; }
#outreachPage .ob-cc-email { user-select: all; }
#outreachPage .ob-cc-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#outreachPage .ob-cc-wait { flex-shrink: 0; text-align: right; color: var(--ob-red-text); }
#outreachPage .ob-cc-wait b { display: block; font-size: 32px; line-height: 38px; font-weight: 800; }
#outreachPage .ob-cc-wait span { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; font-weight: 600; }
/* Pills que usa la ficha, además de los del tablero (DS §2.4): Wave = teal; GC Reconnection = page + navy; los STAGE. */
#outreachPage .ob-pill-teal { background: var(--ob-pill-teal-bg); color: var(--ob-pill-teal-tx); }
#outreachPage .ob-pill-page { background: var(--ob-page); color: var(--ob-navy); }
#outreachPage .ob-pill-blue { background: var(--ob-pill-blue-bg); color: var(--ob-pill-blue-tx); }
#outreachPage .ob-pill-orange { background: var(--ob-pill-orange-bg); color: var(--ob-pill-orange-tx); }
/* StatusLine: una línea con el fondo del estado y el borde izquierdo de 3 px de su punto. */
#outreachPage .ob-sl { margin: 12px 0 0; padding: 8px 12px; border-left: 3px solid var(--ob-gray-dot); border-radius: var(--ob-r-lg); background: var(--ob-page); color: var(--ob-ink); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
#outreachPage .ob-sl[data-color="red"] { border-left-color: var(--ob-red-dot); background: var(--ob-red-bg); }
#outreachPage .ob-sl[data-color="yellow"] { border-left-color: var(--ob-yellow-dot); background: var(--ob-yellow-bg); }
#outreachPage .ob-sl[data-color="green"] { border-left-color: var(--ob-green-dot); background: var(--ob-green-bg); }
#outreachPage .ob-sl-wait { font-weight: 700; color: var(--ob-red-text); }
#outreachPage .ob-sl[data-color="yellow"] .ob-sl-wait { color: var(--ob-yellow-text); }

/* AnsweredOutside: la acción principal (section card, radius-xl). 4 chips (radiogroup) + "No answer needed" aparte (F37). */
#outreachPage .ob-ao { margin-top: 20px; padding: 16px; border: 1px solid var(--ob-line-card); border-radius: var(--ob-r-xl); background: var(--ob-surface); box-shadow: var(--ob-shadow-card); }
#outreachPage .ob-ao-t { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ob-navy); }
#outreachPage .ob-ao-help { margin: 0; font-size: 12px; line-height: 16px; color: var(--ob-muted); }
#outreachPage .ob-ao-was { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--ob-muted); }
#outreachPage .ob-ao-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#outreachPage .ob-ch { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-full); background: var(--ob-surface); color: var(--ob-navy); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
#outreachPage .ob-ch:hover { border-color: var(--ob-gray-dot); }
#outreachPage .ob-ch[aria-checked="true"] { border-color: var(--ob-navy-900); background: var(--ob-navy-900); color: #fff; font-weight: 700; }
#outreachPage .ob-ao-nn { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 4px 2px; border: 0; border-radius: var(--ob-r-md); background: none; color: var(--ob-teal-600); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
#outreachPage .ob-ao-nn:hover { text-decoration: underline; }
#outreachPage .ob-ao-nn[aria-pressed="true"] { text-decoration: underline; }
#outreachPage .ob-ao-nn[aria-pressed="true"]::before { content: "✓"; }
#outreachPage .ob-in { display: block; width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); background: var(--ob-surface); color: var(--ob-ink); font: inherit; font-size: 14px; }
#outreachPage .ob-in:hover { border-color: var(--ob-gray-dot); }
#outreachPage .ob-in::placeholder { color: var(--ob-muted); opacity: 1; }
#outreachPage .ob-in[readonly] { background: var(--ob-page); }
#outreachPage .ob-ao-note { margin-top: 12px; }
#outreachPage .ob-ao-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
/* El ÚNICO botón primario de la vista (DS §7.11): navy, hover navy-900. Enviando: spinner y el texto transparente, así
   conserva el ancho. */
#outreachPage .ob-ao-go { position: relative; height: 40px; padding: 0 16px; border: 0; border-radius: var(--ob-r-lg); background: var(--ob-navy); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
#outreachPage .ob-ao-go:hover:not(:disabled) { background: var(--ob-navy-900); }
#outreachPage .ob-ao-go:disabled { background: var(--ob-page); color: var(--ob-muted); box-shadow: inset 0 0 0 1px var(--ob-line); cursor: not-allowed; }
#outreachPage .ob-ao-go.ob-is-busy { background: var(--ob-navy); color: transparent; box-shadow: none; cursor: wait; }
#outreachPage .ob-ao-go.ob-is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: ob-spin .8s linear infinite; }
#outreachPage .ob-ao-cancel { font-size: 13px; }
#outreachPage .ob-ao-state { margin: 8px 0 0; }
/* La marca vigente (sin needs_answer): una línea compacta con su Undo tardío (M5). */
#outreachPage .ob-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 12px; padding: 8px 12px; border-radius: var(--ob-r-lg); background: var(--ob-green-bg); color: var(--ob-ink); font-size: 13px; line-height: 18px; }
#outreachPage .ob-link { padding: 0 2px; border: 0; border-radius: var(--ob-r-md); background: none; color: var(--ob-teal-700); font: inherit; font-size: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* FieldGrid (DS §7.9): fondo page, radius-xl, 3 columnas; etiquetas en mayúsculas. `label` sobre `page` da 4.37 (falla
   AA): van en muted (5.26), como las del modal KOK-771. */
#outreachPage .ob-fg { margin-top: 20px; padding: 16px; border-radius: var(--ob-r-xl); background: var(--ob-page); }
#outreachPage .ob-fg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
#outreachPage .ob-f { min-width: 0; }
#outreachPage .ob-f-wide { grid-column: 1 / -1; }
#outreachPage .ob-f-l { margin: 0; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ob-muted); }
#outreachPage .ob-f dd { position: relative; margin: 4px 0 0; }
#outreachPage .ob-stage { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--ob-r-lg); background: var(--ob-teal-700); color: #fff; font-size: 14px; font-weight: 700; }
#outreachPage .ob-status { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: var(--ob-r-lg); font-size: 14px; font-weight: 700; }
#outreachPage .ob-status .ob-dot { width: 8px; height: 8px; margin: 0; }
#outreachPage .ob-status-red { background: var(--ob-pill-red-bg); color: var(--ob-pill-red-tx); }
#outreachPage .ob-status-yellow { background: var(--ob-pill-amber-bg); color: var(--ob-pill-amber-tx); }
#outreachPage .ob-status-green { background: var(--ob-pill-green-bg); color: var(--ob-pill-green-tx); }
#outreachPage .ob-status-gray { background: var(--ob-pill-gray-bg); color: var(--ob-pill-gray-tx); }
#outreachPage .ob-f-v { display: flex; align-items: center; min-height: 40px; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
/* HOT: switch de 40×22 (teal encendido, #c9d2da apagado) + "On" / "Off". En celular el blanco del toque crece a 44. */
#outreachPage .ob-hot { display: flex; align-items: center; gap: 8px; min-height: 40px; }
#outreachPage .ob-sw { display: inline-grid; place-items: center; width: 40px; height: 22px; padding: 0; border: 0; border-radius: var(--ob-r-full); background: none; cursor: pointer; }
#outreachPage .ob-sw-tr { position: relative; display: block; width: 40px; height: 22px; border-radius: var(--ob-r-full); background: var(--ob-switch-off); transition: background .15s ease; }
#outreachPage .ob-sw:hover .ob-sw-tr { background: var(--ob-gray-dot); }
#outreachPage .ob-sw[aria-checked="true"] .ob-sw-tr { background: var(--ob-teal); }
#outreachPage .ob-sw-k { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--ob-shadow-card); transition: transform .15s ease; }
#outreachPage .ob-sw[aria-checked="true"] .ob-sw-k { transform: translateX(18px); }
#outreachPage .ob-sw:disabled { opacity: .6; cursor: wait; }
#outreachPage .ob-sw-t { font-size: 14px; color: var(--ob-muted); }
/* Owner en línea: vacío, el "+ Add …" punteado (el mismo de Next step / Notes); con valor, botón-select con avatar de 24 +
   nombre + chevron; el listbox abajo. */
#outreachPage .ob-owner-w { position: relative; }
#outreachPage .ob-owner { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); background: var(--ob-surface); color: var(--ob-ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
#outreachPage .ob-owner:hover { border-color: var(--ob-gray-dot); }
#outreachPage .ob-owner svg { flex-shrink: 0; color: var(--ob-muted); }
#outreachPage .ob-owner-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
#outreachPage .ob-owner-n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#outreachPage .ob-add { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; padding: 0 12px; border: 1px dashed var(--ob-gray-dot); border-radius: var(--ob-r-lg); background: rgba(255, 255, 255, .6); color: var(--ob-teal-700); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
#outreachPage .ob-add:hover { background: var(--ob-surface); }
#outreachPage .ob-lb { position: absolute; left: 0; right: 0; top: 44px; z-index: 5; max-height: 264px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); background: var(--ob-surface); box-shadow: var(--ob-shadow-pop); }
#outreachPage .ob-lb-o { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; border-radius: var(--ob-r-md); font-size: 14px; cursor: pointer; }
#outreachPage .ob-lb-o:hover, #outreachPage .ob-lb-o.ob-is-active { background: var(--ob-page); }
#outreachPage .ob-lb-o[aria-selected="true"] { font-weight: 700; color: var(--ob-navy); }
#outreachPage .ob-av { display: inline-grid; place-items: center; flex-shrink: 0; border-radius: var(--ob-r-full); background: var(--ob-navy); color: #fff; font-weight: 700; letter-spacing: 0; }
#outreachPage .ob-av-24 { width: 24px; height: 24px; font-size: 10px; }
#outreachPage .ob-av-32 { width: 32px; height: 32px; font-size: 11px; }
#outreachPage .ob-av-ext { background: var(--ob-surface); color: var(--ob-navy); box-shadow: inset 0 0 0 1px var(--ob-line); }
/* Next step / Notes: con valor, el texto (borde al pasar el mouse) + lápiz; editando, el campo, Save / Cancel y la ayuda. */
#outreachPage .ob-fv { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid transparent; border-radius: var(--ob-r-lg); background: none; color: var(--ob-ink); font: inherit; font-size: 14px; line-height: 20px; text-align: left; cursor: pointer; }
#outreachPage .ob-fv:hover { border-color: var(--ob-gray-dot); background: var(--ob-surface); }
#outreachPage .ob-fv svg { flex-shrink: 0; margin-top: 3px; color: var(--ob-muted); }
#outreachPage .ob-fv-t { min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
#outreachPage .ob-form { display: flex; flex-direction: column; gap: 8px; }
#outreachPage .ob-ta { height: auto; min-height: 72px; padding: 8px 12px; line-height: 20px; resize: vertical; }
#outreachPage .ob-form-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#outreachPage .ob-btn { height: 32px; padding: 0 12px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); background: var(--ob-surface); color: var(--ob-navy); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
#outreachPage .ob-btn:hover:not(:disabled) { border-color: var(--ob-gray-dot); }
#outreachPage .ob-btn-primary { border-color: var(--ob-navy); background: var(--ob-navy); color: #fff; font-weight: 700; }
#outreachPage .ob-btn-primary:hover:not(:disabled) { background: var(--ob-navy-900); }
#outreachPage .ob-btn:disabled { cursor: wait; opacity: .7; }
#outreachPage .ob-hint { font-size: 12px; color: var(--ob-muted); }
/* Estados de un editor (spec §9): "Saving…", "✓ Saved" (verde, 2 s) y el error en línea, en rojo. */
#outreachPage .ob-fstate { display: block; font-size: 12px; line-height: 16px; color: var(--ob-muted); }
#outreachPage .ob-fstate:empty { display: none; }
#outreachPage .ob-fstate-ok { color: var(--ob-green-text); font-weight: 600; }
#outreachPage .ob-err { color: var(--ob-red-text); font-weight: 600; }
#outreachPage .ob-fstate .ob-link { color: var(--ob-red-text); }
#outreachPage .ob-f .ob-banner { margin: 6px 0 0; }

/* LastMessage: la caja COMMENTS (DS §7.5), borde izquierdo de 3 px. La etiqueta en muted: `label` sobre #f9f9f9 da 4.498. */
#outreachPage .ob-lm { margin-top: 20px; padding: 12px 16px; border-left: 3px solid var(--ob-comments-bar); border-radius: var(--ob-r-lg); background: var(--ob-comments); }
#outreachPage .ob-lm-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
#outreachPage .ob-lm-t { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ob-muted); }
#outreachPage .ob-lm-who { font-size: 12px; color: var(--ob-muted); }
#outreachPage .ob-lm-empty { margin: 8px 0 0; font-size: 13px; color: var(--ob-muted); }
#outreachPage .ob-badge { display: inline-block; min-width: 16px; padding: 0 5px; border-radius: var(--ob-r-full); background: var(--ob-teal-600); color: #fff; font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: 0; text-align: center; }
#outreachPage .ob-badge-off { background: var(--ob-line); color: var(--ob-muted); }
#outreachPage .ob-msg-b { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ob-ink-body); }
#outreachPage .ob-msg-b p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
#outreachPage .ob-msg-b p + p { margin-top: 8px; }
#outreachPage .ob-sig { margin-top: 6px; }
#outreachPage .ob-sig summary { display: inline-flex; align-items: center; gap: 4px; margin: 0 -6px; padding: 4px 6px; list-style: none; border-radius: var(--ob-r-md); font-size: 12px; font-weight: 600; color: var(--ob-teal-700); cursor: pointer; }
#outreachPage .ob-sig summary::-webkit-details-marker { display: none; }
#outreachPage .ob-sig summary:hover { background: var(--ob-surface); }
#outreachPage .ob-sig summary svg { transition: transform .15s ease; }
#outreachPage .ob-sig[open] summary svg { transform: rotate(180deg); }
#outreachPage .ob-sig-t { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--ob-muted); white-space: pre-line; overflow-wrap: anywhere; }

/* Historial: tabs con contador (KOK-771) y note cards crema con el borde izquierdo de 4 px según el tipo. Solo lectura. */
#outreachPage .ob-hist { margin-top: 20px; }
#outreachPage .ob-htabs { display: flex; gap: 20px; border-bottom: 1px solid var(--ob-line); }
#outreachPage .ob-htab { display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; padding: 0 0 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ob-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
#outreachPage .ob-htab:hover { color: var(--ob-ink); }
#outreachPage .ob-htab[aria-selected="true"] { border-bottom-color: var(--ob-teal); color: var(--ob-teal-700); font-weight: 700; }
#outreachPage .ob-hlegend { margin: 8px 0 0; font-size: 12px; color: var(--ob-muted); }
#outreachPage .ob-hlist { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
#outreachPage .ob-note { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--ob-line); border-left: 4px solid var(--ob-line); border-radius: var(--ob-r-lg); background: var(--ob-note); }
#outreachPage .ob-note[data-tone="red"] { border-left-color: var(--ob-red-dot); }
#outreachPage .ob-note[data-tone="teal"] { border-left-color: var(--ob-teal); }
#outreachPage .ob-note[data-tone="green"] { border-left-color: var(--ob-green-dot); }
#outreachPage .ob-note-c { flex: 1; min-width: 0; }
#outreachPage .ob-note-h { margin: 0; font-size: 13px; line-height: 18px; }
#outreachPage .ob-note-h b { font-weight: 700; color: var(--ob-navy); }
#outreachPage .ob-note-at { font-size: 12px; color: var(--ob-muted); }
#outreachPage .ob-note-x { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--ob-ink-body); overflow-wrap: anywhere; }
#outreachPage .ob-note .ob-msg-b { margin-top: 2px; font-size: 13px; line-height: 18px; }
#outreachPage .ob-hempty { margin: 12px 0 0; font-size: 13px; color: var(--ob-muted); }
#outreachPage .ob-hmore { margin-top: 8px; font-size: 13px; }

/* ContactRows: el resto de la lista. Rojas y amarillas con su fondo claro; en hover, una barra de su color (cambiar el
   fondo bajaba el contraste del texto chico). Verdes y grises en blanco; en hover, page ("no owner" pasa a muted). */
#outreachPage .ob-crs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ob-line); }
#outreachPage .ob-cr { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: start; gap: 12px; width: 100%; padding: 12px 20px; border: 0; border-bottom: 1px solid var(--ob-line-soft); background: var(--ob-surface); color: var(--ob-ink); font: inherit; text-align: left; cursor: pointer; }
#outreachPage .ob-cr:hover { background: var(--ob-page); }
#outreachPage .ob-cr[data-color="red"] { background: var(--ob-red-bg); }
#outreachPage .ob-cr[data-color="yellow"] { background: var(--ob-yellow-bg); }
#outreachPage .ob-cr[data-color="red"]:hover { box-shadow: inset 3px 0 0 var(--ob-red-dot); }
#outreachPage .ob-cr[data-color="yellow"]:hover { box-shadow: inset 3px 0 0 var(--ob-yellow-dot); }
#outreachPage .ob-cr .ob-dot { width: 8px; height: 8px; margin: 7px 0 0; }
#outreachPage .ob-cr-main { min-width: 0; }
#outreachPage .ob-cr-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
#outreachPage .ob-cr-n { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ob-navy); }
#outreachPage .ob-cr-co { font-size: 13px; line-height: 18px; color: var(--ob-muted); }
#outreachPage .ob-cr-l2 { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ob-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#outreachPage .ob-cr-h { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ob-muted); white-space: nowrap; }
#outreachPage .ob-cr[data-color="red"] .ob-cr-h { color: var(--ob-red-text); }
#outreachPage .ob-cr[data-color="yellow"] .ob-cr-h { color: var(--ob-yellow-text); }
#outreachPage .ob-side { max-width: 180px; overflow: hidden; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ob-green-text); white-space: nowrap; text-overflow: ellipsis; }
/* Verde sin owner: "no owner" en `label` #6b7480, 13/400 (Carlos, 25-sep; VERIFY #4). En hover, muted (label sobre page: 4.37). */
#outreachPage .ob-side-none { color: var(--ob-label); font-weight: 400; }
#outreachPage .ob-cr:hover .ob-side-none { color: var(--ob-muted); }
#outreachPage .ob-tag-hot { padding: 1px 6px; border-radius: 5px; background: var(--ob-hot); color: #fff; font-size: 11px; line-height: 16px; font-weight: 700; }

/* Toast del panel (spec §9): abajo, arriba del pie; aria-live en la región. La barra "Answered outside…" es de celular. */
#outreachPage .ob-toasts { position: absolute; left: 16px; right: 16px; bottom: 56px; z-index: 3; display: flex; justify-content: center; pointer-events: none; }
#outreachPage .ob-toast { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 6px 8px 14px; border-radius: var(--ob-r-lg); background: var(--ob-navy); color: #fff; font-size: 13px; line-height: 18px; box-shadow: var(--ob-shadow-pop); pointer-events: auto; }
#outreachPage .ob-toast-m { min-width: 0; overflow-wrap: anywhere; }
#outreachPage .ob-toast-a { padding: 4px; border: 0; border-radius: var(--ob-r-md); background: none; color: #fff; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
#outreachPage .ob-toast-x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--ob-r-full); background: none; color: #fff; cursor: pointer; }
#outreachPage .ob-toast-x:hover, #outreachPage .ob-toast-a:hover { background: rgba(255, 255, 255, .12); }
#outreachPage .ob-aobar { display: none; }
#outreachPage [hidden] { display: none !important; }

/* ── Foco visible en todo lo interactivo (spec §4) ─────────────────────────────────────────────────────────────── */
#outreachPage button:focus-visible, #outreachPage select:focus-visible, #outreachPage input:focus-visible,
#outreachPage textarea:focus-visible, #outreachPage summary:focus-visible, #outreachPage [tabindex]:focus-visible { outline: none; box-shadow: var(--ob-focus); }
#outreachPage .ob-chip[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 .5px var(--ob-chip, var(--ob-navy)), var(--ob-focus); }
/* .ob-sec recorta con overflow: hidden (por las esquinas redondeadas): adentro, el anillo de las filas va INSET. */
#outreachPage .ob-sec .ob-mb:focus-visible, #outreachPage .ob-sec .ob-res:focus-visible { box-shadow: inset 0 0 0 2px #249083, inset 0 0 0 4px #fff; }
/* Lo mismo con las filas del panel, que ocupan todo el ancho de un cuerpo con scroll. */
#outreachPage .ob-sp-body .ob-cr:focus-visible { box-shadow: inset 0 0 0 2px #249083, inset 0 0 0 4px #fff; }
/* Los títulos del panel y de la ficha reciben el foco al abrir y al navegar (spec §9, M10) pero no se operan: sin anillo. */
#outreachPage .ob-sp-title:focus-visible, #outreachPage .ob-cc-name:focus-visible { box-shadow: none; }

/* ── Responsive (spec §8), por el ANCHO DISPONIBLE de #obMain ───────────────────────────────────────────────────
   Umbrales medidos con el arnés (sidebar real de 260 px): la fila de buzón de 4 columnas necesita 512 px fijos
   (190 + 130 + 90 + 3 gaps de 20 + padding 2×20 + 2 de borde) y se apila por debajo de 812 px, para que la columna de
   progreso nunca baje de 300 px; las KPI van en 4 columnas desde 900 px (una tarjeta chica de 213 px o más: "Wed Sep 30" a
   32 px entra en un renglón) y en 1 por debajo de 300 px. Equivalencias con el mockup (viewport, sidebar de 256 px):
   su "lg ≥1024" daba tarjetas de 164 px que partían la fecha. */
@container ob-main (min-width: 600px) {
  #outreachPage .ob-kpi-wait { padding: 20px; }
  #outreachPage .ob-kpi-scrim { padding: 8px 12px; }
  #outreachPage .ob-owe-who { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@container ob-main (min-width: 700px) {
  #outreachPage .ob-kpi { padding: 20px; }
  #outreachPage .ob-kpi-wait { padding: 24px; }
}
@container ob-main (min-width: 900px) {
  #outreachPage .ob-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #outreachPage .ob-kpi-wait { grid-row: span 2; }
}
@container ob-main (max-width: 299px) {
  #outreachPage .ob-kpis { grid-template-columns: minmax(0, 1fr); }
  #outreachPage .ob-kpi-wait { grid-column: auto; }
  /* los 3 stats de la fila de buzón, uno por renglón y con el número en línea: en 3 columnas de 46 px "bounced" no entra */
  #outreachPage .ob-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  #outreachPage .ob-kv b { display: inline; margin-right: 4px; }
}
/* Filas de buzón apiladas: ID + overdue, después el progreso, después las etiquetas en 2 columnas. */
@container ob-main (max-width: 811px) {
  #outreachPage .ob-mb { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id over" "prog prog" "labels labels"; gap: 12px; padding: 16px 20px; }
  #outreachPage .ob-mb-labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Contenedor muy angosto (p. ej. 481 px de viewport con el sidebar abierto deja 189 px): una sola columna, así el ID no
   queda en 95 px. */
@container ob-main (max-width: 239px) {
  #outreachPage .ob-mb { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "over" "prog" "labels"; }
  #outreachPage .ob-mb-over { text-align: left; }
  #outreachPage .ob-mb-over b { display: inline; margin-right: 4px; }
  #outreachPage .ob-mb-labels { grid-template-columns: minmax(0, 1fr); }
}
/* Header compacto: Viewing as + Refresh, y Search detrás de un ícono; resultados con el buzón debajo del nombre. */
@container ob-main (max-width: 519px) {
  #outreachPage .ob-ctrls { width: 100%; }
  #outreachPage .ob-search-tog { display: inline-flex; }
  #outreachPage .ob-search { display: none; order: 9; flex-basis: 100%; }
  #outreachPage .ob-search.ob-is-open { display: block; }
  #outreachPage .ob-search-in { width: 100%; }
  #outreachPage .ob-res { grid-template-columns: 10px minmax(0, 1fr) 56px; padding: 12px 16px; }
  #outreachPage .ob-res-mb { grid-column: 2; grid-row: 2; }
}
@container ob-main (max-width: 479px) {
  #outreachPage .ob-title { font-size: 20px; line-height: 28px; }
  #outreachPage .ob-kpi-val-date { font-size: 20px; line-height: 28px; }
  #outreachPage .ob-sec-h { padding: 14px 16px; }
  #outreachPage .ob-mb { padding: 16px; }
}
/* Celular (spec §10; desvío de los tamaños del DS): lo interactivo del tablero mide al menos 44 px para el dedo. T2 (VERIFY #3,
   spec §8 "<768: … Search goes behind an icon"): UNA fila [Viewing as (se estira)] [lupa] [Refresh solo con el ícono]; el
   buscador se abre abajo, a todo el ancho. Va por viewport a propósito: en esta página, < 768 el riel del sidebar está
   escondido (F38, abajo), así que el ancho de #obMain es el del viewport menos los 32 px de margen. */
@media (max-width: 767px) {
  #outreachPage .ob-wave { height: 44px; }
  #outreachPage .ob-refresh, #outreachPage .ob-search-tog, #outreachPage .ob-search-in { height: 44px; }
  #outreachPage .ob-search-tog { width: 44px; }
  #outreachPage .ob-viewas { height: auto; min-height: 52px; padding: 4px 12px; }
  #outreachPage .ob-viewas-sel { height: 44px; }
  #outreachPage .ob-owe-item { min-height: 44px; align-items: center; }
  #outreachPage .ob-help summary { min-height: 44px; }
  #outreachPage .ob-ctrls { width: 100%; flex-wrap: wrap; }
  #outreachPage .ob-viewas { flex: 1 1 auto; min-width: 0; }
  #outreachPage .ob-viewas-sel { flex: 1 1 auto; max-width: none; }
  #outreachPage .ob-search-tog { display: inline-flex; }
  #outreachPage .ob-search { display: none; order: 9; flex-basis: 100%; }
  #outreachPage .ob-search.ob-is-open { display: block; }
  #outreachPage .ob-search-in { width: 100%; }
  #outreachPage .ob-refresh { width: 44px; padding: 0; }
  #outreachPage .ob-refresh-t { display: none; }
}

/* ── Celular (< 768, Ruling F38): la barra superior de Outreach y el cajón del sidebar ─────────────────────────────
   GUARDA: toda regla que apunta FUERA de #outreachPage va acá adentro y lleva body:has(#outreachPage.active) (showPage
   pone y saca .active en cada .page): ninguna otra página cambia. Las que pisan reglas de styles.css y
   sidebar-workspace.css que usan !important, lo usan también (la especificidad, además, es mayor). El cajón es el
   #mainSidebar EXISTENTE (no una copia del menú: Regla 13): se muestra fijo a la izquierda, con .expanded mientras está
   abierto (lo pone y lo saca el módulo, sin toggleSidebar()), y sin su botón de colapsar (guardaría la preferencia). */
#outreachPage .ob-tb, #outreachPage .ob-navveil { display: none; }
@media (max-width: 767px) {
  body:has(#outreachPage.active) .mobile-top-bar { display: none !important; }
  body:has(#outreachPage.active) #mainSidebar.kok-workspace { display: none !important; }
  /* el tablero a todo el ancho; overflow-x: clip (no hidden) para que la barra sticky se pegue al viewport */
  body:has(#outreachPage.active) .main-content { margin-left: 0 !important; max-width: 100% !important; padding: 0 16px 24px !important; overflow-x: clip; }
  #outreachPage > .logo-header { display: none; }
  body:has(#outreachPage.active).ob-nav-open #mainSidebar.kok-workspace { display: flex !important; width: min(300px, 86vw) !important; z-index: 1001; box-shadow: 8px 0 24px rgba(19, 36, 52, .24); }
  body:has(#outreachPage.active).ob-nav-open #mainSidebar.kok-workspace .sidebar-toggle { display: none !important; }
  body.ob-nav-open #outreachPage .ob-navveil { display: block; position: fixed; inset: 0; z-index: 1000; background: var(--ob-overlay); }
  /* La barra: side, padding 12 × 16, sticky. Hamburguesa y avatar: caja visual de 36 / 32 px y blanco de toque de 44 (el
     margen negativo lo deja crecer adentro del padding sin agrandar la barra). "Claude KOK" (36 px en celular, a 18 px del
     borde) no puede tapar el avatar: se le reserva su lugar. */
  #outreachPage .ob-tb { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 8px; margin: 0 -16px 16px; padding: 12px 16px; background: linear-gradient(180deg, var(--ob-side-from) 0%, var(--ob-side-to) 100%); color: #fff; }
  body:has(#claudekok-btn) #outreachPage .ob-tb { padding-right: 66px; }
  #outreachPage .ob-tb-btn { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; margin: -4px; padding: 0; border: 0; border-radius: var(--ob-r-lg); background: none; color: #fff; cursor: pointer; }
  #outreachPage .ob-tb-box { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; }
  #outreachPage .ob-tb-menu:hover .ob-tb-box { background: var(--ob-side-hover); }
  #outreachPage .ob-tb-av:hover .ob-tb-ini { box-shadow: 0 0 0 2px var(--ob-side-hover); }
  #outreachPage .ob-tb-title { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #outreachPage .ob-tb-acct { position: relative; flex-shrink: 0; }
  #outreachPage .ob-tb-ini { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ob-teal-700); font-size: 12px; line-height: 16px; font-weight: 700; }
  #outreachPage .ob-tb-pop { position: absolute; right: -4px; top: calc(100% + 8px); z-index: 60; min-width: 200px; padding: 6px; border: 1px solid var(--ob-line-card); border-radius: var(--ob-r-lg); background: var(--ob-surface); color: var(--ob-ink); box-shadow: var(--ob-shadow-pop); }
  #outreachPage .ob-tb-who { margin: 0; padding: 8px 10px 6px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ob-navy); overflow-wrap: anywhere; }
  #outreachPage .ob-tb-out { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--ob-r-md); background: none; color: var(--ob-ink); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
  #outreachPage .ob-tb-out:hover { background: var(--ob-page); }
}

/* ── Panel en celular (spec §8): pantalla completa, "Back to list", grilla de 2 columnas con HOT en su fila, fecha corta
   en el StatusLine, la barra fija "Answered outside…" y todo lo que se toca de 44 px. ─────────────────────────────── */
@media (max-width: 767px) {
  #outreachPage .ob-sp { left: 0; bottom: auto; width: auto; max-width: none; height: 100vh; height: 100dvh; }
  #outreachPage .ob-sp.on { box-shadow: none; }
  #outreachPage .ob-sp-head { padding: 12px 16px 10px; }
  body:has(#claudekok-btn) #outreachPage .ob-sp-top { padding-right: 58px; }
  #outreachPage .ob-x { width: 44px; height: 44px; }
  #outreachPage .ob-ptab { height: 44px; }
  #outreachPage .ob-chips { flex-wrap: nowrap; margin: 10px -16px 0; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
  #outreachPage .ob-chips::-webkit-scrollbar { display: none; }
  #outreachPage .ob-chip { height: 44px; }
  #outreachPage .ob-nav { padding: 6px 16px; }
  #outreachPage .ob-back { visibility: visible; min-height: 44px; }
  #outreachPage .ob-nav-b { width: 44px; height: 44px; }
  #outreachPage .ob-cc { padding: 16px 16px 72px; }
  #outreachPage .ob-sl { font-size: 12px; line-height: 16px; }
  #outreachPage .ob-sl-md { display: none; }
  #outreachPage .ob-ch { height: 44px; }
  #outreachPage .ob-ao-nn { min-height: 44px; }
  #outreachPage .ob-ao-go { width: 100%; height: 44px; }
  #outreachPage .ob-in, #outreachPage .ob-ao-note { height: 44px; }
  #outreachPage .ob-ta { height: auto; min-height: 88px; }
  #outreachPage .ob-fg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #outreachPage .ob-f-hot { grid-column: 1 / -1; }
  #outreachPage .ob-f-owner { grid-column: 1 / -1; }   /* P2 (Carlos, 28-sep): el nombre entero, sin "Ana More…" */
  #outreachPage .ob-add, #outreachPage .ob-owner, #outreachPage .ob-fv { min-height: 44px; }
  #outreachPage .ob-lb { top: 48px; }
  #outreachPage .ob-lb-o { min-height: 44px; }
  #outreachPage .ob-sw { width: 44px; height: 44px; }
  #outreachPage .ob-btn { height: 44px; padding: 0 16px; }
  #outreachPage .ob-link { display: inline-flex; align-items: center; min-height: 44px; }
  #outreachPage .ob-htab { justify-content: center; min-width: 44px; min-height: 44px; padding: 0; }
  #outreachPage .ob-sig summary { min-height: 44px; }
  #outreachPage .ob-cr { min-height: 44px; padding: 12px 16px; }
  #outreachPage .ob-hmore { min-height: 44px; }
  #outreachPage .ob-aobar { position: absolute; left: 16px; right: 16px; bottom: 56px; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: 44px; border: 0; border-radius: var(--ob-r-lg); background: var(--ob-navy); color: #fff; font: inherit; font-size: 14px; font-weight: 700; box-shadow: var(--ob-shadow-pop); cursor: pointer; }
  #outreachPage .ob-toast-a { min-height: 44px; }
  #outreachPage .ob-toast-x { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #outreachPage .ob-sp, #outreachPage .ob-scrim, #outreachPage .ob-cc, #outreachPage .ob-help summary svg, #outreachPage .ob-sig summary svg,
  #outreachPage .ob-sw-tr, #outreachPage .ob-sw-k { transition: none; }
  #outreachPage .ob-refresh.ob-is-loading svg, #outreachPage .ob-kpi-skel .ob-skel, #outreachPage .ob-mb-skel .ob-skel,
  #outreachPage .ob-ao-go.ob-is-busy::after { animation: none; }
}