/* ===========================================================================
 * bbui.css — LOS DEFAULTS DEL CATÁLOGO, definidos UNA vez.
 * ===========================================================================
 * Miguel escogió en `/ui` el 24 sep 2026. Este archivo es la decisión hecha
 * código: cada elemento se define aquí una sola vez, y **los nombres viejos
 * apuntan a esa definición** en vez de tener la suya.
 *
 * POR QUÉ ASÍ Y NO RENOMBRANDO 50 SITIOS
 *
 * La lista de migración tiene más de cincuenta entradas repartidas en quince
 * archivos y en un `index.html` de 70k líneas. Cambiar `class="bp-btn"` por
 * `class="tb-btn"` en cada llamada es, además de un día entero, el tipo de
 * cambio donde se pierde uno: basta una plantilla que arma la clase con una
 * variable para que un botón se quede sin estilo y nadie lo note hasta que
 * Omaika abra esa pantalla.
 *
 * Con el alias, el HTML no se toca: `.bp-btn` y `.rv-btn` **son** el botón de
 * la casa porque están en el mismo selector que lo define. Un renombrado
 * posterior queda opcional y se puede hacer archivo por archivo sin prisa.
 *
 * LAS DOS CONDICIONES PARA QUE EL ALIAS FUNCIONE
 *
 * 1. Este archivo se carga **el último**. Los selectores son de una sola clase
 *    igual que los originales, así que empatan en especificidad y gana el
 *    orden. Si se carga antes, no hace nada.
 * 2. Cada regla **declara todo lo que le importa**, incluso para volverlo a su
 *    valor inicial. La regla vieja sigue existiendo en su archivo: si aquí no
 *    se dice `border: 0`, el `border: 1px solid` de `.bp-btn` sobrevive y el
 *    botón sale con doble contorno (la sombra nueva más el borde viejo).
 *
 * Lo que NO está aquí, a propósito: la tabla y la tarjeta de KPI. Las dos
 * eligieron un default cuya ESTRUCTURA INTERNA es distinta a la de sus
 * hermanas (`ev-table` pinta filas-tarjeta, `pm-tile` tiene tres capas fijas),
 * y un alias sólo puede mover estilos, no reordenar nodos. Esas dos van con
 * cambio de markup, una página a la vez.
 * ------------------------------------------------------------------------- */

/* --- BOTÓN → el de Traditional Brilliance (`tb-btn`) ---------------------- */
.tb-btn,
.bb-btn, .bp-btn, .rv-btn, .lp-btn, .spy-btn, .besc-btn, .ev-btn, .bud-btn,
.md-btn, .sm-btn, .lpb-btn {
  appearance: none; cursor: pointer;
  padding: 7px 13px; border: 0; border-radius: var(--bb-r-control, 8px);
  background: var(--bb-surface, #fff); color: var(--bb-ink, #1A1A1A);
  box-shadow: var(--bb-sh-btn, 0 0 0 1px #D4CFC4);
  font: 500 12px/1 'Outfit', system-ui, sans-serif;
  display: inline-flex; align-items: center; gap: 6px;
  text-align: center; text-decoration: none;
  transition: background-color var(--bb-t-fast, .12s) ease-out,
              transform var(--bb-t-fast, .12s) var(--bb-ease-out, ease-out);
}
.tb-btn:hover, .bb-btn:hover, .bp-btn:hover, .rv-btn:hover, .lp-btn:hover,
.spy-btn:hover, .besc-btn:hover, .ev-btn:hover, .bud-btn:hover, .md-btn:hover,
.sm-btn:hover, .lpb-btn:hover { background: var(--bb-hover, #F4F2EC); }
/* El press del layer de movimiento, de serie: un botón que no contesta el clic
   se siente lento aunque el dato llegue en 40ms. */
.tb-btn:active, .bb-btn:active, .bp-btn:active, .rv-btn:active, .lp-btn:active,
.spy-btn:active, .besc-btn:active, .ev-btn:active, .bud-btn:active,
.md-btn:active, .sm-btn:active, .lpb-btn:active { transform: scale(.985); }
.tb-btn svg, .bb-btn svg, .bp-btn svg, .rv-btn svg, .lp-btn svg, .spy-btn svg,
.besc-btn svg, .ev-btn svg, .bud-btn svg, .md-btn svg, .sm-btn svg, .lpb-btn svg {
  /* `max-width:100%` de responsive.css resuelve a 0 para un icono dentro de un
     flex — dos veces ha dejado botones sin icono. El ancho va fijo. */
  width: 14px; height: 14px; flex: none; max-width: none;
}
/* Las variantes que ya existían se conservan: son distinciones REALES
   (primaria = la acción de la pantalla, danger = borra algo). */
.bb-btn.is-primary, .rv-btn-primary, .lp-btn-primary, .spy-btn-primary {
  background: var(--bb-accent, #0D2A5E); color: #fff; box-shadow: none;
}
.bb-btn.is-primary:hover, .rv-btn-primary:hover, .lp-btn-primary:hover,
.spy-btn-primary:hover { background: var(--bb-accent-ink, #11326D); }
.lp-btn-danger { color: var(--bb-red, #B23B3B); }
.lp-btn-danger:hover { background: var(--bb-red-tint, #F9EBEB); }
.bp-btn-sm, .ev-btn-sm, .lp-btn-sm { padding: 5px 10px; font-size: 11.5px; }
.bp-btn-ghost { background: transparent; box-shadow: none; }
.bp-btn-ghost:hover { background: var(--bb-hover, #F4F2EC); }

/* --- CHIP → el de By Program (`bp-chip`) ---------------------------------
 * 6px de radio, nunca pastilla: es la regla que ya está en `../DESIGN.md`. */
.bp-chip,
.bb-chip, .rv-chip, .besc-chip, .cx-chip, .tb-chip, .ev-chip, .lp-chip,
.spy-chip, .bud-chip, .init-chip, .cmp-chip, .md-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border: 0; border-radius: var(--bb-r-chip, 6px);
  background: var(--bb-field, #F1EFE8); color: var(--bb-ink-2, #5A564F);
  font: 600 11px/1.35 'Outfit', system-ui, sans-serif;
  white-space: nowrap; vertical-align: middle;
}
/* Los tonos: un chip que dice bueno/malo lo dice con el mismo par en todas
   las páginas. Los nombres viejos de cada archivo entran aquí. */
.bp-chip.bp-pos, .bb-chip.is-good, .rv-chip.rv-pos, .besc-chip.on, .tb-chip.is-on {
  color: var(--bb-green, #2E7D52); background: var(--bb-green-tint, #E9F3ED);
}
.bp-chip.bp-neg, .bb-chip.is-bad, .rv-chip.rv-neg, .besc-chip.mal, .cx-chip.cx-crit {
  color: var(--bb-red, #B23B3B); background: var(--bb-red-tint, #F9EBEB);
}
.cx-chip.cx-med { color: var(--bb-orange, #C77D1B); background: var(--bb-orange-tint, #FBF2E3); }

/* --- ENCABEZADO DE SECCIÓN → el de Traditional (`tb-sec-head`) ------------ */
.tb-sec-head,
.besc-sec-h, .rv-sec-h, .md-sec-h, .dmp-h2, .bp-card-h {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 15px 20px 13px;
  border-bottom: 1px solid var(--bb-line, #E6E1D8);
}
.tb-sec-head h3, .besc-sec-h .t, .rv-sec-h b, .md-sec-h b, .dmp-h2, .bp-card-h .bp-title {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font: 600 15px/1.25 'Outfit', system-ui, sans-serif;
  letter-spacing: -.01em; color: var(--bb-ink, #1A1A1A);
}
/* La nota a la derecha del título: el chip de alcance que la doctrina exige
   (nada de prosa explicativa; el alcance va en una nota compacta). */
.tb-sec-head .tb-hint, .besc-sec-h .n, .bp-card-h .bp-sub {
  font: 400 11.5px/1.4 'Outfit', system-ui, sans-serif;
  color: var(--bb-ink-3, #8A8578);
}

/* --- ESTADO VACÍO → el de Traditional (`tb-empty`) ------------------------
 * El default que escogió es el que DICE EL NÚMERO: "se necesitan 2 semanas, la
 * ventana trae 1". Un estado vacío es un diagnóstico, no una disculpa. */
.tb-empty, .tb-err,
.empty-state, .trend-empty, .bp-none, .rv-tr-none, .besc-vacio, .cx-empty,
.ev-empty, .lp-empty, .spy-empty, .init-empty, .cmp-empty {
  padding: 34px 22px; text-align: center;
  font: 400 13px/1.6 'Outfit', system-ui, sans-serif; color: var(--bb-ink-2, #5A564F);
}
.tb-empty b, .tb-err b, .empty-state b, .trend-empty b, .bp-none b, .rv-tr-none b,
.besc-vacio b, .cx-empty b, .ev-empty b, .lp-empty b, .spy-empty b,
.init-empty b, .cmp-empty b { color: var(--bb-ink, #1A1A1A); }

/* ===========================================================================
 * TARJETA DE KPI → la de By PM (`pm-tile`).   [paso 3, 24 sep 2026]
 * ===========================================================================
 * Esta familia es la que más pantallas toca: nueve diseños en ocho páginas
 * para decir lo mismo — etiqueta, número, sub-línea.
 *
 * POR QUÉ TAMBIÉN SE PUEDE HACER CON ALIAS, DESPUÉS DE HABER DICHO QUE NO
 *
 * En la primera pasada quedó fuera con el argumento de que "un alias mueve
 * estilos, no reordena nodos". Es cierto a medias: `flex` SÍ reordena, y las
 * dos variantes que traen el valor antes que la etiqueta (`ev-kpi`,
 * `ia-stat-pill`) se normalizan con `order` sin tocar el HTML. Lo que un alias
 * no puede es INVENTAR una capa que no existe — y ninguna la necesita, porque
 * la sub-línea es opcional en el original también.
 *
 * Así que van las nueve por alias. Lo único que se pierde es el renombrado
 * cosmético de las clases, que se puede hacer después, archivo por archivo, sin
 * prisa y sin riesgo.
 *
 * `pm-tile` es una CELDA de una tira (`pm-strip`: rejilla con juntas de 1px y
 * las esquinas redondeadas en el contenedor, no en la celda). Por eso se
 * aliasan los DOS niveles: si sólo se aliara la celda, nueve tarjetas sueltas
 * con `border-top` y sin contenedor se verían peor que antes.
 * ------------------------------------------------------------------------- */

/* --- el contenedor: la tira ---------------------------------------------- */
.pm-strip,
.spm-kpis, .tb-kpis, .besc-kpis, .ev-kpis, .initiative-card-kpis, .ia-stats-bar,
.bud-summary, .tracker-metrics, .bbh-kpis, .cmp-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px;
  margin: 0 0 14px;
  border: 1px solid var(--bb-line, #E6E1D8);
  border-radius: var(--bb-r-card, 10px);
  background: var(--bb-line, #E6E1D8);   /* la junta de 1px ES este fondo */
  overflow: hidden;
}

/* --- la celda ------------------------------------------------------------- */
.pm-tile,
.spm-kpi, .tb-kpi, .besc-kpi, .ev-kpi, .init-kpi, .ia-stat-pill, .bud-stat,
.tracker-metric, .bbh-kpi {
  display: flex; flex-direction: column;
  padding: 11px 13px 10px;
  background: var(--bb-surface, #fff);
  border: 0; border-top: 3px solid transparent; border-radius: 0;
  min-width: 0;
}
.pm-tile[title], .spm-kpi[title], .tb-kpi[title], .besc-kpi[title],
.init-kpi[title], .ia-stat-pill[title], .bud-stat[title], .bbh-kpi[title] { cursor: help; }

/* El acento: SÓLO el que es el titular lo lleva. Rayar las nueve hace que
   ninguna sea el titular — la regla ya estaba escrita en bypm.css. */
.pm-tile-big, .tb-kpi.acc-navy, .bud-stat.navy { border-top-color: var(--bb-accent, #0D2A5E); }
.tb-kpi.acc-green, .bud-stat.green, .ia-stat-pill.green { border-top-color: var(--bb-green, #2E7D52); }
.bud-stat.red, .ia-stat-pill.red { border-top-color: var(--bb-red, #B23B3B); }
.bud-stat.amber, .tb-kpi.acc-amber { border-top-color: var(--bb-orange, #C77D1B); }

/* --- la ETIQUETA ---------------------------------------------------------- */
.pm-tk,
.spm-kpi-k, .tb-kpi-label, .besc-kpi .k, .ev-kpi-k, .init-kpi .k-label,
.ia-stat-pill .pill-label, .bud-stat-label, .tracker-metric .label, .bbh-kpi .k {
  order: 1;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--bb-ink-3, #8A8578);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- el NÚMERO ------------------------------------------------------------ */
.pm-tv,
.spm-kpi-v, .tb-kpi-val, .besc-kpi .v, .ev-kpi-v, .init-kpi .k-val,
.ia-stat-pill .pill-val, .bud-stat-value, .tracker-metric .value, .bbh-kpi .v {
  order: 2;
  margin-top: 4px;
  font-family: var(--bb-mono, 'Outfit', system-ui, sans-serif); font-variant-numeric: tabular-nums;
  font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15;
  color: var(--bb-ink, #1A1A1A);
}
/* El tono de un número lo decide quien lo escribe; aquí sólo se respeta. */
.tracker-metric .value.positive, .bud-stat .positive { color: var(--bb-green, #2E7D52); }
.tracker-metric .value.negative, .bud-stat .negative { color: var(--bb-red, #B23B3B); }
.ia-stat-pill .pill-val.red { color: var(--bb-red, #B23B3B); }
/* Un valor que no es un número (un nombre de canal) no va en mono ni pide
   `tabular-nums`: alinear letras por ancho de dígito las separa raro. */
.besc-kpi .v.na, .is-kpi-val-sm { font-family: inherit; font-size: 15px; font-weight: 600; }

/* --- la SUB-LÍNEA --------------------------------------------------------- */
.pm-ts,
.tb-kpi-foot, .besc-kpi .s, .ev-kpi-sub, .bud-stat-sub, .spm-kpi .spm-dev {
  order: 3;
  margin-top: 3px; min-height: 15px;
  font-size: 11px; color: var(--bb-ink-3, #8A8578);
  font-variant-numeric: tabular-nums;
}

/* LOS RESTOS DE LA REGLA VIEJA. Es la condición 2 del archivo, aplicada: si
   aquí no se apaga, sobrevive.
   · `.init-kpi.k-plat` es 0,2,0 y le gana a `.init-kpi` — el alias tiene que
     alcanzar la misma especificidad o la tarjeta se queda con su fondo tinte,
     su texto centrado y su borde.
   · `ev-kpi` y `bud-stat` pintan su franja de acento con un `::before`, no con
     `border-top`. Poner el borde en transparente no la apaga: hay que apagar
     el pseudo-elemento, o TODAS las tarjetas salen con franja y ninguna es el
     titular. */
.init-kpi, .init-kpi.k-plat, .init-kpi.k-crm {
  text-align: left; border: 0; border-top: 3px solid transparent; border-radius: 0;
  background: var(--bb-surface, #fff);
}
.ev-kpi::before, .bud-stat::before { display: none; }
/* La franja se vuelve a encender SÓLO donde significa algo. */
.ev-kpi.is-lead, .bud-stat.navy { border-top-color: var(--bb-accent, #0D2A5E); }

/* LAS DOS QUE VIENEN AL REVÉS. `ev-kpi` pinta el valor antes que la etiqueta y
   `ia-stat-pill` los pone en línea. `order` los normaliza sin tocar el HTML —
   que es justo lo que en la primera pasada se dio por imposible. */
.ev-kpi, .ia-stat-pill { flex-direction: column; }

/* ===========================================================================
 * TABLA DE DATOS → la de Eventos (`ev-table`).   [paso 4, 24 sep 2026]
 * ===========================================================================
 * Siete tablas, y sólo una estaba compartida entre dos páginas. El default es
 * la de Eventos: encabezado en versalitas sobre la banda tibia, hairline entre
 * filas, la última sin línea, hover de fila, y la columna numérica alineada a
 * la derecha con `tabular-nums`.
 *
 * LA EXCEPCIÓN NOMBRADA: `.bb-rt` (By Program y Marketing Dashboard). Su
 * densidad —6×10px contra 9×11— **es el punto**, y está escrito en su propio
 * archivo: *"This table is allowed to be dense. It is a spreadsheet he already
 * reads every week, and familiarity is the entire point"*. Así que hereda el
 * CROMO (encabezado, hairlines, hover, números a la derecha) y conserva su
 * espaciado. Igual que el popover con `.bbh-page`: un default con una
 * excepción escrita sigue siendo un sistema; uno que se incumple en silencio,
 * no.
 * ------------------------------------------------------------------------- */

.ev-table, .tb-tbl, .cpl-table, .bulk-table, .lpb-table, .hm-table, .bb-rt {
  width: 100%;
  border-collapse: collapse;
  background: var(--bb-surface, #fff);
  border-radius: var(--bb-r-card, 10px);
  box-shadow: var(--bb-sh-hairline, 0 0 0 1px #E6E1D8);
  overflow: hidden;
}
.ev-table th, .tb-tbl th, .cpl-table th, .bulk-table thead th, .lpb-table th, .hm-table th, .bb-rt th {
  text-align: left;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--bb-ink-3, #8A8578);
  background: var(--bb-stripe-bg, #F7F5F0);
  border-bottom: 1px solid var(--bb-line, #E6E1D8);
  white-space: nowrap;
}
.ev-table td, .tb-tbl td, .cpl-table td, .bulk-table td, .lpb-table td, .hm-table td, .bb-rt td {
  font-size: 12.5px; color: var(--bb-ink, #1A1A1A);
  border-bottom: 1px solid var(--bb-line, #E6E1D8);
  white-space: nowrap;
}
.ev-table th, .ev-table td, .tb-tbl th, .tb-tbl td, .cpl-table th, .cpl-table td,
.bulk-table thead th, .bulk-table td, .lpb-table th, .lpb-table td, .hm-table th, .hm-table td {
  padding: 9px 11px;
}
.ev-table tr:last-child td, .tb-tbl tr:last-child td, .cpl-table tr:last-child td,
.bulk-table tr:last-child td, .lpb-table tr:last-child td, .bb-rt tr:last-child td { border-bottom: 0; }
.ev-table tbody tr:hover td, .tb-tbl tbody tr:hover td, .cpl-table tbody tr:hover td,
.bulk-table tbody tr:hover td, .lpb-table tbody tr:hover td, .bb-rt tbody tr:hover td {
  background: var(--bb-hover, #F4F2EC);
}
/* Un número se alinea a la derecha y lleva `tabular-nums`, o la columna no se
   puede comparar de un vistazo — que es para lo que existe una columna. */
.ev-table td.num, .tb-tbl td.num, .cpl-table td.num, .bulk-table td.num,
.lpb-table td.num, .hm-table td.num, .bb-rt td.num, td.mono {
  font-family: var(--bb-mono, 'Outfit', system-ui, sans-serif);
  font-variant-numeric: tabular-nums; text-align: right;
}
/* La densa conserva su espaciado. Se declara DESPUÉS para ganarle al bloque
   de arriba sin subir especificidad. */
.bb-rt th, .bb-rt td { padding: 6px 10px; }

/* --- TARJETA DE FILA → la de Iniciativas, SIN franja lateral --------------
 * Miguel, 30 sep 2026, sobre la tarjeta de Iniciativas: *"that line on the side
 * that gives off AI slop design"*. La franja de 3–5px a la izquierda estaba en
 * nueve tarjetas-fila distintas, cada una con su grosor y su color.
 *
 * El default: hairline de 1px en los cuatro lados, radio de tarjeta, y el
 * ESTADO se dice con algo que se lee (chip, punto, tinte, texto) — nunca con
 * el borde. Se revisó cada una antes de quitarle la franja: todas YA tenían
 * esa segunda señal, así que la franja era redundante en las nueve:
 *   cx-find     → chip `.cx-find-sev` + fondo teñido
 *   ci-flag     → chip `.ci-flag-sev`
 *   pm-finding  → punto `.pm-fsev`
 *   pm-cat      → contadores `.pm-stat` R/A/G
 *   is-reason-row → punto `.is-reason-dot`
 *   bb-inv-row  → "venció" en rojo dentro de la fila
 *   besc-com    → fondo teñido (crit rojo, lead verde)
 *   lp-finding  → el número `.lp-finding-n` ya va en `--c`
 *   init-group-head / initiative-card-header → punto `.init-group-dot`
 *
 * ESPECIFICIDAD: `lpages.css`, `compliance.css` y `besc.css` se cargan DESPUÉS
 * de este archivo, y las variantes de severidad son compuestas (0,2,0). Un alias
 * de una clase perdería en silencio. El prefijo `html` suma (0,0,1): gana el
 * empate sin `!important`. Sólo se toca borde y radio — el relleno de cada una
 * sigue siendo el suyo (un alias que mueve el padding rompe filas que no vi).
 * `npm run ui:test` mide que ninguna variante de la familia `row` tenga un
 * borde izquierdo más grueso que el de arriba. */
html .cx-find, html .cx-find[data-sev],
html .ci-flag, html .ci-flag.sev-high, html .ci-flag.sev-medium, html .ci-flag.sev-low,
html .pm-finding, html .pm-finding.red, html .pm-finding.amber, html .pm-finding.green,
html .pm-cat,
html .is-reason-row,
html .bb-inv-row, html .bb-inv-row.vencida,
html .besc-com, html .besc-com.crit, html .besc-com.lead,
html .lp-finding,
html .init-group-head {
  border: 1px solid var(--bb-line, #E6E1D8);
  border-radius: var(--bb-r-card, 10px);
}
html .initiative-card-header { border-left: 0; }