/* Sello de la tasa: cuándo se actualizó y de dónde sale.
 *
 * Fichero aparte a propósito: hub.css no se toca sin aprobación explícita
 * (AGENTS.md §3). Esto es una línea nueva, no un cambio de la portada.
 *
 * Discreto pero presente, como lo pidió Fidel el 17 ago. La atribución a
 * elTOQUE no es cortesía: son sus datos, y sus condiciones de uso de la API
 * piden citarlos. */
.rates-sello {
  margin: 0.35rem 0 0;
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--on-surface-muted);
  letter-spacing: 0.01em;
}

.rates-sello a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}

.rates-sello a:hover {
  color: var(--on-surface);
}

/* Si el dato empieza a tener horas de más, el sello lo dice sin gritar. */
.rates-sello--viejo {
  color: var(--amber);
}

/* ── Pie de fuentes ─────────────────────────────────────────────────────
 *
 * Las dos fuentes —la de calle y la oficial— forman UN bloque, abajo a la
 * izquierda, alineadas al mismo borde que el resto de la tarjeta.
 *
 * La tarjeta abre con un rótulo arriba a la izquierda y cierra con otro
 * abajo a la izquierda, del mismo estilo. Esa repetición es lo que la cuadra.
 *
 * Mismo cuerpo de letra en las dos líneas: la jerarquía la da el COLOR, no
 * el tamaño. Dos cosas del mismo rango se escriben igual de grandes.
 *
 * Regla de composición de Herizo — HERIZO_DESIGN_SYSTEM.md. */

/* Mismo estilo que el rótulo de arriba de la tarjeta: así cierran simétrico. */

/* Las dos líneas, del mismo tamaño. Se ganan a sí mismas el orden y el tono. */

/* La de calle: es el asunto de la tarjeta, va primera y algo más viva. */

/* La oficial: secundaria, mismo tamaño, un punto más apagada. */



/* ── La sigla con su símbolo, y la cifra con su unidad ─────────────────────
 *
 * 18 ago 2026, a petición de Fidel.
 *
 * La tarjeta enseñaba «USD 665» y había que saberse de memoria que eso quiere
 * decir «un dólar cuesta 665 pesos cubanos». Quien entra por primera vez —que
 * es justo el tráfico que traen las tasas— no tiene por qué saberlo. Ahora la
 * tarjeta lo dice sola.
 *
 * Los dos tamaños van en `em`, no en `rem`: el número usa `clamp()` y cambia
 * de cuerpo entre el móvil y la tarjeta grande, así que el símbolo y la unidad
 * encogen y crecen con él. Con un tamaño fijo se verían enormes en un sitio y
 * minúsculos en el otro.
 *
 * Se escribe aquí y no en hub.css a propósito: hub.css no se toca sin permiso
 * (AGENTS.md §3), y tasas.css se carga después, así que manda igual. */

/* El símbolo: acompaña a la sigla, nunca compite con ella. Un punto más
   apagado y sin negrita, para que se lea «USD» y el «$» solo confirme. */
.rate-block__sym {
  margin-left: 0.3em;
  font-size: 0.92em;
  font-weight: 400;
  color: color-mix(in srgb, currentColor 62%, transparent);
}

/* La unidad: pequeña, en la letra de texto y no en la de titular, para que
   contraste con la cifra en vez de imitarla. */
.rate-block__unit {
  margin-left: 0.28em;
  font-family: var(--font-body);
  font-size: 0.3em;
  font-weight: 600;
  /* La cifra lleva letter-spacing negativo para apretar los dígitos. Una
     palabra necesita lo contrario, o «CUP» se lee como un borrón. */
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--on-surface-muted) 85%, transparent);
  /* Que no se parta ni se caiga a la línea de abajo en pantallas estrechas. */
  white-space: nowrap;
  vertical-align: baseline;
}

/* El crédito de elTOQUE, dentro de la línea del sello. Discreto: se lee si se
   busca, no compite con la cifra. La obligación de citarlos se cumple igual. */
.rates-sello__fuente {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
  opacity: .85;
}

/* ── La tasa oficial del BCC, aislada ──────────────────────────────────────
   21 ago 2026, visto por Fidel en el móvil: esta línea queda justo debajo del
   resultado de la calculadora —«665.00 CUP»— y «puede entenderse que ese
   número pertenece al valor del BCC». Tenía razón: dos cifras pegadas, una
   debajo de otra, se leen como una sola cosa.

   No se mueve de sitio —ahí es donde toca— pero se separa: una línea fina
   encima, aire, y una «i» delante que la marca como lo que es, una nota
   informativa y no el pie del resultado.

   Va por `id` y no por clase a propósito: `.rates-official` la comparte el
   hueco declarado (`#rates-hueco`), que vive fuera del conversor y no debe
   llevar ni la raya ni la «i». */
#rates-official {
  position: relative;
  margin-top: 1.05rem;
  padding: .85rem 0 0 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--on-surface-muted) 16%, transparent);
  text-align: left;
  line-height: 1.5;
}

#rates-official:empty { border-top: 0; padding: 0; margin: 0; }

#rates-official::before {
  content: "i";
  position: absolute;
  left: 0;
  top: .8rem;
  width: 1.05rem;
  height: 1.05rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--on-surface-muted) 45%, transparent);
  color: var(--on-surface-muted);
  font-family: var(--font-body);
  font-size: .6rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}

/* ── La tarjeta de la portada, más pequeña ─────────────────────────────────
 *
 * 22 ago 2026, decisión de Fidel viéndola en pantalla: «es un cajón muy
 * grande, redúcela; mantenla visible y en portada, pero más pequeña».
 *
 * Contexto de por qué se queda aquí y no se fue a un módulo propio: se
 * construyó ese módulo el mismo día y se retiró al revisarlo pieza por pieza
 * —el recorrido no tenía recorrido, la comparación oficial/informal no decía
 * nada que se pudiera usar, y del movimiento del día solo se mueve el MLC—.
 * Lo único sólido era la calculadora, y una sola cosa no justifica un módulo.
 * El razonamiento entero está en `_to_delete/modulo-divisas-22ago/LEEME.md`.
 *
 * No se toca `hub.css` (AGENTS.md §3). Estas reglas tienen la MISMA
 * especificidad que las suyas y este fichero se carga después, así que ganan.
 * Es el mismo mecanismo que el fallo de la ✕ del 21 de agosto, pero usado a
 * favor: quien va después, manda.
 *
 * Lo que NO se toca al encoger, y por qué:
 *   · El texto del sello. Su forma es una decisión del 19 ago (la fecha es el
 *     compromiso de dar el dato a tiempo real) y del 21 (el crédito a elTOQUE
 *     vive en esa línea porque sus términos obligan a citarlos). Se encoge la
 *     tarjeta, no lo que dice.
 *   · Los 16 píxeles de los campos. Al revés: aquí se CORRIGE uno que estaba
 *     por debajo, ver más abajo. */

.card-moment--hub {
  padding: 0.7rem 0.9rem 0.75rem;
}

.card-moment--hub .card-moment__seal {
  top: 0.55rem;
  right: 0.55rem;
  width: 1.4rem;
  height: 1.4rem;
}

.card-moment--hub .section-label {
  font-size: 0.6rem;
  margin-bottom: 0.35rem;
}

/* Las tres cifras siguen siendo las protagonistas —son el motivo de volver
   cada día— pero no tienen que ocupar media pantalla para serlo: no compiten
   con nada más en esa zona. */
.card-moment--hub .rates-informal {
  gap: 0.35rem;
  padding-bottom: 0.5rem;
}

.card-moment--hub .rate-block__code {
  font-size: 0.62rem;
}

.card-moment--hub .rate-block__value {
  font-size: clamp(1.1rem, 5.2vw, 1.55rem);
}

.rates-sello {
  margin-top: 0.25rem;
  font-size: 0.64rem;
}

.card-moment--hub .converter {
  padding-top: 0.55rem;
  gap: 0.45rem;
}

.card-moment--hub .converter__row {
  gap: 0.4rem;
}

.card-moment--hub .field {
  padding: 0.4rem 0.6rem;
}

/* 22 ago 2026 — ESTO NO ES ENCOGER, ES ARREGLAR.
 *
 * Estaba en `0.95rem`, que son 15,2 píxeles. La decisión del 21 de agosto dice
 * 16 como mínimo en los campos del hub, y salió justo de que Fidel tocara un
 * campo en su iPhone y la página «se ampliara y perdiera los bordes»: Safari
 * acerca solo cuando la letra de un campo baja de 16 px. Aquel día se aplicó a
 * los `input` y este `select` se quedó fuera — y Safari acerca igual con un
 * desplegable. Va en píxeles y no en `rem` por lo mismo de entonces: el umbral
 * de Safari es en píxeles reales. */
.card-moment--hub .field select,
.card-moment--hub .field__static {
  font-size: 16px;
}

.card-moment--hub .amount-field {
  gap: 0.2rem;
}

.card-moment--hub .amount-field input {
  padding: 0.5rem 0.7rem;
  font-size: 16px;
}

/* El resultado baja de tamaño con las cifras de arriba: si el resultado fuera
   más grande que la tasa del día, la tarjeta diría que lo importante es la
   cuenta y no el dato, y es al revés. */
.card-moment--hub .converter__result {
  padding: 0.1rem 0 0;
}

.card-moment--hub .converter__result-value {
  font-size: clamp(1.25rem, 5.4vw, 1.7rem);
}

.card-moment--hub .converter__result-unit {
  font-size: 0.85rem;
}

/* La raya y la «i» del 21 de agosto se quedan: separan la tasa oficial del
   resultado de la calculadora, que pegados se leían como una sola cifra. Lo
   que se recorta es el aire, no la separación. */
#rates-official {
  margin-top: 0.7rem;
  padding: 0.6rem 0 0 1.4rem;
}

#rates-official::before {
  top: 0.55rem;
}

/* ── El conversor en una línea ─────────────────────────────────────────────
 *
 * 22 ago 2026, decisión de Fidel con la maqueta delante: «esto está bien, haz
 * este cambio». La tarjeta pasa de 385 px a unos 205 — casi la mitad— y no
 * apretando, sino quitando lo que no decía nada.
 *
 *   [ 1 ]  [USD ▾]              665.00 CUP
 *
 * El orden de la fila es el orden en que se piensa: cuánto, de qué, y cuánto
 * sale. El resultado va al final y alineado a la derecha, que es donde cae la
 * vista al terminar de leer.
 *
 * `.converter__row` pasa a `display: contents` para que sus hijos sean celdas
 * de esta misma rejilla, en vez de una fila dentro de otra. Cada uno lleva su
 * `grid-row: 1` escrito: sin eso, la colocación automática los reparte en
 * filas distintas —pasó al montar la maqueta y se vio en pantalla—. */
.card-moment--hub .converter--linea {
  display: grid;
  grid-template-columns: 4.6rem auto 1fr;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.5rem;
}

.card-moment--hub .converter--linea .converter__row { display: contents; }

.card-moment--hub .converter--linea .amount-field {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  gap: 0;
}

/* Centrado porque casi siempre lleva uno o dos dígitos: pegado a la izquierda
   parecía un campo vacío a medio rellenar. Y 16 px, que es la regla del 21 de
   agosto: por debajo, Safari acerca la página al tocarlo. */
.card-moment--hub .converter--linea .amount-field input {
  padding: 0.45rem 0.5rem;
  text-align: center;
  font-size: 16px;
}

.card-moment--hub .converter--linea .converter__row > .field {
  grid-column: 2;
  grid-row: 1;
  padding: 0.4rem 0.5rem;
}

.card-moment--hub .converter--linea .converter__result {
  grid-column: 3;
  grid-row: 1;
  padding: 0;
  text-align: right;
  white-space: nowrap;
}

.card-moment--hub .converter--linea .converter__result-value {
  font-size: clamp(1.15rem, 5vw, 1.5rem);
}

.card-moment--hub .converter--linea #rates-official {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0.55rem;
}

/* Las etiquetas siguen en el documento, escondidas solo a la vista.
 *
 * No es purismo: sin ellas, quien usa un lector de pantalla se encuentra dos
 * huecos y un desplegable sin saber cuál es cuál. Quitar una etiqueta de la
 * pantalla es maquetación; quitarla del documento es dejar a alguien fuera.
 *
 * No se usa `display: none` ni `visibility: hidden` porque las dos la esconden
 * también del lector, que es justo lo contrario de lo que se busca. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL MARCADOR DE LA PORTADA · 24 de agosto de 2026
   ═══════════════════════════════════════════════════════════════════════════

   Todo lo que hay ARRIBA de este bloque quedó DORMIDO hoy: son las reglas de
   la tarjeta de tasas con calculadora (`.card-moment--hub`), que se ha ido al
   módulo /divisas. No se borran todavía —el 22 de agosto se hizo este mismo
   movimiento y Fidel lo rechazó al verlo— y no molestan: ningún elemento de la
   portada lleva ya esas clases, así que no pintan nada.

   Lo de aquí abajo es lo que las sustituye. Decisión de Fidel, con las tres
   maquetas delante: «en portada el B».

     ●  USD 667 │ EUR 760 │ MLC 431          23:34 · elTOQUE

   Por qué el B y no los otros dos: sin caja. Una caja pide un marco, un
   rótulo y un pie, y entonces vuelve a ser una tarjeta pequeña en vez de una
   línea. Aquí solo hay dos hilos —arriba y abajo—, tipografía de ancho fijo y
   el punto verde. Unos 38 px de alto contra los ~205 que ocupaba la tarjeta.

   El punto no es decoración: dice que esto está vivo. Es el único elemento de
   la portada que se mueve, y se mueve despacio.                             */

.marcador {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.2rem;
  margin-bottom: 1.15rem;
  border-top: 1px solid color-mix(in srgb, var(--on-surface-muted) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--on-surface-muted) 14%, transparent);
  color: var(--on-surface);
  text-decoration: none;
}

/* Toda la línea entra al módulo, así que toda la línea tiene que responder
   al dedo. Sin esto parece un rótulo y nadie lo toca. */
.marcador:hover,
.marcador:focus-visible {
  border-top-color: color-mix(in srgb, var(--turquoise) 40%, transparent);
  border-bottom-color: color-mix(in srgb, var(--turquoise) 40%, transparent);
}

.marcador__punto {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--tramite);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tramite) 18%, transparent);
  animation: marcador-late 3.2s ease-in-out infinite;
}

@keyframes marcador-late {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .marcador__punto { animation: none; }
}

.marcador__cifras {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.marcador__m {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  /* Cifras de ancho fijo: al refrescarse, el número cambia sin que la línea
     entera se desplace. */
  font-variant-numeric: tabular-nums;
}

.marcador__cod {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--on-surface-muted);
}

.marcador__val {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.marcador__sep {
  width: 1px;
  height: 14px;
  background: color-mix(in srgb, var(--on-surface-muted) 24%, transparent);
}

/* El crédito y la hora, al final de la línea. `margin-left: auto` los empuja
   al borde derecho cuando cabe todo en una fila, y caen debajo cuando no. */
.marcador__pie {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.58rem;
  color: var(--on-surface-muted);
  white-space: nowrap;
}

/* Si el dato empieza a tener horas de más, la línea lo dice sin gritar.
   Mismo criterio que `.rates-sello--viejo`. */
.marcador--viejo .marcador__pie { color: var(--amber); }
.marcador--viejo .marcador__punto {
  background: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent);
}

/* El hueco declarado ocupa el mismo sitio y la misma altura aproximada, para
   que la portada no dé un salto según haya tasa o no. */
.marcador-hueco {
  margin: 0 0 1.15rem;
  padding: 0.6rem 0.2rem;
  border-top: 1px solid color-mix(in srgb, var(--on-surface-muted) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--on-surface-muted) 14%, transparent);
  font-family: var(--font-body);
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

.marcador-hueco a {
  color: var(--turquoise);
  text-decoration: none;
}

/* El marcador declara `display: flex`, y una regla de clase le gana a
   `[hidden]` de la hoja del navegador. Sin esto, la línea se ve vacía mientras
   llega la tasa —y se queda vacía si no llega—, que es exactamente lo que el
   hueco declarado existe para evitar. Misma trampa que en `pie.css`. */
.marcador[hidden],
.marcador-hueco[hidden] { display: none; }

/* ---------------------------------------------------------------------------
 * La baldosa de DIVISAS se pinta un pelín más grande que las otras seis.
 * 25 ago 2026. Decisión de Fidel: «quiero que sea más grande, como los demás,
 * que se vea bien».
 *
 * NO es un capricho ni una corrección de tamaño: MEDIDO en la portada
 * publicada, el área de color de DIVISAS es de 2.794 px² y la de RECARGAS
 * 2.876 — o sea que ya son prácticamente iguales, el tercero de siete. Lo que
 * pasa es otra cosa:
 *
 *   La caja de DIVISAS mide 54,7 x 52,3 px y la de PASAPORTE 54,5 x 54,0.
 *   El cuadro azul del CUP es un 4,7 % MÁS ANCHO QUE ALTO; los otros seis son
 *   cuadrados. En una fila de insignias cuadradas, una más baja se lee como
 *   más pequeña aunque ocupe la misma superficie.
 *
 * Así que esto es compensación óptica, no corrección de tamaño: se pinta un
 * 3,4 % mayor para que su ALTO iguale al de Pasaporte. A cambio, su ancho se
 * pasa un 4 % — invisible, y es el eje que el ojo no usa para comparar aquí.
 *
 * Antes de esto se le recortó el aire al PNG (iba con 21 px arriba y abajo
 * donde los demás llevan 7 u 8): eso subió el área del 94,5 % al 97,7 %, que
 * es real pero solo un 1,6 % de tamaño lineal, y Fidel no lo notó. Con razón.
 *
 * Va en `tasas.css` y no en `hub.css` por la misma razón que las reglas de
 * arriba: `hub.css` no se toca sin permiso (AGENTS.md §3), y este fichero
 * carga después. La regla es igual de específica que la de hub.css más el
 * atributo, así que gana sin `!important`.
 * ------------------------------------------------------------------------- */
.hub-tile[data-tool="divisas"] .hub-tile__icon img {
  width: 3.62rem;
  height: 3.62rem;
  /* 25 ago 2026 · Filo blanco de 1 px alrededor del cuadrado azul. Petición de
     Fidel: «borde fino blanco alrededor del cuadrado azul, igual que gaceta».

     El motivo medido: el borde del CUP es rgb(44,79,214) sobre una casilla de
     rgb(10,21,38) — azul sobre azul marino, la menor distancia de color de los
     siete iconos. Gaceta se recorta sola porque su cuerpo es blanco; el CUP no
     tenía con qué. Sin filo, la silueta no se separa del fondo y se lee más
     pequeña aunque sea la más grande de la rejilla (medido: 2.988 px² de color
     contra 2.876 de Recargas).

     Se hace con `drop-shadow` y no con `border` a propósito: `border` dibujaría
     un rectángulo alrededor de la CAJA de la imagen, no alrededor del dibujo.
     `drop-shadow` sigue el canal alfa, así que respeta las esquinas redondeadas
     del cuadrado. Cuatro sombras sin desenfoque, una por lado, dan un filo
     limpio en vez de un halo borroso. Y pinta FUERA de la caja, así que no hay
     que encoger la marca para hacerle sitio. */
  filter:
    drop-shadow(1px 0 0 #ffffff)
    drop-shadow(-1px 0 0 #ffffff)
    drop-shadow(0 1px 0 #ffffff)
    drop-shadow(0 -1px 0 #ffffff);
}