/* ══════════════════════════════════════════════════════════════════
   BANDERAS DE DIVISA · dibujadas, no emoji
   ══════════════════════════════════════════════════════════════════
   Windows NO tiene glifos de bandera. Segoe UI Emoji no los incluye —es una
   decision de Microsoft, no un fallo de instalacion— y cualquier emoji de
   bandera se pinta como las dos letras del pais: "US", "EU", "CA", "GB".
   Descubierto el 31-jul-2026 en la maquina del cliente, en el panel Y en su
   pagina publica. En Mac y en iPhone se ven bien, que es justo por lo que
   habia pasado desapercibido.

   Se descarto la salida facil —cargar Noto Color Emoji desde Google Fonts—
   porque su particion de banderas pesa **693 KB** y trae las ~260 del mundo
   para usar seis. Aqui van dibujadas: el archivo entero no llega a 4 KB, no
   pide nada a terceros y se ve igual en todos lados.

   COMO SE USA: `<span class="bandera" data-cur="USD"></span>`. El tamaño lo
   pone la clase de cada sitio (.fl, .tasa-fl, .bt-fl, .tk-fl), que es la que
   ya existia. Una divisa sin dibujo cae al recuadro neutro de `.bandera`, que
   se ve discreto y no roto.

   Proporcion 3:2 en todas, que es la de la mayoria de banderas nacionales.
   ══════════════════════════════════════════════════════════════════ */

.bandera {
  display: inline-block;
  flex: none;
  /* Ancho de respaldo: cada sitio lo pisa con el suyo, pero el ticker no tiene
     regla propia y sin esto quedaria de 0px. */
  width: 21px;
  aspect-ratio: 3 / 2;
  background-color: #e8edf3;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 2px;
  /* El filo evita que una bandera de fondo claro —Japon, sobre todo— se
     disuelva contra una tarjeta blanca. */
  box-shadow: inset 0 0 0 1px rgba(15, 30, 50, 0.16);
}

/* Estados Unidos. Siete franjas rojas y el canton: a 20px de alto las
   cincuenta estrellas son ruido, asi que el canton va liso. */
.bandera[data-cur="USD"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Cg fill='%23b22234'%3E%3Crect width='30' height='1.54'/%3E%3Crect y='3.08' width='30' height='1.54'/%3E%3Crect y='6.15' width='30' height='1.54'/%3E%3Crect y='9.23' width='30' height='1.54'/%3E%3Crect y='12.31' width='30' height='1.54'/%3E%3Crect y='15.38' width='30' height='1.54'/%3E%3Crect y='18.46' width='30' height='1.54'/%3E%3C/g%3E%3Crect width='12' height='10.77' fill='%233c3b6e'/%3E%3C/svg%3E");
}

/* Union Europea. Las doce estrellas como puntos: a este tamaño una estrella
   de cinco puntas se empasta y un circulo limpio se lee mejor. */
.bandera[data-cur="EUR"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23039'/%3E%3Cg fill='%23fc0'%3E%3Ccircle cx='15' cy='4.5' r='.85'/%3E%3Ccircle cx='17.75' cy='5.24' r='.85'/%3E%3Ccircle cx='19.76' cy='7.25' r='.85'/%3E%3Ccircle cx='20.5' cy='10' r='.85'/%3E%3Ccircle cx='19.76' cy='12.75' r='.85'/%3E%3Ccircle cx='17.75' cy='14.76' r='.85'/%3E%3Ccircle cx='15' cy='15.5' r='.85'/%3E%3Ccircle cx='12.25' cy='14.76' r='.85'/%3E%3Ccircle cx='10.24' cy='12.75' r='.85'/%3E%3Ccircle cx='9.5' cy='10' r='.85'/%3E%3Ccircle cx='10.24' cy='7.25' r='.85'/%3E%3Ccircle cx='12.25' cy='5.24' r='.85'/%3E%3C/g%3E%3C/svg%3E");
}

/* Canada. La hoja va simplificada a once puntas en vez de las once con
   dentado fino del original: a 24px el dentado se convierte en una mancha. */
.bandera[data-cur="CAD"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Crect width='7.5' height='20' fill='%23d52b1e'/%3E%3Crect x='22.5' width='7.5' height='20' fill='%23d52b1e'/%3E%3Cpath fill='%23d52b1e' d='M15 4.2l1.1 2.5 2.2-.6-.7 2.3 2.3-.3-1.6 1.8 2.5 1.3-2.6.9.5 1.6-2.6-.5.1 3.6h-1.4l.1-3.6-2.6.5.5-1.6-2.6-.9 2.5-1.3-1.6-1.8 2.3.3-.7-2.3 2.2.6z'/%3E%3C/svg%3E");
}

/* Reino Unido. Union Jack sin el contrapeado de la cruz de San Patricio: a
   24px de alto ese desfase de un pixel no se distingue, y resolverlo pide un
   `clipPath` con ids dentro del data-URI. Lo que si tiene que leerse —azul,
   aspas blancas y cruz roja perfilada— esta. */
.bandera[data-cur="GBP"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23012169'/%3E%3Cpath d='M0 0L60 40M60 0L0 40' stroke='%23fff' stroke-width='9'/%3E%3Cpath d='M0 0L60 40M60 0L0 40' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0V40M0 20H60' stroke='%23fff' stroke-width='14'/%3E%3Cpath d='M30 0V40M0 20H60' stroke='%23C8102E' stroke-width='8'/%3E%3C/svg%3E");
}

/* Colombia. La franja amarilla ocupa la mitad, no un tercio. */
.bandera[data-cur="COP"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='10' fill='%23fcd116'/%3E%3Crect y='10' width='30' height='5' fill='%23003893'/%3E%3Crect y='15' width='30' height='5' fill='%23ce1126'/%3E%3C/svg%3E");
}

.bandera[data-cur="JPY"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Ccircle cx='15' cy='10' r='6' fill='%23bc002d'/%3E%3C/svg%3E");
}

.bandera[data-cur="CHF"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23d52b1e'/%3E%3Cpath d='M13.2 5h3.6v3.2H20v3.6h-3.2V15h-3.6v-3.2H10V8.2h3.2z' fill='%23fff'/%3E%3C/svg%3E");
}

.bandera[data-cur="AUD"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23012169'/%3E%3Cpath d='M0 0l15 10M15 0L0 10' stroke='%23fff' stroke-width='2.4'/%3E%3Cpath d='M7.5 0v10M0 5h15' stroke='%23fff' stroke-width='4'/%3E%3Cpath d='M7.5 0v10M0 5h15' stroke='%23C8102E' stroke-width='2.4'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='7.5' cy='15' r='1.5'/%3E%3Ccircle cx='22' cy='5' r='1'/%3E%3Ccircle cx='25' cy='9' r='1'/%3E%3Ccircle cx='22' cy='13' r='1'/%3E%3Ccircle cx='19' cy='9' r='.8'/%3E%3Ccircle cx='26' cy='15' r='.8'/%3E%3C/g%3E%3C/svg%3E");
}

/* MXN por si algun dia se cotiza contra otra moneda base. */
.bandera[data-cur="MXN"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Crect width='10' height='20' fill='%23006847'/%3E%3Crect x='20' width='10' height='20' fill='%23ce1126'/%3E%3Ccircle cx='15' cy='10' r='2.6' fill='none' stroke='%239b7e3b' stroke-width='1.1'/%3E%3C/svg%3E");
}