/* mx-afore — los dos calendarios anuales.
 *
 *   .cald  → «El calendario del dato» (/rendimientos-afore): cuatro carriles con ritmos distintos.
 *   .cedc  → «Los tres envíos del año» (/{afore}/estado-de-cuenta, o sea 10 URLs).
 *
 * ── DE DÓNDE VIENEN ────────────────────────────────────────────────────────────────────────────
 * Los dos eran SVG de 720px con class="fig--wide", que es min-width:640px (app.css:763). En un
 * teléfono de 412px eso son 228px de scroll lateral sobre un dibujo cuyo eje X ES la información:
 * un calendario que hay que arrastrar de lado no se lee, se adivina.
 *
 * ── LA DECISIÓN DE MÓVIL ───────────────────────────────────────────────────────────────────────
 * Contra lo que parece, el año de 12 meses SÍ entra en 412px, y por eso no lo troceamos en una
 * rejilla que envuelve ni en una lista por periodo: perder el eje X sería perder la figura entera
 * (todo el argumento de las dos es «mirá a qué altura del año cae cada cosa»). La cuenta, medida
 * en el navegador: en una ventana de 412px la figura mide 336px, y 12 columnas con 2px de aire
 * dan 26,2px por mes — entran «Ene» a 11,1px y «S» a 12,5px, sin recorte. Lo que NO entra en
 * 412px es la columna de rótulos que el SVG tenía a la izquierda del año (168px, casi la mitad
 * del ancho del teléfono).
 *
 * Así que lo que se mueve en móvil no es el calendario: es el rótulo. Cada carril pasa de
 * «nombre a la izquierda | año a la derecha» a «nombre arriba, año abajo a ancho completo». La
 * regla de meses queda siempre a ancho completo, y como todas las pistas usan EXACTAMENTE la misma
 * rejilla de 12 columnas, las columnas siguen alineadas con la regla en cualquier ancho.
 *
 * Y todo lo que en el SVG era texto metido dentro de una barra angosta (los rótulos de los envíos,
 * que a 4/12 del ancho quedarían en 90px) sale de la barra y baja debajo, en texto corrido. La
 * barra se queda con el color, que es lo que sí sobrevive a cualquier ancho.
 *
 * ── ACCESIBILIDAD ──────────────────────────────────────────────────────────────────────────────
 * La regla de meses va aria-hidden: es una escala visual, y un lector de pantalla recitando
 * «E F M A M J J A S O N D» sólo agrega ruido. La información que la escala transmite con la
 * posición está en el texto de cada carril («CONSAR · cada mes», «Enero a abril», «Noviembre»).
 *
 * Las reglas de la casa y las piezas compartidas (.figh__t, .figh__st, .figh__pie) están en
 * ../figuras.css; acá sólo va lo propio de estas dos figuras.
 */

/* ============================================================
   Base común a los dos calendarios
   ============================================================ */

/* --cal-gap es el aire entre meses y --cal-lbl el ancho de la columna de rótulos. Van como
   variables porque la regla y las cuatro pistas se posicionan CONTRA ellas: cambiarlas en la
   media query mueve todo a la vez, sin números sueltos que se desincronicen.

   container-type:inline-size no es un lujo: el nombre del mes tiene que encogerse contra el ancho
   de LA FIGURA, no contra el de la ventana. La figura vive dentro del .fig__box, que a su vez está
   dentro del contenedor de la página, y entre los dos se comen ~76px en un teléfono; con vw el
   cálculo daba siempre de más y «May» quedaba recortado. */
.cal{container-type:inline-size; --cal-gap:3px; --cal-lbl:clamp(128px,22%,186px)}

/* La regla de meses y cada pista comparten la misma rejilla de 12 columnas y el mismo gap: es lo
   único que hace que un bloque de la fila 4 caiga bajo su mes sin una sola coordenada.
   minmax(0,1fr) y no 1fr porque una celda con texto ancho («Sep») no debe empujar su columna:
   preferimos que recorte antes que desalinear el calendario. */
.cal__regla,.cal__pista{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--cal-gap)}

/* El 3,3cqw sale de una cuenta, no del ojo: la celda mide (100cqw − 11 huecos)/12 y el mes más
   ancho de los dos calendarios («May», tres letras) ocupa 2,27 em. Con 3,3cqw la letra queda
   siempre por debajo de lo que entra, con ~1px de margen para que no recorte si no carga la
   tipografía y entra la del sistema, y el clamp la corta arriba en 12,5px (el tamaño del SVG
   original) y abajo en 10px, que es el piso de legibilidad que nos pusimos. */
.cal{--cal-mes-fs:clamp(10px,3.3cqw,12.5px)}
.cal__mes{padding:4px 0;border-radius:6px;background:var(--tile);text-align:center;
  font-size:var(--cal-mes-fs);font-weight:700;line-height:1.25;color:var(--soft);
  overflow:hidden}

/* Por debajo de 312px de figura (teléfonos de ~375px de ventana o menos) ni a 10px entra «Sep»,
   así que el mes se queda en su inicial. El corte está puesto ahí y no más arriba para que el
   teléfono más común —390-412px de ventana— sí llegue a ver el nombre.
   No es texto que desaparezca: la palabra sigue en el DOM, y el periodo va escrito completo
   debajo de cada barra («Septiembre a diciembre»). Es la misma abreviatura que usa el otro
   calendario de este archivo. */
@container (max-width:312px){
  .cal__mes-resto{display:none}
}

/* ============================================================
   .cald — «El calendario del dato» (/rendimientos-afore)
   ============================================================ */

/* Esta figura rotula los meses con una sola letra, que ocupa 0,62 em: le sobra sitio hasta en el
   teléfono más angosto, así que no tiene por qué encogerse con la de tres letras. */
.cal.cald{--cal-mes-fs:clamp(11px,6cqw,12.5px)}

/* El carril: rótulo a la izquierda, año a la derecha. La REGLA de meses usa la misma rejilla y
   se salta la columna del rótulo con grid-column:2 — si no, quedaría a ancho completo mientras
   las pistas viven en la segunda columna, y el hito de noviembre caería 57px a la derecha de su
   mes. Es exactamente el bug que tenía la primera versión de esta hoja. */
.cald__fila,.cald__carril{display:grid;grid-template-columns:var(--cal-lbl) minmax(0,1fr);
  gap:8px 16px;align-items:center}
.cald__regla{grid-column:2;margin:0 0 6px}

.cald__carriles{list-style:none;margin:0;padding:0}

/* El filete de arriba es la línea horizontal que el SVG dibujaba entre carril y carril; va en
   cada uno menos el primero, que ya tiene la regla de meses encima. */
.cald__carril{padding:14px 0}
.cald__carril + .cald__carril{border-top:1px solid var(--border)}

.cald__nom{margin:0;font-size:13px;font-weight:800;line-height:1.3;color:var(--brand-d)}
.cald__fuente{margin:2px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}

/* La zona derecha del carril: puede llevar una o dos pistas más una nota debajo. */
.cald__cont{display:grid;gap:6px;min-width:0}

/* Marca de un mes concreto. Los 13px del disco son de las cosas que NO deben crecer con el ancho:
   a 28px de columna ya llena el mes, y estirarlo lo convertiría en un óvalo. */
.cald__punto{justify-self:center;width:13px;height:13px;border-radius:50%;
  background:var(--brand-l)}
/* Hueco = el estado de cuenta: mismo ritmo, distinto peso. Es el mismo código de color del SVG
   (relleno de superficie con borde de marca), no un color nuevo. */
.cald__punto--hueco{background:var(--surface);border:2.5px solid var(--brand)}

/* Banda de «vigente todo el año» y el hito que la interrumpe. Los dos se fuerzan a grid-row:1
   para que el hito quede ENCIMA de la banda y no en una fila nueva: el PHP sólo pone la columna,
   que es el dato. */
.cald__banda,.cald__hito{grid-row:1}
.cald__banda{display:flex;align-items:center;min-height:22px;padding:0 12px;border-radius:8px;
  background:var(--tile);font-size:11.5px;line-height:1.3;color:var(--soft)}
/* --accent-t y no --accent: es el mismo verde del carril (su variante de texto), pero blanco
   sobre --accent da 3,0:1 y sobre --accent-t da 5,0:1. El código de color se conserva; lo que se
   corrige es el contraste, que es exactamente la trampa que este repo ya se comió una vez. */
.cald__hito{justify-self:center;align-self:center;display:inline-flex;align-items:center;
  justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--accent-t);
  color:#fff;font:800 12px/1 var(--font)}

/* Las dos mediciones del Monitor Afore. El texto va DENTRO de la barra porque acá sí cabe: la más
   corta ocupa 6 de 12 columnas (167px en una ventana de 412px) y el rótulo mide ~105px a 11,5px.
   Blanco sobre --ok da 5,3:1 y sobre --brand 9,1:1; el SVG les ponía opacity:.85, que acá se cae
   porque bajaba el contraste sin aportar nada. */
.cald__medicion{display:flex;align-items:center;min-height:22px;padding:0 10px;border-radius:8px;
  font-size:11.5px;font-weight:700;line-height:1.25;color:#fff}
.cald__medicion--sem{background:var(--ok)}
.cald__medicion--anual{background:var(--brand)}

/* La nota que cuelga de un hito. El chip del mes es contenido de verdad, no adorno: la posición
   del hito en la regla se pierde para quien no ve la figura, y sin él la frase «se autorizan las
   del año siguiente» no dice cuándo. Sale del alt del SVG, que decía «hacia noviembre». */
.cald__marca{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;
  font-size:12.5px;line-height:1.45;color:var(--soft)}
.cald__mes-chip{flex:none;padding:2px 8px;border-radius:var(--r-pill);background:var(--accent-bg);
  border:1px solid var(--accent-bd);font-size:11px;font-weight:800;color:var(--accent-t)}

/* ============================================================
   .cedc — «Los tres envíos del año» (/{afore}/estado-de-cuenta)
   ============================================================ */

.cedc__regla{margin:0 0 4px}

.cedc__envios{list-style:none;margin:0;padding:0}

/* Cada envío pone su color en --cf (el relleno de la barra) y en --cc (el texto). No son el mismo
   token a propósito en el verde: --accent tiene el peso visual que la barra necesita, pero como
   COLOR DE TEXTO sobre --surface-alt da 2,7:1 y hay que bajar a --accent-t (4,8:1). Es el mismo
   código de color del carril, en su variante legible. */
.cedc__envio{padding:14px 0}
.cedc__envio + .cedc__envio{border-top:1px solid var(--border)}

/* La pista de un envío: el año entero en gris claro y sus cuatro meses pintados encima. El fondo
   va en el contenedor y no en doce celdas vacías porque es exactamente eso, un fondo. */
.cedc__pista{align-items:stretch;min-height:22px;border-radius:8px;background:var(--border-2)}
.cedc__bloque{border-radius:8px;background:var(--cf,var(--brand))}

.cedc__pdo{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 9px;margin:9px 0 0}
/* `strong{color:var(--brand-d)}` (app.css:100) es GLOBAL y también entra acá: sin este selector
   los tres periodos saldrían del mismo azul y se perdería el código de color del carril. */
.cedc__pdo strong{font-size:14px;font-weight:800;line-height:1.3;color:var(--cc,var(--brand))}
.cedc__cubre{font-size:12px;font-weight:600;line-height:1.3;color:var(--muted)}

/* El cuadradito repite el color de la barra: cuando la figura se apila en un teléfono es lo único
   que ata «Te llega en MAYO» con la franja pintada de arriba. */
.cedc__llega{display:flex;align-items:baseline;gap:8px;margin:6px 0 0;font-size:14px;
  font-weight:800;line-height:1.35;color:var(--cc,var(--brand))}
.cedc__llega::before{content:"";flex:none;width:9px;height:9px;border-radius:2px;
  background:var(--cf,var(--brand))}
.cedc__nota{margin:2px 0 0 17px;font-size:12.5px;line-height:1.45;color:var(--muted)}

/* ============================================================
   Móvil
   ============================================================ */

@media (max-width:720px){
  /* El rótulo deja de ser columna y pasa a renglón: son los 128-186px que el año necesita para no
     encogerse. La regla vuelve a la columna 1 junto con todo lo demás, así que las 12 columnas de
     cada pista siguen cayendo debajo de su mes. */
  .cald__fila,.cald__carril{grid-template-columns:minmax(0,1fr);gap:8px}
  .cald__regla{grid-column:1}
  /* 2px en vez de 3: con 12 columnas son 11px que vuelven al texto de los meses. */
  .cal{--cal-gap:2px}
  .cald__banda,.cald__medicion{padding:0 8px}
  .cald__punto{width:11px;height:11px}
}