/* ═══════════════════════════════════════════════════════════════════════════════
   desglose.css — GEMELO VANILLA de `Desglose` + `FilaMonto` (2026-08-21)

   FUENTE ÚNICA: `catalogo-cd/components/FilaMonto.jsx` y `Desglose.jsx`. Cada regla de
   aquí es la MISMA de allí, con el MISMO selector, no uno equivalente. Si difieren,
   manda el kit.

   ⛔ POR QUÉ NACE. No es «se quedó atrasado»: este gemelo **nunca ha existido**. El
   backoffice es HTML y CSS a secas, así que sin gemelo la única forma de montar un
   renglón clave→monto era traducir el kit a mano — y traducir a mano es exactamente
   como nace un Frankenstein. El cajón de Finanzas › Facturación tenía el suyo:
   `.fx-fila > .et/.sp/.mo`, un renglón inventado con la misma anatomía y otros nombres.

   ⛔ SON DOS PIEZAS EN UNA HOJA, Y ES DELIBERADO. `Desglose` **no redibuja el renglón**:
   monta `FilaMonto`. Separarlas en dos archivos obligaría a cargar los dos siempre —
   nunca hay una lista sin sus renglones— y a mantener sincronizados dos encabezados que
   cuentan la misma historia.

   LAS REGLAS DURAS, que vienen del handoff de la CardResumen (§2.8, §2.9, §2.10) y no se
   negocian por pantalla:

     · **TODOS los renglones se tratan igual**: sin énfasis, sin negritas, sin color de
       jerarquía. Si un renglón «necesita destacar», pertenece al encabezado. En el cajón
       de factura eso es justamente lo que hace el Total: no se destaca, lo destaca su
       sitio, que es el último.
     · **La alineación va por ESPACIADOR flexible** (`flex:1`), NO por
       `justify-content:space-between`. Con etiquetas largas (`nowrap`) el espaciador
       colapsa y el monto **no se sube de renglón**; con `space-between` sí.
     · **Cifras tabulares** para que la columna derecha no baile.
     · **SIN líneas divisorias** entre renglones: el ritmo lo da el aire (relleno 9px 0).

   ⛔ Y LA REGLA QUE EL CAJÓN DE 420 px AÑADIÓ (handoff Facturación §10): **un `FilaMonto`
   sostiene un valor de UNA línea.** Si el valor envuelve, su caja arranca donde acaba la
   etiqueta y el texto envuelto se pega al rótulo (holgura medida: 0 px). En ese caso no
   es un renglón de desglose: la CLAVE se queda en el renglón y la redacción baja a un
   párrafo a todo lo ancho. Esto no se arregla con CSS —se arregla al montar—, y por eso
   se escribe aquí, que es donde lo va a leer quien monte el siguiente.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* LA LISTA. Sin divisores y sin relleno propio: el aire lo pone cada renglón. */
.exds-desglose { display: flex; flex-direction: column; }

/* EL RENGLÓN. `align-items:baseline` y no `center`: la etiqueta y la cifra tienen tamaños
   distintos (13 y 13.5), así que centrarlas verticalmente las dejaría con dos líneas de
   base distintas y la fila se leería torcida. */
.exds-filamonto { display: flex; align-items: baseline; padding: 9px 0; }
.exds-filamonto-k { font-family: var(--font-sans); font-weight: 400; font-size: 13px; color: var(--fg2); white-space: nowrap; }
.exds-filamonto-sp { flex: 1; }
.exds-filamonto-v { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-body-sm, 13px); color: var(--fg1); font-variant-numeric: tabular-nums; }