/* Píldora de estado — semana 6 de la revisión de UX (2026-09-04).
 *
 * La semana 5 la definió DENTRO de `data-table.css`, que es su casa natural
 * mientras la única píldora del panel viva en una celda. Al llegar la tarjeta
 * de estado de integración —que no tiene tabla— quedaban dos caminos: cargar
 * la hoja de la tabla en una pantalla sin tabla, o escribir una segunda
 * píldora que se parezca. Las dos son la misma trampa (L218): el mismo hecho
 * de negocio, «esto está bien / a medias / mal», dicho en dos lugares que
 * envejecen distinto. Vive acá, y `data-table.css` ya no la define.
 *
 * ── El color sale de tokens.css ──────────────────────────────────────────
 * Cada estado es un PAR (fondo tenue + texto) declarado en `--cnb-pill-*`.
 * La versión anterior tomaba el fondo del `-soft` y el texto del acento
 * PLENO, y eso no pasa contraste: medido, `good` daba 2.24:1 y `warn`
 * 1.93:1 sobre su propio fondo, contra los 4.5:1 que pide un texto chico.
 * Los seis pares de ahora van de 4.51:1 a 5.49:1.
 *
 * ── La variante oscura ───────────────────────────────────────────────────
 * `.adm-pill--dark` es para el super-admin, que es slate fijo y no se da
 * vuelta por tema (L8c: esas pantallas tampoco traducen). No se deriva de la
 * clara bajando el alfa: se eligen pares propios, medidos entre 5.28:1 y
 * 6.97:1 sobre su fondo.
 *
 * ── Qué NO es ────────────────────────────────────────────────────────────
 * `neutral` no es «apagado»: es «esta fila no tiene salud que informar» (un
 * tipo, una etiqueta). Verde/ámbar/rojo hablan de la salud; azul informa; la
 * marca es identidad. Una píldora de marca no dice que algo esté bien.
 */

.adm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--cnb-fs-eyebrow, 12px); font-weight: 600;
  padding: 2px 10px; border-radius: 999px; line-height: 1.5; white-space: nowrap;
  background: var(--cnb-pill-neutral-bg, #F3F4F6); color: var(--cnb-pill-neutral-fg, #4B5563);
}
/* El punto toma el color del texto: un solo par por estado, sin un tercer valor. */
.adm-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }

.adm-pill--good { background: var(--cnb-pill-good-bg); color: var(--cnb-pill-good-fg); }
.adm-pill--warn { background: var(--cnb-pill-warn-bg); color: var(--cnb-pill-warn-fg); }
.adm-pill--crit { background: var(--cnb-pill-crit-bg); color: var(--cnb-pill-crit-fg); }
.adm-pill--info { background: var(--cnb-pill-info-bg); color: var(--cnb-pill-info-fg); }
.adm-pill--brand { background: var(--cnb-pill-brand-bg); color: var(--cnb-pill-brand-fg); }
.adm-pill--neutral { background: var(--cnb-pill-neutral-bg); color: var(--cnb-pill-neutral-fg); }

/* Super-admin (slate fijo). Pares propios, no la clara con menos alfa.
 * El segundo selector de cada línea es la red: una píldora DENTRO de una tabla
 * oscura (`.dt--dark`) se pone oscura sola. Sin eso hay que acordarse de la
 * clase en cada `DataTable.pill(...)`, y lo que se olvida no avisa: queda un
 * fondo tenue claro con texto oscuro sobre slate. */
.adm-pill--dark,
.dt--dark .adm-pill { background: #334155; color: #CBD5E1; }
.adm-pill--dark.adm-pill--good,
.dt--dark .adm-pill--good { background: #064E3B; color: #6EE7B7; }
.adm-pill--dark.adm-pill--warn,
.dt--dark .adm-pill--warn { background: #78350F; color: #FCD34D; }
.adm-pill--dark.adm-pill--crit,
.dt--dark .adm-pill--crit { background: #7F1D1D; color: #FCA5A5; }
.adm-pill--dark.adm-pill--info,
.dt--dark .adm-pill--info { background: #1E3A8A; color: #93C5FD; }
.adm-pill--dark.adm-pill--brand,
.dt--dark .adm-pill--brand { background: #7C2D12; color: #FDBA74; }
.adm-pill--dark.adm-pill--neutral,
.dt--dark .adm-pill--neutral { background: #334155; color: #CBD5E1; }

@media print {
  /* En papel el fondo tenue no se imprime: queda el texto, que ya contrasta. */
  .adm-pill { background: transparent !important; border: 1px solid currentColor; }
}