*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;height:auto}
:root{--c1:#2f5cf5;--c2:#7895f9;--bg:#f4f6f9;--white:#fff;--ink:#111827;--ink2:#4b5563;--ink3:#9ca3af;--ink4:#6b7280;--rule:#e5e7eb;--rule2:#d8dee8;--paper:#f6f7f9;--mono:'JetBrains Mono',monospace;--green:#16a34a;--red:#ef4444;--nav-fg:#fff;--nav-fg-soft:rgba(255,255,255,.88);--nav-bg-hover:rgba(255,255,255,.18);--nav-bg-active:rgba(255,255,255,.34);--nav-border:rgba(255,255,255,.3);--nav-chip-bg:rgba(255,255,255,.14);--nav-chip-hover:rgba(255,255,255,.22);--nav-bg1:#7895f9;--nav-bg2:#2f5cf5;}
/* Tema oscuro de la app publica -- alterna con [data-theme="dark"] en <html>
   via el boton del nav (ver toggleTheme() mas abajo en el <script> generado).
   SOLO para la sesion de navegacion actual: nunca se guarda en localStorage/
   cookies, asi que cada visita/recarga arranca siempre en claro. Paleta de
   fondo/texto tomada de index.html (navy + grises claros de marca); --c1/--c2
   (colores del torneo elegidos por el organizador) y el nav con degradado de
   marca no cambian de un tema a otro — pero SÍ pueden ser claros u oscuros
   según elija el organizador, de ahí --nav-fg y compañía justo arriba. */
[data-theme="dark"]{--bg:#0a1628;--white:#0f2040;--ink:#e8edf5;--ink2:#b0bccc;--ink3:#8492a8;--ink4:#5c6a80;--rule:rgba(255,255,255,.09);--rule2:rgba(255,255,255,.16);--paper:#0d1c33;--green:#22c55e;--red:#f87171;}
html{scroll-behavior:smooth}
html{min-height:100%;font-family:'DM Sans',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;}
/* Fondo de página con tintes sutiles de los colores del torneo (no plano) */
body{
  min-height:100%;font-family:'DM Sans',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1000px 620px at 108% -5%, #2f5cf514, transparent 55%),
    radial-gradient(900px 620px at -8% 105%, #7895f912, transparent 55%),
    var(--bg);
  background-attachment:fixed;
}

/* ── HERO ─────────────────────────────────────────────── */
.hero{
  color:#fff;
  height:clamp(200px,30vw,320px);
  background-size:cover;background-position:center;
  display:flex;align-items:flex-end;
}
.hero-content{
  max-width:900px;margin:0 auto;width:100%;
  padding:0 16px 18px;
  display:flex;align-items:center;gap:14px;
}
/* ANTES: object-fit:contain + padding dejaba un marco blanco/crema visible
   alrededor del logo -- muchos logos de organizador (pegatinas, escudos)
   ya traen su propio fondo claro pegado al borde de la imagen, así que
   encogerlos para que "quepan enteros" siempre deja ver ese fondo como un
   marco feo, sobre todo con la cabecera de color. AHORA: sin padding y con
   object-fit:cover la imagen rellena todo el cuadro de lado a lado (como
   una foto de perfil) -- si el logo no es perfectamente cuadrado se
   recortan un poco los bordes/esquinas en vez de dejar hueco en blanco,
   que da un resultado mucho más limpio para el 99% de los logos reales. */
.hero-logo{width:128px;height:128px;border-radius:20px;object-fit:cover;background:rgba(255,255,255,.92);box-shadow:0 6px 24px rgba(0,0,0,.30);flex-shrink:0}
.hero-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(30px,5vw,50px);font-weight:900;text-transform:uppercase;letter-spacing:-.5px;line-height:1;text-shadow:0 2px 16px rgba(0,0,0,.45);text-align:left}

/* ── NAV horizontal sticky ───────────────────────────── */
/* ANTES: el fondo de la barra usaba siempre var(--c2)/var(--c1) tal cual —
   el mismo amarillo puro del hero. Con una marca oscura eso ya funcionaba
   bien (texto blanco encima contrasta), pero con una marca clara (amarillo)
   era la causa de fondo de todo este ajuste: nada de lo que se pintara
   ENCIMA en blanco iba a leerse bien sobre un amarillo tan claro. AHORA:
   --nav-bg1/--nav-bg2 (calculadas arriba) son un mostaza oscuro derivado
   del propio --c1/--c2 cuando la marca es clara, o los mismos --c2/--c1 de
   siempre cuando la marca ya es oscura — así el fondo de la barra concentra
   todo el ajuste de contraste y el texto/iconos pueden quedarse siempre en
   blanco, más simple y sin perder la coherencia con el color de marca. */
.top-nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  background:linear-gradient(135deg,var(--nav-bg1),var(--nav-bg2));padding:6px 12px;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
/* Centrado real: con .nav-btns como flex:1 (intento anterior) los botones
   quedaban centrados solo en el hueco que sobraba TRAS el selector de
   idioma, no en el ancho total de la barra -- como el selector ocupa sitio
   a la derecha, el centro de "lo que sobra" cae un poco más a la
   izquierda que el centro real de la barra, que es justo lo que se seguía
   viendo descuadrado. Con position:absolute + left:50% se centra contra
   el ancho TOTAL de .top-nav (que ya es position:sticky, así que sirve de
   referencia), sin que el ancho del selector de idioma afecte al cálculo.
   .top-nav pasa a solo tener que colocar el selector (justify-content:
   flex-end), que ahora es su único hijo en el flujo normal. */
.nav-btns{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;gap:4px;max-width:calc(100% - 96px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav-btn{
  display:flex;align-items:center;gap:7px;
  padding:8px 16px;border:none;border-radius:10px;
  background:transparent;cursor:pointer;
  color:var(--nav-fg-soft);font-size:13px;font-weight:700;
  font-family:'DM Sans',sans-serif;white-space:nowrap;
  transition:all .15s;text-transform:uppercase;letter-spacing:.3px;
}
.nav-btn:hover{background:var(--nav-bg-hover);color:var(--nav-fg)}
/* theme-toggle-btn es ahora el primer hijo de .top-nav (antes de .nav-btns,
   que se centra con position:absolute contra el ancho total de la barra),
   así que queda pegado al extremo izquierdo por ser el único hijo en flujo
   normal antes del selector de idioma (justify-content:flex-end del padre
   ya no aplicaría solo, por eso margin-right:auto lo fija a la izquierda
   sin depender del orden de los demás elementos). */
.theme-toggle-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;margin-right:auto;background:var(--nav-chip-bg);color:var(--nav-fg);border:1px solid var(--nav-border);border-radius:9px;cursor:pointer;transition:background .15s}
.theme-toggle-btn .theme-ic-sun,.theme-toggle-btn .theme-ic-moon{display:flex;align-items:center;justify-content:center;line-height:0}
.theme-toggle-btn svg{display:block}
.theme-toggle-btn:hover{background:var(--nav-chip-hover)}
.lang-sel{position:relative;flex:none}
.lang-sel-btn{display:flex;align-items:center;gap:6px;background:var(--nav-chip-bg);color:var(--nav-fg);border:1px solid var(--nav-border);border-radius:9px;padding:6px 8px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;cursor:pointer}
.lang-sel-btn:hover{background:var(--nav-chip-hover)}
.lang-sel-flag{width:16px;height:11px;border-radius:2px;object-fit:cover;display:block;flex-shrink:0}
.lang-sel-caret{font-size:9px;opacity:.7}
.lang-sel-menu{list-style:none;margin:0;padding:6px;position:absolute;top:calc(100% + 6px);right:0;background:color-mix(in srgb,var(--c2) 45%,#0b1220);border:1px solid rgba(255,255,255,.18);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.4);min-width:96px;display:none;z-index:400}
.lang-sel-menu.open{display:block}
.lang-sel-menu li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:#fff;cursor:pointer;white-space:nowrap}
.lang-sel-menu li:hover{background:rgba(255,255,255,.14)}
.lang-sel-menu li[aria-selected="true"]{background:color-mix(in srgb,var(--c1) 38%,transparent)}
/* ANTES: fondo activo al 22% de opacidad blanca sobre el amarillo de marca
   — apenas se distinguía del resto de botones sin seleccionar (reportado:
   "los botones... se ven un poco suaves, casi no se ven"). Un primer intento
   subió la opacidad del blanco, pero con una marca CLARA (amarillo) el
   problema no era de intensidad sino de color: blanco sobre amarillo casi
   no contrasta suba lo que suba la opacidad. AHORA: --nav-bg-active/
   --nav-border/--nav-fg (definidas en genCSS() según el brillo real de
   --c1) usan oscuro sobre marcas claras y blanco sobre marcas oscuras, así
   que el botón activo se distingue de verdad sea cual sea el color elegido. */
.nav-btn.active{background:var(--nav-bg-active);color:var(--nav-fg);box-shadow:inset 0 0 0 1px var(--nav-border),0 1px 3px rgba(0,0,0,.12)}
.nav-icon{font-size:16px;line-height:1}
/* .live-toast/.flash-update/@keyframes bcFlash quitados: eran CSS para la
   animación de "resultado actualizado" cuyo JS nunca se disparaba (ver
   nota junto a renderAll() en genAppJs) — CSS muerto sin código que lo
   active. */

/* ── MAIN ─────────────────────────────────────────────── */
.app-main{max-width:760px;margin:0 auto;width:100%;padding:24px 16px 84px}
.bc-watermark{display:block;text-align:center;font-size:11px;font-weight:600;color:var(--ink3);text-decoration:none;padding:0 64px 22px}
.bc-watermark:hover{color:var(--ink2);text-decoration:underline}

/* ── Admin bar ───────────────────────────────────────── */

/* ── VISTA TORNEO (info) ─────────────────────────────── */
.info-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;margin-bottom:18px;align-items:start}
.info-main{background:var(--white);border-radius:18px;padding:26px;border:1.5px solid var(--rule);box-shadow:0 2px 12px rgba(0,0,0,.04)}
.info-side{display:flex;flex-direction:column;gap:14px}
.side-card{background:var(--white);border-radius:16px;border:1.5px solid var(--rule);overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.04);text-decoration:none;color:inherit;display:block}
.side-card-head{background:linear-gradient(135deg,var(--c2),var(--c1));color:#fff;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:11px 16px;font-family:'JetBrains Mono',monospace;opacity:.95}
.side-card-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.side-row{display:flex;align-items:flex-start;gap:10px}
.side-ico{font-size:17px;flex-shrink:0;width:22px;text-align:center}
.side-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink3);font-family:'JetBrains Mono',monospace}
.side-val{font-size:14px;font-weight:600;color:var(--ink);line-height:1.4;margin-top:1px}
.side-card-link{cursor:pointer;transition:transform .15s,box-shadow .15s}
.side-card-link:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.side-maplink{font-size:12px;font-weight:700;color:var(--c1);margin-top:6px}
.attach-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;background:linear-gradient(135deg,var(--c2),var(--c1));color:#fff;border-radius:9px;font-size:12px;font-weight:700;text-decoration:none;transition:opacity .15s;word-break:break-word}
.attach-chip:hover{opacity:.85}
.attach-poster{display:block;border-radius:12px;overflow:hidden;border:1.5px solid var(--rule);background:var(--paper)}
.attach-poster img{display:block;width:100%;max-height:360px;object-fit:contain;background:var(--paper)}
.info-description{font-size:14px;line-height:1.7;color:var(--ink2)}
.desc-subtitle{font-weight:800;font-size:15px;color:var(--ink);margin:14px 0 4px}
.desc-line{margin-bottom:4px}
@media (max-width:720px){
  .info-grid{grid-template-columns:1fr}
  .info-side{flex-direction:column}
}
.info-stats{display:flex;gap:0;margin:18px 0;background:var(--white);border-radius:16px;border:1.5px solid var(--rule);overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.info-stat{flex:1;padding:20px 10px;text-align:center;border-right:1px solid var(--rule);transition:background .15s}
.info-stat:hover{background:color-mix(in srgb,var(--c1) 6%,var(--white))}
.info-stat:last-child{border-right:none}
.info-stat-n{display:block;font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:900;color:var(--c1);line-height:1}
.info-stat-l{display:block;font-size:11px;color:var(--ink3);font-weight:700;margin-top:4px;text-transform:uppercase;letter-spacing:.6px}
.info-section-title{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:900;text-transform:uppercase;color:var(--ink2);padding:0 0 8px;border-bottom:2px solid var(--c1);margin:24px 0 12px}
.btn-more{background:none;border:1.5px solid var(--rule);border-radius:10px;padding:10px 16px;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;width:100%;margin-top:10px;transition:all .15s}
.btn-more:hover{border-color:var(--c1);color:var(--c1)}

/* ── Mi equipo ───────────────────────────────────────── */
.search-bar{margin-bottom:16px}
.search-bar input{width:100%;padding:13px 16px;border:1.5px solid var(--rule);border-radius:12px;font-size:14px;font-family:'DM Sans',sans-serif;background:var(--white);color:var(--ink)}
.search-bar input::placeholder{color:var(--ink3)}
.search-bar input:focus{border-color:var(--c1);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 18%,transparent)}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.team-card{background:var(--white);border-radius:14px;padding:14px;border:1.5px solid var(--rule);display:flex;align-items:center;gap:11px;cursor:pointer;transition:all .15s}
.team-card:hover{border-color:var(--c1);background:color-mix(in srgb,var(--c1) 6%,var(--white));transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.06)}
/* object-fit:cover (no "contain"): con "contain" un logo cuya imagen
   original trajera mucho margen/transparencia alrededor del escudo se veía
   notablemente más pequeño que otro logo recortado justo al borde, aunque
   el contenedor midiera lo mismo — con "cover" todos rellenan el mismo
   espacio visual sin depender del recorte de la imagen original.
   padding:1px: un poco de aire para que el escudo no toque el marco
   literalmente, sin encoger de más a los logos que ya traen margen propio
   dentro de su imagen (ese es el límite real de lo que arregla el CSS —
   dos escudos recortados de forma distinta en origen nunca van a
   verse EXACTAMENTE igual de grandes, esto es el punto intermedio). */
.team-logo{width:36px;height:36px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#fff;padding:1px;border:1px solid var(--rule)}
.team-logo-ph{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--rule),var(--rule2));flex-shrink:0;display:inline-block}
.team-card-name{font-size:13px;font-weight:700;line-height:1.2}
/* ANTES: font-family:'JetBrains Mono',monospace -- una tipografía "de
   código" que no tenía nada que ver con la condensada uppercase que ya se
   usa para el nombre de categoría en Calendario (.grp-cat-head) y que el
   usuario pidió unificar. AHORA: misma familia/mayúsculas que Calendario;
   se mantienen tamaño y color como estaban (el usuario dijo que los
   colores están bien). */
.team-card-cat{font-size:11px;color:var(--ink3);margin-top:2px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.4px;font-weight:700}

/* Team detail */
.back-btn{background:var(--white);border:1.5px solid var(--rule);border-radius:10px;padding:8px 16px;font-size:12px;font-weight:700;color:var(--ink2);cursor:pointer;margin-bottom:16px;transition:all .15s}
.back-btn:hover{border-color:var(--c1);color:var(--c1)}
.team-detail-header{display:flex;align-items:center;gap:14px;margin-bottom:18px;background:var(--white);padding:18px;border-radius:16px;border:1.5px solid var(--rule)}
.team-detail-header .team-logo,.team-detail-header .team-logo-ph{width:52px;height:52px}
.team-detail-name{font-family:'Barlow Condensed',sans-serif;font-size:27px;font-weight:900;text-transform:uppercase;line-height:1}
.team-detail-cat{font-size:12px;color:var(--ink3);font-family:'JetBrains Mono',monospace;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.team-detail-locker{display:inline-block;font-size:12px;color:var(--c1);font-weight:700;margin-top:6px;background:color-mix(in srgb,var(--c1) 10%,var(--white));padding:3px 10px;border-radius:8px}
.detail-tabs{display:flex;background:var(--white);border-radius:12px;border:1.5px solid var(--rule);padding:4px;margin-bottom:16px;gap:4px}
.detail-tab{flex:1;padding:10px;border:none;border-radius:9px;background:none;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink3);transition:all .15s}
.detail-tab.active{background:var(--c1);color:#fff}
.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:8px}
.roster-card{display:flex;align-items:center;gap:11px;background:var(--white);border:1.5px solid var(--rule);border-radius:12px;padding:10px 12px}
.roster-photo{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--paper)}
.roster-photo-ph{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--c2),var(--c1));color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;font-family:'Barlow Condensed',sans-serif;flex-shrink:0}
.roster-info{min-width:0;flex:1}
.roster-name{font-size:13px;font-weight:700;line-height:1.2;display:flex;align-items:center;gap:5px}
.roster-num{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;background:var(--c1);color:#fff;border-radius:5px;font-size:11px;font-weight:800;padding:0 4px}
.roster-meta{font-size:11px;color:var(--ink3);margin-top:2px}
.detail-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--ink3);margin:18px 0 8px;font-family:'JetBrains Mono',monospace}
.my-team-row{background:color-mix(in srgb,var(--c1) 16%,var(--white))!important;font-weight:800;box-shadow:inset 3px 0 0 var(--c1)}
#detail-standings .standings-table tr:first-child td{background:transparent}

/* ── Clasificación ───────────────────────────────────── */
.standings-tabs{display:flex;background:var(--white);border-radius:12px;border:1.5px solid var(--rule);padding:4px;margin-bottom:16px;gap:4px}
.stab{flex:1;padding:10px;border:none;border-radius:9px;background:none;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink3);transition:all .15s}
.stab.active{background:var(--c1);color:#fff}
.st-more{display:block;margin:8px auto 4px;padding:7px 18px;border:1px solid var(--border,#d0d5dd);border-radius:20px;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:600;cursor:pointer}.stab{min-width:0;line-height:1.15;overflow-wrap:anywhere}
@media(max-width:560px){
.stats-tbl .st-tn{display:none}
.stats-tbl .team-logo-ph+.st-tn{display:inline}
.standings-tabs{gap:2px;padding:3px}
.stab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;padding:8px 3px;text-align:center}
.stab svg{width:15px;height:15px}
}
.standings-cat-title{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:900;text-transform:uppercase;color:var(--ink2);padding:0 0 8px;border-bottom:2px solid var(--c1);margin:22px 0 10px}
.group-block{background:var(--white);border:1.5px solid var(--rule);border-radius:14px;padding:13px 14px 4px;margin-bottom:14px}
.group-title{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:900;text-transform:uppercase;color:var(--ink2);padding:0 0 7px;border-bottom:2px solid var(--c1);margin:0 0 9px}
.grp-collapse{border-top:1px solid var(--rule)}
.grp-collapse-head{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;cursor:pointer;padding:10px 2px;font-size:12px;font-weight:700;color:var(--ink2);font-family:inherit}
.grp-collapse-head:hover{color:var(--c1)}
.grp-arrow{transition:transform .2s;color:var(--ink3);font-size:13px}
.grp-collapse-head.open .grp-arrow{transform:rotate(180deg)}
.grp-collapse-body{padding:2px 0 10px}
/* Desplegable de categoría anidado dentro del día */
.grp-cat-collapse{margin:8px 0;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--paper,#f6f7f9)}
.grp-cat-head{width:100%;display:flex;align-items:center;gap:10px;background:none;border:none;cursor:pointer;padding:11px 14px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.5px;color:var(--c1)}
.grp-cat-head:hover{filter:brightness(1.1)}
.grp-cat-head .grp-cat-name{flex:1;text-align:left}
.grp-cat-head .grp-cat-count{background:var(--c1);color:#fff;font-family:var(--mono,monospace);font-size:11px;font-weight:700;padding:2px 9px;border-radius:50px;letter-spacing:0}
.grp-cat-head.open .grp-arrow{transform:rotate(180deg)}
.grp-cat-collapse .grp-collapse-body{padding:4px 12px 12px}
.group-block .standings-table{font-size:12px}
.group-block .standings-table th,.group-block .standings-table td{padding:7px 6px}
.match-cards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
@media(max-width:600px){.match-cards-grid{grid-template-columns:1fr}}
.gm-day{font-weight:800;font-size:12.5px;color:var(--ink2);margin:14px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--rule)}
.gm-cat-sep{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.5px;color:var(--c1);margin:16px 0 9px;padding:5px 12px;background:var(--paper,#f6f7f9);border-left:3px solid var(--c1);border-radius:6px}
.gm-cat-sep:first-child{margin-top:4px}
.gm-cat-sep-event{color:var(--ink3);border-left-color:var(--ink4)}
.gm-ref{margin-top:7px;padding-top:6px;border-top:1px dashed var(--rule);font-size:11px;font-weight:700;color:var(--ink3);display:flex;align-items:center;gap:3px}
.gm-card{min-width:0;border:1px solid var(--rule);border-radius:12px;padding:9px 11px;background:var(--white)}
.gm-card.played{border-color:var(--rule2)}
.gm-head{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--ink4);font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:.4px}
.gm-cat{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-court{flex-shrink:0}
.gm-main{display:flex;align-items:center;gap:10px}
.gm-teams{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.gm-trow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gm-team{display:flex;align-items:center;gap:7px;min-width:0;font-weight:700;font-size:12px;color:var(--ink);line-height:1.2}
.gm-team .team-logo,.gm-team .team-logo-ph{width:20px;height:20px;flex-shrink:0}
.gm-tn{min-width:0}
.gm-trow.gm-hl .gm-tn{color:var(--c1);font-weight:800}
.gm-tn-pending{color:var(--ink3,#9aa1ad);font-weight:600;font-style:italic}
.gm-sc{flex-shrink:0;min-width:26px;text-align:center;font-weight:800;font-size:13px;border-radius:7px;padding:3px 7px}
.gm-sc.win{background:#e8f9ee;color:#16a34a}
.gm-sc.lose{background:#fdecec;color:#dc2626}
.gm-sc.draw{background:#e9edf2;color:#5b6472}
.gm-time{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;line-height:1.12;font-variant-numeric:tabular-nums}
.gm-warm{font-size:10px;font-weight:700;color:#e8731c}
.gm-start{font-size:16px;font-weight:800;color:var(--c1)}
.gm-end{font-size:11px;font-weight:600;color:var(--ink4)}
.gm-special{border-style:dashed;background:repeating-linear-gradient(45deg,var(--paper),var(--paper) 7px,var(--white) 7px,var(--white) 14px)}
.gm-special-body{flex:1;display:flex;align-items:center;gap:9px;min-height:40px;min-width:0}
.gm-special-ic{font-size:18px;flex-shrink:0}
.gm-special-label{font-weight:800;font-size:11.5px;color:var(--ink2);text-transform:uppercase;letter-spacing:.4px;line-height:1.2}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:4px}
.cat-card{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:16px 18px;border:1px solid var(--rule);border-radius:14px;background:var(--white);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.cat-card:hover{border-color:var(--c1);box-shadow:0 5px 16px rgba(0,0,0,.09);transform:translateY(-2px)}
/* font-family/uppercase añadidos para que el nombre de categoría se vea
   igual que en Calendario/Mi equipo (antes heredaba la fuente base). */
.cat-card-name{font-weight:900;font-size:18px;color:var(--ink);font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.5px}
.cat-card-meta{font-size:11px;color:var(--ink4);font-weight:600}
.cat-card-go{margin-top:5px;font-size:12px;font-weight:700;color:var(--c1)}
.cl-back{margin:0 0 14px;padding:8px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--white);font-weight:700;font-size:13px;color:var(--ink2);cursor:pointer}
.cl-back:hover{border-color:var(--c1);color:var(--c1)}
.cl-cat-title{font-weight:900;font-size:23px;color:var(--ink);margin-bottom:12px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.5px}
.table-wrap{overflow-x:auto;border-radius:14px;border:1.5px solid var(--rule);margin-bottom:16px;background:var(--white);box-shadow:0 2px 10px rgba(0,0,0,.03)}
.standings-table{width:100%;border-collapse:collapse;font-size:13px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.standings-table th{background:var(--paper);color:var(--ink3);font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:10px 8px;border-bottom:1.5px solid var(--rule);text-align:center;white-space:nowrap}
.standings-table td{padding:10px 8px;border-bottom:1px solid var(--rule);text-align:center;vertical-align:middle}
.standings-table tr:last-child td{border-bottom:none}
.standings-table tr:first-child td{background:color-mix(in srgb,var(--c1) 8%,var(--white))}
.standings-table .left{text-align:left}
.standings-table .bold{font-weight:700}
.standings-table .pts{font-weight:900;color:var(--c1);font-size:14px}
.standings-table .team-logo,.standings-table .team-logo-ph{width:24px;height:24px;vertical-align:middle;margin-right:7px}

/* Pro wall */
.pro-wall{text-align:center;padding:48px 24px;background:var(--white);border-radius:18px;border:2px dashed var(--rule2)}
.pro-wall-icon{font-size:44px;margin-bottom:12px}
.pro-wall-title{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:900;text-transform:uppercase;margin-bottom:8px}
.pro-wall-desc{font-size:14px;color:var(--ink2);line-height:1.7;max-width:320px;margin:0 auto}
.score-lock{font-size:16px}
.score-locked-bar{font-size:11px;color:var(--ink3);padding:4px 14px 8px;font-style:italic}

/* ── Calendario ──────────────────────────────────────── */
.schedule-search{display:flex;gap:8px;margin-bottom:16px}
.schedule-search input{flex:1;padding:12px 16px;border:1.5px solid var(--rule);border-radius:12px;font-size:14px;font-family:'DM Sans',sans-serif;background:var(--white);color:var(--ink)}
.schedule-search input::placeholder{color:var(--ink3)}
.schedule-search input:focus{border-color:var(--c1);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 18%,transparent)}
.schedule-search button{padding:12px 22px;background:var(--c1);color:#fff;border:none;border-radius:12px;font-weight:700;cursor:pointer;font-size:14px}
.day-block{margin-bottom:14px}
.day-header{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;background:var(--white);border-radius:13px;border:1.5px solid var(--rule);cursor:pointer;margin-bottom:8px;transition:border-color .15s}
.day-header:hover{border-color:var(--c1)}
.day-title{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;text-transform:uppercase;color:var(--ink2)}
.day-chevron{font-size:14px;color:var(--ink3)}

/* Noticias */
.news-form{background:var(--white);border-radius:14px;padding:16px;margin-bottom:14px;border:1.5px solid var(--rule)}
.news-form-title{font-weight:700;font-size:13px;margin-bottom:9px}
.news-form input,.news-form textarea{width:100%;padding:9px 12px;border:1.5px solid var(--rule);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;margin-bottom:7px;resize:vertical}
.news-form button{background:var(--c1);color:#fff;border:none;border-radius:8px;padding:10px;font-weight:700;cursor:pointer;width:100%}
.news-card{background:var(--white);border-radius:14px;padding:15px;margin-bottom:9px;border:1.5px solid var(--rule);position:relative}
.news-del{position:absolute;top:10px;right:10px;background:none;border:none;cursor:pointer;color:var(--ink3);font-size:15px}
.news-title{font-weight:700;font-size:14px;margin-bottom:4px;padding-right:22px}
.news-body{font-size:13px;color:var(--ink2);line-height:1.5;margin-bottom:5px}
.news-date{font-size:10px;color:var(--ink3);font-family:'JetBrains Mono',monospace}

/* Patrocinadores */
.sponsors-bar{margin:32px auto 0;padding:24px 16px;background:var(--white);border-radius:16px;border:1.5px solid var(--rule);max-width:760px;width:100%}
.sponsors-label{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--ink3);font-family:'JetBrains Mono',monospace;margin-bottom:16px;text-align:center}
.sponsors-logos{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
.sponsor-item{display:flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;border:1.5px solid var(--rule);background:var(--paper);transition:all .15s;min-width:72px;text-decoration:none}
.sponsor-item:hover{border-color:var(--c1);background:color-mix(in srgb,var(--c1) 6%,var(--white));transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.07)}
.sponsor-logo{height:44px;max-width:110px;object-fit:contain}
.sponsor-name-only{font-size:13px;font-weight:700;color:var(--ink2)}

/* Empty */
.empty{text-align:center;padding:48px 20px;color:var(--ink3);font-size:14px;line-height:1.7}

/* Móvil: nav se mantiene arriba con scroll horizontal */
@media (max-width:520px){
  .hero{height:clamp(160px,42vw,220px)}
  .hero-content{padding:0 14px 12px;gap:10px}
  .hero-logo{width:72px;height:72px;border-radius:14px}
  .nav-btn{padding:9px 0;font-size:11px;width:44px;justify-content:center}
  .nav-btn span:last-child{display:none}
  .nav-icon{font-size:19px;display:flex;justify-content:center}
  .info-stat-n{font-size:30px}
}

/* ── Fase final / Bracket (app pública) ── */
.bv-wrap{max-width:1000px;margin:0 auto}
.bv-head{margin-bottom:20px}
.bv-title{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.bv-sub{font-size:13px;color:var(--ink3);margin-top:3px}
/* Carrusel de rondas: una ronda ocupa toda la anchura (móvil y escritorio
   por igual) y se pasa a la siguiente deslizando o con los botones ‹ ›
   del paginador — antes todas las rondas se amontonaban diminutas en una
   fila y había que hacer zoom para leer los equipos. */
/* Envoltorio que recorta la altura del carrusel a la ronda que se está
   viendo (ver _bvSyncViewportHeight) — sin JS se queda en altura
   automática (como si no existiera), así que nunca rompe nada. */
.bv-viewport{overflow:hidden;width:100%;box-sizing:border-box;transition:height .25s ease}
/* Sin padding lateral (antes 2px a cada lado): esos 2px hacían que el
   ancho "de contenido" de .bv-scroll (donde se apoya cada ronda al
   100%) no coincidiera exacto con el ancho visible de la pantalla,
   dejando asomar un pelín de la siguiente ronda por el borde derecho
   en vez de quedar completamente oculta hasta deslizar. */
.bv-scroll{overflow-x:auto;padding:6px 0 20px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
/* align-items:flex-start (no stretch): si no, todas las rondas se estiran a
   la altura de la ronda con más partidos, y en la Final (1 solo partido) el
   "center" de .bv-col-body deja un hueco enorme antes y después en vez de
   que la columna mida lo que ocupa su contenido. */
/* Sin min-width:min-content (el equivalente .bkt del admin tampoco lo
   lleva): forzar aquí un ancho mínimo hacía que algunos móviles en
   vertical calculasen el ancho de esta fila a partir de la suma del
   contenido de TODAS las rondas en vez de una ronda = una pantalla,
   rompiendo el encaje del carrusel (tarjeta cortada por la derecha, ronda
   no centrada) aunque en horizontal/escritorio, con más ancho de sobra, no
   se notara. */
.bv{display:flex;align-items:flex-start}
.bv-col{display:flex;flex-direction:column;min-width:100%;width:100%;flex:0 0 100%;box-sizing:border-box;scroll-snap-align:start}
.bv-col-head{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--c1);text-align:center;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid color-mix(in srgb,var(--c1) 15%,transparent)}
/* center (no space-around): con menos partidos en la ronda esto los
   mantiene agrupados con un hueco fijo, en vez de estirarse con huecos
   enormes para igualar la altura de la ronda con más partidos. */
.bv-col-body{display:flex;flex-direction:column;justify-content:center;flex:1;gap:16px}
.bv-cell{display:flex;flex-direction:column;justify-content:center;flex:1 0 auto;position:relative;padding:7px 0}
.bv-goals{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;padding:0 8px;justify-content:center}
.bv-goal{font-size:10px;font-weight:600;color:var(--ink3);background:var(--paper);border-radius:6px;padding:2px 7px}
/* Ancho cómodo y centrado — si no, al ocupar la ronda toda la pantalla en
   escritorio, la tarjeta del partido se estiraría de borde a borde. Mismo
   ancho en TODAS las rondas (antes solo/duo tenían un ancho distinto al
   resto), igual que la tarjeta de 3er/4º puesto (.bv-third, también 460px). */
.bv-match{position:relative;border:1.5px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--white);box-shadow:0 1px 3px rgba(17,24,39,.06);margin:0 auto;max-width:460px;width:100%}
.bv-team{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;gap:8px;border-bottom:1px solid var(--rule);min-height:40px}
.bv-team .team-logo,.bv-team .team-logo-ph{width:26px;height:26px;flex-shrink:0}
.bv-team:last-child{border-bottom:none}
.bv-name{flex:1;font-size:13.5px;font-weight:600;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bv-team.ph .bv-name{color:var(--ink3);font-weight:500;font-style:italic}
.bv-when{font-size:10px;font-weight:700;color:var(--ink3);text-align:center;margin:0 16px 5px;letter-spacing:.2px}
.bv-ref{font-size:10px;font-weight:700;color:var(--ink3);text-align:center;margin:5px 16px 0;padding-top:5px;border-top:1px dashed var(--rule)}
.bv-third-title{font-size:12px;font-weight:800;color:var(--ink2);margin-bottom:8px;text-align:center}
/* Ancla dura con !important: el partido de la Final y el de 3er/4º van en
   la misma página del carrusel (la última ronda) y deben medir
   EXACTAMENTE igual, pero se seguían viendo distintos pese a que ambos
   tenían max-width:460px en reglas separadas -- para eliminar cualquier
   ambigüedad de cascada se fuerza aquí el mismo valor en las dos, sin
   dejar sitio a que ninguna otra regla los desajuste. */
.bv-col:last-child .bv-col-body .bv-match{max-width:460px !important;width:100% !important;margin:0 auto !important}
.bv-third{margin:14px auto 0;border-top:1px dashed var(--rule);padding-top:12px;box-sizing:border-box;max-width:460px !important;width:100% !important}
.bv-third .bv-match{max-width:460px !important;width:100% !important;margin:0 auto !important}
.bv-de-title{font-size:13px;font-weight:800;color:var(--ink);margin:16px 16px 6px}
/* Doble carril (1º-4º / 5º-8º): cada carril con su propio acento de color
   (independiente de --c1/--c2, los colores de marca del torneo, que pueden
   ser casi idénticos entre sí -- ver comentario del bv-champion más abajo)
   para que se distingan de un vistazo, a petición del organizador. Oro para
   el carril alto (el que reparte 1º-4º, a juego con el icono de trofeo),
   azul acero para el bajo (5º-8º, a juego con el icono de bifurcación). */
.bv-lane-high .bv-de-title{color:#d4af37}
/* .bv-col .bv-match (no solo .bv-lane-high .bv-match): cada carril renderiza
   un único .bv-col, que por serlo también cumple ".bv-col:last-child" -- la
   regla de más abajo que dora el borde de la última columna de un cuadro
   normal (la Final) -- con la MISMA especificidad (3 clases) pero definida
   después en la hoja, así que ganaba siempre y el carril bajo salía dorado
   en vez de azul. Añadir ".bv-col" aquí sube a 4 clases y desempata a favor
   del color de carril, gane quien gane el orden de declaración. */
.bv-lane-high .bv-col .bv-match{border-color:color-mix(in srgb,#d4af37 45%,var(--rule))}
.bv-lane-low .bv-de-title{color:#5b8dee}
.bv-lane-low .bv-col .bv-match{border-color:color-mix(in srgb,#5b8dee 40%,var(--rule))}
/* "Pase de máquina" y demás avisos de horario (scheduleExtras): antes en
   amarillo/crema vivo (#fff8e1 + borde dorado), pensado para un fondo claro
   -- sobre el tema oscuro (por defecto en la app pública) quedaba como un
   parche que llamaba más la atención que los propios resultados. Ahora usa
   los mismos tonos neutros de "papel" que el resto de tarjetas del Bracket
   (var(--paper)/var(--rule2)), con el mismo formato pero sin competir
   visualmente con los marcadores. */
.bv-extras{margin:10px 16px 4px;display:flex;flex-direction:column;gap:6px}
.bv-extra-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper);border:1px dashed var(--rule2);border-radius:9px;padding:8px 12px}
.bv-extra-when{font-size:11px;font-weight:700;color:var(--ink3);font-family:'JetBrains Mono',monospace}
.bv-extra-label{font-size:12px;font-weight:800;color:var(--ink2)}
.stale-banner{position:fixed;left:0;right:0;top:0;z-index:980;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;background:#fff8e1;border-bottom:1px solid #f0c14b;color:#7a5e1a;font-size:12.5px;font-weight:700;text-align:center}
/* ANTES: position:fixed;right;bottom — el botón "?" quedaba flotando
   sobre el contenido en todo momento, tapando cosas al hacer scroll.
   AHORA: elemento normal en el flujo, centrado, al final de la página
   (ya está colocado ahí en el HTML, justo tras <main id="app">) — deja
   de "flotar" pero sigue siendo el mismo botón de feedback. */
.fb-fab{display:block;margin:28px auto 20px;width:44px;height:44px;border-radius:50%;border:none;background:var(--c1);color:#fff;font-size:21px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.fb-overlay{position:fixed;inset:0;background:rgba(2,6,16,.65);display:none;align-items:center;justify-content:center;z-index:950;padding:16px}
.fb-card{background:var(--white);border-radius:16px;max-width:420px;width:100%;padding:20px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:90vh;overflow:auto}
.gm-click{cursor:pointer;transition:border-color .15s,transform .15s}
.gm-click:hover{border-color:var(--c1)}
.md-card{max-width:520px;padding:18px 18px 20px}
.md-head{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--ink3);margin:0 26px 14px 0}
.md-status{font-weight:700;white-space:nowrap}
.md-main{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;margin-bottom:12px}
.md-side{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.md-logo .team-logo,.md-logo .team-logo-ph{width:56px;height:56px;object-fit:contain}
.md-tn{font-size:14px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.md-score{display:flex;align-items:center;gap:10px;font-size:40px;font-weight:800;color:var(--ink3);line-height:56px}
.md-score .md-w{color:var(--ink)}
.md-dash{font-size:26px;color:var(--ink3)}
.md-sec{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--ink3);border-top:1px solid var(--rule);padding-top:10px;margin-top:10px}
.md-line{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule)}
.md-line:last-child{border-bottom:none}
.md-ic{width:22px;text-align:center;flex-shrink:0}
.md-txt{flex:1;min-width:0;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.md-txt small{color:var(--ink3);font-size:12.5px}
.md-tm{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;width:40px}
.md-tm .team-logo,.md-tm .team-logo-ph{width:36px;height:36px;object-fit:contain}
.md-none{font-size:13px;color:var(--ink3);text-align:center;padding:10px 0 2px}
.fb-x{position:absolute;top:10px;right:14px;border:none;background:none;font-size:24px;color:var(--ink3);cursor:pointer;line-height:1}
.fb-title{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:4px}
.fb-sub{font-size:13px;color:var(--ink3);margin-bottom:15px;line-height:1.4}
.fb-q{margin-bottom:13px}
.fb-q>span{display:block;font-size:14px;font-weight:600;color:var(--ink2);margin-bottom:7px}
.fb-yn{display:flex;gap:8px}
.fb-opt{flex:1;padding:9px;border:1.5px solid var(--rule);background:var(--white);border-radius:9px;font-size:14px;font-weight:700;color:var(--ink2);cursor:pointer}
.fb-opt.active{background:var(--c1);color:#fff;border-color:var(--c1)}
.fb-q-text textarea{width:100%;box-sizing:border-box;padding:10px;border:1.5px solid var(--rule);border-radius:9px;font-size:14px;font-family:inherit;resize:vertical}
.fb-send{width:100%;padding:12px;border:none;border-radius:10px;background:var(--c1);color:#fff;font-size:15px;font-weight:800;cursor:pointer;margin-top:6px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--c1);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}}
.sched-cat-filter{display:flex;flex-wrap:wrap;gap:6px;margin:0 16px 10px}
.scf{padding:6px 13px;border:1.5px solid var(--rule);background:var(--white);color:var(--ink2);border-radius:999px;font-size:12px;font-weight:700;cursor:pointer}
.scf.active{background:var(--c1);color:#fff;border-color:var(--c1)}
.team-sel-cat{font-size:13px;font-weight:800;color:var(--c1);margin:16px 16px 8px;text-transform:uppercase;letter-spacing:.5px}
.team-view-tabs{display:flex;gap:6px;background:var(--white);border:1.5px solid var(--rule);border-radius:12px;padding:4px;margin:0 0 14px}
.tv-tab{flex:1;padding:11px;border:none;border-radius:9px;background:none;cursor:pointer;font-size:14px;font-weight:700;color:var(--ink3);transition:all .15s}
.tv-tab.active{background:var(--c1);color:#fff}
.tg-cat{margin-bottom:10px;border:1.5px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--white)}
/* font-family añadido: antes heredaba la fuente base del body (distinta a
   la condensada de Calendario/.grp-cat-head) aunque ya llevaba uppercase;
   unificado a pedido del usuario. */
.tg-cat-head{width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:none;border:none;cursor:pointer;font-size:15px;font-weight:800;color:var(--c1);text-transform:uppercase;letter-spacing:.5px;font-family:'Barlow Condensed',sans-serif}
.tg-cat-head .tg-arrow{transition:transform .2s;color:var(--ink3)}
.tg-cat-head.open .tg-arrow{transform:rotate(180deg)}
.tg-cat-body{padding:4px 14px 14px}
.tg-group-label{font-size:12px;font-weight:800;color:var(--ink3);text-transform:uppercase;letter-spacing:.5px;margin:12px 2px 8px}
.team-also{margin:8px 16px 0;font-size:12px;color:var(--ink3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.team-also-chip{padding:4px 11px;border:1.5px solid var(--rule);background:var(--white);color:var(--c1);border-radius:999px;font-size:12px;font-weight:700;cursor:pointer}
.detail-day-label{font-size:12px;font-weight:800;color:var(--c1);text-transform:uppercase;letter-spacing:.4px;margin:14px 0 7px;padding-left:2px}
/* ANTES: sin padding/min-width fijos ni fondo por defecto -- el número se
   veía como texto suelto, mucho más pequeño y discreto que en Calendario
   (.gm-sc, min-width 26px + fondo en píldora SIEMPRE). AHORA: misma forma
   de píldora en todos los casos (con marcador o sin él), igualando tamaño
   con .gm-sc -- el Bracket debe verse tan "resultado" como el Calendario. */
.bv-score{flex-shrink:0;font-weight:800;font-size:14px;color:var(--ink3);min-width:26px;text-align:center;border-radius:7px;padding:3px 7px;background:var(--paper2,rgba(127,127,127,.08))}
.bv-team.won{background:linear-gradient(90deg,color-mix(in srgb,var(--c1) 16%,transparent),color-mix(in srgb,var(--c1) 4%,transparent))}
.bv-team.won .bv-name{color:var(--ink);font-weight:800}
.bv-team.won .bv-score{color:var(--c1)}
/* Marcador en verde/rojo/gris igual que el Calendario (.gm-sc.win/.lose/.draw
   más abajo) -- petición del organizador tras ver el torneo publicado: el
   Bracket pintaba siempre el número del marcador del mismo color (el de
   marca, var(--c1), solo resaltado en el lado ganador), y quería el mismo
   golpe de vista verde/rojo que ya usa el Calendario normal.
   ANTES: ".bv-score.win" (dos clases en el mismo elemento) tiene EXACTAMENTE
   la misma especificidad que ".bv-team.won .bv-score" de arriba (dos clases
   también, aunque una sea descendiente) -- ganaba solo por venir después en
   el CSS, algo frágil y que en la práctica seguía pintando el número en el
   color de marca (dorado en este torneo) en vez de verde/rojo. AHORA:
   ".bv-team .bv-score.win/.lose/.draw" (tres clases) tiene MÁS especificidad
   que ".bv-team.won .bv-score" (dos clases) pase lo que pase con el orden,
   así que el verde/rojo/gris del resultado siempre gana sobre el color de
   marca del torneo. */
.bv-team .bv-score.win{background:#e8f9ee;color:#16a34a}
.bv-team .bv-score.lose{background:#fdecec;color:#dc2626}
.bv-team .bv-score.draw{background:#e9edf2;color:#5b6472}
.bv-col:last-child .bv-match{border-color:color-mix(in srgb,#d4af37 55%,transparent);box-shadow:0 2px 14px rgba(212,175,55,.18)}
.bv-col:last-child .bv-col-head{color:#b8860b;border-bottom-color:rgba(212,175,55,.3)}
/* ANTES: el fondo usaba var(--c2)/var(--c1) (los colores de marca del
   torneo) -- con una paleta clara/dorada (caso real: Bee Hockey Cup 2026,
   #f5c211/#f9d764, los dos casi el mismo amarillo) el degradado se fundía
   consigo mismo y con el icono de trofeo (también dorado sobre dorado),
   dejando el recuadro "sin ver" pese a estar ahí. AHORA: paleta FIJA
   oscura+dorado clásico de "trofeo/podio", igual en cualquier torneo sin
   importar sus colores de marca -- mismo criterio que .bv-col:last-child
   (borde/título dorados fijos) unas líneas más arriba. */
.bv-champion{display:flex;align-items:center;gap:14px;margin:8px auto 0;max-width:340px;padding:16px 20px;background:linear-gradient(135deg,#1a1f2e,#2d2410);border:1.5px solid #d4af37;border-radius:14px;box-shadow:0 8px 24px -6px rgba(0,0,0,.35),0 0 0 1px rgba(212,175,55,.25) inset;position:relative;overflow:hidden}
.bv-champion::after{content:'';position:absolute;inset:0;background:radial-gradient(120px 60px at 15% 0%,rgba(255,215,0,.16),transparent 70%);pointer-events:none}
.bv-champion-ico{font-size:22px;line-height:1;width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(212,175,55,.18);color:#ffd700;box-shadow:0 0 0 1.5px rgba(255,215,0,.55) inset}
.bv-champion-lbl{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#e8c766}
.bv-champion-name{font-size:19px;font-weight:800;color:#fff;margin-top:2px}
/* ── Paginador del carrusel de rondas (‹ Ronda X/N ›) ── */
/* margin-top en positivo (antes -8px): con margen negativo el paginador se
   subía y quedaba pisando el borde inferior de la última tarjeta de la
   ronda -- según la altura exacta que calculaba el ajuste de .bv-viewport,
   se le podían tapar los botones ‹ › casi enteros y solo asomaban un par
   de gajos de círculo sin ninguna tarjeta ni número al lado, con pinta de
   resto suelto en vez de un control de navegación reconocible. */
.bv-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 20px}
.bv-pg-btn{width:32px;height:32px;flex-shrink:0;border:1.5px solid var(--rule);border-radius:50%;background:var(--white);color:var(--ink2);font-size:17px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.bv-pg-btn:hover{background:var(--c1);border-color:var(--c1);color:#fff}
.bv-pg-dots{display:flex;align-items:center;gap:6px}
.bv-pg-dot{width:7px;height:7px;border-radius:50%;background:var(--rule);transition:all .15s}
.bv-pg-dot.active{background:var(--c1);width:18px;border-radius:4px}
@media(max-width:640px){.bv-name{font-size:13px}}