/* 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). El drawer del
   final es el de antes, con los colores del DS; T2 lo reemplaza por el panel de 600 px. */
#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;
  /* §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;
  /* §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-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 drawer y el scrim (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; }
/* Pie del drawer: su propia franja, con márgenes; antes quedaba pegado al borde de abajo (bug de la pasada visual, punto 9). */
#outreachPage .ob-dfoot { flex-shrink: 0; margin: 0; padding: 10px 20px 12px; border-top: 1px solid var(--ob-line); font-size: 12px; color: var(--ob-muted); background: var(--ob-surface); }
#outreachPage .ob-empty { color: var(--ob-muted); padding: 24px 8px; text-align: center; }

/* ── drawer (el de antes; T2 lo reemplaza por el panel de 600 px) ───────────────────────────────────────────────── */
#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-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(700px, 100vw); background: var(--ob-surface); border-left: 1px solid var(--ob-line); transform: translateX(102%); transition: transform .22s ease; display: flex; flex-direction: column; z-index: 901; }
#outreachPage .ob-drawer.on { transform: none; box-shadow: var(--ob-shadow-panel); }
#outreachPage .ob-dh { flex-shrink: 0; padding: 16px 20px 12px; border-bottom: 1px solid var(--ob-line); display: flex; flex-direction: column; gap: 12px; }
#outreachPage .ob-dh-top { display: flex; align-items: center; gap: 12px; }
#outreachPage .ob-dh-top small { color: var(--ob-muted); }
#outreachPage #obDrawerTitle b { font-size: 20px; color: var(--ob-navy); }
#outreachPage #obDrawerTitle small { display: block; margin-top: 2px; }
#outreachPage .ob-dover { color: var(--ob-red-text); font-size: 15px; font-weight: 700; margin-left: 6px; white-space: nowrap; }
/* El botón "Claude KOK" (kokbot-module.js: fixed, top 12px, right 18px, z-index 9000) queda arriba del drawer y tapaba la ×:
   si está en la página, el encabezado le deja lugar (punto 10). */
body:has(#claudekok-btn) #outreachPage .ob-dh-top { padding-right: 170px; }
#outreachPage .ob-x { margin-left: auto; border: 1px solid var(--ob-line); background: var(--ob-surface); border-radius: var(--ob-r-lg); width: 34px; height: 34px; font-size: 18px; cursor: pointer; }
#outreachPage .ob-tabs, #outreachPage .ob-chips { display: flex; gap: 6px; flex-wrap: wrap; }
#outreachPage .ob-tabs button { border: 1px solid var(--ob-line); background: var(--ob-page); font: inherit; font-size: 12.5px; border-radius: var(--ob-r-lg); padding: 5px 10px; cursor: pointer; }
#outreachPage .ob-tabs button[aria-pressed="true"] { background: var(--ob-navy); border-color: var(--ob-navy); color: #fff; }
#outreachPage .ob-chip { border: 1px solid var(--ob-line); background: var(--ob-surface); font: inherit; font-size: 12.5px; border-radius: var(--ob-r-full); padding: 4px 10px; cursor: pointer; font-variant-numeric: tabular-nums; }
#outreachPage .ob-chip[aria-pressed="true"] { border-color: var(--ob-chip, var(--ob-navy)); box-shadow: inset 0 0 0 1px var(--ob-chip, var(--ob-navy)); }
#outreachPage .ob-chip-red, #outreachPage .ob-chip-hot { --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-needs { --ob-chip: var(--ob-red-dot); }
#outreachPage .ob-chip-all { --ob-chip: var(--ob-navy); }
#outreachPage .ob-chip-red::before, #outreachPage .ob-chip-yellow::before, #outreachPage .ob-chip-green::before,
#outreachPage .ob-chip-gray::before, #outreachPage .ob-chip-needs::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ob-chip); margin-right: 6px; }
#outreachPage .ob-chip-needs::before { background: linear-gradient(90deg, var(--ob-red-dot) 50%, var(--ob-yellow-dot) 50%); }
#outreachPage .ob-list { overflow: auto; padding: 6px 12px 24px; flex: 1; min-height: 0; }
#outreachPage .ob-row { border-bottom: 1px solid var(--ob-line); }
/* Filas rojas y amarillas con fondo (punto 3); el detalle abierto queda blanco para leerlo. */
#outreachPage .ob-row[data-color="red"] { background: var(--ob-red-bg); }
#outreachPage .ob-row[data-color="yellow"] { background: var(--ob-yellow-bg); }
#outreachPage .ob-row[data-color="red"] .ob-detail, #outreachPage .ob-row[data-color="yellow"] .ob-detail { background: var(--ob-surface); }
#outreachPage .ob-row-h { width: 100%; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 8px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--ob-r-lg); }
#outreachPage .ob-row-h:hover { background: rgba(19, 36, 52, .05); }
#outreachPage .ob-rn { font-weight: 600; } #outreachPage .ob-rc, #outreachPage .ob-rs { color: var(--ob-muted); font-size: 12.5px; }
#outreachPage .ob-row[data-color="red"] .ob-rn { font-size: 16px; font-weight: 700; }
/* muted y no label: sobre el rosa / ámbar de la fila, label da 4.13 (falla) y muted 4.98 / 5.26. */
#outreachPage .ob-rs { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#outreachPage .ob-tag { font-size: 11px; border: 1px solid var(--ob-line); border-radius: 5px; padding: 1px 6px; color: var(--ob-muted); margin-left: 6px; }
#outreachPage .ob-tag-hot { color: #fff; background: var(--ob-hot); border-color: var(--ob-hot); font-weight: 700; }
/* Cuánto espera: en grande y en negrita, del color de la fila (decisión a: rojo solo en las rojas, ámbar en las amarillas). */
#outreachPage .ob-wait { font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ob-muted); }
#outreachPage .ob-row[data-color="red"] .ob-wait { color: var(--ob-red-text); }
#outreachPage .ob-row[data-color="yellow"] .ob-wait { color: var(--ob-yellow-text); }
#outreachPage .ob-side { font-size: 12.5px; font-weight: 600; color: var(--ob-green-text); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
/* Verde sin owner: "no owner" en gris (Carlos, 25-sep). */
#outreachPage .ob-side-muted { color: var(--ob-muted); font-weight: 500; }
#outreachPage .ob-detail { padding: 4px 8px 14px 32px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
#outreachPage .ob-why { align-self: stretch; background: var(--ob-page); border-left: 3px solid var(--ob-gray-dot); padding: 8px 10px; border-radius: 0 var(--ob-r-md) var(--ob-r-md) 0; font-size: 12.5px; }
#outreachPage .ob-row[data-color="red"] .ob-why { border-left-color: var(--ob-red-dot); }
#outreachPage .ob-row[data-color="yellow"] .ob-why { border-left-color: var(--ob-yellow-dot); }
#outreachPage .ob-row[data-color="green"] .ob-why { border-left-color: var(--ob-green-dot); }
#outreachPage .ob-msg { align-self: stretch; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); padding: 10px 12px; }
#outreachPage .ob-msg h4 { margin: 0 0 4px; font-size: 12px; color: var(--ob-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
#outreachPage .ob-msg p, #outreachPage .ob-notes { margin: 0; white-space: pre-line; max-width: 70ch; }
#outreachPage .ob-meta { font-size: 12px; color: var(--ob-muted); }
#outreachPage .ob-mark { font-size: 12.5px; background: var(--ob-green-bg); border-radius: var(--ob-r-md); padding: 6px 10px; }
#outreachPage .ob-mark-hot { background: var(--ob-red-bg); color: var(--ob-red-text); font-weight: 600; }
#outreachPage .ob-btn { border: 1px solid var(--ob-line); background: var(--ob-surface); font: inherit; font-size: 12.5px; border-radius: var(--ob-r-lg); padding: 5px 10px; cursor: pointer; }
#outreachPage .ob-btn-primary { background: var(--ob-navy); border-color: var(--ob-navy); color: #fff; }
#outreachPage .ob-mark .ob-btn, #outreachPage .ob-link { border: 0; background: none; color: var(--ob-teal-700); text-decoration: underline; padding: 0 4px; cursor: pointer; font: inherit; font-size: 12.5px; }
#outreachPage .ob-form { align-self: stretch; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); padding: 10px 12px; }
#outreachPage .ob-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ob-muted); }
#outreachPage .ob-form input, #outreachPage .ob-form select, #outreachPage .ob-form textarea { font: inherit; font-size: 13px; color: var(--ob-ink); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); padding: 6px 8px; }
#outreachPage .ob-form-btns { display: flex; gap: 8px; align-items: center; }
#outreachPage .ob-fields { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 12.5px; }
#outreachPage .ob-fields dt { color: var(--ob-muted); }
#outreachPage .ob-fields dd { margin: 0; }

/* ── 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 1px 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; }

/* ── 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. */
@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; }
}
@media (prefers-reduced-motion: reduce) {
  #outreachPage .ob-drawer, #outreachPage .ob-scrim, #outreachPage .ob-help summary svg { transition: none; }
  #outreachPage .ob-refresh.ob-is-loading svg, #outreachPage .ob-kpi-skel .ob-skel, #outreachPage .ob-mb-skel .ob-skel { animation: none; }
}