/* =====================================================================
   public/css/liga-extra.css - Piezas de la pagina publica de la liga
   inspiradas en copamariachi.com (Luis, 2026-10-16): "¿Cuando juego?",
   franja de numeros, partidos debajo de cada grupo/jornada, reglas en
   fichas, cruces de la liguilla, descargas, sedes y patrocinadores.
   Usa los colores de liga.css (--verde, --oro, --borde, --sutil...).
   ===================================================================== */

/* ---- Encabezado de seccion: rayita dorada + eyebrow + titulo ---- */
.lx-eyebrow { display:flex; align-items:center; gap:.6rem; font-size:.72rem; font-weight:800; letter-spacing:.18em;
              text-transform:uppercase; color:var(--oro); margin:0 0 .35rem; }
.lx-eyebrow::before { content:""; width:28px; height:2px; background:var(--oro); border-radius:2px; }
.lx-titulo { font-family:var(--f-titulos, 'Barlow Condensed', sans-serif); font-weight:800; font-size:clamp(1.6rem, 4.5vw, 2.3rem);
             line-height:1.02; text-transform:uppercase; letter-spacing:.01em; color:#12291a; margin:0 0 .6rem; }
.lx-sub { color:var(--sutil); font-size:.95rem; margin:0 0 1.1rem; max-width:62ch; }
.lx-seccion { margin:1.6rem 0 2rem; }

/* ---- Franja de numeros ---- */
.lx-numeros { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); border-top:1px solid var(--borde);
              border-bottom:1px solid var(--borde); margin:.4rem 0 1.4rem; }
.lx-numeros div { text-align:center; padding:.9rem .4rem; }
.lx-numeros div + div { border-left:1px solid var(--borde); }
.lx-numeros b { display:block; font-family:var(--f-titulos, 'Barlow Condensed', sans-serif); font-weight:800;
                font-size:clamp(1.8rem, 5vw, 2.6rem); line-height:1; color:var(--oro); font-variant-numeric:tabular-nums; }
.lx-numeros span { display:block; margin-top:.3rem; font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--sutil); }
@media (max-width: 520px) { .lx-numeros div:nth-child(3n+1) { border-left:0; } }

/* ---- Partidos de un grupo / jornada (debajo de la tabla) ---- */
.lx-partidos { display:grid; gap:.45rem; margin:.4rem 0 1.4rem; }
.lx-partidos-tit { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--sutil); margin:.2rem 0 .1rem; }
.lx-partido { display:grid; grid-template-columns:5.2rem minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:.6rem;
              padding:.55rem .8rem; border:1px solid var(--borde); border-radius:12px; background:var(--panel); color:inherit; text-decoration:none; }
.lx-partido:hover { border-color:var(--oro-borde); }
.lx-partido-cuando { display:flex; flex-direction:column; font-size:.78rem; line-height:1.25; color:var(--sutil); }
.lx-partido-cuando b { color:#12291a; font-size:.9rem; }
.lx-partido-eq { font-weight:700; font-size:.88rem; color:#12291a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lx-partido-eq.loc { text-align:right; }
.lx-partido-mid { min-width:3.2rem; text-align:center; font-family:var(--f-titulos, 'Barlow Condensed', sans-serif); font-weight:800;
                  font-size:1.05rem; color:var(--oro); }
.lx-partido-mid.vs { font-size:.8rem; color:var(--sutil); }
@media (max-width: 520px) {
  .lx-partido { grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); }
  .lx-partido-cuando { grid-column:1 / -1; flex-direction:row; gap:.4rem; }
}

/* ---- ¿Cuando juego? ---- */
.lx-buscar { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:.2rem 0 1.2rem; }
.lx-buscar select { font:inherit; font-size:1rem; font-weight:600; padding:.75rem 1rem; border-radius:12px; border:1px solid var(--borde-fuerte);
                    background:var(--panel); color:#12291a; min-width:min(100%, 340px); }
.lx-ficha-partido { border:1px solid var(--oro-borde); border-radius:var(--radio); background:linear-gradient(160deg, #fffdf6, var(--panel));
                    padding:1.2rem 1.3rem; box-shadow:var(--sombra); display:grid; gap:.9rem; }
.lx-ficha-etq { display:inline-flex; align-self:start; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
                color:#fff; background:var(--verde); padding:.25rem .7rem; border-radius:99px; width:max-content; }
.lx-ficha-duelo { display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:.8rem; text-align:center; }
.lx-ficha-duelo img, .lx-ficha-duelo .lx-ini { width:64px; height:64px; object-fit:contain; margin:0 auto .35rem; display:flex; align-items:center;
                                              justify-content:center; border-radius:14px; background:var(--panel-2); font-weight:800; font-size:1.5rem; color:#12291a; }
.lx-ficha-duelo .nom { font-weight:800; font-size:1rem; color:#12291a; line-height:1.2; }
.lx-ficha-duelo .vs { font-family:var(--f-titulos, 'Barlow Condensed', sans-serif); font-weight:800; font-size:1.6rem; color:var(--oro); }
.lx-ficha-datos { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:.5rem; }
.lx-ficha-datos div { background:var(--panel-2); border-radius:12px; padding:.6rem .75rem; }
.lx-ficha-datos small { display:block; font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--sutil); }
.lx-ficha-datos b { display:block; font-size:1rem; color:#12291a; margin-top:.15rem; }
.lx-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.7rem 1.2rem; border-radius:99px; font-weight:800;
          font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; border:1.5px solid var(--oro); color:var(--oro-claro);
          background:transparent; cursor:pointer; }
.lx-btn:hover { background:var(--oro-suave); }
.lx-btn.lleno { background:linear-gradient(180deg, #e8c559, var(--oro)); color:#241a03; border-color:transparent; box-shadow:0 6px 16px -8px rgba(185,134,10,.7); }
.lx-acciones { display:flex; flex-wrap:wrap; gap:.6rem; }
.lx-vacio { color:var(--sutil); padding:1rem; border:1px dashed var(--borde-fuerte); border-radius:12px; }

/* ---- Reglas en fichas ---- */
.lx-fichas { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:.7rem; margin:.3rem 0 1.4rem; }
.lx-fichas div { border:1px solid var(--borde); border-radius:14px; background:var(--panel); padding:1rem .8rem; text-align:center; }
.lx-fichas b { display:block; font-family:var(--f-titulos, 'Barlow Condensed', sans-serif); font-weight:800; font-size:1.7rem; line-height:1.05; color:var(--oro); }
.lx-fichas span { display:block; margin-top:.3rem; font-size:.8rem; color:var(--sutil); line-height:1.3; }

/* ---- Cruces de la liguilla ---- */
.lx-cruces { border:1px solid var(--oro-borde); border-radius:var(--radio); background:linear-gradient(160deg, #fffaf0, var(--panel));
             padding:1.3rem; display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:1.2rem; align-items:center; }
.lx-cruces h3 { margin:0 0 .4rem; font-family:var(--f-titulos, 'Barlow Condensed', sans-serif); font-weight:800; font-size:1.35rem; text-transform:uppercase; color:#12291a; }
.lx-cruces p { margin:0; color:var(--texto); font-size:.92rem; line-height:1.55; }
.lx-llaves { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.5rem; }
.lx-llaves span { text-align:center; padding:.75rem .5rem; border-radius:10px; background:#12291a; color:#fff; font-family:var(--f-titulos, 'Barlow Condensed', sans-serif);
                  font-weight:800; font-size:1rem; letter-spacing:.02em; }
.lx-llaves span em { font-style:normal; color:#e8c559; }
@media (max-width: 640px) { .lx-cruces { grid-template-columns:1fr; } }

/* ---- Descargas ---- */
.lx-descargas { display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:1rem; }
.lx-descarga { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:1rem; align-items:center; padding:1.1rem; border:1px solid var(--borde);
               border-radius:var(--radio); background:var(--panel); }
.lx-hoja { aspect-ratio:3/4; border-radius:8px; background:#fff; box-shadow:0 10px 22px -12px rgba(18,41,26,.45); border:1px solid var(--borde);
           display:flex; flex-direction:column; gap:4px; padding:10px 8px; transform:rotate(-3deg); }
.lx-hoja i { display:block; height:4px; border-radius:2px; background:var(--borde-fuerte); }
.lx-hoja i:first-child { height:8px; background:var(--oro); width:70%; }
.lx-descarga h3 { margin:0 0 .25rem; font-family:var(--f-titulos, 'Barlow Condensed', sans-serif); font-weight:800; font-size:1.25rem; text-transform:uppercase; color:#12291a; }
.lx-descarga p { margin:0 0 .7rem; font-size:.86rem; color:var(--sutil); line-height:1.45; }
.lx-descarga small { display:block; margin-top:.4rem; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--sutil); }

/* ---- Sedes (canchas) ---- */
.lx-sedes { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:1rem; }
.lx-sede { display:grid; grid-template-columns:84px minmax(0, 1fr); gap:1rem; align-items:start; padding:1.2rem; border:1px solid var(--borde);
           border-radius:var(--radio); background:var(--panel); }
.lx-sede-logo { width:84px; height:84px; border-radius:14px; background:var(--panel-2); display:flex; align-items:center; justify-content:center;
                overflow:hidden; font-family:var(--f-titulos, 'Barlow Condensed', sans-serif); font-weight:800; font-size:2rem; color:#12291a; }
.lx-sede-logo img { width:100%; height:100%; object-fit:contain; }
.lx-sede-etq { display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#241a03;
               background:#e8c559; padding:.2rem .55rem; border-radius:4px; margin-bottom:.4rem; }
.lx-sede h3 { margin:0; font-family:var(--f-titulos, 'Barlow Condensed', sans-serif); font-weight:800; font-size:1.35rem; text-transform:uppercase; color:#12291a; line-height:1.05; }
.lx-sede p { margin:.3rem 0 .5rem; font-size:.88rem; color:var(--texto); }
.lx-sede small { display:block; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--sutil); margin-bottom:.7rem; }

/* ---- Patrocinadores destacados ---- */
.lx-patro { text-align:center; }
.lx-patro .lx-eyebrow { justify-content:center; }
.lx-patro .lx-eyebrow::before { display:none; }
.lx-patro-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:1.2rem; margin:1rem 0 .4rem; }
.lx-patro-item { width:min(100%, 250px); color:inherit; text-decoration:none; display:flex; flex-direction:column; gap:.55rem; align-items:center; }
.lx-patro-caja { width:100%; aspect-ratio:16/10; border-radius:14px; background:#fbf8f0; border:1px solid var(--oro-borde);
                 box-shadow:0 12px 26px -16px rgba(18,41,26,.45); display:flex; align-items:center; justify-content:center; padding:1rem; transition:transform .15s; }
.lx-patro-item:hover .lx-patro-caja { transform:translateY(-3px); }
.lx-patro-caja img { max-width:100%; max-height:100%; object-fit:contain; }
.lx-patro-nom { font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--oro-claro); }
.lx-apoyo { margin-top:1rem; font-size:.85rem; color:var(--sutil); }
.lx-apoyo b { display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.3rem; }
.lx-ver-res { text-align:center; margin:.4rem 0 1.6rem; }

/* ---- Pagina en 2 (Luis, 2026-10-22): tabla a la izquierda; a la derecha
   Goleadores arriba y Proximos partidos abajo. En pantalla angosta se apilan
   como siempre (tabla y luego los paneles). ---- */
.tb-pagina { display:grid; grid-template-columns:minmax(0, 1fr) 430px; gap:1.4rem; align-items:start; }
.tb-pagina.tb-solo { grid-template-columns:minmax(0, 1fr); }
.tb-col-tabla { min-width:0; }
.tb-pagina .tabla-inferior { flex-direction:column; gap:1rem; margin-top:0; position:sticky; top:1rem; }
.tb-pagina .tabla-inferior > .lateral-panel { flex:none; width:100%; }
@media (max-width: 1000px) {
  .tb-pagina { grid-template-columns:minmax(0, 1fr); }
  .tb-pagina .tabla-inferior { position:static; margin-top:.4rem; }
}
/* En la columna angosta, los dos equipos de cada partido van uno sobre otro
   (en una sola linea los nombres se cortaban). */
.tb-pagina .prox-mini-fila { align-items:flex-start; }
.tb-pagina .pm-equipos { flex-direction:column; align-items:stretch; gap:.25rem; }
.tb-pagina .pm-eq.der { flex-direction:row; text-align:left; }
.tb-pagina .pm-vs { display:none; }

/* Tabla general mas compacta (Luis, 2026-10-22: "esta muy grande"): mismo
   diseño de tarjetas con escudo flotante, a ~70% del tamaño. Solo en la
   tabla (.tb-col-tabla) y solo en pantallas grandes: las clases tg-* las
   comparten Arbitros, Campeones y Goleadores, y el celular ya trae su tamaño. */
@media (min-width: 721px) {
  .tb-col-tabla .tg-panel { padding:2.1rem .7rem .7rem; gap:2.1rem; }
  .tb-col-tabla .tg-fila { padding:1.9rem .7rem .5rem; gap:1.1rem; }
  .tb-col-tabla .tg-esc { top:-30px; width:76px; height:76px; }
  .tb-col-tabla .tg-esc span { font-size:1.05rem; }
  .tb-col-tabla .tg-izq, .tb-col-tabla .tg-der { gap:.65rem; }
  .tb-col-tabla .tg-mini { min-width:1.7rem; }
  .tb-col-tabla .tg-mini .et { font-size:.62rem; }
  .tb-col-tabla .tg-mini .val { font-size:1rem; line-height:1.1; margin-top:.05rem; }
  .tb-col-tabla .tg-nombre { font-size:.78rem; }
  .tb-col-tabla .tg-pts { font-size:1.05rem; line-height:1.05; padding:.1rem .6rem; border-radius:9px; }
  .tb-col-tabla .tg-pts small { font-size:.58rem; line-height:1.1; }
}

/* Botones del panel de Goleadores (a la derecha de la tabla): ir a la tabla
   completa de goleo y compartir su imagen. */
.tb-goleo-botones { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.tb-goleo-btn { flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; padding:.55rem .9rem;
                border-radius:99px; font:inherit; font-size:.8rem; font-weight:800; text-decoration:none; cursor:pointer;
                background:linear-gradient(180deg, #e8c559, var(--oro)); color:#241a03; border:1px solid transparent; }
.tb-goleo-btn.sec { background:var(--oro-suave); color:var(--oro-claro); border-color:#e8d9a8; }
.tb-goleo-btn:hover { transform:translateY(-1px); }
.tb-goleo-btn:disabled { opacity:.7; cursor:wait; }