/* ═══════════════════════════════════════════════════════════════════
   PLANTILLA DE SCORING APEXGOLF

   Estructura estándar de un sitio de torneo de golf, que es lo que un
   dirigente de club espera ver: logo del club centrado arriba, menú
   horizontal, banner con el nombre del torneo, botones de acción,
   auspiciadores, afiche y bases, leaderboard, salidas, field, noticias
   y galería.

   Fondo BLANCO. El verde ApexGolf es el acento (barra de menú, botones,
   cabeceras de tabla). El wordmark de ApexGolf es blanco por manual de
   marca, así que solo aparece sobre la barra verde y sobre el pie
   oscuro, nunca sobre el blanco.

   Pensada para computador: el contenedor es de 1200px y las tablas
   muestran todas sus columnas sin scroll horizontal. Igual responde en
   teléfono, pero la pantalla de referencia es el notebook del club.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#ffffff;
  --bg-soft:#f4f6f5;
  --line:#e1e6e2;
  --line-2:#cfd6d1;

  --ink:#141c17;
  --ink-2:#4b554e;
  --ink-3:#79847c;

  --forest:#228544;
  --forest-dark:#1a5c31;
  --forest-light:#2a9a52;
  --forest-pale:#eef7f1;

  --dark:#131a16;

  --display:'Clash Display','Satoshi',system-ui,-apple-system,sans-serif;
  --body:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* scoring.js la sobreescribe con la tipografía del club. */
  --club:'Clash Display','Satoshi',system-ui,sans-serif;
  --club-weight:600;

  --shell:1200px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
/* Va DESPUÉS de la regla de img: los estilos del autor le ganan a los del
   navegador, así que `img{display:block}` anulaba el atributo `hidden` y
   el banner sin foto mostraba el ícono de imagen rota. Ese es el estado
   por defecto de todo cliente nuevo, así que tenía que quedar cerrado. */
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:6px}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:24px}

/* Aviso de sitio de demostración. Va arriba de todo y no se puede cerrar:
   los datos del demo son inventados y el sitio tiene que decirlo siempre,
   para que nadie lo confunda con resultados de verdad. */
.demo-bar{background:var(--ink);color:#fff;text-align:center;
  padding:9px 20px;font-size:.8rem;line-height:1.5}
.demo-bar b{color:#a8e9c4}

/* ── cabecera: logo del club centrado, cuñas verdes a los lados ──
   Es el gesto de cabecera que usan los sitios de abiertos chilenos. */
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.topbar-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:24px;padding-block:22px}
.wedge{height:34px;position:relative;overflow:hidden}
.wedge::after{content:'';position:absolute;inset:0;background:var(--forest)}
.wedge.left::after{clip-path:polygon(0 0,100% 0,100% 100%,26px 100%)}
.wedge.right::after{clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%)}
@media (max-width:820px){.wedge{display:none}
  /* Sin cuñas la grilla queda de una columna: hay que centrar a mano o el
     logo se pega a la izquierda. */
  .topbar-in{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* Altura explícita y no `max-height`: un logo SVG sin width/height propios
   no tiene tamaño intrínseco, y con `width:auto` la caja colapsaba a 0 y el
   logo del club no se veía. Con la altura fija, sirve igual para SVG y PNG. */
.club-logo{display:block;margin-inline:auto;height:96px;width:auto;max-width:100%;
  object-fit:contain}
.club-logo-txt{font-family:var(--club);font-weight:var(--club-weight);
  font-size:1.35rem;text-align:center;line-height:1.2}

/* ── menú ── */
.nav{background:var(--forest);position:sticky;top:0;z-index:40}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-links{display:flex;flex-wrap:wrap}
.nav-links a{color:#fff;font-size:.84rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.06em;padding:16px 15px;display:block;
  transition:background-color .18s ease}
.nav-links a:hover{background:rgba(0,0,0,.16)}
.nav-links a.active{background:var(--forest-dark)}
/* Las bases todavía sin subir. Ocupan su lugar en el menú y se ven apagadas:
   el jugador entiende que van a estar y el club ve el pendiente cada vez que
   abre su propio sitio. Sin cursor de mano ni hover, porque no llevan a
   ninguna parte y prometer un clic que no pasa nada es peor que no ofrecerlo. */
.nav-links .pendiente{color:rgba(255,255,255,.5);font-size:.84rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;padding:16px 15px;display:block;
  cursor:default}
.nav-links .pendiente small{font-size:.72rem;text-transform:none;letter-spacing:0;
  opacity:.8;margin-left:5px}
.nav-endorse{display:flex;align-items:center;gap:11px;flex-shrink:0;padding-block:8px}
.nav-endorse .lbl{color:rgba(255,255,255,.75);font-size:.6rem;
  text-transform:uppercase;letter-spacing:.16em}
.nav-endorse .col{display:flex;flex-direction:column;align-items:flex-start;gap:1px}

/* El descriptor de qué es ApexGolf. Va como TEXTO al lado del logo, nunca
   dibujado dentro del logotipo: el manual prohíbe crear lockups nuevos.
   Es lo que de verdad vendemos, así que acompaña al logo en los tres
   lugares donde aparecemos: menú, auspiciadores y pie. */
.apex-desc{font-size:.58rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.15em;line-height:1.3;white-space:nowrap}
.nav-endorse .apex-desc{color:rgba(168,233,196,.9)}
.ausp-apex .apex-desc{color:var(--forest-dark);letter-spacing:.13em;font-size:.62rem}
.foot-bar .apex-desc{color:rgba(255,255,255,.55)}
@media (max-width:520px){.nav-endorse .apex-desc{display:none}}
@media (max-width:1100px){
  .nav-in{flex-direction:column;align-items:stretch;gap:0}
  .nav-links{justify-content:center}
  .nav-endorse{justify-content:center;border-top:1px solid rgba(255,255,255,.18)}
}

/* El wordmark de ApexGolf es blanco: solo sobre verde o sobre el pie. */
.lockup{display:inline-flex;align-items:center;gap:.45em;padding-block:8px;
  transition:opacity .2s ease}
.lockup:hover{opacity:.85}
.lockup-word{font-family:var(--display);font-weight:600;color:#fff;
  letter-spacing:-.02em;line-height:1}

/* ── banner ── */
.banner{position:relative;min-height:340px;display:flex;align-items:flex-end;
  background:linear-gradient(135deg,var(--forest-dark),#0f3d22)}
/* Con foto, el banner necesita alto para que se vea la cancha y no una
   franja recortada. Sin foto se queda en 340 y no deja un hueco de
   degradado por gusto. */
@media (min-width:820px){.banner:has(img){min-height:440px}}
/* La foto del banner se entrega ya recortada en formato ancho, así que
   basta con centrarla: el navegador solo ajusta lo que sobre según el
   alto de la pantalla. */
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center}
.banner::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.28) 0%,rgba(0,0,0,.72) 100%)}
.banner-in{position:relative;z-index:2;width:100%;text-align:center;padding-block:56px}
.banner h1{font-family:var(--club);font-weight:var(--club-weight);color:#fff;
  font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.1;letter-spacing:-.02em;
  text-shadow:0 3px 12px rgba(0,0,0,.65);text-wrap:balance}
.banner .sub{margin-top:14px;color:#fff;font-size:clamp(1rem,1.7vw,1.35rem);
  text-shadow:0 2px 8px rgba(0,0,0,.65)}

/* ── botones ── */
.botonera{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;
  padding-block:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 26px;border-radius:4px;background:var(--forest);
  color:#fff;font-family:var(--body);font-size:.92rem;font-weight:500;
  border:1px solid var(--forest);cursor:pointer;
  transition:background-color .18s ease,transform .1s ease}
.btn:hover{background:var(--forest-dark);border-color:var(--forest-dark)}
.btn:active{transform:scale(.98)}
.btn.big{min-height:54px;padding:0 34px;font-size:1rem}
.btn.ghost{background:#fff;color:var(--forest-dark);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--forest-pale);border-color:var(--forest)}
.btn .chev{font-size:1.05em;line-height:1}

/* ── bloques ── */
.block{padding-block:56px}
.block.soft{background:var(--bg-soft);border-block:1px solid var(--line)}
.main-title{font-family:var(--display);font-weight:600;
  font-size:clamp(1.5rem,2.8vw,2.1rem);letter-spacing:-.02em;text-align:center}
.main-sub{text-align:center;color:var(--ink-2);margin-top:10px;font-size:.98rem}
.sec-lede{text-align:center;color:var(--ink-2);margin-top:12px;font-size:.95rem;
  max-width:70ch;margin-inline:auto}

/* ── auspiciadores ── */
.ausp-titulo{text-align:center;font-family:var(--display);font-weight:600;
  font-size:1.05rem;letter-spacing:.02em;color:var(--ink-2);
  text-transform:uppercase}
.ausp-logos{display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:26px 34px;margin-top:26px}
.ausp-logos img{max-height:70px;width:auto;object-fit:contain}

/* ApexGolf va primero y más grande que el resto: es quien pone el sitio y
   el scoring del torneo. Sobre placa oscura porque el wordmark es blanco
   por manual de marca y esta franja tiene fondo claro. */
.ausp-apex{display:inline-flex;flex-direction:column;align-items:center;gap:9px}
.ausp-apex .placa{background:var(--dark);border-radius:12px;padding:18px 30px;
  box-shadow:0 6px 22px rgba(20,28,23,.18);transition:transform .2s ease}
.ausp-apex .placa:hover{transform:translateY(-2px)}
.ausp-apex .cap{font-size:.6rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.17em;color:var(--ink-3)}
/* Separador para que se lea "ApexGolf, y además estos auspiciadores". */
.ausp-sep{width:1px;align-self:stretch;min-height:64px;background:var(--line-2)}
@media (max-width:820px){.ausp-sep{display:none}}

/* ── tarjetas (afiche / bases / edición anterior) ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:8px;background:#fff;
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s ease,border-color .2s ease}
.card:hover{box-shadow:0 8px 26px rgba(20,28,23,.1);border-color:var(--line-2)}
.card .foto{aspect-ratio:4/3;background:var(--bg-soft);overflow:hidden}
.card .foto img{width:100%;height:100%;object-fit:cover}
.card .pie{padding:16px;margin-top:auto}
.card .btn{width:100%}

/* ── tablas ── */
.tabla-wrap{border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:#fff;margin-top:22px}
.tabla-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;text-align:left}
thead{background:var(--forest)}
th{color:#fff;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;padding:13px 10px;white-space:nowrap}
td{padding:11px 10px;border-top:1px solid var(--line);vertical-align:middle}
tbody tr:nth-child(even){background:#fafbfa}
tbody tr.leader{background:var(--forest-pale)}
th:first-child,td:first-child{padding-left:18px}
th:last-child,td:last-child{padding-right:18px}

/* Anchos fijos: evitan que la fila salte cuando un score pasa de "9" a
   "-10" mientras alguien mira la tabla. */
.c-pos{width:3.4rem;text-align:center}
.c-total{width:4rem;text-align:right}
.c-thru{width:3.4rem;text-align:right}
.c-round{width:3.4rem;text-align:right}
.c-cat{width:5rem;text-align:center}
.c-hcp{width:5rem;text-align:right}
.c-hora{width:5rem}
.c-hoyo{width:4rem;text-align:right}
td.c-pos,td.c-total,td.c-thru,td.c-round,td.c-cat,td.c-hcp,td.c-hoyo{text-align:inherit}

.num{font-variant-numeric:tabular-nums}
.pos{font-weight:700}
.total{font-weight:700;font-size:1rem}
/* Bajo par en verde; el signo ya distingue, el color solo refuerza. */
.v-under{color:var(--forest-light)}
.v-even{color:var(--ink)}
.v-none{color:var(--ink-3)}
.muted{color:var(--ink-3)}
.soft{color:var(--ink-2)}
.jug{display:flex;align-items:center;gap:9px}
.flag{width:20px;height:14px;object-fit:cover;border-radius:2px;flex-shrink:0;
  border:1px solid var(--line)}
.p-name{font-weight:500}
.p-cat{color:var(--ink-3);font-weight:400;font-size:.86rem}
.p-club{display:block;font-size:.8rem;color:var(--ink-3);margin-top:1px}

/* ── situación de un inscrito ────────────────────────────────────────
   Va en segunda línea bajo el nombre y no al lado: en un teléfono la
   columna Jugador mide unos 190px y un nombre largo dejaba la etiqueta
   partida en dos o empujando el índice fuera de la pantalla. Con
   `width:max-content` la placa se ajusta al texto en vez de ocupar la
   celda entera, que la haría leer como una segunda fila.

   Solo la usan las filas excepcionales —por confirmar y en espera—, así
   que altera la altura de pocas filas y ese salto también es señal. */
.sit{display:block;width:max-content;margin-top:4px;
  padding:1px 8px;border-radius:999px;border:1px solid;
  font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;line-height:1.6;white-space:nowrap}

/* La celda centra bandera y nombre verticalmente. Con el rótulo abajo, ese
   centro cae ENTRE las dos líneas y la bandera queda flotando a media
   altura, desalineada del nombre al que pertenece. Con la etiqueta presente
   el bloque se alinea arriba y la bandera baja los ~5px que la dejan
   centrada en la línea del nombre. */
.jug:has(.sit){align-items:flex-start}
.jug:has(.sit) .flag{margin-top:5px}

/* Ámbar y no verde: en este sitio el verde es la marca y todo lo que va en
   verde es algo que ya está bien. Una inscripción sin revisar no lo está.
   El ámbar tampoco es alarma —no hay nada malo— es una espera. */
.sit-pendiente{color:#8a5a00;background:#fdf5e6;border-color:#efdcb6}
/* La lista de espera va en gris: no le falta un trámite, le falta un cupo,
   y eso no depende de que el jugador haga nada. */
.sit-espera{color:var(--ink-2);background:var(--bg-soft);border-color:var(--line-2)}

/* ── stats ──────────────────────────────────────────────────────────
   Tabla densa de puros números: 11 columnas contra las 6 del leaderboard.
   Por eso baja el padding y sube el peso de la cifra, y no al revés. */
.t-stats td{padding:10px 8px}
.t-stats th{padding:12px 8px}
.t-stats .s-hoyo{width:4.2rem}
.t-stats td.s-hoyo .num{font-weight:700}
.s-par,.s-largo,.s-prom,.s-rank,.s-dif,.s-cnt{text-align:right}
td.s-par,td.s-largo,td.s-prom,td.s-rank,td.s-dif,td.s-cnt{text-align:right}
.s-par{width:3.2rem}
.s-largo{width:4.6rem}
.s-prom{width:5rem}
.s-rank{width:3.8rem}
.s-dif{width:5.2rem}
.s-cnt{width:4.6rem}
.t-stats td.s-prom .num{font-weight:600}

/* El +/- es la columna que se mira primero, así que es la única en color.
   El rojo solo vive acá: en el leaderboard el sobre par va en tinta
   normal, porque ahí TODA la tabla sería roja y el color dejaría de
   significar algo. */
.dif{font-weight:700}
.dif.bajo{color:var(--forest-light)}
.dif.sobre{color:#c0392b}
.dif.igual{color:var(--ink-2)}

/* Ida, Vuelta y Total: subtotales, no hoyos. Van en placa gris y sin
   línea divisoria arriba para que se lean como un corte y no como una
   fila más. */
.t-stats tbody tr.s-sub{background:var(--bg-soft)}
.t-stats tbody tr.s-sub td{font-weight:700;border-top-color:var(--line-2)}
.t-stats tbody tr.s-sub .soft{color:var(--ink-2)}

/* Cabeceras que ordenan la tabla de jugadores. El botón hereda todo del
   th: se ve igual, pero es un control real y llega por teclado. */
.t-stats th button{all:unset;cursor:pointer;display:inline-block}
.t-stats th button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.t-stats th.orden{background:var(--forest-dark)}
.t-stats th.orden button::after{content:' ▾'}
.t-stats-jug .s-hoyos{color:var(--ink-3)}

/* ── inscripción ────────────────────────────────────────────────────
   El cierre de inscripciones es el dato por el que se entra a esta página.
   Va solo, en placa, antes que el precio: un club pierde inscritos por
   gente que se enteró tarde, no por gente que no supo el valor. */
.cierre{margin-top:22px;padding:22px 24px;border-radius:10px;
  background:var(--forest-pale);border:1px solid var(--forest-light);
  display:flex;flex-direction:column;gap:5px}
.cierre .lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--forest-dark)}
.cierre b{font-family:var(--display);font-weight:600;font-size:1.5rem;
  line-height:1.2;color:var(--ink)}
.cierre .fine{font-size:.84rem;color:var(--ink-2)}

.lista-req{margin-top:14px;padding-left:20px;display:grid;gap:7px}
.lista-req li{color:var(--ink-2)}

/* Los datos bancarios se copian a mano al banco, así que se muestran en
   pares rótulo/valor y el valor va en cifra tabular: un dígito mal copiado
   es una transferencia perdida. */
.datos-banco{margin-top:14px;border:1px solid var(--line);border-radius:8px;
  background:#fff;overflow:hidden}
.datos-banco p{display:flex;justify-content:space-between;gap:16px;
  padding:11px 16px;border-top:1px solid var(--line)}
.datos-banco p:first-child{border-top:0}
.datos-banco span{color:var(--ink-2)}
.datos-banco b{font-variant-numeric:tabular-nums;text-align:right}
@media (max-width:520px){
  .datos-banco p{flex-direction:column;gap:2px}
  .datos-banco b{text-align:left}
}

/* ── tarjeta hoyo por hoyo ──────────────────────────────────────
   Notación de tarjeta de golf, la de toda la vida:
     doble círculo  eagle o mejor   (-2)
     círculo        birdie          (-1)
     sin marca      par
     cuadrado       bogey           (+1)
     doble cuadrado doble bogey     (+2)
     cuadrado lleno triple o peor   (+3 o más)
   Bajo par en verde y sobre par en tinta, igual que la columna Total:
   el color solo refuerza lo que ya dice la forma, así que también se
   entiende impresa en blanco y negro o para alguien daltónico. */
tr.card-row td{padding:0;background:#fff}
.tarjeta{padding:18px}
.tarjeta table{width:100%;table-layout:fixed}
.tarjeta th,.tarjeta td{padding:6px 2px;text-align:center;border:none;
  font-size:.78rem;white-space:nowrap}
.tarjeta thead th{background:transparent;color:var(--ink-3);
  font-size:.64rem;letter-spacing:.08em}
.tarjeta tbody tr{background:transparent!important}
.tarjeta .rot{color:var(--ink-3);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.1em;text-align:left;padding-left:6px;width:56px}
.tarjeta .acum{background:var(--bg-soft);font-weight:700}
.tarjeta tr+tr td{border-top:1px solid var(--line)}

.mk{display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:25px;position:relative;font-variant-numeric:tabular-nums;
  font-weight:600;line-height:1}
.mk-birdie{border:1.5px solid var(--forest-light);border-radius:50%;color:var(--forest-dark)}
.mk-eagle{border:1.5px solid var(--forest-light);border-radius:50%;color:var(--forest-dark)}
.mk-eagle::after{content:'';position:absolute;inset:-4px;
  border:1.5px solid var(--forest-light);border-radius:50%}
.mk-bogey{border:1.5px solid var(--ink-2);color:var(--ink)}
.mk-double{border:1.5px solid var(--ink-2);color:var(--ink)}
.mk-double::after{content:'';position:absolute;inset:-4px;border:1.5px solid var(--ink-2)}
.mk-triple{background:var(--ink);color:#fff}
.mk-par{color:var(--ink-2)}

.leyenda-marcas{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;
  margin-top:16px;font-size:.78rem;color:var(--ink-2)}
.leyenda-marcas span{display:inline-flex;align-items:center;gap:7px}
.expandir{cursor:pointer}
.expandir:hover{background:var(--forest-pale)}
.ver-tarjeta{background:none;border:none;cursor:pointer;color:var(--forest-dark);
  font-family:var(--body);font-size:.76rem;font-weight:600;padding:2px 0;
  text-decoration:underline;text-underline-offset:2px}

/* Listas largas con scroll propio.
   Con 112 inscritos, el field y el listado de inscritos son las mismas
   personas dos veces y suman más de 200 filas: dejaban la página en 37
   pantallas y el pie quedaba inalcanzable. Se les pone alto máximo y scroll
   interno, que es como se navega una lista de 112 nombres igual. El
   leaderboard NO se toca: ese es el contenido principal. */
.lista-larga{max-height:560px;overflow-y:auto}
.lista-larga thead th{position:sticky;top:0;z-index:2}

/* Botón flotante para saltar al fondo y volver arriba. Con tablas de este
   largo, llegar al pie a puro scroll es imposible en el teléfono. */
.saltar{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:45;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--forest);color:#fff;border:none;
  box-shadow:0 6px 20px rgba(20,28,23,.3);
  transition:background-color .18s ease,transform .15s ease,opacity .2s ease;
}
.saltar:hover{background:var(--forest-dark)}
.saltar:active{transform:scale(.94)}
.saltar svg{transition:transform .25s ease}
.saltar[data-dir="arriba"] svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.saltar,.saltar svg{transition:none}}

.vacio{border:1px solid var(--line);border-radius:8px;background:var(--bg-soft);
  padding:48px 24px;text-align:center;margin-top:22px}
.vacio h3{font-family:var(--display);font-weight:600;font-size:1.1rem}
.vacio p{margin:9px auto 0;max-width:52ch;color:var(--ink-2);font-size:.93rem}
.legend{margin-top:11px;font-size:.8rem;color:var(--ink-3)}
.sub-titulo{font-family:var(--display);font-weight:600;font-size:1.1rem;margin-top:34px}
/* Aviso sobre la tabla cuando el torneo premia en neto: el motor solo calcula
   gross, así que se dice sin rodeos qué muestra la tabla y quién define el neto.
   No es un error —es informativo—, por eso va en el verde de marca y no en rojo. */
.aviso-tabla{margin:0 0 16px;padding:11px 15px;border:1px solid var(--line-2);
  border-left:3px solid var(--forest);border-radius:4px;background:var(--forest-pale);
  color:var(--ink-2);font-size:.86rem;line-height:1.45}
.aviso-tabla strong{color:var(--ink);font-weight:600}

/* ── rondas ── */
.rondas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
@media (max-width:900px){.rondas{grid-template-columns:1fr}}
.ronda{border:1px solid var(--line);border-radius:8px;background:#fff;padding:22px;
  border-top:3px solid var(--forest)}
.ronda .dia{font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--forest)}
.ronda .fecha{font-family:var(--display);font-weight:600;font-size:1.15rem;margin-top:7px}
.ronda .hora{font-family:var(--display);font-weight:600;font-size:2rem;
  margin-top:12px;font-variant-numeric:tabular-nums;color:var(--ink)}
.ronda .nota{margin-top:5px;color:var(--ink-2);font-size:.88rem}
.ronda .cats{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:.84rem}
.ronda .btn{width:100%;margin-top:16px}
/* La ronda cuyo draw se está mirando queda marcada, para que no haya duda
   de a cuál corresponde la tabla de abajo. */
.ronda.activa{border-color:var(--forest);box-shadow:0 6px 22px rgba(34,133,68,.14)}
.ronda .btn[disabled]{background:#fff;color:var(--ink-3);border-color:var(--line-2);
  cursor:default}
.ronda .btn[disabled]:hover{background:#fff;border-color:var(--line-2)}

/* ── noticias ── */
.noticia{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;
  margin-top:26px}
@media (max-width:900px){.noticia{grid-template-columns:1fr}}
.noticia .foto{aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:var(--bg-soft)}
.noticia .foto img{width:100%;height:100%;object-fit:cover}
.noticia h3{font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1.25}
.noticia .fecha{color:var(--ink-3);font-size:.85rem;margin-top:9px}
.noticia .bajada{color:var(--ink-2);margin-top:12px}

/* ── galería ── */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
@media (max-width:900px){.galeria{grid-template-columns:repeat(2,1fr)}}
.galeria a{aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:var(--bg-soft)}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.galeria a:hover img{transform:scale(1.04)}

.centro{text-align:center;margin-top:28px}

/* ── pie ── */
.foot{background:var(--dark);color:#fff;padding-block:44px;margin-top:0}
.foot-in{display:grid;grid-template-columns:1.15fr 1.15fr .8fr;gap:38px;align-items:start}
@media (max-width:1080px){.foot-in{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.foot-in{grid-template-columns:1fr;text-align:center;justify-items:center}}
.foot h4{font-family:var(--display);font-weight:600;font-size:1.02rem}
.foot p,.foot a{color:rgba(255,255,255,.7);font-size:.88rem;line-height:1.7}
.foot a:hover{color:#fff}
.foot .fine{color:rgba(255,255,255,.45);font-size:.8rem;line-height:1.6;
  margin-top:14px;max-width:52ch}
.foot .gratis{display:inline-block;margin-bottom:12px;border-radius:999px;
  border:1px solid rgba(126,226,166,.4);background:rgba(42,154,82,.22);
  padding:5px 13px;font-size:.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:#a8e9c4}
.foot-bar{border-top:1px solid rgba(255,255,255,.12);margin-top:32px;padding-top:22px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.foot-bar span{color:rgba(255,255,255,.45);font-size:.78rem}

/* ── franja de evento en páginas interiores ──────────────────────────
   La portada lleva el banner grande; Resultados, Salidas, Field e
   Inscritos llevan esta franja compacta para que la tabla empiece arriba
   y no haya que scrollear para llegar al contenido de la página. */
.tira{background:var(--forest-dark);color:#fff}
.tira-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;padding-block:18px}
.tira-evento{font-family:var(--club);font-weight:var(--club-weight);
  font-size:clamp(1rem,2.2vw,1.4rem);line-height:1.2}
.tira-fechas{margin-top:3px;font-size:.85rem;color:rgba(255,255,255,.72);
  font-variant-numeric:tabular-nums}

/* Filtros de categoría del leaderboard. */
.filtros{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}

/* En una página por sección ya no hace falta capar las listas: cada tabla
   es el contenido de su propia página y se recorre con el scroll normal.
   Solo el draw mantiene tope, porque conviven tres rondas en una página. */
.lista-larga{max-height:640px;overflow-y:auto}
.lista-larga thead th{position:sticky;top:0;z-index:2}

/* ── ApexGolf como logo grande de cabecera ───────────────────────────
   Solo cuando torneo.js trae  club.logo: 'apexgolf'  (el caso del demo,
   donde no hay club real). Placa oscura porque el wordmark es blanco por
   manual de marca y esta cabecera tiene fondo claro. */
.topbar-apex{display:inline-flex;align-items:center;gap:.4em;
  background:var(--dark);border-radius:16px;padding:18px 30px;
  box-shadow:0 8px 26px rgba(20,28,23,.22)}
.topbar-apex-desc{display:block;margin-top:10px;text-align:center;
  font-size:.64rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;color:var(--ink-3)}
@media (max-width:520px){
  .topbar-apex{padding:14px 22px}
  .topbar-apex .lockup-word{font-size:28px!important}
  .topbar-apex svg{width:34px;height:34px}
}

/* ── tarjeta en dos bloques de nueve ─────────────────────────────────
   En un teléfono, 18 hoyos en una fila dejan 17px por celda y las marcas
   miden 25: los círculos y cuadrados se encimaban. Partida en Ida y
   Vuelta, cada bloque tiene 10 columnas y respira. En pantalla ancha los
   dos van lado a lado y se ve la vuelta completa igual. */
.tarjeta-nueves{display:flex;flex-wrap:wrap;gap:14px 22px}
.nueve{flex:1 1 330px;min-width:0}
.tarjeta-total{margin-top:14px;font-size:.88rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.tarjeta-total b{color:var(--ink);font-size:1rem}

@media (max-width:640px){
  .tarjeta{padding:14px 10px}
  .tarjeta th,.tarjeta td{padding:5px 1px;font-size:.74rem}
  /* El rótulo más largo de la columna es "Score". Con 38px entra completo
     y a los hoyos les quedan 27px, más que los 25 que mide el doble
     círculo con su anillo exterior. */
  .tarjeta .rot{width:38px;font-size:.56rem;padding-left:2px}
  /* La marca baja a 21px y el anillo exterior a 2px: el doble círculo mide
     entonces 25px dentro de una celda de 27 y no invade la vecina. Con 23px
     y anillo de 3 sumaba 29 y se encimaban. */
  .mk{width:21px;height:21px;font-size:.72rem}
  .mk-eagle::after,.mk-double::after{inset:-2px}
  /* La columna de subtotal necesita ancho propio: con table-layout fixed
     todas las columnas miden igual y "VUELTA" salía cortada. */
  .tarjeta th.acum,.tarjeta td.acum{width:44px}
  .leyenda-marcas{gap:6px 14px;font-size:.72rem}
}

/* ── tablas en el teléfono ───────────────────────────────────────────
   Con 8 columnas el leaderboard queda ilegible en 375px. Se esconden las
   que son de consulta (categoría y el golpe de cada vuelta) y quedan las
   cuatro que importan mirando la tabla en la cancha: posición, jugador,
   total y por qué hoyo va. El detalle completo está a un toque, en la
   tarjeta, y en horizontal o en el computador vuelven todas. */
@media (max-width:640px){
  /* 24px por lado es generoso para una tabla de datos en un teléfono:
     bajarlo a 14 le devuelve 20px a cada tabla, que es casi una columna
     entera de la tarjeta. */
  .shell{padding-inline:14px}
  .c-cat,.c-round,.col-categoria{display:none}
  /* En Stats la distancia de cada hoyo es lo primero que sobra: es dato de
     ficha, no de consulta en la cancha. Las columnas de conteo se quedan y
     la tabla se desplaza de lado, porque un birdie menos ES la noticia. */
  .s-largo{display:none}
  .t-stats th,.t-stats td{padding:9px 5px}
  .s-par,.s-rank{width:2.6rem}
  .s-prom{width:3.9rem}
  .s-dif{width:4.1rem}
  .s-cnt{width:3.4rem}
  .t-stats .s-hoyo{width:3rem}
  th,td{padding:10px 5px}
  th:first-child,td:first-child{padding-left:10px}
  th:last-child,td:last-child{padding-right:10px}
  .c-pos{width:2.5rem}
  .c-total{width:3.2rem}
  .c-thru{width:2.6rem}
  .c-hcp{width:3.6rem}
  th{font-size:.6rem;letter-spacing:.06em}
  .p-name{font-size:.9rem}
  .p-club{font-size:.72rem}
  /* El nombre manda: es lo que se busca con el pulgar. */
  .jug{gap:7px}
  .flag{width:17px;height:12px}
  /* Los lockups de ApexGolf quedaban en 33 y 40px de alto. Son el enlace
     que sostiene todo el negocio de este sitio: tienen que ser tocables. */
  .lockup{padding-block:14px}
}

/* ── botón con borde de gradiente giratorio ──────────────────────────
   El mismo efecto del componente React de referencia, en CSS plano: este
   sitio no tiene React ni build, y agregarlos rompería el flujo de
   arrastrar la carpeta a Netlify.

   Cómo funciona: `--r` se registra con @property para que el navegador
   sepa interpolar un ángulo (una custom property normal no se puede
   animar), el fondo es un conic-gradient que arranca en ese ángulo, y un
   ::after tapa el centro dejando a la vista solo el anillo. Al animar el
   ángulo, el gradiente gira.

   LA FORMA NO CAMBIA: sigue en border-radius 4px, no en píldora. El
   interior va en charcoal para que el botón mantenga su peso de CTA
   primario sobre el fondo blanco, y el anillo verde gire alrededor. */
@property --r {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.btn.destacado{
  position:relative;
  isolation:isolate;
  border-color:transparent;
  background:conic-gradient(from var(--r),
    var(--forest-light) 0deg, #a8e9c4 90deg, var(--forest-dark) 180deg,
    #7ac99c 270deg, var(--forest-light) 360deg);
  animation:girar-borde 4s linear infinite;
}
.btn.destacado::after{
  content:'';position:absolute;inset:3px;
  border-radius:2px;                 /* 4px del borde menos los 3 del inset */
  background:var(--dark);
  z-index:-1;
  transition:background-color .18s ease;
}
.btn.destacado:hover::after{background:#1d2a22}
.btn.destacado .btn-label{position:relative;z-index:1}

@keyframes girar-borde{ to { --r:360deg } }

/* Sin animación, el gradiente igual se ve: queda quieto en su ángulo
   inicial y el botón conserva su anillo. */
@media (prefers-reduced-motion:reduce){
  .btn.destacado{animation:none}
}

/* Contra-par del día en la columna de una vuelta en juego.
   Va en negrita para que se lea como una unidad distinta de los golpes de
   las vueltas cerradas: en la misma columna conviven "69" (score de la
   vuelta) y "+1" (cómo va hoy), y sin ese contraste se confunden. */
.c-round .en-juego{font-weight:700}