/*
 * Banderas dibujadas con CSS puro — sin imagenes, sin peticiones extra.
 *
 * Por que asi y no con archivos o emojis:
 *   - Emojis (🇦🇷): Windows NO tiene glifos de banderas. En Chrome/Edge sobre
 *     Windows se ven las dos letras del pais ("AR"), no la bandera. Descartado.
 *   - SVG/PNG: 13 peticiones mas, o un sprite que hay que mantener. Para dibujos
 *     que son franjas de color no se justifica.
 *
 * Criterio de fidelidad: a 24x15 px el emblema central (sol, escudo, aguila) es
 * una mancha de 3 px. Lo que identifica la bandera a este tamaño es el patron de
 * franjas, y ESE va exacto. Los emblemas se reducen a un punto del color
 * dominante: sugieren sin fingir precision. Ademas cada tarjeta lleva el nombre
 * del pais escrito, asi que la bandera acompaña, no carga sola con identificar.
 *
 * Solo se carga en la raiz: no la referencian ni privacidad.html ni las paginas
 * de Listmonk, que no muestran banderas.
 */

.tn-bandera {
  /* Explicito: un <span> es inline y en inline no aplican width/height. Hoy
     funciona igual porque el contenedor es flex y eso lo convierte en bloque,
     pero entonces la bandera solo se ve dentro de esa grilla. */
  display: block;
  position: relative;
  flex: none;
  width: 26px;
  height: 17px;   /* 3:2 con el borde incluido (box-sizing: border-box) */
  border-radius: 2px;
  /* Sin borde, las franjas blancas se funden con el fondo de la tarjeta. */
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  background-color: #fff;
  background-repeat: no-repeat;
}

/* Argentina — celeste / blanco / celeste, Sol de Mayo al centro */
.tn-bandera-ar {
  background-image: linear-gradient(#74ACDF 0 33.33%, #fff 33.33% 66.66%, #74ACDF 66.66% 100%);
}
.tn-bandera-ar::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 5px; height: 5px; border-radius: 50%; background: #F6B40E;
}

/* Bolivia — rojo / amarillo / verde */
.tn-bandera-bo {
  background-image: linear-gradient(#D52B1E 0 33.33%, #F9E300 33.33% 66.66%, #007934 66.66% 100%);
}

/* Chile — blanco sobre rojo, canton azul con estrella */
.tn-bandera-cl {
  background-image: linear-gradient(#fff 0 50%, #D52B1E 50% 100%);
}
.tn-bandera-cl::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 33.33%; height: 50%; background: #0039A6;
}
.tn-bandera-cl::after {
  content: ""; position: absolute; left: 2.5px; top: 2.2px;
  width: 3px; height: 3px; border-radius: 50%; background: #fff;
}

/* Colombia — amarillo (1/2), azul (1/4), rojo (1/4) */
.tn-bandera-co {
  background-image: linear-gradient(#FCD116 0 50%, #003893 50% 75%, #CE1126 75% 100%);
}

/* Costa Rica — azul / blanco / rojo doble / blanco / azul */
.tn-bandera-cr {
  background-image: linear-gradient(#002B7F 0 16.66%, #fff 16.66% 33.33%,
                                    #CE1126 33.33% 66.66%, #fff 66.66% 83.33%,
                                    #002B7F 83.33% 100%);
}

/* Ecuador — mismas proporciones que Colombia; el escudo es lo unico que las
   distingue, asi que aca el punto central no es decorativo: hace falta. */
.tn-bandera-ec {
  background-image: linear-gradient(#FFDD00 0 50%, #034EA2 50% 75%, #ED1C24 75% 100%);
}
.tn-bandera-ec::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 5px; height: 5px; border-radius: 50%; background: #8B7536;
}

/* Guatemala — azul / blanco / azul, vertical */
.tn-bandera-gt {
  background-image: linear-gradient(90deg, #4997D0 0 33.33%, #fff 33.33% 66.66%, #4997D0 66.66% 100%);
}

/* Mexico — verde / blanco / rojo, aguila al centro */
.tn-bandera-mx {
  background-image: linear-gradient(90deg, #006847 0 33.33%, #fff 33.33% 66.66%, #CE1126 66.66% 100%);
}
.tn-bandera-mx::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 4px; height: 4px; border-radius: 50%; background: #7B5B2A;
}

/* Panama — cuatro cuadrantes, dos estrellas */
.tn-bandera-pa {
  background-image:
    linear-gradient(90deg, #fff 0 50%, #DA121A 50% 100%),
    linear-gradient(90deg, #072357 0 50%, #fff 50% 100%);
  background-size: 100% 50%;
  background-position: top, bottom;
}
.tn-bandera-pa::before {
  content: ""; position: absolute; left: 4.5px; top: 2.2px;
  width: 3px; height: 3px; border-radius: 50%; background: #072357;
}
.tn-bandera-pa::after {
  content: ""; position: absolute; right: 4.5px; bottom: 2.2px;
  width: 3px; height: 3px; border-radius: 50%; background: #DA121A;
}

/* Peru — rojo / blanco / rojo, vertical */
.tn-bandera-pe {
  background-image: linear-gradient(90deg, #D91023 0 33.33%, #fff 33.33% 66.66%, #D91023 66.66% 100%);
}

/* Paraguay — rojo / blanco / azul, emblema al centro */
.tn-bandera-py {
  background-image: linear-gradient(#D52B1E 0 33.33%, #fff 33.33% 66.66%, #0038A8 66.66% 100%);
}
.tn-bandera-py::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 4px; height: 4px; border-radius: 50%; background: #E8B800;
}

/* Uruguay — nueve franjas y canton con el Sol de Mayo */
.tn-bandera-uy {
  background-image: repeating-linear-gradient(#fff 0 11.11%, #0038A8 11.11% 22.22%);
}
.tn-bandera-uy::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 37%; height: 44.44%; background: #fff;
}
.tn-bandera-uy::after {
  content: ""; position: absolute; left: 2.4px; top: 1.4px;
  width: 4px; height: 4px; border-radius: 50%; background: #F6B40E;
}

/* Internacional — no es un pais, asi que no lleva bandera: un globo sobre azul
   ONU. El disco y el ecuador van en el background (dos capas) y el meridiano en
   ::after, porque ::before ya lo usa el aro. Con solo aro + ecuador se leia como
   un simbolo de "prohibido", no como un globo: hace falta el meridiano. */
.tn-bandera-un {
  background-color: #4B92DB;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.85) 0 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3) 0 4.5px, transparent 4.5px);
  background-size: 9px 1px, 100% 100%;
  background-position: center, center;
}
.tn-bandera-un::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
}
.tn-bandera-un::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1px; height: 11px; background: rgba(255, 255, 255, 0.65);
}