/* Anatomía del estado de cuenta (/estado-de-cuenta-afore) — .edc
 *
 * Reemplaza al SVG de 720x486 que llevaba class="fig--wide", o sea min-width:640px
 * (app.css:763): en un teléfono de 412px la figura pedía scroll lateral para leer ocho bloques
 * que son puro texto. Acá las dos hojas son dos carriles que colapsan a uno solos.
 *
 * Las reglas de la casa y las piezas compartidas (.figh__t, .figh__st, .figh__pie, .figh__n)
 * están en ../figuras.css; esta hoja sólo trae lo específico de esta figura.
 */

/* Las dos caras del documento. auto-fit + minmax es lo que las pasa de dos columnas a una sin
   una sola media query: cuando 280px por carril ya no entran, se apilan. align-items:start
   porque las hojas tienen distinta altura (el anverso trae cinco bloques y el reverso tres) y
   no hay ninguna razón para estirar la corta. */
.edc__caras{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;
  align-items:start}

/* La hoja: el papel. overflow:hidden es lo que recorta la banda de color contra el radio del
   borde, sin tener que repetir el redondeo arriba. */
.edc__hoja{border:1.5px solid var(--border);border-radius:12px;overflow:hidden;
  background:var(--surface-alt)}

/* La cabecera de color de cada cara. flex-wrap porque en un carril angosto el rótulo de la
   derecha ("lo que ves primero") no tiene sitio al lado del título y baja a su renglón. */
.edc__banda{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:9px 13px;
  background:var(--brand);color:#fff}
.edc__hoja--rev .edc__banda{background:var(--brand-l)}
/* El rótulo de la cara es un <strong>, y `strong{color:var(--brand-d)}` (app.css:100) es una
   regla GLOBAL que también entra acá: pintaría azul oscuro sobre la banda azul, que es el
   azul-sobre-azul de 1,38:1 que este repo ya se comió una vez. Hereda el blanco de la banda,
   y el selector va con el padre para ganarle en especificidad al selector de tipo. */
.edc__banda .edc__cara{font-size:13.5px;font-weight:800;color:inherit;min-width:0}
/* margin-left:auto lo empuja al otro extremo mientras haya sitio; cuando la banda envuelve,
   el auto ya no tiene sobrante que repartir y queda alineado a la izquierda solo. */
.edc__sub{margin-left:auto;font-size:11.5px;opacity:.85}

/* Los bloques de cada cara. El <ol> lleva list-style:none porque el número lo dibuja el disco
   —si no, saldría dos veces—, pero el orden sigue en el marcado: es contenido, la página habla
   de "el bloque 5" y "el bloque 8". */
.edc__bloques{list-style:none;margin:0;padding:13px;display:grid;gap:7px}
/* 22px es el diámetro exacto del disco .figh__n: la columna no lo aplasta ni le sobra aire.
   minmax(0,1fr) en la segunda para que un texto largo envuelva en vez de estirar la fila. */
.edc__bloque{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;
  padding:11px 12px;border-radius:10px;background:var(--tile)}
.edc__bloque h4{margin:0 0 3px;font-size:13.5px;font-weight:800;color:var(--brand-d);
  line-height:1.3}
.edc__bloque p{margin:0;font-size:13px;line-height:1.5;color:var(--soft)}

/* El consejo accionable, dentro de la hoja del reverso: en el SVG ocupaba el hueco que dejaban
   sus tres bloques, y acá sigue colgando de ella para que al apilarse en móvil caiga pegado al
   bloque 8 del que habla. El margen repite el padding del <ol> de arriba. */
.edc__tip{margin:0 13px 13px;padding:12px 14px;border:1.5px solid var(--warn);border-radius:10px;
  background:var(--warn-bg)}
.edc__tip h4{margin:0 0 4px;font-size:13px;font-weight:800;color:var(--warn);line-height:1.3}
.edc__tip p{margin:0;font-size:13px;line-height:1.5;color:var(--soft)}