/* Tablero de indicadores de México (México › Economía): lista compacta, un renglón por
   indicador (nombre y unidad · valor · cambio · minigráfica · fecha y fuente); en pantallas
   anchas, dos columnas. Usa los colores de la página (--ink, --accent, --hair…); --up/--dn
   solo existen en algunas páginas, por eso el respaldo. */
.ind{--ind-up:var(--up,#0d7a45);--ind-dn:var(--dn,#b3261e);margin:4px 0 26px;font-family:var(--sans)}
.ind[hidden]{display:none}
.ind-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding-bottom:8px}
.ind-head h3{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.ind-head p{font-size:12px;color:var(--ink3)}
.ind-grid{display:grid;grid-template-columns:minmax(0,1fr);border-top:2px solid var(--rule)}
/* dos columnas que se leen hacia abajo: mercado, tasas, precios y PIB a la izquierda; actividad, empleo y exterior
   a la derecha. Columnas independientes: si un renglón se parte en dos, no estira al de junto */
@media (min-width:1000px){
  .ind-grid{display:block;columns:2;column-gap:40px}
  .ind-t{break-inside:avoid;-webkit-column-break-inside:avoid}
  .ind-t.c2{break-before:column;-webkit-column-break-before:always}
}
.ind-t{display:grid;grid-template-columns:minmax(0,1fr) auto 96px;grid-template-areas:"l v s" "f d s";column-gap:14px;row-gap:1px;align-items:baseline;padding:9px 0 8px;border-bottom:1px solid var(--hair);min-width:0}
.ind-l{grid-area:l;font-size:13.5px;line-height:1.3;color:var(--ink);min-width:0}
.ind-l b{font-weight:600}
.ind-l span{font-size:11.5px;color:var(--ink3)}
.ind-v{grid-area:v;justify-self:end;font-size:20px;font-weight:600;line-height:1.15;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.ind-d{grid-area:d;justify-self:end;text-align:right;font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap}
/* color del cambio: verde si es buena noticia (baja la inflación, sube el PIB), rojo si es mala; neutro si no se califica */
.ind-d.good{color:var(--ind-up)} .ind-d.bad{color:var(--ind-dn)}
.ind-d .ar{font-size:9px;margin-right:3px;vertical-align:1px}
.ind-f{grid-area:f;font-size:11.5px;color:var(--ink3);min-height:1.4em}
.ind-f .u{display:none}
.ind-f b{font-weight:600;color:var(--ink2)}
.ind-s{grid-area:s;align-self:center;position:relative;height:30px;margin-right:7px;cursor:crosshair;touch-action:pan-y}
.ind-s:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ind-s svg{display:block;width:100%;height:100%;overflow:visible}
.ind-s .ln{fill:none;stroke:var(--ink3);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ind-s .band{fill:var(--accent);opacity:.12}
.ind-s .dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--paper);pointer-events:none}
.ind-s .dot.hv{background:var(--ink);display:none}
.ind-s.on .dot.hv{display:block}
.ind-s .gd{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--hair);display:none;pointer-events:none}
.ind-s.on .gd{display:block}
.ind-n{margin-top:8px;font-size:11.5px;color:var(--ink3)}
.ind .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* celular: nombre y valor arriba; debajo el cambio y, en letra chica, unidad, fecha y fuente; la minigráfica a la derecha */
@media (max-width:560px){
  .ind-t{grid-template-columns:minmax(0,1fr) 84px;grid-template-areas:"l v" "d s" "f s";row-gap:2px}
  .ind-l span{display:none}
  .ind-f .u{display:inline}
  .ind-d{justify-self:start;text-align:left;white-space:normal}
  .ind-v{font-size:19px}
  .ind-s{height:28px}
}
@media (forced-colors:active){.ind-s .dot{forced-color-adjust:none;background:CanvasText}}