/* =======================
   LISTA GENERAL DE PAÍSES
======================= */

.lista-ligas {
  display: flex;
  flex-direction: column;

  gap: 5px;

  max-height: calc(100vh - 175px);
  max-height: calc(100dvh - 175px);

  padding: 6px;

  overflow-y: auto;
  overflow-x: hidden;

  overscroll-behavior: contain;

  scrollbar-gutter: stable;

  scrollbar-width: thin;
  scrollbar-color: #666 #202020;
}


.lista-ligas::-webkit-scrollbar {
  width: 7px;
}


.lista-ligas::-webkit-scrollbar-track {
  background: #202020;

  border-radius: 999px;
}


.lista-ligas::-webkit-scrollbar-thumb {
  background: #5c5c5c;

  border-radius: 999px;
}


.lista-ligas::-webkit-scrollbar-thumb:hover {
  background: #777;
}


/* =======================
   CABECERA PAÍSES
======================= */

.paises-separador {
  position: sticky;
  top: 0;

  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  min-height: 30px;

  padding: 7px 6px;

  margin: 0 -1px;

  border-bottom: 1px solid #3a3a3a;

  background:
    linear-gradient(
      180deg,
      #292929 0%,
      #242424 100%
    );

  color: #d6ad42;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .8px;

  text-transform: uppercase;

  box-shadow:
    0 3px 6px rgba(0,0,0,.18);
}


.paises-separador small {
  color: #999;

  font-size: 10px;
  font-weight: 800;

  font-variant-numeric: tabular-nums;
}


/* =======================
   BOTÓN DE PAÍS
======================= */

.pais-item {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  min-height: 40px;

  padding: 7px 9px;

  border: 1px solid #1c1c1c;

  border-radius: 6px;

  background:
    linear-gradient(
      180deg,
      #383838 0%,
      #303030 100%
    );

  color: #f1f1f1;

  font-size: 12px;
  font-weight: 800;

  text-align: left;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}


.pais-item:hover {
  border-color: #80651e;

  background:
    linear-gradient(
      180deg,
      #454545 0%,
      #363636 100%
    );
}


.pais-item:active {
  transform: scale(.99);
}


/* =======================
   BANDERA + NOMBRE
======================= */

.pais-identidad {
  display: flex;
  align-items: center;

  gap: 9px;

  min-width: 0;

  flex: 1;
}


.pais-identidad > span:last-child {
  min-width: 0;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}


/* =======================
   BANDERAS SVG
======================= */

.pais-bandera {
  position: relative;

  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 19px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.15);

  border-radius: 3px;

  background: #202020;

  box-shadow:
    0 1px 3px rgba(0,0,0,.35);
}


.pais-bandera-fallback {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #bcbcbc;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .3px;
}


.pais-bandera img {
  position: absolute;
  inset: 0;

  z-index: 2;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =======================
   CONTADOR + FLECHA
======================= */

.pais-meta {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: 8px;

  color: #aaa;
}


.pais-meta strong {
  min-width: 27px;
  height: 21px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 6px;

  border: 1px solid #111;

  border-radius: 999px;

  background: #202020;

  color: #ddd;

  font-size: 10px;
  font-weight: 900;

  font-variant-numeric: tabular-nums;
}


.pais-meta strong.sin-eventos {
  color: #777;

  background: #292929;

  opacity: .72;
}


.pais-meta > span {
  color: #d6ad42;

  font-size: 18px;
  line-height: 1;
}


/* =======================
   BOTÓN VOLVER
======================= */

.volver-paises {
  width: 100%;

  min-height: 36px;

  padding: 0 10px;

  border: 1px solid #292929;

  border-radius: 6px;

  background:
    linear-gradient(
      180deg,
      #393939 0%,
      #303030 100%
    );

  color: #ddb749;

  font-size: 11px;
  font-weight: 900;

  text-align: left;

  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease;
}


.volver-paises:hover {
  border-color: #80651e;

  background:
    linear-gradient(
      180deg,
      #464646 0%,
      #373737 100%
    );
}


/* =======================
   PAÍS SELECCIONADO
======================= */

.pais-cabecera {
  display: flex;
  align-items: center;

  gap: 10px;

  padding: 11px 9px;

  margin-bottom: 4px;

  border-bottom: 1px solid #444;

  border-radius: 5px;

  background:
    linear-gradient(
      180deg,
      #303030 0%,
      #292929 100%
    );
}


.pais-cabecera > div {
  display: flex;
  flex-direction: column;

  gap: 2px;

  min-width: 0;
}


.pais-cabecera strong {
  overflow: hidden;

  color: #fff;

  font-size: 14px;
  font-weight: 900;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.pais-cabecera small {
  color: #aaa;

  font-size: 10px;
  font-weight: 750;
}


/* =======================
   PAÍS SIN EVENTOS
======================= */

.ligas-vacio {
  padding: 18px 12px;

  border: 1px dashed #444;

  border-radius: 6px;

  background: #292929;

  color: #aaa;

  font-size: 12px;
  line-height: 1.5;

  text-align: center;
}


.ligas-vacio strong {
  color: #ddd;

  font-weight: 900;
}


/* =======================
   ALTURA DEL PANEL CENTRAL
======================= */

.eventos-lista {
  min-height: calc(100vh - 174px);
  min-height: calc(100dvh - 174px);
}