/* ==========================================================================
   bracket-web.css - VISTA ESCRITORIO CENTRADA SIN RECORTES IZQUIERDOS
   ========================================================================== */

.fixture-embed-wrapper,
.fixture-bracket-wrapper,
.bracket-viewport-container {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 500px !important;
  background-color: #0d1117 !important;
  padding: 15px 5px !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  border-radius: 8px !important;
  overflow-x: auto !important; /* Mantiene scroll seguro si la pantalla es pequeña */
  overflow-y: hidden !important;
}

/* MARCO CONTENEDOR COMPACTO */
.bracket-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  margin: 0 auto !important;
  width: max-content !important;
}

.bracket-headers-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
}

.column-header {
  width: 95px !important; /* Dimensión exacta para que entren las 9 columnas sin cortar */
  text-align: center !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  background: #1e293b !important;
  padding: 4px 1px !important;
  border-radius: 4px !important;
  border: 1px solid #334155 !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.column-header.gran-final {
  background: #f59e0b !important;
  color: #0f172a !important;
  border-color: #fbbf24 !important;
}

.bracket-tree-area {
  position: relative !important;
  width: max-content !important;
  height: 600px !important;
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

#bracket-canvas,
.bracket-container {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
}

.bracket-column {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-around !important;
  width: 95px !important;
  height: 600px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.bracket-column.columna-centro {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
}

.partido-card,
.partido-vacio {
  background: #1e293b !important;
  border: 1px solid #0284c7 !important;
  border-radius: 5px !important;
  padding: 3px 4px !important;
  width: 95px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  font-size: 0.65rem !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
  margin: 0 auto !important;
}

.partido-vacio {
  background: #0f172a !important;
  border: 1px dashed #334155 !important;
  opacity: 0.5 !important;
}

.team-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #f8fafc !important;
  font-weight: bold !important;
}

.team-name-box {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  overflow: hidden !important;
  max-width: 65px !important;
}

.team-name-box span {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.team-name-box img {
  width: 12px !important;
  height: 12px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

.team-score {
  background: #0f172a !important;
  color: #38bdf8 !important;
  padding: 1px 3px !important;
  border-radius: 3px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
}

#bracket-svg-lines,
.bracket-svg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.match-detail-page #seccion-fixture-playoffs button,
.fixture-embed-wrapper button {
  display: none !important;
}