/* =====================================================================
   OPCIONES "HORA": la hora del último cómputo, fuera de las fichas (28-oct)
   Valen con html[data-op-hora="N"], que pone opciones/hora.js (N de 1 a 4).
   En tablero.html la 1 ("Dato", elección de Camilo del 30-oct) va por
   omisión y ?hora=0 la apaga; en variantes.html cada versión se pide con
   ?hora=N y sin parámetro nada de esto aplica. Clases con prefijo oh-.
   Solo la cifra queda en fichas de marcador; la hora nunca va en cajas
   blancas. Textos a 14 px ×
   --a11y-fs como mínimo. Ver opciones/hora.js.
   ===================================================================== */

html[data-op-hora] .oh-n { font-variant-numeric: tabular-nums; }
/* "20:54 h": la unidad pegada a la hora con un espacio fino (el espacio duro de Duplet mide 0,4 em y
   separaba demasiado); la hora y su unidad nunca se parten */
html[data-op-hora] .oh-t { white-space: nowrap; }
html[data-op-hora] .oh-u { margin-left: 0.16em; }
html[data-op-hora] .oh-v,
html[data-op-hora] .oh-l { white-space: nowrap; }
/* banda del escritorio: el bloque de la hora mide al menos lo que el rótulo de hoy (hora.js lo mide antes de
   reemplazarlo); así ajustar() elige la misma composición y el riel nunca queda más corto */
html[data-op-hora] .vt-marcador[data-modo="banda"] .oh { min-width: var(--oh-rot-w, 0px); }
html[data-op-hora] .vt-marcador--gracias .oh { justify-content: center; }
/* tablero apretado: la hora sin la "h", como las fichas de hoy, que tampoco la llevan */
html[data-op-hora] .vt[data-apretado] .oh .oh-u { display: none; }
/* la hora cambia (cómputo nuevo, cuando gira la cifra): un fundido corto, una sola vez */
html[data-op-hora] .oh-cambia { animation: oh-cambia 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes oh-cambia {
  from { opacity: 0; transform: translateY(4px); }
}
html[data-motion="off"] .oh-cambia,
html[data-rm="1"] .oh-cambia { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-op-hora] .oh-cambia { animation: none; }
}

/* =====================================================================
   FUERA DE LA BANDA (celular, apaisado, tablet y cierre): la hora cabe en
   la caja de las fichas de hoy. Corrección del 29-oct.
   ajustar() de tablero.js elige el recorte midiendo el alto del tablero:
   si la fila "rótulo + hora" crecía unos px, o se partía en dos, elegía un
   recorte más hondo (se iba el antetítulo). Ahora la hora nunca pide más que las fichas de hoy:
     alto  <= el de la fila de hoy: max(1,2 em del rótulo, 1,36 × ficha)
     ancho <= el de las fichas "20:54": 4,52 × ficha
   (ficha = --vt-reloj-fw, que tablero.js pone en el marcador en cada
   medida). La letra de la hora es la del diseño de cada versión, achicada
   solo si no cabe en esa caja y nunca bajo la del rótulo (14 px × A como
   mínimo). La fila tampoco se parte, igual que la de hoy. Las propiedades
   registradas fijan los px en .oh (1 em = la letra del rótulo).
   ===================================================================== */
@property --oh-alto { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --oh-ancho { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --oh-fl { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --oh-f { syntax: "<length>"; inherits: true; initial-value: 0px; }
html[data-op-hora] .vt-marcador:not([data-modo="banda"]) .oh {
  --oh-fl: 1em;
  --oh-alto: max(1.2em, calc(var(--vt-reloj-fw, 18px) * 1.36));
  --oh-ancho: calc(var(--vt-reloj-fw, 18px) * 4.52 + var(--oh-extra, 0px));
  /* 1-nov (F4): tampoco más grande que los dígitos de la cifra (--vt-cifra-d, lo pone tablero.js); el piso sigue
     siendo la letra del rótulo (14 px × A) */
  --oh-f: max(1em, min(var(--oh-d), calc(var(--oh-alto) / var(--oh-lh)), calc(var(--oh-ancho) / var(--oh-k)), var(--vt-cifra-d, 999px)));
  flex-wrap: nowrap;
  align-items: center;
  vertical-align: top;
}
/* el panel del celular apaisado es angosto (en 667x375 mide 225 px): ahí el rótulo de hoy deja la hora en la
   línea de abajo (tablero.css, .vt-ap-panel .vt-rot-vis) y la de cada versión también; sin esto la hora se
   salía de la pantalla con A++ (hasta 50 px en 667x375, revisión del 29-oct) */
html[data-op-hora] .vt-ap-panel .vt-marcador:not([data-modo="banda"]) .oh { flex-wrap: wrap; }
html[data-op-hora] .vt-marcador:not([data-modo="banda"]) .oh > .oh-v {
  font-size: var(--oh-f);
  line-height: var(--oh-lh);
}
/* rótulo y hora centrados en la fila (así su alto es el mayor de los dos, no la suma de las alturas sobre la
   línea base) y la línea base del rótulo bajada a la de la hora: la diferencia es (hora - rótulo) × (ascendente
   - descendente) / 2 de Duplet Rounded, 0,38 */
html[data-op-hora]:not([data-op-hora="3"]) .vt-marcador:not([data-modo="banda"]) .oh > .oh-l {
  translate: 0 calc((var(--oh-f) - var(--oh-fl)) * 0.38);
}
/* recortes del celular y la tablet (data-compacto en adelante): sin la "h", como las fichas de hoy */
html[data-op-hora] .vt[data-compacto] .vt-marcador:not([data-modo="banda"]) .oh .oh-u { display: none; }
html[data-op-hora] .vt[data-compacto] .vt-marcador:not([data-modo="banda"]) .oh,
html[data-op-hora] .vt-marcador.vt-marcador--gracias:not([data-modo="banda"]) .oh { --oh-k: var(--oh-k-sin); --oh-hw: 0px; }

/* =====================================================================
   1. DATO: texto con jerarquía (rótulo chico y suave, hora en negrita)
   ===================================================================== */
/* el ancho de "20:54" en Duplet 800 con cifras tabulares es 2,82 em; la "h" (0,16 em de aire y la letra a
   14 px × A como mínimo) suma hasta 0,68 em */
html[data-op-hora="1"] .vt-marcador:not([data-modo="banda"]) .oh { --oh-d: calc(18px * var(--a11y-fs)); --oh-lh: 1.05; --oh-k: 3.5; --oh-k-sin: 2.82; gap: 0 8px; }
html[data-op-hora="1"] .vt[data-disp="tab"] .vt-hero .vt-marcador:not([data-modo="banda"]) .oh { --oh-d: calc(22px * var(--a11y-fs)); }
/* el rótulo con la letra exacta del rótulo de hoy en cada lugar (la hereda de .vt-rotulo: 14 px, 15 en la
   tablet y el cierre, 14 en el recorte apretado), así ocupa lo mismo que hoy */
html[data-op-hora="1"] .oh .oh-l {
  font-size: 1em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}
html[data-op-hora="1"] .oh .oh-v {
  font-size: calc(18px * var(--a11y-fs));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
}
/* la "h" chica, pero nunca bajo 14 px × A (textos de 14 px como mínimo) */
html[data-op-hora="1"] .oh .oh-u { font-size: max(0.72em, calc(14px * var(--a11y-fs))); font-weight: 700; letter-spacing: 0; color: rgba(255, 255, 255, 0.8); }
/* banda del escritorio: el rótulo sobre la hora, la hora más grande (19 px: con A++ el bloque no pasa
   del alto del rótulo y las fichas de hoy, así la banda no crece y el video no se achica) */
html[data-op-hora="1"] .vt-marcador[data-modo="banda"] .oh { align-items: flex-start; gap: 1px; }
/* 1-nov (F4): nunca más grande que los dígitos de la cifra (con A++, 24,7 px contra 21,6 en 1024x768), ni bajo 14 px × A */
html[data-op-hora="1"] .vt-marcador[data-modo="banda"] .oh .oh-v { font-size: max(calc(14px * var(--a11y-fs)), min(calc(19px * var(--a11y-fs)), var(--vt-cifra-d, 999px))); }

/* 1-nov (F32, ronda 2): con la cifra en texto (no cabe en fichas, data-modo="tipo") la hora es un dato
   secundario, como en la hora de hoy (tablero.css): de la letra del rótulo (14 px × A), en 700 y suave. En 568x320
   la hora "Dato" (800, blanca y hasta 18,2 px con A++) se veía igual o más fuerte que la cifra en texto (16 px) y
   parecía el marcador. La cifra en texto nunca va bajo esa letra (pintarCifra) */
html[data-op-hora] .vt-marcador:not([data-modo="banda"]):has(.vt-cifra[data-modo="tipo"]) .oh { --oh-f: 1em; }
html[data-op-hora="1"] .vt-marcador:not([data-modo="banda"]):has(.vt-cifra[data-modo="tipo"]) .oh .oh-v {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}
html[data-op-hora="1"][data-contraste="1"] .vt-marcador:has(.vt-cifra[data-modo="tipo"]) .oh .oh-v { color: #fff; }

/* =====================================================================
   2. RELOJ: el reloj de Lucide y la hora primero, el rótulo corto después
   ===================================================================== */
/* el bloque "reloj + 20:54 + h" mide 4,86 em (reloj 1 em, aire 0,3 em, hora 2,82 em, "h" 0,74 em); sin la
   "h", 4,12 em. Fuera de la banda va con el rótulo corto, que ahorra "Último " (3,26 em del rótulo): ese
   ahorro se lo puede llevar la hora sin que la fila mida más que la de hoy */
html[data-op-hora="2"] .vt-marcador:not([data-modo="banda"]) .oh { --oh-d: calc(17px * var(--a11y-fs)); --oh-lh: 1.1; --oh-k: 4.86; --oh-k-sin: 4.12; --oh-extra: 3.26em; gap: 0 8px; }
html[data-op-hora="2"] .vt[data-disp="tab"] .vt-hero .vt-marcador:not([data-modo="banda"]) .oh { --oh-d: calc(21px * var(--a11y-fs)); }
/* en el cierre el rótulo es la fecha completa (no hay ahorro) */
html[data-op-hora="2"] .vt-marcador.vt-marcador--gracias:not([data-modo="banda"]) .oh { --oh-d: calc(18px * var(--a11y-fs)); --oh-extra: 0px; }
html[data-op-hora="2"] .oh .oh-v {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: calc(17px * var(--a11y-fs));
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}
html[data-op-hora="2"] .oh .oh-u { font-weight: 700; }
html[data-op-hora="2"] .oh .oh-ico { display: inline-flex; color: var(--tg-rojo); }
html[data-op-hora="2"] .oh .oh-ico .tg-icon { width: 1em; height: 1em; stroke-width: 2.4; }
html[data-op-hora="2"] .oh .oh-l {
  font-size: 1em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}
/* banda del escritorio: la hora arriba y el rótulo completo debajo, los dos desde el borde del reloj. El
   rótulo completo da al bloque el mismo ancho que el de hoy: ajustar() elige la misma composición (con el
   corto, en 1280x720 con A++ elegía otra con la cifra 5 % más chica) */
html[data-op-hora="2"] .vt-marcador[data-modo="banda"] .oh { align-items: flex-start; gap: 2px; }
html[data-op-hora="2"] .vt-marcador[data-modo="banda"] .oh .oh-v { font-size: calc(18px * var(--a11y-fs)); line-height: 1.05; }
html[data-op-hora="2"] .oh .oh-largo { display: none; }
html[data-op-hora="2"] .vt-marcador[data-modo="banda"] .oh .oh-largo { display: inline; }
html[data-op-hora="2"] .vt-marcador[data-modo="banda"] .oh .oh-corto { display: none; }
/* en gracias el rótulo es la fecha: va primero, como se lee ("Domingo 8 de noviembre, 01:45") */
html[data-op-hora="2"] .vt-marcador--gracias .oh .oh-l { order: -1; }

/* =====================================================================
   3. PASTILLA: la hora en una pastilla de borde fino (la familia de
      "Vamos en el 48 %": el mismo fondo y el mismo borde)
   ===================================================================== */
/* fuera de la banda la pastilla entera (borde incluido) cabe en la caja de las fichas: su letra deja 0,12 em
   de aire arriba y abajo, y su relleno lateral es lo que sobra del ancho (hasta 0,55 em). Contenido: "20:54"
   2,82 em; la "h" suma 0,74 em y solo se muestra si con ella quedan 0,3 em de relleno por lado (revisión del
   29-oct: con A++ en el celular la pastilla quedaba con 2 a 3 px de relleno y en Alto contraste el "2" y la
   "h" tocaban el borde). --oh-hw es el ancho de la "h": 0 si no cabe */
@property --oh-hw { syntax: "<length>"; inherits: true; initial-value: 0px; }
html[data-op-hora="3"] .vt-marcador:not([data-modo="banda"]) .oh {
  --oh-d: calc(15px * var(--a11y-fs));
  --oh-lh: 1.12;
  --oh-k: 3.42;
  --oh-k-sin: 3.42;
  --oh-hw: clamp(0px, calc((var(--oh-ancho) - 4.16 * var(--oh-f)) * 1000), calc(0.74 * var(--oh-f)));
  --oh-ph: calc(22px * var(--a11y-fs));
  gap: 0 8px;
}
html[data-op-hora="3"] .vt[data-disp="tab"] .vt-hero .vt-marcador:not([data-modo="banda"]) .oh { --oh-d: calc(17px * var(--a11y-fs)); --oh-ph: calc(28px * var(--a11y-fs)); }
html[data-op-hora="3"] .vt-marcador.vt-marcador--gracias:not([data-modo="banda"]) .oh { --oh-ph: calc(21px * var(--a11y-fs)); }
html[data-op-hora="3"] .oh .oh-l {
  font-size: 1em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}
html[data-op-hora="3"] .oh .oh-pill {
  display: inline-flex;
  align-items: center;
  min-height: calc(22px * var(--a11y-fs));
  padding: 1px 0.55em 0;
  border-radius: 999px;
  background: #2e1d21;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
  color: #fff;
  font-size: calc(15px * var(--a11y-fs));
  font-weight: 800;
  line-height: 1;
}
html[data-op-hora="3"] .vt-marcador:not([data-modo="banda"]) .oh > .oh-pill {
  line-height: 1;
  min-height: min(var(--oh-ph), var(--oh-alto));
  padding-inline: clamp(2px, calc((var(--oh-ancho) - 2.82 * var(--oh-f) - var(--oh-hw)) / 2), calc(0.55 * var(--oh-f)));
}
/* la "h" con letra 0 cuando no cabe (ancho 0, también su espacio) */
html[data-op-hora="3"] .vt-marcador:not([data-modo="banda"]) .oh > .oh-pill .oh-u { font-size: calc(var(--oh-hw) / 0.74); }
html[data-op-hora="3"] .oh .oh-u { font-weight: 700; color: rgba(255, 255, 255, 0.84); }
/* banda del escritorio: la pastilla bajo el rótulo, del alto de la etiqueta de la meta (con A++ el bloque
   no pasa del alto del rótulo y las fichas de hoy: la banda no crece) */
html[data-op-hora="3"] .vt-marcador[data-modo="banda"] .oh { align-items: flex-start; gap: 3px; }
html[data-op-hora="3"] .vt-marcador[data-modo="banda"] .oh .oh-pill { font-size: calc(14px * var(--a11y-fs)); min-height: calc(19px * var(--a11y-fs)); }

/* =====================================================================
   4. BAJO EL TÍTULO: la hora como línea de fecha. En la banda del
      escritorio, bajo el título cuando cabe sin sumar una fila; si no, junto
      a la cifra. En el cierre, bajo "Cómputo final". En la tablet, junto a la
      meta, y en el celular, en el pie de la cifra.
   ===================================================================== */
html[data-op-hora="4"] .oh-oculta { display: none !important; }
/* el pie de la cifra queda sin nada visible: no reserva alto ni margen (el <time> sr-only sigue ahí) */
html[data-op-hora="4"] .vt-mar-pie[data-oh-vacio] { margin: 0; gap: 0; }
html[data-op-hora="4"] .oh-fecha {
  margin: 0;
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 600;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.82);
}
html[data-op-hora="4"] :is(.oh-fecha, .oh-pie4) .oh-n { font-weight: 800; color: var(--tg-rojo); }
/* bajo el título: una línea que no ensancha la columna del título (contain), así la cifra no se achica; el
   mismo aire sobre ella que la fila del aviso de hoy (6 px), lejos de la mosca EN VIVO */
html[data-op-hora="4"] .vt-mar-cab > .oh-fecha--tit {
  align-self: stretch;
  contain: inline-size;
  margin-top: 6px;
  /* parte bajo el texto del título, no bajo la mosca (en la previa quedaba "HOY · 21:00" sobre "Cómputo oficial
     de las 20:54": dos horas apiladas). hora.js mide la sangría; la línea no se parte (una línea más agrandaría
     la banda) y hora.js la acota para que no llegue a menos de 24 px de la cifra */
  padding-left: var(--oh-sangria, 0px);
  white-space: nowrap;
}
/* BANDA DEL ESCRITORIO (revisión del 29-oct). La línea bajo el título no agranda la banda: el bloque del
   título (título y línea) puede ocupar el relleno de la banda hasta dejar 6 px de aire arriba y abajo
   (margen negativo parejo: centrado igual que hoy, solo cuenta menos alto). Antes la línea colgaba 6 px y
   con A++ la banda crecía (5 px en 1920x1080: el video perdía 9 px de ancho) */
html[data-op-hora="4"] .vt-marcador[data-modo="banda"]:not([data-tit2], .oh-con-meta) .vt-mar-cab {
  margin-block: calc(6px - var(--vt-banda-py, 12px));
}
/* con la mosca sobre el título (data-tit2) o con el aviso de la meta, la línea sumaría una fila: la frase va
   junto a la cifra, donde hoy está la hora ("Cómputo oficial de las" / "20:54"), con el ancho del rótulo de
   hoy. Sin eso el pie no muestra nada... salvo mientras ajustar() mide su ancho natural (le pone width:
   max-content): ahí cuenta lo mismo que el de hoy y ajustar() elige la misma composición, así la cifra
   nunca queda más chica que hoy (en 1280x720 con A++ en previa quedaba 28,3 en vez de 30) */
html[data-op-hora="4"] .vt-marcador[data-modo="banda"] .oh.oh-pie4 { display: none; }
html[data-op-hora="4"] .vt-marcador[data-modo="banda"]:is([data-tit2], .oh-con-meta) .oh.oh-pie4,
html[data-op-hora="4"] .vt-marcador[data-modo="banda"] .vt-mar-pie[style*="max-content"] .oh.oh-pie4 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  max-width: var(--oh-rot-w, none);
}
html[data-op-hora="4"] .vt-marcador[data-modo="banda"][data-tit2] .oh-fecha { display: none; }
html[data-op-hora="4"] .vt-marcador[data-modo="banda"] .oh-pie4 .oh-l { font-size: 1em; font-weight: 600; color: rgba(255, 255, 255, 0.82); }
/* junto a la cifra la frase va en dos líneas: "Cómputo oficial" / "20:54", sin "de las" colgando al final de la
   primera (revisión del 29-oct; el ancho del bloque no cambia: lo fija el rótulo de hoy, --oh-rot-w) */
html[data-op-hora="4"] .vt-marcador[data-modo="banda"] .oh-pie4 .oh-de { display: none; }
html[data-op-hora="4"] .vt-marcador[data-modo="banda"] .oh-pie4 .oh-v { font-size: calc(18px * var(--a11y-fs)); font-weight: 800; line-height: 1.05; }
/* con un aviso: en su misma fila ("NUEVO CÓMPUTO de las 22:28"). La fila no ensancha la columna del título
   más que el aviso solo (contain + el ancho del aviso medido por hora.js); si no caben juntos, la línea pasa
   debajo del aviso, en el mismo lugar del encabezado */
html[data-op-hora="4"] .vt-mar-h2.oh-con-fecha { contain: inline-size; align-self: stretch; min-width: var(--oh-aviso-w, 0px); }
html[data-op-hora="4"] .vt-mar-h2 > .oh-fecha { white-space: nowrap; }
/* gracias: bajo "Cómputo final", centrada */
html[data-op-hora="4"] .vt-marcador--gracias .oh-fecha { margin-top: 6px; text-align: center; font-size: calc(16px * var(--a11y-fs)); }
html[data-op-hora="4"] .vt-marcador--gracias .oh-fecha .oh-n { color: #fff; }
/* cierre apretado (C2 y C3): la letra del rótulo de hoy en ese recorte (14 px) y 4 px de aire, así la línea
   no pide más alto que la fila de hoy (con 16 px medía 4 px más en 320x568 y 844x390 con A++) */
html[data-op-hora="4"] .vt[data-compacto] .vt-marcador--gracias .oh-fecha { margin-top: 4px; font-size: calc(14px * var(--a11y-fs)); }
/* celular y apaisado: la frase en el pie de la cifra (la hora un punto más que el rótulo); tablet: en
   el pie, junto a la meta */
html[data-op-hora="4"] .vt-marcador:not([data-modo="banda"]) .oh.oh-pie4 { --oh-d: calc(15px * var(--a11y-fs)); --oh-lh: 1.2; --oh-k: 3.12; --oh-k-sin: 3.12; gap: 0 0.3em; }
/* tablet: en el pie, junto a la meta (bajo el título sumaba una fila: ver hora.js) */
html[data-op-hora="4"] .vt[data-disp="tab"] .vt-hero .vt-marcador:not([data-modo="banda"]) .oh.oh-pie4 { --oh-d: calc(17px * var(--a11y-fs)); }
html[data-op-hora="4"] .oh-pie4 .oh-l { font-size: 1em; font-weight: 600; color: rgba(255, 255, 255, 0.82); }
html[data-op-hora="4"] .oh-pie4 .oh-v { font-weight: 800; }

/* =====================================================================
   EL CÓMPUTO EN UNA LÍNEA (celular muy apretado: data-linea, P6 y A7)
   La hora va delante de la cifra, sin rótulo ni "h" (el de hoy tampoco los
   muestra), en la misma caja de las fichas de hoy. La 2 deja el reloj.
   ===================================================================== */
html[data-op-hora] .vt[data-linea] .oh .oh-u { display: none; }
html[data-op-hora]:not([data-op-hora="3"]) .vt[data-linea] .vt-marcador:not([data-modo="banda"]) .oh { --oh-d: calc(16px * var(--a11y-fs)); --oh-lh: 1.1; --oh-k: 2.82; --oh-k-sin: 2.82; --oh-extra: 0px; }
html[data-op-hora="3"] .vt[data-linea] .vt-marcador:not([data-modo="banda"]) .oh { --oh-d: calc(14px * var(--a11y-fs)); }
html[data-op-hora="2"] .vt[data-linea] .oh .oh-ico { display: none; }
/* cierre en su recorte más apretado (C3): sin el ahorro del rótulo corto, el reloj no cabe en la caja de
   las fichas de hoy (en 320x568 con A++ la fila se salía 7 px por lado); ahí queda la hora sola */
html[data-op-hora="2"] .vt[data-apretado] .vt-marcador--gracias .oh .oh-ico { display: none; }
html[data-op-hora="2"] .vt[data-apretado] .vt-marcador.vt-marcador--gracias:not([data-modo="banda"]) .oh { --oh-k-sin: 2.82; }

/* =====================================================================
   CON EL TABLERO ROJO de opciones/fondo.css (?fondo=4, el mismo alcance:
   ni el cierre ni el panel apaisado, que quedan en noche): el rojo de la
   hora y del reloj no se vería sobre el rojo; pasan a blanco pleno (AA),
   igual que los rótulos que ese módulo ya lleva a blanco, y la pastilla va
   en noche.
   ===================================================================== */
html[data-op-hora][data-op-fondo="4"]:not([data-contraste="1"]) .vt-marcador:not(.vt-marcador--gracias, .vt-ap-panel .vt-marcador) :is(.oh-l, .oh-u, .oh-fecha, .oh-n, .oh-ico) { color: #fff; }
html[data-op-hora="3"][data-op-fondo="4"]:not([data-contraste="1"]) .vt-marcador:not(.vt-marcador--gracias, .vt-ap-panel .vt-marcador) .oh-pill { background: var(--tg-noche); box-shadow: none; }

/* =====================================================================
   ALTO CONTRASTE y forced-colors
   La hora de la 4 no lleva subrayado (se confundía con un enlace): se
   distingue del rótulo por el peso y un punto más.
   ===================================================================== */
html[data-op-hora][data-contraste="1"] .oh .oh-l,
html[data-op-hora][data-contraste="1"] .oh .oh-u,
html[data-op-hora][data-contraste="1"] .oh-fecha { color: #fff; }
html[data-op-hora="4"][data-contraste="1"] :is(.oh-fecha, .oh-pie4) .oh-n { color: #fff; text-decoration: none; }
/* un punto más, sin agrandar la línea (line-height 1: la caja de la hora no pasa de la de la línea); en el cierre
   no (ahí la hora ya es blanca 800 y con A++ el tablero medía 2 px más en 844x390) */
html[data-op-hora="4"][data-contraste="1"] .vt-marcador:not(.vt-marcador--gracias) .oh-fecha .oh-n { font-size: 1.14em; line-height: 1; }
html[data-op-hora="2"][data-contraste="1"] .oh .oh-ico { color: #fff; }
/* el borde de 2 px va mitad por dentro y mitad por fuera: no le quita aire a la hora */
html[data-op-hora="3"][data-contraste="1"] .oh .oh-pill { background: var(--tg-noche); box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #fff; }
@media (forced-colors: active) {
  html[data-op-hora] .oh .oh-l,
  html[data-op-hora] .oh .oh-v,
  html[data-op-hora] .oh .oh-u,
  html[data-op-hora] .oh .oh-n,
  html[data-op-hora] .oh-fecha,
  html[data-op-hora] .oh-fecha .oh-n { color: CanvasText; }
  html[data-op-hora="2"] .oh .oh-ico { color: CanvasText; }
  /* el contorno de sistema como outline (no ocupa lugar: un borde ensanchaba la pastilla 2 px y en 390x844
     la fila se partía) */
  html[data-op-hora="3"] .oh .oh-pill { outline: 1px solid CanvasText; outline-offset: -1px; box-shadow: none; background: Canvas; }
}