/* bracket view styles — owned by the bracket view agent.
   Mobile-first: una columna (ronda activa elegida por las SegmentedTabs).
   Escritorio: árbol horizontal con líneas conectoras. */

.bracket-view { display: block; }

.bracket-view__header { margin-bottom: 14px; }
.bracket-view__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--ink);
  line-height: 1.1;
}
.bracket-view__subtitle {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: .9rem;
}

/* Tabs de ronda: solo en móvil (en escritorio se ven todas las columnas). */
.bracket-tabs { margin-bottom: 16px; }

/* ===== Árbol ===== */
.bracket-tree { display: block; }

/* ----- Móvil: una columna a la vez ----- */
.bracket-col { display: none; }
.bracket-col.is-active { display: block; }

.bracket-col__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}
.bracket-col__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.bracket-col__count {
  font-size: .68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  background: var(--surface-sunk);
  border-radius: var(--r-pill);
  padding: 1px 8px;
}

.bracket-col__slots {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ===== Nodo ===== */
.bracket-node {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bracket-node__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 16px;
  margin-bottom: 2px;
}
.bracket-node__when {
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bracket-node__team {
  display: grid;
  /* crest · nombre · chip % campeón (opcional) · marcador */
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
}
.bracket-node__team .champ-chip--xs { justify-self: end; }
.bracket-node__team.is-loser .champ-chip--xs { opacity: .6; }
.bracket-node__crest { width: 22px; height: 22px; }
.bracket-node__crest--tbd {
  display: inline-block;
  border-radius: 50%;
  background: var(--surface-sunk);
}
.bracket-node__name {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bracket-node__name.is-tbd { color: var(--ink-3); font-weight: 500; font-style: italic; }
.bracket-node__score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 16px;
  text-align: right;
}

/* Ganador / perdedor del cruce. */
.bracket-node__team.is-winner .bracket-node__name { color: var(--ink); font-weight: 800; }
.bracket-node__team.is-winner .bracket-node__score { color: var(--win); }
.bracket-node__team.is-winner::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--win);
  justify-self: end;
}
.bracket-node__team.is-loser .bracket-node__name { color: var(--ink-3); font-weight: 600; }
.bracket-node__team.is-loser .bracket-node__score { color: var(--ink-3); }
.bracket-node__team.is-loser .bracket-node__crest { opacity: .6; }

/* Nodo en vivo: acento rojo. */
.bracket-node.is-live { border-color: var(--live); box-shadow: 0 0 0 1px var(--live-soft), var(--shadow-md); }

/* Final destacada. */
.bracket-node--final {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: var(--shadow-lg);
}
.bracket-node--third { opacity: .96; }

/* Placeholder "Por definir". */
.bracket-node--tbd {
  background: var(--surface-soft);
  border-style: dashed;
  cursor: default;
}

.bracket-col--final .bracket-col__title,
.bracket-col--third .bracket-col__title { color: var(--brand-1); }

/* ===== Escritorio: árbol horizontal con scroll y conectores ===== */
@media (min-width: 760px) {
  /* En escritorio las tabs sobran: se ven todas las columnas. */
  .bracket-tabs { display: none; }

  .bracket-tree {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
  }

  .bracket-col {
    display: flex !important; /* anula el toggle móvil */
    flex-direction: column;
    flex: 0 0 230px;
    min-width: 230px;
    padding: 0 18px;
  }
  .bracket-col--final, .bracket-col--third { flex-basis: 250px; min-width: 250px; }

  /* Reparte los slots verticalmente para alinear el árbol. */
  .bracket-col__slots {
    flex: 1;
    justify-content: space-around;
    gap: 18px;
  }

  /* Conectores: línea horizontal hacia la columna anterior. */
  .bracket-col:not(:first-child) .bracket-col__slots > * {
    position: relative;
  }
  .bracket-col:not(:first-child) .bracket-col__slots > *::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -18px;
    width: 18px;
    height: 1.5px;
    background: var(--hairline);
  }
}

/* Pantallas anchas: caben más columnas sin scroll. */
@media (min-width: 1100px) {
  .bracket-tree { justify-content: center; }
}

/* ===== Esqueleto ===== */
.bracket-node-skeleton {
  height: 84px;
  border-radius: var(--r-md);
  margin-bottom: 12px;
}

/* ===== Movimiento reducido ===== */
@media (prefers-reduced-motion: reduce) {
  .bracket-node.fade-in { animation: none; }
}
@media (hover: hover) {
  .bracket-node.is-clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
}

/* CTA del estado vacío pre-llaves: lleva al bracket proyectado (Quiniela). */
.bracket-empty__cta {
  appearance: none;
  border: 0;
  cursor: pointer;
  margin-top: 14px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  color: #fff;
  background: var(--grad-brand);
  box-shadow: var(--shadow-md);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.bracket-empty__cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }