/* =====================================================================
   PIEZA "META": la etiqueta viajera (28-oct). Elegida por Camilo (opción 2).
   Vale con html[data-op-meta], que pone opciones/meta.js salvo con ?meta=0.
   Clases con prefijo om- (opción meta). Ver opciones/meta.js.
   Las fichas son el marcador; la etiqueta es otra capa, más humana: una
   etiqueta "Vamos en el 48 %" que viaja sobre el corazón, nunca otra ficha.
   Sin "hace N min" ni la cifra en millones visible (lineamientos 4 y 5).
   Textos a 14 px × --a11y-fs como mínimo (afinamiento aceptado el 28-oct).
   ===================================================================== */

/* la meta se esconde igual que siempre (recorte P7/A8 o una pieza caída): la grilla de abajo no la revive */
html[data-op-meta] .vt[data-sin-meta] .vt-hero .vt-meta,
html[data-op-meta] .vt[data-caida] .vt-hero .vt-meta { display: none; }

/* ---------- la celda: el riel a la izquierda y la meta al final, en dos líneas ----------
   (.vt-hero .vt-meta.om-meta2: pesa más que las reglas de la banda y de la tablet, que fijan gap y columnas) */
html[data-op-meta] .vt-hero .vt-meta.om-meta2 {
  /* la etiqueta: --om-tag-gap sobre el carril (6 px libres del anillo rojo del corazón y de su vaivén).
     --om-tag-sobra: lo que puede asomar hacia arriba sobre el margen que la celda ya tiene libre (en la
     banda, hacia su borde; en pila, sobre el margen de 10 px que separa la meta de la fila de la hora), así
     la celda crece lo menos posible */
  --om-tag-fs: calc(14px * var(--a11y-fs));
  --om-tag-gap: 10px;
  --om-tag-sobra: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "riel txt";
  column-gap: 14px;
  align-items: end;
  /* espacio sobre el carril = alto de la etiqueta (14 px × A + 2) + la separación - lo que asoma - lo que
     el texto de dos líneas (2 × 1,1 × 14 px × A) ya deja libre sobre el carril (26 px):
     14A + 2 + gap - sobra - (30,8A - 26) = 28 + gap - sobra - 16,8A */
  padding-top: max(0px, calc(28px + var(--om-tag-gap) - var(--om-tag-sobra) - 16.8px * var(--a11y-fs)));
}
/* en la banda (escritorio) la celda mide lo mismo que la de la base (46 px): la etiqueta asoma 6 px hacia el
   borde superior de la banda (5 en la banda baja) y queda a 3 px o más de ese borde */
html[data-op-meta] .vt-marcador[data-modo="banda"] .vt-meta.om-meta2 { --om-tag-sobra: 6px; }
html[data-op-meta] .vt[data-alto="bajo"] .vt-marcador[data-modo="banda"] .vt-meta.om-meta2 { --om-tag-gap: 9px; --om-tag-sobra: 5px; }
/* tablet compacta: la meta tiene 8 px de margen sobre ella */
html[data-op-meta] .vt[data-disp="tab"][data-compacto] .vt-hero .vt-meta.om-meta2 { --om-tag-sobra: 6px; }
/* meta superada: no hay etiqueta, no hay que hacerle lugar */
html[data-op-meta] .vt-marcador[data-om-sup] .vt-meta.om-meta2 { padding-top: 0; }

html[data-op-meta] .om-meta2 .vt-meta-riel {
  grid-area: riel;
  align-self: end;
  min-width: 0;
  width: auto;
  container-type: inline-size;
  font-size: var(--om-tag-fs);
}
html[data-op-meta] .om-meta2 .vt-meta-marca { display: none; }
html[data-op-meta] .vt-hero .om-meta2 .vt-meta-txt {
  grid-area: txt;
  text-align: left;
  line-height: 1.1;
  white-space: nowrap;
}
html[data-op-meta] .om-txt-l,
html[data-op-meta] .om-txt-v { display: block; font-size: calc(14px * var(--a11y-fs)); }
html[data-op-meta] .om-txt-l { font-weight: 600; color: rgba(255, 255, 255, 0.82); }
html[data-op-meta] .om-txt-v { font-weight: 700; color: #fff; }

/* ---------- la etiqueta: sobre el corazón, se mueve con él (el mismo --vt-meta) y nunca sale del carril ---------- */
html[data-op-meta] .om-meta2 .vt-meta-carril { overflow: visible; }
html[data-op-meta] .om-tag {
  --om-q: clamp(12%, var(--vt-meta, 0%), 88%);
  position: absolute;
  /* sobre el carril, libre del anillo rojo del corazón (3 px) y de su vaivén */
  bottom: calc(100% + var(--om-tag-gap, 10px));
  left: clamp(13px, var(--vt-meta, 0%), calc(100% - 13px));
  translate: calc(var(--om-q) * -1) 0;
  z-index: 2;
  pointer-events: none;
}
html[data-op-meta] .om-tag-t {
  position: relative;
  display: block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #2e1d21;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
  color: #fff;
  font-size: var(--om-tag-fs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
/* la punta, justo sobre el centro del corazón (el mismo --om-q con que se corre la etiqueta) */
html[data-op-meta] .om-tag-t::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--om-q);
  width: 0;
  height: 0;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.7);
  border-bottom: 0;
}
/* carril angosto: la etiqueta dice solo "48 %" (no se sale del carril ni pisa la meta). La larga mide unos
   9,1em (127 px con A, 1em = 14 px × A): cabe entera sobre el corazón si el carril mide eso */
@container (max-width: calc(9.1em + 4px)) {
  html[data-op-meta] .om-tag-largo { display: none; }
}

/* ---------- celda angosta: la meta bajo el riel (29-oct) ----------
   Con la meta en dos líneas a la derecha, en los portátiles (y con A++) el riel quedaba en 53 a 109 px: el
   corazón lo llenaba casi entero y la etiqueta se salía de él. El riel no baja de 10em (140 px × A: la
   unidad es la letra de la celda, 14 px × A), que es también más que la etiqueta larga más 8 px (9,1em +
   8 px). Si la celda no da para el riel, el espacio y la meta a su lado (10em + 14 px + 7,6em del monto
   = 18,6em), la meta baja bajo el riel, en una línea y a la derecha; si tampoco cabe en una línea
   (14,3em), queda solo el monto (el meter del lector la sigue nombrando entera).
   La celda es contenedor de tamaño (su ancho lo dan la banda o la pila, nunca su contenido). Un contenedor
   no se consulta a sí mismo: la grilla no cambia, el riel pasa a ocupar sus dos columnas y baja lo que la
   etiqueta necesita sobre él (lo que antes le daba el texto de dos líneas a su lado: 30,8 px × A contra
   los 26 del carril), y la meta de dos líneas cede su lugar a la de una (.om-txt-1l, que arma meta.js).
   Así la medida de la banda (tablero.js mide el ancho natural de .vt-meta-txt para decidir si la cifra
   va sola en el eje) no cambia con la meta bajo el riel.
   Excepciones (las pone meta.js en el marcador, ver decidirLugar): en el celular retrato y apaisado, si con
   la meta bajo el riel el encaje del panel achica la cifra o el video, la meta queda al lado
   (data-om-lado), como antes, o en su forma corta (data-om-corta, más abajo) */
html[data-op-meta] .vt-hero .vt-meta.om-meta2 { container: om-meta / inline-size; font-size: calc(14px * var(--a11y-fs)); }
html[data-op-meta] .om-txt-1l { display: none; }
@container om-meta (max-width: 18.6em) {
  html[data-op-meta] .vt-marcador:not([data-om-lado]) .om-meta2 > .vt-meta-riel {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-top: max(0px, calc(14px * var(--a11y-fs) + 2px + var(--om-tag-gap) - var(--om-tag-sobra) - max(0px, 28px + var(--om-tag-gap) - var(--om-tag-sobra) - 16.8px * var(--a11y-fs))));
  }
  html[data-op-meta] .vt-marcador[data-om-sup] .om-meta2 > .vt-meta-riel { margin-top: 0; }
  html[data-op-meta] .vt-hero .vt-marcador:not([data-om-lado]) .om-meta2 > .vt-meta-txt { display: none; }
  html[data-op-meta] .vt-hero .vt-marcador:not([data-om-lado]) .om-meta2 > .om-txt-1l {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
    margin: 0;
    font-size: calc(14px * var(--a11y-fs));
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  html[data-op-meta] .om-1l-l { font-weight: 600; color: rgba(255, 255, 255, 0.82); }
  html[data-op-meta] .om-1l-v { font-weight: 700; color: #fff; }
}
/* si "Meta: superar $X" (13,8em) no cabe, queda "Meta: $X" (10,1em): " superar" sale de la vista pero no del
   lector. Si tampoco cabe, el rótulo y el monto van en dos líneas. Nunca el monto solo (29-oct, noche: con A++
   se leía "$44.253.268.546" suelto junto a la cifra, sin saber qué era) */
@container om-meta (max-width: 14.5em) {
  html[data-op-meta] .om-1l-x {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@container om-meta (max-width: 10.4em) {
  html[data-op-meta] .om-1l-l,
  html[data-op-meta] .om-1l-v { display: block; }
  html[data-op-meta] .om-1l-x { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

/* el porcentaje en texto (.om-fc): solo en la forma corta, abajo. El riel siempre se dibuja (también con
   colores forzados, ver abajo) */
html[data-op-meta] .om-fc { display: none; }

/* ---------- la forma corta (data-om-corta en el marcador, la pone meta.js; 29-oct, noche) ----------
   Celular retrato y apaisado, solo cuando con la meta entera el encaje achicaría la cifra o el video (A+ y
   A++ en los celulares más bajos, F4; y en la banda del escritorio si la cifra quedó más chica que la letra de
   la meta): la meta en una fila del alto del corazón (20 px), el riel a la
   izquierda y "Vamos en el 48 %" a su derecha, quieto (la etiqueta viajera y el monto no se ven; el lector
   oye la meta entera en el meter). Si la fila no da para el riel (7em) y la frase larga, dice solo "48 %" */
html[data-op-meta] .vt-hero .vt-marcador[data-om-corta] .vt-meta.om-meta2 {
  padding-top: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "riel fc";
  align-items: center;
}
html[data-op-meta] .vt-hero .vt-marcador[data-om-corta]:not([data-modo="banda"]) .vt-meta.om-meta2 { margin-top: 3px; }
html[data-op-meta] .vt-hero .vt-marcador[data-om-corta] .om-meta2 > .vt-meta-riel { grid-area: riel; margin-top: 0; }
/* la fila mide 20 px (el corazón de 20, con su anillo rojo, y el texto con interlineado 1,1): con A++ en 844x390
   la meta entera (48 px) llevaba la cifra de fichas de 22 a 14 px; con esta fila la cifra queda como con A */
html[data-op-meta] .vt-hero .vt-marcador[data-om-corta] .vt-meta-carril { height: 20px; }
html[data-op-meta] .vt-hero .vt-marcador[data-om-corta] .vt-meta-corazon { width: 20px; height: 20px; margin: -10px 0 0 -10px; left: clamp(10px, var(--vt-meta, 0%), calc(100% - 10px)); }
html[data-op-meta] .vt-hero .vt-marcador[data-om-corta] .vt-meta-corazon .tg-icon { width: 11px; height: 11px; }
html[data-op-meta] .vt-hero .vt-marcador[data-om-corta] .om-meta2 > :is(.vt-meta-txt, .om-txt-1l) { display: none; }
html[data-op-meta] .vt-hero .vt-marcador[data-om-corta] .om-tag { display: none; }
html[data-op-meta] .vt-hero .vt-marcador[data-om-corta] .om-meta2 > .om-fc {
  display: block;
  grid-area: fc;
  margin: 0;
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@container om-meta (max-width: 17.2em) {
  html[data-op-meta] .om-fc-largo { display: none; }
}

/* =====================================================================
   ALTO CONTRASTE y forced-colors
   ===================================================================== */
html[data-op-meta][data-contraste="1"] :is(.om-txt-l, .om-1l-l) { color: #fff; }
/* ---------- 3-nov (Camilo): en el celular, el porcentaje dentro del riel ----------
   "le quitaría el porcentaje a la barra, ya que se ve muy pegado y con mucha info todo. quizás, poner el porcentaje
   dentro de la barra, al lado derecho del corazón y solo el número más %". En el celular retrato sale la
   etiqueta viajera (y el porcentaje de la forma corta) y la celda ya no le reserva lugar arriba; el "48 %" va en una
   pastilla sobre el riel, junto al corazón (meta.js, .om-dentro). En el celular apaisado (ahí la etiqueta no apretaba y
   el cambio partía el título en dos líneas), la tablet y el escritorio, igual que antes */
html[data-op-meta] .om-dentro { display: none; }
html[data-op-meta] .vt[data-disp="tel"] .vt-hero .om-tag,
html[data-op-meta] .vt[data-disp="tel"] .vt-hero .om-meta2 > .om-fc { display: none; }
html[data-op-meta] .vt[data-disp="tel"] .vt-hero .vt-meta.om-meta2 { padding-top: 0; margin-top: 0; }
html[data-op-meta] .vt[data-disp="tel"] .vt-hero .om-dentro {
  --om-x: clamp(13px, var(--vt-meta, 0%), calc(100% - 13px));
  display: block;
  position: absolute;
  top: 50%;
  left: calc(var(--om-x) + 19px);
  translate: 0 -50%;
  padding: 2px 7px;
  border-radius: 999px;
  background: #2e1d21;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
  color: #fff;
  font-size: calc(12px * var(--a11y-fs));
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
html[data-op-meta] .vt[data-disp="tel"] .vt-hero .om-dentro--izq {
  left: auto;
  right: calc(100% - var(--om-x) + 19px);
}
html[data-op-meta][data-contraste="1"] .om-dentro { background: var(--tg-noche); box-shadow: inset 0 0 0 2px #fff; }
html[data-op-meta][data-contraste="1"] .om-tag-t { background: var(--tg-noche); box-shadow: inset 0 0 0 2px #fff; }
html[data-op-meta][data-contraste="1"] .om-tag-t::after { border-top-color: #fff; }
@media (forced-colors: active) {
  /* 29-oct, noche: el riel se dibuja con colores del sistema (la base lo esconde en tablero.css y dejaba solo el
     texto): la pista con borde CanvasText, el avance en Highlight, el corazón con su borde (tablero.css) y la
     etiqueta "Vamos en el 48 %" con borde, así la figura no se pierde. El texto de respaldo (.om-fc) ya no hace
     falta */
  html[data-op-meta] .om-meta2 > .vt-meta-riel { display: flex; }
  html[data-op-meta] .om-meta2 .vt-meta-pista { forced-color-adjust: none; background: Canvas; border: 1px solid CanvasText; }
  html[data-op-meta] .om-meta2 .vt-meta-relleno { forced-color-adjust: none; background: Highlight; box-shadow: none; }
  html[data-op-meta] .om-tag-t { border: 1px solid CanvasText; }
  html[data-op-meta] .om-dentro { border: 1px solid CanvasText; }
  html[data-op-meta] .om-tag-t::after { forced-color-adjust: none; border-top-color: CanvasText; }
}