/* ═══════════════════════════════════════════════════════════════════════════════
   ▓ COMPONENTE · Pastilla de filtro activo — gemelo vanilla ▓
   ⛔⛔ SUPERADA EL 2026-08-20. NO LA MONTES EN NADA NUEVO. ⛔⛔
   v0.2 · 2026-08-18. Ficha: `design-system/COMPONENTE_PASTILLA_FILTRO.md`

   ═══ ESTA HOJA ESTÁ VIVA SÓLO POR SU ÚLTIMO CONSUMIDOR ═══════════════════════════
   `DECISION-FUENTE: Ricardo, 2026-08-20 — «sí»`, a eliminar `PastillaFiltro` y que
   `ChipFiltro` absorba el recibo con la ✕ como prop.

   QUIÉN LA SUSTITUYE: **`ChipFiltro` con `recibo`** (`../chip-filtro/chip-filtro.css`,
   `COMPONENTE_CHIP_FILTRO.md` v0.2). Un recibo de filtro **es** un chip encendido:
   pulsarlo lo apaga = quitar el filtro, y eso ya lo dice `aria-pressed`.

   ⛔ EL DISPARADOR EXACTO DE SU BORRADO, PARA QUE ESTA DEUDA TENGA FECHA DE VENCIMIENTO:
   **el día que Contactos monte el chip en su banda de filtros** —es decir, cuando
   `admin/js/backoffice/contactos.js` deje de emitir marcado `exds-fpill*` y emita chips—
   se borran, EN ESTE ORDEN: (1) el marcado y el manejo en la app; (2) la copia de la app
   `exante-git/admin/css/pastilla-filtro.css` y su `<link>`; (3) esta hoja y su README;
   (4) `catalogo-cd/components/PastillaFiltro.jsx` y su renglón del barril;
   (5) la regla de entrada de la banda que hoy anima exds-fpill-k en la hoja del patrón de
   lista (escrito sin punto: vive detrás de la valla de `patrones/pantalla-lista/`);
   (6) `.mc-fpill*` de Mesa de control y Facturación, que son la OTRA implementación viva
   de esta misma pieza y **no se van con Contactos** — tienen su propio disparador, el día
   que esas dos pantallas monten el chip.

   ⛔ HOY NO SE BORRA NADA. `gate_eslabon_app` está en 0 y tiene que seguir en 0: borrar
   este CSS hoy dejaría la banda de filtros de Contactos SIN ESTILO en producción.
   *El canon cambia hoy; el CSS muere cuando su último consumidor se homologue.*
   Registro central de las dos retiradas declaradas: `GOBIERNO.md` § Retiradas declaradas.
   ═══════════════════════════════════════════════════════════════════════════════════

   Cosechada del handoff `plans/handoff toolbar/toolbar/` (invención 9), aprobada por
   Ricardo el 2026-08-16 («Entran las tres», decisión 1 de
   `plans/DECISIONES_TOOLBAR_2026-08-16.md`).

   QUÉ ES. El recibo de un filtro que ya está puesto: «Atraso · 61–90 días ✕». Va bajo la
   barra, en una fila, una por valor seleccionado. Contesta dos preguntas que ninguna otra
   pieza contesta: **qué estoy viendo** y **cómo lo deshago**.

   ⛔ NO ES UN BADGE. Un Badge informa y no se toca; esto **lleva un control dentro** — la
   ✕ que quita el filtro. Y su prefijo dice la DIMENSIÓN («Atraso ·»), que un Badge no
   tiene. *Un Badge con un botón dentro ya no es un Badge: es otra pieza con el aspecto
   prestado.*

   ⛔ NO ES EL CHIP DE FILTRO. El chip ELIGE (está dentro del panel, se enciende y se
   apaga); la pastilla ES EL RESULTADO (vive fuera del panel y sólo se puede quitar).
   Se parecen a propósito —las dos son pastillas con borde ink— porque son las dos caras
   de la misma acción; pero una es un `<button>` entero y la otra es texto con un botón
   dentro.

   ✅ ESTA PIEZA YA VIVE EN PRODUCCIÓN, y por eso la cosecha no la estrena: la reconoce.
   `.mc-fpill` está en el backoffice desde antes (Mesa de control y Facturación) **sin
   ficha**. Lo que este gemelo hace es homologar sus dos valores fuera de escala a tokens
   del canon; ver la ficha § Mapa de implementaciones para lo que falta bajar a producción.

   ▓ v0.2 · 2026-08-18 — LOS DOS CAMBIOS, y ninguno es estético ▓
   `DECISION-FUENTE: Ricardo 2026-08-18, sobre
    plans/decisiones/_decision_balance_contactos_2026-08-18.html — «coincido contigo, solo
    te encargo modificar catálogo, no solo la pantalla del módulo».`

   1 · RELLENO SUAVE, SIN BORDE. El borde era el tono más oscuro del sistema
       (`--color-action-ink`). MEDIDO en las tres superficies vivas: **15,09:1 contra la
       tarjeta blanca que la contiene, cuyo propio borde mide 1,24:1** — el elemento
       contenido pesaba DOCE VECES más que su contenedor, que es justo lo que prohíbe el
       no-negociable 7-bis (INC-059), y más que la acción principal de la barra, invirtiendo
       la jerarquía de la fila. Después: **1,10:1**, por debajo del 1,24 de la tarjeta.

   2 · ALTO 30 → 32. ⛔ REVOCA el «30 es canon» del 2026-08-17: la pastilla comparte fila con
       las pastillas de VISTA, que miden 32, y *dos píxeles no se leen como dos tamaños, se
       leen como una pieza mal puesta*. 32 ya existe en la escala; no se inventa un peldaño.
       *El 17-ago se midió la pieza EN AISLAMIENTO, donde 30 es defendible; el 18-ago se miró
       LA FILA. Es 7-bis otra vez: la escala es del conjunto, no de la pieza.*

   AA MEDIDO sobre el relleno nuevo, no supuesto: texto `--fg2` 6,85:1 · prefijo `--fg3`
   4,96:1 · la ✕ (objeto gráfico, WCAG 1.4.11 pide 3:1) 4,96:1. Los tres pasan.

   REQUISITOS DEL ANFITRIÓN — los dos, o se ve mal en silencio:
     1. Los tokens del canon (`design-system/colors_and_type.css`).
     2. Un reinicio con `box-sizing: border-box`.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* LA FILA · va bajo la barra y envuelve. Se oculta entera cuando no hay ningún filtro:
   una fila vacía dejaría un hueco que el ojo lee como un fallo de carga. */
.exds-fpills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.exds-fpills[hidden] { display: none; }

.exds-fpill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  flex: none;

  /* 32 — EL PELDAÑO QUE YA EXISTE en la escala (32 · 40 · 48).
     `DECISION-FUENTE: Ricardo 2026-08-18.` ⛔ Antes aquí ponía 30 con un comentario que
     decía «subirlo a 32 sería un cambio de diseño que nadie ha decidido». Ya se decidió, y
     por lo que se ve en la fila: **esta pastilla convive con las de VISTA, que miden 32**.
     Dos píxeles no se leen como dos tamaños — se leen como una pieza mal puesta. */
  height: 32px;

  /* Relleno ASIMÉTRICO a propósito: 12 a la izquierda (donde sólo hay texto) y 5 a la
     derecha, donde la ✕ de 20 aporta su propio aire interior. Si los dos lados midieran
     igual, la ✕ se vería despegada del borde.
     ⚠ 5 no es un escalón del canon (los vecinos son 4 y 6) y se conserva por la misma
     razón que el alto: handoff y producción coinciden. Va en el mismo pendiente. */
  padding: 0 5px 0 var(--space-3);

  /* ⛔ EL BORDE VA TRANSPARENTE, NO `0`, y esa es toda la diferencia: `border: 0` encogería
     la caja 2 px al recalcularse el `border-box`, y la pastilla cambiaría de tamaño por un
     cambio que sólo era de color. Con `transparent` el ancho se conserva y la silueta pasa a
     dibujarla el relleno. Antes: `1px solid var(--color-action-ink)` — 15,09:1 contra la
     tarjeta blanca, cuyo borde mide 1,24:1 (7-bis: contenido ≤ contenedor). Ahora: 1,10:1. */
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  /* La SUPERFICIE SUTIL del canon. No cambia de valor — cambia de papel: antes acompañaba a
     un contorno, ahora es lo único que separa la pastilla de la tarjeta. */
  background: var(--color-bg-subtle);
  /* TINTA SECUNDARIA. Antes `--fg1`, que con el contorno retirado dejaba la pieza pesando
     igual por dentro. Medido sobre el relleno: 6,85:1, muy por encima del 4,5 de AA. Y deja
     al prefijo (`--fg3`, 4,96:1) exactamente UN peldaño por debajo, en vez de dos. */
  color: var(--fg2);

  /* El handoff y la producción escriben `500 12.5px`. Ricardo decidió el 2026-07-21 NO
     acoger 12.5 a la escala tipográfica; el escalón del canon es 13. GANA EL CATÁLOGO
     (INC-210): `--fs-body-sm`, no `--fs-button-sm`, porque esto NO es un botón — el botón
     es la ✕ que lleva dentro. Los dos valen 13: el cambio es de significado, no de píxel. */
  font: var(--fw-medium) var(--fs-body-sm) var(--font-sans);
  line-height: 1;
  white-space: nowrap;
}

/* EL PREFIJO DE DIMENSIÓN · «Atraso ·». Un peldaño por debajo del valor, en peso Y en
   tinta: el dato es el VALOR («61–90 días»); la dimensión sólo lo sitúa. Si los dos
   pesaran igual, la fila se leería como una lista de parejas y habría que leerla entera
   para encontrar la que se quiere quitar (no-negociable 7-bis). */
.exds-fpill-dim {
  color: var(--fg3);
  font-weight: var(--fw-regular);
}

/* LA ✕ · el único control de la pieza.
   GATE-ALLOW: 20px y NO el botón-ícono de 32 del catálogo. La pastilla ahora mide 32, así
   que el argumento se actualiza pero NO se cae: un control de 32 dentro de un contenedor de
   32 lo llenaría de borde a borde, sin un píxel de aire — y eso es peor que reventarlo,
   porque no se nota hasta que se pinta. Con 20 quedan 6 px de aire por lado. No es un botón
   de ícono de barra: es la afordancia de descarte de una pastilla, y su tamaño lo manda su
   continente. Misma declaración que ya llevaba `.mc-fpill .x` en producción, medida el
   2026-07-30 al homologar los botones de ícono. */
.exds-fpill-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--fg3);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--motion-fast) var(--ease-default),
              color var(--motion-fast) var(--ease-default);
}

/* El glifo a 12: la tabla de tamaños de `COMPONENTE_ICONO.md` no cubre «descarte dentro de
   una pastilla» —su escalón más pequeño es 14, para el sidebar de nivel 2— y 14 dentro de
   una caja de 20 deja 3 px de aire por lado. Se conserva el 12 que ya pinta producción y
   queda dicho aquí que el canon no lo contempla, en vez de fingir que sí. */
.exds-fpill-x svg { width: 12px; height: 12px; flex-shrink: 0; }

.exds-fpill-x:hover {
  background: var(--color-notice-tint);
  color: var(--fg1);
}
.exds-fpill-x:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
}

/* «LIMPIAR» · quita todos los filtros de una vez. Es TEXTO, no un botón con caja: si
   tuviera borde competiría con las pastillas que tiene al lado, y lo que hace —deshacer—
   nunca debe pesar más que lo hecho.
   El radio 6 (`--radius-sm`) y no 8: Ricardo aprobó el 2026-07-21 bajar los 8 sueltos al
   escalón de 6 — «tener 6 y 8 juntos es el escalón doble que nadie sabe cuándo usar». */
.exds-fpill-clear {
  /* 32, y va PEGADO al alto de la pastilla, no elegido aparte: vive en la MISMA fila. Si se
     quedara en 30, el cambio de arriba habría quitado el desfase de dos píxeles de un sitio
     para dejarlo dos piezas más allá. 2026-08-18. */
  height: 32px;
  padding: 0 var(--space-2-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg2);
  font: var(--fw-medium) var(--fs-body-sm) var(--font-sans);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--motion-fast) var(--ease-default),
              color var(--motion-fast) var(--ease-default);
}
.exds-fpill-clear:hover { background: var(--color-bg-subtle); color: var(--fg1); }
.exds-fpill-clear:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Movimiento apagado, sin excepción (`gate_reduced_motion.js`). */
@media (prefers-reduced-motion: reduce) {
  .exds-fpill-x,
  .exds-fpill-clear { transition: none; }
}