/* ======= CONTENEDOR PRINCIPAL ======= */
:root {
  --web-azul:      #434C6B;  /* azul oscuro principal */
  --web-azul-soft: #f0f2f8;  /* azul muy claro (filas) */
  --web-dorado:    #DDAC49;  /* dorado de acento */
  --web-bg:        #E6E6E6;  /* fondo de página */
  --web-gris:      #8b949e;  /* gris (eliminado) */
  --web-border:    #d8dce6;
}

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

/* ======= CONTENEDOR: caja gris con scroll ======= */
.copa-bracket {
  background: #212529;
  border-radius: 14px;
  border: 1px solid var(--web-border);
  padding: 20px 12px;
  box-shadow: 0 4px 18px rgba(67, 76, 107, 0.12);
  color: #ffffff;
  font-family: Arial, Helvetica, 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: #d0d5e0; 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: var(--web-azul);
  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: #434C6B;
  border-radius: 10px;
  border: 1px solid #5a6485;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  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-soft);
  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: var(--web-azul);
  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: #e2e5ee;
  color: var(--web-azul);
}

/* ---- GANADOR: marcado en azul oscuro + dorado ---- */
.copa-team.win {
  background: #ffffff;
  border: 2px solid var(--web-azul);
  box-shadow: 0 2px 8px rgba(67, 76, 107, 0.20);
}
.copa-team.win .copa-team__name {
  color: var(--web-azul);
  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-azul);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(67, 76, 107, 0.35);
}

/* ---- ELIMINADO: gris ---- */
.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: #e2e5ee; 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; }
}