/* ═══════════════════════════════════════════════════════════════════ 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} /* En la PORTADA el logo del club va más grande: es la primera pantalla del sitio y la cabecera es suya. Las páginas interiores lo dejan en 96 px para que la tabla empiece arriba. En el teléfono baja lo justo para que un logo apaisado (3:1, el de un abierto con sus auspiciadores) quepa a lo ancho sin quedar con franjas vacías arriba y abajo. */ body[data-pagina="inicio"] .club-logo{height:150px} @media (max-width:820px){body[data-pagina="inicio"] .club-logo{height:124px}} @media (max-width:640px){body[data-pagina="inicio"] .club-logo{height:104px}} /* ── el club y ApexGolf, uno al lado del otro ────────────────────────────── Cuando el club trae su propio logo, la cabecera los muestra juntos: primero el suyo —es su torneo— y a la derecha el nuestro, más chico y separado por una línea fina. Sin cuñas verdes: existían para enmarcar nuestra placa oscura, y acá no hay placa que enmarcar. `.topbar-in.solo` deshace la grilla de tres columnas (cuña · marca · cuña) que ya no tiene cuñas que poner. */ .topbar-in.solo{grid-template-columns:1fr;justify-items:center} .marca-dupla{display:flex;align-items:center;gap:26px} /* La línea separadora, no un borde del logo: así el alto lo fija el contenido y no hay que mantener dos medidas en sincronía. */ .marca-sep{width:1px;align-self:stretch;min-height:58px;background:var(--line-2)} .marca-apex{display:inline-flex;flex-direction:column;align-items:center;gap:6px; text-decoration:none} /* El wordmark de ApexGolf es blanco por manual SOLO sobre verde o sobre el pie. Acá el fondo es blanco, así que va en la tinta oscura de marca. */ .marca-apex .lockup-word{color:var(--ink)} .marca-apex .apex-desc{font-size:.58rem;letter-spacing:.15em;text-transform:uppercase; color:var(--ink-3);font-weight:700} @media (max-width:640px){ /* En el teléfono los dos en fila no caben: el escudo del club se achica y la separación se cierra, pero NO se apila. Uno debajo del otro empuja el menú fuera de pantalla y la primera pantalla del sitio deja de mostrar la tabla, que es a lo que la gente entra. */ .marca-dupla{gap:14px} .marca-sep{min-height:44px} .marca-apex .lockup-word{font-size:19px!important} .marca-apex svg{width:23px;height:23px} .marca-apex .apex-desc{font-size:.5rem;letter-spacing:.1em} } /* El nombre del club cuando todavía no subió logo. Es su marca igual, así que va en SU tipografía y del mismo lado que iría el logo. El tope de ancho existe porque «Club de Golf Rocas de Santo Domingo» en una línea empuja a ApexGolf fuera de la pantalla; con el tope, envuelve. */ .club-logo-txt{display:block;font-family:var(--club);font-weight:var(--club-weight); font-size:1.35rem;text-align:center;line-height:1.2;max-width:16ch; color:var(--ink);text-wrap:balance} /* ── menú ── */ .nav{background:var(--forest);position:sticky;top:0;z-index:40} /* MENÚ CENTRADO. Grilla de tres columnas iguales con los links al medio y el endoso a la derecha: así los links quedan centrados respecto de la BARRA entera, no del espacio que sobra al lado del endoso (que los corría a la izquierda). Lo pidió el Country. */ .nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px} .nav-links{display:flex;flex-wrap:wrap;justify-content:center;grid-column:2} .nav-endorse{grid-column:3;justify-self:end} .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{display:flex;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. */ /* La altura CRECE con el ancho del monitor. Fija en 440px, un monitor de 2000px dejaba la franja en 4,5:1: cualquier foto quedaba reducida a una tira irreconocible y encima escalada. Con el clamp, hasta ~1460px de ancho la altura sigue siendo exactamente 440 —ningún sitio publicado cambia en un notebook— y de ahí para arriba la franja mantiene ~3,3:1, con tope en 640 para no comerse la pantalla. */ @media (min-width:820px){.banner:has(img){min-height:clamp(440px,30vw,640px)}} /* 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,var(--velo-arriba,.28)) 0%, rgba(0,0,0,var(--velo-abajo,.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:var(--club-tracking,-.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". El margen NEGATIVO lo acerca a los dos lados. El separador es un hijo más del flex, así que se comía el `gap` entero dos veces —34px antes y 34 después— y dejaba al auspiciador del club a 68px de nuestra placa, leyéndose como dos franjas distintas en vez de una. Con esto quedan ~44px: sigue separando, que es su trabajo, sin mandar al club al otro lado de la sección. */ .ausp-sep{width:1px;align-self:stretch;min-height:64px;background:var(--line-2); margin-inline:-12px} @media (max-width:820px){.ausp-sep{display:none}} /* ── franja por filas (migración 053) ── Cuando el club arma niveles, ApexGolf va solo arriba y cada fila es su propio renglón centrado. Como cada fila es un flex independiente, en el teléfono se reacomoda sola: nada se posiciona en absoluto, así que un arreglo hecho en el computador no se descuadra en el celular. */ .ausp-apex-solo{display:flex;justify-content:center;margin-top:26px} .ausp-filas{display:flex;flex-direction:column;align-items:stretch; gap:34px;margin-top:34px} .ausp-fila{display:flex;flex-direction:column;align-items:center;gap:14px} /* Una línea fina arriba separa un nivel del siguiente sin encajonarlos. La primera fila no la lleva: ya la separa la placa de ApexGolf. */ .ausp-fila + .ausp-fila{border-top:1px solid var(--line-2);padding-top:34px} .ausp-fila-rotulo{font-size:.62rem;font-weight:700;text-transform:uppercase; letter-spacing:.17em;color:var(--ink-3);text-align:center;margin:0} .ausp-fila-logos{display:flex;flex-wrap:wrap;justify-content:center; align-items:center;gap:22px 34px} .ausp-fila-logos img{max-height:70px;width:auto;object-fit:contain} /* ── el hueco del draw ────────────────────────────────────────────────── Una hora en la que no sale nadie. Se dibuja ATENUADA y en cursiva: tiene que leerse como un espacio, no como un grupo más, o alguien va a buscar su nombre ahí. El fondo distinto es lo que hace que el ojo la salte al recorrer la columna de horas, que es para lo que existe. */ .bloque td{background:var(--bg-soft)} .bloque-txt{font-style:italic;color:var(--ink-3);font-size:.85rem; letter-spacing:.04em} /* ── 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} /* Hándicap de juego. NO se esconde en el teléfono como .c-cat o .c-round: en una tabla neto es la columna que explica el total, y sin ella el número de al lado no se puede reconstruir mirando la tabla. */ .c-hj{width:3.6rem;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-hj,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)} /* Con aire respecto del nombre: iba pegado («Clemente Correa A.Ver tarjeta») y se leía como parte del apellido. */ .ver-tarjeta{background:none;border:none;cursor:pointer;color:var(--forest-dark);margin-left:12px;white-space:nowrap; 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} .c-hj{width:2.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: ''; 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} /* ── partner de datos de la página de Stats ───────────────────────────── La firma de autoría de las estadísticas. Deliberadamente sobria: no compite con la marca del club ni con la franja de auspiciadores. */ .stats-by{display:flex;align-items:center;justify-content:center;gap:18px; margin:22px auto 28px;width:max-content} .stats-by-txt{font-size:12px;letter-spacing:.15em;text-transform:uppercase; color:#6d746d;font-weight:700} /* El logotipo viene sobre fondo transparente y en tinta oscura: va limpio, sin recuadro ni fondo propio. */ .stats-by img{height:76px;width:auto;display:block} .stats-partner-pie{display:flex;align-items:center;justify-content:center;gap:24px; margin:44px auto 0;padding-top:28px;border-top:1px solid #e4e7e4; max-width:820px;flex-wrap:wrap} .stats-partner-pie img{height:100px;width:auto;display:block} .stats-partner-pie p{margin:0;font-size:13.5px;color:#5c635c;max-width:430px;line-height:1.55} @media (max-width:640px){ .stats-by{gap:12px;margin-bottom:22px} .stats-by img{height:58px} .stats-partner-pie{gap:16px} .stats-partner-pie img{height:76px} .stats-partner-pie p{max-width:none;text-align:center} } /* ── banner de coaching ── La presencia comercial de Apex en el sitio de un club: una franja chica y declaradamente aviso, entre el contenido y el pie. Sobre fondo suave para que no compita con el pie oscuro que viene justo debajo. */ .apex-banner{background:var(--bg-soft);border-top:1px solid rgba(0,0,0,.06);padding-block:18px} .apex-banner a{display:flex;align-items:center;justify-content:center;gap:18px; flex-wrap:wrap;text-decoration:none;color:var(--ink-2)} .apex-banner .ab-marca{display:inline-flex;align-items:center;gap:7px; font-family:var(--display);font-weight:600;white-space:nowrap} /* El wordmark hereda blanco de .lockup-word (está pensado para fondos oscuros); sobre el fondo claro del banner desaparecía. Acá va en tinta. */ .apex-banner .lockup-word{color:var(--ink)} .apex-banner .ab-texto{font-size:.9rem;max-width:520px} .apex-banner .ab-cta{color:var(--forest);font-weight:600;font-size:.9rem;white-space:nowrap} .apex-banner a:hover .ab-cta{color:var(--forest-dark)} @media (max-width:760px){.apex-banner a{gap:8px;text-align:center}.apex-banner .ab-texto{font-size:.85rem}} /* ── el documento de las bases, leído en el sitio ── El visor incrustado es de pantalla grande. En un teléfono un