/* ==========================================================================
   BANDERAS (sprite)
   --------------------------------------------------------------------------
   Sprite propio del selector de idiomas, independiente del plugin de prefijos
   telefónicos (plugins/intltelinput). Incluye países y también regiones sin
   prefijo propio (es-ct Cataluña, es-ga Galicia, es-pv País Vasco, gb-wls
   Gales, gb-sct Escocia, eu, un...).

   Uso: <span class="flag flag-es-ct"></span>  (el código es el de la BANDERA,
   no el del idioma; el mapa idioma -> bandera está en config.php).

   CÓMO ESTÁ HECHO
   Las imágenes (images/flags/flags.webp y flags@2x.webp) son una rejilla de
   20 columnas x 14 filas. Cada casilla mide 20x15px en flags.webp y 40x30px
   en flags@2x.webp. Las banderas originales van en orden alfabético de
   código, de izquierda a derecha y de arriba abajo; las que se añadan después
   van a continuación, en las casillas libres. Cada clase .flag-xx indica en qué
   casilla está su bandera: --flag-x es la columna y --flag-y la fila,
   empezando a contar en 0.

   AÑADIR UNA BANDERA A MANO
   1. Pegarla en la primera casilla libre de LAS DOS imágenes, a 20x15 y a
      40x30. Quedan libres las columnas 11 a 19 de la fila 13. Si no quedan
      casillas, añadir una fila a las dos imágenes y subir --flag-rows.
   2. Añadir su clase al final de este archivo con esa columna y fila.
   3. Subir el ?v= de --flag-path-1x y --flag-path-2x, para que los
      navegadores no sigan usando la imagen antigua en caché.
   Las banderas salen de flag-icons (formato 4x3), la misma librería que usa
   intl-tel-input: https://github.com/lipis/flag-icons
   ========================================================================== */

:root {
  --flag-width: 20px;
  --flag-columns: 20;
  --flag-rows: 14;
  /* Subir el ?v= cada vez que cambien las imágenes, para que la caché del
     navegador no sirva un sprite antiguo con las posiciones nuevas. */
  --flag-path-1x: url("../images/flags/flags.webp?v=2");
  --flag-path-2x: url("../images/flags/flags@2x.webp?v=2");
}

.flag {
  /* El alto se calcula aquí y no en :root para que cambiar --flag-width en
     un contenedor (p. ej. .lang-selector { --flag-width: 28px; }) escale
     también el alto y el recorte del sprite. */
  --flag-height: calc(var(--flag-width) * 3 / 4);
  display: inline-block;
  flex: 0 0 auto;
  width: var(--flag-width);
  height: var(--flag-height);
  border-radius: 1px;
  box-shadow: 0px 0px 1px 0px #888;
  /* Fallback para navegadores sin image-set(): sin esta línea no se vería
     ninguna bandera, no solo la versión de baja resolución. */
  background-image: var(--flag-path-1x);
  background-image: image-set(var(--flag-path-1x) 1x, var(--flag-path-2x) 2x);
  background-repeat: no-repeat;
  background-position:
    calc(var(--flag-x, 0) * var(--flag-width) * -1)
    calc(var(--flag-y, 0) * var(--flag-height) * -1);
  background-size:
    calc(var(--flag-columns) * var(--flag-width))
    calc(var(--flag-rows) * var(--flag-height));
}

/* Posición de cada bandera en el sprite (--flag-x columna, --flag-y fila) */
.flag-ac {
  --flag-x: 15;
  --flag-y: 10;
}
.flag-ad {
  --flag-x: 0;
  --flag-y: 0;
}
.flag-ae {
  --flag-x: 1;
  --flag-y: 0;
}
.flag-af {
  --flag-x: 2;
  --flag-y: 0;
}
.flag-ag {
  --flag-x: 3;
  --flag-y: 0;
}
.flag-ai {
  --flag-x: 4;
  --flag-y: 0;
}
.flag-al {
  --flag-x: 5;
  --flag-y: 0;
}
.flag-am {
  --flag-x: 6;
  --flag-y: 0;
}
.flag-ao {
  --flag-x: 7;
  --flag-y: 0;
}
.flag-aq {
  --flag-x: 8;
  --flag-y: 0;
}
.flag-ar {
  --flag-x: 9;
  --flag-y: 0;
}
.flag-arab {
  --flag-x: 10;
  --flag-y: 0;
}
.flag-as {
  --flag-x: 11;
  --flag-y: 0;
}
.flag-asean {
  --flag-x: 12;
  --flag-y: 0;
}
.flag-at {
  --flag-x: 13;
  --flag-y: 0;
}
.flag-au {
  --flag-x: 14;
  --flag-y: 0;
}
.flag-aw {
  --flag-x: 15;
  --flag-y: 0;
}
.flag-ax {
  --flag-x: 16;
  --flag-y: 0;
}
.flag-az {
  --flag-x: 17;
  --flag-y: 0;
}
.flag-ba {
  --flag-x: 18;
  --flag-y: 0;
}
.flag-bb {
  --flag-x: 19;
  --flag-y: 0;
}
.flag-bd {
  --flag-x: 0;
  --flag-y: 1;
}
.flag-be {
  --flag-x: 1;
  --flag-y: 1;
}
.flag-bf {
  --flag-x: 2;
  --flag-y: 1;
}
.flag-bg {
  --flag-x: 3;
  --flag-y: 1;
}
.flag-bh {
  --flag-x: 4;
  --flag-y: 1;
}
.flag-bi {
  --flag-x: 5;
  --flag-y: 1;
}
.flag-bj {
  --flag-x: 6;
  --flag-y: 1;
}
.flag-bl {
  --flag-x: 7;
  --flag-y: 1;
}
.flag-bm {
  --flag-x: 8;
  --flag-y: 1;
}
.flag-bn {
  --flag-x: 9;
  --flag-y: 1;
}
.flag-bo {
  --flag-x: 10;
  --flag-y: 1;
}
.flag-bq {
  --flag-x: 11;
  --flag-y: 1;
}
.flag-br {
  --flag-x: 12;
  --flag-y: 1;
}
.flag-bs {
  --flag-x: 13;
  --flag-y: 1;
}
.flag-bt {
  --flag-x: 14;
  --flag-y: 1;
}
.flag-bv {
  --flag-x: 15;
  --flag-y: 1;
}
.flag-bw {
  --flag-x: 16;
  --flag-y: 1;
}
.flag-by {
  --flag-x: 17;
  --flag-y: 1;
}
.flag-bz {
  --flag-x: 18;
  --flag-y: 1;
}
.flag-ca {
  --flag-x: 19;
  --flag-y: 1;
}
.flag-cc {
  --flag-x: 0;
  --flag-y: 2;
}
.flag-cd {
  --flag-x: 1;
  --flag-y: 2;
}
.flag-cefta {
  --flag-x: 2;
  --flag-y: 2;
}
.flag-cf {
  --flag-x: 3;
  --flag-y: 2;
}
.flag-cg {
  --flag-x: 4;
  --flag-y: 2;
}
.flag-ch {
  --flag-x: 5;
  --flag-y: 2;
}
.flag-ci {
  --flag-x: 6;
  --flag-y: 2;
}
.flag-ck {
  --flag-x: 7;
  --flag-y: 2;
}
.flag-cl {
  --flag-x: 8;
  --flag-y: 2;
}
.flag-cm {
  --flag-x: 9;
  --flag-y: 2;
}
.flag-cn {
  --flag-x: 10;
  --flag-y: 2;
}
.flag-co {
  --flag-x: 11;
  --flag-y: 2;
}
.flag-cp {
  --flag-x: 12;
  --flag-y: 2;
}
.flag-cr {
  --flag-x: 13;
  --flag-y: 2;
}
.flag-cu {
  --flag-x: 14;
  --flag-y: 2;
}
.flag-cv {
  --flag-x: 15;
  --flag-y: 2;
}
.flag-cw {
  --flag-x: 16;
  --flag-y: 2;
}
.flag-cx {
  --flag-x: 17;
  --flag-y: 2;
}
.flag-cy {
  --flag-x: 18;
  --flag-y: 2;
}
.flag-cz {
  --flag-x: 19;
  --flag-y: 2;
}
.flag-de {
  --flag-x: 0;
  --flag-y: 3;
}
.flag-dg {
  --flag-x: 1;
  --flag-y: 3;
}
.flag-dj {
  --flag-x: 2;
  --flag-y: 3;
}
.flag-dk {
  --flag-x: 3;
  --flag-y: 3;
}
.flag-dm {
  --flag-x: 4;
  --flag-y: 3;
}
.flag-do {
  --flag-x: 5;
  --flag-y: 3;
}
.flag-dz {
  --flag-x: 6;
  --flag-y: 3;
}
.flag-eac {
  --flag-x: 7;
  --flag-y: 3;
}
.flag-ec {
  --flag-x: 8;
  --flag-y: 3;
}
.flag-ee {
  --flag-x: 9;
  --flag-y: 3;
}
.flag-eg {
  --flag-x: 10;
  --flag-y: 3;
}
.flag-eh {
  --flag-x: 11;
  --flag-y: 3;
}
.flag-er {
  --flag-x: 12;
  --flag-y: 3;
}
.flag-es {
  --flag-x: 13;
  --flag-y: 3;
}
.flag-es-ct {
  --flag-x: 14;
  --flag-y: 3;
}
.flag-es-ga {
  --flag-x: 15;
  --flag-y: 3;
}
.flag-es-pv {
  --flag-x: 16;
  --flag-y: 3;
}
.flag-et {
  --flag-x: 17;
  --flag-y: 3;
}
.flag-eu {
  --flag-x: 18;
  --flag-y: 3;
}
.flag-fi {
  --flag-x: 19;
  --flag-y: 3;
}
.flag-fj {
  --flag-x: 0;
  --flag-y: 4;
}
.flag-fk {
  --flag-x: 1;
  --flag-y: 4;
}
.flag-fm {
  --flag-x: 2;
  --flag-y: 4;
}
.flag-fo {
  --flag-x: 3;
  --flag-y: 4;
}
.flag-fr {
  --flag-x: 4;
  --flag-y: 4;
}
.flag-ga {
  --flag-x: 5;
  --flag-y: 4;
}
.flag-gb {
  --flag-x: 6;
  --flag-y: 4;
}
.flag-gb-eng {
  --flag-x: 7;
  --flag-y: 4;
}
.flag-gb-nir {
  --flag-x: 8;
  --flag-y: 4;
}
.flag-gb-sct {
  --flag-x: 9;
  --flag-y: 4;
}
.flag-gb-wls {
  --flag-x: 10;
  --flag-y: 4;
}
.flag-gd {
  --flag-x: 11;
  --flag-y: 4;
}
.flag-ge {
  --flag-x: 12;
  --flag-y: 4;
}
.flag-gf {
  --flag-x: 13;
  --flag-y: 4;
}
.flag-gg {
  --flag-x: 14;
  --flag-y: 4;
}
.flag-gh {
  --flag-x: 15;
  --flag-y: 4;
}
.flag-gi {
  --flag-x: 16;
  --flag-y: 4;
}
.flag-gl {
  --flag-x: 17;
  --flag-y: 4;
}
.flag-gm {
  --flag-x: 18;
  --flag-y: 4;
}
.flag-gn {
  --flag-x: 19;
  --flag-y: 4;
}
.flag-gp {
  --flag-x: 0;
  --flag-y: 5;
}
.flag-gq {
  --flag-x: 1;
  --flag-y: 5;
}
.flag-gr {
  --flag-x: 2;
  --flag-y: 5;
}
.flag-gs {
  --flag-x: 3;
  --flag-y: 5;
}
.flag-gt {
  --flag-x: 4;
  --flag-y: 5;
}
.flag-gu {
  --flag-x: 5;
  --flag-y: 5;
}
.flag-gw {
  --flag-x: 6;
  --flag-y: 5;
}
.flag-gy {
  --flag-x: 7;
  --flag-y: 5;
}
.flag-hk {
  --flag-x: 8;
  --flag-y: 5;
}
.flag-hm {
  --flag-x: 9;
  --flag-y: 5;
}
.flag-hn {
  --flag-x: 10;
  --flag-y: 5;
}
.flag-hr {
  --flag-x: 11;
  --flag-y: 5;
}
.flag-ht {
  --flag-x: 12;
  --flag-y: 5;
}
.flag-hu {
  --flag-x: 13;
  --flag-y: 5;
}
.flag-ic {
  --flag-x: 14;
  --flag-y: 5;
}
.flag-id {
  --flag-x: 15;
  --flag-y: 5;
}
.flag-ie {
  --flag-x: 16;
  --flag-y: 5;
}
.flag-il {
  --flag-x: 17;
  --flag-y: 5;
}
.flag-im {
  --flag-x: 18;
  --flag-y: 5;
}
.flag-in {
  --flag-x: 19;
  --flag-y: 5;
}
.flag-io {
  --flag-x: 0;
  --flag-y: 6;
}
.flag-iq {
  --flag-x: 1;
  --flag-y: 6;
}
.flag-ir {
  --flag-x: 2;
  --flag-y: 6;
}
.flag-is {
  --flag-x: 3;
  --flag-y: 6;
}
.flag-it {
  --flag-x: 4;
  --flag-y: 6;
}
.flag-je {
  --flag-x: 5;
  --flag-y: 6;
}
.flag-jm {
  --flag-x: 6;
  --flag-y: 6;
}
.flag-jo {
  --flag-x: 7;
  --flag-y: 6;
}
.flag-jp {
  --flag-x: 8;
  --flag-y: 6;
}
.flag-ke {
  --flag-x: 9;
  --flag-y: 6;
}
.flag-kg {
  --flag-x: 10;
  --flag-y: 6;
}
.flag-kh {
  --flag-x: 11;
  --flag-y: 6;
}
.flag-ki {
  --flag-x: 12;
  --flag-y: 6;
}
.flag-km {
  --flag-x: 13;
  --flag-y: 6;
}
.flag-kn {
  --flag-x: 14;
  --flag-y: 6;
}
.flag-kp {
  --flag-x: 15;
  --flag-y: 6;
}
.flag-kr {
  --flag-x: 16;
  --flag-y: 6;
}
.flag-kw {
  --flag-x: 17;
  --flag-y: 6;
}
.flag-ky {
  --flag-x: 18;
  --flag-y: 6;
}
.flag-kz {
  --flag-x: 19;
  --flag-y: 6;
}
.flag-la {
  --flag-x: 0;
  --flag-y: 7;
}
.flag-lb {
  --flag-x: 1;
  --flag-y: 7;
}
.flag-lc {
  --flag-x: 2;
  --flag-y: 7;
}
.flag-li {
  --flag-x: 3;
  --flag-y: 7;
}
.flag-lk {
  --flag-x: 4;
  --flag-y: 7;
}
.flag-lr {
  --flag-x: 5;
  --flag-y: 7;
}
.flag-ls {
  --flag-x: 6;
  --flag-y: 7;
}
.flag-lt {
  --flag-x: 7;
  --flag-y: 7;
}
.flag-lu {
  --flag-x: 8;
  --flag-y: 7;
}
.flag-lv {
  --flag-x: 9;
  --flag-y: 7;
}
.flag-ly {
  --flag-x: 10;
  --flag-y: 7;
}
.flag-ma {
  --flag-x: 11;
  --flag-y: 7;
}
.flag-mc {
  --flag-x: 12;
  --flag-y: 7;
}
.flag-md {
  --flag-x: 13;
  --flag-y: 7;
}
.flag-me {
  --flag-x: 14;
  --flag-y: 7;
}
.flag-mf {
  --flag-x: 15;
  --flag-y: 7;
}
.flag-mg {
  --flag-x: 16;
  --flag-y: 7;
}
.flag-mh {
  --flag-x: 17;
  --flag-y: 7;
}
.flag-mk {
  --flag-x: 18;
  --flag-y: 7;
}
.flag-ml {
  --flag-x: 19;
  --flag-y: 7;
}
.flag-mm {
  --flag-x: 0;
  --flag-y: 8;
}
.flag-mn {
  --flag-x: 1;
  --flag-y: 8;
}
.flag-mo {
  --flag-x: 2;
  --flag-y: 8;
}
.flag-mp {
  --flag-x: 3;
  --flag-y: 8;
}
.flag-mq {
  --flag-x: 4;
  --flag-y: 8;
}
.flag-mr {
  --flag-x: 5;
  --flag-y: 8;
}
.flag-ms {
  --flag-x: 6;
  --flag-y: 8;
}
.flag-mt {
  --flag-x: 7;
  --flag-y: 8;
}
.flag-mu {
  --flag-x: 8;
  --flag-y: 8;
}
.flag-mv {
  --flag-x: 9;
  --flag-y: 8;
}
.flag-mw {
  --flag-x: 10;
  --flag-y: 8;
}
.flag-mx {
  --flag-x: 11;
  --flag-y: 8;
}
.flag-my {
  --flag-x: 12;
  --flag-y: 8;
}
.flag-mz {
  --flag-x: 13;
  --flag-y: 8;
}
.flag-na {
  --flag-x: 14;
  --flag-y: 8;
}
.flag-nc {
  --flag-x: 15;
  --flag-y: 8;
}
.flag-ne {
  --flag-x: 16;
  --flag-y: 8;
}
.flag-nf {
  --flag-x: 17;
  --flag-y: 8;
}
.flag-ng {
  --flag-x: 18;
  --flag-y: 8;
}
.flag-ni {
  --flag-x: 19;
  --flag-y: 8;
}
.flag-nl {
  --flag-x: 0;
  --flag-y: 9;
}
.flag-no {
  --flag-x: 1;
  --flag-y: 9;
}
.flag-np {
  --flag-x: 2;
  --flag-y: 9;
}
.flag-nr {
  --flag-x: 3;
  --flag-y: 9;
}
.flag-nu {
  --flag-x: 4;
  --flag-y: 9;
}
.flag-nz {
  --flag-x: 5;
  --flag-y: 9;
}
.flag-om {
  --flag-x: 6;
  --flag-y: 9;
}
.flag-pa {
  --flag-x: 7;
  --flag-y: 9;
}
.flag-pc {
  --flag-x: 8;
  --flag-y: 9;
}
.flag-pe {
  --flag-x: 9;
  --flag-y: 9;
}
.flag-pf {
  --flag-x: 10;
  --flag-y: 9;
}
.flag-pg {
  --flag-x: 11;
  --flag-y: 9;
}
.flag-ph {
  --flag-x: 12;
  --flag-y: 9;
}
.flag-pk {
  --flag-x: 13;
  --flag-y: 9;
}
.flag-pl {
  --flag-x: 14;
  --flag-y: 9;
}
.flag-pm {
  --flag-x: 15;
  --flag-y: 9;
}
.flag-pn {
  --flag-x: 16;
  --flag-y: 9;
}
.flag-pr {
  --flag-x: 17;
  --flag-y: 9;
}
.flag-ps {
  --flag-x: 18;
  --flag-y: 9;
}
.flag-pt {
  --flag-x: 19;
  --flag-y: 9;
}
.flag-pw {
  --flag-x: 0;
  --flag-y: 10;
}
.flag-py {
  --flag-x: 1;
  --flag-y: 10;
}
.flag-qa {
  --flag-x: 2;
  --flag-y: 10;
}
.flag-re {
  --flag-x: 3;
  --flag-y: 10;
}
.flag-ro {
  --flag-x: 4;
  --flag-y: 10;
}
.flag-rs {
  --flag-x: 5;
  --flag-y: 10;
}
.flag-ru {
  --flag-x: 6;
  --flag-y: 10;
}
.flag-rw {
  --flag-x: 7;
  --flag-y: 10;
}
.flag-sa {
  --flag-x: 8;
  --flag-y: 10;
}
.flag-sb {
  --flag-x: 9;
  --flag-y: 10;
}
.flag-sc {
  --flag-x: 10;
  --flag-y: 10;
}
.flag-sd {
  --flag-x: 11;
  --flag-y: 10;
}
.flag-se {
  --flag-x: 12;
  --flag-y: 10;
}
.flag-sg {
  --flag-x: 13;
  --flag-y: 10;
}
.flag-sh {
  --flag-x: 14;
  --flag-y: 10;
}
.flag-sh-ac {
  --flag-x: 15;
  --flag-y: 10;
}
.flag-sh-hl {
  --flag-x: 16;
  --flag-y: 10;
}
.flag-sh-ta {
  --flag-x: 17;
  --flag-y: 10;
}
.flag-si {
  --flag-x: 18;
  --flag-y: 10;
}
.flag-sj {
  --flag-x: 19;
  --flag-y: 10;
}
.flag-sk {
  --flag-x: 0;
  --flag-y: 11;
}
.flag-sl {
  --flag-x: 1;
  --flag-y: 11;
}
.flag-sm {
  --flag-x: 2;
  --flag-y: 11;
}
.flag-sn {
  --flag-x: 3;
  --flag-y: 11;
}
.flag-so {
  --flag-x: 4;
  --flag-y: 11;
}
.flag-sr {
  --flag-x: 5;
  --flag-y: 11;
}
.flag-ss {
  --flag-x: 6;
  --flag-y: 11;
}
.flag-st {
  --flag-x: 7;
  --flag-y: 11;
}
.flag-sv {
  --flag-x: 8;
  --flag-y: 11;
}
.flag-sx {
  --flag-x: 9;
  --flag-y: 11;
}
.flag-sy {
  --flag-x: 10;
  --flag-y: 11;
}
.flag-sz {
  --flag-x: 11;
  --flag-y: 11;
}
.flag-tc {
  --flag-x: 12;
  --flag-y: 11;
}
.flag-td {
  --flag-x: 13;
  --flag-y: 11;
}
.flag-tf {
  --flag-x: 14;
  --flag-y: 11;
}
.flag-tg {
  --flag-x: 15;
  --flag-y: 11;
}
.flag-th {
  --flag-x: 16;
  --flag-y: 11;
}
.flag-tj {
  --flag-x: 17;
  --flag-y: 11;
}
.flag-tk {
  --flag-x: 18;
  --flag-y: 11;
}
.flag-tl {
  --flag-x: 19;
  --flag-y: 11;
}
.flag-tm {
  --flag-x: 0;
  --flag-y: 12;
}
.flag-tn {
  --flag-x: 1;
  --flag-y: 12;
}
.flag-to {
  --flag-x: 2;
  --flag-y: 12;
}
.flag-tr {
  --flag-x: 3;
  --flag-y: 12;
}
.flag-tt {
  --flag-x: 4;
  --flag-y: 12;
}
.flag-tv {
  --flag-x: 5;
  --flag-y: 12;
}
.flag-tw {
  --flag-x: 6;
  --flag-y: 12;
}
.flag-tz {
  --flag-x: 7;
  --flag-y: 12;
}
.flag-ua {
  --flag-x: 8;
  --flag-y: 12;
}
.flag-ug {
  --flag-x: 9;
  --flag-y: 12;
}
.flag-um {
  --flag-x: 10;
  --flag-y: 12;
}
.flag-un {
  --flag-x: 11;
  --flag-y: 12;
}
.flag-us {
  --flag-x: 12;
  --flag-y: 12;
}
.flag-uy {
  --flag-x: 13;
  --flag-y: 12;
}
.flag-uz {
  --flag-x: 14;
  --flag-y: 12;
}
.flag-va {
  --flag-x: 15;
  --flag-y: 12;
}
.flag-vc {
  --flag-x: 16;
  --flag-y: 12;
}
.flag-ve {
  --flag-x: 17;
  --flag-y: 12;
}
.flag-vg {
  --flag-x: 18;
  --flag-y: 12;
}
.flag-vi {
  --flag-x: 19;
  --flag-y: 12;
}
.flag-vn {
  --flag-x: 0;
  --flag-y: 13;
}
.flag-vu {
  --flag-x: 1;
  --flag-y: 13;
}
.flag-wf {
  --flag-x: 2;
  --flag-y: 13;
}
.flag-ws {
  --flag-x: 3;
  --flag-y: 13;
}
.flag-xk {
  --flag-x: 4;
  --flag-y: 13;
}
.flag-xx {
  --flag-x: 5;
  --flag-y: 13;
}
.flag-ye {
  --flag-x: 6;
  --flag-y: 13;
}
.flag-yt {
  --flag-x: 7;
  --flag-y: 13;
}
.flag-za {
  --flag-x: 8;
  --flag-y: 13;
}
.flag-zm {
  --flag-x: 9;
  --flag-y: 13;
}
.flag-zw {
  --flag-x: 10;
  --flag-y: 13;
}