/* ═══════════════════════════════════════════════════════════
   GOLFBETX v2 — sistema visual (estilo toolkit Mundial 26)
   Dos pieles: claro (default) / oscuro (data-theme="dark").
   Acento de marca: fosfo lima. Tipografía condensada bold.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── Paleta oficial GOLFBETX ── */
  --fosfo:#CDF45F;            /* verde principal */
  --cyan:#00D9FF;            /* cyan eléctrico */
  --fresa:#FF2E63;           /* rojo fresa — alertas */
  --morado:#5B35F2;          /* morado profundo */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --cond:"Arial Narrow","Helvetica Neue Condensed","Roboto Condensed","Helvetica Neue",Arial,sans-serif;

  /* LIGHT (default) */
  --bg:#F4F5F8;
  --card:#FFFFFF;
  --ink:#0C0F16;
  --muted:#5A6478;           /* secundario — oscurecido para contraste */
  --faint:#767F92;           /* terciario — antes #95A0B4 (muy lavado) */
  --tab-off:#2C3340;         /* tab/ícono inactivo (light) = casi negro, se ve bien */
  --line:#E7E9EF;
  --line-soft:#EDEFF4;
  --field:#EDEFF4;
  --on-fosfo:#0A0A0A;         /* texto sobre fosfo */
  --brand-text:#159A4C;       /* verde legible sobre claro */
  --under:#FF2E63;            /* bajo par en score (light) — rojo fresa */
  --loss:#FF2E63;             /* pérdida de dinero/puntos — rojo fresa (alertas) */
  --win-c:#159A4C;            /* ganancia — verde legible (light) */
  --stat-bg:var(--fosfo);
  --stat-ink:#0C0F16;
  --stat-lab:#3C4A16;
  --active-bg:#0C0F16;        /* hoyo/tab activo (light invierte a negro) */
  --active-ink:var(--fosfo);
  --pb-bg:#0C0F16; --pb-ink:var(--fosfo);
  --chip-on:#5B35F2;
  --av-1:#5B35F2; --av-2:#00D9FF; --av-3:#FF2E63; --av-4:#8B5CF6;
  --shadow-phone:0 26px 54px -22px rgba(31,68,120,.45);
}

[data-theme="dark"]{
  --bg:#050505;
  --card:#0A0A0A;
  --ink:#FFFFFF;
  --muted:#8A909C;           /* secundario dark — un poco más claro para contraste */
  --faint:#6A7078;
  --tab-off:#9AA0AC;         /* tab inactivo (dark) = gris claro visible sobre negro */
  --line:#141414;
  --line-soft:#101010;
  --field:#141412;
  --brand-text:var(--fosfo);
  --under:var(--fosfo);       /* bajo par en score brilla en fosfo (dark) */
  --loss:#FF2E63;             /* pérdida — rojo fresa también en dark */
  --win-c:var(--fosfo);       /* ganancia — fosfo en dark */
  --stat-bg:#0A0A08;
  --stat-ink:var(--fosfo);
  --stat-lab:#8A8F72;
  --active-bg:var(--fosfo);
  --active-ink:#0A0A0A;
  --pb-bg:var(--fosfo); --pb-ink:#0A0A0A;
  --chip-on:var(--fosfo);
  --shadow-phone:0 26px 54px -22px rgba(0,0,0,.7);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{font-family:var(--font);background:var(--bg);color:var(--ink);min-height:100vh}
.cond{font-family:var(--cond);font-stretch:condensed}
::-webkit-scrollbar{display:none}

/* ── App shell ── */
.app{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding-bottom:96px;position:relative}

/* ── Header ── */
.hdr{padding:14px 20px 12px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hdr .crs{font-size:10px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;color:var(--muted)}
.hdr .h9{font-size:22px;font-weight:800;text-transform:uppercase;margin-top:3px;letter-spacing:-.01em}

/* ── Stat box (contorno / fill fosfo) ── */
.statbox{border-radius:14px;padding:8px 13px;text-align:right;background:var(--stat-bg);color:var(--stat-ink)}
.statbox.outline{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.statbox .l{font-size:8.5px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;color:var(--stat-lab)}
.statbox .v{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-top:1px}

/* ── Hole strip ── */
.holes{display:flex;gap:7px;overflow-x:auto;padding:2px 20px 14px}
.hole{flex:0 0 auto;width:42px;height:50px;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative;border:1.5px solid var(--line);background:var(--card);cursor:pointer}
.hole .n{font-size:15px;font-weight:800;color:var(--ink)}
.hole .p{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.hole.done{opacity:.72}
.hole.done::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--fosfo);position:absolute;bottom:5px}
.hole.active{background:var(--active-bg);border-color:var(--active-bg)}
.hole.active .n{color:var(--active-ink)}
.hole.active .p{color:color-mix(in srgb,var(--active-ink) 65%,transparent)}

/* ── Hero (hoyo actual) ── */
.hero{margin:2px 18px 12px;padding:18px 20px;border-radius:22px;border:1.5px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:space-between}
.hero .lab{font-size:11px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;color:var(--brand-text)}
.hero .num{font-size:64px;font-weight:800;line-height:.8;letter-spacing:-.02em;margin-top:3px;color:var(--fosfo)}
[data-theme="light"] .hero .num,:root:not([data-theme="dark"]) .hero .num{color:var(--ink)}
.hero .rt{text-align:right;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1.5;color:var(--muted)}

/* ── Team label ── */
.tlabel{display:flex;align-items:center;gap:10px;padding:16px 2px 6px}
.tlabel .tag{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.tlabel .ln{flex:1;height:1.5px;background:var(--line)}
.tlabel .nt{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-text)}

/* ── Player row ── */
.list{padding:2px 18px}
.prow{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.prow:last-child{border-bottom:none}
.avatar{width:38px;height:38px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;font-family:var(--cond)}
.pinfo{flex:1;min-width:0}
.pname{font-size:15px;font-weight:800;letter-spacing:.01em;text-transform:uppercase;font-family:var(--cond)}
.psub{font-size:10px;font-weight:700;margin-top:2px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}

/* ── Bonus chip ── */
.chip{width:26px;height:26px;border-radius:8px;font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;background:var(--field);color:var(--muted);border:1px solid var(--line);cursor:pointer;font-family:var(--cond)}
.chip.on{background:var(--chip-on);color:var(--on-fosfo);border-color:var(--chip-on)}
[data-theme="light"] .chip.on{color:#fff}
:root:not([data-theme="dark"]) .chip.on{color:#fff}

/* ── Stepper ── */
.stepper{display:flex;align-items:center;gap:9px}
.step{width:31px;height:31px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;cursor:pointer;user-select:none}
.step.minus{background:var(--field);color:var(--ink);border:1px solid var(--line)}
.step.plus{background:var(--pb-bg);color:var(--pb-ink)}
.step:active{transform:scale(.93)}
.score{min-width:26px;text-align:center;font-size:27px;font-weight:800;letter-spacing:-.02em;font-family:var(--cond);color:var(--ink)}
.score.under{color:var(--under)}
.score.empty{color:var(--faint)}

/* ── O'Yes (cerca del pin) ── */
.oywrap{padding:2px 0}
.oyrow{display:flex;gap:10px;padding:2px 2px 4px}
.oychip{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 8px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;font-family:var(--cond)}
.oychip .oyt{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.oychip .oyp{font-size:20px;font-weight:800;color:var(--faint);letter-spacing:-.01em}
.oychip:active{transform:scale(.98)}
.oychip.on{border-color:var(--muted)}
.oychip.on .oyt{color:var(--ink)}
.oychip.on .oyp{color:var(--ink)}
.oychip.win{background:var(--active-bg);border-color:var(--active-bg)}
.oychip.win .oyt{color:color-mix(in srgb,var(--active-ink) 70%,transparent)}
.oychip.win .oyp{color:var(--active-ink)}

/* ── Tab bar ── */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;padding:12px 18px 26px;display:flex;justify-content:space-around;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);z-index:20}
.tab{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--tab-off);cursor:pointer;background:none;border:none;font:inherit;font-weight:800}
.tab svg{width:22px;height:22px;padding:6px;border-radius:12px;box-sizing:content-box;transition:background .15s,color .15s,transform .15s}
.tab.active{color:var(--brand-text);font-weight:800}
/* toggles con contorno negro en AMBOS estados (prendido y apagado) para que se vean parejos */
.app .sw,.hub .sw{border:1.5px solid var(--ink)!important}
[data-theme="dark"] .app .sw,[data-theme="dark"] .hub .sw{border-color:#fff!important}
.tab.active svg{background:var(--fosfo);color:var(--on-fosfo);transform:translateY(-1px)}

/* ── Liga (compartir / seguir en vivo) ── */
.liga-banner{display:flex;align-items:center;gap:7px;justify-content:center;padding:8px 12px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-family:var(--cond);border-bottom:1px solid var(--line)}
.liga-banner.host{background:color-mix(in srgb,var(--fosfo) 18%,transparent);color:var(--brand-text)}
.liga-banner.viewer{background:color-mix(in srgb,var(--cyan) 16%,transparent);color:var(--cyan)}
.liga-banner .dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:gbxPulse 1.4s ease-in-out infinite}
.liga-banner .st{opacity:.7;font-weight:700}
.liga-banner .lg-exit{margin-left:8px;border:1.5px solid currentColor;background:transparent;color:inherit;border-radius:8px;padding:3px 9px;font-family:var(--cond);font-weight:800;font-size:11px;text-transform:uppercase;cursor:pointer}
@keyframes gbxPulse{0%,100%{opacity:1}50%{opacity:.3}}
.liga-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.liga-modal{background:var(--card);border:1.5px solid var(--line);border-radius:22px;padding:22px;max-width:340px;width:100%;text-align:center}
.liga-modal .lm-h{font-family:var(--cond);font-size:20px;font-weight:800;text-transform:uppercase;color:var(--ink)}
.liga-modal .lm-sub{font-size:12px;color:var(--muted);font-weight:600;margin-top:6px;line-height:1.35}
.liga-modal .lm-qr{width:180px;height:180px;border-radius:14px;margin:16px auto 6px;display:block;background:#fff;padding:8px}
.liga-modal .lm-code{font-family:var(--cond);font-size:34px;font-weight:800;letter-spacing:.12em;color:var(--brand-text);margin:4px 0 12px}
.liga-modal .lm-url{width:100%;height:42px;border-radius:11px;border:1.5px solid var(--line);background:var(--field);color:var(--ink);font-size:12px;padding:0 12px;text-align:center;margin-bottom:8px}
.liga-modal .lm-copy{width:100%;height:48px;border-radius:14px;border:none;background:var(--fosfo);color:#0A0A0A;font-family:var(--cond);font-size:16px;font-weight:800;text-transform:uppercase;cursor:pointer}
.liga-modal .lm-row{display:flex;gap:8px;margin-top:8px}
.liga-modal .lm-row button{flex:1;height:44px;border-radius:12px;border:1.5px solid var(--line);background:transparent;color:var(--ink);font-family:var(--cond);font-weight:800;font-size:13px;text-transform:uppercase;cursor:pointer}
.liga-modal .lm-stop{color:var(--loss)!important;border-color:var(--loss)!important}
.liga-modal .lm-caps{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);text-align:left}
.liga-modal .lm-caph{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.liga-modal .lm-caprow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.liga-modal .lm-caprow:last-child{border-bottom:none}
.liga-modal .lm-caprow span{font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:14px;color:var(--ink)}
.liga-modal .lm-capcopy{height:34px;padding:0 12px;border-radius:9px;border:1.5px solid var(--cyan);background:transparent;color:var(--cyan);font-family:var(--cond);font-weight:800;font-size:12px;text-transform:uppercase;cursor:pointer}
.liga-modal .lm-qgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.liga-modal .lm-qcard{border:1.5px solid var(--line);border-radius:14px;padding:9px 8px;background:var(--field);display:flex;flex-direction:column;align-items:center;gap:6px}
.liga-modal .lm-qcard img{width:100%;max-width:120px;aspect-ratio:1;border-radius:9px;background:#fff;padding:5px}
.liga-modal .lm-qcard.noqr img{display:none}
.liga-modal .lm-qlab{font-family:var(--cond);font-size:13px;font-weight:800;text-transform:uppercase;color:var(--ink)}
.liga-modal .lm-qcard .lm-capcopy{width:100%;padding:0}
/* capturador: solo su grupo edita (torneo bloquea el resto vía data-lock) */
body.gbx-cap .prow.lock .step{pointer-events:none;opacity:.4}
/* Viewer read-only: bloquea edición, oculta Setup */
body.gbx-viewer .step,body.gbx-viewer .bchip,body.gbx-viewer .oychip,body.gbx-viewer .addp,body.gbx-viewer .sw,body.gbx-viewer .team-slot,body.gbx-viewer .del,body.gbx-viewer .cta,body.gbx-viewer .holenav,body.gbx-viewer .crew-btn,body.gbx-viewer .pair-sel,body.gbx-viewer .team-actions,body.gbx-viewer .montoi,body.gbx-viewer .ninput,body.gbx-viewer .hcpi{pointer-events:none;opacity:.55}
body.gbx-viewer .tab[data-s="setup"]{display:none}

/* ── Avatares: 8 colores distintos (con texto adaptado) para distinguir con muchos jugadores ── */
.avc0{background:#5B35F2!important;color:#fff!important}   /* morado */
.avc1{background:#00D9FF!important;color:#043b47!important} /* cyan */
.avc2{background:#FF2E63!important;color:#fff!important}   /* fresa */
.avc3{background:#14141C!important;color:#fff!important}   /* negro */
.avc4{background:#7C8394!important;color:#fff!important}   /* gris */
.avc5{background:#F1F1F4!important;color:#14141C!important} /* blanco */
.avc6{background:#16A34A!important;color:#fff!important}   /* verde */
.avc7{background:#F59E0B!important;color:#241a00!important} /* naranja */

/* ── Crew (roster compartido) ── */
.crew-actions{display:flex;gap:8px;margin-top:9px}
.crew-btn{flex:1;height:44px;border-radius:12px;border:1.5px dashed var(--line);background:transparent;color:var(--brand-text);font-family:var(--cond);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;cursor:pointer}

/* ── Back-to-hub button ── */
.backb{width:38px;height:38px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;text-decoration:none;flex:0 0 auto;line-height:1;margin-right:10px}
.hdr .grow{flex:1;min-width:0}

/* ── Theme toggle button ── */
.tt{width:38px;height:38px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.tt svg{width:18px;height:18px}

@media (min-width:700px){ .app{max-width:720px} .tabbar{max-width:720px} }
@media (min-width:1100px){ .app{max-width:960px} .tabbar{max-width:960px} }