/* Figura "Qué dato te encuentra a ti, y por dónde" — /en-que-afore-estoy
 *
 * Era un SVG de 720×352 con `.fig--wide`, o sea min-width:640px (app.css:763): en un teléfono de
 * 412px la tercera columna quedaba fuera de pantalla y había que arrastrar la página de lado. Es
 * el peor sitio para que eso pase: la figura es el diferencial de la página —el dato que sirve NO
 * es el mismo para todos— y la columna escondida era una de las dos que contradicen al resto de
 * internet.
 *
 * Acá son tres tarjetas dentro de `.figh__cajas` (la rejilla compartida de figuras.css): tres
 * columnas cuando entran, una sola apilada cuando no, sin una media query propia.
 *
 * Todo el color de una tarjeta sale de tres variables que fija el modificador. Es el mismo truco
 * de `--fc` en `.figh__caja--acento`: el modificador declara el color y las reglas de abajo no se
 * repiten tres veces.
 */

.qdl__col{
  /* Perfil normal (IMSS con AFORE ya elegida): azul de marca y el dato en verde de "sí sirve". */
  --qc:var(--brand);                 /* banda y borde */
  --qbg:var(--tile);                 /* fondo del cuerpo */
  --qd:var(--ok);                    /* el dato que funciona */
  display:flex;flex-direction:column;
  border:2px solid var(--qc);border-radius:12px;overflow:hidden;
  background:var(--qbg);
}
/* IMSS sin AFORE elegida: es el caso en el que la CURP no encuentra, y el ámbar está para que se
   note antes de leerlo. El dato va en --danger porque lo que dice es una restricción. */
.qdl__col--aviso{--qc:var(--warn);--qbg:var(--warn-bg);--qd:var(--danger)}
/* ISSSTE e independientes: mismo sistema, otra llave. Ni alerta ni recomendación, así que azul
   claro y el dato en azul oscuro. */
.qdl__col--alt{--qc:var(--brand-l);--qbg:var(--surface-alt);--qd:var(--brand-d)}

/* La banda del perfil. Va como <h4> por el hábito de la casa (`.figh__caja h4`), y eso arrastra
   `h1,h2,h3,h4{color:var(--brand-d)}` de app.css:80 — que sobre la banda azul da 1,4:1, o sea
   invisible. Es el mismo error que ya pasó con `strong` en `.anat__banda`; se corta acá con un
   color explícito, no confiando en heredar. */
.qdl__cab{
  margin:0;padding:11px 14px;
  background:var(--qc);color:#fff;
  font-size:13px;font-weight:800;line-height:1.35;
}

/* Las tres decisiones. <dl> y no párrafos sueltos: rótulo y contenido son un par, y así lo
   anuncia el lector de pantalla. */
.qdl__dl{margin:0;padding:13px 14px 14px}
.qdl__dl dt{font-size:12px;line-height:1.4;color:var(--muted)}
.qdl__dl dd{margin:3px 0 0;font-size:13px;font-weight:600;line-height:1.45;color:var(--soft)}
/* Los filetes que el SVG dibujaba entre bloque y bloque. Van en el rótulo que abre cada bloque
   nuevo, así que el primero no lleva ninguno y no hace falta una clase extra. */
.qdl__dl dd + dt{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
/* El dato es el remate de la tarjeta: es lo único que alguien se lleva de memoria al AforeWeb.
   Va con el padre en el selector porque `.qdl__dl dd` de arriba pesa más que una clase suelta y
   se lo comía (le devolvía el gris y los 13px). */
.qdl__dl .qdl__dato{font-size:16px;font-weight:800;color:var(--qd)}

@media (max-width:620px){
  /* Apiladas hay ancho de sobra para la frase del perfil, pero la tarjeta se ve más apretada:
     un punto más de aire adentro y la banda un pelo más chica compensan. */
  .qdl__cab{font-size:12.5px;padding:10px 13px}
  .qdl__dl{padding:12px 13px 13px}
}