/* ============================================================
   LNS · Árbol de eliminación (bracket)
   Se usa en la sección Resultados de la portada y en bracket.php
   ============================================================ */

.arbol {
  position: relative;
  display: flex;
  gap: 56px;
  align-items: stretch;
  min-width: max-content;
  padding: 4px 0 8px;
}

.ronda {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 238px;
  flex: 0 0 238px;
}

/* Las mangas se colocan por posición: cada una queda centrada en el promedio
   de las que la alimentan (lo calcula acomodarArbol() en js/bracket-ui.js). */
/* Las mangas van en flujo normal; acomodarArbol() les pone el margen justo
   para que cada una quede centrada respecto a las que la alimentan. */
.cuerpo { position: relative; flex: 0 0 auto; }
.celda { position: relative; }
.celda > .manga { width: 100%; }

.manga {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(237, 231, 217, .12);
  background: #141210;
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 10px 24px -18px #000;
}

.manga-tit {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 5px 10px;
  background: rgba(255,255,255,.045);
  font-family: Oswald, sans-serif; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(237,231,217,.5);
}

.fila {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px; height: 36px;
  border-top: 1px solid rgba(237,231,217,.07);
}

.fila-pasa { background: linear-gradient(90deg, rgba(21,121,74,.30), rgba(21,121,74,.10)); }
.fila-pasa .nom { color: #fff; font-weight: 600; }

.sem { width: 3px; height: 18px; border-radius: 2px; background: transparent; flex: 0 0 3px; }
.fila-pasa .sem   { background: #2FA36B; }
.fila-oro .sem    { background: #E3B341; }
.fila-plata .sem  { background: #C8CBD0; }
.fila-bronce .sem { background: #B87333; }
.fila-oro    { background: linear-gradient(90deg, rgba(227,179,65,.22), transparent); }
.fila-plata  { background: linear-gradient(90deg, rgba(200,203,208,.16), transparent); }
.fila-bronce { background: linear-gradient(90deg, rgba(184,115,51,.18), transparent); }

.pos {
  width: 16px; flex: 0 0 16px; text-align: center;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  color: rgba(237,231,217,.3);
}
.nom {
  flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eq {
  font-size: 10.5px; color: rgba(237,231,217,.42);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vacia .nom { color: rgba(237,231,217,.22); font-style: italic; }

.rotulo {
  font-family: Oswald, sans-serif; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(237,231,217,.55);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.rotulo::after { content: ''; flex: 1; height: 1px; background: rgba(237,231,217,.12); }

.ronda.final .manga {
  border-color: rgba(227,179,65,.4);
  box-shadow: 0 0 0 1px rgba(227,179,65,.12), 0 14px 30px -20px #000;
}

/* Indicador "en vivo" */
@keyframes lns-latido { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.vivo { animation: lns-latido 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .vivo { animation: none; } }

.bracket-scroll { overflow-x: auto; }
.bracket-scroll::-webkit-scrollbar { height: 10px; }
.bracket-scroll::-webkit-scrollbar-thumb { background: #2C2924; border-radius: 6px; }