/* ===== HERO HOME ===== */
.hero-betting{
  position: relative;
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 18px;

  /* Fondo (sin imagen): degradado moderno */
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(255, 193, 7, .22), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(13, 110, 253, .18), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 45%, #111827 100%);
  color: #fff;
  overflow: hidden;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
  pointer-events: none;
}

.hero-container{
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 10px;
  z-index: 1;
}

.hero-content{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 34px 28px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.hero-badge{
  display: inline-block;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,193,7,.18);
  border: 1px solid rgba(255,193,7,.35);
  color: #ffd24a;
  margin-bottom: 14px;
}

.hero-title{
  font-size: 46px;
  line-height: 1.05;
  margin: 0 0 12px 0;
  font-weight: 800;
}

.hero-subtitle{
  color: rgba(255,255,255,.80);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 22px 0;
  max-width: 720px;
}

.hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.btn-hero{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .08s ease, opacity .12s ease;
}

.btn-hero:hover{
  transform: translateY(-1px);
  opacity: .95;
}

.btn-hero.primary{
  background: #ffc107;
  color: #111;
  border: 1px solid rgba(255,193,7,.65);
}

.btn-hero.outline{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.30);
}

.hero-meta{
  color: rgba(255,255,255,.65);
  font-size: 13px;
}

/* Responsive */
@media (max-width: 576px){
  .hero-title{ font-size: 34px; }
  .hero-content{ padding: 26px 18px; border-radius: 16px; }
}
.worldcup-carousel{
  border-radius: 14px;
  overflow: hidden;
  margin: 16px auto 22px;
  max-width: 1200px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.worldcup-carousel .carousel-img{
  height: 260px;
  object-fit: cover;
  object-position: center;
  filter: brightness(.92);
}
/* ===== Fondo exclusivo HOME ===== */
.home-bg{
  background:#0b0f14;
  min-height:100vh;
}

/* neutraliza blanco del container SOLO en home */
.home-bg .container,
.home-bg .container-fluid{
  background: transparent !important;
}
/* HOME: fondo oscuro + quitar franja blanca bajo navbar */
.home-body{
  background:#0b0f14 !important;
}

/* el culpable de la franja: mb-4 del navbar */
.home-body .navbar{
  margin-bottom: 0 !important;
}

/* por si bootstrap mete fondos */
.home-body .container,
.home-body .container-fluid{
  background: transparent !important;
}
/* Fondo oscuro SOLO en /panel (porque body_class = panel-body) */
.panel-body{
  background:#0b0f14 !important;
}

/* Layout panel */
.panel-bg{
  background:#0b0f14;
  min-height: calc(100vh - 72px);
  padding: 18px 16px 40px;
}

.panel-container{
  max-width: 1200px;
  margin: 0 auto;
}

.panel-header{ margin: 6px 0 16px; }
.panel-title{ color:#fff; font-weight:800; margin:0; }
.panel-subtitle{ color: rgba(255,255,255,.65); margin:6px 0 0; }

.panel-grid{
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 18px;
}


.panel-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.panel-card-title{
  color:#ffd24a;
  font-weight: 800;
  letter-spacing:.04em;
  margin-bottom: 12px;
}

/* Mini cards de grupos */
.mini-card{
  border-radius: 14px;
  padding: 0;
}

/* achicamos altura y letras */
.mini-card table{
  font-size: 13px;
}

.mini-card th,
.mini-card td{
  padding: 6px 8px;
}


.mini-link{
  color:#ffd24a;
  text-decoration:none;
  font-weight:700;
}
.mini-link:hover{ text-decoration:underline; }

@media (max-width: 992px){
  .panel-grid{ grid-template-columns: 1fr; }
}
/* ===============================
   BRACKET (LLAVE ELIMINATORIAS)
   Unificado + conectores + centrado
   =============================== */

:root{
  /* Ajustá esto si querés más/menos separación */
  --brk-col-gap: 44px;       /* espacio entre columnas */
  --brk-row-gap: 18px;       /* separación entre pares */
  --brk-match-gap: 12px;     /* separación entre 2 matches del mismo par */

  /* Conectores */
  --brk-line: rgba(0,0,0,.55);
  --brk-node: #ffc107;

  /* “Altura objetivo” para el centrado 2→1
     Si tus cards cambian de tamaño, ajustalo (140–170 suele ir bien) */
  --brk-card-h: 150px;
}

/* === Layout general === */
.brk-wrap{
  display: grid;
  grid-template-columns: repeat(6, minmax(240px, 1fr)); /* 16avos, Octavos, Cuartos, Semis, Final, Campeón */
  gap: var(--brk-col-gap);
  align-items: start;
  overflow-x: auto;
  padding-bottom: 14px;
}

/* Columnas (rondas) */
.brk-round{
  position: relative;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

.brk-round-title{
  font-size: 14px;
  font-weight: 900;
  color: rgba(255,255,255,.88);
  margin-bottom: 10px;
}

/* Cada par (2 partidos que “suben” a 1 en la ronda siguiente) */
.brk-pair{
  position: relative;
  margin-bottom: var(--brk-row-gap);
  padding-right: 56px; /* espacio para conectores hacia la derecha */
}

.brk-pair:last-child{ margin-bottom: 0; }

/* Cards */
.brk-match{
  background: linear-gradient(180deg, #111827, #0b1220);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: var(--brk-match-gap);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}

.brk-pair .brk-match:last-child{ margin-bottom: 0; }

.brk-team{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,.10);
}
.brk-team:last-of-type{ border-bottom: none; }

.brk-name{ color:#fff; font-weight: 800; font-size: 13px; }
.brk-score{ color:#ffd24a; font-weight: 900; font-size: 13px; }

.brk-meta{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

.brk-empty{
  color: rgba(255,255,255,.70);
  font-size: 13px;
  padding: 10px 2px 4px;
}

/* Badges */
.brk-top{ margin-bottom: 8px; }

.brk-badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
}
.brk-badge-preview{
  border-color: rgba(13,110,253,.35);
  background: rgba(13,110,253,.12);
}
.brk-badge-open{
  border-color: rgba(25,135,84,.35);
  background: rgba(25,135,84,.12);
}
.brk-badge-closing{
  border-color: rgba(255,193,7,.40);
  background: rgba(255,193,7,.12);
  color: #ffd24a;
}
.brk-badge-locked{
  border-color: rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.75);
}
.brk-badge-final{
  border-color: rgba(255,193,7,.40);
  background: rgba(255,193,7,.10);
  color: #ffd24a;
}

/* Countdown */
.brk-countdown-row{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.75);
  display:flex;
  gap: 8px;
  align-items:center;
}
.brk-countdown{ font-weight: 900; color: #ffd24a; }

/* ===============================
   CONECTORES (tipo UEFA)
   - Tronco vertical por par
   - Dos horizontales desde cada card al tronco
   - Horizontal de salida hacia la siguiente ronda
   =============================== */

.brk-with-connectors .brk-pair::before{
  content:"";
  position:absolute;
  right: 24px;
  top: 20px;
  bottom: 20px;
  width: 3px;
  background: var(--brk-line);
  border-radius: 3px;
}

.brk-with-connectors .brk-pair::after{
  content:"";
  position:absolute;
  right: 23px;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--brk-node);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(0,0,0,.35);
}

/* Salida horizontal al siguiente round */
.brk-with-connectors .brk-pair .brk-out{
  position:absolute;
  right: 24px;
  top: 50%;
  width: calc(var(--brk-col-gap) - 10px);
  height: 3px;
  background: var(--brk-line);
  transform: translateY(-50%);
  border-radius: 3px;
  pointer-events:none;
}

/* Conecta cada match al tronco */
.brk-with-connectors .brk-pair .brk-match{
  position: relative;
}
.brk-with-connectors .brk-pair .brk-match::after{
  content:"";
  position:absolute;
  right: -32px;
  top: 50%;
  width: 32px;
  height: 3px;
  background: var(--brk-line);
  transform: translateY(-50%);
  border-radius: 3px;
  pointer-events:none;
}

/* ===============================
   CENTRADO 2→1 (lo “prolijo”)
   La idea: la ronda siguiente baja medio bloque
   para que el partido quede centrado entre los 2 anteriores.
   =============================== */

/* Cada par “base” ocupa 2 cards */
.brk-round:nth-child(1) .brk-pair,  /* 16avos */
.brk-round:nth-child(2) .brk-pair,  /* Octavos */
.brk-round:nth-child(3) .brk-pair{  /* Cuartos */
  min-height: calc(var(--brk-card-h) * 2 + var(--brk-match-gap) + 40px);
}

/* Desplazamos las rondas destino para centrar */
.brk-round:nth-child(2) .brk-pair,  /* Octavos */
.brk-round:nth-child(3) .brk-pair,  /* Cuartos */
.brk-round:nth-child(4) .brk-pair,  /* Semis */
.brk-round:nth-child(5) .brk-pair,  /* Final */
.brk-round:nth-child(6) .brk-pair{  /* Campeón */
  padding-top: calc(var(--brk-card-h) / 2 + var(--brk-match-gap) / 2);
}

/* Semis/Final/Campeón suelen tener 1 match: evitamos tronco enorme */
.brk-round:nth-child(4) .brk-pair::before,
.brk-round:nth-child(5) .brk-pair::before,
.brk-round:nth-child(6) .brk-pair::before{
  top: 50%;
  bottom: 50%;
}

/* Última columna (Campeón) sin salida a la derecha */
.brk-round.brk-champion .brk-out{
  display:none;
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 1400px){
  .brk-wrap{ grid-template-columns: repeat(4, minmax(240px, 1fr)); }
}
@media (max-width: 992px){
  .brk-wrap{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 768px){
  .brk-wrap{ grid-template-columns: 1fr; gap: 14px; }
  .brk-pair{ padding-right: 0; }
  .brk-with-connectors .brk-pair::before,
  .brk-with-connectors .brk-pair::after,
  .brk-with-connectors .brk-out,
  .brk-with-connectors .brk-pair .brk-match::after{
    display:none;
  }
  .brk-round:nth-child(2) .brk-pair,
  .brk-round:nth-child(3) .brk-pair,
  .brk-round:nth-child(4) .brk-pair,
  .brk-round:nth-child(5) .brk-pair,
  .brk-round:nth-child(6) .brk-pair{
    padding-top: 0;
    min-height: auto;
  }
}
/* =========================================
   BRACKET · CENTRADO TIPO TV (32→16→8→4→2→1)
   Pegarlo al FINAL del CSS
   ========================================= */

:root{
  /* Ajustables: si cambiás tamaño de card, tocá esto */
  --brk-match-minh: 132px;  /* altura mínima de cada card */
  --brk-inpair-gap: 12px;   /* separación entre las 2 cards dentro del par */
  --brk-pair-gap: 18px;     /* separación entre pares (columna base) */
}

/* Asegura altura consistente para que el centrado sea matemático */
.brk-match{
  min-height: var(--brk-match-minh);
}

/* Un "par" en 16avos/octavos/cuartos representa 2 partidos */
.brk-pair{
  display: flex;
  flex-direction: column;
  gap: var(--brk-inpair-gap);
  margin-bottom: var(--brk-pair-gap);
}

/* Altura total de un par de 2 cards */
.brk-wrap{
  --brk-pair-h: calc(var(--brk-match-minh) * 2 + var(--brk-inpair-gap));
}

/* ==========================
   16AVOS (columna base)
   ========================== */
.brk-round[data-round="16avos"] .brk-pair{
  margin-bottom: var(--brk-pair-gap);
}

/* ==========================
   OCTAVOS (centro de 2 pares de 16avos)
   - Cada par de octavos debe quedar entre medio de 2 pares de 16avos
   ========================== */
.brk-round[data-round="octavos"] .brk-pair{
  /* separa cada par de octavos como si "saltara" un par de 16avos */
  margin-bottom: calc(var(--brk-pair-h) + var(--brk-pair-gap));
}
.brk-round[data-round="octavos"] .brk-pair:first-child{
  /* baja la columna para centrar el primer par */
  margin-top: calc(var(--brk-pair-h) / 2 + var(--brk-pair-gap) / 2);
}

/* ==========================
   CUARTOS (centro de 2 pares de octavos)
   ========================== */
.brk-round[data-round="cuartos"] .brk-pair{
  margin-bottom: calc(var(--brk-pair-h) * 2 + var(--brk-pair-gap) * 2);
}
.brk-round[data-round="cuartos"] .brk-pair:first-child{
  margin-top: calc(var(--brk-pair-h) + var(--brk-pair-gap));
}

/* ==========================
   SEMIS (2 partidos sueltos)
   - Cada “brk-pair” en semis normalmente contiene 1 card
   - Lo centramos respecto a los 2 cuartos anteriores
   ========================== */
.brk-round[data-round="semis"] .brk-pair{
  margin-bottom: calc(var(--brk-pair-h) * 4 + var(--brk-pair-gap) * 4);
}
.brk-round[data-round="semis"] .brk-pair:first-child{
  margin-top: calc(var(--brk-pair-h) * 2 + var(--brk-pair-gap) * 2);
}

/* ==========================
   FINAL (1 partido)
   - Centrado respecto a las 2 semis
   ========================== */
.brk-round[data-round="final"] .brk-pair:first-child{
  margin-top: calc(var(--brk-pair-h) * 4 + var(--brk-pair-gap) * 4);
}

/* ==========================
   CAMPEÓN (debajo o al lado, según tu layout)
   - Si lo tenés como columna extra: lo centramos con la final
   ========================== */
.brk-round[data-round="champion"] .brk-pair:first-child{
  margin-top: calc(var(--brk-pair-h) * 4 + var(--brk-pair-gap) * 4);
}

/* En móvil, se apila: eliminamos offsets */
@media (max-width: 768px){
  .brk-round[data-round="octavos"] .brk-pair:first-child,
  .brk-round[data-round="cuartos"] .brk-pair:first-child,
  .brk-round[data-round="semis"] .brk-pair:first-child,
  .brk-round[data-round="final"] .brk-pair:first-child,
  .brk-round[data-round="champion"] .brk-pair:first-child{
    margin-top: 0;
  }

  .brk-round[data-round="octavos"] .brk-pair,
  .brk-round[data-round="cuartos"] .brk-pair,
  .brk-round[data-round="semis"] .brk-pair{
    margin-bottom: var(--brk-pair-gap);
  }
}

/* ===== ESCUDOS HOME (FIX DEFINITIVO) ===== */
.club-logos .logo-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.club-logos .logo-card img{
  width:74px !important;
  height:74px !important;
  max-width:74px !important;
  max-height:74px !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 auto !important;
}

.club-logos .logo-name{
  color: rgba(255,255,255,.85);
  text-align:center;
}
.premios {
  margin: 0 16px;          /* separación horizontal */
  font-weight: 700;
}
.no-copy {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
/* Permitir seleccionar texto en inputs */
.no-copy input,
.no-copy textarea,
.no-copy select {
  user-select: text;
  -webkit-user-select: text;
}
.watermark {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  font-size: 28px;
  color: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-30deg);
  text-transform: uppercase;
  letter-spacing: 2px;
}
/* Bloqueo selección/copia (UX: se activa solo en páginas protegidas) */
.no-copy {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Permitir selección dentro de inputs */
.no-copy input,
.no-copy textarea,
.no-copy select {
  user-select: text;
  -webkit-user-select: text;
}

/* Watermark (solo se renderiza si hay user_name y g.no_copy) */
.watermark {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.08);
  transform: rotate(-30deg);
}

/* Blur temporal para disuasión */
.screen-blur {
  filter: blur(10px);
}
/* =========================
   Escudos + nombres (Liga / Tablas / Partidos)
   ========================= */


.team-cell{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.team-logo{
  width:22px;
  height:22px;
  object-fit:contain;
}
/* =========================
   CONTADOR MUNDIAL – DESTACADO
   ========================= */
.wc-countdown-box{
  border: 1px solid rgba(27,76,255,.55);
  border-radius: 18px;
  background: rgba(13, 27, 42, 0.95) !important;
  padding: 28px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.wc-title, .wc-subtitle, .wc-timer { color: #fff !important; }


.wc-countdown-inner{
  text-align: center;
}

.wc-title{
  color: #ffffff;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: .4px;
}

.wc-subtitle{
  color: rgba(255,255,255,.9);
  font-size: 1.05rem;
  margin-top: 6px;
}

.wc-timer{
  margin-top: 18px;
  color: #ffffff;
  font-weight: 900;
  font-size: 3rem;
  letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 576px){
  .wc-timer{ font-size: 2.2rem; }
  .wc-title{ font-size: 1.35rem; }
}
.featured-match img{
  max-width: 650px;
  width: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.featured-match img:hover{
  transform: scale(1.01);
  box-shadow: 0 10px 25px rgba(0,0,0,.4);
}