/* ======= CONTENEDOR PRINCIPAL ======= */
/* Paleta web: Azul logo #2B368C | Navy #090914 | Gris #E6E6E6 |
   Acentos lila: #c7cbe0 / #8f97bd / #dfe2f3 | Fuente Poppins */
:root {
  --web-azul:      #2B368C;  /* azul logo principal */
  --web-azul-soft: #dfe2f3;  /* azul muy claro (filas) */
  --web-navy:      #090914;  /* navy oscuro de fondo */
  --web-card:      #11132B;  /* azul profundo de tarjetas */
  --web-dorado:    #DDAC49;  /* dorado de acento */
  --web-gris:      #8f97bd;  /* gris lila (eliminado) */
  --web-border:    #c7cbe8;
}

.bracket-wrapper {
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 10px;
  border-radius: 15px;
}

/* ======= CONTENEDOR: caja navy con scroll ======= */
.copa-bracket {
  background: var(--web-navy);
  border-radius: 14px;
  border: 1px solid var(--web-border);
  padding: 20px 12px;
  box-shadow: 0 4px 18px rgba(9, 9, 20, 0.45);
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  min-width: max-content;
}

.copa-bracket__body {
  display: flex;
}

.copa-bracket__body::-webkit-scrollbar { height: 8px; }
.copa-bracket__body::-webkit-scrollbar-track { background: var(--web-card); border-radius: 8px; }
.copa-bracket__body::-webkit-scrollbar-thumb { background: var(--web-dorado); border-radius: 8px; }

/* ======= COLUMNA (ronda): grid de 8 filas para alinear el bracket ======= */
.copa-stage {
  flex: 1 0 250px;
  min-width: 250px;
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.copa-stage + .copa-stage { border-left: 1px solid var(--web-border); }

.copa-stage__title {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--web-dorado);
}

.copa-stage__grid {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  gap: 8px;
  align-content: space-evenly;
}

/* octavos: 1 fila | cuartos: 2 | semis: 4 | final: 8 */
.copa-stage.octavos .copa-match { grid-row: span 1; }
.copa-stage.cuartos .copa-match { grid-row: span 2; }
.copa-stage.semis .copa-match   { grid-row: span 4; }
.copa-stage.final  .copa-match  { grid-row: span 8; }

/* ======= TARJETA DE PARTIDO ======= */
.copa-match {
  background: var(--web-card);
  border-radius: 10px;
  border: 1px solid var(--web-azul);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

/* ======= LÍNEA DE EQUIPO ======= */
.copa-team {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--web-azul);
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 4px 8px;
  min-height: 24px;
}

.copa-team__shield {
  width: 14px; height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--web-border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.copa-team__shield img { width: 100%; height: 100%; object-fit: contain; }

.copa-team__name {
  flex: 1;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copa-team__score {
  font-size: 12px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 5px;
  background: #ffffff;
  color: var(--web-azul);
}

/* ---- GANADOR: resaltado navy + dorado ---- */
.copa-team.win {
  background: var(--web-card);
  border: 2px solid var(--web-dorado);
  box-shadow: 0 2px 8px rgba(221, 172, 73, 0.25);
}
.copa-team.win .copa-team__name {
  color: #ffffff;
  font-weight: 700;
}
.copa-team.win .copa-team__name::after {
  content: " ✓";
  color: var(--web-dorado);
  font-weight: 700;
}
.copa-team.win .copa-team__score {
  background: var(--web-dorado);
  color: #090914;
  box-shadow: 0 2px 6px rgba(221, 172, 73, 0.4);
}

/* ---- ELIMINADO: gris lila ---- */
.copa-team.lose { opacity: .85; }
.copa-team.lose .copa-team__name { color: var(--web-gris); font-weight: 400; }
.copa-team.lose .copa-team__score { background: #dfe2f3; color: var(--web-gris); }

/* ---- A CONFIRMAR ---- */
.copa-team.confirmar .copa-team__name { color: var(--web-gris); font-style: italic; font-weight: 400; }
.copa-team.confirmar .copa-team__score { background: transparent; color: transparent; }

/* ======= GLOBAL EN EL MEDIO ======= */
.copa-match__global {
  align-self: center;
  background: #ffffff;
  color: var(--web-azul);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--web-dorado);
  white-space: nowrap;
  cursor: pointer;
}
.copa-match__global b { color: var(--web-dorado); font-size: 10px; }

/* ======= RESPONSIVE ======= */
@media screen and (max-width: 768px) {
  .copa-stage { flex-basis: 200px; min-width: 200px; padding: 0 8px; }
  .copa-stage__title { font-size: 11px; }
  .copa-match { padding: 5px 7px; }
  .copa-team__name { font-size: 11px; }
  .copa-team__score { min-width: 19px; padding: 1px 4px; font-size: 11px; }
}