/* ═══════════════════════════════════════
   ▓ PATRÓN · Acción con motivo — gemelo vanilla ▓
   v1.0 · 2026-09-26 · v1.1 · 2026-10-05 («Otro» siempre abre un campo que crece de 1 a 3 líneas; consecuencia al aire de 16 px). Ficha: `design-system/PATRON_ACCION_CON_MOTIVO.md`

   Una sola pieza para toda escritura de Conciliación que exige "por qué": Modal +
   0..N OptionList (una pregunta por paso, SIN preselección) + OptionList de motivo
   (con "Otro" al final; elegir "Otro" SIEMPRE abre el detalle: textarea que crece solo
   de 1 a 3 líneas — Ricardo, 2026-10-04/05; retira `otroImportante` y la D2) + LineaConsecuencia.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. Las hojas de `componentes/modal/`, `componentes/option-list/`,
        `componentes/input/` (hoja Y `input.js`: el detalle de "Otro" es su textarea
        `data-crece`, que crece solo; sin modificador local) y `patrones/linea-consecuencia/` YA
        CARGADAS — esta hoja sólo añade lo propio de Acción con motivo, no
        redibuja ninguna de esas piezas.
     4. Y el script `componentes/modal/modal.js` cargado (esta pieza se monta con
        `exanteModal.montar`).
     5. Para los pasos de captura y de código (N-10, 2026-10-03): `componentes/otp/`
        (hoja y script) y `componentes/dropzone/` (hoja) ya cargados; `input-reglas`
        opcional.
     6. Para el paso «Hecho» (v1.2 de esta hoja · ficha v1.11 · 2026-10-29, decisión 356):
        `componentes/desglose/desglose.css` y el estado cargando de `componentes/button/`.
   ═══════════════════════════════════════ */

.exds-acm-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
}

.exds-acm-texto {
  margin: 0;
  color: var(--fg2, #4B5563);
  font-size: var(--fs-body, 14px);
  font-family: var(--font-sans, Inter, sans-serif);
  text-wrap: pretty;
}

.exds-acm-campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

/* Ricardo, 2026-10-05 — «homologa aire de "El abono pasa al contrato correcto y queda registrado."
   con respecto a contenedor de seleccion e input»: la línea de consecuencia queda al MISMO aire que
   lista → campo (16 px, --space-4, el gap del cuerpo). Se anula el margin-top de 10 px de
   `.exds-consecuencia` SÓLO dentro del cuerpo (no en la pieza LineaConsecuencia en general). */
.exds-acm-cuerpo > .exds-consecuencia { margin-top: 0; }

/* ── candado de campo obligatorio (revisor-qa, 2026-09-26) ─────────────────────
   P10 dice «sin preselección»; sin este aviso, confirmar sin elegir mandaba
   `valores[campoId] === undefined` a quien llama — el mismo hueco al revés.
   No usa `.exds-input-aviso` (esa clase vive con `display:none` fuera de un
   `.exds-input-wrap[data-estado=error]`, y aquí no hay wrap): es un `<div>`
   propio, oculto sólo con el atributo `hidden` — nunca se le da `display` en
   una regla de clase, porque una regla con `display` gana la pelea de
   especificidad contra `[hidden]` y lo deja visible siempre (INC-726). */
/* ⛔ INC-726: el atributo hidden pierde contra cualquier clase con display (.exds-acm-campo es
   flex, .exds-otp-msg es block). Dentro de esta pieza, lo marcado hidden se apaga de verdad. */
.exds-acm-cuerpo [hidden] { display: none; }

/* N-10 (2026-10-03): el texto dentro del marco del comprobante. Es el mismo texto de apoyo del
   cuerpo (13 · fg2) y, al elegir archivo, lo reemplaza el nombre del archivo. El input real del
   archivo va oculto con una clase propia. */
.exds-acm-archivo {
  margin: 0;
  color: var(--fg2, #4B5563);
  font: var(--fw-regular, 400) var(--fs-body-sm, 13px) var(--font-sans, Inter, sans-serif);
  cursor: pointer;
}
.exds-acm-archivo-oculto { display: none; }

.exds-acm-campo-aviso {
  margin: 4px 0 0;
  font: var(--fw-medium, 500) var(--fs-caption, 12px) var(--font-sans, Inter, sans-serif);
  color: var(--color-error, #DA342B);
}

/* ⛔ RETIRADO 2026-09-28 (D2, Ricardo — COMPONENTE_OPTIONLIST.md § «Y cuando se revela, es
   una línea»): aquí vivía `.exds-acm-motivo`, el modificador local que convertía la caja de
   «Otro» en un área de texto de varias líneas (min-height 74 · resize vertical). El detalle
   de «Otro» es ahora SIEMPRE una línea — el `<input type="text">` usa `.exds-input-wrap`/
   `.exds-input-ctrl` de `componentes/input/` SIN modificador, tal cual: ya no hace falta
   redeclarar nada aquí, porque ya no hay diferencia de alto/relleno que traducir. */

/* ══ EL PASO «HECHO» (v1.11 · 2026-10-29 · decisión 356, variante B3) ══════════════════════
   DECISION-FUENTE: Ricardo, 2026-10-29 — «Elijo B3» y «Sí, a sangre», sobre
   plans/decisiones/_decision_modal_exito_2026-10-29.html. Cuando el verificar del paso del
   código termina bien y devuelve un hecho, la ventana NO se cierra: muestra el ícono de la
   tarjeta de aviso junto al título (círculo de trazo 1.5, 16 px, 8 px de separación; sólo el
   ícono lleva color, el de la pastilla de la lista), la hora como subtítulo, una línea a
   sangre y el Desglose. Sin aire de sobra: 24 px arriba y abajo y 16 px entre grupos
   (subtítulo a línea, línea a primer dato, último dato a botón: 7 + 9 del renglón). */
.exds-modal-box[data-acm-hecho] .exds-modal-head { padding: 24px 28px 0; }
.exds-modal-box[data-acm-hecho] .exds-modal-ttl { display: flex; align-items: center; gap: var(--space-2, 8px); }
.exds-modal-box[data-acm-hecho] .exds-modal-body { padding: 16px 28px 7px; flex: none; }
.exds-modal-box[data-acm-hecho] .exds-modal-foot { padding: 0 28px 24px; }
.exds-acm-hecho-ic { display: flex; align-items: center; flex: none; height: 20px; color: var(--exds-acm-hecho-c, var(--fg2, #4B5563)); }
.exds-acm-hecho-ic svg { width: 16px; height: 16px; }
.exds-acm-hecho-ic[data-tono="verde"] { --exds-acm-hecho-c: var(--color-accent-green, #0B8F6B); }
.exds-acm-hecho-ic[data-tono="rojo"] { --exds-acm-hecho-c: var(--color-error-deep, #D61005); }
.exds-acm-hecho-ic[data-tono="gris"] { --exds-acm-hecho-c: var(--fg2, #4B5563); }
/* La línea a sangre: de borde a borde de la ventana, como la línea entre grupos del cajón
   (CAC-C3). El margen negativo anula los 28 px laterales del cuerpo y el relleno los devuelve
   al Desglose, que queda alineado con el título. */
.exds-acm-hecho-desg { margin: 0 -28px; padding: 6px 28px 0; border-top: 1px solid var(--color-border-subtle, #E5E7EB); }
/* v1.12 · un valor largo (el motivo «Otro», un concepto) va en UNA línea con «…» y globo sólo si se recorta (regla dura 18,
   3-quinquies); el rótulo no se encoge y entre rótulo y valor quedan al menos 12 px. */
.exds-acm-hecho-desg .exds-filamonto-k { flex: none; }
.exds-acm-hecho-desg .exds-filamonto-sp { min-width: 12px; }
.exds-acm-hecho-desg .exds-acm-hecho-vw { display: block; flex: 0 1 auto; min-width: 0; }
.exds-acm-hecho-desg .exds-filamonto-v { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La ventana se ajusta a su contenido: del alto del paso del código al del paso «Hecho», con
   el papel 2 «Apertura / cierre» (250 ms, curva por defecto). El atributo lo pone y lo quita
   el script sólo durante el ajuste. */
.exds-modal-box[data-acm-ajusta] { overflow: hidden; transition: height var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)); }
@media (prefers-reduced-motion: reduce) {
  .exds-modal-box[data-acm-ajusta] { transition: none; }
}