/* ═══════════════════════════════════════════════════════════════════════════════
   resolucion-aviso.css — GEMELO VANILLA del patrón «Resolución de aviso» (2026-08-21)

   FUENTE ÚNICA: `catalogo-cd/components/CajaResolucion.jsx` (v2) ·
   Ficha: `design-system/PATRON_RESOLUCION_DE_AVISO.md`.

   ⛔ QUÉ ES LA PIEZA, Y QUÉ NO. Lo que aporta NO son sus piezas —los botones y la lista de
   opciones ya existen en el catálogo— sino **la regla**: un aviso que un humano tiene que
   resolver se cierra por exactamente TRES puertas, y las tres NO pesan lo mismo.

     | Puerta        | Qué significa                              | Botón       |
     | Aceptar       | Es cierto y lo asumo                       | primary     |
     | Corregido     | Era cierto, ya lo arreglé                  | secondary   |
     | No aplica     | El aviso no debía existir aquí             | ghost       |

   El peso no es estética: es la respuesta a «qué se espera de mí». Dos `secondary`
   idénticos obligan a leer las tres etiquetas enteras cada vez.

   ⛔ v2 · LA NOTA LIBRE SE RETIRA (handoff Facturación §11, Ricardo 2026-08-20). No era un
   campo, era una fuga: cada resolución salía como prosa irrepetible —imposible de contar por
   método determinista— y el campo ocupaba el mismo sitio en los 15 tipos de aviso cuando
   sólo se justificaba en dos. En su lugar: **vocabulario cerrado**. Cada puerta cuelga de sí
   un puñado de motivos legítimos, y la resolución sale como `(tipo · puerta · motivo)`.

   ⛔ EL ORDEN DE LOS DOS PASOS NO ES ARBITRARIO. Primero la PUERTA —que es la pregunta con
   consecuencia— y sólo entonces el motivo, **ya filtrado por ella**. Antes de elegir puerta
   no se enseña ninguna lista: un panel de 420 px no aguanta las tres a la vez, y enseñarlas
   todas obliga a leer motivos que no aplican.

   ⛔ EL ESCAPE «Otro» abre UNA línea de texto y el botón de cierre no se habilita hasta
   llenarla. Su frecuencia es la métrica que delata que al **vocabulario** le falta una
   entrada — no que el usuario se portó mal. Si «Otro» pasa del 10 %, la lista está mal.

   ⛔ ESTA PIEZA NO CONOCE EL NEGOCIO. No sabe qué es un CFDI, ni cuáles son los motivos de
   cada tipo de aviso: los recibe. Si se llevara dentro esa tabla dejaría de ser un patrón y
   sería un flujo (`GOBIERNO.md` §1-ter), y no serviría en cobranza ni en la mesa de control,
   que es donde ya hay **20 acciones de resolución** pintadas cada una a su manera.

   MONTA (declarado en la §Composición de la ficha): `Button` ×3 (`.btn` + variante) ·
   `OptionList` (`.exds-ol`, con `data-sangrado="ninguno"`) · `Input` de una línea ·
   `.hairline`. La CARD es cruda con tokens: no hay componente `Card` genérico y crearlo por
   esto sería un envoltorio sin comportamiento.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* LA CARD. `--radius-md` y **sin sombra**: vive DENTRO de un cajón, y una caja anidada que
   se eleva compite con el panel que la contiene (regla de la vista global, INC-059). */
.exds-res {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px;
  border: 1px solid var(--color-border-subtle);
  /* ⛔ 10 → 12 EL 2026-08-26 · `lint_radio_caja` (relleno 14–18 → 12). */
  border-radius: var(--radius-container, 12px);
  background: var(--color-surface);
  font-family: var(--font-sans);
}

/* EL RÓTULO NOMBRA EL AVISO QUE SE VA A CERRAR, y dice cuántos quedan. Con dos avisos en la
   misma factura, «Resolver el aviso» a secas no dice cuál — y quien opera firmaría un motivo
   contra el aviso equivocado. */
.exds-res-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* ⛔ EL ROTULO EMPUJA, NO SE DEJA EMPUJAR (2026-09-01). Con "space-between" y DOS hijos
   —punto y rotulo, que es el caso cuando hay un solo aviso— el rotulo se iba al borde
   derecho. Con tres (aparece el contador) no se nota, y el contador solo aparece con mas de
   un aviso: por eso el defecto vivia en el modo base sin que nadie lo viera. NADIE HABIA
   MONTADO NUNCA ESE MODO — salio al montarlo para la hoja de decision del 2026-09-01.
   *Un modo que el catalogo ofrece y ningun sitio usa no esta probado: esta escrito.* */
.exds-res-cab .exds-res-rot { margin-right: auto; }
.exds-res-cab .exds-res-rot { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⛔ EL TAMAÑO Y EL TONO DEL CONTADOR SE AÑADEN EL 2026-08-24, y no son un invento: son los dos
   valores que el kit ya pintaba (`--fs-caption` · `--fg3`) y que aquí faltaban. Sin ellos el
   contador HEREDA del cuerpo, así que en vanilla salía a 14 px y en negro mientras en React salía
   a 12 y en gris — la misma pieza, dos pesos distintos, y nadie podía verlo porque el kit llevaba
   su hoja en línea y no había con qué compararlo. Manda el kit, como dice la cabecera.

   ⚠ Y ESTO PONE EN ROJO `gate_eslabon_app`, A PROPÓSITO Y MEDIDO. La copia viva
   (`admin/css/resolucion-aviso.css`) tiene `.exds-res-cuenta { flex:none }` a secas, así que le
   faltan estas dos declaraciones: el gate pasa de 10 copias divergentes a 11, y esa 11ª es una
   verdad que hasta hoy era invisible. **La copia NO se toca desde aquí** (no se toca producción),
   y hay que decir el tamaño real del efecto en vez de inflarlo: **hoy no se ve nada.** Medido —
   los tres sitios donde las apps montan esta pieza la montan con `data-banda="si"`, y el modo
   banda sí declara el tipo y el tono del contador más abajo. La divergencia es LATENTE: se ve el
   primer día que alguien monte la card en modo base. *Una divergencia que hoy no se ve sigue
   siendo una divergencia; lo que no es, es una urgencia — y confundir las dos cosas cuesta las
   dos veces.* */
.exds-res-cuenta { flex: none; font-size: var(--fs-caption, 12px); color: var(--fg3); }

/* ⛔ EL RÓTULO EN MODO BASE NO DECLARA SU TIPOGRAFÍA AQUÍ, Y ES DELIBERADO: el cejo es del canon
   (`.eyebrow` / `.t-eyebrow` en `colors_and_type.css`), y quien monta le pone esa clase. El kit
   hace lo mismo desde el 24-ago — antes copiaba las cinco declaraciones a mano y traía el
   `letter-spacing` a la mitad (.06em de respaldo contra los 0.12em del canon). *Un patrón consume
   piezas del canon, no las reimplementa* (Ricardo, 2026-08-23). */

/* LAS TRES PUERTAS. `flex-wrap` porque a 420 px de cajón las tres etiquetas largas de algún
   idioma futuro no caben en una línea, y partirse es mejor que recortarse: una puerta con la
   etiqueta cortada deja de decir cuál es su consecuencia. */
.exds-res-puertas { display: flex; flex-wrap: wrap; gap: 8px; }

/* EL PASO 2 · el motivo. Nace oculto: el JS lo revela al elegir puerta. */
.exds-res-motivo { display: flex; flex-direction: column; gap: 8px; }
.exds-res-motivo[hidden] { display: none; }

/* EL ESCAPE. Un `Input` de una línea, con el borde de CONTROL del canon (WCAG 1.4.11 pide
   3:1 en un control, y `--color-border-control` es el token que lo cumple). */
.exds-res-otro {
  width: 100%; box-sizing: border-box; height: 36px; padding: 0 10px;
  font: 400 var(--fs-body-sm, 13px) var(--font-sans); color: var(--fg1);
  border: 1px solid var(--color-border-control); border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.exds-res-otro:focus { outline: 0; border-color: var(--color-border-focus); }
.exds-res-otro[hidden] { display: none; }

/* EL CIERRE · UNA sola acción, y su rótulo dice qué va a pasar. Nace oculto igual que el
   motivo: mientras no hay motivo, no hay nada que cerrar. */
.exds-res-cierre { display: flex; flex-direction: column; gap: 8px; }
.exds-res-cierre[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════════════
   ▓ MODO BANDA · `data-banda="si"` — la resolución dentro del cajón COMPACTO ▓
   v0.2 · 2026-08-21. `DECISION-FUENTE: Ricardo, 2026-08-21`, sobre el diseño de Claude
   Design de esta zona: la cabecera **dice el asunto**, no la palabra «Acción» ni
   «Resolver», y el bloque se lee como **una banda más** del cajón, no como una tarjeta
   flotando encima.

   ⛔ Y CORRIGE ALGO QUE INVENTÉ SIN AVISAR. La versión anterior de esta zona —el rótulo
   «ACCIÓN» sobre una tarjeta con sombra— **no salió de ningún diseño**: la compuse yo
   porque el catálogo no tenía pieza para esto, y **no lo declaré**. Ricardo: *«la sección
   de acción la inventaste completamente… siempre que inventes algo debes de avisarme»*.
   *Un invento que no se señala deja de ser una propuesta y pasa a ser un hecho consumado:
   nadie lo revisa porque nadie sabe que hay algo que revisar.*

   Qué cambia respecto a la tarjeta:
     · sin borde, sin radio y sin fondo propio — la banda es del cajón, no una caja dentro
     · la cabecera va a sangre sobre `--color-bg-subtle`, como las bandas de grupo de la
       familia de cajones, y así el filete superior lo dibuja el propio cambio de plano
     · el contador suelto pasa a **«1 de 2»**: dice lo mismo Y dónde estás. *Un contador a
       secas obliga a preguntarse «uno ¿de cuántos?»; el ordinal no.*
     · el punto de severidad sustituye a la palabra de categoría, con los tonos que la
       columna de prioridad de la lista ya usa — no se estrena escala
   ═══════════════════════════════════════════════════════════════════════════════════ */
.exds-res[data-banda="si"] {
  border: 0; border-radius: 0; background: none; padding: 0; gap: 0;
}

/* LA CABECERA · a sangre y sobre el gris. El margen negativo es el gutter del cajón. */
.exds-res[data-banda="si"] .exds-res-cab {
  margin-inline: calc(-1 * var(--space-5, 20px));
  padding: var(--space-3, 12px) var(--space-5, 20px);
  background: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  /* ⛔ EL HUECO ES `--dot-gap` (12), NO `--space-2-5` (10). `COMPONENTE_DOT.md` §2 declara el
     par completo: punto de 8 → hueco de 12; punto de 6 → hueco de 10. Aquí el punto es de 8 y
     el hueco venía de 10, o sea **la mitad de un par distinto**. *El diámetro y su hueco son
     UNA decisión: tomar la mitad de un par lo rompe, y el síntoma no es «hay poco aire» —es
     que el punto parece más grande de lo que es.*
     Es el mismo defecto que Ricardo cazó el 2026-08-21 en la celda de Aviso de la lista. Se
     corrigió allí y **sobrevivió aquí, un nivel más abajo, dentro de la pieza** — que es
     donde más caro sale: cada pantalla que monte la caja lo hereda sin poder verlo. */
  justify-content: flex-start; gap: var(--dot-gap, 12px);
}
.exds-res[data-banda="si"] .exds-res-rot {
  flex: 1; font: 600 var(--fs-body, 14px) var(--font-sans); color: var(--fg1);
  text-transform: none; letter-spacing: normal;
}
.exds-res[data-banda="si"] .exds-res-cuenta {
  font: 400 var(--fs-caption, 13px) var(--font-sans); color: var(--fg3);
  font-variant-numeric: tabular-nums; background: none; border: 0; padding: 0; min-width: 0;
}

/* EL PUNTO DE SEVERIDAD · 8 px, el mismo que la lista. Va en el color BASE de su familia y
   nunca en la variante profunda: la regla del punto semántico sin relleno (2026-08-20). */
/* ⛔ AQUÍ SE REDIBUJABA EL PUNTO, Y SE RETIRA EL 2026-08-22. La banda monta ahora `.exds-dot`,
   el gemelo vanilla del `Dot` — que **existía desde el 2026-08-20** y ninguna app había
   adoptado. Traía ya el diámetro, el radio, los siete tonos del reparto y la regla de color de
   Ricardo (base sin relleno · color del texto dentro de un relleno).
   *El gate lo decía en voz baja —«SIN ADOPTAR»— y eso no es un fallo, así que nadie fue a
   mirarlo. «Sin adoptar» es donde una pieza va a que la olviden.*

   ⛔⛔ Y AQUÍ QUEDÓ UNA LLAVE HUÉRFANA DEL 22-AGO, VIVA HASTA HOY (2026-08-24, INC-715). Al
   vaciar la regla se borraron sus declaraciones y **se dejó el selector con su `{` abierto**:
   desde entonces todo lo que sigue en este archivo vivía DENTRO de un bloque que nunca cerraba.
   La víctima fue **la única regla que había debajo** —el aire del cuerpo de la banda—, que dejó
   de aplicarse el mismo día en que se escribió y **nadie lo vio en tres días**: no en el
   navegador, porque la regla que faltaba es un hueco y un hueco que falta no se lee como un
   defecto; y no en el arnés, porque `parseCSS` leía hasta el final del archivo sin quejarse de
   la llave abierta y devolvía la hoja **truncada en silencio**.
   *Un archivo con una llave de más no falla: se acorta. Y un medidor que lee un archivo
   acortado no dice «no pude»: dice que todo está bien.* */

/* EL CUERPO · debajo de la banda, con el aire propio del cajón. */
.exds-res[data-banda="si"] > :not(.exds-res-cab) { margin-top: var(--space-3-5, 14px); }