/* ═══════════════════════════════════════════════════════════════════
   MyBalls · SITIO PÚBLICO · CARBON & LIME v5 — DE CERO
   Base: player.css LITERAL (la hoja de player.myballs.com.mx).
   Extensión: cada componente público escrito a mano. Cero herencia.
═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   MYBALLS PLAYER · Sistema de diseño "Carbon & Lime"
   Retícula 4px · Space Grotesk / Manrope / JetBrains Mono
   Lime  = singles · victoria · acción
   Turquoise = semántica de DOBLES
   Wine Ash  = resplandor secundario del escenario
═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#0f0f0f;
  --surface:#171717;
  --surface-2:#1d1d1d;
  --surface-3:#232323;
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.14);
  --text:#f5f5f5;
  --text-2:#a6a6a6;
  --text-3:#6e6e6e;
  --lime:#C6FF34;
  --lime-ink:#131600;
  --lime-dim:rgba(198,255,52,.10);
  --lime-line:rgba(198,255,52,.35);
  --turq:#99E1D9;
  --turq-dim:rgba(153,225,217,.10);
  --turq-line:rgba(153,225,217,.35);
  --wine:#32292F;
  --loss:#ff6b6b;
  --loss-dim:rgba(255,107,107,.10);
  --r-card:14px;
  --r-pill:999px;
  --pad:24px;
  --font-display:'Space Grotesk',sans-serif;
  --font-ui:'Manrope',sans-serif;
  --font-data:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--lime);color:var(--lime-ink)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}

/* ── utilería tipográfica ─────────────────────────────────── */
.label{
  font-family:var(--font-data);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-3);
}
.mono{font-family:var(--font-data)}

/* ── barra superior ───────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1180px;margin:0 auto;padding:20px 24px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:34px;height:34px;border-radius:10px;
  background:var(--lime);color:var(--lime-ink);
  display:grid;place-items:center;
}
.brand-mark svg{width:19px;height:19px}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.brand-name span{color:var(--lime)}
.brand-sub{font-family:var(--font-data);font-size:10px;letter-spacing:.18em;color:var(--text-3);text-transform:uppercase;margin-top:1px}
.topbar-actions{display:flex;align-items:center;gap:10px}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  height:38px;padding:0 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
  font-weight:600;font-size:13.5px;color:var(--text-2);
  transition:border-color .16s ease-out,color .16s ease-out,transform .12s ease-out;
}
.btn-ghost:hover{border-color:var(--lime-line);color:var(--text)}
.btn-ghost:active{transform:scale(.97)}
.btn-ghost svg{width:15px;height:15px}
.btn-icon{width:38px;padding:0;justify-content:center}

/* ── HERO · el escenario Carbon ───────────────────────────── */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;
}
.hero::before{width:520px;height:520px;right:-140px;top:-220px;background:rgba(198,255,52,.09)}
.hero::after{width:560px;height:560px;left:-180px;bottom:-260px;background:rgba(50,41,47,.85)}
.hero-inner{
  position:relative;z-index:1;
  max-width:1180px;margin:0 auto;
  padding:44px 24px 40px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-wrap:wrap;
}
.hero-id{display:flex;align-items:center;gap:28px;min-width:0}
.avatar{position:relative;flex:none}
.avatar-img{
  width:104px;height:104px;border-radius:50%;
  background:linear-gradient(145deg,#2a2a2a,#1a1a1a);
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--text-2);
  letter-spacing:.02em;
}
.avatar-ring{position:absolute;inset:-7px}
.avatar-ring circle{
  fill:none;stroke:var(--lime);stroke-width:2.5;
  stroke-dasharray:370;stroke-dashoffset:370;
  transform:rotate(-90deg);transform-origin:center;
  animation:ringDraw .8s .15s ease-out forwards;
}
@keyframes ringDraw{to{stroke-dashoffset:0}}
.hero-name{
  font-family:var(--font-display);
  font-size:clamp(34px,5.4vw,56px);
  font-weight:700;line-height:1.02;letter-spacing:-.025em;
}
.hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin-top:14px;color:var(--text-2);font-size:14px;font-weight:500}
.hero-meta .mi{display:inline-flex;align-items:center;gap:7px}
.hero-meta svg{width:15px;height:15px;color:var(--text-3)}
.chip-ipin{
  font-family:var(--font-data);font-size:12px;letter-spacing:.08em;
  padding:4px 10px;border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--text-2);
}
.chip-verified{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--lime-dim);border:1px solid var(--lime-line);
  color:var(--lime);font-weight:700;font-size:12.5px;letter-spacing:.02em;
}
.chip-verified svg{width:14px;height:14px}
.rise{opacity:0;transform:translateY(16px);animation:rise .55s ease-out forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}

/* números héroe */
.hero-stats{display:flex;align-items:flex-end;gap:0;flex:none}
.hstat{padding:0 34px;position:relative}
.hstat + .hstat::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:var(--line-strong);
}
.hstat .label{margin-bottom:6px}
.hstat-num{
  font-family:var(--font-display);
  font-size:clamp(52px,7.5vw,78px);
  font-weight:700;line-height:.95;letter-spacing:-.035em;
  color:var(--lime);
  font-variant-numeric:tabular-nums;
}
.hstat.alt .hstat-num{color:var(--turq)}
.hstat-sub{display:flex;align-items:center;gap:10px;margin-top:10px}
.delta{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-data);font-size:11.5px;font-weight:700;letter-spacing:.04em;
  padding:3px 9px;border-radius:var(--r-pill);
  background:var(--lime-dim);color:var(--lime);
}
.delta svg{width:9px;height:9px}
.hstat-sub .note{font-size:12px;color:var(--text-3);font-weight:500}

/* selector singles/dobles */
.mode{
  display:inline-flex;position:relative;margin-top:22px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:3px;
  background:rgba(255,255,255,.02);
}
.mode-thumb{
  position:absolute;top:3px;bottom:3px;left:3px;width:96px;
  background:var(--lime);border-radius:var(--r-pill);
  transition:transform .22s cubic-bezier(.3,.9,.4,1),background-color .22s ease-out;
}
.mode.dobles .mode-thumb{transform:translateX(96px);background:var(--turq)}
.mode button{
  position:relative;z-index:1;width:96px;height:32px;
  font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-2);transition:color .18s ease-out;
}
.mode button.on{color:var(--lime-ink)}
.mode button:active{transform:scale(.97)}

/* ── tabs ─────────────────────────────────────────────────── */
.tabs-wrap{
  position:sticky;top:0;z-index:20;
  background:rgba(15,15,15,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.tabs{
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:flex;gap:30px;position:relative;
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;height:52px;display:inline-flex;align-items:center;
  font-weight:700;font-size:14px;letter-spacing:.01em;color:var(--text-3);
  transition:color .16s ease-out;
}
.tab:hover{color:var(--text-2)}
.tab.on{color:var(--text)}
.tab-ink{
  position:absolute;bottom:0;height:2px;background:var(--lime);border-radius:2px 2px 0 0;
  transition:left .24s cubic-bezier(.3,.9,.4,1),width .24s cubic-bezier(.3,.9,.4,1);
}

/* ── lienzo ───────────────────────────────────────────────── */
.canvas{max-width:1180px;margin:0 auto;padding:32px 24px 72px}
.panel{display:none}
.panel.on{display:block;animation:panelIn .22s ease-out}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:24px;align-items:start}
.col{display:flex;flex-direction:column;gap:24px;min-width:0}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--pad);
  transition:transform .16s ease-out,border-color .16s ease-out;
}
.card.hoverable:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.card-title{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.01em}
.card-link{font-size:13px;font-weight:700;color:var(--lime);display:inline-flex;align-items:center;gap:6px;transition:gap .16s ease-out}
.card-link:hover{gap:9px}
.card-link svg{width:13px;height:13px}

/* ── próximo partido ─────────────────────────────────────── */
.next{position:relative;overflow:hidden;border-color:var(--lime-line)}
.next::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--lime)}
.next::after{
  content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;
  background:rgba(198,255,52,.07);border-radius:50%;filter:blur(40px);pointer-events:none;
}
.next-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.next-when{
  font-family:var(--font-display);font-size:clamp(21px,3vw,26px);font-weight:700;letter-spacing:-.02em;margin-top:12px;
}
.next-when em{font-style:normal;color:var(--lime)}
.next-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
  font-family:var(--font-data);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);
}
.chip svg{width:12px;height:12px;color:var(--text-3)}
.chip.turq{background:var(--turq-dim);border-color:var(--turq-line);color:var(--turq)}
.chip.turq svg{color:var(--turq)}
.next-vs{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.team{display:flex;flex-direction:column;gap:5px;min-width:150px}
.team .who{font-weight:800;font-size:15px}
.team .who small{display:block;font-weight:600;color:var(--text-2);font-size:13.5px;margin-top:2px}
.vs-dot{
  font-family:var(--font-data);font-size:11px;letter-spacing:.12em;color:var(--text-3);
  padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);flex:none;
}
.btn-lime{
  display:inline-flex;align-items:center;gap:9px;
  height:42px;padding:0 20px;margin-top:22px;
  background:var(--lime);color:var(--lime-ink);
  border-radius:var(--r-pill);font-weight:800;font-size:14px;
  transition:transform .12s ease-out,box-shadow .16s ease-out;
}
.btn-lime:hover{box-shadow:0 6px 24px rgba(198,255,52,.22)}
.btn-lime:active{transform:scale(.97)}
.btn-lime svg{width:15px;height:15px}

/* ── tarjeta de partido (el átomo) ───────────────────────── */
.match{padding:18px 20px}
.match-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.sport{
  font-family:var(--font-data);font-size:10px;font-weight:700;letter-spacing:.14em;
  padding:3px 8px;border-radius:5px;
  background:var(--lime-dim);color:var(--lime);
}
.sport.turq{background:var(--turq-dim);color:var(--turq)}
.match-top .meta{font-family:var(--font-data);font-size:11.5px;letter-spacing:.06em;color:var(--text-3)}
.match-top .badge-q{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--lime);
}
.match-top .badge-q svg{width:13px;height:13px}
.rows{display:flex;flex-direction:column}
.prow{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:9px 0;
}
.prow + .prow{border-top:1px solid var(--line)}
.pl{display:flex;align-items:center;gap:11px;min-width:0}
.flag{width:20px;height:14px;border-radius:3px;overflow:hidden;flex:none;border:1px solid rgba(255,255,255,.12)}
.pname{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow.lose .pname{color:var(--text-2);font-weight:600}
.prank{
  font-family:var(--font-data);font-size:10.5px;letter-spacing:.05em;
  padding:2px 7px;border:1px solid var(--line-strong);border-radius:5px;color:var(--text-3);flex:none;
}
.score{display:flex;align-items:center;gap:4px}
.set{
  font-family:var(--font-data);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;
  width:26px;text-align:center;color:var(--text-2);
}
.prow.win .set{color:var(--text)}
.set sup{font-size:9px;color:var(--text-3);margin-left:1px}
.wcaret{width:14px;display:grid;place-items:center;color:transparent}
.prow.win .wcaret{color:var(--lime)}
.wcaret svg{width:8px;height:10px}
.match-note{
  margin-top:12px;font-family:var(--font-data);font-size:11px;letter-spacing:.06em;color:var(--text-3);
}
.match-note b{color:var(--loss);font-weight:700}

/* agrupador por torneo (Resultados) */
.tgroup{margin-bottom:28px}
.tgroup-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:0 4px 12px;
}
.tgroup-title{font-family:var(--font-display);font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.tgroup-title a{color:var(--lime)}
.tgroup-title a:hover{text-decoration:underline;text-underline-offset:3px}
.tgroup-meta{font-family:var(--font-data);font-size:11.5px;letter-spacing:.08em;color:var(--text-3);text-transform:uppercase}
.tgroup .card + .card{margin-top:12px}

/* filtros */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.fchip{
  height:34px;padding:0 15px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
  font-weight:700;font-size:12.5px;letter-spacing:.04em;color:var(--text-2);
  transition:all .16s ease-out;
}
.fchip:hover{border-color:var(--text-3);color:var(--text)}
.fchip.on{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.fchip.on.turq{background:var(--turq);border-color:var(--turq)}
.wl-strip{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:22px;color:var(--text-2);font-size:13.5px;font-weight:600;
}
.wl-strip .mono{color:var(--text);font-weight:700;letter-spacing:.03em}

/* ── rail derecho ────────────────────────────────────────── */
.rk-table{width:100%;border-collapse:collapse}
.rk-table th{
  font-family:var(--font-data);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);text-align:right;padding:0 0 12px;
}
.rk-table th:first-child{text-align:left}
.rk-table td{padding:11px 0;border-top:1px solid var(--line);vertical-align:middle}
.rk-cat{font-weight:700;font-size:13.5px}
.rk-cat small{display:block;font-weight:500;font-size:11px;color:var(--text-3);margin-top:1px}
.rk-num{text-align:right;font-family:var(--font-data);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.rk-num.s{color:var(--lime)}
.rk-num.d{color:var(--turq)}
.rk-num .dlt{display:block;font-size:10px;font-weight:500;color:var(--text-3);margin-top:2px}
.rk-num .dlt.up{color:var(--lime)}
.rk-foot{margin-top:14px;font-size:11.5px;color:var(--text-3);display:flex;align-items:center;gap:7px}
.rk-foot svg{width:13px;height:13px;flex:none}

.act-big{display:flex;align-items:baseline;gap:10px}
.act-big .n{font-family:var(--font-display);font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1}
.act-big .l{font-size:13px;color:var(--text-2);font-weight:600}
.wlbar{display:flex;height:8px;border-radius:var(--r-pill);overflow:hidden;margin:16px 0 10px;background:var(--surface-3)}
.wlbar i{display:block;height:100%}
.wlbar .w{background:var(--lime)}
.wlbar .l{background:var(--loss)}
.wl-legend{display:flex;justify-content:space-between;font-family:var(--font-data);font-size:11.5px;letter-spacing:.05em}
.wl-legend .w{color:var(--lime)}
.wl-legend .l{color:var(--loss)}
.mini-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:10px;overflow:hidden;margin-top:18px}
.mini-facts div{background:var(--surface);padding:13px 14px}
.mini-facts .n{font-family:var(--font-display);font-weight:700;font-size:19px}
.mini-facts .l{font-size:11px;color:var(--text-3);font-weight:600;letter-spacing:.03em;margin-top:2px}

/* ── estadísticas ────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.tile{padding:20px}
.tile .label{margin-bottom:10px}
.tile-num{font-family:var(--font-display);font-size:36px;font-weight:700;letter-spacing:-.03em;line-height:1}
.tile-num small{font-size:15px;font-weight:600;color:var(--text-3);letter-spacing:0;margin-left:4px}
.tile-bar{height:5px;border-radius:var(--r-pill);background:var(--surface-3);margin-top:14px;overflow:hidden}
.tile-bar i{display:block;height:100%;background:var(--lime);border-radius:var(--r-pill)}
.tile-sub{font-family:var(--font-data);font-size:11px;letter-spacing:.06em;color:var(--text-3);margin-top:9px}

.chart-legend{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.lg{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text-2)}
.dot{width:9px;height:9px;border-radius:50%}
.dot.w{background:var(--lime)}
.dot.l{background:transparent;border:2px solid var(--loss)}
.dot.ln{width:16px;height:2px;border-radius:2px;background:var(--lime);opacity:.5}
.chart-box{margin-top:8px}
.chart-box svg{width:100%;height:auto;display:block}
.chart-note{margin-top:14px;font-size:12.5px;color:var(--text-3)}

.htable{width:100%;border-collapse:collapse}
.htable th{
  font-family:var(--font-data);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);text-align:left;padding:0 12px 12px 0;
}
.htable th:last-child,.htable td:last-child{text-align:right;padding-right:0}
.htable td{padding:12px 12px 12px 0;border-top:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.htable .dt{font-family:var(--font-data);font-size:12px;letter-spacing:.04em;color:var(--text-3);white-space:nowrap}
.htable .res-w{color:var(--lime);font-weight:800;font-size:12px;letter-spacing:.08em}
.htable .res-l{color:var(--loss);font-weight:800;font-size:12px;letter-spacing:.08em}
.htable .rk{font-family:var(--font-data);font-weight:700}

/* ── torneos ─────────────────────────────────────────────── */
.events{display:flex;flex-direction:column;gap:16px}
.event{display:flex;gap:22px;align-items:stretch}
.ev-date{
  flex:none;width:86px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:14px 8px;
}
.ev-date .dd{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.02em}
.ev-date .mm{font-family:var(--font-data);font-size:10px;letter-spacing:.16em;color:var(--text-3);text-transform:uppercase}
.ev-body{flex:1;min-width:0}
.ev-name{font-family:var(--font-display);font-weight:700;font-size:16.5px;letter-spacing:-.01em;line-height:1.3}
.ev-org{font-size:13px;color:var(--text-2);font-weight:600;margin-top:3px}
.ev-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ev-state{flex:none;align-self:flex-start}
.pill-next{
  font-family:var(--font-data);font-size:10px;font-weight:700;letter-spacing:.14em;
  padding:5px 11px;border-radius:var(--r-pill);
  background:var(--lime);color:var(--lime-ink);
}
.pill-done{
  font-family:var(--font-data);font-size:10px;font-weight:500;letter-spacing:.14em;
  padding:5px 11px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);color:var(--text-3);
}

/* ── ranking tab ─────────────────────────────────────────── */
.rank-hero{display:flex;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:24px}
.rank-hero .big{font-family:var(--font-display);font-size:88px;font-weight:700;letter-spacing:-.04em;line-height:.9;color:var(--lime)}
.rank-hero .ctx{padding-bottom:10px}
.rank-hero .ctx p{color:var(--text-2);font-size:14px;max-width:430px;margin-top:8px}

/* ── footer ──────────────────────────────────────────────── */
footer{border-top:1px solid var(--line)}
.foot{
  max-width:1180px;margin:0 auto;padding:26px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--text-3);font-size:12.5px;
}
.foot .mono{letter-spacing:.06em}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1020px){
  .grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero-inner{padding:32px 20px 30px;gap:30px}
  .hero-id{gap:18px}
  .avatar-img{width:82px;height:82px;font-size:27px}
  .hero-stats{width:100%;justify-content:flex-start}
  .hstat{padding:0 26px 0 0}
  .hstat + .hstat{padding:0 0 0 26px}
  .tiles{grid-template-columns:1fr}
  .event{gap:14px}
  .ev-date{width:70px}
  .canvas{padding:24px 20px 56px}
  .topbar{padding:16px 20px}
  .set{width:23px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}
  .avatar-ring circle{stroke-dashoffset:0}
}

/* ═══ PLAYER-1 · complementos sobre el sistema del mockup ═══ */
.avatar-img.has-foto{overflow:hidden}
.avatar-img img{width:100%;height:100%;object-fit:cover;display:block}
.hstat-num.na{color:var(--text-3)}
.delta.down{background:var(--loss-dim);color:var(--loss)}
.fchip.turqf.on{background:var(--turq);border-color:var(--turq);color:#03211d}

.card.empty{text-align:center;padding:52px 28px}
.empty-ico{width:52px;height:52px;margin:0 auto 18px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--text-3)}
.empty-ico svg{width:24px;height:24px}
.card.empty h3{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:-.01em}
.card.empty p{color:var(--text-2);font-size:14px;max-width:420px;margin:8px auto 0}
.empty-inline{color:var(--text-3);font-size:13.5px}

.empty-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;gap:6px}
.empty-mark{font-family:var(--font-display);font-weight:700;font-size:96px;letter-spacing:-.04em;color:var(--lime);line-height:1}
.empty-page h1{font-family:var(--font-display);font-size:24px;letter-spacing:-.01em;margin-top:10px}
.empty-page p{color:var(--text-2);margin-bottom:16px}
.empty-page .btn-lime{margin-top:6px}

/* ─── portada / buscador ─── */
.search-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);text-align:center;padding:84px 24px 72px}
.search-hero::before{content:"";position:absolute;width:560px;height:560px;right:-160px;top:-260px;border-radius:50%;filter:blur(90px);background:rgba(198,255,52,.09);pointer-events:none}
.search-hero::after{content:"";position:absolute;width:560px;height:560px;left:-200px;bottom:-300px;border-radius:50%;filter:blur(90px);background:rgba(50,41,47,.9);pointer-events:none}
.search-hero .kicker{position:relative;z-index:1}
.search-title{position:relative;z-index:1;font-family:var(--font-display);font-weight:700;font-size:clamp(32px,5.6vw,54px);letter-spacing:-.025em;line-height:1.05;margin-top:14px}
.search-title em{font-style:normal;color:var(--lime)}
.search-sub{position:relative;z-index:1;color:var(--text-2);font-size:15.5px;max-width:520px;margin:16px auto 0}
.search-form{position:relative;z-index:1;display:flex;gap:10px;max-width:560px;margin:30px auto 0}
.search-form input{
  flex:1;height:52px;padding:0 20px 0 48px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line-strong);
  color:var(--text);font-family:var(--font-ui);font-size:15px;font-weight:600;
  transition:border-color .16s ease-out;
}
.search-form input::placeholder{color:var(--text-3);font-weight:500}
.search-form input:focus{outline:none;border-color:var(--lime-line)}
.search-ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--text-3);pointer-events:none}
.search-form .btn-lime{margin-top:0;height:52px}
.players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px}
.pcard{display:flex;align-items:center;gap:14px;padding:16px 18px}
.pcard .pc-av{width:52px;height:52px;border-radius:50%;flex:none;overflow:hidden;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--text-2);border:2px solid var(--line-strong)}
.pcard .pc-av img{width:100%;height:100%;object-fit:cover}
.pcard .pc-b{min-width:0;flex:1}
.pcard .pc-n{font-weight:800;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .pc-m{font-family:var(--font-data);font-size:11px;letter-spacing:.06em;color:var(--text-3);margin-top:3px}
.pcard .pc-rk{flex:none;text-align:right}
.pcard .pc-rk .r{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--lime)}
.pcard .pc-rk .p{font-family:var(--font-data);font-size:10px;letter-spacing:.06em;color:var(--text-3);margin-top:2px}
.results-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 16px}

/* ═══ PLAYER-2 · el traje de las páginas de acceso ═══ */
.auth-body{min-height:100vh}
.auth-wrap{
  position:relative;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;padding:40px 20px;overflow:hidden;
}
.auth-wrap::before,.auth-wrap::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.auth-wrap::before{width:520px;height:520px;right:-160px;top:-220px;background:rgba(198,255,52,.09)}
.auth-wrap::after{width:560px;height:560px;left:-200px;bottom:-260px;background:rgba(50,41,47,.9)}
.auth-brand{position:relative;z-index:1}
.auth-card{
  position:relative;z-index:1;width:100%;max-width:420px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:32px 30px;
}
.auth-title{font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:-.015em}
.auth-sub{color:var(--text-2);font-size:14px;margin:8px 0 0}
.auth-card form{margin-top:22px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:12.5px;letter-spacing:.03em;color:var(--text-2);margin-bottom:7px}
.input{
  width:100%;height:46px;padding:0 15px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line-strong);
  color:var(--text);font-family:var(--font-ui);font-size:14.5px;font-weight:600;
  transition:border-color .16s ease-out;
}
.input::placeholder{color:var(--text-3);font-weight:500}
.input:focus{outline:none;border-color:var(--lime-line)}
.field-hint{display:block;font-size:11.5px;color:var(--text-3);margin-top:6px}
.auth-actions{margin-top:20px}
.auth-actions .btn-lime{margin-top:0;width:100%;justify-content:center}
.auth-note{
  margin:16px 0 0;padding:11px 14px;border-radius:12px;
  font-size:13px;font-weight:600;line-height:1.5;
}
.auth-note.ok{background:var(--lime-dim);border:1px solid var(--lime-line);color:var(--lime)}
.auth-note.err{background:var(--loss-dim);border:1px solid rgba(255,107,107,.35);color:var(--loss)}
.auth-links{position:relative;z-index:1;font-size:13.5px;font-weight:700}
.auth-links a{color:var(--lime)}
.auth-links a:hover{text-decoration:underline;text-underline-offset:3px}
.auth-foot{position:relative;z-index:1;font-family:var(--font-data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.cf-turnstile{margin:6px 0 2px}

/* ═══ PLAYER-2e · logo oficial + fotos blindadas ═══ */
.brand-logo{height:32px;width:auto;display:block}
.brand-chip{
  font-family:var(--font-data);font-size:10px;font-weight:700;letter-spacing:.16em;
  background:var(--lime);color:var(--lime-ink);border-radius:6px;padding:4px 8px;
}
.auth-brand .brand-logo{height:34px}
.avatar-img{position:relative}
.avatar-img .av-ini{position:absolute;inset:0;display:grid;place-items:center}
.avatar-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.pc-av{position:relative}
.pc-av .av-ini{position:absolute;inset:0;display:grid;place-items:center}
.pc-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ═══ pegamento base público ═══ */
a{text-decoration:none}
/* ╔════════════════════════════════════════════════════════════════╗
   ║  EXTENSIÓN PÚBLICA · escrita a mano, de cero · APP-CARBON v5    ║
   ║  Cada clase real del DOM del sitio público, en lenguaje player. ║
   ╚════════════════════════════════════════════════════════════════╝ */

/* ═══ SHELL ═══ */
.pub{background:var(--bg)}
.pub-app{min-height:100vh;display:flex;flex-direction:column}
.pub-wrap{width:100%;max-width:1160px;margin:0 auto;padding:22px 22px 60px;flex:1}

/* ═══ TOPBAR ═══ */
.pub-nav{background:#0f0f0f;border-bottom:1px solid var(--line);padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.pub-nav .logo{display:flex;align-items:center;gap:10px}
.pub-nav-logo{height:28px;width:auto;display:block}
.pub-nav .mail,.pub-nav a{color:var(--text-3);font-size:12.5px;font-weight:600;text-decoration:none}
.pub-nav a:hover{color:var(--text-2)}

/* ═══ HÉROE DEL TORNEO ═══ */
.pub-hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;
  padding:26px 28px 24px;margin-bottom:18px;
  background:
    radial-gradient(560px 280px at 90% -60px, rgba(198,255,52,.10), transparent 60%),
    radial-gradient(620px 320px at -60px 130%, rgba(50,41,47,.95), transparent 60%),
    var(--surface)}
.pub-hero h1{font-family:var(--font-display);font-size:clamp(24px,4vw,34px);
  letter-spacing:-.02em;line-height:1.15;margin:0;color:var(--text)}
.pub-h1-link{color:inherit;text-decoration:none}
.pub-h1-link:hover{color:inherit}
.pub-h1-link:hover .pub-h1-ico{transform:translateY(-1px)}
.pub-h1-ico{color:var(--lime);font-size:.65em;vertical-align:middle;margin-left:6px;
  transition:transform .15s ease-out;display:inline-block}
.pub-hero-sub{color:var(--text-2);font-size:13.5px;margin-top:6px;font-weight:500}
.pub-hero-bot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.pub-hero-bot .cod,.pub-cat-pill{display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em;
  background:rgba(255,255,255,.04);border:1px solid var(--line-strong);color:var(--text-2)}
.pub-hero-bot .cod iconify-icon,.pub-cat-pill iconify-icon{color:var(--lime);font-size:14px}
.pub-hero.compacto{padding:22px 26px 20px}

/* menú Acciones */
.pub-acc{position:relative;margin-left:auto}
.pub-acc-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-strong);color:var(--text);
  font-family:var(--font-ui);font-weight:700;font-size:13px;cursor:pointer;
  transition:border-color .15s,transform .12s}
.pub-acc-btn:hover{border-color:var(--text-3)}
.pub-acc-btn:active{transform:scale(.97)}
.pub-acc-menu,.pub-acc-submenu{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;z-index:60;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:14px;
  padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.pub-acc-item,.pub-acc-subitem{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:9px;color:var(--text);font-size:13.5px;font-weight:600;text-decoration:none;cursor:pointer;
  background:transparent;border:0;width:100%;text-align:left;font-family:var(--font-ui)}
.pub-acc-item iconify-icon,.pub-acc-subitem iconify-icon{color:var(--text-3);font-size:16px}
.pub-acc-item:hover,.pub-acc-subitem:hover{background:var(--lime-dim);color:var(--lime)}
.pub-acc-item:hover iconify-icon{color:var(--lime)}
.pub-acc-sub{border-top:1px solid var(--line);margin-top:5px;padding-top:5px}
.pub-acc-subhead{padding:7px 12px 3px;font-family:var(--font-data);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.pub-acc-caret{margin-left:auto;color:var(--text-3)}
.pub-acc-parent[aria-expanded="true"] .pub-acc-caret{transform:rotate(180deg)}

/* ═══ TELÓN: aviso + cuenta regresiva + CTA ═══ */
.pub-alert-warn{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:rgba(252,211,77,.06);border:1px solid rgba(252,211,77,.28);border-radius:14px;
  padding:14px 18px;margin:0 0 18px;color:#fcd34d;font-weight:600;font-size:13.5px}
.pub-alert-warn .ico{font-size:20px;color:#fcd34d;flex-shrink:0}
.pub-alert-clock{display:inline-flex;align-items:center;gap:7px;margin-left:auto}
.pub-alert-clock .lb{font-family:var(--font-data);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);margin-right:2px}
.pub-alert-clock .u{display:inline-flex;align-items:baseline;gap:2px;
  background:var(--surface-3);border:1px solid var(--line-strong);border-radius:9px;
  padding:5px 9px;color:var(--text-3);font-size:10px;font-weight:700}
.pub-alert-clock .u b{font-family:var(--font-data);font-variant-numeric:tabular-nums;
  font-size:15px;color:var(--text);font-weight:700}
.pub-alert-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  background:var(--lime);border:1px solid var(--lime);color:var(--lime-ink);
  font-family:var(--font-ui);font-weight:800;font-size:13px;cursor:pointer;transition:transform .12s,background .15s}
.pub-alert-btn:hover{background:#d3ff5e;border-color:#d3ff5e}
.pub-alert-btn:active{transform:scale(.97)}
.pub-alert-btn .n{background:rgba(19,22,0,.16);border-radius:999px;padding:2px 9px;
  font-family:var(--font-data);font-size:12px}
.mb-sh{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:34px 28px;
  text-align:center;margin-bottom:18px}
.mb-sh-txt{color:var(--text-2);font-size:14px;max-width:560px;margin:0 auto;line-height:1.6}

/* ═══ NAVEGACIÓN DE SECCIONES + BUSCADOR + REGRESAR ═══ */
.pub-navrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pub-tabs{display:flex;gap:9px;flex-wrap:wrap}
.pub-tabs .btn-myballs-outline,.pub-tabs .btn-myballs-primary{
  display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:999px;
  font-family:var(--font-ui);font-weight:700;font-size:13.5px;text-decoration:none;
  transition:border-color .15s,color .15s,transform .12s;box-shadow:none}
.pub-tabs .btn-myballs-outline{background:transparent;border:1px solid var(--lime-line);color:var(--text-2)}
.pub-tabs .btn-myballs-outline:hover{border-color:var(--lime);color:var(--text)}
.pub-tabs .btn-myballs-outline:active{transform:scale(.97)}
.pub-tabs .btn-myballs-primary{background:var(--lime);border:1px solid var(--lime);color:var(--lime-ink)}
.pub-tabs .btn-myballs-primary iconify-icon{color:var(--lime-ink)}
.pub-buscar{display:flex;gap:8px;margin-left:auto;align-items:center}
.pub-buscar-wrap{position:relative}
.pub-buscar input[type=search]{height:40px;min-width:210px;padding:0 16px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--lime-line);color:var(--text);
  font-family:var(--font-ui);font-size:13px;outline:none;transition:border-color .15s}
.pub-buscar input[type=search]::placeholder{color:var(--text-3)}
.pub-buscar input[type=search]:focus{border-color:var(--lime)}
.pub-buscar button{height:40px;padding:0 20px;border-radius:999px;background:var(--lime);
  border:1px solid var(--lime);color:var(--lime-ink);font-family:var(--font-ui);
  font-weight:800;font-size:13.5px;cursor:pointer;transition:transform .12s,background .15s}
.pub-buscar button:hover{background:#d3ff5e}
.pub-buscar button:active{transform:scale(.97)}
.pub-nav-sug{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:50;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:12px;
  padding:5px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.pub-nav-sug a,.pub-nav-sug .it{display:flex;align-items:center;gap:9px;padding:9px 11px;
  border-radius:8px;color:var(--text);font-size:13px;font-weight:600;text-decoration:none}
.pub-nav-sug a:hover{background:var(--lime-dim);color:var(--lime)}
.pub-back-btn,.pub-pdf-btn,.pub-seed-btn,.pub-rolbtn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  background:transparent;border:1px solid var(--lime-line);color:var(--text-2);
  font-family:var(--font-ui);font-weight:700;font-size:12.5px;text-decoration:none;cursor:pointer;
  transition:border-color .15s,color .15s,transform .12s}
.pub-back-btn:hover,.pub-pdf-btn:hover,.pub-seed-btn:hover,.pub-rolbtn:hover{
  border-color:var(--lime);color:var(--text)}
.pub-back-btn:active,.pub-rolbtn:active{transform:scale(.97)}
.pub-pdf-btn iconify-icon,.pub-seed-btn iconify-icon,.pub-rolbtn iconify-icon{color:var(--lime)}

/* ═══ LOS 8 DÍAS ═══ */
.pub-dias{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.pub-dia{--dc:var(--lime);display:inline-flex;align-items:baseline;gap:5px;
  padding:8px 14px;border-radius:999px;text-decoration:none;
  font-family:var(--font-data);font-weight:700;letter-spacing:.04em;
  background:color-mix(in srgb, var(--dc) 12%, #171717);
  color:color-mix(in srgb, var(--dc) 80%, #fff);
  border:1px solid color-mix(in srgb, var(--dc) 36%, transparent);
  transition:transform .12s,border-color .15s}
.pub-dia:hover{transform:translateY(-2px);border-color:var(--dc);color:color-mix(in srgb, var(--dc) 85%, #fff)}
.pub-dia .ds,.pub-dia .dm{font-size:10px;text-transform:uppercase;opacity:.75}
.pub-dia .dn{font-size:15px}
.pub-dia.on{background:var(--dc);color:var(--lime-ink);border-color:var(--dc)}
.pub-dia.on .ds,.pub-dia.on .dm{opacity:.8}
.pub-dia-todos .dtodos{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.dia1{--dc:#99E1D9}.dia2{--dc:#C6FF34}.dia3{--dc:#FFB55E}.dia4{--dc:#8AB8FF}
.dia5{--dc:#FF9ECB}.dia6{--dc:#B79CFF}.dia7{--dc:#FF8A7A}.dia8{--dc:#7ED957}

/* ═══ ENCABEZADO DE FECHA ═══ */
.pub-dia-h{--dc:var(--lime);display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:999px;margin:16px 0 12px;font-weight:800;font-size:13px;
  background:color-mix(in srgb, var(--dc) 14%, #171717);
  color:color-mix(in srgb, var(--dc) 72%, #fff);
  border:1px solid color-mix(in srgb, var(--dc) 38%, transparent)}
.pub-dia-h iconify-icon{font-size:15px}

/* ═══ EL ÁTOMO: TARJETA DE PARTIDO (.scv) ═══ */
.pub-res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;margin-bottom:8px}
.scv{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;transition:border-color .15s}
.scv:hover{border-color:var(--line-strong)}
.scv-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.scv-meta .r-pill{font-family:var(--font-data);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 10px;border-radius:6px;
  background:var(--lime-dim);color:var(--lime)}
/* La cancha se identifica por SU PROPIA CLASE, no por su lugar en el renglon.
   Historia de esta regla, que vale la pena no repetir:
     1. decia :last-child            -> se rompio al poner la hora al final
     2. paso a .r-pill + .r-pill     -> se rompio al poner la cancha primera
   Las dos describian una posicion cuando lo que querian decir era "la cancha".
   Ahora lo dice. (2026-08-01) */
.scv-meta .r-pill-cancha{background:var(--turq-dim);color:var(--turq)}
/* variante SIN píldora (vistas de horarios): hora y categoría·ronda en mono */
.scv-meta .h{font-family:var(--font-data);font-variant-numeric:tabular-nums;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:3px 10px;
  border-radius:999px;background:var(--lime-dim);border:1px solid var(--lime-line);
  color:var(--lime);display:inline-flex;align-items:center;flex-shrink:0}
/* partido en curso: píldora lime RELLENA, manda sobre la hora (que va con borde) */
.pubm-live{font-family:var(--font-data);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;
  background:var(--lime);color:var(--lime-ink);
  display:inline-flex;align-items:center;flex-shrink:0}
.scv-meta .r:not(.r-pill){font-family:var(--font-data);font-size:11.5px;font-weight:500;
  letter-spacing:.01em;color:var(--text-3)}
.scv-body{display:flex;align-items:stretch;gap:12px}
.scv-names{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-around;gap:4px}
.scv-p{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;min-height:32px}
.scv-p .nm{flex:1;min-width:0;font-weight:600;font-size:14px;color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scv-p .nm div{overflow:hidden;text-overflow:ellipsis}
.scv-p.win{background:var(--lime-dim)}
.scv-p.win .nm{font-weight:800;color:#fff}
.scv-p .chk{color:var(--lime);font-size:15px;display:inline-flex;flex-shrink:0}
.scv-champ{font-size:14px;flex-shrink:0}
.scv-sets{display:flex;gap:10px;align-items:stretch}
.scv-set{display:flex;flex-direction:column;justify-content:space-around;gap:4px}
.scv-set .c{font-family:var(--font-data);font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:700;text-align:center;min-width:20px;
  min-height:32px;display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.scv-set .c.g{color:var(--text);font-weight:800}
.scv-set .c sup{font-size:9px;color:var(--text-3);margin-left:1px;font-weight:600}
.scv .sep{color:var(--text-3)}

/* ═══ SEMBRADOS (modal lista) ═══ */
.pub-seed-row{display:flex;align-items:center;gap:12px;padding:9px 6px;border-bottom:1px solid var(--line)}
.pub-seed-row:last-child{border-bottom:0}
.pub-seed-n{font-family:var(--font-data);font-weight:700;color:var(--lime);
  background:var(--lime-dim);border-radius:8px;min-width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.pub-seed-nm{color:var(--text);font-weight:700;font-size:14px}

/* ═══ JUGADORES ═══ */
.jl-row{display:flex;align-items:center;gap:13px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:11px 15px;margin-bottom:8px;
  transition:border-color .15s}
.jl-row:hover{border-color:var(--line-strong)}
.jl-num{font-family:var(--font-data);color:var(--text-3);min-width:22px;font-size:13px;text-align:right}
.jl-ava{position:relative;width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:2px solid var(--lime-line);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--text-2)}
.jl-seed{position:absolute;top:-5px;right:-7px;background:var(--turq);color:#03211d;
  font-family:var(--font-data);font-size:10px;font-weight:700;border-radius:999px;
  min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--bg)}
.jl-nm{flex:1;min-width:0;color:var(--text);font-weight:800;font-size:14.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jl-chips{display:flex;gap:6px;flex-shrink:0}
.jl-chip{font-family:var(--font-data);font-size:10.5px;letter-spacing:.04em;
  padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.04);
  border:1px solid var(--line-strong);color:var(--text-2)}
.jl-chip.g{color:var(--text-2)}
.gr-bd-btn{width:32px;height:32px;border-radius:999px;background:transparent;
  border:1px solid var(--line-strong);color:var(--text-3);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.gr-bd-btn:hover{border-color:var(--lime);color:var(--lime)}
.jl-bd{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:13px 16px;margin:-4px 0 10px 34px}
.jl-grp-h{font-family:var(--font-data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);display:flex;align-items:center;gap:7px;margin:10px 0 7px}
.jl-grp-h:first-child{margin-top:0}
.jl-grp-h iconify-icon{color:var(--lime)}
.jl-ronda{color:var(--text-3);font-size:11.5px;font-family:var(--font-data);margin-bottom:3px}
.gr-bd-wrap{display:flex;flex-direction:column;gap:4px}
.gr-bd-match{padding:7px 0;border-bottom:1px solid var(--line)}
.gr-bd-match:last-child{border-bottom:0}
.gr-bd-line{display:flex;align-items:center;gap:9px;padding:3px 8px;border-radius:7px;
  color:var(--text-2);font-size:13px;font-weight:600}
.gr-bd-line.win{background:var(--lime-dim);color:var(--text);font-weight:700}
.gr-bd-line .num{font-family:var(--font-data);margin-left:auto;color:var(--text-3)}
.gr-bd-line.win .num{color:var(--text)}

/* ═══ BRACKET (cuadros) ═══ */
.rg-cell{position:relative}
.rg-match{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:4px 6px;transition:border-color .15s}
.rg-match:hover{border-color:var(--line-strong)}
.rg-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;min-height:36px}
.rg-row + .rg-row{border-top:1px solid var(--line)}
.rg-row.win{background:var(--lime-dim)}
.rg-ava{width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:1px solid var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:10px;color:var(--text-3)}
.rg-nm{flex:1;min-width:0;font-weight:600;font-size:13px;color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-row.win .rg-nm{color:#fff;font-weight:800}
.rg-seed{font-family:var(--font-data);font-size:10.5px;color:var(--text-3)}
.rg-chk{color:var(--lime);display:inline-flex;font-size:14px}
.rg-sets{display:flex;gap:7px;margin-left:2px}
.rg-g{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:13.5px;
  font-weight:800;color:var(--text);min-width:14px;text-align:center}
.rg-g.pierde{color:var(--text-3);font-weight:700}
.rg-g sup{font-size:8.5px;color:var(--text-3)}
/* conectores de la llave */
.rg-cell.haynext > .rg-match::after{content:"";position:absolute;top:50%;right:-15px;
  width:15px;height:1px;background:#2f2f2f}
.rg-cell.colprev > .rg-match::before{content:"";position:absolute;top:50%;left:-15px;
  width:15px;height:1px;background:#2f2f2f}
/* minimapa de rondas */
.rg-mr{display:flex;gap:8px;margin:4px 0 18px;overflow-x:auto;padding-bottom:4px}
.rg-mr-box{flex:1;min-width:72px;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:9px 8px;display:flex;flex-direction:column;gap:4px;cursor:pointer;
  transition:border-color .15s,background .15s}
.rg-mr-box:hover{border-color:var(--line-strong)}
.rg-mr-sk{height:3px;border-radius:2px;background:var(--line-strong)}
.rg-mr-t{font-family:var(--font-data);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);text-align:center;margin-top:2px}
.rg-mr-box.act,.rg-mr-box.on{background:var(--lime);border-color:var(--lime)}
.rg-mr-box.act .rg-mr-sk,.rg-mr-box.on .rg-mr-sk{background:rgba(19,22,0,.45)}
.rg-mr-box.act .rg-mr-t,.rg-mr-box.on .rg-mr-t{color:var(--lime-ink)}
.rg-mr-bo{display:flex;gap:8px}

/* ═══ GRUPOS (round robin) ═══ */
.lg-bloque{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;margin-bottom:14px}
.lg-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.lg-cat,.lg-rama{font-family:var(--font-display);font-weight:700;color:var(--text);font-size:15px}
.lg-rama{color:var(--text-2);font-size:13px}
.lg-cuerpo{display:flex;flex-direction:column;gap:6px}
.lg-par{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  color:var(--text-2);font-weight:600;font-size:13.5px;border-bottom:1px solid var(--line)}
.lg-par:last-child{border-bottom:0}
/* Estas tres reglas apuntaban a .lg-par, pero .ct y .fl viven en .lg-cab y
   .tt y .nn en .lg-rama. Reapuntadas a su contenedor real (2026-07-31). */
.lg-cab .ct,.lg-rama .nn{font-family:var(--font-data);color:var(--text-3)}
.lg-cab .fl{margin-left:auto}
.lg-rama .tt{color:var(--text)}

/* ═══ CATEGORÍAS + FILTRO DE GÉNERO ═══ */
.pub-catfilter{display:flex;gap:9px;flex-wrap:wrap;margin:4px 0 16px}
.pub-catfilter button{--pc:var(--turq);display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;cursor:pointer;
  font-family:var(--font-ui);font-weight:800;font-size:13px;
  background:color-mix(in srgb, var(--pc) 12%, #171717);
  color:color-mix(in srgb, var(--pc) 78%, #fff);
  border:1px solid color-mix(in srgb, var(--pc) 36%, transparent);
  transition:transform .12s}
.pub-catfilter button:active{transform:scale(.97)}
.pub-catfilter button.active{background:var(--pc);color:var(--lime-ink);border-color:var(--pc)}
.pub-catfilter .cnt{font-family:var(--font-data);font-size:11px;opacity:.85}
.pub-catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:13px}
.pub-catcard{--cc:var(--turq);display:flex;align-items:center;gap:13px;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--cc);
  border-radius:14px;padding:15px 16px;text-decoration:none;
  transition:transform .15s,border-color .15s}
.pub-catcard:hover{transform:translateY(-2px);border-color:var(--line-strong);border-left-color:var(--cc)}
.pub-catcard-ico{width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:color-mix(in srgb, var(--cc) 14%, #171717);color:var(--cc);
  display:inline-flex;align-items:center;justify-content:center;font-size:19px}
.pub-catcard-body{flex:1;min-width:0}
.pub-catcard-body b{display:block;color:var(--text);font-family:var(--font-display);
  font-weight:700;font-size:14.5px;letter-spacing:-.01em;line-height:1.25}
.pub-catcard-body small{color:var(--text-2);font-size:12px;font-weight:500}
.pub-catcard-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;color:var(--text-3)}
.pub-catcard-meta .np{font-family:var(--font-data);font-size:10.5px;letter-spacing:.04em;
  padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.04);
  border:1px solid var(--line-strong);color:var(--text-2)}

/* ═══ COMPARTIR + MODAL ═══ */
.pub-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.pub-modal-velo{position:absolute;inset:0;background:rgba(0,0,0,.74)}
.pub-modal-card{position:relative;width:100%;max-width:420px;background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:16px;padding:22px;
  box-shadow:0 26px 70px rgba(0,0,0,.6)}
.pub-modal-h{font-family:var(--font-display);font-size:18px;color:var(--text);margin:0 0 4px}
.pub-modal-sub{color:var(--text-2);font-size:13px;margin-bottom:14px}
.pub-modal-body{display:flex;flex-direction:column;gap:8px}
.pub-modal-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:999px;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-2);cursor:pointer}
.pub-share-op{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  background:var(--surface-3);border:1px solid var(--line);color:var(--text);
  text-decoration:none;cursor:pointer;transition:border-color .15s;width:100%;font-family:var(--font-ui)}
.pub-share-op:hover{border-color:var(--line-strong)}
.pub-share-ico{width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:var(--lime-dim);color:var(--lime);
  display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.pub-share-op.wa .pub-share-ico{background:rgba(37,211,102,.14);color:#4ade80}
.pub-share-txt{font-weight:700;font-size:13.5px}
.pub-share-go{margin-left:auto;color:var(--text-3)}

/* ═══ PATROCINADORES ═══ */
.pub-patro-pista{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;margin:22px 0 8px;text-align:center;overflow:hidden}
.pub-patro-t{font-family:var(--font-data);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:15px}
.pub-patro-set{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.pub-patro-set img{background:#ffffff;border-radius:12px;padding:10px 14px;height:64px;
  width:auto;max-width:150px;object-fit:contain}

/* ═══ PIE ═══ */
.pub-foot{border-top:1px solid var(--line);padding:26px 22px 34px;text-align:center;
  color:var(--text-3);font-size:12.5px;margin-top:auto}
.pub-foot b{color:var(--text-2)}
.pub-foot a{color:var(--lime);font-weight:700;text-decoration:none}
.pub-foot a:hover{color:#d3ff5e}
.pub-foot-l1{margin-bottom:4px}

/* ═══ ÍNDICE (listado de torneos) ═══ */
.pub-sec-t{display:flex;align-items:center;gap:8px;margin:22px 0 10px;
  font-family:var(--font-data);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3)}
.pub-sec-t iconify-icon{color:var(--lime)}
.pub-tcard{display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:15px 17px;margin-bottom:10px;
  text-decoration:none;transition:transform .15s,border-color .15s}
.pub-tcard:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.pub-tcard .ic{width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:var(--lime-dim);color:var(--lime);
  display:inline-flex;align-items:center;justify-content:center;font-size:20px}
.pub-tcard .bd{flex:1;min-width:0}
.pub-tcard .nom{color:var(--text);font-family:var(--font-display);font-weight:700;
  font-size:15.5px;letter-spacing:-.01em}
.pub-tcard .met{color:var(--text-2);font-size:12.5px;margin-top:2px}
.pub-tcard .chev{color:var(--text-3);flex-shrink:0}
.pub-hero-logo{height:42px;width:auto;display:block}
.pub-hero .meta{display:flex;gap:8px;color:var(--text-2);font-size:13px;margin-top:8px}

/* ═══ VACÍOS Y AVISOS ═══ */
.pub-vacio,.lg-vacio,.dx-empty{background:var(--surface);border:1px dashed var(--line-strong);
  border-radius:14px;padding:26px;text-align:center;color:var(--text-3);font-size:13.5px}
.pub-lluvia{display:flex;align-items:center;gap:12px;background:rgba(252,211,77,.07);
  border:1px solid rgba(252,211,77,.3);border-radius:14px;padding:13px 17px;
  color:#fcd34d;font-weight:600;font-size:13.5px;margin-bottom:16px}
.wo,.rojo{color:var(--loss)}

/* ═══ RESPONSIVE ═══ */
@media (max-width:760px){
  .pub-wrap{padding:16px 14px 50px}
  .pub-hero{padding:20px 18px}
  .pub-hero-bot{gap:8px}
  .pub-acc{margin-left:0;width:100%}
  .pub-acc-btn{width:100%;justify-content:center}
  .pub-navrow{gap:10px}
  .pub-buscar{margin-left:0;width:100%}
  .pub-buscar-wrap{flex:1}
  .pub-buscar input[type=search]{width:100%;min-width:0}
  .pub-alert-clock{margin-left:0}
  .pub-res-grid{grid-template-columns:1fr}
  .pub-dias{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
  .pub-dia{flex-shrink:0;scroll-snap-align:start}
  .jl-bd{margin-left:12px}
}

/* ═══ COBERTURA TOTAL · segunda pasada ═══ */

/* franja de cancha (HOY): .pub-courts > .pgc > .pgc-h + partidos */
.pub-courts{display:flex;flex-direction:column;gap:16px}
.pgc{background:transparent}
.pgc-h{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--lime);border-radius:12px;
  padding:11px 16px;margin-bottom:10px}
.pgc-h .n{display:flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-weight:700;font-size:15px;color:var(--text)}
.pgc-h .n iconify-icon{color:var(--lime);font-size:17px}
.pgc-badge{font-family:var(--font-data);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.04);
  border:1px solid var(--line-strong);color:var(--text-2);display:inline-flex;align-items:center;gap:5px}
.pgc-badge.luz{background:var(--lime-dim);border-color:var(--lime-line);color:var(--lime)}
.pgc-badge.off{opacity:.6}
.pgc-b{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.pgc-b0{border-left-color:var(--turq)}

/* bracket: contenedor, navegación, minimapa, campeón */
.rg-grid{display:grid;gap:14px 30px;align-items:center;overflow-x:auto;padding:6px 2px 14px}
.rg-nav{display:flex;align-items:center;gap:10px;margin:4px 0 14px;flex-wrap:wrap}
.rg-ct{display:inline-flex;align-items:center;padding:8px 18px;border-radius:999px;
  font-family:var(--font-ui);font-weight:800;font-size:12.5px;letter-spacing:.04em;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-2)}
.rg-ct.act,.rg-ct.colact{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.rg-arrow{width:36px;height:36px;border-radius:999px;background:transparent;
  border:1px solid var(--line-strong);color:var(--text-2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.rg-arrow:hover{border-color:var(--lime);color:var(--lime)}
.rg-map{display:flex;gap:8px;margin:2px 0 16px;overflow-x:auto;padding-bottom:4px}
.rg-champ{background:linear-gradient(90deg, rgba(198,255,52,.12), rgba(198,255,52,.04))}
.rg-champ .rg-nm{color:#fff;font-weight:800}
.rg-instub .rg-nm,.rg-instub{color:var(--text-3);font-style:italic}
.rg-cell.prev .rg-match{opacity:.92}
.entra{animation:cbEntra .25s ease-out}
@keyframes cbEntra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* barra de secciones (contenedor) */
.pub-secbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}

/* sugerencias del buscador */
.sg{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
.sg:hover{background:var(--lime-dim);color:var(--lime)}
.sg-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:1px solid var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:10px;font-weight:700;color:var(--text-3)}
.sg-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* compartir (tarjeta) + QR */
.pub-share-card{background:var(--surface-2);border:1px solid var(--line-strong);border-radius:16px;padding:20px}
.pub-share-body{display:flex;flex-direction:column;gap:8px}
.pub-share-sub{color:var(--text-3);font-size:11.5px}
.pub-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 0}
.pub-qr-card{background:#ffffff;border-radius:16px;padding:14px;display:inline-flex}
.pub-qr-card img,.pub-qr-card svg{display:block;border-radius:6px}
.pub-qr-dl{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  background:var(--lime);border:1px solid var(--lime);color:var(--lime-ink);
  font-weight:800;font-size:13px;cursor:pointer;text-decoration:none}
.pub-qr-dl:hover{background:#d3ff5e}

/* grupos: buscador + segmentos por grupo (acento del ciclo) */
.lg-buscar{display:flex;gap:8px;margin-bottom:12px}
.lg-buscar input{flex:1;height:38px;padding:0 15px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text);font-size:13px}
.jl-bd.seg{border-left:3px solid var(--line-strong)}
.seg1{border-left-color:#99E1D9}.seg2{border-left-color:#C6FF34}.seg3{border-left-color:#FFB55E}
.seg4{border-left-color:#8AB8FF}.seg5{border-left-color:#FF9ECB}.seg6{border-left-color:#B79CFF}
.seg7{border-left-color:#FF8A7A}.seg8{border-left-color:#7ED957}
.jl-champ{font-size:14px;flex-shrink:0}
.mb-sh-grupo{margin-top:14px;color:var(--text-2)}
.pub-acc-ins .pub-acc-item iconify-icon{color:var(--lime)}
.pub-foot-l2{color:var(--text-3)}
.pub-foot-l2 a{color:var(--text-2)}

/* ═══ PASADA 3 · FASE DE GRUPOS (round robin) ═══ */
.gr-clasif{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;margin-bottom:16px}
.gr-clasif-h{display:flex;align-items:center;gap:9px;font-family:var(--font-data);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.gr-clasif-h iconify-icon{color:var(--lime);font-size:15px}
.gr-clasif-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.gr-clasif-card{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.gr-clasif-gnom{display:flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-weight:700;font-size:13.5px;color:var(--text);margin-bottom:9px}
.gr-clasif-badge{--gc:var(--lime);width:24px;height:24px;border-radius:8px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-data);font-size:11px;font-weight:700;
  background:color-mix(in srgb, var(--gc) 18%, #171717);color:var(--gc);
  border:1px solid color-mix(in srgb, var(--gc) 45%, transparent)}
.gr-clasif-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--text-2)}
.gr-clasif-row.es-clasif{background:var(--lime-dim);color:var(--text)}
.gr-clasif-pos{font-family:var(--font-data);font-weight:700;color:var(--lime);min-width:16px}
.gr-clasif-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-clasif-pts{font-family:var(--font-data);font-weight:800;color:var(--text)}
.gr-clasif-pts small{color:var(--text-3);font-weight:600}
.gr-clasif-empty{color:var(--text-3);font-size:12.5px;font-style:italic;padding:4px 2px}

.gr-grid{display:flex;flex-direction:column;gap:18px}
.gr-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.gr-card-head{--gc:var(--lime);display:flex;align-items:center;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--gc) 13%, #171717)!important}
.gr-card-letra{width:30px;height:30px;border-radius:9px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:14px;
  background:var(--gc);color:var(--lime-ink)}
.gr-card-nom{font-family:var(--font-display);font-weight:700;font-size:15px;
  color:color-mix(in srgb, var(--gc) 65%, #fff)}
.gr-card-meta{margin-left:auto;font-family:var(--font-data);font-size:11px;
  letter-spacing:.06em;color:color-mix(in srgb, var(--gc) 55%, #cfcfcf)}
.gr-card-body{padding:14px 18px 16px}
.gr-card-body table{width:100%;border-collapse:collapse;margin-bottom:6px}
.gr-card-body thead th{font-family:var(--font-data);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);font-weight:600;
  padding:7px 9px;text-align:center;border-bottom:1px solid var(--line-strong)}
.gr-card-body thead th.l,.gr-card-body thead th:nth-child(2){text-align:left}
.gr-card-body td{padding:10px 9px;text-align:center;font-family:var(--font-data);
  font-variant-numeric:tabular-nums;font-size:13px;color:var(--text-2);
  border-bottom:1px solid var(--line)}
.gr-card-body tr:last-child td{border-bottom:0}
.gr-card-body td.l{text-align:left;font-family:var(--font-ui)}
.gr-frow{transition:background .15s}
.gr-frow:hover td{background:rgba(255,255,255,.02)}
.gr-frow td.pos{font-weight:700;color:var(--text-3);width:34px}
.gr-frow.clasif td{background:var(--lime-dim)}
.gr-frow.clasif td.pos{color:var(--lime);font-weight:800}
.gr-frow.clasif td:first-child{border-radius:8px 0 0 8px}
.gr-frow.clasif td:last-child{border-radius:0 8px 8px 0}
.gr-nm-cell{display:flex;align-items:center;gap:8px}
.gr-nm-txt div{font-weight:700;color:var(--text);font-size:13.5px;line-height:1.3}
.gr-nm-txt div + div{color:var(--text-2);font-weight:600}
.gr-frow td:last-child{width:44px}
.gr-ronda-h,.gr-rh{display:flex;align-items:center;gap:8px;margin:14px 0 9px;
  font-family:var(--font-data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.gr-ronda-h iconify-icon,.gr-rh iconify-icon{color:var(--lime)}
@media (max-width:640px){.hide-sm{display:none}}

/* ═══ PASADA 3 · CARRUSEL DE PATROCINADORES (marquee carbón) ═══ */
.pub-patro{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:18px 0 16px;margin:22px 0 8px;text-align:center;overflow:hidden}
.pub-patro .pub-patro-t{margin-bottom:14px}
.pub-patro-pista{position:relative;display:flex;overflow:hidden;
  background:transparent;border:0;border-radius:0;padding:0;margin:0}
.pub-patro-pista::before,.pub-patro-pista::after{content:"";position:absolute;top:0;bottom:0;
  width:64px;z-index:2;pointer-events:none}
/* PATROFIX-1: en pantallas chicas los degradados de 64px se comian mas
   de un tercio del carril y los logos se veian cortados. */
@media (max-width:760px){
  .pub-patro-pista::before,.pub-patro-pista::after{width:26px}
}
.pub-patro-pista::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.pub-patro-pista::after{right:0;background:linear-gradient(270deg,var(--surface),transparent)}
/* PATROFIX-1 (2026-08-18): cada set mide AL MENOS lo que el carril.
   Antes usaba min-width:max-content: si los logos eran chicos (o la
   escala baja), un set quedaba mas angosto que el carril y, como cada
   set se desplaza el 100% de SU PROPIO ancho, el carrusel se quedaba
   sin contenido a la vista -> el hueco que se veia en el celular.
   Con min-width:100% dos sets siempre cubren el doble del carril, asi
   que nunca hay hueco; y space-around reparte los logos cuando sobra
   espacio, en vez de amontonarlos a la izquierda. */
.pub-patro-set{display:flex;align-items:center;gap:16px;padding:0 8px;
  flex-shrink:0;min-width:100%;flex-wrap:nowrap;justify-content:space-around;
  animation:cbPatro 32s linear infinite}
.pub-patro-pista:hover .pub-patro-set{animation-play-state:paused}
@keyframes cbPatro{to{transform:translateX(-100%)}}
.pub-patro.quieto .pub-patro-set{animation:none;min-width:0;width:100%;
  flex-wrap:wrap;justify-content:center}
.pub-patro.quieto .pub-patro-pista::before,.pub-patro.quieto .pub-patro-pista::after{display:none}
@media (prefers-reduced-motion:reduce){.pub-patro-set{animation:none;flex-wrap:wrap;justify-content:center;min-width:0;width:100%}}

/* ═══ PASADA 4 · MINIMAPA DEL CUADRO (composición + líneas lime) ═══ */
.rg-map{display:flex;gap:12px;align-items:flex-start;margin:6px 0 18px;
  overflow-x:auto;padding-bottom:6px}
.rg-mr{display:flex;flex-direction:column;gap:6px;align-items:stretch;
  min-width:82px;flex-shrink:0;text-decoration:none;margin:0;overflow:visible;padding:0}
.rg-mr-t{order:0;font-family:var(--font-data);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);text-align:center;margin:0;white-space:nowrap}
.rg-mr.on .rg-mr-t{color:var(--lime);font-weight:700}
.rg-mr-box{display:flex;flex-direction:column;gap:5px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:9px;padding:9px 10px;
  transition:border-color .15s,transform .12s}
.rg-mr:hover .rg-mr-box{border-color:var(--lime-line);transform:translateY(-2px)}
.rg-mr-sk{display:flex;flex-direction:column;gap:2.5px;background:transparent;height:auto;border-radius:0}
.rg-mr-sk span{display:block;height:2.5px;border-radius:2px;background:rgba(198,255,52,.32)}
.rg-mr:hover .rg-mr-sk span{background:rgba(198,255,52,.5)}
.rg-mr.on .rg-mr-box{background:var(--lime);border-color:var(--lime)}
.rg-mr.on .rg-mr-sk span{background:rgba(19,22,0,.5)}

/* píldoras de ronda: su clase real es .on (+ vecinas .next) */
.rg-ct.on{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.rg-ct.next{color:var(--text-2)}
.rg-arrow.off{opacity:.35;pointer-events:none}

/* ═══ PASADA 5 · minimapa a lo ancho (justificado horizontal) ═══ */
.rg-map{gap:14px;width:100%}
.rg-mr{flex:1 1 0;min-width:96px}

/* ═══ PASADA 6 · píldoras de ronda a lo ancho + estados explícitos ═══ */
.rg-nav{width:100%;gap:10px}
.rg-nav .rg-ct{flex:1 1 0;display:flex;align-items:center;justify-content:center;
  text-align:center;background:transparent;transition:background .15s,color .15s,border-color .15s}
.rg-nav .rg-arrow{flex:0 0 auto}
.rg-ct.prev,.rg-ct.next{background:transparent;color:var(--text-2);border-color:var(--line-strong)}
.rg-ct.prev:hover,.rg-ct.next:hover{color:var(--text);border-color:var(--text-3)}
.rg-ct.on{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PASADA 7 · CAPÍTULO MÓVIL — swipe, dots y adiós scrollbars   ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ── scrollbars invisibles en pistas horizontales (el scroll sigue vivo) ── */
.rg-map,.pub-dias,.pubw-scroll,.rg-grid,.rg-mr-bo{
  scrollbar-width:none;-ms-overflow-style:none}
.rg-map::-webkit-scrollbar,.pub-dias::-webkit-scrollbar,
.pubw-scroll::-webkit-scrollbar,.rg-grid::-webkit-scrollbar{display:none}

/* ── widget de páginas deslizables (pubw): pista + dots ── */
.pubw-wrap{position:relative}
.pubw-scroll{display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.pubw-scroll .brk-col{flex:0 0 100%;min-width:100%;scroll-snap-align:start}
.pubw-dots{display:flex;gap:7px;justify-content:center;margin:10px 0 2px}
.pubw-dots button{width:8px;height:8px;border-radius:999px;border:0;cursor:pointer;
  background:var(--line-strong);padding:0;transition:width .2s,background .2s}
.pubw-dots button.on{width:22px;background:var(--lime)}

/* ── animación de página del bracket (el swipe navega con salida) ── */
.rg-grid{transition:transform .15s ease-in,opacity .15s ease-in}
html.rg-out-l .rg-grid{transform:translateX(-44px);opacity:0}
html.rg-out-r .rg-grid{transform:translateX(44px);opacity:0}
.rg-cell.entra{animation:cbEntraCol .22s ease-out}
@keyframes cbEntraCol{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

/* ── BRACKET EN MÓVIL: una ronda a la vez, codos Roland Garros ── */
@media (max-width:900px){
  .rg-map{display:none}                      /* el minimapa cede el paso a pills+swipe */
  .rg-grid{display:flex!important;flex-direction:column;gap:12px;
    position:relative;padding-right:28px;overflow:visible}
  .rg-cell{display:none}
  .rg-cell.colact{display:block}
  .rg-cell .rg-instub{display:none}
  .rg-mconn{position:absolute;right:6px;width:18px;
    border:2px solid var(--lime-line);border-left:0;
    border-radius:0 12px 12px 0;pointer-events:none}
  .rg-nav{position:sticky;top:0;z-index:5;background:var(--bg);
    padding:8px 0;margin-top:0}
  .rg-ct{font-size:12px;padding:8px 10px}
}

/* ── afinación móvil general del subdominio ── */
@media (max-width:760px){
  .pub-hero h1{font-size:24px}
  .scv-p .nm{font-size:13.5px}
  .scv-set .c{font-size:14px}
  .pub-tabs{width:100%}
  .pub-tabs a{flex:1;justify-content:center}
  .pub-back-btn,.pub-pdf-btn,.pub-seed-btn{padding:8px 13px}
  .gr-card-body{padding:12px 12px 14px}
  .gr-card-body td{padding:9px 6px;font-size:12.5px}
  .pub-patro-set img{height:calc(52px * var(--pesc,1))}
  .jl-row{padding:10px 12px;gap:10px}
  .jl-chips .jl-chip{display:none}
  .jl-chips .jl-chip:first-child{display:inline-flex}
}

/* ═══ PASADA 8 · móvil: tarjetas del cuadro UNIFORMES ═══ */
@media (max-width:900px){
  .rg-grid{padding-left:0}
  .rg-cell.colact{display:block;width:100%!important;max-width:none!important;
    margin:0 0 0 0!important;padding:0!important;transform:none!important;left:auto!important}
  .rg-cell.colact .rg-match{width:100%!important;margin:0!important;transform:none!important}
  .rg-cell.colact .rg-instub{display:none!important}
}

/* ═══ PASADA 9 · píldoras de ronda: enlaces compactos en móvil ═══ */
.rg-ct{white-space:nowrap;text-decoration:none;cursor:pointer}
.rg-ct:empty{display:none}
a.rg-ct.on{pointer-events:none}
@media (max-width:900px){
  .rg-nav{justify-content:center;gap:8px}
  .rg-nav .rg-ct{flex:0 1 auto;font-size:11.5px;padding:7px 14px}
  .rg-nav .rg-arrow{width:32px;height:32px}
}

/* ═══ PASADA 10 · nav de rondas: discreto en móvil + exorcismo del destello ═══ */
.rg-ct,.rg-ct::before,.rg-ct::after{box-shadow:none!important}
.rg-ct::before,.rg-ct::after{content:none!important;display:none!important}
.rg-ct:focus,.rg-ct:focus-visible{outline:none!important}
.rg-arrow:focus,.rg-arrow:focus-visible{outline:none!important}
@media (max-width:900px){
  .rg-nav{flex-wrap:nowrap;justify-content:center;gap:6px;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .rg-nav::-webkit-scrollbar{display:none}
  .rg-nav .rg-ct{font-size:10.5px;padding:6px 11px;letter-spacing:.02em;flex-shrink:0}
  .rg-nav .rg-arrow{width:28px;height:28px;flex-shrink:0}
  .rg-nav .rg-arrow iconify-icon{font-size:13px}
}

/* ═══ PASADA 11 · ACCIONES: el menú respira (antídoto del recorte) ═══ */
/* Los brillos del héroe son background (el radio los recorta solo):
   overflow visible para que el menú Acciones salga, y capa alta para
   que se pinte SOBRE el contenido que sigue. */
.pub-hero{overflow:visible!important;z-index:30}
.pub-hero.compacto{overflow:visible!important}
.pub-acc{z-index:40}
.pub-acc-menu,.pub-acc-submenu{z-index:80}
/* la fila de navegación también hospeda menús (sugerencias del buscador) */
.pub-navrow{position:relative;z-index:25}
.pub-nav-sug{z-index:70}
/* el anillo de foco no aplica al tocar el botón (conserva el de teclado en lo demás) */
.pub-acc-btn:focus,.pub-acc-btn:focus-visible{outline:none!important}

/* ═══ PASADA 12 · menú Acciones: FIXED (el JS manda las coordenadas) ═══ */
.pub-acc-menu{
  position:fixed;top:auto;right:auto;left:auto;   /* el JS inyecta top/right */
  max-height:calc(100vh - 90px);overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.pub-acc-menu::-webkit-scrollbar{display:none}
/* el submenú es ACORDEÓN adentro del menú (no un flotante aparte) */
.pub-acc-sub{position:relative;border-top:1px solid var(--line);margin-top:5px;padding-top:5px}
.pub-acc-submenu{
  position:static;display:none;min-width:0;
  margin:2px 0 6px 14px;padding:4px 0 4px 10px;
  background:transparent;border:0;border-left:2px solid var(--lime-line);
  border-radius:0;box-shadow:none;
}
.pub-acc-sub.abierto > .pub-acc-submenu{display:block}
.pub-acc-sub.abierto > .pub-acc-parent{color:var(--lime)}
.pub-acc-sub.abierto > .pub-acc-parent .pub-acc-caret{transform:rotate(90deg);color:var(--lime)}
.pub-acc-caret{transition:transform .15s ease-out}
.pub-acc-subhead{padding:5px 8px 4px}

/* ═══ PASADA 12 · menú Acciones: el contrato de TU JS ═══ */
/* El JS posiciona con coordenadas de VIEWPORT (top/right inline) → fixed. */
.pub-acc-menu{position:fixed;top:auto;left:auto;right:auto;z-index:120;
  max-height:calc(100vh - 90px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none}
.pub-acc-menu::-webkit-scrollbar{display:none}
/* El submenú es ACORDEÓN dentro del menú: en flujo, no flotante. */
.pub-acc-submenu{position:static;box-shadow:none;border:0;border-radius:0;
  min-width:0;padding:2px 0 4px 10px;margin:0}
.pub-acc-sub{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.pub-acc-sub .pub-acc-submenu{display:none}
.pub-acc-sub.abierto .pub-acc-submenu,
.pub-acc-sub.open .pub-acc-submenu,
.pub-acc-parent[aria-expanded="true"] + .pub-acc-submenu{display:block}
.pub-acc-parent[aria-expanded="true"] .pub-acc-caret{transform:rotate(90deg)}
.pub-acc-caret{transition:transform .15s ease-out}

/* ═══ PASADA 13 · v5.11 · bordes lime en la barra de navegación ═══ */
/* Reposo = var(--lime-line) 35%. Hover = var(--lime) sólido. */
/* Editado in situ arriba: .pub-tabs .btn-myballs-outline, .pub-back-btn/.pub-pdf-btn/ */
/* .pub-seed-btn/.pub-rolbtn y .pub-buscar input[type=search]. Sin reglas nuevas. */

/* ═══ PASADA 14 · v5.13 · fila de navegación sin pestañas ═══ */
/* A nivel torneo la barra queda solo con el buscador: que ocupe el ancho
   en vez de flotar pegado a la derecha con la fila vacía. */
.pub-navrow.solo-buscar .pub-buscar{margin-left:0;flex:1}
.pub-navrow.solo-buscar .pub-buscar-wrap{flex:1}
.pub-navrow.solo-buscar .pub-buscar input[type=search]{width:100%}

/* ═══ PASADA 15 · v5.16 · la piel del BUSCADOR ═══ */
/* .pub-hitbar, .pub-hit-ring y .pub-hit-item no tenían ninguna regla:
   el laboratorio nunca rindió una vista con ?q= puesto. */

/* barra "Mostrando solo los N partidos de X" */
.pub-hitbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border-radius:12px;margin-bottom:14px;
  background:var(--lime-dim);border:1px solid var(--lime-line);
  font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--text)}
.pub-hitbar iconify-icon{color:var(--lime);font-size:16px;flex-shrink:0}
.pub-hitbar a{margin-left:auto;flex-shrink:0;
  font-family:var(--font-data);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--lime);
  padding:4px 11px;border-radius:999px;
  background:rgba(0,0,0,.25);border:1px solid var(--lime-line);
  transition:border-color .15s}
.pub-hitbar a:hover{border-color:var(--lime)}

/* tarjeta/partido que coincide con la búsqueda */
.scv.pub-hit-ring,.rg-match.pub-hit-ring{border-color:var(--lime-line)}

/* lista de coincidencias dentro del cuadro */
.pub-hit-item{display:flex;align-items:center;gap:10px;
  padding:10px 13px;border-radius:10px;margin-bottom:8px;
  background:var(--surface-2);border:1px solid var(--line);
  color:var(--text-2);font-family:var(--font-ui);font-size:13px;
  transition:border-color .15s,transform .12s}
.pub-hit-item:hover{border-color:var(--lime-line);transform:translateY(-2px)}
.pub-hit-item:active{transform:scale(.97)}
.pub-hit-item .tr{color:var(--lime);font-size:16px;flex-shrink:0}
.pub-hit-item .rd{font-family:var(--font-data);font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--lime);
  padding:3px 9px;border-radius:999px;background:var(--lime-dim);flex-shrink:0}
.pub-hit-item .det{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-hit-item .go{color:var(--text-3);font-size:16px;flex-shrink:0}
.pub-hit-item:hover .go{color:var(--lime)}

/* ═══ PASADA 16 · v5.17 · pestañas en UNA sola tira ═══ */
/* Antes envolvían y la última ("Jugadores") caía sola a un renglón con
   flex:1, estirada a todo lo ancho: pesaba mucho más que sus hermanas.
   Mismo patrón que .pub-dias y las píldoras de ronda: se desliza. */
@media (max-width:900px){
  .pub-tabs{flex:1 1 100%;width:100%;min-width:0;flex-wrap:nowrap;
    overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:2px;
    scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pub-tabs::-webkit-scrollbar{display:none}
  .pub-tabs .btn-myballs-outline,.pub-tabs .btn-myballs-primary{
    flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
}

/* ═══ PASADA 17 · v5.18 · héroe centrado en teléfono ═══ */
/* Acotado a mano y NO con text-align en .pub-hero: eso se heredaría
   hacia el menú Acciones, que cuelga dentro del héroe. */
@media (max-width:760px){
  .pub-hero h1{text-align:center}
  .pub-hero-sub{text-align:center}
  .pub-hero-bot{justify-content:center}
  .pub-hero-bot .cod,.pub-hero-bot .pub-cat-pill{text-align:center;justify-content:center}
}

/* ═══ PASADA 18 · v5.19 · rejillas sin hueco ═══ */
/* auto-fill crea TODAS las columnas que quepan, aunque queden vacías, y como
   son 1fr esa columna fantasma se lleva su parte del ancho. auto-fit las
   colapsa a cero y las tarjetas reales se reparten el renglón completo.
   Con 3 grupos en 4 columnas (o 2 categorías en 3) el hueco era visible. */
.gr-clasif-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pub-catgrid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ═══ PASADA 19 · v5.20 · aire en la fase de grupos ═══ */
/* .gr-matches no tenía NINGUNA regla: las tarjetas de partido se apilaban
   en flujo normal pegadas borde con borde. Se les da margen inferior en vez
   de volver el contenedor flex, para que el margen colapse con el del
   encabezado de ronda y no se sumen. */
.gr-clasif{margin-bottom:24px}
.gr-ronda-h,.gr-rh{margin:22px 0 12px}
.gr-matches .scv{margin-bottom:10px}
.gr-matches .scv:last-child{margin-bottom:0}

/* ═══ PASADA 20 · v5.21 · aire entre el thead y el tbody ═══ */
/* La línea separadora era el border-bottom del th. Con border-collapse:collapse
   esa línea vive pegada al borde inferior de la celda, así que no se le puede
   meter espacio por debajo sin perderla; y padding-top en la primera fila no
   sirve porque esa fila lleva fondo (.clasif) y el fondo crecería con ella.
   Solución: se quita el borde y la línea se dibuja como fondo de 1px colocado
   9px por encima del borde inferior. Queda la línea Y el aire. */
.gr-card-body thead th{padding-bottom:16px;border-bottom:0;
  background-image:linear-gradient(var(--line-strong),var(--line-strong));
  background-repeat:no-repeat;background-size:100% 1px;
  background-position:0 calc(100% - 9px)}

/* ═══ PASADA 21 · v5.24 · cobertura del átomo .scv + desplegable de jugadores ═══ */
/* Cuatro clases del átomo de partido no tenían regla. Se notaban ya hoy:
   el "RET." suelto arriba a la derecha en horarios es .scv-txt sin estilo. */

/* hora de un partido aún no jugado: ocupa el lugar de los sets */
.scv-hora{display:flex;align-items:center;justify-content:center;min-width:46px;
  font-family:var(--font-data);font-variant-numeric:tabular-nums;
  font-size:14px;font-weight:700;color:var(--text-2)}
.scv-hora.tba{color:var(--text-3)}
.scv-hora.live{color:var(--lime)}

/* nota del marcador: RET. / W.O. */
.scv-txt{display:flex;align-items:center;padding-left:2px;
  font-family:var(--font-data);font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--loss)}

/* pie de programación: cuándo y dónde se juega */
.scv-prog{display:flex;align-items:center;gap:7px;
  margin-top:11px;padding-top:9px;border-top:1px solid var(--line);
  font-family:var(--font-data);font-size:10.5px;letter-spacing:.06em;
  color:var(--text-3)}
.scv-prog iconify-icon{color:var(--lime);font-size:13px;flex-shrink:0}

/* lado todavía sin definir (Por definir / BYE) */
.scv-p.tbd .nm{color:var(--text-3);font-weight:500;font-style:italic}

/* el desplegable de jugadores ahora hospeda tarjetas .scv */
.jl-bd .gr-bd-wrap{gap:8px}
.jl-bd .scv{background:var(--surface-3)}

/* ═══ PASADA 22 · v5.25 · patrocinadores sin título y 50% más grandes ═══ */
/* Sube la ALTURA y también el max-width: con object-fit:contain, si solo
   creciera la altura los logos anchos se quedarían topados en 150px y no se
   verían más grandes. Los dos factores van x1.5. */
.pub-patro-set img{height:calc(96px * var(--pesc,1));max-width:calc(225px * var(--pesc,1))}
/* Sin título, el aire de arriba y el de abajo se emparejan. */
.pub-patro{padding:16px 0}
@media (max-width:760px){
  .pub-patro-set img{height:calc(78px * var(--pesc,1));max-width:calc(190px * var(--pesc,1))}
}

/* ═══ PASADA 23 · v5.27 · fichas de fecha discretas ═══ */
/* Alto ≈ 28px en vez de ≈ 36px. Un punto por encima de la cápsula
   ILUMINADA a propósito: esa es una etiqueta pasiva y estas son botones
   que se pican con el dedo. Baja el bulto una cuarta parte y el número
   del día sigue leyendose de un vistazo. */
.pub-dia{padding:6px 12px;gap:5px}
.pub-dia .ds,.pub-dia .dm{font-size:9.5px}
.pub-dia .dn{font-size:13px}
.pub-dia-todos .dtodos{font-size:10px}
/* "Todos" tiene UN solo texto. Con align-items:baseline heredado y la
   píldora estirada a la altura de sus hermanas, ese texto quedaba pegado
   arriba. Las fichas de día SÍ necesitan baseline (JUE/JUL se apoyan en la
   misma línea que el número grande), así que se centra solo esta. */
.pub-dia-todos{align-items:center}

/* El distintivo del día de HOY no tenía NINGUNA regla: .dh salía como texto
   pelado y .eshoy no hacía nada. No se nota en Amigos Racquet porque ya
   terminó, pero aparece en cuanto un día del torneo sea el día actual. */
.pub-dia.eshoy{border-color:color-mix(in srgb, var(--dc) 70%, transparent)}
.pub-dia .dh{align-self:center;margin-left:2px;padding:1px 5px;border-radius:999px;
  font-size:8px;font-weight:700;letter-spacing:.1em;
  background:color-mix(in srgb, var(--dc) 30%, transparent);
  color:color-mix(in srgb, var(--dc) 88%, #fff)}
.pub-dia.on .dh{background:rgba(0,0,0,.22);color:var(--lime-ink)}

/* ═══ PASADA 24 · v5.29 · barra de navegación al tamaño de las fechas ═══ */
/* Todo el renglón queda en ~31px de alto, igual que las fichas de fecha.
   Va FUERA de media query a propósito: así vence también el padding que el
   bloque de 760px le ponía a Regresar/PDF, y el tamaño es uno solo en
   todos los anchos. */
.pub-tabs .btn-myballs-outline,.pub-tabs .btn-myballs-primary{
  padding:6px 14px;font-size:12.5px;gap:6px}
/* .pub-rolbtn NO entra: ese vive en el héroe y debe seguir empatando con
   la píldora de la fecha que trae al lado. */
.pub-back-btn,.pub-pdf-btn,.pub-seed-btn{padding:6px 13px;font-size:12px;gap:6px}
/* El buscador comparte renglón con las pestañas: si se queda en 40px la
   fila se ve despareja. */
.pub-buscar input[type=search]{height:32px;padding:0 14px;font-size:12.5px}
.pub-buscar button{height:32px;padding:0 16px;font-size:12.5px}

/* ═══ PASADA 25 · v5.31 · barra secundaria centrada en teléfono ═══ */
/* Mismo corte de 760px que el héroe (PASADA 17): en el teléfono se centra
   todo junto. Arriba de 760px se queda alineada a la izquierda. */
@media (max-width:760px){
  .pub-secbar{justify-content:center}
}

/* ═══ PASADA 26 · v5.32 · el botón Buscar, centrado de verdad ═══ */
/* Un button con altura fija centra su texto solo... hasta que el padding no
   cabe dentro de esa altura. Entonces la caja de contenido se queda corta y
   la línea de texto se desborda hacia abajo. Con inline-flex el centrado es
   explícito y ya no depende de que padding y height cuadren. */
.pub-buscar button{display:inline-flex;align-items:center;justify-content:center;
  line-height:1;flex-shrink:0}

/* ═══ PASADA 27 · v5.34 · el encabezado de fecha, del color de su ficha ═══ */
/* Choque de cascada: .dia1..8 declaran --dc en la línea 735 y .pub-dia-h
   vuelve a declararlo (var(--lime)) en la 739. Misma especificidad 0,1,0 y
   .pub-dia-h va después, así que ganaba y TODOS los encabezados salían lime,
   aunque el PHP sí les ponía su clase diaN correcta.
   Se reasigna con 0,2,0 para que el color del día mande. Los .pub-dia (las
   fichas) nunca tuvieron el problema: su --dc se declara en la 722, ANTES. */
.pub-dia-h.dia1{--dc:#99E1D9}
.pub-dia-h.dia2{--dc:#C6FF34}
.pub-dia-h.dia3{--dc:#FFB55E}
.pub-dia-h.dia4{--dc:#8AB8FF}
.pub-dia-h.dia5{--dc:#FF9ECB}
.pub-dia-h.dia6{--dc:#B79CFF}
.pub-dia-h.dia7{--dc:#FF8A7A}
.pub-dia-h.dia8{--dc:#7ED957}

/* ═══ PASADA 28 · v5.35 · el acordeón de la lista de inscritos ═══ */
/* El JS ya hacía su parte: quita .abierto cuando el buscador está vacío y la
   pone en las categorías con coincidencias. La hoja nunca implementó esa
   clase, así que .lg-cuerpo estaba siempre visible: todo nacía abierto y el
   clic no hacía nada. */
.lg-cat .lg-cuerpo{display:none}
.lg-cat.abierto .lg-cuerpo{display:flex}

/* Encabezado de categoría: una sola fila, no dos. */
.lg-cab{flex-wrap:nowrap;margin-bottom:0;padding:9px 2px;cursor:pointer}
.lg-cat.abierto .lg-cab{margin-bottom:8px}
.lg-cab .cod{flex-shrink:0;padding:3px 8px;border-radius:6px;
  font-family:var(--font-data);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  background:var(--lime-dim);color:var(--lime)}
.lg-cab .nm{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-cab .ct{flex-shrink:0;font-size:10px}
.lg-cab .fl{flex-shrink:0;color:var(--text-3);font-size:16px;transition:transform .15s}
.lg-cat.abierto .lg-cab .fl{transform:rotate(180deg);color:var(--lime)}
.lg-cab:hover .nm{color:var(--lime)}

/* Rama (Varonil / Femenil / Mixtos) y filas de parejas. */
.lg-rama .nn{font-size:11px}
.lg-par .num{flex-shrink:0;min-width:18px;
  font-family:var(--font-data);font-size:11px;color:var(--text-3)}
.lg-par .jj{flex:1;min-width:0;font-family:var(--font-ui);font-size:13px;
  font-weight:600;color:var(--text-2)}
.lg-par .jj b{font-weight:700;color:var(--text)}
.lg-par .jj .sep{margin:0 5px;color:var(--text-3);font-weight:400}

/* ═══ PASADA 29 · v5.36 · encabezado del modal de inscritos ═══ */
/* Choque de nombres: .mb-sh en esta hoja (línea 676, heredada de player.css)
   es un BLOQUE grande con padding 34x28 y texto centrado. El markup del modal
   se copió de torneos.myballs.com.mx, donde .mb-sh significa "botón de
   compartir". Aquí los dos botones heredaban el bloque y reventaban.
   Se acota a .mb-sh-grupo .mb-sh (0,2,0) para no tocar el otro componente,
   que sigue usándose en player. */
.mb-sh-grupo{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.mb-sh-grupo .mb-sh{flex:1 1 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  margin:0;padding:8px 14px;border-radius:999px;text-align:center;
  background:transparent;border:1px solid var(--lime-line);
  font-family:var(--font-ui);font-weight:700;font-size:11.5px;
  color:var(--text-2);text-decoration:none;cursor:pointer;
  transition:border-color .15s,color .15s,transform .12s}
.mb-sh-grupo .mb-sh:hover{border-color:var(--lime);color:var(--text)}
.mb-sh-grupo .mb-sh:active{transform:scale(.97)}
.mb-sh-grupo .mb-sh iconify-icon{flex-shrink:0;color:var(--lime);font-size:15px}
.mb-sh-grupo .mb-sh .mb-sh-txt{margin:0;max-width:none;line-height:1.2;
  font-size:11.5px;color:inherit;white-space:nowrap}

/* El buscador del modal: la lupa no tenía regla y se estiraba a lo alto. */
.lg-buscar{align-items:center}
.lg-buscar iconify-icon{flex-shrink:0;color:var(--text-3);font-size:16px}

/* ═══ PASADA 30 · v5.37 · rediseno del modal de inscritos ═══ */

/* La cruz de cerrar nunca tuvo centrado: el glifo se iba a la esquina
   superior izquierda de su circulo de 32px. */
.pub-modal-x{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-ui);font-size:19px;line-height:1;
  transition:border-color .15s,color .15s}
.pub-modal-x:hover{border-color:var(--lime);color:var(--lime)}

/* El modal era de 420px y no tenía alto maximo: con 10 categorias crecia mas
   que la pantalla y se cortaba. Ahora es mas ancho y el CUERPO se desplaza,
   dejando fijos el titulo y los botones. */
#pubInscritos .pub-modal-card{max-width:660px;padding:20px 20px 18px;
  display:flex;flex-direction:column;max-height:calc(100vh - 40px)}
#pubInscritos .pub-modal-body{flex:1;min-height:0;overflow-y:auto;
  scrollbar-width:none}
#pubInscritos .pub-modal-body::-webkit-scrollbar{display:none}
#pubInscritos .lg-buscar{position:sticky;top:0;z-index:2;
  background:var(--surface-2);padding-bottom:10px;margin-bottom:12px}

/* Rama: ya no es una tarjeta, es un encabezado con su color y su subrayado,
   con el conteo empujado a la derecha. --rc lo pone el PHP en .lg-bloque. */
.lg-bloque{background:transparent;border:0;border-radius:0;padding:0;margin-bottom:18px}
.lg-bloque:last-child{margin-bottom:0}
.lg-rama{display:flex;align-items:center;gap:9px;padding:0 2px 8px;margin-bottom:10px;
  border-bottom:2px solid color-mix(in srgb, var(--rc) 45%, transparent);
  font-family:var(--font-data);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb, var(--rc) 85%, #fff)}
.lg-rama iconify-icon{flex-shrink:0;color:var(--rc);font-size:15px}
.lg-rama .tt{color:inherit}
.lg-rama .nn{margin-left:auto;flex-shrink:0;padding:3px 9px;border-radius:999px;
  font-size:9.5px;letter-spacing:.1em;
  background:color-mix(in srgb, var(--rc) 16%, #171717);
  color:color-mix(in srgb, var(--rc) 78%, #fff)}

/* Cada categoria, su propia tarjeta, teñida con el color de su rama. */
.lg-cat{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:0 14px;margin-bottom:8px;transition:border-color .15s}
.lg-cat:last-child{margin-bottom:0}
.lg-cat:hover{border-color:color-mix(in srgb, var(--rc) 40%, transparent)}
.lg-cat.abierto{border-color:color-mix(in srgb, var(--rc) 50%, transparent)}
.lg-cab{padding:11px 0}
.lg-cab .cod{background:color-mix(in srgb, var(--rc) 18%, #171717);
  color:color-mix(in srgb, var(--rc) 82%, #fff)}
.lg-cab .ct{padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.04);color:var(--text-3)}
.lg-cat.abierto .lg-cab .fl{color:var(--rc)}
.lg-cuerpo{padding-bottom:10px}
.lg-par{padding:7px 2px}

/* ═══ PASADA 31 · v5.38 · el buscador del modal ═══ */
/* Tres cosas: la lupa flotaba FUERA del campo; el fondo del input era
   --surface-2, el mismo del panel del modal, asi que no se distinguia de el;
   y el foco lo pintaba la regla global :focus-visible (linea 53, heredada de
   player.css) con un anillo lime de 2px separado 3px, que en un campo ancho
   se ve como un marco encendido. */
.lg-buscar{position:relative;gap:0}
.lg-buscar iconify-icon{position:absolute;left:15px;top:50%;
  transform:translateY(-50%);pointer-events:none;
  color:var(--text-3);font-size:16px;z-index:1}
.lg-buscar input{padding:0 16px 0 40px;background:var(--surface)}
.lg-buscar input::placeholder{color:var(--text-3)}
/* El foco se marca con el borde, no con un anillo aparte: sigue siendo
   perfectamente visible y va con el resto del sitio. */
.lg-buscar input:focus,.lg-buscar input:focus-visible{
  outline:none;border-color:var(--lime)}
.lg-buscar:focus-within iconify-icon{color:var(--lime)}

/* ═══ PASADA 32 · v5.39 · el menu sube a la barra superior ═══ */
/* El boton de Acciones sale del heroe y se vuelve un hamburguesa en la barra,
   en el lugar que ocupaba el correo de soporte. El heroe queda solo con la
   fecha, la categoria y, en la portada, "Horarios de hoy". */
.pub-nav-slot{display:flex;align-items:center;justify-content:flex-end;min-height:36px}
.pub-nav-slot .pub-acc{position:relative}
.pub-nav-slot .pub-acc-btn{width:38px;height:38px;padding:0;gap:0;
  justify-content:center;border-radius:11px}
.pub-nav-slot .pub-acc-btn iconify-icon{font-size:20px;color:var(--text)}
.pub-nav-slot .pub-acc-btn:hover{border-color:var(--lime)}
.pub-nav-slot .pub-acc-btn:hover iconify-icon{color:var(--lime)}
.pub-nav-slot .pub-acc-btn[aria-expanded="true"]{border-color:var(--lime)}
.pub-nav-slot .pub-acc-btn[aria-expanded="true"] iconify-icon{color:var(--lime)}
/* Antes de que el JS lo mude, el bloque no debe verse en el heroe. */
.pub-hero-bot .pub-acc{display:none}
@media (max-width:900px){
  .pub-nav{padding:12px 16px}
  .pub-nav-slot .pub-acc-btn{width:36px;height:36px}
}

/* ═══ PASADA 33 · v5.40 · el modal cabe en el iPhone ═══ */
/* En Safari de iOS, 100vh NO es lo que se ve: incluye lo que tapan la barra de
   direcciones y la de herramientas. Con max-height en vh la tarjeta quedaba mas
   alta que la pantalla y, al estar centrada, se cortaba arriba y abajo.
   dvh (dynamic viewport height) si mide el area realmente visible. La primera
   declaracion queda de respaldo para navegadores que no lo soporten. */
#pubInscritos .pub-modal-card{max-height:calc(100vh - 40px)}
#pubInscritos .pub-modal-card{max-height:calc(100dvh - 40px)}
@media (max-width:760px){
  .pub-modal{padding:12px}
  #pubInscritos .pub-modal-card{padding:16px 14px 14px}
  #pubInscritos .pub-modal-card{max-height:calc(100dvh - 24px)}
}
/* Sin el chip del codigo, el nombre se queda con todo el ancho. */
.lg-cab .nm{font-size:14px}

/* ═══ PASADA 34 · v5.41 · opciones del modal de compartir ═══ */
/* .pub-share-txt era un span con solo font-weight y font-size. Adentro lleva un
   <b> y un <small>, los dos en linea, asi que el titulo y la descripcion se
   pegaban: "Enviar por WhatsAppAbre WhatsApp con el enlace listo".
   Y el centrado raro venia de que WhatsApp es un <a> y los otros dos son
   <button>: los botones traen text-align:center del navegador y .pub-share-op
   nunca lo corrigio. */
.pub-share-op{text-align:left}
.pub-share-op:focus,.pub-share-op:focus-visible{outline:none;border-color:var(--lime-line)}
.pub-share-txt{display:flex;flex-direction:column;gap:2px;
  flex:1;min-width:0;font-weight:400;font-size:13px}
.pub-share-txt b{font-weight:700;font-size:13px;line-height:1.3;color:var(--text)}
.pub-share-txt small{font-size:11px;line-height:1.35;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-share-go{flex-shrink:0;margin-left:0;font-size:16px}
/* Con el QR desplegado, la fila se queda marcada. */
.pub-share-op.qr[aria-expanded="true"]{border-color:var(--lime-line)}
.pub-share-op.qr[aria-expanded="true"] .pub-share-go{color:var(--lime)}

/* ═══ PASADA 35 · v5.42 · que el modal quepa en el telefono ═══ */

/* iOS infla los tipos por su cuenta en bloques angostos si no se le dice que
   no. Eso empuja los anchos y ayuda a que las cosas se desborden. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* LA CAUSA DE FONDO: .pub-modal-card es un ITEM flex de .pub-modal, y los items
   flex traen min-width:auto, o sea "no encojas por debajo del ancho de tu
   contenido". Si algo adentro no cabe, la tarjeta CRECE y se sale de la
   pantalla en vez de reacomodarse. min-width:0 la obliga a respetar el ancho
   disponible y a que el contenido se acomode por dentro. */
/* OJO: aqui solo min-width:0. Un max-width:100% pisaria el max-width:420px de
   la regla base (linea 926) y dejaria los modales de Sembrados y Compartir de
   ancho completo. Con min-width:0 basta: la tarjeta ya no puede crecer mas que
   su contenedor, y el 420px sigue mandando donde toca. */
.pub-modal-card{min-width:0}
#pubInscritos .pub-modal-card{max-width:min(660px,100%)}
/* La misma cura por toda la cadena: si un eslabon no encoge, no encoge nadie. */
.pub-modal-body,.pub-share-body,.mb-sh-grupo,
.lg-bloque,.lg-cat,.lg-cab,.lg-rama,.lg-par,.lg-cuerpo{min-width:0}

@media (max-width:760px){
  /* Los dos botones lado a lado no caben en un telefono: uno por renglón. */
  .mb-sh-grupo .mb-sh{flex:1 1 100%}
  .mb-sh-grupo .mb-sh .mb-sh-txt{white-space:normal}
  /* Etiquetas mas compactas, para devolverle ancho al nombre. */
  .lg-rama{gap:7px;font-size:10px;letter-spacing:.1em}
  .lg-rama .nn{padding:3px 7px;font-size:8.5px;letter-spacing:.06em}
  .lg-cat{padding:0 11px}
  .lg-cab{gap:8px;padding:10px 0}
  .lg-cab .nm{font-size:13px}
  .lg-cab .ct{padding:3px 7px;font-size:9.5px}
}

/* ═══ PASADA 36 · v5.43 · la lupa del modal, centrada ═══ */
/* iconify-icon es un elemento personalizado que por omision se comporta como
   texto en linea: su caja incluye el espacio del renglón (line-height y el
   hueco de los descendentes), asi que translateY(-50%) centraba esa caja y no
   el glifo. Con display:block y line-height:1 la caja mide exactamente lo que
   mide el icono, y el centrado cae donde debe. */
.lg-buscar iconify-icon{display:block;line-height:1}

/* ═══ PASADA 37 · v5.44 · los PDF se mudan al menu ═══ */
/* La barra secundaria se queda solo con "Sembrados", y en la mayoria de las
   secciones vacia. :empty la esconde sola, incluso despues de que el JS se
   lleva los PDF (es un estado vivo, se reevalua). */
.pub-secbar:empty{display:none;margin:0}
/* Antes de que el JS los mude, los PDF no deben verse en la barra. */
.pub-secbar a[data-menu-pdf]{display:none}
/* Seccion "Descargar" del menu. */
.pub-acc-grupo{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.pub-acc-grupo .pub-acc-subhead{padding:6px 12px 4px}

/* ═══ PASADA 38 · v5.45 · separador entre pestañas y buscador ═══ */
/* Solo en telefono, donde las dos filas se apilan y se leen como una sola masa
   de botones. El aire queda parejo: los 12px de gap de .pub-navrow por arriba
   y 12px de padding por abajo.
   Se usa el combinador ~ y no +, porque entre las pestañas y el buscador hay un
   <script> (el que centra la pestaña activa) y el adyacente no lo salta.
   Ademas asi la linea solo sale cuando HAY pestañas: a nivel torneo, donde la
   barra se queda solo con el buscador, no aparece una raya suelta. */
@media (max-width:760px){
  .pub-navrow .pub-tabs ~ .pub-buscar{
    border-top:1px solid var(--line-strong);padding-top:12px}
}

/* ═══ PASADA 39 · v5.46 · separador bajo la tira de fechas ═══ */
/* En escritorio y en telefono. Cierra el bloque de navegacion (pestanas,
   buscador, fechas) y lo separa del contenido del dia.
   Aire parejo: 16px arriba de la linea y 16px abajo.
   El padding-bottom pisa el de 6px que el bloque movil le pone a la tira para
   el scroll; con overflow-x el borde vive en el borde del elemento y no se
   desplaza con las fichas, asi que la linea se queda quieta.
   Cuando se pinta la tira: en HORARIOS solo si hay mas de un dia de juego
   (count(dias) > 1); en RESULTADOS siempre que haya dias, aunque sea uno. En
   los dos casos la linea cierra el bloque de navegacion, asi que no se
   condiciono por seccion. */
.pub-dias{padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid var(--line-strong)}

/* ═══ PASADA 40 · v5.47 · el menu recupera su color ═══ */
/* Desde que el menu vive dentro de la barra (v5.39), esta regla de la línea 608
       .pub-nav a { color:var(--text-3); font-size:12.5px }
   le cae a TODOS los renglones que son enlaces. Con especificidad 0,1,1 le gana
   a .pub-acc-item (0,1,0), asi que "Pagina principal", "Categorias", "Horarios
   de hoy" y "Ficha tecnica" salian grises y chicos, mientras que los que son
   <button> (Cuadro, Resultados, Lista de inscritos, Compartir) se veían bien.
   Se reafirma con 0,2,0 sin tocar la regla de la barra, que sigue sirviendo
   para el logo. El hover necesita 0,3,0 porque .pub-nav a:hover vale 0,2,1. */
.pub-nav .pub-acc-item,.pub-nav .pub-acc-subitem{
  color:var(--text);font-size:13.5px;font-weight:600}
.pub-nav .pub-acc-item:hover,.pub-nav .pub-acc-subitem:hover{
  background:var(--lime-dim);color:var(--lime)}
.pub-nav .pub-acc-item:hover iconify-icon{color:var(--lime)}

/* ═══ PASADA 41 · v5.48 · lupa y aviso ═══ */

/* LA LUPA, otra vez. En la v5.43 le pusimos display:block, que era correcto,
   pero seguia baja por otra razon: .lg-buscar en el modal lleva
   padding-bottom:10px (el colchon de la barra pegajosa, v5.37). Entonces el
   contenedor mide 48px (38 del campo + 10 de relleno) y top:50% cae en 24,
   mientras que el centro del CAMPO esta en 19. De ahi los 5px de caida.
   Solucion: la lupa se ancla al alto del campo, no al del contenedor. La
   altura se comparte en una variable para que las dos no puedan separarse. */
.lg-buscar{--alto-campo:38px}
.lg-buscar input{height:var(--alto-campo)}
.lg-buscar iconify-icon{top:0;bottom:auto;height:var(--alto-campo);transform:none;
  display:flex;align-items:center;justify-content:center}

/* EL AVISO de "el rol se publica al iniciar", centrado en telefono. */
@media (max-width:760px){
  .pub-alert-warn{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .pub-alert-clock{margin-left:0;justify-content:center;flex-wrap:wrap}
  .pub-alert-btn{justify-content:center}
}

/* ═══ PASADA 42 · v5.49 · la cuenta regresiva, en lime ═══ */
/* Antes: etiqueta y unidades en gris, numeros en blanco, cajas con borde
   neutro. Ahora todo el reloj va en lime, igual que el boton de inscritos que
   ya vivia dentro de este mismo aviso.
   Las unidades (d/h/m/s) quedan en un lime apagado para que los numeros, que
   son el dato, sigan mandando. */
.pub-alert-clock .lb{color:var(--lime)}
.pub-alert-clock .u{background:var(--lime-dim);border-color:var(--lime-line);
  color:color-mix(in srgb, var(--lime) 55%, #171717)}
.pub-alert-clock .u b{color:var(--lime)}

/* ═══ PASADA 43 · v5.50 · el filtro de genero, en una sola tira ═══ */
/* "Todos" caia solo a un segundo renglón cuando los cuatro no cabían. Ahora es
   una tira que se desliza con el dedo, igual que las pestañas (PASADA 16) y
   las fichas de fecha.
   No hizo falta script de centrado: el filtro trabaja del lado del cliente y
   el activo al cargar es siempre el primero, o sea el de mas a la izquierda,
   que ya se ve sin desplazar nada. */
@media (max-width:900px){
  .pub-catfilter{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    padding-bottom:2px;scroll-snap-type:x proximity;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pub-catfilter::-webkit-scrollbar{display:none}
  .pub-catfilter button{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
}

/* ═══ PASADA 44 · v5.51 · el desplegable de grupos, con el atomo comun ═══ */
/* Era el ultimo lugar que seguía usando el desplegable propio, con los sets
   metidos en el renglón del nombre y por eso desalineados. Ahora usa el mismo
   .scv que Resultados y Jugadores.
   Las tarjetas van en --surface-3 porque .gr-card ya es --surface: si se
   dejaran iguales, no se distinguirian del fondo. */
.gr-bd .gr-bd-wrap{gap:8px;padding:6px 0 10px}
.gr-bd .scv{background:var(--surface-3)}

/* ═══ PASADA 45 · v5.52 · el desplegable de grupos, alineado a la izquierda ═══ */
/* El <td colspan="9"> que hospeda el desplegable hereda de
       .gr-card-body td { text-align:center; font-family:var(--font-data) }
   que es lo correcto para las CIFRAS de la tabla de posiciones, pero no para
   las tarjetas de partido: los nombres salian centrados y en monoespaciada,
   cuando en Resultados van a la izquierda y en Manrope.
   Se devuelve solo en el renglón del desplegable. Los marcadores no se ven
   afectados porque .scv-set .c declara su propia mono y su propio centrado. */
.gr-bd td{text-align:left;font-family:var(--font-ui)}

/* ═══ PASADA 46 · v5.53 · filas de cabezas de serie ═══ */
/* Sin el lugar, la fila se lee de un vistazo: numero y nombre. */
.pub-seed-row{display:flex;align-items:center;gap:12px}
.pub-seed-nm{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis}

/* ═══ PASADA 47 · v5.59 · la fecha, con el mismo chip que las otras ═══ */
/* Adopta la forma, el tamaño y la tipografía de las píldoras de ronda y cancha,
   en un tercer tono neutro. Asi el renglón se lee por colores:
       lime = que se juega   ·   turquesa = donde   ·   gris = cuando
   La clase .h-chip la pone el PHP cuando la tarjeta va en modo píldora. Antes
   esto se resolvía con .r-pill ~ .h, pero eso solo alcanza a una hora que venga
   DESPUÉS de las píldoras, y en Horarios va antes. */
.scv-meta .h-chip{padding:4px 10px;border:0;border-radius:6px;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.05);color:var(--text-2)}

/* ═══ PASADA 48 · v5.61 · jerarquía de color por vista ═══ */
/* En HORARIOS la hora es el dato que la gente busca: va en lime y la categoría
   cede a gris. En las demás vistas manda la ronda (lime) y la hora acompaña
   (gris). Las clases las pone el PHP según si la tarjeta muestra cancha o no,
   que es lo que distingue una vista de la otra. */
.scv-meta .h-chip-clave{background:var(--lime-dim);color:var(--lime)}
.scv-meta .r-pill-suave{background:rgba(255,255,255,.05);color:var(--text-2)}

/* ═══ PASADA 49 · v5.62 · día, hora y cancha en el cuadro ═══ */
/* .rg-prog no tenía NINGUNA regla: salía como texto pelado con su icono. No se
   notaba porque solo aparecía en partidos pendientes y Amigos Racquet ya
   terminó, pero en Tennis con Causa habrían salido todos asi.
   Va pequeño y al pie de la tarjeta, separado por una línea: es contexto, no
   compite con los nombres ni con el marcador. */
.rg-prog{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:8px;padding-top:7px;border-top:1px solid var(--line);
  font-family:var(--font-data);font-size:9px;letter-spacing:.05em;
  color:var(--lime);line-height:1.3}
.rg-prog iconify-icon{flex-shrink:0;color:var(--lime);font-size:11px}

/* ═══ PASADA 50 · v5.64 · el selector de cuadros, vestido ═══ */
/* .pub-pills no tenía NINGUNA regla, y .btn-myballs-outline/primary solo estan
   vestidos DENTRO de .pub-tabs. Resultado: cuando una categoria tiene mas de un
   cuadro, el selector salía como dos enlaces de texto pelado, que parecían un
   titulo repetido en vez de un control.
   Mismas medidas que las pestañas (PASADA 24) para que se lean como familia. */
.pub-pills{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 14px}
.pub-pills .btn-myballs-outline,.pub-pills .btn-myballs-primary{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;
  font-family:var(--font-ui);font-weight:700;font-size:12.5px;
  text-decoration:none;cursor:pointer;transition:border-color .15s,color .15s,transform .12s}
.pub-pills .btn-myballs-outline{background:transparent;border:1px solid var(--lime-line);
  color:var(--text-2)}
.pub-pills .btn-myballs-outline:hover{border-color:var(--lime);color:var(--text)}
.pub-pills .btn-myballs-primary{background:var(--lime);border:1px solid var(--lime);
  color:var(--lime-ink)}
.pub-pills .btn-myballs-outline:active,.pub-pills .btn-myballs-primary:active{transform:scale(.97)}
@media (max-width:900px){
  .pub-pills{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    padding-bottom:2px;scroll-snap-type:x proximity;scrollbar-width:none}
  .pub-pills::-webkit-scrollbar{display:none}
  .pub-pills .btn-myballs-outline,.pub-pills .btn-myballs-primary{
    flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
}

/* ═══ PASADA 51 · v5.68 · el héroe adopta los chips ═══ */
/* Las dos píldoras del héroe pasan al mismo chip que el renglón meta de las
   tarjetas de partido: mono, mayúsculas, esquinas de 6px, sin borde, con fondo
   teñido. Y con el mismo codigo de color que ya rige en todo el sitio:

       la categoría es QUE se juega        -> lime
       la fecha y la sede son contexto      -> gris

   Van a 10px y no a los 9.5px del renglón meta, porque aqui el texto es mas
   largo y esta solo en la cabecera. */
.pub-hero-bot .cod,.pub-hero-bot .pub-cat-pill{
  gap:7px;padding:6px 12px;border:0;border-radius:6px;
  font-family:var(--font-data);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.pub-hero-bot .cod{background:rgba(255,255,255,.05);color:var(--text-2)}
.pub-hero-bot .cod iconify-icon{color:var(--text-3);font-size:13px}
.pub-hero-bot .pub-cat-pill{background:var(--lime-dim);color:var(--lime)}
.pub-hero-bot .pub-cat-pill iconify-icon{color:var(--lime);font-size:13px}

/* ═══ PASADA 52 · v5.69 · cambiar de categoría desde el héroe ═══ */
/* La píldora de categoría se vuelve botón cuando hay mas de una. Hereda el chip
   de la PASADA 51 y solo agrega lo que la hace clicable. */
.pub-cat-pill-btn{cursor:pointer;transition:background .15s,color .15s}
.pub-cat-pill-btn:hover{background:color-mix(in srgb, var(--lime) 18%, #171717)}
.pub-cat-pill-btn .chev{font-size:12px;opacity:.7}
.pub-cat-pill-btn:focus,.pub-cat-pill-btn:focus-visible{outline:none;
  background:color-mix(in srgb, var(--lime) 18%, #171717)}

/* Cada opcion de la lista, teñida con el color de su género. */
#pubCats .pub-modal-body{display:flex;flex-direction:column;gap:8px}
.pub-cat-op{display:flex;align-items:center;gap:11px;
  padding:11px 13px;border-radius:11px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);
  color:var(--text-2);font-family:var(--font-ui);font-size:13.5px;font-weight:600;
  transition:border-color .15s,transform .12s}
.pub-cat-op:hover{border-color:color-mix(in srgb, var(--cc) 55%, transparent);
  transform:translateY(-2px);color:var(--text)}
.pub-cat-op:active{transform:scale(.98)}
.pub-cat-op iconify-icon{flex-shrink:0;color:var(--cc);font-size:17px}
.pub-cat-op .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-cat-op .go{color:var(--text-3);font-size:15px}
.pub-cat-op:hover .go{color:var(--cc)}
/* La categoría en la que ya estas: marcada y sin invitacion a picarle. */
.pub-cat-op.on{border-color:color-mix(in srgb, var(--cc) 55%, transparent);
  background:color-mix(in srgb, var(--cc) 10%, #171717);color:var(--text)}
.pub-cat-op.on:hover{transform:none}
.pub-cat-op .ya{flex-shrink:0;padding:3px 9px;border-radius:999px;
  font-family:var(--font-data);font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;
  background:color-mix(in srgb, var(--cc) 22%, transparent);
  color:color-mix(in srgb, var(--cc) 85%, #fff)}

/* ═══ PASADA 53 · v5.70 · la barra superior se queda fija ═══ */
/* El alto se guarda en una variable porque hay otro elemento pegajoso que
   necesita saberlo: el navegador de rondas del cuadro, que en telefono tambien
   se queda arriba y sin este desfase se escondia debajo de la barra.
       escritorio  14 + 38 (boton) + 14 + 1 (borde) = 67px
       telefono    12 + 36 (boton) + 12 + 1 (borde) = 61px */
:root{--nav-h:67px}
.pub-nav{position:sticky;top:0;z-index:90}
@media (max-width:900px){
  :root{--nav-h:61px}
  .rg-nav{top:var(--nav-h)}
}

/* ═══ PASADA 54 · v5.71 · la fecha, en un color que se lea ═══ */
/* El chip gris cumplia el codigo de color pero casi no se leia a 9.5px con las
   letras separadas. En vez de subirle el brillo al gris se le da un acento
   propio, y asi el renglón sigue diciendo QUE es cada dato:

       lime      que se juega
       turquesa  donde
       ambar     cuando

   El ambar no es nuevo en el sistema: es el mismo #fcd34d del aviso de "el rol
   se publica al iniciar" y hermano del dorado del panel de administracion. */
:root{--gold:#fcd34d;--gold-dim:rgba(252,211,77,.12)}
.scv-meta .h-chip{background:var(--gold-dim);color:var(--gold)}
/* En HORARIOS la hora sigue en lime: ahi es el dato principal de la vista y la
   categoria es la que cede. Esa jerarquia se decidio en la v5.61. */
.scv-meta .h-chip-clave{background:var(--lime-dim);color:var(--lime)}
/* El pie del cuadro tambien es "cuando y donde": va al mismo ambar. */
.rg-prog{color:var(--gold)}
.rg-prog iconify-icon{color:var(--gold)}

/* ══════════════════════════════════════════════════════════
   MÓDULO torneos.myballs.com.mx — REGISTRO E INSCRIPCIONES
   Todo lo de arriba es el sistema de diseño de app., palabra por palabra.
   De aquí para abajo, solo lo que existe en este subdominio.
   ══════════════════════════════════════════════════════════ */

/* ═══ Portada: héroe del catálogo ═══ */
.cat-hero{position:relative;overflow:hidden;text-align:center;
  padding:34px 20px 30px;margin-bottom:24px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.cat-hero::before{content:"";position:absolute;inset:-40% -10% auto;height:220px;
  background:radial-gradient(60% 100% at 50% 0%,rgba(198,255,52,.10),transparent 70%);
  pointer-events:none}
.cat-hero-logo{position:relative;z-index:1;display:block;height:40px;width:auto;margin:0 auto 16px}
.cat-hero h1{position:relative;z-index:1;font-family:var(--font-display);font-weight:700;
  font-size:clamp(25px,4.4vw,38px);line-height:1.1;letter-spacing:-.02em;color:var(--text)}
.cat-hero h1 em{font-style:normal;color:var(--lime)}
.cat-hero .sub{position:relative;z-index:1;margin-top:12px;
  font-family:var(--font-data);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3)}

/* ═══ Encabezado de sección ═══ */
.cat-sec{display:flex;align-items:center;gap:9px;margin:26px 0 14px;
  font-family:var(--font-data);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2)}
.cat-sec iconify-icon{flex-shrink:0;color:var(--lime);font-size:15px}
.cat-sec .n{margin-left:auto;flex-shrink:0;padding:3px 9px;border-radius:999px;
  font-size:9.5px;letter-spacing:.1em;background:rgba(255,255,255,.05);color:var(--text-3)}

/* ═══ Rejilla y tarjeta de torneo ═══ */
/* auto-FILL, no auto-fit, y aqui la razon importa:
   auto-fit colapsa las columnas vacias, asi que con UN SOLO torneo esa tarjeta
   se estira a todo el ancho de la pantalla y se ve enorme. auto-fill conserva
   las pistas y la tarjeta se queda del tamano de una columna.
   Es la decision CONTRARIA a la de la v5.19 en app, y a proposito: alla
   sobraban columnas para tres grupos; aqui falta contenido para llenarlas.
   Mismo mecanismo, sintoma opuesto.
   Los 300px de minimo son los del disenio anterior. */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.tcard{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  transition:border-color .15s,transform .12s}
.tcard:hover{border-color:var(--lime-line);transform:translateY(-3px)}
.tcard:active{transform:scale(.99)}
.tcard:focus,.tcard:focus-visible{outline:none;border-color:var(--lime)}

/* Caja VERTICAL y object-fit:contain, no cover.
   Los flyers de torneo son verticales (cartel), y una caja 16/9 con cover los
   recortaba por arriba y por abajo: se perdian las categorias y la cuota, que
   es justo lo que la gente entra a leer.
   Con contain se ve el cartel COMPLETO. Y como la caja mantiene una proporcion
   fija, todas las tarjetas siguen midiendo lo mismo aunque los flyers vengan
   de distintos tamanos. */
.tcard-img{position:relative;aspect-ratio:3/4;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--surface-2)}
.tcard-img img{width:100%;height:100%;object-fit:contain;display:block}
/* TARJETA-1: el flyer completo al frente, y el mismo flyer desenfocado
   rellenando el fondo (adios barras vacias en flyers que no son 3:4). */
.tcard-img .tcard-bg{position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;transform:scale(1.2);filter:blur(20px) saturate(1.15) brightness(.42);z-index:0}
/* TARJETA-2: con la caja midiendo lo que mide el cartel, el fondo queda
   como red de seguridad (flyers fuera de rango o sin medida legible). */
.tcard-img .tcard-fg{position:relative;z-index:1}
/* Velo superior: garantiza que el badge SIEMPRE caiga sobre oscuro,
   aunque el cartel sea blanco en su parte de arriba. */
.tcard-img::after{content:'';position:absolute;top:0;left:0;right:0;height:72px;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0));pointer-events:none}
.tcard-img iconify-icon{font-size:56px;color:var(--line-strong)}
.tcard.vivo .tcard-img{background:linear-gradient(135deg,#1a2416,#101610)}
.tcard.vivo .tcard-img iconify-icon{color:rgba(198,255,52,.30)}
.tcard.prox .tcard-img{background:linear-gradient(135deg,#14211f,#0f1614)}
.tcard.prox .tcard-img iconify-icon{color:rgba(153,225,217,.28)}
.tcard.fin .tcard-img{background:linear-gradient(135deg,#1c1c1c,#141414)}

.tcard-badge{position:absolute;top:11px;right:11px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font-family:var(--font-data);font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(10,10,10,.78);border:1px solid var(--line-strong);color:var(--text);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tcard-badge.live{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);box-shadow:0 2px 10px rgba(0,0,0,.45)}
/* TARJETA-1 (bug cazado): antes era var(--turq-dim), o sea turquesa al 10%
   de opacidad. Sobre la parte clara de un cartel, el texto turquesa sobre
   blanco desaparecia: "no se ve la leyenda de abierto". Ahora es una
   pildora TURQUESA SOLIDA con tinta oscura, legible sobre lo que sea. */
.tcard-badge.abierta{background:var(--turq);border-color:var(--turq);color:#0c1a18;
  box-shadow:0 2px 10px rgba(0,0,0,.45)}
.tcard-badge .dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--lime-ink)}

.tcard-body{display:flex;flex-direction:column;gap:6px;padding:15px 17px 17px}
.tcard-body b{font-family:var(--font-display);font-weight:700;font-size:18px;
  line-height:1.15;letter-spacing:-.01em;color:var(--text);transition:color .15s}
.tcard:hover .tcard-body b{color:var(--lime)}
.tcard-body small{font-family:var(--font-data);font-size:10px;letter-spacing:.06em;
  color:var(--text-3);line-height:1.45}

/* Cuenta regresiva del cierre: el mismo ámbar del "cuando" (v5.71). */
.tcard-clock{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.tcard-clock .lb{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-data);font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold)}
.tcard-clock .lb iconify-icon{flex-shrink:0;font-size:12px;color:var(--gold)}
.tcard-clock .u{display:inline-flex;align-items:baseline;gap:2px;
  padding:3px 8px;border-radius:6px;background:var(--gold-dim);
  font-family:var(--font-data);font-size:9px;font-weight:700;
  color:color-mix(in srgb, var(--gold) 55%, #171717)}
.tcard-clock .u b{font-family:var(--font-data);font-variant-numeric:tabular-nums;
  font-size:13px;font-weight:700;color:var(--gold)}

/* ═══ Pie ═══ */
.pub-foot{padding:28px 22px 34px;text-align:center;border-top:1px solid var(--line)}
.pub-foot-l1{font-family:var(--font-ui);font-size:12.5px;color:var(--text-3)}
.pub-foot-l1 b{color:var(--text-2);font-weight:700}
.pub-foot-l1 a{color:var(--lime);text-decoration:none}
.pub-foot-l1 a:hover{text-decoration:underline}
.pub-foot-l2{margin-top:6px;font-family:var(--font-data);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.pub-foot-l2 a{color:var(--text-2);text-decoration:none}
.pub-foot-l2 a:hover{color:var(--lime)}

@media (max-width:520px){
  .tgrid{grid-template-columns:1fr}
  .cat-hero{padding:26px 16px 24px}
}
/* En pantallas anchas se les pone techo para que, con uno o dos torneos, no
   se repartan todo el ancho entre pocas tarjetas. Se alinean a la izquierda. */
@media (min-width:960px){
  .tgrid{grid-template-columns:repeat(auto-fill,minmax(300px,340px));justify-content:start}
}

/* ===================================================================
   MODULO registro.php  -  LANDING DEL TORNEO
   =================================================================== */

/* --- Heroe: datos a la izquierda, flyer a la derecha --- */
.reg-hero{display:grid;grid-template-columns:1fr;gap:22px;
  padding:26px;margin-bottom:24px;position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.reg-hero::before{content:"";position:absolute;inset:-50% -20% auto;height:260px;
  background:radial-gradient(55% 100% at 30% 0%,rgba(198,255,52,.09),transparent 70%);
  pointer-events:none}
.reg-hero.has-flyer{grid-template-columns:1fr}
@media (min-width:860px){
  .reg-hero.has-flyer{grid-template-columns:1fr 290px;align-items:start}
}
.reg-hero-main{position:relative;z-index:1;min-width:0}
.reg-hero-main h1{font-family:var(--font-display);font-weight:700;
  font-size:clamp(24px,3.6vw,36px);line-height:1.08;letter-spacing:-.02em;
  color:var(--text);margin-bottom:14px}

.reg-badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.reg-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:6px;
  font-family:var(--font-data);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(255,255,255,.05);color:var(--text-2)}
.reg-badge.on{background:var(--lime-dim);color:var(--lime)}
.reg-badge.off{background:var(--loss-dim);color:var(--loss)}
.reg-badge iconify-icon{font-size:13px}

.reg-meta{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.reg-meta .l{display:flex;align-items:flex-start;gap:10px;
  font-family:var(--font-ui);font-size:13.5px;color:var(--text-2);line-height:1.45}
.reg-meta .l iconify-icon{flex-shrink:0;margin-top:2px;color:var(--lime);font-size:16px}
.reg-meta .l b{color:var(--text);font-weight:700}

/* --- Botones de accion --- */
.reg-cta-row{display:flex;flex-wrap:wrap;gap:10px}
.reg-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;border:1px solid var(--lime);
  background:var(--lime);color:var(--lime-ink);
  font-family:var(--font-ui);font-weight:800;font-size:14px;
  text-decoration:none;cursor:pointer;
  transition:background .15s,transform .12s}
.reg-cta:hover{background:#d3ff5e}
.reg-cta:active{transform:scale(.97)}
.reg-cta iconify-icon{font-size:17px}
.reg-cta.disabled{background:var(--surface-3);border-color:var(--line-strong);
  color:var(--text-3);cursor:not-allowed;pointer-events:none}
/* Pulso discreto: llama sin gritar, y se apaga si el sistema pide menos motion. */
.reg-pulso{animation:regPulso 2.6s ease-in-out infinite}
@keyframes regPulso{0%,100%{box-shadow:0 0 0 0 rgba(198,255,52,.34)}
  60%{box-shadow:0 0 0 12px rgba(198,255,52,0)}}
@media (prefers-reduced-motion:reduce){.reg-pulso{animation:none}}

.reg-cta-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:999px;
  background:transparent;border:1px solid var(--lime-line);color:var(--text-2);
  font-family:var(--font-ui);font-weight:700;font-size:13px;
  text-decoration:none;cursor:pointer;
  transition:border-color .15s,color .15s,transform .12s}
.reg-cta-ghost:hover{border-color:var(--lime);color:var(--text)}
.reg-cta-ghost:active{transform:scale(.97)}
.reg-cta-ghost iconify-icon{color:var(--lime);font-size:16px}
.reg-cta-ghost .n{padding:2px 8px;border-radius:999px;
  font-family:var(--font-data);font-size:10px;font-weight:700;
  background:var(--lime-dim);color:var(--lime)}

/* --- Flyer y su lupa --- */
.reg-hero-flyer{position:relative;z-index:1;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);cursor:zoom-in}
.reg-flyer-img{display:block;width:100%;height:auto}
.reg-flyer-zoom{position:absolute;right:10px;bottom:10px;
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  font-family:var(--font-data);font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(0,0,0,.6);border:1px solid var(--line-strong);color:var(--text-2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.reg-hero-flyer-ph{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.reg-hero-flyer-ph iconify-icon{font-size:46px;color:var(--line-strong)}

.reg-flyer-lb{position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(8,8,8,.92);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.reg-flyer-lb.open{display:flex}
.reg-flyer-lb img{max-width:100%;max-height:92vh;border-radius:12px;display:block}
.reg-flyer-lb-x{position:absolute;top:18px;right:18px;
  width:38px;height:38px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);border:1px solid var(--line-strong);color:var(--text);
  font-family:var(--font-ui);font-size:20px;line-height:1;cursor:pointer}
.reg-flyer-lb-x:hover{border-color:var(--lime);color:var(--lime)}

/* --- Secciones --- */
.reg-sec{margin:26px 0 14px}
.reg-sec h2{display:flex;align-items:center;gap:9px;margin-bottom:6px;
  font-family:var(--font-data);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2)}
.reg-sec h2 iconify-icon{color:var(--lime);font-size:15px}
.hint{font-family:var(--font-ui);font-size:13px;color:var(--text-3);line-height:1.5}

/* --- Filtro de rama (Varonil / Femenil / Mixtos) --- */
.reg-catfilter{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 14px}
.reg-catfilter button{display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--lime-line);color:var(--text-2);
  font-family:var(--font-ui);font-weight:700;font-size:12.5px;
  transition:border-color .15s,color .15s,background .15s,transform .12s}
.reg-catfilter button:hover{border-color:var(--lime);color:var(--text)}
.reg-catfilter button:active{transform:scale(.97)}
.reg-catfilter button.on,.reg-catfilter button.active{
  background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.reg-catfilter button iconify-icon{font-size:15px}
.reg-catfilter .cnt{padding:2px 8px;border-radius:999px;
  font-family:var(--font-data);font-size:10px;font-weight:700;
  background:rgba(255,255,255,.06);color:var(--text-3)}
.reg-catfilter button.on .cnt,.reg-catfilter button.active .cnt{
  background:rgba(0,0,0,.2);color:var(--lime-ink)}
@media (max-width:900px){
  .reg-catfilter{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .reg-catfilter::-webkit-scrollbar{display:none}
  .reg-catfilter button{flex:0 0 auto;white-space:nowrap}
}

/* --- Lista de categorias --- */
.reg-cats{display:flex;flex-direction:column;gap:9px}
.reg-cat{display:flex;align-items:center;gap:12px;
  padding:13px 15px;border-radius:12px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .15s,transform .12s}
.reg-cat:hover{border-color:var(--lime-line);transform:translateY(-2px)}
.reg-cat:active{transform:scale(.99)}
.reg-cat-ico{flex-shrink:0;width:38px;height:38px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--lime-dim);color:var(--lime);font-size:18px}
.reg-cat-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.reg-cat-nm{font-family:var(--font-ui);font-weight:700;font-size:14px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reg-cat:hover .reg-cat-nm{color:var(--lime)}
.reg-cat-mod{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-data);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3)}
.ins-hint{padding:2px 8px;border-radius:6px;
  background:var(--gold-dim);color:var(--gold);letter-spacing:.08em}
.reg-cat-pr{flex-shrink:0;padding:5px 11px;border-radius:8px;
  font-family:var(--font-data);font-size:12px;font-weight:700;
  background:var(--lime-dim);color:var(--lime)}
.reg-cat-chev{flex-shrink:0;color:var(--text-3);font-size:17px}
.reg-cat:hover .reg-cat-chev{color:var(--lime)}

/* --- Tarjetas de informacion (costo, contacto, sede) --- */
.reg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;margin:22px 0}
.reg-card{display:flex;flex-direction:column;gap:5px;padding:18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.reg-card .ic{width:36px;height:36px;border-radius:10px;margin-bottom:5px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--lime-dim);color:var(--lime);font-size:18px}
.reg-card .big{font-family:var(--font-display);font-weight:700;font-size:19px;
  line-height:1.2;color:var(--text)}
.reg-card .sm{font-family:var(--font-data);font-size:10px;letter-spacing:.08em;
  color:var(--text-3);line-height:1.5}
.reg-card .link{margin-top:9px;display:inline-flex;align-items:center;gap:7px;
  align-self:flex-start;padding:7px 14px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--lime-line);color:var(--lime);
  font-family:var(--font-ui);font-weight:700;font-size:12px;text-decoration:none;
  transition:border-color .15s,transform .12s}
.reg-card .link:hover{border-color:var(--lime)}
.reg-card .link:active{transform:scale(.97)}

/* --- Cierre de la pagina ---
   CENTRADO y apilado, como en el disenio anterior: titulo grande, texto
   debajo y el boton al final. Yo lo habia dejado como fila flex, y el titulo,
   la frase y el boton quedaban los tres en un renglon apretado.
   Lleva un resplandor lime en la esquina, hermano del que tiene el heroe. */
.reg-final{position:relative;overflow:hidden;text-align:center;
  padding:34px 26px;margin:26px 0 8px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.reg-final::after{content:"";position:absolute;right:-70px;top:-70px;
  width:320px;height:320px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 30%,rgba(198,255,52,.07),transparent 62%)}
.reg-final h2{position:relative;z-index:1;margin:0 0 10px;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(24px,3.4vw,32px);line-height:1.08;letter-spacing:-.02em;
  color:var(--text)}
.reg-final p{position:relative;z-index:1;margin:0 0 20px;
  font-family:var(--font-ui);font-size:14px;color:var(--text-2);line-height:1.55}
/* Los botones, centrados y en su propia fila. */
.reg-final .reg-cta,.reg-final .reg-cta-ghost{position:relative;z-index:1;
  margin:0 5px 8px;vertical-align:middle}

/* ===================================================================
   MODALES de la landing
   Los tres se abren con la clase .open, igual que en la version
   anterior: el JavaScript no se toco, solo cambia como se ven.
   =================================================================== */

.reg-dep-ov,.rpm,.lgm{position:fixed;inset:0;z-index:9990;display:none;
  align-items:center;justify-content:center;padding:16px;
  background:rgba(6,6,6,.82);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* OJO CON LOS NOMBRES DE ESTADO: cada modal se abre con una clase distinta,
   y son las que pone el JavaScript de registro.php. No inventarlas.
       .reg-flyer-lb   ->  open
       .reg-dep-ov     ->  open
       .rpm            ->  abierta      (regPre, "Ver el torneo")
       .lgm            ->  abierta      (lgmModal, lista de inscritos)
   Se aceptan las dos en todos por si algun dia se unifican. El atributo
   hidden del lgm tambien se respeta: el JS lo usa junto con la clase. */
.reg-dep-ov.open,.rpm.open,.lgm.open,
.reg-dep-ov.abierta,.rpm.abierta,.lgm.abierta{display:flex}
.lgm[hidden]{display:none}

.reg-dep-modal,.rpm-card,.lgm-card{width:100%;min-width:0;
  display:flex;flex-direction:column;max-height:calc(100vh - 32px);
  background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:var(--r-card);overflow:hidden}
/* dvh: en Safari de iOS 100vh incluye lo que tapan las barras del navegador,
   y el modal quedaba mas alto que la pantalla (nos paso en app., v5.40). */
.reg-dep-modal,.rpm-card,.lgm-card{max-height:calc(100dvh - 32px)}
.reg-dep-modal{max-width:460px}
.rpm-card{max-width:440px}
.lgm-card{max-width:660px}

.reg-dep-h,.rpm-h,.lgm-h{display:flex;align-items:center;gap:10px;flex-shrink:0;
  padding:16px 18px;border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--text)}
.reg-dep-h iconify-icon,.rpm-h iconify-icon,.lgm-h iconify-icon{color:var(--lime);font-size:19px}
.reg-dep-h .t{flex:1;min-width:0}
.reg-dep-h .x,.rpm-x,.lgm-x{flex-shrink:0;margin-left:auto;
  width:32px;height:32px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  font-family:var(--font-ui);font-size:19px;line-height:1;cursor:pointer;
  transition:border-color .15s,color .15s}
.reg-dep-h .x:hover,.rpm-x:hover,.lgm-x:hover{border-color:var(--lime);color:var(--lime)}

.reg-dep-b,.rpm-body,.lgm-body{flex:1;min-height:0;min-width:0;overflow-y:auto;
  padding:16px 18px 18px;scrollbar-width:none}
.reg-dep-b::-webkit-scrollbar,.rpm-body::-webkit-scrollbar,.lgm-body::-webkit-scrollbar{display:none}

/* --- Modal de deposito --- */
.reg-dep-row{display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.reg-dep-row:last-child{border-bottom:0}
.reg-dep-row .l{flex-shrink:0;min-width:96px;
  font-family:var(--font-data);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3)}
.reg-dep-row .v{flex:1;min-width:0;display:flex;align-items:center;gap:9px}
.reg-dep-row .val{flex:1;min-width:0;font-family:var(--font-data);font-size:13.5px;
  font-weight:700;color:var(--text);word-break:break-all}
.cp{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--lime-line);color:var(--lime);
  font-family:var(--font-data);font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;transition:border-color .15s,transform .12s}
.cp:hover{border-color:var(--lime)}
.cp:active{transform:scale(.95)}
.cp.done{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
/* Pie del modal: a quien mandar el comprobante.
   Va en COLUMNA y no en fila. El texto de arriba es hijo directo del
   contenedor, asi que con flex-wrap competia como si fuera una tarjeta mas; y
   las dos fichas se repartian a la fuerza un ancho que no alcanzaba: el correo
   se cortaba y el telefono partia en dos renglones. */
.reg-dep-foot{display:flex;flex-direction:column;gap:9px;margin-top:16px;
  padding-top:15px;border-top:1px solid var(--line);
  font-family:var(--font-ui);font-size:12.5px;color:var(--text-3)}
.reg-dep-foot .cf{display:flex;align-items:center;gap:10px;min-width:0;
  padding:11px 13px;border-radius:11px;
  background:var(--surface);border:1px solid var(--line);
  font-family:var(--font-ui);font-size:12.5px;color:var(--text-2)}
/* La etiqueta no encoge; el valor toma lo que quede y se recorta con puntos
   suspensivos si el correo es muy largo. El boton de copiar siempre visible. */
.reg-dep-foot .cf b{flex-shrink:0;
  font-family:var(--font-data);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3)}
.reg-dep-foot .cf > span{flex:1;min-width:0;color:var(--text);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reg-dep-foot .cf .cp{flex-shrink:0;margin-left:auto}

/* --- Modal recordatorio --- */
/* Este modal va CENTRADO, como en el disenio anterior: titulo, fecha, reloj,
   texto y botones apilados al centro. Es un aviso, no un formulario. */
.rpm-body{text-align:center}
.rpm-tit{font-family:var(--font-display);font-weight:700;font-size:24px;
  line-height:1.2;color:var(--text);margin-bottom:10px}
.rpm-fecha{display:inline-flex;align-items:center;gap:7px;margin-bottom:4px;
  padding:5px 11px;border-radius:6px;
  font-family:var(--font-data);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:var(--gold-dim);color:var(--gold)}
.rpm-txt{margin:16px 0 0;font-family:var(--font-ui);font-size:13.5px;
  color:var(--text-2);line-height:1.6}
.rpm-txt b{color:var(--text);font-weight:700}
/* Los botones en columna y centrados, con el principal arriba: el original ya
   los tenia asi y la gente se acostumbro a ese orden. */
.rpm-acts{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:20px}
.rpm-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:999px;
  background:var(--lime);border:1px solid var(--lime);color:var(--lime-ink);
  font-family:var(--font-ui);font-weight:800;font-size:13.5px;
  text-decoration:none;cursor:pointer;transition:background .15s,transform .12s}
.rpm-cta:hover{background:#d3ff5e}
.rpm-cta:active{transform:scale(.97)}
/* CIERRE-1 (2026-08-01): el boton del modal cuando ya cerraron inscripciones.
   Se queda en su lugar (antes desaparecia y la gente no entendia que paso),
   pero apagado y con candado: informa sin invitar. */
.rpm-cta-off{background:var(--surface-3);border:1px solid var(--line-strong);
  color:var(--text-3);cursor:not-allowed;pointer-events:none;animation:none}
.rpm-cta-off:hover{background:var(--surface-3)}
/* El secundario era un enlace subrayado, no un boton con borde: asi no compite
   con el principal. Se conserva ese peso. */
.rpm-ghost{padding:4px 6px;cursor:pointer;
  background:none;border:0;color:var(--text-3);
  font-family:var(--font-ui);font-weight:700;font-size:12.5px;
  text-decoration:underline;text-underline-offset:3px;
  transition:color .15s}
.rpm-ghost:hover{color:var(--lime)}

/* --- Modal de inscritos ---
   Mismo componente que la lista de app., con los nombres de clase de este
   sitio (.lgm-* en vez de .lg-*). El acordeon se abre con .abierta. */
.lgm-sub{flex-shrink:0;padding:12px 18px 14px;border-bottom:1px solid var(--line);
  font-family:var(--font-ui);font-size:12.5px;color:var(--text-3)}
.lgm-sub b{color:var(--text-2);font-weight:700}
.lgm-buscar{position:relative;margin-bottom:14px}
.lgm-buscar iconify-icon{position:absolute;left:15px;top:0;height:38px;
  display:flex;align-items:center;pointer-events:none;
  color:var(--text-3);font-size:16px;z-index:1}
.lgm-buscar input{width:100%;height:38px;padding:0 16px 0 40px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line-strong);color:var(--text);
  font-family:var(--font-ui);font-size:13px;outline:none;transition:border-color .15s}
.lgm-buscar input::placeholder{color:var(--text-3)}
.lgm-buscar input:focus,.lgm-buscar input:focus-visible{outline:none;border-color:var(--lime)}
.lgm-buscar:focus-within iconify-icon{color:var(--lime)}

/* Valor por defecto de --rc, por si algun bloque llegara sin el. */
.lgm-bloque{--rc:var(--lime);margin-bottom:18px}
.lgm-bloque:last-child{margin-bottom:0}
/* Cada rama con SU color de genero. El PHP ya ponia --rc en .lgm-bloque; mi
   version anterior lo ignoraba y pintaba las tres en lime. Igual que app. */
.lgm-rama{display:flex;align-items:center;gap:9px;padding:0 2px 8px;margin-bottom:10px;
  border-bottom:2px solid color-mix(in srgb, var(--rc) 45%, transparent);
  font-family:var(--font-data);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:color-mix(in srgb, var(--rc) 85%, #fff)}
.lgm-rama iconify-icon{flex-shrink:0;color:var(--rc);font-size:15px}
.lgm-rama .tt{color:inherit}
.lgm-rama .nn{margin-left:auto;flex-shrink:0;padding:3px 9px;border-radius:999px;
  font-size:9px;letter-spacing:.1em;
  background:color-mix(in srgb, var(--rc) 16%, #171717);
  color:color-mix(in srgb, var(--rc) 78%, #fff)}

.lgm-cat{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:0 14px;margin-bottom:8px;transition:border-color .15s}
.lgm-cat:last-child{margin-bottom:0}
.lgm-cat:hover{border-color:color-mix(in srgb, var(--rc) 40%, transparent)}
/* El acordeon de categoria se abre con 'abierto', en masculino: asi lo
   escribe classList.toggle en registro.php. Se aceptan los dos generos. */
.lgm-cat.abierto,.lgm-cat.abierta{border-color:color-mix(in srgb, var(--rc) 50%, transparent)}
.lgm-cab{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
  padding:11px 0;cursor:pointer}
.lgm-cab .cod{flex-shrink:0;padding:3px 8px;border-radius:6px;
  font-family:var(--font-data);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  background:color-mix(in srgb, var(--rc) 18%, #171717);
  color:color-mix(in srgb, var(--rc) 82%, #fff)}
.lgm-cab .nm{flex:1;min-width:0;font-family:var(--font-ui);font-size:14.5px;font-weight:700;
  color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgm-cab:hover .nm{color:var(--rc)}
.lgm-cab .ct{flex-shrink:0;padding:3px 9px;border-radius:999px;
  font-family:var(--font-data);font-size:10px;
  background:rgba(255,255,255,.04);color:var(--text-3)}
.lgm-cab .fl{flex-shrink:0;color:var(--text-3);font-size:16px;transition:transform .15s}
.lgm-cat.abierto .lgm-cab .fl,.lgm-cat.abierta .lgm-cab .fl{transform:rotate(180deg);color:var(--rc)}

.lgm-cuerpo{display:none;flex-direction:column;gap:6px;padding-bottom:10px}
.lgm-cat.abierto .lgm-cuerpo,.lgm-cat.abierta .lgm-cuerpo{display:flex}
.lgm-par{display:flex;align-items:center;gap:10px;padding:7px 2px;
  border-bottom:1px solid var(--line)}
.lgm-par:last-child{border-bottom:0}
.lgm-par .num{flex-shrink:0;min-width:18px;
  font-family:var(--font-data);font-size:11px;color:var(--text-3)}
.lgm-par .jj{flex:1;min-width:0;font-family:var(--font-ui);font-size:13px;
  font-weight:600;color:var(--text-2)}
.lgm-par .jj b{font-weight:700;color:var(--text)}
.lgm-par .jj .sep{margin:0 5px;color:var(--text-3);font-weight:400}
.lgm-vacio{padding:22px 12px;text-align:center;
  font-family:var(--font-ui);font-size:13px;color:var(--text-3)}


/* ===================================================================
   MODULO inscribir.php  -  FORMULARIO DE INSCRIPCION
   El markup y el JavaScript no se tocaron: los name= de los campos son
   el contrato con inscribir_guardar.php. Aqui solo se viste.
   =================================================================== */

.ins-head{margin-bottom:22px}
.ins-head .eyebrow{margin-bottom:8px;
  font-family:var(--font-data);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime)}
.ins-head h1{font-family:var(--font-display);font-weight:700;
  font-size:clamp(22px,3.4vw,32px);line-height:1.1;letter-spacing:-.02em;color:var(--text)}
.ins-head .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px;
  font-family:var(--font-data);font-size:10px;letter-spacing:.08em;color:var(--text-3)}

/* --- Pasos --- */
.step{padding:20px;margin-bottom:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.step-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.step-n{flex-shrink:0;width:30px;height:30px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--lime);color:var(--lime-ink);
  font-family:var(--font-data);font-size:13px;font-weight:700}
.step-t{flex:1;min-width:0;font-family:var(--font-ui);font-size:12px;
  font-weight:700;color:var(--text-3);line-height:1.3}
.step-t .serif{display:block;font-family:var(--font-display);font-weight:700;
  font-size:17px;letter-spacing:-.01em;color:var(--text)}

/* --- Selector de categoria --- */
.rama-sel{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.rama-sel button{display:inline-flex;align-items:center;gap:8px;
  padding:7px 15px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--lime-line);color:var(--text-2);
  font-family:var(--font-ui);font-weight:700;font-size:12.5px;
  transition:border-color .15s,color .15s,background .15s,transform .12s}
.rama-sel button:hover{border-color:var(--lime);color:var(--text)}
.rama-sel button:active{transform:scale(.97)}
.rama-sel button.on{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.rama-sel button iconify-icon{font-size:15px}

.cat-sel{position:relative}
.cat-btn{width:100%;display:flex;align-items:center;gap:10px;
  padding:13px 15px;border-radius:11px;cursor:pointer;text-align:left;
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text);
  font-family:var(--font-ui);font-weight:700;font-size:14px;
  transition:border-color .15s}
.cat-btn:hover,.cat-btn.open{border-color:var(--lime)}
.cat-btn .ph{flex:1;min-width:0;color:var(--text-3);font-weight:600;
  /* CATNOM-1 (2026-08-01): antes nowrap+ellipsis se comian el parentesis
     distintivo ("Categoria A+B" vs "C" vs "D") y la gente se inscribia en
     la categoria equivocada. El nombre envuelve; el boton crece solo. */
  white-space:normal;overflow:visible;line-height:1.35}
.cat-btn .chev{flex-shrink:0;color:var(--text-3);font-size:17px;transition:transform .15s}
.cat-btn.open .chev{transform:rotate(180deg);color:var(--lime)}

.cat-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  display:none;max-height:300px;overflow-y:auto;padding:6px;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:11px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);scrollbar-width:none}
.cat-menu::-webkit-scrollbar{display:none}
.cat-menu.open{display:block}
.cat-menu button{width:100%;display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:9px;cursor:pointer;text-align:left;
  background:transparent;border:0;color:var(--text-2);
  font-family:var(--font-ui);font-weight:600;font-size:13.5px;
  transition:background .15s,color .15s}
.cat-menu button:hover{background:var(--lime-dim);color:var(--lime)}
.cat-menu button b{color:var(--text);font-weight:700}
.cat-menu button .pr{margin-left:auto;flex-shrink:0;
  font-family:var(--font-data);font-size:11px;font-weight:700;color:var(--lime)}

/* --- Tarjetas de jugador --- */
/* Dos columnas en dobles, una en singles. El modificador .dobles lo pone el
   JavaScript con players.className, no viene en el HTML: por eso hay que
   buscarlo a mano al auditar cobertura.
   El corte en 620px es el mismo del disenio anterior; la gente ya se
   acostumbro a ver las dos parejas lado a lado. */
.players{display:grid;grid-template-columns:1fr;gap:14px}
.players.dobles{grid-template-columns:1fr 1fr}
@media (max-width:620px){
  .players.dobles{grid-template-columns:1fr}
}
.pcard{padding:16px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line)}
.pcard.p2{border-color:var(--turq-line)}
.pcard-h{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.pcard-ic{flex-shrink:0;width:34px;height:34px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--lime-dim);color:var(--lime);font-size:17px}
.pcard.p2 .pcard-ic{background:var(--turq-dim);color:var(--turq)}
.pcard-tt{flex:1;min-width:0;font-family:var(--font-data);font-size:9.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.pcard-tt b{display:block;margin-top:3px;
  font-family:var(--font-ui);font-size:14px;letter-spacing:0;
  text-transform:none;color:var(--text)}
.pfound{display:flex;align-items:center;gap:8px;margin-bottom:12px;
  padding:9px 12px;border-radius:9px;
  background:var(--lime-dim);border:1px solid var(--lime-line);
  font-family:var(--font-ui);font-size:12.5px;color:var(--lime)}

/* --- Campos --- */
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.fld:last-child{margin-bottom:0}
/* Etiquetas de campo en BLANCO. Estaban en --text-3 (#6e6e6e), y a 9.5px en
   mayusculas con separacion de letras se leian a duras penas: son las que le
   dicen al usuario que va en cada casilla, tienen que verse. */
.fld label{font-family:var(--font-data);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.fld .req{color:var(--lime)}
.fld input,.fld textarea,.fld select{width:100%;padding:11px 14px;border-radius:9px;
  background:var(--surface);border:1px solid var(--line-strong);color:var(--text);
  font-family:var(--font-ui);font-size:14px;outline:none;
  transition:border-color .15s}
.fld textarea{min-height:82px;resize:vertical;line-height:1.5}
.fld input::placeholder,.fld textarea::placeholder{color:var(--text-3)}
.fld input:focus,.fld textarea:focus,.fld select:focus,
.fld input:focus-visible,.fld textarea:focus-visible{outline:none;border-color:var(--lime)}
.fld input.bad,.fld textarea.bad{border-color:var(--loss)}
.fld .tel{display:flex;align-items:stretch;gap:0}
.fld .tel .flag{flex-shrink:0;display:inline-flex;align-items:center;
  padding:0 12px;border-radius:9px 0 0 9px;
  background:var(--surface-3);border:1px solid var(--line-strong);border-right:0;
  font-family:var(--font-data);font-size:12px;font-weight:700;color:var(--text-2)}
.fld .tel input{border-radius:0 9px 9px 0}

/* --- Genero en dobles mixtos --- */
.gsel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:13px;
  padding:11px 13px;border-radius:9px;
  background:var(--surface);border:1px solid var(--line)}
.glbl{font-family:var(--font-data);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.gbtns{display:flex;gap:8px}
.gbtns button{padding:6px 15px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  font-family:var(--font-ui);font-weight:700;font-size:12.5px;
  transition:border-color .15s,color .15s,background .15s}
.gbtns button:hover{border-color:var(--lime);color:var(--text)}
.gbtns button.on{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.gauto{display:flex;align-items:center;gap:9px;margin-bottom:13px;
  padding:10px 13px;border-radius:9px;
  background:var(--turq-dim);border:1px solid var(--turq-line);
  font-family:var(--font-ui);font-size:12.5px;color:var(--turq)}
.gauto iconify-icon{flex-shrink:0;font-size:16px}

/* --- Terminos, captcha y envio --- */
.terms{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  padding:13px;border-radius:9px;
  background:var(--surface-2);border:1px solid var(--line);
  font-family:var(--font-ui);font-size:13px;color:var(--text-2);line-height:1.5}
.terms.bad{border-color:var(--loss)}
.terms input{flex-shrink:0;width:18px;height:18px;margin-top:1px;accent-color:var(--lime)}
.terms a{color:var(--lime);text-decoration:none}
.terms a:hover{text-decoration:underline}
.cf-turnstile{margin:16px 0 4px;min-height:66px}
.submit{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin-top:16px;padding:15px 24px;border-radius:999px;cursor:pointer;
  background:var(--lime);border:1px solid var(--lime);color:var(--lime-ink);
  font-family:var(--font-ui);font-weight:800;font-size:15px;
  transition:background .15s,transform .12s}
.submit:hover{background:#d3ff5e}
.submit:active{transform:scale(.99)}
.submit iconify-icon{font-size:18px}
.lock{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;
  font-family:var(--font-data);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3)}
.lock iconify-icon{color:var(--lime);font-size:13px}

/* --- Modal de validacion del formulario: MOVIDO (t-v27, 2026-08-01) ---
   Sus reglas vivian aqui bajo el nombre .mod, que chocaba con la
   etiqueta Pareja/Individual de .cat-opt (y la dejaba invisible).
   El modal ahora se llama .val-ov / .val-card, al final de la hoja. */

/* Girito del boton mientras envia. */
.mbSpin{display:inline-block;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(19,22,0,.3);border-top-color:var(--lime-ink);
  animation:mbSpin .7s linear infinite}
@keyframes mbSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mbSpin{animation-duration:2s}}

/* --- Ajustes finos de telefono --- */
@media (max-width:600px){
  .reg-hero{padding:20px}
  .step{padding:16px}
  .reg-cta,.reg-cta-ghost{flex:1 1 100%}
  .reg-final{padding:26px 18px}
  .reg-final .reg-cta,.reg-final .reg-cta-ghost{display:flex;width:100%;margin:0 0 9px}
  .reg-dep-row{flex-direction:column;align-items:flex-start;gap:6px}
  .reg-dep-row .l{min-width:0}
}

/* --- Cierre de cobertura: las clases que la auditoria encontro sueltas --- */

/* Dentro de los botones de rama: nombre y conteo de categorias. */
.rama-sel button .rn{font-weight:700}
.rama-sel button .rc{padding:2px 8px;border-radius:999px;
  font-family:var(--font-data);font-size:9.5px;font-weight:700;letter-spacing:.06em;
  background:rgba(255,255,255,.06);color:var(--text-3)}
.rama-sel button.on .rc{background:rgba(0,0,0,.2);color:var(--lime-ink)}

/* Texto de ayuda al pie de un campo o de un bloque. */
/* Texto de ayuda bajo un campo. Sube a --text-2 y no a blanco puro: es apoyo,
   y si va del mismo tono que la etiqueta las dos compiten. Con --text-2 se lee
   sin problema y la jerarquia se mantiene. */
.ayuda{display:block;margin-top:7px;
  font-family:var(--font-ui);font-size:12.5px;color:var(--text-2);line-height:1.5}

/* Marca de "(opcional)" junto a una etiqueta. */
.opc{font-family:var(--font-ui);font-size:11px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--text-3)}

/* Modificadores sobre bases ya vestidas: solo el matiz de color. */
.mb-sh.pdf iconify-icon{color:var(--lime)}
.mb-sh.wa iconify-icon{color:#4ade80}
/* WABTN-1 (2026-08-16, pedido de Roberto): el boton de WhatsApp vestia el
   verde de WhatsApp y desentonaba; ahora hereda el .link de la casa, igual
   que "Ver datos de deposito" y "Como llegar", en ambos temas. */

/* ===================================================================
   CHOQUES DE NOMBRE CON EL SISTEMA DE APP
   -------------------------------------------------------------------
   Este archivo lleva el carbon.css de app completo, y app usa algunos
   nombres de clase que aqui significan otra cosa. Se detectaron
   auditando TODA clase usada en este sitio contra las reglas raiz de
   app, y hay que reafirmarlas para que ganen.

   Es el mismo problema que nos costo la v5.36 en app, cuando el markup
   copiado de este sitio trajo un .mb-sh que alla era un bloque grande.
   =================================================================== */

/* .pcard: en app es la TARJETA DE JUGADOR del ranking, una fila con
   avatar, nombre y puesto (display:flex). Aqui es la tarjeta de datos
   de un jugador en el formulario, y sus campos deben APILARSE.
   Sin esto, el email, los nombres y el telefono salian en una sola
   fila estrujada. */
.pcard{display:block}

/* .flag: en app es la BANDERITA de pais del ranking, una imagen de
   20x14 con overflow oculto. Aqui es el prefijo "+52" del telefono, y
   con esas medidas quedaba reducido a una astilla. */
.fld .tel .flag{width:auto;height:auto;overflow:visible;border-radius:9px 0 0 9px}

/* --- Clases que solo existen en el JavaScript ---
   Estas no aparecen en ningun class= del PHP: las crea el script al vuelo.
   Se detectaron auditando classList.add y className, no solo el HTML. */

/* Botones de rama. El JS les pone --rc con el color del genero, igual que
   el filtro de categorias de app usa --pc. Cada rama con su color. */
.rama-btn{--rc:var(--lime);display:inline-flex;align-items:center;gap:8px;
  padding:7px 15px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid color-mix(in srgb, var(--rc) 38%, transparent);
  color:var(--text-2);font-family:var(--font-ui);font-weight:700;font-size:12.5px;
  transition:border-color .15s,color .15s,background .15s,transform .12s}
.rama-btn:hover{border-color:var(--rc);color:var(--text)}
.rama-btn:active{transform:scale(.97)}
.rama-btn.on{background:var(--rc);border-color:var(--rc);color:var(--lime-ink)}
.rama-btn iconify-icon{flex-shrink:0;color:var(--rc);font-size:15px}
.rama-btn.on iconify-icon{color:var(--lime-ink)}
.rama-btn .rn{font-weight:700}
.rama-btn .rc{padding:2px 8px;border-radius:999px;
  font-family:var(--font-data);font-size:9.5px;font-weight:700;letter-spacing:.06em;
  background:rgba(255,255,255,.06);color:var(--text-3)}
.rama-btn.on .rc{background:rgba(0,0,0,.22);color:var(--lime-ink)}

/* Opciones del desplegable de categoria. OJO: son <div>, no <button>, asi que
   una regla escrita como ".cat-menu button" no las alcanza. */
.cat-opt{display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:9px;cursor:pointer;
  color:var(--text-2);font-family:var(--font-ui);font-weight:600;font-size:13.5px;
  transition:background .15s,color .15s}
.cat-opt:hover{background:var(--lime-dim);color:var(--lime)}
.cat-opt .dot{flex-shrink:0;width:9px;height:9px;border-radius:50%}
.cat-opt .nm{flex:1;min-width:0;color:var(--text);font-weight:700;
  /* CATNOM-1: mismo remedio en las opciones del menu; ver nota en .cat-btn .ph.
     El <b> del parentesis lo pone inscribir.php para guiar el ojo a la
     diferencia entre categorias hermanas. */
  white-space:normal;overflow:visible;line-height:1.35}
.cat-opt .nm b{color:var(--lime);font-weight:800}
.cat-opt .nm .sub{display:block;margin-top:3px;font-family:var(--font-data);
  /* CATNOM-3b: en lima, a juego con el resaltado (pedido de Roberto). */
  font-size:10.5px;font-weight:700;letter-spacing:.2px;color:var(--lime)}
.cat-opt:hover .nm{color:var(--lime)}
.cat-opt .pr{flex-shrink:0;margin-left:auto;
  font-family:var(--font-data);font-size:11px;font-weight:700;color:var(--lime)}

/* --- Reloj de cierre de inscripciones (.mbrj) ---
   Lo genera pub_reloj_html(), que vive en admin/includes/pub_reloj.php y es
   COMPARTIDO con app. Ese archivo imprime su propio <style> con los colores
   del disenio anterior: naranja #bc5a34 en la etiqueta, verde oscuro #0b4a34
   en los numeros y fondo blanco en las cajas.

   No se toca el archivo del admin (lo usan los dos sitios). Se reviste desde
   aqui: como su <style> va dentro del HTML y gana por orden, hay que subir la
   especificidad. Por eso los selectores llevan .pub-wrap delante. */
.pub-wrap .mbrj-lb{font-family:var(--font-data);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.pub-wrap .mbrj-clk .u{background:var(--lime-dim);border:1px solid var(--lime-line);
  border-radius:8px;box-shadow:none;
  font-family:var(--font-data);font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:color-mix(in srgb, var(--lime) 55%, #171717)}
.pub-wrap .mbrj-clk .u b{font-family:var(--font-data);font-variant-numeric:tabular-nums;
  font-weight:700;color:var(--lime)}
/* Variante 'bloque' (portada del registro) y 'centrado' (modal): mismas
   medidas que traen de origen, solo el color cambia. */
.pub-wrap .mbrj.mbrj-bl .u,.pub-wrap .mbrj.mbrj-cn .u{border-color:var(--lime-line)}
.pub-wrap .mbrj.mbrj-bl .u b,.pub-wrap .mbrj.mbrj-cn .u b{color:var(--lime)}

/* El reloj dentro del modal de aviso (variante 'centrado' de pub_reloj_html).
   Su etiqueta va arriba y las cajas debajo, centradas. */
.rpm-body .mbrj{width:100%;justify-content:center;margin:16px 0 0}
.rpm-body .mbrj-clk{justify-content:center}

/* --- Menu de acciones de la landing ---
   El componente (.pub-acc, .pub-acc-menu, .pub-acc-item) viene tal cual del
   carbon de app: mismo boton hamburguesa, mismo desplegable, mismas medidas.
   Aqui solo se agregan las dos cosas que este menu tiene y el de app no. */

/* La opcion principal, destacada: es la razon de ser de la pagina. */
.pub-acc-item.destacado{background:var(--lime-dim);color:var(--lime);font-weight:800}
.pub-acc-item.destacado iconify-icon{color:var(--lime)}
.pub-acc-item.destacado:hover{background:color-mix(in srgb, var(--lime) 18%, #171717)}

/* Conteo de inscritos, al final de su renglon. */
.pub-acc-item .n{margin-left:auto;flex-shrink:0;padding:2px 8px;border-radius:999px;
  font-family:var(--font-data);font-size:10px;font-weight:700;
  background:var(--lime-dim);color:var(--lime)}

/* "Copiar enlace" confirma en el mismo renglon. */
.pub-acc-item.done{background:var(--lime);color:var(--lime-ink)}
.pub-acc-item.done iconify-icon{color:var(--lime-ink)}

/* La barra ya no queda vacia en esta pagina: el hueco recibe el menu. */
.pub-nav-slot .pub-acc{position:relative}

/* --- El menu de ESTE sitio se ancla solo ---
   En app, el JavaScript calcula las coordenadas del menu y las escribe en el
   elemento; por eso alla la hoja lo pone en position:fixed con top/right en
   auto (PASADA 12). Aqui el JS no hace ese calculo: solo muestra y esconde.

   Con right:auto heredado, el menu se quedaba sin anclaje y se salia por la
   derecha de la pantalla. Se le devuelve el posicionamiento absoluto respecto
   a su boton, que es lo que necesita.

   El margen de 12px al viewport evita que en telefonos angostos toque el
   borde; y como .pub-nav-slot esta alineado a la derecha, el menu abre hacia
   adentro. */
#mnuMenu{position:absolute;top:calc(100% + 8px);right:0;left:auto;
  min-width:min(268px, calc(100vw - 24px));max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain}
#mnuMenu[hidden]{display:none}
/* En telefonos angostos el menu ocupa el ancho util y se pega a la derecha
   con su margen, en vez de quedar como una columna estrecha. */
@media (max-width:420px){
  #mnuMenu{min-width:0;width:calc(100vw - 24px);right:-8px}
}

/* --- El scroll no debe quedar debajo de la barra fija ---
   El JS del formulario usa scrollIntoView() para bajar al paso siguiente, y
   el navegador lleva el elemento al TOPE de la ventana. Pero ahi esta la barra
   fija encima, asi que el encabezado del paso quedaba tapado: el usuario veia
   la pagina cortada a media tarjeta.

   scroll-margin-top le dice al navegador cuanto espacio dejar arriba al hacer
   ese salto. No mueve nada visualmente: solo cambia donde se detiene.

   Se le suman 12px al alto de la barra para que el paso no quede pegado.
   Se aplica a todo lo que el JS usa como destino: los pasos del formulario y
   las tarjetas de jugador (a las que salta al detectar un campo incompleto). */
html{scroll-padding-top:calc(var(--nav-h) + 12px)}
.step,.pcard,.reg-sec,.reg-final{scroll-margin-top:calc(var(--nav-h) + 12px)}
/* Los tres items del menu que en la landing abren un modal: el JS les quita el
   href, asi que necesitan verse clicables igual. */
.pub-acc-item.reg-btn-inscritos,.pub-acc-item.reg-btn-vertorneo,
.pub-acc-item.reg-dep-btn{cursor:pointer}
/* Con un modal abierto, el fondo no se desplaza. La clase la pone el JS al
   abrir y la quita al cerrar; en app se usaba igual pero nunca tuvo regla. */
body.pub-modal-abierta{overflow:hidden}

/* --- El boton del menu, cuadrado en la barra ---
   La regla que le da forma es ".pub-nav-slot .pub-acc-btn", del carbon de app.
   Pero en la v14 el menu salio del slot y se colgo directo de la barra, asi
   que esa regla dejo de alcanzarlo: heredaba el .pub-acc-btn base, que es una
   pildora ancha con texto, y se estiraba de lado a lado.
   Se reafirma por su id, que es de este sitio y no toca a app. */
#mnuBtn{width:38px;height:38px;padding:0;gap:0;flex-shrink:0;
  justify-content:center;border-radius:11px}
#mnuBtn iconify-icon{font-size:20px;color:var(--text)}
#mnuBtn:hover{border-color:var(--lime)}
#mnuBtn:hover iconify-icon{color:var(--lime)}
#mnuBtn[aria-expanded="true"]{border-color:var(--lime)}
#mnuBtn[aria-expanded="true"] iconify-icon{color:var(--lime)}
@media (max-width:900px){
  #mnuBtn{width:36px;height:36px}
}

/* --- La lista de inscritos en pantallas chicas ---
   Misma solucion que en app (v5.42): TODO EN UNA LINEA, apretando las
   etiquetas de alrededor para devolverle ancho al nombre. La primera version
   de aqui partia el renglon en dos, y aunque cabia, se leia peor: el conteo
   colgando abajo hacia que cada categoria ocupara el doble de alto y la lista
   se volviera larguisima.
   El modal mide lo mismo en los dos sitios (660px con tope de pantalla), asi
   que lo que funciona alla funciona aqui. */
@media (max-width:760px){
  .lgm-rama{gap:7px;font-size:10px;letter-spacing:.1em}
  .lgm-rama .nn{padding:3px 7px;font-size:8.5px;letter-spacing:.06em}
  .lgm-cat{padding:0 11px}
  .lgm-cab{gap:8px;padding:10px 0}
  .lgm-cab .nm{font-size:13px}
  /* El conteo a 9px y con menos relleno: el nombre mas largo que hay hoy
     ("Dobles Femenil (Categoria B+C)") quedaba 4px fuera con los valores de
     app, porque alla las categorias se llaman distinto. Con esto entra. */
  .lgm-cab .ct{padding:3px 6px;font-size:9px;letter-spacing:.04em}
  .lgm-par .jj{font-size:12.5px;line-height:1.35}
  /* Los dos botones de arriba, uno por renglon: lado a lado no caben. */
  .mb-sh-grupo .mb-sh{flex:1 1 100%}
  .mb-sh-grupo .mb-sh .mb-sh-txt{white-space:normal}
}

/* --- La lista de categorias de la landing, en pantallas chicas ---
   Mismo problema y aqui pesa mas: es la lista con la que la gente elige a que
   inscribirse. Medido a 390px quedaban ~192px para un nombre que mide 219.
   El nombre deja de recortarse y envuelve; el precio baja a su propia linea,
   junto a la modalidad. */
@media (max-width:560px){
  .reg-cat{align-items:flex-start;gap:10px;padding:12px 13px}
  .reg-cat-ico{width:34px;height:34px;font-size:16px}
  .reg-cat-info{gap:5px}
  .reg-cat-nm{font-size:13.5px;line-height:1.3;white-space:normal;overflow:visible}
  .reg-cat-pr{font-size:11.5px;padding:4px 9px}
  .reg-cat-chev{align-self:center}
}

/* --- t-v24 (2026-07-31) -----------------------------------------------
   El hero del registro se centra SOLO en telefono (pedido de Roberto,
   2026-07-31): mismo corte de 600px que los ajustes finos de telefono
   de arriba. En escritorio y tablet sigue a la izquierda, junto al
   flyer. El reloj (.mbrj) viene del modulo compartido pub_reloj.php y
   NO se toca: es inline-flex que envuelve en dos lineas (etiqueta y
   cajas); justify-content en el bloque centra cada linea. Los botones
   ya son de ancho completo bajo 600px, no necesitan nada. */
@media (max-width:600px){
  .reg-hero-main h1{text-align:center}
  .reg-badges{justify-content:center}
  .reg-meta .l{justify-content:center;text-align:center}
  .reg-hero-main .mbrj{justify-content:center}
}

/* --- t-v25 (2026-07-31) -----------------------------------------------
   El boton del menu, pegado al logo en telefono. Historia: en la v14 el
   menu salio de .pub-nav-slot y se colgo directo de la barra; el boton
   recupero su FORMA por id (#mnuBtn, arriba) pero nadie recupero su
   LUGAR. En escritorio lo empuja el .pub-acc{margin-left:auto} base del
   carbon de app; bajo 760px ese mismo carbon lo anula con
   .pub-acc{margin-left:0;width:100%} (regla pensada para app) y el
   envoltorio se estiraba del logo al borde, con el boton en su extremo
   izquierdo. Se reafirma por id, que es de este sitio y no toca a app:
   el menu vive en el extremo derecho de la barra, a cualquier ancho. */
#mnuWrap{margin-left:auto;width:auto}

/* --- t-v26 (2026-07-31) -----------------------------------------------
   Velo unificado de modales (decision de Roberto, opcion B): negro 78%
   + blur suave de 6px en los overlays del sitio. Antes convivian tres
   recetas (82%+3px, 92%+4px en el flyer) y dos casos especiales:
   - Compartir (#mnuShareModal, componente .pub-modal del carbon de
     app) no tenia velo alguno: recibe el velo en su contenedor y sube
     al piso 9990 de sus hermanos, por encima de la barra.
   - El modal de validacion del formulario (#insModal) lo crea el JS
     de inscribir.php con estilos INLINE del tema viejo (velo cafe al
     60%, tarjeta blanca). El velo se corrige desde aqui con important,
     que si vence al style= inline; la tarjeta blanca queda pendiente
     de migrar ese JS. OJO: NO usar la clase .mod para esa migracion:
     .mod ya significa otra cosa en el formulario (la etiqueta Pareja/
     Individual de .cat-opt) y las reglas de modal .mod de arriba son
     un choque de nombre latente. Usar un nombre nuevo (p.ej. .val-ov).
   - El flyer conserva su velo mas oscuro (92%): es un visor de foto;
     solo su blur sube a 6px para emparejar la familia. */
.reg-dep-ov,.rpm,.lgm{background:rgba(6,6,6,.78);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pub-modal{background:rgba(6,6,6,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#mnuShareModal{z-index:9990}
#insModal{background:rgba(6,6,6,.78)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.reg-flyer-lb{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* --- t-v27 (2026-08-01) -----------------------------------------------
   El modal de validacion del formulario, por fin vestido de Carbon
   (pedido de Roberto; era el hallazgo (a) del t-v26): el JS de
   inscribir.php deja los estilos inline del tema viejo y usa estas
   clases .val-*. NO se llaman .mod porque ese nombre ya significa la
   etiqueta Pareja/Individual de .cat-opt (hallazgo (b)): las reglas de
   modal .mod se retiraron de arriba (su lapida lo cuenta) y la
   etiqueta, invisible desde el rediseno por ese choque, revive abajo
   vestida discreta. El velo usa la receta B unificada; el cinturon
   important de #insModal del t-v26 queda redundante e inofensivo. */
.val-ov{position:fixed;inset:0;z-index:9995;display:flex;
  align-items:center;justify-content:center;padding:16px;
  background:rgba(6,6,6,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.val-card{width:100%;max-width:420px;padding:20px;
  background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:var(--r-card)}
.val-card h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--text)}
.val-card h3 iconify-icon{color:var(--loss);font-size:20px;flex-shrink:0}
.val-card ul{margin:0 0 16px;padding-left:20px;
  font-family:var(--font-ui);font-size:13.5px;color:var(--text-2);line-height:1.7}
.val-card ul li{margin-bottom:6px}
.val-card ul b{color:var(--text)}
.val-card button{width:100%;padding:12px;border-radius:999px;cursor:pointer;
  background:var(--lime);border:1px solid var(--lime);color:var(--lime-ink);
  font-family:var(--font-ui);font-weight:800;font-size:14px}

/* ── LEGAL-1 (2026-08-18): modal de Terminos y Aviso de privacidad ──
   El jugador los lee SIN salir del formulario: si cambiara de pagina
   perderia lo que ya capturo. Vive del mismo juego de variables, asi
   que se viste solo en tema oscuro y en tema claro. */
.leg-ov{position:fixed;inset:0;z-index:9996;display:none;
  align-items:center;justify-content:center;padding:16px;
  background:rgba(6,6,6,.80);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.leg-ov.abierto{display:flex}
.leg-card{width:100%;max-width:680px;max-height:86vh;display:flex;flex-direction:column;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-card);overflow:hidden}
.leg-head{display:flex;align-items:center;gap:11px;padding:16px 20px;
  border-bottom:1px solid var(--line-strong);flex-shrink:0}
.leg-head iconify-icon{color:var(--lime);font-size:21px;flex-shrink:0}
.leg-head h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--text);flex:1}
.leg-x{flex-shrink:0;width:32px;height:32px;border-radius:9px;cursor:pointer;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-2);
  font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center}
.leg-x:hover{color:var(--text);border-color:var(--text-2)}
.leg-body{overflow-y:auto;padding:18px 20px;-webkit-overflow-scrolling:touch;
  font-family:var(--font-ui);font-size:13.5px;line-height:1.72;color:var(--text-2)}
.leg-body h4{margin:20px 0 7px;font-family:var(--font-display);font-weight:700;
  font-size:14.5px;color:var(--text)}
.leg-body h4:first-of-type{margin-top:4px}
.leg-body p{margin:0 0 11px}
.leg-body b{color:var(--text)}
.leg-body a{color:var(--lime)}
.leg-body ul{margin:0 0 13px;padding-left:19px}
.leg-body ul li{margin-bottom:6px}
.leg-meta{font-family:var(--font-data);font-size:11px;letter-spacing:.03em;
  color:var(--text-3);padding-bottom:12px;border-bottom:1px solid var(--line-strong);margin-bottom:4px}
.leg-caja{background:var(--lime-dim);border:1px solid var(--lime-line);
  border-radius:10px;padding:11px 14px;margin:12px 0 14px !important}
.leg-foot{flex-shrink:0;padding:13px 20px;border-top:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.leg-foot .leg-otra{font-family:var(--font-ui);font-size:12.5px;color:var(--text-2);
  background:none;border:0;cursor:pointer;text-decoration:underline;padding:0}
.leg-foot .leg-otra:hover{color:var(--text)}
.leg-foot .leg-ok{padding:10px 22px;border-radius:999px;cursor:pointer;
  background:var(--lime);border:1px solid var(--lime);color:var(--lime-ink);
  font-family:var(--font-ui);font-weight:800;font-size:13.5px}
@media (max-width:560px){
  .leg-card{max-height:92vh}
  .leg-body{padding:15px 16px;font-size:13px}
  .leg-foot{padding:12px 16px}
  .leg-foot .leg-ok{flex:1;text-align:center}
}

/* La etiqueta Pareja/Individual del selector de categorias, de vuelta:
   pildora discreta en mono, al estilo de los contadores de la lista. */
.cat-opt .mod{flex-shrink:0;font-family:var(--font-data);font-size:10px;
  padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.04);color:var(--text-3)}


/* ═══════════════════════════════════════════════════════════════════
   PANTALLA DE EXITO DE INSCRIPCION (?ok=1) · EXITO-1 (2026-08-01)
   Era la ultima pieza con el traje viejo (verde institucional sobre
   crema) flotando en el skin carbon. Aqui vive vestida de la casa.
═══════════════════════════════════════════════════════════════════ */
.ok-wrap{max-width:560px;margin:0 auto;text-align:center;padding:26px 20px 34px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.ok-ring{width:82px;height:82px;margin:0 auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--lime-dim);border:1px solid var(--lime-line);
  color:var(--lime);font-size:44px;animation:okPop .45s cubic-bezier(.2,1.2,.3,1)}
@keyframes okPop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.ok-t{font-family:var(--font-display);font-weight:700;font-size:clamp(23px,4.6vw,31px);
  line-height:1.15;letter-spacing:-.02em;color:var(--lime);margin-bottom:10px}
.ok-s{font-family:var(--font-ui);font-size:14px;line-height:1.6;color:var(--text-2);margin:0}
.ok-s b{color:var(--text)}

.ok-card{position:relative;text-align:left;margin:22px auto 0;padding:18px;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:14px}
.ok-folio{position:absolute;top:14px;right:16px;
  font-family:var(--font-data);font-size:10px;font-weight:700;letter-spacing:.12em;
  color:var(--turq);background:var(--turq-dim);border:1px solid var(--turq-line);
  border-radius:999px;padding:4px 11px}
.ok-lb{font-family:var(--font-data);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3)}
.ok-cat{font-family:var(--font-ui);font-weight:800;font-size:17px;line-height:1.3;
  color:var(--text);margin:5px 0 4px;padding-right:78px}
.ok-cat .cod{display:inline-block;font-family:var(--font-data);font-size:11px;font-weight:700;
  letter-spacing:.06em;color:var(--lime);background:var(--lime-dim);border:1px solid var(--lime-line);
  border-radius:6px;padding:2px 7px;vertical-align:2px;margin-left:4px}
.ok-cuota{font-family:var(--font-ui);font-size:13px;color:var(--text-2)}
.ok-cuota b{font-family:var(--font-data);font-size:14px;color:var(--lime);letter-spacing:.02em}
.ok-cuota .por{color:var(--text-3);font-size:12px}
.ok-sep{height:1px;margin:14px 0 12px;background:repeating-linear-gradient(90deg,
  var(--line-strong) 0 6px,transparent 6px 12px)}
.ok-jugs{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.ok-jug{display:flex;align-items:center;gap:11px;padding:9px 12px;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--lime);
  border-radius:10px}
.ok-jug .av{flex-shrink:0;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--lime-dim);color:var(--lime);
  font-family:var(--font-data);font-size:13px;font-weight:700}
.ok-jug .nm{font-family:var(--font-ui);font-weight:700;font-size:14px;color:var(--text)}

.ok-next{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.ok-next-t{font-family:var(--font-display);font-weight:700;font-size:16px;
  color:var(--text);margin-bottom:14px}
.ok-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ok-b1,.ok-b2{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;
  border-radius:999px;text-decoration:none;
  font-family:var(--font-ui);font-weight:800;font-size:14px;transition:transform .12s,box-shadow .12s}
.ok-b1{background:var(--lime);color:var(--lime-ink)}
.ok-b1:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(198,255,52,.24)}
.ok-b2{background:transparent;border:1px solid var(--line-strong);color:var(--text)}
.ok-b2:hover{border-color:var(--lime-line);color:var(--lime)}
@media (max-width:520px){
  .ok-wrap{padding:22px 15px 28px}
  .ok-cat{padding-right:0;margin-top:22px}
  .ok-folio{top:12px;right:12px}
  .ok-btns{flex-direction:column}
  .ok-b1,.ok-b2{width:100%;justify-content:center}
}

/* VISIBILIDAD-1: pantalla de torneo apagado por el organizador. */
.pub-apagado{max-width:520px;margin:60px auto;text-align:center;padding:38px 26px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.pub-apagado .ico{width:66px;height:66px;border-radius:50%;background:var(--lime-dim);margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
.pub-apagado .ico iconify-icon{font-size:32px;color:var(--lime)}
.pub-apagado .t{font-size:17px;font-weight:800;color:var(--text);margin-bottom:8px}
.pub-apagado .s{font-size:13.5px;color:var(--text-3);line-height:1.65}
.pub-apagado .b{display:inline-block;margin-top:20px;background:var(--lime);color:var(--lime-ink);font-weight:800;font-size:13px;padding:10px 20px;border-radius:999px;text-decoration:none}
.pub-apagado .b:hover{filter:brightness(1.06)}

/* ══ TEMA-4 (2026-08-15, pedido de Roberto) ══
   El portal de inscripcion ya tiene el mismo interruptor de tema que la app.
   El bloque de abajo viene tal cual de app/carbon.css para que los dos sitios
   se vean IGUAL en claro; aqui solo se agrega el estilo del propio switch. */
.mb-tema-sw{width:44px;height:25px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface-2);position:relative;cursor:pointer;flex:0 0 auto;padding:0;transition:background .18s,border-color .18s;}
.mb-tema-sw:hover{border-color:var(--lime-line);}
.mb-tema-knob{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:var(--lime);transition:left .18s,background .18s;}
html.tema-claro .mb-tema-knob{left:21px;}
.mb-tema-nav{margin-right:2px;}
.pub-nav-der{display:flex;align-items:center;gap:9px;margin-left:auto;}

/* ═══════════════════ TEMA-1 · LINO & LIMA (2026-08-06) ═══════════════════
   El modo claro, pedido de Roberto para el arranque de Caritas 2026.
   CERO rediseno: mismas piezas, mismos espacios; solo se redefinen las
   variables (el mismo truco del tinte por rama). El switch vive en la fila
   "Tema" del menu; inc/head.php lee la eleccion antes del primer pintado. */
html.tema-claro{ color-scheme:light;
  --bg:#f6f6f3; --surface:#ffffff; --surface-2:#f1f1ec; --surface-3:#e9e9e2;
  --line:rgba(24,24,17,.08); --line-strong:rgba(24,24,17,.17);
  --text:#181811; --text-2:#5c5c52; --text-3:#94948a;
  --lime:#6b8f00; --lime-ink:#ffffff; --lime-dim:rgba(107,143,0,.10); --lime-line:rgba(107,143,0,.38);
  --turq:#0d9488; --turq-dim:rgba(13,148,136,.09); --turq-line:rgba(13,148,136,.35);
  --wine:#efece7; --loss:#dc2626; --loss-dim:rgba(220,38,38,.08);
  --gold:#a16207; --gold-dim:#fdf2cf;
}
/* CLASIFCOL-1: en tema claro, verde y rojo oscuros (contraste sobre blanco). */
html.tema-claro .gr-why{ --ok-txt:#136c34; --mal-txt:#b91c1c; }
html.tema-claro .rama-m{ --lime:#2563eb; --lime-ink:#fff; --lime-dim:rgba(37,99,235,.09);  --lime-line:rgba(37,99,235,.38); }
html.tema-claro .rama-f{ --lime:#db2777; --lime-ink:#fff; --lime-dim:rgba(219,39,119,.09); --lime-line:rgba(219,39,119,.38); }
html.tema-claro .rama-x{ --lime:#0d9488; --lime-ink:#fff; --lime-dim:rgba(13,148,136,.09); --lime-line:rgba(13,148,136,.38); }
/* los tres blancos fijos del archivo, devueltos a variable */
html.tema-claro .scv-p.win .nm,
html.tema-claro .rg-row.win .rg-nm,
html.tema-claro .rg-champ .rg-nm{ color:var(--text); }

/* ══ PULIDO: colores clavados que la pasada real destapo (van a variable) ══ */
html.tema-claro .pub-nav{background:var(--surface)}
html.tema-claro .pub-acc-btn{background:var(--surface)}
html.tema-claro .pub-hero{background:
  radial-gradient(560px 280px at 90% -60px, color-mix(in srgb, var(--lime) 12%, transparent), transparent 60%),
  var(--surface)}
html.tema-claro .pub-alert-clock .lb{color:var(--gold)}
html.tema-claro .pub-alert-clock .u{background:var(--gold-dim);border-color:rgba(161,98,7,.30)}
html.tema-claro .pub-alert-clock .u b{color:var(--gold)}
html.tema-claro .pub-alert-clock .u i{color:#8a6a1f}

html.tema-claro{ --mix-base:#ffffff; --mix-txt:#1c1c14; }
/* ── PULIDO-2 (capturas de Roberto, 2026-08-06): los oscuros que no eran
   variables y por eso no switcheaban ── */
html.tema-claro .avatar-img,
html.tema-claro .pcard .pc-av,
html.tema-claro .sg-av{background:linear-gradient(145deg,#ecebe4,#dedcd2);color:var(--text-2)}
html.tema-claro .pub-dia.on .dh{background:rgba(0,0,0,.10)}
html.tema-claro .pub-hitbar a{background:var(--lime-dim)}
html.tema-claro .jl-mp .scv-meta .r-pill:not(.r-pill-cancha){
  color:color-mix(in srgb, var(--rnd) 52%, #1f1f16);
  background:color-mix(in srgb, var(--rnd) 16%, #ffffff)}
html.tema-claro .gr-ronda .gr-ronda-h,
html.tema-claro .gr-ronda .gr-ronda-h iconify-icon{color:color-mix(in srgb, var(--rnd) 55%, #1f1f16)}
/* el logo cambia con el tema (dos <img> en head.php, se muestra el que toca) */
.mb-logo-claro{display:none}
html.tema-claro .mb-logo-oscuro{display:none}
html.tema-claro .mb-logo-claro{display:inline-block}
/* la fila y el interruptor del menu */
.pub-acc-sep{border:0;border-top:1px solid var(--line-strong);margin:8px 10px}
.pub-acc-tema{cursor:default}
.pub-acc-tema:hover{background:transparent;color:var(--text)}
.mb-tema-sw{position:relative;margin-left:auto;width:46px;height:24px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface-3);cursor:pointer;padding:0;flex:none}
.mb-tema-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--lime);transition:left .18s}
html.tema-claro .mb-tema-knob{left:24px}

/* TEMA-2: switch tambien en la barra (pedido de Roberto, su flecha verde) */
.pub-nav-der{display:flex;align-items:center;gap:12px;flex-shrink:0}
.mb-tema-nav{margin-left:0}
@media (max-width:520px){ .pub-nav-der{gap:9px} }

/* TEMA-3b (capturas de Roberto): las pildoras de DIA en claro. Las reglas
   base mezclan 80% pastel (pensado para brillar sobre carbon); sobre lino se
   lavan. En claro el texto va al 45% del pastel sobre casi-negro (queda el
   alma del dia, oscura y legible) y el dia ACTIVO se vuelve chip solido
   oscurecido con texto blanco, con el mismo punch que en oscuro. */
html.tema-claro .pub-dia{
  color:color-mix(in srgb, var(--dc) 45%, #1d1d14);
  border-color:color-mix(in srgb, var(--dc) 50%, rgba(0,0,0,.18))}
html.tema-claro .pub-dia:hover{color:color-mix(in srgb, var(--dc) 45%, #12120c)}
html.tema-claro .pub-dia.on{
  background:color-mix(in srgb, var(--dc) 55%, #17170f);
  color:#fff;border-color:transparent}
html.tema-claro .pub-dia-h{color:color-mix(in srgb, var(--dc) 45%, #1d1d14)}

/* TEMA-3: portada del catalogo (capturas de Roberto) */
.pub-hero-acc{color:var(--turq)}
.pub-tcard .ic-fin{background:linear-gradient(135deg,#a6a6a6,#6b5f52);color:#f5f5f5}
html.tema-claro .pub-tcard .ic-fin{background:linear-gradient(135deg,#e7e5df,#cfcbc1);color:#6f6f63}


/* TEMA-4c (2026-08-15): el logo del hero del catalogo. Como ahora son dos
   imagenes gemelas, la que se muestra tiene que conservar el tamano y el
   centrado del original (display:block + margin auto), no el inline-block
   generico de los logos de la barra. */
.cat-hero-logo.mb-logo-claro{display:none;}
html.tema-claro .cat-hero-logo.mb-logo-oscuro{display:none;}
html.tema-claro .cat-hero-logo.mb-logo-claro{display:block;height:40px;width:auto;margin:0 auto 16px;position:relative;z-index:1;}

/* TEMA-4b (2026-08-15): el logo claro se recortaba. Los dos SVG tienen
   proporciones distintas (el oscuro 3.78:1, el de color 3.42:1), y como la
   regla base fija solo la altura, el ancho salia distinto y el <a> del logo
   no le dejaba sitio. Se fija el alto y se deja que el ancho se acomode. */
.logo{display:inline-flex;align-items:center;flex:0 0 auto;}
.mb-logo-oscuro,
.mb-logo-claro{height:28px;width:auto;max-width:none;flex:0 0 auto;}
html.tema-claro .mb-logo-claro{display:block;}

/* TEMA-4: las tarjetas del catalogo. En la app la clase es .pub-tcard; aqui
   se llama .tcard, por eso necesitan su propia regla o se quedan oscuras. */
html.tema-claro .tcard{background:var(--surface);border-color:var(--line);}
html.tema-claro .tcard:hover{border-color:var(--lime-line);}
html.tema-claro .tcard-img{background:var(--surface-2);}
html.tema-claro .tcard .tcard-tit,
html.tema-claro .tcard .tcard-nm{color:var(--text);}
html.tema-claro .tcard .tcard-sub,
html.tema-claro .tcard .tcard-meta{color:var(--text-2);}
/* PIELOGO-2 (2026-08-15): el logo que cierra la pagina, igual que en la app. */
.pub-foot-logo{display:inline-block;margin-bottom:14px;opacity:.7;transition:opacity .18s ease;}
.pub-foot-logo:hover{opacity:1;}
.pub-foot-logo img{height:32px;width:auto;}
/* El gemelo claro nace oculto y solo aparece en tema claro. La regla generica
   .mb-logo-claro{display:none} llega ANTES en el archivo, y como aqui se pone
   display:block sin condicion, en oscuro se veian los DOS. Cazado midiendo en
   el navegador: "oscuro visible: True | claro oculto: False". */
.pub-foot-logo .mb-logo-oscuro{display:block;}
.pub-foot-logo .mb-logo-claro{display:none;}
html.tema-claro .pub-foot-logo .mb-logo-oscuro{display:none;}
html.tema-claro .pub-foot-logo .mb-logo-claro{display:block;height:32px;width:auto;}
@media (max-width:600px){.pub-foot-logo img{height:27px}.pub-foot-logo{margin-bottom:12px}}

/* TEMA-4d (2026-08-15, reportado por Roberto):
   1. La cuenta regresiva NO lleva fondo — es una franja con linea arriba. Yo
      le habia puesto uno beige y por eso se veia como una caja rara.
   2. La pastilla de la esquina usa un negro fijo (rgba(10,10,10,.78)) que en
      tema oscuro se funde con el cartel, pero en claro se ve como un parche.
      En claro pasa a ser blanca translucida con texto oscuro. */
html.tema-claro .tcard-clock{background:transparent;border-top-color:var(--line);}
html.tema-claro .tcard-clock .u{background:var(--gold-dim);color:#8a6508;}
html.tema-claro .tcard-clock .u b{color:#8a6508;}
html.tema-claro .tcard-badge{background:rgba(255,255,255,.88);border-color:rgba(24,24,17,.14);color:#181811;box-shadow:0 2px 8px rgba(0,0,0,.14);}
html.tema-claro .tcard-badge.abierta{background:#0b7f74;border-color:#0b7f74;color:#ffffff;box-shadow:0 2px 8px rgba(13,148,136,.30);}
html.tema-claro .tcard-badge.live{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);box-shadow:0 2px 8px rgba(107,143,0,.32);}
html.tema-claro .tcard-badge .dot{background:currentColor;}

/* TEMA-4: el switch tambien en claro. */
html.tema-claro .mb-tema-sw{background:#e9e9e2;border-color:rgba(24,24,17,.17);}
html.tema-claro .mb-tema-knob{background:#6b8f00;}


/* ══════════ FICHA-3 (2026-08-15): la ficha tecnica nativa de torneos.
   Tarjetas de informacion con el lenguaje de la casa; el hero, el reloj
   y las tarjetas de categoria reutilizan lo ya existente (reg-*). ══════════ */
.fi-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1060px;margin:0 auto 40px;padding:0 20px}
.fi-full{grid-column:1/-1}
.fi-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px}
.fi-tit{display:flex;align-items:center;gap:9px;font-family:var(--font-data);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin-bottom:14px}
.fi-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);
  font-family:var(--font-ui);font-size:13.5px}
.fi-row:last-child{border-bottom:0}
.fi-row .l{color:var(--text-3);font-weight:700;display:flex;align-items:center;gap:8px;flex:none}
.fi-row .v{color:var(--text);font-weight:700;text-align:right}
.fi-row .v.mono{font-family:var(--font-data);color:var(--lime)}
.fi-dir{display:flex;align-items:center;gap:14px}
.fi-dir .av{width:52px;height:52px;border-radius:50%;background:var(--lime-dim);border:2px solid var(--lime);
  display:flex;align-items:center;justify-content:center;color:var(--lime);font-size:22px;flex:none}
.fi-dir b{display:block;font-family:var(--font-ui);font-size:15px;color:var(--text)}
.fi-dir small{display:block;color:var(--text-2);font-family:var(--font-ui);font-size:12px;margin-top:2px}
.fi-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.fi-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;
  font-family:var(--font-ui);font-weight:800;font-size:13px;text-decoration:none;cursor:pointer;
  border:1px solid var(--lime-line);color:var(--text-2);background:transparent;transition:border-color .15s,color .15s}
.fi-btn:hover{border-color:var(--lime);color:var(--text)}
.fi-cta{text-align:center;padding:28px}
.fi-cta .t{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--text);margin-bottom:6px}
.fi-cta .s{font-family:var(--font-ui);font-size:13px;color:var(--text-2);margin-bottom:16px}
@media(max-width:760px){.fi-grid{grid-template-columns:1fr}}


/* ══════════ PLAYERAS-1 (2026-08-15): pastillas de talla en la inscripcion. ══════════ */
.tll-row{display:flex;gap:8px;flex-wrap:wrap}
.tll{min-width:52px;padding:11px 0;text-align:center;border:1.5px solid var(--line);border-radius:12px;
  background:var(--surface-2);color:var(--text-2);font-family:var(--font-data);font-weight:800;font-size:14px;
  cursor:pointer;transition:border-color .13s,transform .1s;user-select:none}
.tll:hover{border-color:var(--lime)}
.tll:active{transform:scale(.96)}
.tll.on{border-color:var(--lime);background:var(--lime);color:var(--lime-ink)}

/* FICHA-3d: categorias y datos del torneo lado a lado en escritorio. */
.fi-two{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:start;margin-bottom:6px}
.fi-two .reg-sec{margin-bottom:0}
@media(max-width:920px){.fi-two{grid-template-columns:1fr}}

/* AVISOS-3b (2026-08-16): las tarjetas de pago/deposito de la pantalla de
   confirmacion, gemelas del correo — y ahora con su version en TEMA CLARO. */
.okmail-pago{background:#1d2415;border:1px solid #3c4b1e;border-radius:14px;padding:20px;text-align:center;color:#9a9a9a;}
.okmail-dep{background:#1d1d1d;border:1px solid #2a2a2a;border-radius:14px;padding:18px 20px;margin-top:12px;text-align:left;}
.okmail-lb{font-family:'Courier New',Courier,monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;margin-bottom:12px;}
.okmail-lb.lima{color:#C6FF34;} .okmail-lb.cian{color:#99E1D9;}
.okmail-btn{display:inline-block;background:#C6FF34;color:#171717;text-decoration:none;font-weight:800;font-size:15px;padding:13px 30px;border-radius:999px;}
.okmail-sub{color:#9a9a9a;font-size:11.5px;margin-top:10px;}
.okmail-k{padding:8px 0;color:#8b8b8b;font-size:12.5px;vertical-align:top;}
.okmail-v{padding:8px 0;color:#f5f5f5;font-size:13.5px;font-weight:700;}
.okmail-v.mono{font-family:'Courier New',Courier,monospace;letter-spacing:.06em;color:#C6FF34;}
.okmail-compro{margin-top:14px;border-top:1px solid #2a2a2a;padding-top:13px;font-size:13px;color:#a6a6a6;line-height:1.7;text-align:center;}
.okmail-acc{color:#C6FF34;} .okmail-tx{color:#f5f5f5;}
html.tema-claro .okmail-pago{background:#f4f9e6;border-color:#c9dd8f;color:#5b6b3a;}
html.tema-claro .okmail-dep{background:#ffffff;border-color:#e2e8f0;box-shadow:0 2px 10px rgba(15,23,42,.05);}
html.tema-claro .okmail-lb.lima{color:#5b7f0e;} html.tema-claro .okmail-lb.cian{color:#0e7490;}
html.tema-claro .okmail-btn{background:#0d7f3e;color:#fff;}
html.tema-claro .okmail-sub{color:#94a3b8;}
html.tema-claro .okmail-k{color:#94a3b8;}
html.tema-claro .okmail-v{color:#1e293b;}
html.tema-claro .okmail-v.mono{color:#0a6532;}
html.tema-claro .okmail-compro{border-top-color:#e2e8f0;color:#64748b;}
html.tema-claro .okmail-acc{color:#0d7f3e;} html.tema-claro .okmail-tx{color:#1e293b;}

/* FLYERZOOM-1 (2026-08-16, reporte de Roberto): "Ver en grande" flota SOBRE
   la imagen del flyer — sus colores deben ser fijos, no del tema. En claro
   el texto tomaba tinta oscura sobre pastilla oscura y desaparecia. */
.reg-flyer-zoom, html.tema-claro .reg-flyer-zoom{
  background:rgba(10,10,10,.62) !important; color:#ffffff !important;
  border:1px solid rgba(255,255,255,.35) !important;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}

/* FICHA-4b (2026-08-16): la caja de avisos de la ficha tecnica, con sus dos
   caras — oscura (como el correo) y clara (crema dorada). */
.fi-avisos{margin:14px 2px 4px;background:#241f12;border:1px solid #4a3d1a;border-radius:14px;padding:15px 18px;}
.fi-avisos-t{font-family:'Courier New',Courier,monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:#E9C46A;margin-bottom:9px;}
.fi-avisos-b{color:#e8e2d0;font-size:12.5px;line-height:1.75;}
.fi-avisos-b b{color:#fff;}
html.tema-claro .fi-avisos{background:#fffbeb;border-color:#e5c761;}
html.tema-claro .fi-avisos-t{color:#a16207;}
html.tema-claro .fi-avisos-b{color:#4b3d12;}
html.tema-claro .fi-avisos-b b{color:#3b2f0a;}

/* FICHA-6 (2026-08-16): la descripcion del torneo dentro de la ficha. */
.fi-desc{margin:14px 2px 4px;background:#1d1d1d;border:1px solid #2a2a2a;border-radius:14px;padding:15px 18px;}
.fi-desc-t{font-family:'Courier New',Courier,monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:#9a9a9a;margin-bottom:9px;display:flex;align-items:center;}
.fi-desc-b{font-size:12.5px;line-height:1.75;color:#cfcfcf;}
.fi-desc-b p{margin:0 0 9px;}
.fi-desc-b ul,.fi-desc-b ol{margin:0 0 9px;padding-left:20px;}
.fi-desc-b b,.fi-desc-b strong{color:#fff;}
html.tema-claro .fi-desc{background:#ffffff;border-color:#e2e8f0;box-shadow:0 2px 10px rgba(15,23,42,.05);}
html.tema-claro .fi-desc-t{color:#94a3b8;}
html.tema-claro .fi-desc-b{color:#475569;}
html.tema-claro .fi-desc-b b,html.tema-claro .fi-desc-b strong{color:#1e293b;}

/* WAITLIST-3 (2026-08-17): la lista publica separa cuadro y espera. */
.lgm-cat .ct-esp{color:#E9C46A;font-weight:800;}
.lgm-espera-t{display:flex;align-items:center;gap:6px;font-family:'Courier New',Courier,monospace;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:#E9C46A;border-top:1px dashed #3a3a3a;margin-top:8px;padding:9px 2px 4px;}
.lgm-par.lgm-esp .num{color:#E9C46A;background:rgba(233,196,106,.10);border:1px solid rgba(233,196,106,.30);}
.lgm-par.lgm-esp .jj b{color:#c9b98a;}
html.tema-claro .lgm-cat .ct-esp{color:#a16207;}
html.tema-claro .lgm-espera-t{color:#a16207;border-top-color:#e2e8f0;}
html.tema-claro .lgm-par.lgm-esp .num{color:#a16207;background:#fdf6e3;border-color:#e5c761;}
html.tema-claro .lgm-par.lgm-esp .jj b{color:#8a6d1f;}

/* LEGAL-2 (2026-08-18): la liga legal del pie. Botones que parecen
   enlaces, para que abran el modal sin sacar a nadie de la pagina. */
.pub-foot-legal{margin-top:10px;display:flex;align-items:center;justify-content:center;
  gap:9px;flex-wrap:wrap;font-family:var(--font-ui);font-size:12.5px}
.pub-foot-legal button{background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.pub-foot-legal button:hover{color:var(--lime)}
.pub-foot-legal span{color:var(--text-3)}