/* ═══════════════════════════════════════════════════════════════════════════════
   ▓ COMPONENTE · Chip de filtro — gemelo vanilla ▓
   v0.2 · 2026-08-20. Ficha: `design-system/COMPONENTE_CHIP_FILTRO.md`

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

   QUÉ ES. Un valor de filtro que se enciende y se apaga: «Sin atraso (1,463)». Vive en
   una fila dentro de una sección del panel de filtros, y se combina con sus hermanos —
   OR dentro de la misma dimensión, AND entre dimensiones
   (`CONTRATO_FILTRADO_PANTALLA_LISTA.md`).

   ▓ v0.2 · 2026-08-20 — EL CHIP ABSORBE EL RECIBO, Y EL ENCENDIDO PASA A OSCURO ▓
   `DECISION-FUENTE: Ricardo, 2026-08-20 — «sí»`, a la propuesta de eliminar
   `PastillaFiltro` y que el chip absorba su trabajo con la ✕ como prop.
   `DECISION-FUENTE: Ricardo, 2026-08-20 — «es una chip oscura… le da peso visual y sí es`
   `un elemento que me interesa que llame la atención del usuario».`

   1 · UN RECIBO DE FILTRO **ES** UN CHIP ENCENDIDO. Pulsarlo lo apaga = quitar el filtro,
       y eso ya lo dice `aria-pressed`. La pastilla decía distinguirse por tres cosas —dónde
       vive, el prefijo de dimensión y la ✕— y **el handoff de Facturación tumbó las dos
       primeras**: usó el chip FUERA del panel y le metió la dimensión DENTRO del texto
       («Estado ante el SAT · Vigente»). De la tercera escribió *«pulsarlo lo quita»*.
       `GOBIERNO.md` §2-bis ya lo tenía escrito: *un componente que sólo se distingue de otro
       por su conducta no necesita un segundo dibujo.*

   2 · Y LA ANATOMÍA DE LA PASTILLA ERA **PEOR**, no equivalente: texto con un `<button>`
       dentro, o sea un **interactivo anidado** — más difícil de anunciar y de alcanzar con
       teclado. El chip es un `<button>` entero. *Cuando la pieza que se retira era además la
       peor construida, la fusión no cuesta accesibilidad: la paga.*

   3 · EL ENCENDIDO VA **OSCURO SÓLIDO**, y no estrena convención: el canon ya define ese
       relleno como *«el resultado de algo que el usuario PIDIÓ: un filtro, una búsqueda»*
       (`Badge` énfasis `respuesta`, `COMPONENTE_BADGE.md` § Tres niveles: sólido = ink,
       filtros). La pastilla de VISTA hermana ya se enciende así desde el día uno.
       ⛔ **Y es oscuro EN LOS DOS SITIOS** —dentro del panel y en la banda del recibo—
       porque *un mismo estado con dos dibujos es como empieza la siguiente inconsistencia.*

   4 · EL NÚMERO QUE LO OBLIGABA. Con la banda fuera de la tarjeta, la pastilla rellenaba
       `#F2F4F6` sobre un lienzo `#F6F7F8`: **1,03:1**, el mismo gris, con el borde ya
       transparente desde la v0.2 de la pastilla — **el recibo era literalmente invisible**.
       El chip oscuro sobre ese lienzo mide **14,07:1**. *La pieza no estaba mal usada:
       estaba rota contra su hogar nuevo.*

   ⚠ LÍMITE CONOCIDO, ESCRITO POR EL PROPIO HANDOFF Y **NO CONSTRUIDO** (queda anotado, no
   resuelto): *«con 3-4 filtros la banda se vuelve una tira oscura; el escalón siguiente no
   es aclarar el chip, es plegar el recibo a "2 filtros ⌄"»*. Plegar es una pieza nueva y una
   decisión de Ricardo; aclarar el chip sería deshacer lo que él acaba de decidir.

   ⛔ NO ES UN BADGE Y NO ES UN CARDSELECTOR. Un Badge es INFORMACIÓN: no se pulsa, no
   tiene `aria-pressed`, no cambia de estado. Un CardSelector es una tarjeta de elección
   con título y descripción, del tamaño de una decisión de formulario. Éste es un TOGGLE:
   un `<button>` de verdad, con `aria-pressed`, del tamaño de una etiqueta.
   *Un adorno que se puede pulsar es la vía más rápida a que nadie lo pulse.*

   ⛔ NO ES EL SEGMENTADO (`Switch` segmentado · `.mc-seg`). El segmentado tiene PISTA y
   elige UNO de un grupo; esto va suelto, sin pista, y se combina.

   ⛔ Y **YA NO ES LA PASTILLA DE FILTRO**: ésa quedó SUPERADA por esta pieza el 2026-08-20.
   Su hoja (`../pastilla-filtro/pastilla-filtro.css`) sigue viva **sólo** por su último
   consumidor y su disparador de borrado está escrito ahí y en `GOBIERNO.md` § Retiradas
   declaradas. No la montes en nada nuevo.

   ⚠ SE PARECE A LA PASTILLA DE VISTA DEL PATRÓN DE LISTA (exds-pl-vpill, escrito SIN punto
   a propósito: es de otra hoja, y un medidor que encuentra un selector dentro de un
   comentario lo cuenta como si ESTA hoja lo declarara). Las dos son
   pastillas de 32 con contador, y desde la v0.2 las dos se encienden en OSCURO SÓLIDO —
   ya no se distinguen por el acabado, sólo por la CONDUCTA (la vista elige una de un grupo
   y apaga a la anterior; el chip se combina y varios encendidos son lo normal).
   ⛔ Y la pastilla de vista está además **OBSOLETA** desde el 2026-08-20: el selector de
   vistas pasó a desplegable el 19-ago (`DECISION-FUENTE: Ricardo, 2026-08-20 — «no es que
   sobreviva en contactos, está obsoleta»`). Su retirada vive en `GOBIERNO.md` § Retiradas
   declaradas; aquí no se toca porque su hoja está detrás de una valla.

   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`.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

  /* 32 = el escalón `sm` de la escala de control del catálogo (32 · 40 · 48). El handoff
     también pedía 32, así que aquí handoff y canon coinciden y no hubo nada que doblar. */
  height: 32px;

  /* El handoff escribía `0 13px`. 13 NO está en la escala de espaciado; el escalón vecino
     es `--space-3-5` (14) y es el que ya usa la pastilla de vista del patrón de lista,
     que es la pieza hermana de esta misma familia de pastillas de 32. Se sigue a la
     hermana, no se estrena un número. */
  padding: 0 var(--space-3-5);

  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--fg2);

  /* ⛔ SIN SOMBRA. Ninguna. Es el mismo argumento del botón secundario blanco
     (`COMPONENTE_BOTON.md`): una sombra bajo una pieza blanca se percibe más fuerte que
     bajo una oscura, y este chip vive DENTRO de un popover que ya tiene la suya. Un
     relieve aquí pondría al contenido por encima de su contenedor (no-negociable 7-bis). */
  box-shadow: var(--shadow-none);

  /* El handoff escribía `500 12.5px`. Ricardo decidió el 2026-07-21 NO acoger 12.5px a la
     escala tipográfica («un catálogo que acoge cualquier número deja de ser una escala»),
     así que queda declarado como valor suelto y NO se puede citar. El escalón del canon
     para un control pequeño es `--fs-button-sm` (13), que es el que ya usa la pastilla de
     vista hermana. GANA EL CATÁLOGO (INC-210). */
  font: var(--fw-medium) var(--fs-button-sm) var(--font-sans);
  line-height: 1;

  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;

  transition: background var(--motion-fast) var(--ease-default),
              border-color var(--motion-fast) var(--ease-default),
              color var(--motion-fast) var(--ease-default);
}

/* EL CONTEO ENTRE PARÉNTESIS · «(1,463)». Cifras tabulares o los números bailan cada vez
   que se filtra — la misma razón por la que la barra entera las lleva. HEREDA el color:
   el conteo es parte de la etiqueta, no un dato subordinado. */
.exds-chipf-n {
  font-variant-numeric: tabular-nums;
  color: inherit;
}

/* ⛔ EL HOVER ES UNO SOLO PARA TODA LA BARRA (handoff §1): `--color-bg-subtle`. Los
   controles no compiten entre sí; el único que grita es la acción principal, y grita por
   relleno, no por hover. */
.exds-chipf:hover { background: var(--color-bg-subtle); }

.exds-chipf:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* ═══ ENCENDIDO · `aria-pressed="true"` ═══════════════════════════════════════════
   ⛔ EL ESTADO VIVE EN `aria-pressed`, NO EN UNA CLASE. Así el dibujo no puede
   desincronizarse de lo que anuncia un lector de pantalla: son el mismo atributo. Es la
   misma técnica del selector de vistas del patrón de lista.

   ▓ v0.2 · 2026-08-20 — OSCURO SÓLIDO ▓
   `DECISION-FUENTE: Ricardo, 2026-08-20 — «es una chip oscura… le da peso visual y sí es un`
   `elemento que me interesa que llame la atención del usuario».`
   ⛔ Antes: `background: var(--color-bg-subtle)` + `border-color: var(--color-action-ink)` +
   `color: var(--fg1)`. Se separaba SÓLO por el borde, y eso bastaba dentro del panel —donde
   el chip vive sobre blanco y tiene vecinos apagados al lado que lo contrastan— pero **no en
   la banda del recibo**, que es su hogar nuevo: ahí el relleno gris medía 1,03:1 contra el
   lienzo. El oscuro mide **14,07:1** sobre el mismo lienzo y **15,09:1** contra el vecino
   apagado (blanco). *No se subió el contraste por gusto: el dibujo anterior no se veía en el
   sitio al que la pieza acababa de mudarse.*
   ⛔ EL BORDE SE PONE DEL COLOR DEL RELLENO, NO SE QUITA: quitarlo haría que el chip
   ENCOGIERA 2 px al encenderse y sus vecinos saltarían de sitio. Es la misma línea, y por la
   misma razón, que el encendido de la pastilla de vista del patrón de lista (exds-pl-vpill,
     sin punto: vive en otra hoja). */
.exds-chipf[aria-pressed="true"] {
  background: var(--color-action-ink);
  border-color: var(--color-action-ink);
  color: var(--color-action-text-on);
}

/* EL CONTEO SOBRE OSCURO · `--color-ink-on-dark-hint` (= `--fg3-dark`), el mismo peldaño que
   usa la pastilla de vista hermana. Sigue siendo parte de la etiqueta, pero un escalón por
   debajo del valor — igual que en claro, donde hereda una tinta ya secundaria. Medido sobre
   el relleno ink: 4,83:1, muy por encima del 4,5 de AA. */
.exds-chipf[aria-pressed="true"] .exds-chipf-n { color: var(--color-ink-on-dark-hint); }

/* ⛔ EL CHIP ENCENDIDO RECUPERA SU HOVER — la premisa que lo impedía murió, se volvió a
   preguntar, y Ricardo lo reabrió.
   `DECISION-FUENTE: Ricardo, 2026-08-20 — «sí hover».`

   ⭐ Y ESTE ES EL CASO QUE ENSEÑA POR QUÉ SE ESCRIBE LA PREMISA Y NO SÓLO LA REGLA. El 17-ago
   se decidió que el encendido NO llevara hover, y el motivo quedó escrito: *«su fondo en
   reposo ya es --color-bg-subtle, que es justo el gris de hover del catálogo: no tendría a
   dónde ir sin estrenar un gris»*. Era una regla correcta con una razón CONDICIONAL — y el
   2026-08-20 el encendido pasó a relleno oscuro, así que la condición dejó de cumplirse.

   *Una regla cuya premisa murió no se obedece ni se rompe en silencio: se vuelve a preguntar.*
   Y sólo se pudo preguntar porque la premisa estaba escrita al lado de la regla. Si el 17-ago
   se hubiera anotado «sin hover» a secas, hoy nadie habría sabido que había algo que revisar
   — el chip se habría quedado mudo para siempre y nadie sabría por qué.

   ⛔ Y NO ESTRENA NADA: `--color-action-ink-hover` (#31363B) ya existe en el canon y ya es lo
   que usa el encendido de la pastilla de vista. En la banda del recibo esto importa más que en
   el panel: ahí **el chip ES el botón de quitar el filtro**, y un control que no contesta al
   ratón se lee como decoración. */
.exds-chipf:hover { background: var(--color-bg-subtle) !important; }
.exds-chipf[aria-pressed="true"]:hover { background: var(--color-action-ink-hover) !important; border-color: var(--color-action-ink-hover) !important; }

/* ⛔ Y EL HOVER DESTAPÓ UN DEFECTO DE CONTRASTE QUE YA EXISTÍA — se arregla aquí, no se
   tapa. `--color-ink-on-dark-hint` (#8B92A1) mide **4,83:1** sobre el relleno ink (#21272C):
   pasa el 4,5 de AA por tres décimas. Pero el hover ACLARA el fondo a #31363B, y sobre él la
   misma tinta cae a **3,91:1** — REPRUEBA. WCAG no exime los estados: si el usuario lo puede
   ver, se mide. Y esto no lo trajo el hover: lo trajo el relleno oscuro; el hover sólo lo
   hizo visible. La pastilla de vista (`exds-pl-vpill`), viva en el backoffice, tenía el
   defecto idéntico desde el día que se le puso este mismo hover, y nadie lo había medido.
   ⛔ NO SE INVENTA UN COLOR: se sube UN PELDAÑO de la escalera sobre oscuro que el canon ya
   tiene — `--color-ink-on-dark-muted` (#B8BDC7), que da **6,47:1** sobre el fondo del hover.
   Sigue por debajo de la etiqueta (blanco, 12,2:1), así que la jerarquía interna se conserva
   intacta: el conteo y el aspa siguen siendo secundarios, sólo que legibles.
   *El peldaño de al lado casi siempre existe; inventar un valor es lo que hay que justificar.* */
.exds-chipf[aria-pressed="true"]:hover .exds-chipf-n,
.exds-chipf[aria-pressed="true"]:hover .exds-chipf-x { color: var(--color-ink-on-dark-muted) !important; }


/* ⛔ DECIDIDO: EL VALOR QUE DARÍA CERO **NO SE ATENÚA**.
   `DECISION-FUENTE: Ricardo 2026-08-17 — de acuerdo con la recomendación.`
   El handoff lo resolvía con `opacity:.42` — su **invención 6**, que no estaba entre las tres
   que Ricardo aprobó el 2026-08-16 (invenciones 4, 5 y 9). Se descarta por dos razones, y la
   segunda pesa más que la primera: el catálogo no tiene ningún token de opacidad, y **atenuar
   un control que SÍ se puede pulsar lo hace parecer deshabilitado cuando no lo está**.
   El conteo ya lo dice: «(0)» es la información, y no necesita que el chip se apague. */

/* ═══ EN POSICIÓN DE RECIBO · la ✕ ════════════════════════════════════════════════
   v0.2 · 2026-08-20. `DECISION-FUENTE: Ricardo, 2026-08-20 — «sí»` a que el chip absorba el
   recibo con la ✕ como prop. En el kit React la prop se llama **`recibo`**; aquí, en vanilla,
   la señal es el propio glifo.

   ⛔ POR QUÉ SE CONSERVA LA ✕ SI EL CHIP YA SE APAGA AL PULSARLO. Porque la afordancia no es
   la misma en los dos sitios: **dentro del panel se aprende solo** —hay chips encendidos y
   apagados uno al lado del otro, y la comparación enseña que se alternan—; **en la banda no
   hay nada apagado que comparar**, y una pastilla oscura que desaparece al tocarla es mucho
   menos evidente. *Una afordancia que el contexto ya enseña es ruido; la misma afordancia
   donde el contexto no enseña nada es la única pista que hay.*

   ⛔ LA ✕ **NO ES UN BOTÓN**, y ésta es la mitad del argumento por el que la pastilla se
   retiró. La pastilla era texto con un `<button>` dentro: un **interactivo anidado**. Aquí el
   control es el chip ENTERO, así que la ✕ es un glifo decorativo — `aria-hidden="true"`, sin
   foco propio, sin nombre accesible propio y con `pointer-events: none` para que el clic y el
   hover siempre aterricen en el chip. **Efectos que esto resuelve de un golpe, y ninguno es
   cosmético:** (a) **desaparece el interactivo anidado** —un `<button>` dentro de un `<span>`
   con texto—, que es la razón principal; (b) el nombre accesible pasa a ser **el que se lee en
   pantalla** («Estado ante el SAT · Vigente») más el «pulsado» de `aria-pressed`, en vez de un
   `aria-label` sintético que había que redactar y mantener en paralelo con el texto visible;
   (c) desaparece el problema de dónde va el foco cuando el elemento enfocado se borra — el foco
   lo tiene el chip, que es justo el que se va; y (d) el anillo de foco pasa a vivir FUERA.

   ⚠ LOS DOS NÚMEROS DE ESTE PÁRRAFO, MEDIDOS, Y UNO CORRIGE LO QUE AQUÍ DECÍA ANTES:
     · El anillo. `--color-border-focus` (#6E7378) sobre el relleno ink da **3,15:1** —que PASA
       el 3:1 de WCAG 1.4.11, por siete centésimas— y sobre el lienzo claro, con
       `outline-offset: 2px`, da **4,46:1**. La primera redacción decía «sería invisible»: no lo
       sería, estaría al filo. *Legal y al filo no se escribe «invisible».*
     · Las PARADAS DE TABULADOR **no bajan**. Misma escena (2 filtros puestos + «Limpiar»):
       **3 con pastillas · 3 con chips**. La pastilla no era focalizable y su ✕ sí; el chip sí lo
       es y su ✕ no. *Se cambia un control por otro. La mejora es de NATURALEZA del control, no
       de número, y decirlo al revés habría vendido la fusión con una cifra falsa.*

   ⛔ Y NO LLEVA CAJA DE 20 px. La ✕ de la pastilla la necesitaba por ser un blanco de clic;
   aquí no hay nada que pulsar, así que es sólo el glifo de 12. **Con eso muere también el
   `GATE-ALLOW:` que aquella arrastraba** («20 px y no el botón-ícono de 32»): la excepción
   deja de hacer falta porque deja de haber control. *La fusión no heredó la deuda de la pieza
   retirada — la canceló.*

   EL TRAZO SALE DE LA FUENTE ÚNICA DE ÍCONOS (`COMPONENTE_ICONO.md`), nunca de un `path` a
   mano: aquí sólo se le da tamaño y tinta. El glifo a 12 es el mismo tamaño que ya pintaba
   producción, y el canon sigue sin contemplar «descarte dentro de una pastilla» — su escalón
   más pequeño es 14, para el sidebar de nivel 2. Queda dicho, no fingido. */
.exds-chipf-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 12px;
  height: 12px;
  /* UN PELDAÑO POR DEBAJO DEL VALOR, igual que el conteo. En claro —un chip con ✕ y apagado,
     que no debería existir, pero se define para que nunca se vea tinta plena— hereda `--fg3`. */
  color: var(--fg3);
  /* ⛔ EL CLIC ES DEL CHIP, SIEMPRE. Sin esto, `event.target` sería a veces el `<svg>` y el
     mecanismo tendría que adivinar; con esto, el chip es el único blanco que existe. */
  pointer-events: none;
}
.exds-chipf-x svg { width: 12px; height: 12px; flex-shrink: 0; }

/* EL RELLENO DERECHO SE ENCOGE CUANDO HAY ✕ — y la señal es el propio glifo, no una clase.
   ⛔ Es el mismo principio que `aria-pressed`: **el dibujo cuelga de lo que hay en el
   marcado**, así que no puede desincronizarse de él. Una clase `is-recibo` sí puede quedarse
   puesta con la ✕ quitada, y al revés.
   14 a la izquierda (el relleno propio del chip, que NO cambia) y 6 a la derecha, donde el
   glifo aporta su propio aire. ⛔ **NO se importó el 5 de la pastilla**: 5 no es escalón del
   canon —los vecinos son 4 y 6— y en la pastilla se conservaba sólo porque handoff y
   producción coincidían en él. Aquí no hay producción que respetar: es anatomía nueva, así
   que se usa el escalón. *Un valor suelto se hereda por inercia si nadie pregunta de dónde
   venía.* */
.exds-chipf:has(.exds-chipf-x) { padding: 0 var(--space-1-5) 0 var(--space-3-5); }

/* LA ✕ SOBRE OSCURO · medida sobre el relleno ink: **4,83:1**. Y como es un OBJETO GRÁFICO
   que porta significado —dice cómo se quita el filtro—, le aplica el 3:1 de WCAG 1.4.11, que
   pasa con holgura. *No se midió sólo el texto: se midió también el dibujo, que es donde el
   1.4.11 se olvida.* */
.exds-chipf[aria-pressed="true"] .exds-chipf-x { color: var(--color-ink-on-dark-hint); }

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