/* Por dónde sale el dinero de la subcuenta de vivienda (/subcuenta-de-vivienda) — .salv
 *
 * Reemplaza al SVG de 720x420 que llevaba class="fig--wide", o sea min-width:640px
 * (app.css:763): en un teléfono de 412px las cinco filas de salida pedían scroll lateral para
 * leer algo que es puro texto, y cada fila era un rectángulo de 460px con dos <text> que no
 * envuelven. Acá el origen va arriba, las salidas debajo en la rejilla compartida, y todo se
 * reacomoda solo de cuatro columnas a una.
 *
 * Las reglas de la casa y las piezas compartidas (.figh__t, .figh__st, .figh__pie, .figh__cajas,
 * .figh__caja, .figh__caja--acento) están en ../figuras.css; esta hoja sólo trae lo específico.
 */

/* ── El origen ─────────────────────────────────────────────────────────────────────────────
   El ámbar de aviso viene del SVG y no es decoración: el punto entero de la figura es que esta
   bolsa NO se comporta como el resto de la cuenta individual. overflow:hidden recorta la banda
   contra el radio del borde, sin repetir el redondeo arriba. */
.salv__origen{border:1.5px solid var(--warn);border-radius:12px;overflow:hidden;
  background:var(--warn-bg)}

/* La banda del título. El color blanco vive acá, en el contenedor, y no en cada hijo. */
.salv__banda{margin:0;padding:9px 14px;background:var(--warn);color:#fff}
/* `strong{color:var(--brand-d)}` (app.css:100) es una regla GLOBAL que también entra acá:
   pintaría azul oscuro sobre la banda ámbar. Es la trampa que este repo ya se comió una vez
   (azul-sobre-azul, 1,38:1). Hereda el blanco de la banda, y el selector va con el padre para
   ganarle en especificidad al selector de tipo. */
.salv__banda .salv__tit{font-size:13.5px;font-weight:800;color:inherit}

.salv__cuerpo{padding:14px}

/* Los dos datos del origen. auto-fit + minmax los pone lado a lado en cuanto entran y los
   apila cuando no, sin una sola media query. */
.salv__datos{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:12px 20px}
.salv__dato dt{margin:0;font-size:12.5px;font-weight:700;color:var(--soft)}
.salv__dato dd{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--soft)}

/* El nombre del instituto es EL dato de la caja, así que va en la voz fuerte del tema. En el
   SVG estaba en --warn, pero ámbar sobre --warn-bg se cae a ~2:1 en el preview oscuro (que
   redefine el fondo y no el ámbar); --brand-d se lee bien en los dos modos. display:block
   porque en el SVG el paréntesis iba en su propio renglón. */
.salv__inst{display:block;font-size:15px;font-weight:800;color:var(--brand-d)}
.salv__alt{display:block;font-size:12.5px;color:var(--soft)}

/* Qué hace (y qué no hace) la AFORE con este dinero. Filete y no otra caja: es la conclusión de
   los dos datos de arriba, no un tercer dato. */
.salv__nota{margin:13px 0 0;padding:11px 0 0;border-top:1px solid var(--warn-bd);font-size:13px;
  line-height:1.5;color:var(--soft)}

/* ── El conector ───────────────────────────────────────────────────────────────────────────
   Dibujado con bordes y no con un glifo "↓": así no lo recita un lector de pantalla, no depende
   de que la fuente traiga la flecha y no hay nada de texto que traducir. Los px son legítimos
   acá: es un filete que no debe crecer con el ancho. */
.salv__flecha{position:relative;height:24px;margin:0}
.salv__flecha::before{content:"";position:absolute;left:50%;top:2px;margin-left:-1px;width:2px;
  height:14px;background:var(--brand-l)}
.salv__flecha::after{content:"";position:absolute;left:50%;top:15px;margin-left:-6px;width:0;
  height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:8px solid var(--brand-l)}

/* ── Las salidas ───────────────────────────────────────────────────────────────────────────
   La rejilla y la tarjeta son las compartidas (.figh__cajas / .figh__caja--acento con --fc):
   esto sólo le saca al <ul> las viñetas y el sangrado que trae de fábrica. */
.salv__salidas{list-style:none;margin:0;padding:0}

/* ── La salida que no existe ───────────────────────────────────────────────────────────────
   Queda fuera del <ul> a propósito, pero con el mismo filete lateral de 4px que las salidas
   reales: la figura existe justamente porque la gente la cuenta como la quinta caja, y el color
   de error es lo único que la separa. */
.salv__no{margin:12px 0 0;padding:14px 15px;border:1.5px solid var(--danger);
  border-left-width:4px;border-radius:12px;background:var(--danger-bg)}
.salv__no h4{margin:0 0 5px;font-size:14.5px;font-weight:800;line-height:1.3;color:var(--danger)}
.salv__no p{margin:0;font-size:13px;line-height:1.5;color:var(--soft)}

@media (max-width:720px){
  .salv__cuerpo{padding:12px}
  .salv__inst{font-size:14.5px}
}