/* ═══════════════════════════════════════════════════════════════════════════════
   ▓ COMPONENTE · Sección plegable de filtros — gemelo vanilla ▓
   v0.1 · 2026-08-17. Ficha: `design-system/COMPONENTE_SECCION_FILTROS.md`

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

   QUÉ ES. Una dimensión de filtro dentro del panel: su nombre, cuántos valores tiene
   elegidos, un resumen de CUÁLES cuando está cerrada, y la fila de chips cuando está
   abierta. El panel apila varias, una por dimensión.

   ⛔ NO ES EL `Acordeon` DEL CATÁLOGO, y la diferencia es de CONDUCTA, no de dibujo:
       · el `Acordeon` abre **una sección a la vez** (abrir la siguiente cierra la
         anterior) — sirve para LEER, y leer dos cosas a la vez no se puede;
       · esta sección abre **cuantas haga falta a la vez** — sirve para COMPARAR, y
         comparar con una sola sección abierta obliga a recordar lo que se cerró.
     *Dos piezas que se ven parecidas y se comportan al revés son la vía más rápida a que
     alguien monte la equivocada.* Y hay más diferencias que se siguen de ésa: aquí la
     cabecera es micro-tipografía de índice (no un título), lleva CONTADOR de selección y
     RESUMEN de lo elegido — tres cosas que el Acordeon no tiene porque no las necesita.

   ⛔ NO DECIDE QUÉ SIGNIFICA NADA. Recibe el nombre de la dimensión, sus valores y cuántos
   hay elegidos. No sabe qué es «atraso», ni qué día es hoy, ni en qué módulo vive
   (`gate_mecanismo_significado.js` · `CONTRATO_FILTRADO_PANTALLA_LISTA.md`).

   REQUISITOS DEL ANFITRIÓN — los tres, 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`.
     3. La hoja del chip (`../chip-filtro/chip-filtro.css`): el cuerpo los COLOCA, no los
        dibuja. Esta hoja no trae ni una propiedad del chip.
   ═══════════════════════════════════════════════════════════════════════════════ */

.exds-secf {
  display: block;
}

/* ═══ LA CABECERA · es un CONTROL, y por eso es un `<button>` de verdad ═══════════
   Su alto NO está fijado a propósito: sale de su contenido (micro-tipografía + un
   contador de 16). Fijarlo a un escalón de la escala de control la volvería una barra, y
   entonces competiría con la fila de chips que tiene debajo — que es lo que el usuario
   viene a leer (no-negociable 7-bis). */
.exds-secf-cab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2-5) var(--space-2) var(--space-1-5);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;

  /* El handoff escribía radio 8. No es un escalón del canon; Ricardo aprobó el 2026-07-21
     bajar los 8 sueltos a `--radius-sm` (6) — «tener 6 y 8 juntos es el escalón doble que
     nadie sabe cuándo usar». GANA EL CATÁLOGO (INC-210). Cambia 2 px en la esquina. */
  border-radius: var(--radius-sm);

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

/* ⛔ UN SOLO HOVER PARA TODO EL PANEL (handoff §1): `--color-bg-subtle`. Los controles no
   compiten entre sí. */
.exds-secf-cab:hover { background: var(--color-bg-subtle); }
.exds-secf-cab:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* EL NOMBRE DE LA DIMENSIÓN · micro-tipografía de índice, la misma que la cabecera de una
   tabla y que la etiqueta «VISTAS» de la barra de lista: dice qué son los chips de abajo
   y no compite con ellos.
   ⚠ El handoff escribía `letter-spacing:.08em`. El canon tiene UN espaciado de eyebrow
   (`--tracking-eyebrow`, 0.12em) y no admite un segundo. GANA EL CATÁLOGO (INC-210). */
.exds-secf-lbl {
  font: var(--fw-semibold) var(--fs-eyebrow) var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg3);
  white-space: nowrap;
  user-select: none;
}

/* EL CONTADOR DE SELECCIÓN · aparece SÓLO si hay algo elegido.
   ⛔ ES EL «Contador» DEL CATÁLOGO MONTADO, no una cajita redibujada
   (`COMPONENTE_BADGE.md` § Contador, `Badge variant="count" enfasis="respuesta"`):
       · forma   `--radius-pill` — ⛔ NUNCA 50 %: con 2+ dígitos se deforma en elipse.
       · ancho   `min-width` = el alto → 1 dígito sale círculo perfecto.
       · relleno `0 6px` — el canon dice 6; el handoff escribía 4. GANA EL CATÁLOGO.
       · alto    16, dentro del rango 16–22 que declara la ficha.
       · cifras  tabulares, y tope «99+» que se aplica en el render, no aquí.
   El tamaño de letra del handoff era 10.5, que no es escalón. El Contador del catálogo va
   SIEMPRE a `--fs-eyebrow` (11) sea cual sea su alto — así lo pinta `Badge.jsx` —, y este
   gemelo copia al Contador, no al handoff. GANA EL CATÁLOGO (INC-210). Misma razón para la
   tinta: `--fg-inverse`, que es la que el Badge usa en su énfasis «respuesta». */
.exds-secf-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-pill);
  background: var(--color-action-ink);
  color: var(--fg-inverse);
  font: var(--fw-semibold) var(--fs-eyebrow) var(--font-sans);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* ⛔ LA GUARDA — sin ella el `hidden` que le pone el JS no esconde nada: `[hidden]` es una
   regla de la hoja del NAVEGADOR y el `display:inline-flex` de arriba, siendo de autor, le
   gana. La sección sin nada elegido enseñaba un «0» permanente (medido 2026-08-25).
   ⚠ NO SE LE PONE AL CUERPO (`.exds-secf-cuerpo`): ahí el `hidden` NO es el mecanismo de
   esconder a propósito —una caja sin display no anima— y su propia regla lo declara. */
.exds-secf-n[hidden] { display: none; }

/* EL MUELLE · empuja el resumen y el caret al extremo derecho. Es un hueco, no una pieza. */
.exds-secf-muelle { flex: 1 1 auto; min-width: 0; }

/* EL RESUMEN · «31–60 días, En mora». Sólo cuando la sección está CERRADA: con la sección
   abierta la información ya está a la vista y repetirla sería decir dos veces lo mismo.
   ⚠ El handoff escribía 11.5px. No es escalón. Se toma `--fs-eyebrow` (11) y NO
   `--fs-caption` (12) porque el resumen es SUBORDINADO al nombre de la dimensión, que va
   a 11: un elemento contenido no puede pesar más que aquello a lo que acompaña
   (no-negociable 7-bis). La elección es mecánica, no de gusto. */
.exds-secf-res {
  font: var(--fw-regular) var(--fs-eyebrow) var(--font-sans);
  color: var(--fg3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Tope de ancho para que el resumen ceda antes que el nombre de la dimensión: recortar
     «31–60 días, En mora…» se entiende; recortar «ATRA…» no. 168 px es medida de caja, no
     de estilo: el canon no tokeniza anchos de contenido. */
  max-width: 168px;
}
.exds-secf-cab[aria-expanded="true"] .exds-secf-res { display: none; }

/* EL CARET · UN SOLO ícono que GIRA, que es la convención del catálogo
   (`COMPONENTE_ACORDEON.md`: «chevrón que gira, sin círculo ni hover propio»). El handoff
   cambiaba el dibujo —`chevron-up` por `chevron-down`—; girar dice lo mismo y además
   enseña el camino entre los dos estados. GANA EL CATÁLOGO (INC-210).
   Lienzo 16, que es lo que `COMPONENTE_ICONO.md` fija para «chevrón de acordeón / grupo»;
   el handoff pedía 15. Trazo 1.5 CONSTANTE por canon; el handoff pedía 1.6. */
.exds-secf-caret {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--fg3);
  transform: rotate(0deg);
  transition: transform var(--motion-fast) var(--ease-default);
}
.exds-secf-cab[aria-expanded="true"] .exds-secf-caret { transform: rotate(180deg); }

/* EL CUERPO · la fila de chips. Esta hoja los COLOCA; quien los dibuja es
   `chip-filtro.css`. Cero propiedades del chip aquí: si esta hoja pintara un chip, sería
   el Frankenstein un nivel más abajo (CLAUDE.md §5-bis paso 7). */
/* ⛔ EL CUERPO ABRE Y CIERRA CON MOVIMIENTO — PAPEL 2 DE LA MATRIZ (corregido 2026-08-17).
   Nació abriendo de golpe (`display:none` ↔ `flex`), y eso **contradecía una regla ya
   decidida**: `COMPONENTE_MOVIMIENTO.md` papel 2 —«apertura / cierre: disclosure, acordeón,
   modal, menú, popover»— manda `--motion-base` (250 ms) con `--ease-default` animando el
   ALTO, y dice literalmente **«el contenedor no salta»**.

   Lo destapó Ricardo preguntando si toda la barra tenía sus efectos. Y el defecto era del
   tipo que peor se nota leyendo y peor se siente usando: **el caret giraba suave y el
   contenido que revela aparecía instantáneo**. Dos velocidades para un solo gesto.

   ⛔ NO era una decisión de diseño: el canon ya la había tomado. *Cuando la pieza no
   coincide con el catálogo, eso es un defecto, no un criterio* (CLAUDE.md regla 0-bis).

   ⛔ CÓMO, y por qué así: se anima `grid-template-rows` de `0fr` a `1fr`, que es lo que el
   canon nombra. `max-height` obligaría a clavar un alto a mano y una fila más de chips lo
   rompería en silencio. El `overflow:hidden` del envoltorio es lo que recorta mientras crece.

   ⛔ Y EL ATRIBUTO `hidden` NO SE USA PARA ESCONDERLO, aunque el JS lo siga poniendo al
   final: `hidden` es `display:none`, y una caja sin display no anima. Se recorta con
   `grid-template-rows:0fr` + `visibility:hidden`, que sí anima Y sí retira el contenido del
   foco y del lector de pantalla — las dos cosas, que es lo que `hidden` daba gratis. */
.exds-secf-cuerpo {
  /* ⛔ `minmax(0, …)` Y NO `0fr` A SECAS — medido, no supuesto (2026-08-17).
     Con `grid-template-rows: 0fr`, la fila **sigue respetando su mínimo de contenido**: el
     relleno inferior de los chips dejaba la sección cerrada con **6 px de hueco vivo**. Se
     veía como un cierre a medias, que es peor que no animar — un «casi» se lee como error.
     `minmax(0, 0fr)` es lo que de verdad autoriza a la fila a llegar a cero. */
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  transition: grid-template-rows var(--motion-base) var(--ease-default),
              visibility var(--motion-base) var(--ease-default);
}
.exds-secf-cuerpo[hidden] {
  /* ⛔ Gana a la hoja del navegador, que le pondría `display:none` y mataría la animación.
     No es un truco: es la condición para que el atributo semántico y el movimiento convivan. */
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  visibility: hidden;
}
/* Los chips viven en la fila que crece; su envoltorio es el que se recorta. */
.exds-secf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  padding: 0 var(--space-2) var(--space-1-5);
  min-height: 0;   /* sin esto la fila de grid no baja de su alto natural y no hay animación */
}

/* Movimiento apagado, sin excepción (`gate_reduced_motion.js`). El kit lo declara con el
   selector amplio `.exds-secf, .exds-secf *` — no sólo cabecera/caret/cuerpo — y con
   `!important` para ganar siempre la cascada; homologado 2026-08-23 (gate_gemelos_conducta.js
   lo cazó: el kit manda). */
@media (prefers-reduced-motion: reduce) {
  .exds-secf,
  .exds-secf * { transition: none !important; }
}