/* ═══════════════════════════════════════
   ▓ PATRÓN · Explicación calculada — gemelo vanilla ▓
   v1.1 · 2026-10-26 (evidencia sin azul). Ficha: `design-system/PATRON_EXPLICACION_CALCULADA.md`

   ⛔ RETIRADO 2026-09-28 — no se monta en producción. DECISION-FUENTE: Ricardo, 2026-09-28,
   «b6 4» (plans/decisiones/_decision_b6_evidencia_una_fila_2026-09-28.html, opción 4). Con
   la anatomía canónica del cajón (CajonCampos + Desglose/FilaMonto + CajonFila), este
   envoltorio (.exds-expl, .exds-expl-motivo) es redundante — ver PATRON_EXPLICACION_
   CALCULADA.md § PATRÓN RETIRADO. Se conserva sin tocar su código, como referencia de la
   clase .exds-expl-evidencia (el único estilo que sigue vivo, usado suelto sobre el rótulo
   de un FilaMonto dentro de una CajonFila); no se cosecha de nuevo.

   Una diferencia se explica sola: una regla la calculó, nunca una persona la escribió.
   SIN JS — es una vista de sólo lectura, montada con `Desglose` + un enlace de evidencia.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `componentes/desglose/` ya cargado.
   ═══════════════════════════════════════ */

.exds-expl {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}
.exds-expl-motivo {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}
.exds-expl-evidencia {
  font-size: var(--fs-caption, 12px);
  color: var(--fg3, #5C6B7A);
  text-decoration: none;
}
/* v1.1 · 2026-10-26 · SIN AZUL (decision 301). La evidencia que navega es texto normal (--fg1)
   con el subrayado fino gris del Button enlace (COMPONENTE_BOTON.md, decision 296): subrayado
   --color-border-default a 3 px, que al hover pasa a --fg1. RETIRADO: el azul --color-info y el
   subrayado solo al hover. La evidencia que no navega sigue en --fg3 y sin subrayado.
   DECISION-FUENTE: Ricardo, 2026-10-26 — «1 y 2 si, 3: si pero el enlace a asigar esta cuenta en contactos ayudame a decidir si debe quedarse como ccajon navega o como enlace son el subrayado sutil, 4: si , pero el texto azul no se contempla en ningun lado del catalogo mas que banner fantasma, pero dentro de una tabla no aplica. 5: si como recomiendas.» (ESTADO 301; aclaración: «Texto normal con subrayado»)
   N3 (revisor-qa, 2026-09-26): homologado 1:1 con ExplicacionCalculada.jsx; el kit usa un solo
   selector para <a> y <button> (la evidencia navegable es <button> en el kit por accesibilidad;
   en este gemelo, sin JS, sigue siendo <a href> real; los dos comparten el mismo reset). */
a.exds-expl-evidencia, button.exds-expl-evidencia {
  color: var(--fg1, #0F1419);
  text-decoration: underline;
  text-decoration-color: var(--color-border-default, #D1D5DB);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1));
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
}
a.exds-expl-evidencia:hover, button.exds-expl-evidencia:hover {
  text-decoration-color: var(--fg1, #0F1419);
}
button.exds-expl-evidencia:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-border-focus, #6E7378);
}