/* Figura «Cómo se arma la calificación de una AFORE» — /monitor-afore-consar (sb_fig_monitor_puntuacion)
 *
 * Arquetipo: FLUJO de tres etapas en fila (los indicadores → la puntuación de cada uno → la
 * valoración integral). Era un SVG de 720x322 con coordenadas absolutas y texto de 11,5 a 13,5px,
 * declarado con ancho mínimo de 640px: en un teléfono de 412px pedía scroll lateral y era
 * ilegible. Un SVG así escala como imagen y su texto no refluye; acá las tres etapas pasan solas
 * de tres carriles a dos y a uno.
 *
 * El armazón lo pone figuras.css (.figh__t, .figh__st, .figh__pie para los textos de marco;
 * .figh__caja y .figh__caja--acento para las cajas; .figh__barra para la barra de la valoración).
 * Acá va sólo lo que esta figura tiene y ninguna otra: la cifra grande de cada bloque, la escala
 * de -10 a +10, el medidor con la marca de la medición anterior y las flechas entre etapas.
 *
 * El color de cada bloque de indicadores viaja en --fc, que el PHP fija en el style del <li>: es
 * dato de la figura, no del tema, igual que --gc en .arbol y --dc en .dest.
 */

/* --mgap es el carril entre etapas Y la distancia a la que se planta la flecha: las flechas se
   posicionan CONTRA él, así que cambiarlo en una media query mueve gap y flecha a la vez. */
.mon{--mgap:26px}

/* ── El flujo ──────────────────────────────────────────────────────────────────────────────── */

/* Los tres carriles imitan la proporción del SVG (200 / 190 / 234 px de ancho de caja), pero en
   fracciones: el dibujo se ve igual de proporcionado a 1030px que a 700. minmax(0,…) para que el
   texto largo de un bloque no infle su columna y desbalancee las otras dos. */
.mon__flujo{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr) minmax(0,1.15fr);gap:var(--mgap)}

.mon__etapa{position:relative;min-width:0}

/* La flecha que unía una etapa con la siguiente. Se dibuja con dos bordes de un cuadrado girado
   —no hay marcado ni glifo que un lector de pantalla pueda llegar a recitar— y se centra en el
   carril: el desplazamiento es la mitad del gap menos medio ancho de la punta, así que sigue
   centrada aunque cambie --mgap. La última etapa no lleva. */
.mon__etapa:not(:last-child)::after{content:"";position:absolute;width:9px;height:9px;
  border-right:2.5px solid var(--brand-l);border-bottom:2.5px solid var(--brand-l);
  top:50%;right:calc(4.5px - var(--mgap) / 2);transform:translateY(-50%) rotate(-45deg)}

/* ── Etapa 1: los dos bloques de indicadores ───────────────────────────────────────────────── */

/* align-content:start para que las dos cajas queden arriba y no se estiren a la altura de la
   etapa más alta: en el SVG eran dos cajas de alto fijo, no una columna llena. */
.mon__inds{list-style:none;margin:0;padding:0;display:grid;gap:12px;align-content:start}

/* La cifra grande a la izquierda y el rótulo en dos renglones a la derecha, como en el SVG. Es
   una rejilla dentro del h4 —y no dos elementos sueltos— para que el título se lea de corrido:
   "18 indicadores operativos". */
.mon__ind-t{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  column-gap:11px}
.mon__cifra{font-size:27px;font-weight:800;line-height:1;color:var(--fc,var(--brand));
  font-variant-numeric:tabular-nums}
/* .mon__ind-txt es un bloque normal, NO otra rejilla: si lo fuera, el texto suelto de al lado del
   span se volvería un ítem propio y "operativos" saldría separado de "indicadores". Es el mismo
   tropiezo que ya dio la tabla comparativa en móvil. */
.mon__ind-txt{line-height:1.25}
/* "indicadores" iba en 13px/600 y color --soft (la clase t-lbl del SVG); la palabra que
   distingue el bloque se queda con el peso y el color del h4 de .figh__caja. */
.mon__ind-k{display:block;font-size:13px;font-weight:600;color:var(--soft)}

/* ── Etapa 2: la puntuación ────────────────────────────────────────────────────────────────── */

/* El SVG le daba a esta caja el relleno de azulejo y el borde --brand-l (box-b) para que se leyera
   como el paso donde ocurre la regla, y no como una caja más. Va con .mon delante porque
   .figh__caja pinta --surface-alt con la misma especificidad: sin el ancestro quedaría dependiendo
   del orden de carga de las hojas.
   La columna flex es para que el renglón de alarma se apoye en el piso de la caja: las tres etapas
   se igualan en alto (son celdas de la misma fila) y ésta tiene menos texto que las otras, así que
   sin esto le quedaba un hueco muerto de casi medio alto. Mismo recurso que .dest__col. */
.mon .mon__punt{display:flex;flex-direction:column;background:var(--tile);
  border-color:var(--brand-l);border-width:1.5px}

.mon__escala{margin:12px 0 0}

/* Los dos tramos de la escala. overflow:hidden redondea las puntas contra el radio del riel, que
   es lo que hacían los dos rx del SVG.
   El corte va exactamente al medio: con -10, 0 y +10 rotulados, un cero corrido —en el SVG caía
   al 40% del riel— diría que del 0 al -10 hay menos camino que del 0 al +10, y no es así. */
.mon__track{display:flex;height:11px;border-radius:6px;overflow:hidden}
.mon__track i{flex:1}
.mon__track--neg{background:var(--danger)}
.mon__track--pos{background:var(--ok)}

/* Los topes de la escala. El de en medio va absoluto al 50% y no como tercer ítem del flex:
   repartido con space-between, el "0" quedaría centrado en su tercio y no sobre el corte. */
.mon .mon__ticks{position:relative;display:flex;justify-content:space-between;margin:7px 0 0;
  font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.mon__tick--c{position:absolute;left:50%;transform:translateX(-50%)}

/* El único renglón de alarma de la figura, igual que en el SVG. Sobre el azulejo claro --danger
   pasa de sobra el contraste; el .mon delante es para ganarle al color --soft de .figh__caja p.
   margin-top:auto se come el sobrante de la columna y lo baja al piso; el padding es la
   separación mínima para cuando no hay sobrante que comer (la caja apilada en móvil). */
.mon .mon__resta{margin:0;padding-top:13px;font-size:12px;font-weight:700;color:var(--danger)}
.mon .mon__punt .mon__resta{margin-top:auto}

/* ── Etapa 3: la valoración integral ───────────────────────────────────────────────────────── */

.mon .mon__form{margin:0 0 10px}

/* El medidor: la barra compartida más una marca que sobresale arriba y abajo. La marca va FUERA
   de .figh__barra a propósito —esa barra recorta con overflow:hidden y le comería los extremos— y
   se centra sobre su posición con el translate, así que el % del style inline es el valor exacto,
   no el borde izquierdo de un trazo de 2,5px. */
.mon__medidor{position:relative;margin:6px 0 0}
/* ⚠️ display:block y no es cosmética: .figh__barra de figuras.css no lo trae, y sobre un <span>
   —que es inline— el alto y el fondo no pintan nada. Se veía la marca verde flotando sola sobre
   un riel que no existía. */
.mon__medidor .figh__barra{display:block;height:12px;border-radius:6px}
/* El relleno compartido es --brand-l; acá el relleno es la medición vigente y va en --brand, como
   en el SVG, para que se distinga de la marca verde de la medición anterior. */
.mon__medidor .figh__barra i{background:var(--brand)}
.mon__marca{position:absolute;top:-4px;bottom:-4px;width:2.5px;border-radius:2px;
  background:var(--accent);transform:translateX(-50%)}

.mon__hitos{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:4px;font-size:12.5px;
  line-height:1.45;color:var(--soft)}
.mon__v{font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
/* --accent-t y no --accent: 12,5px es texto normal para WCAG y el verde de marca sobre fondo
   claro se queda en 3,0:1. El --accent sí se usa para la marca del medidor, que es un trazo y no
   texto. Mismo criterio que .figh__n--ok en figuras.css. */
.mon__v--jun{color:var(--accent-t)}

/* ── Pie ───────────────────────────────────────────────────────────────────────────────────── */

/* Las dos notas al pie eran dos <text> sueltos; acá son dos párrafos dentro del pie compartido,
   con el margen de párrafo global anulado para que no se abra un renglón entero entre ellas. */
.mon .mon__pie p{margin:0}
.mon .mon__pie p+p{margin-top:5px}

@media (max-width:900px){
  /* Dos carriles: los dos bloques de indicadores ocupan la fila de arriba y las otras dos etapas
     van debajo, una al lado de la otra. La flecha de la primera etapa pasa a apuntar hacia abajo;
     la de la segunda sigue apuntando a la derecha, que es adonde sigue el flujo. */
  .mon__flujo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mon__etapa:first-child{grid-column:1 / -1}
  .mon__inds{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .mon__etapa:first-child::after{top:auto;right:auto;left:50%;
    bottom:calc(4.5px - var(--mgap) / 2);transform:translateX(-50%) rotate(45deg)}
}

@media (max-width:620px){
  /* Un solo carril y todas las flechas hacia abajo. El carril se angosta porque en un teléfono
     esos 26px son ancho de texto. */
  .mon{--mgap:22px}
  .mon__flujo{grid-template-columns:1fr}
  .mon__etapa:not(:last-child)::after{top:auto;right:auto;left:50%;
    bottom:calc(4.5px - var(--mgap) / 2);transform:translateX(-50%) rotate(45deg)}
  .mon__cifra{font-size:24px}
}