/* Figuras COMPARTIDAS — las de partials/figuras.php, que usa más de una página.
 *
 * Son tres y cada una es un arquetipo distinto:
 *   · .sub  → TRES CAJAS COMPARADAS  (sb_fig_subcuentas, /estado-de-cuenta-afore)
 *   · .vias → RANKING de cuatro filas (sb_fig_vias_localizar)
 *   · .esc  → ESCALERA, serie año a año (sb_fig_escalera_semanas, /semanas-cotizadas-para-pensionarte)
 *
 * El armazón lo pone figuras.css (.figh__t / .figh__st / .figh__pie para los textos de marco,
 * .figh__cajas para la rejilla, .figh__barra para las barras); acá va sólo lo que estas figuras
 * tienen y ninguna otra.
 *
 * Esta hoja se carga DESPUÉS de figuras.css (el glob de layout.php va detrás), así que en empate
 * de especificidad gana lo de acá. Aun así los selectores llevan el ancestro (.sub .sub__caja y
 * no .sub__caja a secas) para no depender del orden de carga: si mañana se funden las hojas, esto
 * sigue pintando igual.
 */

/* ==========================================================================================
   .sub — Las tres subcuentas del estado de cuenta
   ========================================================================================== */

/* Cada bolsa trae dos datos de color en el style del PHP: --fc (el acento: cabecera y borde) y
   --fbg (el tinte del cuerpo). Son dato de la figura, no del tema: azul la RCV, ámbar la de
   vivienda —la que confunde a todo el mundo— y verde las voluntarias.
   El padding de .figh__caja se anula porque la cabecera tiene que sangrar hasta el borde; el
   overflow:hidden es lo que le recorta las esquinas contra el radio de la caja. */
.sub .sub__caja{padding:0;overflow:hidden;background:var(--fbg,var(--surface-alt));
  border-color:var(--fc,var(--brand))}

/* ⚠️ Texto blanco sobre fondo de color: acá vive la trampa de la casa. `.figh__caja h4` pinta el
   título de var(--brand-d), que sobre la cabecera azul daría azul-sobre-azul. Dos clases (0,2,0)
   le ganan de sobra a clase+elemento (0,1,1). Los tres fondos pasan 5:1 contra el blanco. */
.sub .sub__cab{margin:0;padding:9px 14px;background:var(--fc,var(--brand));color:#fff;
  font-size:14px;font-weight:800;line-height:1.3}

.sub__cuerpo{padding:13px 14px 15px}

/* "Retiro, Cesantía y Vejez" y sus pares: qué ES la bolsa, antes de las reglas. */
.sub .sub__que{margin:0 0 13px;font-size:13px;font-weight:600;line-height:1.45;color:var(--soft)}

/* Pares rótulo-dato. Los <dt> van en --soft y no en --muted como el resto de las figuras porque
   acá el fondo está tintado: --muted sobre var(--tile) cae a 3,5:1 y no alcanza para 12px. */
.sub__datos{margin:0}
.sub__datos dt{margin:0;font-size:12.5px;line-height:1.4;color:var(--soft)}
.sub__datos dd{margin:2px 0 12px}
.sub__datos dd:last-child{margin-bottom:0}

/* ⚠️ Los dos datos destacados son <strong>, y `strong{color:var(--brand-d)}` de app.css:100 es
   global: sin esto, "El INFONAVIT" perdería el ámbar que es justamente lo que lo señala como el
   único administrador que no es tu AFORE. */
.sub .sub__admin{font-size:15px;font-weight:800;color:var(--brand-d)}
.sub .sub__admin--warn{color:var(--warn)}

/* La respuesta a "¿puedes retirar?" es el renglón que decide la lectura de la figura entera:
   verde el sí, rojo el no. Queda inline para que la coletilla de al lado pueda continuar la
   frase cuando corresponde. */
.sub .sub__resp{font-size:14px;font-weight:800}
.sub .sub__resp--ok{color:var(--ok)}
.sub .sub__resp--no{color:var(--danger)}

/* Dos formas de seguir la respuesta, que en el SVG eran el mismo <text> chico y acá no lo son:
   .sub__nota es una frase aparte y baja de renglón ("Crédito o al pensionarte"); .sub__sigue
   continúa la oración anterior y por eso se queda en línea ("…según el plazo que elegiste"). */
.sub__nota{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--soft)}
.sub__sigue{font-size:13.5px;line-height:1.4;color:var(--soft)}

/* ==========================================================================================
   .vias — Las cuatro vías para localizar tu AFORE, por rapidez
   ========================================================================================== */

/* <ol> sin viñetas: el orden es contenido (van de la más rápida a la más lenta), pero los números
   no aportan nada visible que el propio orden no diga ya. Mismo criterio que .figh__pasos. */
.vias__lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}

/* Tres carriles en pantalla ancha —nombre | cuánto tarda | qué te pide—, uno solo en el teléfono.
   El filete de color de la izquierda es el mismo trazo de 5px que llevaba cada fila del SVG. */
.vias__via{display:grid;grid-template-columns:minmax(140px,1fr) minmax(180px,1.5fr) minmax(130px,1fr);
  gap:10px 16px;align-items:center;padding:12px 14px;border:1px solid var(--border);
  border-left:4px solid var(--fc,var(--brand));border-radius:11px;background:var(--surface-alt)}

.vias .vias__nombre{margin:0;font-size:14px;font-weight:700;line-height:1.35;color:var(--brand-d)}

.vias__campo{display:grid;gap:4px;min-width:0}

/* Rótulo de columna. En el SVG no existía: las tres columnas se entendían por su posición, pista
   que desaparece en cuanto la fila se apila. Es un rótulo, no un título, así que no compite con
   el nombre de la vía. */
.vias__lbl{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.vias__val{font-size:13px;line-height:1.4;color:var(--soft)}

/* La barra es ILUSTRATIVA, no un dato: no hay cifra oficial de cuánto tarda cada vía, y por eso
   va aria-hidden en el PHP. Toma el color de su fila para que el ojo agrupe barra y filete. */
.vias .vias__barra{height:8px;max-width:170px}
.vias .vias__barra i{background:var(--fc,var(--brand-l))}

/* ==========================================================================================
   .esc — La escalera de semanas de la Ley 97
   ========================================================================================== */

/* El SVG apilaba once columnas verticales en 660px: en un teléfono cada peldaño quedaba en 4px de
   ancho con su año debajo, ilegible. En filas horizontales la serie entra entera en cualquier
   pantalla y encima se lee en el orden natural de lectura. */
.esc__lista{list-style:none;margin:0;padding:0;display:grid;gap:3px}

/* año | barra | semanas. Las dos columnas de cifras son auto con mínimo, no fijas: crecen si un
   año o un número se hacen más largos. tabular-nums alinea la escalera en vertical. */
.esc__f{display:grid;grid-template-columns:minmax(42px,auto) minmax(0,1fr) minmax(44px,auto);
  gap:12px;align-items:center;padding:5px 9px;border-radius:8px}
.esc__anio{font-size:12.5px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums}
.esc__sem{font-size:13px;font-weight:700;line-height:1.3;color:var(--soft);text-align:right;
  font-variant-numeric:tabular-nums}
.esc .esc__barra{height:12px}

/* Los años ya cumplidos, en el azul de marca. */
.esc .esc__f--pasado .esc__barra i{background:var(--brand-l)}

/* Los que faltan, el mismo azul atenuado. El SVG los pintaba de var(--border-2), que sobre el
   riel de .figh__barra —que ES var(--border-2)— desaparecería del todo. */
.esc .esc__f--futuro .esc__barra i{background:var(--brand-l);opacity:.32}

/* El año en curso. El pie de la figura dice "en verde", y el color no puede ser la única marca:
   la fila lleva además fondo propio, filete verde y las dos cifras en negrita sobre el azul
   oscuro del texto fuerte. El aria-current lo pone el PHP. El filete va como box-shadow interior
   y no como border para no correr la fila 1,5px respecto de las demás. */
.esc .esc__f--hoy{background:var(--ok-bg);box-shadow:inset 0 0 0 1.5px var(--accent)}
.esc .esc__f--hoy .esc__barra i{background:var(--accent)}
.esc .esc__f--hoy .esc__anio,.esc .esc__f--hoy .esc__sem{font-weight:800;color:var(--brand-d)}

/* ========================================================================================== */

@media (max-width:720px){
  /* Apiladas, las tres columnas se vuelven tres bloques con su rótulo, que es para lo que están
     los rótulos. El filete de color se queda: es lo que separa una vía de la siguiente. */
  .vias__via{grid-template-columns:1fr;gap:9px}
  .vias .vias__barra{max-width:none}
  .esc__f{gap:9px;padding:5px 7px}
}