:root{
  --cancha:#0a2a4a; --cancha2:#12467a; --linea:#e6edf5; --bola:#d7ff3f; --bola-osc:#8fb400;
  --papel:#fff; --fondo:#f2f6fb; --tinta:#14202e; --suave:#5d6b7d; --alerta:#c2331f;
  --r:18px;
  font-family:"Avenir Next","Trebuchet MS",system-ui,sans-serif;
}
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
[hidden]{display:none!important}
body{margin:0;background:var(--fondo);color:var(--tinta);font-size:16px;line-height:1.45;overflow-x:hidden}
h1,h2,h3{font-family:"Didot","Bodoni 72",Georgia,serif;margin:0;line-height:1.1}
button,input{font:inherit;color:inherit}

.hero{background:linear-gradient(165deg,var(--cancha) 0%,var(--cancha2) 100%);color:#fff;padding:max(28px,env(safe-area-inset-top)) 20px 30px;border-radius:0 0 32px 32px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:var(--bola);opacity:.95;box-shadow:inset -18px -18px 0 rgba(0,0,0,.08)}
.hero>*{position:relative;z-index:1}
.sello{margin:0;font-size:.74rem;letter-spacing:.32em;font-weight:700;color:var(--bola)}
.hero h1{font-size:clamp(2rem,10vw,3rem);margin:14px 0 10px;max-width:11em}
.hero h1 span{color:var(--bola)}
.hero__sub{margin:0 0 18px;color:#cfe0f3}
.menu{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-block;border-radius:99px;padding:8px 16px;font-size:.9rem;font-weight:600;text-decoration:none;border:1px solid rgba(255,255,255,.4);color:#fff}
.chip--on{background:var(--bola);color:var(--cancha);border-color:var(--bola)}
.chip--off{opacity:.55}

main{max-width:680px;margin:0 auto;padding:24px 16px 8px}
.act{margin-bottom:34px}
.num{margin:0 0 4px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--bola-osc)}
.act h2{font-size:1.8rem;margin-bottom:6px}
.ayuda{margin:0 0 16px;color:var(--suave)}
.act--pronto{opacity:.65;border:2px dashed #b8c6d8;border-radius:var(--r);padding:18px}

.caja{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);padding:16px;display:grid;gap:14px;box-shadow:0 6px 20px rgba(10,42,74,.06)}
label,legend{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px}
legend{padding:0}
legend small{font-weight:400;color:var(--suave)}
fieldset{border:0;margin:0;padding:0}
input{width:100%;border:1px solid #cdd8e5;border-radius:12px;padding:11px 12px;background:#fbfdff;min-height:46px}
input:focus-visible,.btn:focus-visible,.chip:focus-visible{outline:3px solid var(--cancha2);outline-offset:2px}
.dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nombres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.btn{background:var(--cancha);color:#fff;border:0;border-radius:14px;padding:14px 18px;font-weight:700;cursor:pointer;min-height:48px;font-size:1.05rem}
.btn:active{transform:scale(.98)}
.btn--bola{background:var(--bola);color:var(--cancha)}
.btn--suave{background:transparent;color:var(--cancha);border:1px solid #b8c6d8;font-size:.95rem}
.error{margin:0;color:var(--alerta);font-weight:600;min-height:0}
.error:empty{display:none}

.resultado{margin-top:20px;display:grid;gap:16px}
.ronda{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.ronda h3{background:var(--cancha);color:#fff;font-size:1.1rem;padding:10px 16px}
.partido{padding:14px 16px;border-top:1px solid var(--linea)}
.partido:first-of-type{border-top:0}
.cancha{margin:0 0 8px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--bola-osc)}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.pareja{background:var(--fondo);border-radius:12px;padding:10px;text-align:center;font-weight:700;overflow-wrap:anywhere}
.pareja span{display:block}
.pareja span+span{margin-top:2px}
.vs b{color:var(--suave);font-size:.85rem}
.aparte{background:#fffbe0;border:1px solid #efe39a;border-radius:var(--r);padding:12px 16px}
.aparte strong{display:block;margin-bottom:2px}
.acciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.acciones .btn:first-child{grid-column:1/-1}

.pie{text-align:center;color:var(--suave);font-size:.8rem;padding:10px 0 30px}
.pie p{margin:0}
@media (max-width:360px){.nombres{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sub{font-size:1.25rem;margin:22px 0 10px}
.tabla-caja{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:.92rem}
.tabla th,.tabla td{padding:9px 8px;text-align:center;border-top:1px solid var(--linea)}
.tabla th{background:var(--cancha);color:#fff;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;border-top:0}
.tabla td:nth-child(2),.tabla th:nth-child(2){text-align:left;overflow-wrap:anywhere}
.tabla tr:nth-child(2) td{background:#f6ffc9;font-weight:700}
.marcador{display:grid;grid-template-columns:minmax(0,1fr) 56px 14px 56px minmax(0,1fr);gap:6px;align-items:center}
.marcador input{text-align:center;padding:8px 4px;font-weight:700;font-size:1.1rem}
.marcador .pareja{font-size:.88rem;padding:8px 6px}
.marcador .sep{text-align:center;color:var(--suave);font-weight:700}
.descansan{padding:10px 16px;border-top:1px solid var(--linea);color:var(--suave);font-size:.9rem}
@media (max-width:380px){.marcador{grid-template-columns:minmax(0,1fr) 46px 8px 46px minmax(0,1fr)}}

select{width:100%;border:1px solid #cdd8e5;border-radius:12px;padding:11px 12px;background:#fbfdff;min-height:46px;font:inherit}
select:focus-visible,summary:focus-visible{outline:3px solid var(--cancha2);outline-offset:2px}
.estado{font-family:system-ui,sans-serif;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;float:right;margin-top:3px;opacity:.85}
.ronda--juego{border:2px solid var(--bola-osc)}
.ronda--juego h3{background:var(--bola);color:var(--cancha)}
.ronda--hecha h3{background:#5d6b7d}
.aviso{margin:8px 0 0;font-size:.82rem;font-weight:600;color:var(--alerta)}
.aviso:empty{display:none}
.podio{background:linear-gradient(165deg,var(--cancha),var(--cancha2));color:#fff;border-radius:var(--r);padding:18px 16px;margin-top:20px;text-align:center}
.podio h3{font-size:1.4rem;margin-bottom:12px;color:var(--bola)}
.podio ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.podio li{background:rgba(255,255,255,.12);border-radius:12px;padding:10px;font-weight:700;overflow-wrap:anywhere}
.podio li:first-child{background:var(--bola);color:var(--cancha);font-size:1.15rem}
.podio small{display:block;font-weight:400;opacity:.85}
.editar{margin-top:18px;background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);padding:12px 14px}
.editar summary{cursor:pointer;font-weight:700;min-height:28px}
.editar .nombres{margin-top:12px}
.acciones #am-mas{grid-column:1/-1}
.marcador{grid-template-columns:minmax(0,1fr) 42px 10px 42px minmax(0,1fr);gap:6px}
.marcador input{width:42px;min-height:38px;height:38px;padding:0 2px;font-size:1rem;border-radius:10px}
@media (max-width:380px){.marcador{grid-template-columns:minmax(0,1fr) 38px 6px 38px minmax(0,1fr)}.marcador input{width:38px}}

.hero__fila{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mini{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:4px 11px;font-size:.74rem;font-weight:600;cursor:pointer;min-height:28px}
.mini:focus-visible{outline:3px solid var(--bola);outline-offset:2px}
dialog{border:0;border-radius:var(--r);padding:20px;max-width:340px;width:calc(100% - 32px);color:var(--tinta);box-shadow:0 20px 60px rgba(10,42,74,.4)}
dialog::backdrop{background:rgba(10,42,74,.6)}
dialog h2{font-size:1.4rem;margin-bottom:8px}
dialog p{margin:0 0 12px;color:var(--suave)}
dialog .acciones{margin-top:12px}
dialog .acciones .btn:first-child{grid-column:auto}
.mini{background:var(--cancha);border-color:var(--cancha)}
.menu .chip{background:transparent}.menu .chip--on{background:var(--bola)}

/* Rey de cancha y conteo de puntos */
.rey-banner{background:var(--bola);color:var(--cancha);font-weight:700;border-radius:var(--r);padding:12px 16px;margin:18px 0 0;text-align:center;overflow-wrap:anywhere}
.btn:disabled{opacity:.55;cursor:not-allowed}
.tablero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.equipo{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);padding:14px 12px;text-align:center;box-shadow:0 6px 20px rgba(10,42,74,.06)}
.equipo--gana{border:3px solid var(--bola-osc);background:#f6ffc9}
.equipo__nombre{margin:0;font-weight:700;overflow-wrap:anywhere}
.equipo__punto{margin:6px 0;font-family:"Didot","Bodoni 72",Georgia,serif;font-size:clamp(2.6rem,16vw,4.4rem);line-height:1;color:var(--cancha)}
.equipo__meta{display:flex;justify-content:space-around;gap:6px;margin:0 0 12px;font-size:.85rem;color:var(--suave);font-weight:600}
.equipo__btn{width:100%;min-height:76px;font-size:1.25rem}
.mc-info{grid-column:1/-1;margin:0;text-align:center;color:var(--suave);font-weight:600;min-height:1.4em;overflow-wrap:anywhere}
.mc-final{margin:12px 0 0;background:var(--cancha);color:#fff;font-weight:700;border-radius:var(--r);padding:12px 16px;text-align:center}
.tablero+.mc-final+.acciones,.tablero+.acciones{margin-top:14px}
.mc-opc{display:grid;gap:12px;margin-top:12px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.check input{width:22px;height:22px;min-height:0;flex:none;margin:1px 0 0}

/* Menú: cinta horizontal flotante */
.hero{padding-bottom:22px;border-radius:0 0 32px 32px}
.menu{position:sticky;top:0;z-index:20;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;
  padding:10px 16px max(10px,env(safe-area-inset-bottom)) 16px;padding-top:max(10px,env(safe-area-inset-top));
  background:rgba(10,42,74,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(10,42,74,.25);scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.menu::-webkit-scrollbar{display:none}
.menu .chip{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;min-height:40px;display:inline-flex;align-items:center}
@media (min-width:720px){.menu{justify-content:center}}
#marcador .acciones .btn:first-child{grid-column:auto}

.mc-vivo{margin-top:12px}
.mc-unir{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.mc-cod{font-family:"Didot","Bodoni 72",Georgia,serif;font-size:2.2rem;letter-spacing:.18em;color:var(--cancha)}
.mc-cod-fila{margin:0;font-weight:700}
.mc-vivo .ayuda{margin:0}

#dlg-pin .acciones .pin-chico{grid-column:1/-1;justify-self:start;background:var(--bola);color:var(--cancha);border:0;border-radius:99px;padding:6px 14px;font-size:.8rem;font-weight:700;min-height:32px;cursor:pointer}
#dlg-pin .pin-chico:focus-visible{outline:3px solid var(--cancha);outline-offset:2px}
#dlg-pin .pin-chico[hidden]{display:none}

#marcador,#marcador .btn,#marcador .tablero{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tablero,.equipo__btn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}