:root{
  --bg-0:#070816;
  --bg-1:#0b0b22;
  --card:#120f2f;
  --card2:#0f1b33;
  --border:#2a1f55;
  --text:#f3f0ff;
  --muted:#c9b7ff;
  --accent:#d84bb8;     /* magenta */
  --accent2:#7b3cff;    /* purple */
  --danger:#ff3b5c;
  font-family: system-ui, Arial;
}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(123,60,255,.25), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(216,75,184,.22), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
}
.container{ max-width:1100px; margin:0 auto; padding:16px; }
h1,h2,h3{ margin:10px 0; }
.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card{
  background: rgba(18,15,47,.92);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.table{ width:100%; border-collapse:collapse; overflow:hidden; border-radius:12px; }
.table th,.table td{
  padding: 9px 10px;
  border-bottom: 1px solid rgba(42,31,85,.7);
  text-align:left;
  font-size:14px;
}
.table thead th{
  background: rgba(123,60,255,.14);
  color: var(--text);
}
.badge{
  display:inline-block;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(123,60,255,.18);
  border: 1px solid rgba(216,75,184,.25);
  font-size: 12px;
}
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
input,button,select{
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(42,31,85,.9);
  background: rgba(7,8,22,.65);
  color: var(--text);
}
button{ cursor:pointer; }
button.primary{
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  border-color: transparent;
}
button.danger{
  background: linear-gradient(135deg, var(--danger), #b1002f);
  border-color: transparent;
}
small.muted{ color: rgba(201,183,255,.85); }
hr{ border:none; border-top:1px solid rgba(42,31,85,.8); margin:16px 0; }

@media (max-width: 920px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* Cabecera visual (banner) */
.hero{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(42,31,85,.9);
  background: rgba(18,15,47,.75);
  box-shadow: 0 12px 36px rgba(0,0,0,.30);
}
.hero img{
  width:100%;
  height:auto;
  display:block;
}
.hero .hero-bar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(123,60,255,.20), rgba(216,75,184,.20));
}

/* ===== MODO TV / PANTALLA COMPLETA ===== */
body.tv body.tv .container{ max-width:100%; padding:24px; }
body.tv h2{ font-size: 32px; }
body.tv h3{ font-size: 26px; }
body.tv .table th, body.tv .table td{ font-size: 20px; padding: 14px; }
body.tv .badge{ font-size: 18px; padding: 6px 14px; }




/* Ajuste botones cabecera (evitar que se salgan del contenedor) */
.hero .hero-bar{
  flex-wrap: wrap;
}
.hero .hero-bar .row{
  flex-wrap: wrap;
  gap: 8px;
}
.hero .hero-bar button,
.hero .hero-bar a{
  white-space: nowrap;
}


/* Resaltado cuando se pulsa EN DIRECTO */
#livePanel.live-focus{
  outline: 2px solid rgba(255,59,92,.65);
  box-shadow: 0 0 0 6px rgba(255,59,92,.12), 0 16px 40px rgba(0,0,0,.35);
  transition: outline 0.2s ease, box-shadow 0.2s ease;
}


/* Panel EN DIRECTO fijo arriba del contenido */
.live-top{
  margin-bottom:16px;
  border: 2px solid rgba(255,59,92,.45);
  background:
    linear-gradient(180deg, rgba(255,59,92,.08), rgba(255,59,92,.02));
}
.live-top h2{
  color:#ff3b5c;
}


/* ===== BANNER PARTIDO EN DIRECTO ===== */
.live-banner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  margin:12px 0 16px;
  border-radius:18px;
  background: linear-gradient(135deg, rgba(255,59,92,.35), rgba(123,60,255,.35));
  border:2px solid rgba(255,59,92,.6);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  color:#fff;
}
.live-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ff3b5c;
  box-shadow:0 0 0 0 rgba(255,59,92,.9);
  animation:pulseLive 1.4s infinite;
}
@keyframes pulseLive{
  0%{ box-shadow:0 0 0 0 rgba(255,59,92,.9); }
  70%{ box-shadow:0 0 0 12px rgba(255,59,92,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,59,92,0); }
}
.live-info strong{
  font-size:18px;
  letter-spacing:.5px;
}
.live-info div{
  font-size:22px;
  font-weight:700;
}
.live-info small{
  opacity:.9;
}


/* ===== PANEL TV GRANDE (PARTIDO EN DIRECTO) ===== */
.live-tv{
  margin: 12px 0 16px;
  padding: 18px 22px;
  border-radius: 22px;
  border: 2px solid rgba(255,59,92,.65);
  background:
    radial-gradient(900px 380px at 20% 20%, rgba(255,59,92,.22), transparent 60%),
    radial-gradient(900px 380px at 80% 20%, rgba(123,60,255,.20), transparent 60%),
    linear-gradient(135deg, rgba(18,15,47,.92), rgba(7,8,22,.92));
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
}
.live-tv-left{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width: 220px;
}
.live-tv-tag{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.8px;
  font-size:18px;
  color:#fff;
}
.live-tv-phase{
  color: rgba(201,183,255,.95);
  font-size:16px;
}
.live-tv-scoreline{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:14px;
  align-items:center;
  width:100%;
}
.live-tv-team{
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
}
.live-tv-score{
  font-size: 44px;
  font-weight: 900;
  padding: 10px 18px;
  border-radius: 18px;
  background: rgba(255,59,92,.14);
  border: 1px solid rgba(255,59,92,.35);
  white-space: nowrap;
}

/* En modo TV aún más grande */
body.tv .live-tv{ padding: 26px 28px; }
body.tv .live-tv-team{ font-size: 46px; }
body.tv .live-tv-score{ font-size: 64px; padding: 14px 22px; }
body.tv .live-tv-tag{ font-size: 22px; }
body.tv .live-tv-phase{ font-size: 20px; }

@media (max-width: 920px){
  .live-tv{ flex-direction:column; align-items:stretch; }
  .live-tv-left{ min-width: 0; }
  .live-tv-team{ font-size: 26px; text-align:center; }
  .live-tv-scoreline{ grid-template-columns: 1fr; }
  .live-tv-score{ justify-self:center; }
}


/* ===== MARCADOR FIJO (EN DIRECTO) ===== */
.live-scoreboard{
  position: sticky; /* works with removed header; sticky at top of viewport */
  top: 0;
  z-index: 50;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  margin: 0 0 16px 0;
  border-radius: 18px;
  border: 2px solid rgba(255,59,92,.70);
  background:
    radial-gradient(1000px 420px at 20% 20%, rgba(255,59,92,.22), transparent 60%),
    radial-gradient(1000px 420px at 80% 20%, rgba(123,60,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(18,15,47,.95), rgba(7,8,22,.95));
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.ls-left{ display:flex; flex-direction:column; gap:8px; min-width: 260px; }
.ls-live{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.9px; }
.ls-dot{
  width:14px; height:14px; border-radius:50%;
  background:#ff3b5c;
  box-shadow:0 0 0 0 rgba(255,59,92,.9);
  animation: lsPulse 1.3s infinite;
}
@keyframes lsPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,59,92,.85); }
  70%{ box-shadow:0 0 0 14px rgba(255,59,92,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,59,92,0); }
}
.ls-meta{ color: rgba(201,183,255,.95); font-size: 14px; }
.ls-mid{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items:center;
  width: 100%;
}
.ls-team{
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  text-align:center;
}
.ls-score{
  font-size: 46px;
  font-weight: 1000;
  padding: 10px 18px;
  border-radius: 18px;
  background: rgba(255,59,92,.14);
  border: 1px solid rgba(255,59,92,.35);
  white-space: nowrap;
}

/* MODO TV: aún más grande */
body.tv .ls-team{ font-size: 46px; }
body.tv .ls-score{ font-size: 70px; padding: 14px 22px; }
body.tv .ls-live{ font-size: 22px; }
body.tv .ls-meta{ font-size: 18px; }

@media (max-width: 920px){
  .live-scoreboard{ flex-direction:column; align-items:stretch; }
  .ls-left{ min-width: 0; }
  .ls-mid{ grid-template-columns: 1fr; }
  .ls-team{ font-size: 24px; }
  .ls-score{ justify-self:center; font-size: 40px; }
}


/* Rotación del marcador (cuando hay varios en directo) */
.ls-count{
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.6;
}
.live-scoreboard.ls-swap{
  animation: lsSwap .35s ease;
}
@keyframes lsSwap{
  from{ transform: translateY(-6px); opacity:.85; }
  to{ transform: translateY(0); opacity:1; }
}


/* Operador de partido */
.operator-board{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items:center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.op-team{
  font-size: 26px;
  font-weight: 900;
  text-align:center;
}
.op-score{
  font-size: 44px;
  font-weight: 1000;
  padding: 10px 18px;
  border-radius: 18px;
  background: rgba(255,59,92,.14);
  border: 1px solid rgba(255,59,92,.35);
  white-space: nowrap;
  text-align:center;
}
@media (max-width: 920px){
  .operator-board{ grid-template-columns: 1fr; }
  .op-team{ font-size: 22px; }
  .op-score{ font-size: 36px; justify-self:center; }
}


/* ===== MEJORAS VISUALES (Grupos/TV) ===== */
:root{
  --sticky-offset: 0px;
}

/* Zebra + cabecera sticky */
.table tbody tr:nth-child(even){
  background: rgba(255,255,255,.04);
}
.table thead th{
  position: sticky;
  top: var(--sticky-offset);
  z-index: 5;
  background: rgba(10,10,22,.92);
  backdrop-filter: blur(6px);
}

/* Marcador centrado y más "TV" */
.score-cell{ text-align:center; }
.score-pill{
  margin: 0 2px;
  display:inline-block;
  min-width: 56px;
  padding: 4px 8px;
  text-align:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
}

/* Clasificación coloreada */
.qual-oro td{
  border-left: 4px solid rgba(255, 196, 0, .75);
}
.qual-plata td{
  border-left: 4px solid rgba(180, 180, 180, .55);
}
.qual-oro .badge{
  border-color: rgba(255, 196, 0, .65);
  background: rgba(255, 196, 0, .12);
}
.qual-plata .badge{
  border-color: rgba(180, 180, 180, .50);
  background: rgba(180, 180, 180, .10);
}

/* Leyenda */
.legend{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}
.legend-item{
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  font-weight: 700;
  font-size: 12px;
}
.legend-oro{
  border-color: rgba(255,196,0,.55);
  background: rgba(255,196,0,.10);
}
.legend-plata{
  border-color: rgba(180,180,180,.45);
  background: rgba(180,180,180,.10);
}

/* ===== MODO TV LIMPIO ===== */
body.tv .container{
  max-width: 1400px;
}
body.tv #updated{
  display:none;
}
/* Layout: 2 columnas (Grupos izquierda, Playoffs derecha) */
body.tv .container{
  display:grid;
  grid-template-columns: 1.25fr .85fr;
  grid-template-areas:
    "hero hero"
    "groups playoffs";
  gap: 16px;
}
body.tv .hero{
  grid-area: hero;
}
body.tv #groupsSection{
  grid-area: groups;
}
body.tv #playoffsSection{
  grid-area: playoffs;
  margin-top: 0 !important;
}

/* Letras más grandes en TV */
body.tv h3{ font-size: 24px; }
body.tv .score-pill{
  margin: 0 2px; min-width: 80px; font-size: 16px; padding: 8px 12px; }
body.tv .table td, body.tv .table th{ font-size: 16px; padding: 10px 10px; }

/* En móvil, mantener todo en una columna aunque sea TV */
@media (max-width: 980px){
  body.tv .container{
    display:block;
  }
}


/* ===== SPONSORS ===== */
.sponsors{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
  justify-content:center;
  margin: 10px 0 14px;
}
.sponsors-header{ opacity: .95; }
.sponsors-footer{ opacity: .9; padding-bottom: 8px; }
.sponsors-tv{
  margin-top: -6px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
  overflow:hidden;
}
.sponsor{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.sponsor:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}
.sponsor img{
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.45));
}
body.tv .sponsors-tv .sponsor img{ height: 64px; }
body.tv .sponsors-tv{
  justify-content: space-evenly;
}
.sr-only{
  position:absolute;
  width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);border:0;
}


/* Footer sponsors */
.footer-sponsors{
  margin-top: 16px;
  padding: 14px 14px 10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(900px 260px at 20% 20%, rgba(255,59,92,.10), transparent 60%),
    radial-gradient(900px 260px at 80% 10%, rgba(123,60,255,.10), transparent 60%),
    rgba(255,255,255,.03);
}
.footer-sponsors-title{
  text-align:center;
  font-weight: 900;
  letter-spacing: .6px;
  margin-bottom: 10px;
  color: rgba(255,255,255,.92);
}
.footer-sponsors .sponsor img{ height: 44px; }
@media (max-width: 520px){
  .footer-sponsors-title{ font-size: 14px; }
  .footer-sponsors .sponsor{ padding: 6px 10px; }
  .footer-sponsors .sponsor img{ height: 44px; }
}

.sponsors-header .sponsor img{
  height: 56px;
}

.team-note{
  display:inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.85);
}
body.tv .team-note{
  font-size: 13px;
  padding: 3px 10px;
}


/* ===== MOBILE_RESPONSIVE_FIXES ===== */
html, body{ max-width: 100%; overflow-x: hidden; }
img{ max-width: 100%; height: auto; }

/* evita que elementos largos (nombres, botones) rompan el layout */
.card{ max-width: 100%; }
.row{ flex-wrap: wrap; }
.badge, .btn{ max-width: 100%; }

/* tablas: permitir scroll horizontal en móvil */
.table{
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table thead, .table tbody{ width: 100%; }
.table thead tr, .table tbody tr{ display: table; width: 100%; table-layout: fixed; }

/* reduce padding general en móvil y pasa a 1 columna */
@media (max-width: 820px){
  .container{ padding-left: 12px; padding-right: 12px; }
  .grid-2{ grid-template-columns: 1fr !important; }
  .playoffs-grid{ grid-template-columns: 1fr !important; }
  .header-actions{ gap: 10px; }
}

/* móvil pequeño */
@media (max-width: 520px){
  .hero{ padding: 12px 12px 10px; }
  .hero-title{ font-size: 22px; }
  .btn{ padding: 10px 12px; font-size: 14px; }
  .badge{ font-size: 12px; }
  .sponsors{ gap: 8px; }
  .sponsor{ padding: 8px 10px; }
  .live-scoreboard{ border-radius: 18px; }
  .ls-team{ font-size: 14px; }
  .ls-score{ font-size: 22px; min-width: 82px; }
  body.tv .ls-score{ font-size: 26px; }
}


/* Reducir espacio entre local y visitante */
.score-cell{
  padding-left: 2px !important;
  padding-right: 2px !important;
}


/* ===== MARCADOR ULTRA COMPACTO (estilo TV) ===== */

/* Reduce aún más el espacio de la columna */
.score-cell{
  padding-left: 1px !important;
  padding-right: 1px !important;
}

/* Marcador sin cápsula grande */
.score-pill{
  min-width: auto !important;
  padding: 2px 4px !important;
  margin: 0 1px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 900;
}

/* Ajuste nombres para que se acerquen más */
.table td:nth-child(2),
.table td:nth-child(4){
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Móvil aún más apretado */
@media (max-width: 520px){
  .score-pill{
    font-size: 11px !important;
    padding: 2px 3px !important;
  }
}


/* ===== COLUMNA CAMPO MÁS COMPACTA ===== */

/* Reduce tamaño y espacio del texto "Campo" */
.table td.campo,
.table th.campo{
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* Si no hay clase, ajustar por posición habitual */
.table td:nth-child(6),
.table th:nth-child(6){
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* En móvil aún más compacto */
@media (max-width: 520px){
  .table td.campo,
  .table th.campo,
  .table td:nth-child(6),
  .table th:nth-child(6){
    font-size: 11px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}


/* ===== COLUMNAS HORA Y CAMPO MÁS COMPACTAS ===== */

/* Hora */
.table td.hora,
.table th.hora{
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* Campo */
.table td.campo,
.table th.campo{
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* Fallback por posición (si no hay clases) */
.table td:nth-child(5),
.table th:nth-child(5), /* Hora */
.table td:nth-child(6),
.table th:nth-child(6){ /* Campo */
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* Móvil aún más compacto */
@media (max-width: 520px){
  .table td.hora,
  .table th.hora,
  .table td.campo,
  .table th.campo,
  .table td:nth-child(5),
  .table th:nth-child(5),
  .table td:nth-child(6),
  .table th:nth-child(6){
    font-size: 11px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}


/* ===== AJUSTE ESPACIO LOCAL / MARCADOR / VISITANTE ===== */

/* Dar más aire alrededor del marcador */
.score-cell{
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Separar ligeramente los nombres del marcador */
.table td:nth-child(2){ /* Local */
  padding-right: 10px !important;
}

.table td:nth-child(4){ /* Visitante */
  padding-left: 10px !important;
}

/* Móvil: mantener equilibrio */
@media (max-width: 520px){
  .score-cell{
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .table td:nth-child(2){
    padding-right: 8px !important;
  }
  .table td:nth-child(4){
    padding-left: 8px !important;
  }
}


/* ===== COLUMNAS HORA Y CAMPO MÁS COMPACTAS (seguro) ===== */
.table td.hora,
.table th.hora,
.table td.campo,
.table th.campo{
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* Fallback por posición (solo si no hay clases) */
.table td:nth-child(5),
.table th:nth-child(5),
.table td:nth-child(6),
.table th:nth-child(6){
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

@media (max-width: 520px){
  .table td.hora,
  .table th.hora,
  .table td.campo,
  .table th.campo,
  .table td:nth-child(5),
  .table th:nth-child(5),
  .table td:nth-child(6),
  .table th:nth-child(6){
    font-size: 11px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}


/* ===== IGUALAR TAMAÑO (LOCAL y VISITANTE) SIN TOCAR CAMPO/HORA =====
   Esto funciona aunque cambie el orden de columnas, mientras el marcador tenga class="score-cell".
*/

/* Visitante = celda justo después del marcador */
.table td.score-cell + td{
  font-size: 120% !important;
  font-weight: 900;
}

/* Local = celda justo antes del marcador (Chrome/Edge/Safari modernos) */
.table td:has(+ td.score-cell){
  font-size: 120% !important;
  font-weight: 900;
}

/* Cabeceras (si aplican) */
.table th.score-cell + th{
  font-size: 120% !important;
  font-weight: 900;
}
.table th:has(+ th.score-cell){
  font-size: 120% !important;
  font-weight: 900;
}

/* Móvil: un pelín menos para que no rompa */
@media (max-width: 520px){
  .table td.score-cell + td,
  .table td:has(+ td.score-cell),
  .table th.score-cell + th,
  .table th:has(+ th.score-cell){
    font-size: 110% !important;
  }
}


/* ===== ESPACIO +200% ENTRE LOCAL Y VISITANTE (MARCADOR VISIBLE) ===== */

/* Columna del marcador con mucho más aire */
.score-cell{
  padding-left: 12px !important;
  padding-right: 12px !important;
  min-width: 96px;
}

/* Separar aún más los nombres del marcador */
.table td:has(+ td.score-cell){        /* Local */
  padding-right: 12px !important;
}

.table td.score-cell + td{             /* Visitante */
  padding-left: 12px !important;
}

/* Móvil: reducir un poco pero mantener visible */
@media (max-width: 520px){
  .score-cell{
    padding-left: 18px !important;
    padding-right: 18px !important;
    min-width: 80px;
  }
  .table td:has(+ td.score-cell){
    padding-right: 16px !important;
  }
  .table td.score-cell + td{
    padding-left: 16px !important;
  }
}


/* ===== SOLO MÓVIL: MÁS ESPACIO LOCAL / MARCADOR / VISITANTE ===== */
@media (max-width: 520px){

  /* Columna del marcador */
  .score-cell{
    padding-left: 28px !important;
    padding-right: 28px !important;
    min-width: 110px !important;
  }

  /* Local (antes del marcador) */
  .table td:has(+ td.score-cell){
    padding-right: 22px !important;
  }

  /* Visitante (después del marcador) */
  .table td.score-cell + td{
    padding-left: 22px !important;
  }

}


/* ===== SOLO MÓVIL: MARCADOR PEGADO A VISITANTE ===== */
@media (max-width: 520px){

  /* Reducimos padding izquierdo y aumentamos derecho */
  .score-cell{
    padding-left: 10px !important;
    padding-right: 34px !important;
    min-width: 110px !important;
    text-align: right;
  }

  /* Local: un poco menos separado */
  .table td:has(+ td.score-cell){
    padding-right: 10px !important;
  }

  /* Visitante: casi pegado al marcador */
  .table td.score-cell + td{
    padding-left: 4px !important;
  }

}


/* ===== SOLO MÓVIL: MARCADOR ULTRA PEGADO A VISITANTE ===== */
@media (max-width: 520px){

  /* Empujamos el marcador totalmente hacia la derecha */
  .score-cell{
    padding-left: 0px !important;
    padding-right: 42px !important;
    min-width: 120px !important;
    text-align: right !important;
  }

  /* Local aún más cerca */
  .table td:has(+ td.score-cell){
    padding-right: 6px !important;
  }

  /* Visitante prácticamente tocando el marcador */
  .table td.score-cell + td{
    padding-left: 0px !important;
  }

}


/* ===== CLASIFICACIÓN: COLUMNA EQUIPO AL DOBLE ===== */

/* Aumentar espacio del equipo en tabla de clasificación */
.table.clasificacion td.equipo,
.table.clasificacion th.equipo{
  padding-left: 16px !important;
  padding-right: 16px !important;
  font-size: 110%;
}

/* Fallback por posición (si no hay clase .equipo) */
.table.clasificacion td:nth-child(2),
.table.clasificacion th:nth-child(2){
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Móvil: aún más aire para nombres largos */
@media (max-width: 520px){
  .table.clasificacion td.equipo,
  .table.clasificacion th.equipo,
  .table.clasificacion td:nth-child(2),
  .table.clasificacion th:nth-child(2){
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 115%;
  }
}


/* ===== CLASIFICACIÓN: EQUIPO CON MUCHO MÁS ESPACIO (SOLO MÓVIL) ===== */
@media (max-width: 520px){

  /* Forzar ancho real de la columna Equipo */
  .table.clasificacion td.equipo,
  .table.clasificacion th.equipo{
    min-width: 180px !important;
    width: 180px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 120% !important;
    white-space: normal !important;
  }

  /* Fallback por posición si no hay clase */
  .table.clasificacion td:nth-child(2),
  .table.clasificacion th:nth-child(2){
    min-width: 180px !important;
    width: 180px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 120% !important;
    white-space: normal !important;
  }

  /* Permitir scroll horizontal de la tabla si hace falta */
  .table.clasificacion{
    overflow-x: auto;
    display: block;
  }
}


/* ===== CLASIFICACIÓN: COLUMNA EQUIPO AL 200% ===== */
@media (max-width: 520px){

  /* Equipo al 200% (muy ancho) */
  .table.clasificacion td.equipo,
  .table.clasificacion th.equipo{
    min-width: 130px !important; /* ~200% respecto a columnas normales */
    width: 130px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 125% !important;
    white-space: normal !important;
  }

  /* Fallback por posición si no hay clase */
  .table.clasificacion td:nth-child(2),
  .table.clasificacion th:nth-child(2){
    min-width: 130px !important;
    width: 130px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 125% !important;
    white-space: normal !important;
  }

  /* Asegurar scroll horizontal */
  .table.clasificacion{
    display: block;
    overflow-x: auto;
  }
}


/* ===== FIX: CLASIFICACIÓN (selector robusto) =====
   Tu tabla de clasificación tiene filas con clases .qual-oro / .qual-plata (ya definidas en este CSS).
   Usamos eso para detectar la tabla correcta y darle más ancho a la columna Equipo SOLO en móvil.
*/
@media (max-width: 520px){

  /* Detectar tabla de clasificación por sus filas */
  .table:has(.qual-oro, .qual-plata){
    display: block;
    overflow-x: auto;
  }

  /* Quitar el table-layout: fixed que impide que crezcan columnas */
  .table:has(.qual-oro, .qual-plata) thead tr,
  .table:has(.qual-oro, .qual-plata) tbody tr{
    table-layout: auto !important;
  }

  /* Columna Equipo (normalmente 2ª) al ~200% */
  .table:has(.qual-oro, .qual-plata) th:nth-child(2),
  .table:has(.qual-oro, .qual-plata) td:nth-child(2){
    min-width: 130px !important;
    width: 130px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    white-space: normal !important;
  }
}