/* =====================================================================
   PIEZA "Donación internacional": el botón gemelo de "Dona aquí" (30-oct)
   Vale con html[data-op-extranjero], que pone opciones/extranjero.js salvo
   con ?extranjero=0. Ver opciones/extranjero.js. Prefijo vtx-.
   Mismo tamaño que "Dona aquí" en cada lugar (el mismo esqueleto: cuerpo,
   ícono y texto, con las mismas medidas), a su derecha, en el par de Donar
   (.vt-donpar, tablero.css sección 12).
   1-nov (Camilo eligió la versión 2 "Estampilla" entre tres, artefacto de los
   botones; especificación en calcula-impacto/decisiones/botones/internacional/
   v2.html): la donación que llega desde lejos, como una carta. El cuerpo es una
   superficie noche apenas más clara que la barra (blanco al 7 % sobre la
   noche) con un borde rosado al 55 % (4,9:1 contra esa superficie y 5,6:1
   contra la noche). En vez de la insignia redonda lleva una estampilla rosada
   con borde dentado y marco impreso, con la Tierra (earth de Lucide, mar
   blanco y trazo rojo accesible), inclinada como pegada a mano. Texto blanco
   sobre la superficie: 17,5:1; estampilla contra la superficie: 13,5:1. Quieto
   en reposo (el brillo lento del 30-oct salió: no le compite a Donar, que
   sigue siendo el único rojo relleno y el único que late); con el puntero la
   estampilla se endereza y el borde pasa a rosado pleno.
   Antes (30 y 31-oct): noche con borde rojo, el globo en una insignia roja y
   un brillo rojo que respiraba cada 4,6 s.
   ===================================================================== */
html[data-op-extranjero] .vtx-ext {
  /* las medidas de "Dona aquí" mediano (la fila del celular); la barra las cambia abajo */
  --vtx-alto: 48px;
  --vtx-txt: 16px;
  --vtx-pr: 16px;
  --vtx-gap: 8px;
  --vtx-radio: 999px;
  /* 1-nov: LA ESTAMPILLA OCUPA EL LUGAR DE LA INSIGNIA. El acomodo del par (tablero.js en la fila, extranjero.js en
     la barra) mide el ancho que piden los rótulos: para que decida igual que con la insignia de 34 px (34 × letra),
     el relleno izquierdo, la estampilla y el espacio suman lo mismo que antes (el relleno de 7, la insignia y el
     espacio de 8, más el relleno derecho: --vtx-holgura). La estampilla es más angosta que la insignia (28 contra
     34) y el sobrante va al relleno izquierdo: así queda lejos de la curva de la píldora (con 7 px su esquina
     girada tocaba el borde) */
  --vtx-ins: 34px;
  --vtx-holgura: 31px;
  /* la estampilla (28 x 34 en el celular, 40 x 48 en la barra), su diente, su marco impreso y la Tierra, en
     proporción a su alto */
  --vtx-sello-h: 34px;
  --vtx-sello-ar: 0.8235;
  --vtx-diente-k: 0.0618;
  --vtx-marco-k: 0.1176;
  --vtx-tierra-k: 0.5;
  /* el alto de la estampilla crece con la letra, pero girada no pasa del cuerpo: su caja girada mide 1,094 veces
     su alto, y quedan 3 px libres sobre el borde de 2 px (arriba y abajo). El alto de referencia es el del par:
     el de Donar, que crece con su insignia (34 × letra + 12) */
  --vtx-ref: max(var(--vtx-alto), calc(var(--vtx-ins) * var(--a11y-fs, 1) + 12px));
  --vtx-sh: min(calc(var(--vtx-sello-h) * var(--a11y-fs, 1)), calc((var(--vtx-ref) - 10px) / 1.094));
  --vtx-sw: calc(var(--vtx-sh) * var(--vtx-sello-ar));
  --vtx-pl: calc(var(--vtx-holgura) + var(--vtx-ins) * var(--a11y-fs, 1) - var(--vtx-gap) - var(--vtx-pr) - var(--vtx-sw));
  /* la superficie y el borde (el puntero y la presión los cambian abajo) */
  --vtx-fondo: rgba(255, 255, 255, 0.07);
  --vtx-borde: rgba(255, 217, 220, 0.55);
  --vtx-rosado: var(--tg-rosado, #ffd9dc);
  --vtx-anillo-foco: 9px;
  position: relative;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--vtx-alto);
  margin: 0;
  padding: 0;
  border-radius: var(--vtx-radio);
  color: #fff;
  font-family: var(--tg-font, "Duplet Rounded", system-ui, sans-serif);
  font-weight: 800;
  text-decoration: none !important;
  cursor: pointer;
  isolation: isolate;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
html[data-op-extranjero] .vtx-ext[hidden] { display: none; }
html[data-op-extranjero] .vtx-cuerpo {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vtx-gap);
  min-width: 0;
  min-height: var(--vtx-alto);
  box-sizing: border-box;
  padding: 6px var(--vtx-pr) 6px var(--vtx-pl);
  border-radius: inherit;
  background: var(--vtx-fondo);
  box-shadow: inset 0 0 0 2px var(--vtx-borde);
  color: #fff;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
/* la estampilla: una sombra corta (en el contenedor, que gira) y la pieza dentada (con máscara). Decorativa
   (aria-hidden): el nombre accesible dice que es internacional */
html[data-op-extranjero] .vtx-sello {
  flex: none;
  display: block;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
  transform: rotate(-7deg);
  transition: transform 380ms cubic-bezier(.16, 1, .3, 1);
}
/* los dientes: una grilla de agujeros redondos en el borde (radial-gradient con repetición "round", que ajusta la
   cantidad de dientes al tamaño) sobre el centro lleno. -webkit-mask para Safari de iOS */
html[data-op-extranjero] .vtx-sello-pieza {
  --vtx-diente: calc(var(--vtx-sh) * var(--vtx-diente-k));
  position: relative;
  display: grid;
  place-items: center;
  width: var(--vtx-sw);
  height: var(--vtx-sh);
  background: var(--vtx-rosado);
  -webkit-mask:
    radial-gradient(var(--vtx-diente), #0000 97%, #000) round calc(var(--vtx-diente) * -1.5) calc(var(--vtx-diente) * -1.5) / calc(var(--vtx-diente) * 3) calc(var(--vtx-diente) * 3),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - var(--vtx-diente) * 3) calc(100% - var(--vtx-diente) * 3);
          mask:
    radial-gradient(var(--vtx-diente), #0000 97%, #000) round calc(var(--vtx-diente) * -1.5) calc(var(--vtx-diente) * -1.5) / calc(var(--vtx-diente) * 3) calc(var(--vtx-diente) * 3),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - var(--vtx-diente) * 3) calc(100% - var(--vtx-diente) * 3);
}
/* el marco impreso de la estampilla */
html[data-op-extranjero] .vtx-sello-pieza::before {
  content: "";
  position: absolute;
  inset: calc(var(--vtx-sh) * var(--vtx-marco-k));
  border: 1.5px solid rgba(225, 45, 57, 0.5);
  border-radius: 2px;
}
/* la Tierra en dúo tono: el mar blanco y el trazo rojo accesible */
html[data-op-extranjero] .vtx-tierra {
  position: relative;
  flex: none;
  width: calc(var(--vtx-sh) * var(--vtx-tierra-k));
  height: calc(var(--vtx-sh) * var(--vtx-tierra-k));
  color: var(--tg-rojo-a11y, #e12d39);
  stroke-width: 2;
}
html[data-op-extranjero] .vtx-tierra .vtx-mar { fill: #fff; }
/* "Donación" e "internacional" no se parten: el rótulo va en una línea o en dos */
html[data-op-extranjero] .vtx-ext-txt {
  min-width: 0;
  font-size: calc(var(--vtx-txt) * var(--a11y-fs, 1));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-align: left;
  white-space: normal;
}
html[data-op-extranjero] :is(.vtx-ext-a, .vtx-ext-b) { white-space: nowrap; }
/* foco: 3 px blanco alrededor del cuerpo, como Donar, sobre un anillo noche (el foco en dos colores se lee también
   junto al halo blanco de Donar), con el borde en rosado pleno */
html[data-op-extranjero] .vtx-ext:focus-visible .vtx-cuerpo {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: inset 0 0 0 2px var(--vtx-rosado), 0 0 0 var(--vtx-anillo-foco) var(--tg-noche, #160307);
}
/* puntero fino encima: la superficie se aclara un poco, el borde pasa a rosado pleno y la estampilla se endereza
   (sube 2 px); al presionarlo, un poco más clara y la estampilla se hunde. Sin mover el botón */
@media (hover: hover) and (pointer: fine) {
  html[data-op-extranjero] .vtx-ext:hover { --vtx-borde: var(--vtx-rosado); --vtx-fondo: rgba(255, 255, 255, 0.11); }
  html[data-op-extranjero] .vtx-ext:hover .vtx-sello { transform: rotate(0deg) translateY(-2px); }
}
html[data-op-extranjero] .vtx-ext:active { --vtx-borde: var(--vtx-rosado); --vtx-fondo: rgba(255, 255, 255, 0.14); }
html[data-op-extranjero] .vtx-ext:active .vtx-sello { transform: rotate(0deg) scale(0.94); }

/* en la barra (escritorio y tablet): las medidas de "Dona aquí" grande (alto y texto de la barra). La estampilla
   ocupa el lugar de la insignia de 42 px de Donar (12 + 42 × letra + 10 + 26, los rellenos y el espacio de antes);
   el relleno derecho baja a 22 y el espacio sube a 12 (la estampilla girada asoma 3 px hacia el texto) */
html[data-op-extranjero] .vt-accion .vtx-ext {
  --vtx-alto: var(--vt-don-alto, 72px);
  --vtx-txt: var(--vt-don-txt, 22px);
  --vtx-ins: 42px;
  --vtx-holgura: 48px;
  --vtx-pr: 22px;
  --vtx-gap: 12px;
  --vtx-radio: 16px;
  --vtx-sello-h: 48px;
  --vtx-sello-ar: 0.8333;
  --vtx-diente-k: 0.0542;
  --vtx-marco-k: 0.1146;
  --vtx-tierra-k: 0.4583;
}
html[data-op-extranjero] .vt-accion .vtx-ext-txt { line-height: 1; letter-spacing: -0.012em; }
/* en dos líneas el rótulo pide 4 px menos de relleno vertical que Donar (una línea): así el par no queda más alto
   que Donar solo con A++ y la barra no le quita esos px al video */
html[data-op-extranjero] .vt-accion .vtx-cuerpo { padding-block: 4px; }
/* 31-oct: en dos líneas, la caja del texto mide lo que la palabra más larga ("internacional"), no todo el ancho
   libre del botón: así el ícono y el texto van juntos y centrados, como en "Dona aquí" (antes quedaban pegados a la
   izquierda: en 1440 x 900, 12 px a la izquierda y 120 a la derecha). Las dos líneas siguen alineadas entre sí a
   la izquierda, junto al ícono. data-vtx-dos lo pone extranjero.js cuando el rótulo se parte; en una línea no
   cambia nada */
html[data-op-extranjero] .vt-accion .vtx-ext[data-vtx-dos] .vtx-ext-txt { width: min-content; }
/* 1-nov (N4): lo mismo en la fila del celular y del celular apaisado (ahí data-vtx-dos lo pone tablero.js al final
   del encaje): en 844x390 el ícono y el texto quedaban a 7 px de la izquierda y a 67 de la derecha */
html[data-op-extranjero] .vt-fila .vtx-ext[data-vtx-dos] .vtx-ext-txt { width: min-content; }
/* en la fila del celular el relleno derecho es de 12 px (Donar lleva 16): con su rótulo alineado a la izquierda no
   se nota, y así el par cabe lado a lado desde 360 px de ancho (en 360 faltaban 2 px). La holgura baja lo mismo:
   la estampilla, el relleno izquierdo y el espacio siguen sumando lo que la insignia */
html[data-op-extranjero] .vt-fila .vtx-ext { --vtx-pr: 12px; --vtx-holgura: 27px; --vtx-anillo-foco: 8px; }
/* la fila del celular apretada (Donar baja a 44 px) y la letra de Donar bajo 360 px */
html[data-op-extranjero] .vt[data-apretado] .vt-fila .vtx-ext { --vtx-alto: 44px; }
@media (max-width: 359.98px) {
  html[data-op-extranjero] .vt-fila .vtx-ext { --vtx-txt: 15px; }
}

/* en la columna junto a los controles del video, angosta (320 px con letra grande): sin la estampilla, así
   "internacional" cabe (lo decide tablero.js con data-par-sinico; el botón sigue del tamaño de Donar) */
html[data-op-extranjero] .vt-donpar[data-par-sinico] > .vtx-ext .vtx-sello { display: none; }
html[data-op-extranjero] .vt-donpar[data-par-sinico] > .vtx-ext { --vtx-pl: 14px; }

/* apilado bajo Donar (320 px, letra grande) puede quedar al borde del primer pliegue: al llegar con Tab no queda
   bajo El Timón ni bajo el Donar flotante (WCAG 2.4.11) */
html[data-op-extranjero][data-vt-vivo] .vt-donpar[data-par-apilado] > .vtx-ext {
  scroll-margin-bottom: calc(max(var(--tg-reserva-fab, 0px), var(--vt-flota-reserva, 0px)) + 8px);
}

/* ---------------------------------------------------------------------
   MOVIMIENTO REDUCIDO, "Pausar animaciones" y ?rm=1: sin transiciones, y con el puntero o al presionar la
   estampilla no se mueve (queda inclinada)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-op-extranjero] :is(.vtx-cuerpo, .vtx-sello) { transition: none; }
  html[data-op-extranjero] .vtx-ext:is(:hover, :active) .vtx-sello { transform: rotate(-7deg); }
}
html[data-op-extranjero]:is([data-motion="off"], [data-rm="1"]) :is(.vtx-cuerpo, .vtx-sello) { transition: none; }
html[data-op-extranjero]:is([data-motion="off"], [data-rm="1"]) .vtx-ext:is(:hover, :active) .vtx-sello { transform: rotate(-7deg); }

/* ---------------------------------------------------------------------
   ALTO CONTRASTE y forced-colors
   Alto contraste: el borde en blanco pleno, también con el puntero, al presionar y con foco (la estampilla rosada ya
   mide 13,5:1). Colores forzados: el cuerpo en los colores de botón del sistema y la estampilla en su tinta, con el
   marco y la Tierra en el fondo del botón (la máscara dentada se conserva)
   --------------------------------------------------------------------- */
html[data-op-extranjero][data-contraste="1"] .vtx-ext,
html[data-op-extranjero][data-contraste="1"] .vtx-ext:is(:hover, :active) { --vtx-borde: #fff; }
html[data-op-extranjero][data-contraste="1"] .vtx-ext:focus-visible .vtx-cuerpo {
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 var(--vtx-anillo-foco) var(--tg-noche, #160307);
}
@media (forced-colors: active) {
  html[data-op-extranjero] .vtx-cuerpo {
    forced-color-adjust: none;
    background: ButtonFace;
    color: ButtonText;
    border: 2px solid ButtonText;
    box-shadow: none;
  }
  html[data-op-extranjero] .vtx-sello { filter: none; }
  html[data-op-extranjero] .vtx-sello-pieza { forced-color-adjust: none; background: ButtonText; }
  html[data-op-extranjero] .vtx-sello-pieza::before { border-color: ButtonFace; }
  html[data-op-extranjero] .vtx-tierra { color: ButtonFace; }
  html[data-op-extranjero] .vtx-tierra .vtx-mar { fill: ButtonText; }
  html[data-op-extranjero] .vtx-ext:focus-visible .vtx-cuerpo,
  html[data-op-extranjero][data-contraste="1"] .vtx-ext:focus-visible .vtx-cuerpo { outline-color: Highlight; box-shadow: none; }
}