/* =====================================================================
   ui-golf360.css  ·  kit «interfaz-golf360» v1.1  ·  CLOTITEC
   COPIA VENDORIZADA en Clotitec Design OS (componentes/g3/). Lo que cambia respecto al kit
   de la skill está en componentes/g3/CAMBIOS.md. Los temas ya no viven junto al kit: se
   generan en css/g3/<cliente>.css y se cargan con componentes/g3/temas.css.
   Lenguaje de interfaz del visor Golf360 (Golf Municipal de Llanes),
   empaquetado de forma portable. Prefijo .g3-  ·  vanilla, sin build.

   CAPAS (de fuera a dentro)
     1. Variables ESTRUCTURALES  (este fichero)   -> iguales en todo cliente
     2. Variables de TEMA        (css/g3/<cliente>.css, GENERADOS desde tokens/) -> cambian por cliente
     3. Componentes              (este fichero)

   ADAPTACIONES respecto a Golf360 (todas deliberadas):
     - prefijo .g3-  y variables --g3-*  (Golf360 usa .chip, .gm-*, .mj-*, .tp-*)
     - UNA sola hoja (.g3-hoja) en lugar de las tres de Golf360 (.mj/.gm/.tp)
     - UNA sola familia de botones (.g3-btn) en lugar de .mj-btn/.gm-btn/.tp-btn
     - UN solo foco (--g3-foco, 3px/2px) en lugar de rojo + rojo + amarillo
     - sombras y velo derivados de --g3-sombra-rgb / --g3-velo-rgb (en Golf360
       estaban escritos a mano con 8,94,43 y 6,40,20)
     - los tonos #EEF4EC & hermanos pasan a variables --g3-tinte*
     - toque >= 44 px también en la tira de hoyos (Golf360: 40 px de ancho)
     - MODO QUIOSCO por atributo [data-g3-quiosco] y escala --g3-esc
       (Golf360 usa media query + `zoom`, no estándar; aquí, variables)
     - el estado activo se engancha a ARIA (aria-pressed / aria-selected /
       aria-current) y, solo como puente para JS heredado, a .active / .is-active / .is-on
     - v1.1 (correcciones de los verificadores): foco temático también en hijos sin clase,
       toques reales de 44/64 px en pestañas y segmentado, toast abajo en móvil,
       variable --g3-marca-texto (modo oscuro), --g3-relleno (degradado por tema),
       [hidden] respetado, :where() en el display de pestañas/chips, base 15 px
   ===================================================================== */

/* ---------------------------------------------------------------------
   1A. ESTRUCTURALES NO DERIVADAS
   --------------------------------------------------------------------- */
:root{
  --g3-esc:1;                         /* escala global (quiosco: 1.3) */

  /* radios (Golf360 app.css:5, game.css, multijugador.css) */
  --g3-radio-tarjeta:18px;            /* --radio */
  --g3-radio-hoja:22px;               /* .mj-hoja / .gm-hoja */
  --g3-radio-opc:16px;                /* .mj-opc, .sc-hud */
  --g3-radio-boton:14px;              /* .mj-btn, .gm-ib */
  --g3-radio-fila:12px;               /* .gm-op, .acc, .mj-in */
  --g3-radio-mini:8px;
  --g3-radio-pildora:99px;

  /* tamaños de toque */
  --g3-toque:44px;                    /* mínimo de control (Golf360: 44) */
  --g3-toque-chip:36px;               /* chip visible; el área de toque llega a 44 con ::before */
  --g3-toque-fila:48px;               /* .gm-op, .sp-op */
  --g3-toque-seg:44px;                /* opción de segmentado (Golf360: 40) */
  --g3-toque-accion:62px;             /* botón de acción grande (.gm-swing) */

  /* cristal: en Golf360 son paneles casi opacos SIN desenfoque */
  --g3-cristal-alfa:.94;              /* --panel: rgba(255,255,255,.94) */
  --g3-cristal-filtro:none;           /* p. ej. blur(12px) saturate(160%) si una app lo quiere */

  /* animación */
  --g3-ease-hoja:cubic-bezier(.2,.8,.2,1);
  --g3-dur-rapida:.15s;
  --g3-dur:.2s;
  --g3-dur-hoja:.26s;

  /* z-index (Golf360 §1.8). Ajusta si tu app ya usa otros */
  --g3-z-barra:6;
  --g3-z-modal:9;
  --g3-z-panel:11;
  --g3-z-toast:12;

  /* estados semánticos (no dependen del cliente) */
  --g3-error:#8A3B00;                 /* error de formulario: marrón, no rojo */
  --g3-aviso-amarillo:#F2AB27;  --g3-aviso-amarillo-bg:#FFF8EA;
  --g3-aviso-naranja:#F07E1B;   --g3-aviso-naranja-bg:#FFF1E6;
  --g3-aviso-rojo-bg:#FDECEA;   --g3-aviso-rojo-tx:#A8261C;
  --g3-aviso-gris-bg:#EEF1F3;   --g3-aviso-gris-tx:#3D4A52;

  /* safe-area */
  --g3-top:calc(env(safe-area-inset-top,0px) + 10px);
  --g3-pie-movil:calc(env(safe-area-inset-bottom,0px) + 90px);   /* separación del toast al borde inferior en móvil */
}

/* DEFAULTS DE TEMA (solo en :root y en el elemento que fija el tema, NO en .g3-scope ni [data-g3-quiosco]:
   un hijo con esas marcas reseteaba el degradado de Clotitec y el --g3-marca-texto claro del modo oscuro).
   --g3-relleno = fondo de lo activo/primario (un tema puede poner un degradado);
   --g3-marca-texto = color de TEXTO/ICONO sobre superficie. Se separan para poder hacer un modo oscuro:
   el relleno sigue oscuro (texto blanco encima) y el texto se aclara. */
:root,[data-g3-tema]{
  --g3-relleno:var(--g3-marca);
  --g3-marca-texto:var(--g3-marca);
}

/* ---------------------------------------------------------------------
   1B. ESTRUCTURALES DERIVADAS  (se recalculan en cada elemento que fija
   tema o quiosco, para que funcionen también en un contenedor interior)
   --------------------------------------------------------------------- */
:root,
.g3-scope,
[data-g3-tema],
[data-g3-quiosco]{
  /* superficie de barras/chips/pestañas: superficie al 94 % */
  --g3-panel:color-mix(in srgb,var(--g3-superficie,#fff) calc(var(--g3-cristal-alfa) * 100%),transparent);

  /* sombras: Golf360 §1.4, teñidas del color de marca (nunca gris) */
  --g3-sombra:0 10px 30px rgba(var(--g3-sombra-rgb,8,94,43),.22),0 2px 6px rgba(var(--g3-sombra-rgb,8,94,43),.14);
  --g3-sombra-compacta:0 3px 12px rgba(var(--g3-sombra-rgb,8,94,43),.2),0 1px 3px rgba(var(--g3-sombra-rgb,8,94,43),.12);
  --g3-sombra-hoja:0 -6px 30px rgba(var(--g3-sombra-rgb,8,94,43),.28);
  --g3-sombra-chip:0 2px 8px rgba(var(--g3-sombra-rgb,8,94,43),.16);
  --g3-sombra-hoja-centrada:0 10px 30px rgba(var(--g3-sombra-rgb,8,94,43),.28),0 2px 6px rgba(var(--g3-sombra-rgb,8,94,43),.16);
  --g3-velo:rgba(var(--g3-velo-rgb,6,40,20),.42);

  /* escala tipográfica (px de Golf360 x escala) */
  --g3-t-titulo:calc(34px * var(--g3-esc));      /* .ficha h2 800 34/1 */
  --g3-t-subtitulo:calc(22px * var(--g3-esc));   /* .ficha .nombre 300 22/1.15 */
  --g3-t-linea:calc(17px * var(--g3-esc));       /* .ficha .par 500 17/1.2 */
  --g3-t-cifra-xl:calc(30px * var(--g3-esc));    /* .gm-golpes b 800 30 */
  --g3-t-cifra:calc(22px * var(--g3-esc));       /* .gm-stats b 700 22 */
  --g3-t-cifra-s:calc(18px * var(--g3-esc));     /* .ficha .datos b 700 18 */
  --g3-t-hoja:calc(19px * var(--g3-esc));        /* .mj-hoja-h h2 800 19 */
  --g3-t-cuerpo:calc(15px * var(--g3-esc));      /* Golf360 app.css:16 body 400 15/1.5 */
  --g3-t-boton:calc(14.5px * var(--g3-esc));
  --g3-t-chip:calc(13px * var(--g3-esc));
  --g3-t-nota:calc(12px * var(--g3-esc));
  --g3-t-etiqueta:calc(10.5px * var(--g3-esc));  /* versalitas */
  --g3-t-legal:calc(10.5px * var(--g3-esc));
  --g3-tracking-etiqueta:.08em;                  /* .06–.08em */

  /* espaciado (Golf360 no tiene escala; estos son sus valores recurrentes) */
  --g3-e1:calc(4px * var(--g3-esc));
  --g3-e2:calc(6px * var(--g3-esc));
  --g3-e3:calc(8px * var(--g3-esc));
  --g3-e4:calc(12px * var(--g3-esc));
  --g3-e5:calc(16px * var(--g3-esc));
  --g3-e6:calc(22px * var(--g3-esc));
}

/* ---------------------------------------------------------------------
   1C. MODO QUIOSCO  (Golf360 lo hacía con media query + zoom 1,3/1,45)
   Se activa poniendo el atributo en <html>, <body> o en .g3-scope:
       <body data-g3-quiosco>          o  G3UI.quiosco(true)
   Toques >= 64 px y tipografía x1,3. No requiere `zoom`.
   --------------------------------------------------------------------- */
[data-g3-quiosco]{
  --g3-esc:1.3;
  --g3-toque:64px;
  --g3-toque-chip:64px;
  --g3-toque-fila:72px;
  --g3-toque-seg:64px;
  --g3-toque-accion:84px;
}
[data-g3-quiosco] .g3-chip::before{display:none}   /* ya miden 64 reales */

/* ---------------------------------------------------------------------
   2. BASE ACOTADA  (nada global: solo dentro de .g3-scope o de .g3-*)
   --------------------------------------------------------------------- */
.g3-scope{
  font-family:var(--g3-fuente-texto,system-ui,sans-serif);
  font-size:var(--g3-t-cuerpo);
  line-height:1.5;
  color:var(--g3-texto);
  -webkit-font-smoothing:antialiased;
}
.g3-scope *,.g3-scope *::before,.g3-scope *::after{box-sizing:border-box}
[class^="g3-"],[class*=" g3-"]{box-sizing:border-box}
[class^="g3-"]::before,[class*=" g3-"]::before,
[class^="g3-"]::after,[class*=" g3-"]::after{box-sizing:border-box}

/* foco visible único (Golf360 tenía 3; ver cabecera). 3 px + separación 2 px */
[class^="g3-"]:focus-visible,[class*=" g3-"]:focus-visible,
.g3-pestanas>*:focus-visible,.g3-seg__lista>*:focus-visible,.g3-tira>*:focus-visible,
.g3-check input:focus-visible,.g3-menu__panel>*:focus-visible,.g3-hoja__pie>*:focus-visible,.g3-acciones>*:focus-visible{
  outline:3px solid var(--g3-foco,#C32B29);outline-offset:2px;
}
.g3-seg__op input:focus-visible + span{outline:3px solid var(--g3-foco,#C32B29);outline-offset:2px}
/* los hijos directos de pestañas/segmentado/tira (botones SIN clase propia) también llevan el anillo temático.
   Si tu app pone outline:none en sus botones heredados, anúlalo en el puente con la misma especificidad */

/* [hidden] siempre gana (las apps legacy ocultan con b.hidden / atributo hidden) */
.g3-chip[hidden],.g3-btn-icono[hidden],.g3-x[hidden],.g3-btn[hidden],.g3-pestanas[hidden],.g3-item[hidden],
.g3-seg[hidden],.g3-tarjeta[hidden],.g3-stats[hidden],.g3-tira[hidden],.g3-opc[hidden],.g3-fila[hidden]{display:none!important}

/* solo lectores de pantalla (un único nombre; Golf360 tenía cuatro) */
.g3-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* posicionado opcional sobre un mapa (el contenedor debe ser position:relative) */
.g3-pos-arriba{position:absolute;z-index:var(--g3-z-barra);top:var(--g3-top);left:12px;right:12px}
.g3-pos-abajo{position:absolute;z-index:5;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 34px)}
.g3-pos-ficha{position:absolute;z-index:5;right:16px;top:calc(var(--g3-top) + 70px);width:min(330px,calc(100% - 32px))}
.g3-fijo{position:fixed}               /* combínalo con g3-pos-* para viewport completo */

/* ---------------------------------------------------------------------
   3. BARRA SUPERIOR  (Golf360 app.css:46-58)
   Tres píldoras flotantes: marca · pestañas · herramientas.
   El contenedor NO captura toques: el hueco deja pasar el gesto al mapa.
   --------------------------------------------------------------------- */
.g3-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;pointer-events:none}
.g3-barra>*{pointer-events:auto}
.g3-logo{display:flex;align-items:center;gap:var(--g3-e3);text-decoration:none;color:var(--g3-marca-texto);
  background:var(--g3-panel);backdrop-filter:var(--g3-cristal-filtro);
  border-radius:var(--g3-radio-pildora);padding:4px 14px 4px 4px;box-shadow:var(--g3-sombra)}
.g3-logo{min-height:var(--g3-toque);min-width:var(--g3-toque)}
.g3-logo img,.g3-logo svg{width:calc(40px * var(--g3-esc));height:calc(40px * var(--g3-esc));border-radius:50%;object-fit:cover;flex:0 0 auto}
.g3-logo b{display:block;font:700 calc(14px * var(--g3-esc))/1.1 var(--g3-fuente-titulo)}
.g3-logo small{display:block;font:300 var(--g3-t-nota)/1.1 var(--g3-fuente-texto);letter-spacing:.04em}
.g3-herramientas{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--g3-e3);row-gap:var(--g3-e3)}
@media (max-width:720px){
  .g3-logo__t{display:none}           /* solo el logo (Golf360 app.css:125) */
  .g3-logo{padding:4px}
  .g3-pestanas{margin-inline:0}
}

/* ---------------------------------------------------------------------
   4. PESTAÑAS EN PÍLDORA  (Golf360 app.css:52-54)
   Estado activo por ARIA; `.active` solo como puente para JS heredado.
   --------------------------------------------------------------------- */
:where(.g3-pestanas){display:flex}    /* :where = especificidad 0: un `display:none` heredado (media query, [hidden], clase) GANA al kit */
.g3-pestanas{background:var(--g3-panel);backdrop-filter:var(--g3-cristal-filtro);
  border-radius:var(--g3-radio-pildora);padding:4px;box-shadow:var(--g3-sombra);margin-inline:auto}
.g3-pestanas>button,.g3-pestanas>a{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--g3-e2);
  border:0;background:none;text-decoration:none;cursor:pointer;
  min-height:var(--g3-toque);padding:0 16px;border-radius:var(--g3-radio-pildora);   /* 44 px reales (Golf360: 37; aquí se cumple la regla de toque) */
  font:600 calc(14px * var(--g3-esc))/1.2 var(--g3-fuente-texto);color:var(--g3-marca-texto);white-space:nowrap}
.g3-pestanas>[aria-pressed="true"],.g3-pestanas>[aria-selected="true"],.g3-pestanas>[aria-current="true"],.g3-pestanas>[aria-current="page"],.g3-pestanas>.active,.g3-pestanas>.is-active{
  background:var(--g3-relleno);color:#fff}
@media (max-width:720px){.g3-pestanas>button,.g3-pestanas>a{padding:0 11px;font-size:calc(13px * var(--g3-esc))}}

/* variante barra inferior móvil: icono arriba, texto debajo (sustituye a una tab bar).
   Barra a TODO el ancho, opaca y con esquinas superiores de 22 px (como la hoja inferior): una barra flotante con
   márgenes deja ver lo que pasa por debajo (p. ej. el sidebar-hoja de Llanes). Pestaña activa <= 112 px, centrada. */
.g3-pestanas--barra{margin-inline:0;width:100%;justify-content:space-around;background:var(--g3-superficie);
  border-radius:var(--g3-radio-hoja) var(--g3-radio-hoja) 0 0;box-shadow:var(--g3-sombra-hoja);
  padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px))}
.g3-pestanas--barra>button,.g3-pestanas--barra>a{flex:1 1 0;max-width:112px;flex-direction:column;gap:2px;min-height:var(--g3-toque);padding:4px 6px;font-size:calc(11.5px * var(--g3-esc));border-radius:var(--g3-radio-fila)}
.g3-pestanas--barra svg{width:calc(22px * var(--g3-esc));height:calc(22px * var(--g3-esc));stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------------
   5. CHIP · CHIP-INTERRUPTOR · CHIP DE DATO · BOTÓN-ICONO REDONDO
   (Golf360 app.css:56-58, entorno.css:2-11, tiempo.css:135-143)
   --------------------------------------------------------------------- */
:where(.g3-chip){display:inline-flex}
.g3-chip{position:relative;align-items:center;gap:var(--g3-e2);
  min-height:var(--g3-toque-chip);padding:0 14px;border:0;border-radius:var(--g3-radio-pildora);
  background:var(--g3-panel);backdrop-filter:var(--g3-cristal-filtro);color:var(--g3-marca-texto);
  box-shadow:var(--g3-sombra);cursor:pointer;text-decoration:none;
  font:600 var(--g3-t-chip)/1.2 var(--g3-fuente-texto);white-space:nowrap}
.g3-chip::before{content:"";position:absolute;inset:-4px}                /* área de toque hasta 44 px en ambos ejes (un chip de solo icono mide 36: con -2px de lado daba 40 de ancho) */
.g3-chip[aria-pressed="true"],.g3-chip.active,.g3-chip.is-active,.g3-chip.is-on{background:var(--g3-relleno);color:#fff}
.g3-chip svg{width:1.25em;height:1.25em;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.g3-chip:disabled,.g3-chip[aria-disabled="true"]{opacity:.5;cursor:default}

/* interruptor con aspecto de chip: <button class="g3-chip g3-chip--sw" role="switch" aria-checked>
   El chip NO cambia de color: cambia la pista (como en Golf360). */
.g3-chip--sw{gap:var(--g3-e3);padding-left:10px}
.g3-chip--sw i{position:relative;flex:0 0 calc(28px * var(--g3-esc));width:calc(28px * var(--g3-esc));height:calc(16px * var(--g3-esc));
  border-radius:99px;background:var(--g3-pista-off);transition:background var(--g3-dur) ease}
.g3-chip--sw i::after{content:"";position:absolute;left:calc(2px * var(--g3-esc));top:calc(2px * var(--g3-esc));
  width:calc(12px * var(--g3-esc));height:calc(12px * var(--g3-esc));border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(var(--g3-sombra-rgb),.35);transition:transform var(--g3-dur) ease}
.g3-chip--sw[aria-checked="true"] i{background:var(--g3-relleno)}
.g3-chip--sw[aria-checked="true"] i::after{transform:translateX(calc(12px * var(--g3-esc)))}

/* chip de dato: icono + cifra + punto de aviso (clima, marea, afluencia, hora) */
.g3-chip-dato{gap:5px;padding:0 12px 0 8px;font-variant-numeric:tabular-nums}
.g3-chip-dato__g{display:inline-flex;width:calc(22px * var(--g3-esc));height:calc(22px * var(--g3-esc))}
.g3-chip-dato__g svg{width:100%;height:100%}
.g3-chip-dato b{font:700 calc(14px * var(--g3-esc))/1 var(--g3-fuente-texto)}
.g3-chip-dato small{font:500 var(--g3-t-nota)/1 var(--g3-fuente-texto);color:var(--g3-texto-suave)}
.g3-chip-dato__av{position:absolute;top:3px;left:calc(24px * var(--g3-esc));width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 2px #fff;background:var(--g3-aviso-amarillo)}
.g3-chip-dato__av[data-nivel="naranja"]{background:var(--g3-aviso-naranja)}
.g3-chip-dato__av[data-nivel="rojo"]{background:var(--g3-peligro)}
.g3-chip-dato__av[hidden]{display:none}
.g3-reserva{visibility:hidden}              /* reserva el hueco para que la barra no salte */

/* botón-icono redondo (cerrar, ⋯, ajustes) */
.g3-btn-icono{flex:0 0 var(--g3-toque);width:var(--g3-toque);height:var(--g3-toque);padding:0;border:0;border-radius:50%;font:inherit;
  display:inline-grid;place-items:center;cursor:pointer;
  background:var(--g3-panel);backdrop-filter:var(--g3-cristal-filtro);color:var(--g3-marca-texto);box-shadow:var(--g3-sombra-compacta)}
.g3-btn-icono svg{width:calc(22px * var(--g3-esc));height:calc(22px * var(--g3-esc));stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.g3-btn-icono[aria-expanded="true"],.g3-btn-icono[aria-pressed="true"]{background:var(--g3-relleno);color:#fff}
.g3-btn-icono--suave{background:var(--g3-tinte);box-shadow:none}           /* el × de una tarjeta u hoja */
.g3-x{flex:0 0 var(--g3-toque);width:var(--g3-toque);height:var(--g3-toque);border:0;border-radius:50%;background:var(--g3-tinte);
  color:var(--g3-marca-texto);font:500 calc(26px * var(--g3-esc))/1 var(--g3-fuente-texto);cursor:pointer;display:inline-grid;place-items:center;padding:0}

/* ---------------------------------------------------------------------
   6. TARJETA DE INFORMACIÓN  (Golf360 app.css:74-95)
   etiqueta en versalitas  ·  titular 800/34  ·  subtítulo 300/22  ·  datos
   Carril opcional: círculo hueco + línea punteada (la firma de Golf360).
   --------------------------------------------------------------------- */
.g3-tarjeta{position:relative;background:var(--g3-superficie);border-radius:var(--g3-radio-tarjeta);box-shadow:var(--g3-sombra);
  padding:var(--g3-e6) var(--g3-e6) 18px var(--g3-e6);color:var(--g3-texto);overflow:auto}
.g3-tarjeta--carril{padding-left:calc(58px * var(--g3-esc))}
.g3-tarjeta--carril::before{content:"";position:absolute;left:calc(22px * var(--g3-esc));top:calc(22px * var(--g3-esc));
  width:calc(18px * var(--g3-esc));height:calc(18px * var(--g3-esc));border-radius:50%;border:3.5px solid var(--g3-carril)}
.g3-tarjeta--carril::after{content:"";position:absolute;left:calc(30px * var(--g3-esc));top:calc(46px * var(--g3-esc));bottom:18px;
  border-left:3px dotted var(--g3-carril)}
.g3-tarjeta--compacta{padding:16px 16px 14px;border-radius:var(--g3-radio-opc);box-shadow:var(--g3-sombra-compacta)}
.g3-tarjeta--compacta.g3-tarjeta--carril{padding-left:calc(50px * var(--g3-esc))}
.g3-tarjeta--plana{box-shadow:none;background:var(--g3-tinte)}

/* etiqueta en versalitas: tracking .06–.08em, 10.5–13 px, 600–700, gris o marca-2 (nunca la marca) */
.g3-etiqueta{display:block;margin:0 0 2px;font:600 var(--g3-t-etiqueta)/1.2 var(--g3-fuente-texto);
  text-transform:uppercase;letter-spacing:var(--g3-tracking-etiqueta);color:var(--g3-texto-suave)}
.g3-etiqueta--marca{margin-bottom:6px;color:var(--g3-marca-2);font-size:calc(12px * var(--g3-esc));font-weight:600}   /* Golf360 scroll.css:46: 600, 6 px, verde-2 */
.g3-titulo{margin:0;font:800 var(--g3-t-titulo)/1 var(--g3-fuente-titulo);letter-spacing:-.01em;color:var(--g3-texto)}
.g3-subtitulo{margin:6px 0 2px;font:300 var(--g3-t-subtitulo)/1.15 var(--g3-fuente-titulo);text-wrap:balance;color:var(--g3-texto)}
.g3-linea{margin:0 0 12px;font:500 var(--g3-t-linea)/1.2 var(--g3-fuente-texto);letter-spacing:.02em;color:var(--g3-texto)}
.g3-texto{margin:8px 0 0;font:400 var(--g3-t-cuerpo)/1.5 var(--g3-fuente-texto);color:var(--g3-texto-suave)}
.g3-nota{margin:6px 0 10px;font:400 calc(12.5px * var(--g3-esc))/1.45 var(--g3-fuente-texto);color:var(--g3-texto-suave)}
.g3-tarjeta>.g3-x{position:absolute;right:10px;top:10px;width:calc(32px * var(--g3-esc));height:calc(32px * var(--g3-esc));flex:none;font-size:calc(18px * var(--g3-esc))}
.g3-tarjeta>.g3-x::before{content:"";position:absolute;inset:-6px}          /* área de toque hasta 44 px */
[data-g3-quiosco] .g3-tarjeta>.g3-x{width:var(--g3-toque);height:var(--g3-toque)}
/* datos: cifra + etiqueta pequeña */
.g3-datos{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0 0;font-size:var(--g3-t-chip);color:var(--g3-texto-suave)}
.g3-datos b{display:block;font:700 var(--g3-t-cifra-s)/1.1 var(--g3-fuente-titulo);color:var(--g3-marca-texto);font-variant-numeric:tabular-nums}
.g3-acciones-tarjeta{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--g3-e3);margin-top:var(--g3-e4)}

/* fila de lista con icono + título + cifra (sustituye a un <li> de lista lateral) */
.g3-item{display:flex;align-items:center;gap:var(--g3-e4);width:100%;min-height:var(--g3-toque-fila);padding:var(--g3-e3) var(--g3-e4);
  border:0;border-radius:var(--g3-radio-opc);background:var(--g3-tinte);color:var(--g3-marca-texto);text-align:left;cursor:pointer;
  font:400 var(--g3-t-cuerpo)/1.5 var(--g3-fuente-texto)}
.g3-item__ico{flex:0 0 calc(40px * var(--g3-esc));width:calc(40px * var(--g3-esc));height:calc(40px * var(--g3-esc));border-radius:50%;background:var(--g3-superficie);display:grid;place-items:center}
.g3-item__ico svg{width:60%;height:60%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g3-item__t{flex:1 1 auto;min-width:0}
.g3-item__t b{display:block;font:700 calc(15px * var(--g3-esc))/1.2 var(--g3-fuente-texto)}
.g3-item__t small{display:block;font:400 var(--g3-t-nota)/1.35 var(--g3-fuente-texto);color:var(--g3-texto-suave)}
.g3-item__v{font:700 var(--g3-t-cifra-s)/1 var(--g3-fuente-titulo);font-variant-numeric:tabular-nums;white-space:nowrap}
.g3-item[aria-pressed="true"],.g3-item[aria-current="true"],.g3-item.active,.g3-item.is-active{background:var(--g3-relleno);color:#fff}
/* el icono de la fila activa no puede heredar el blanco sobre su círculo blanco */
.g3-item[aria-pressed="true"] .g3-item__ico,.g3-item[aria-current="true"] .g3-item__ico,.g3-item.active .g3-item__ico,.g3-item.is-active .g3-item__ico{color:var(--g3-marca-texto)}
.g3-item[aria-pressed="true"] small,.g3-item[aria-current="true"] small,.g3-item.active small,.g3-item.is-active small{color:rgba(255,255,255,.85)}

/* tarjeta de INTRODUCCIÓN (Golf360 scroll.css:44-60 .sc-intro-card): kicker + titular XL + párrafo + cifras + barras */
.g3-titulo--xl{font-size:calc(36px * var(--g3-esc));line-height:1.02}
.g3-lead{margin:10px 0 0;font:400 calc(14.5px * var(--g3-esc))/1.55 var(--g3-fuente-texto);color:var(--g3-texto-suave)}
.g3-cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g3-e3);margin:14px 0 0}
.g3-cifras>div{padding:var(--g3-e3) var(--g3-e4);background:var(--g3-tinte);border-radius:var(--g3-radio-fila);min-width:0}
.g3-cifras small{display:block;font:600 var(--g3-t-etiqueta)/1.2 var(--g3-fuente-texto);text-transform:uppercase;letter-spacing:var(--g3-tracking-etiqueta);color:var(--g3-texto-suave)}
.g3-cifras b{display:block;margin-top:2px;font:800 var(--g3-t-cifra)/1.1 var(--g3-fuente-titulo);font-variant-numeric:tabular-nums;color:var(--g3-marca-texto)}
.g3-barras{display:grid;gap:8px;margin:16px 0 0;font:600 var(--g3-t-chip)/1.2 var(--g3-fuente-texto);color:var(--g3-marca-texto)}
.g3-barras>div{display:grid;grid-template-columns:minmax(0,7.5em) 1fr auto;gap:10px;align-items:center}
.g3-barras i{position:relative;display:block;height:calc(8px * var(--g3-esc));border-radius:99px;background:var(--g3-tinte);overflow:hidden}
.g3-barras i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v,50%);background:var(--g3-relleno);border-radius:inherit}
.g3-barras b{font-variant-numeric:tabular-nums;font-weight:700}
@media (max-width:720px){.g3-cifras{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------------
   7. TARJETA DE ESTADÍSTICA  (Golf360 game.css:28-33)
   columnas separadas por líneas de 2 px: etiqueta · cifra · nota
   --------------------------------------------------------------------- */
.g3-stats{display:flex;background:var(--g3-superficie);border-radius:var(--g3-radio-tarjeta);box-shadow:var(--g3-sombra);padding:12px 4px;color:var(--g3-marca-texto)}
.g3-stats>div{flex:1 1 0;padding:0 16px;border-left:2px solid var(--g3-linea);min-width:calc(104px * var(--g3-esc))}
.g3-stats>div:first-child{border-left:0}
.g3-stats small{display:block;font:600 var(--g3-t-etiqueta)/1.2 var(--g3-fuente-texto);text-transform:uppercase;letter-spacing:var(--g3-tracking-etiqueta);color:var(--g3-texto-suave)}
.g3-stats b{display:flex;align-items:center;gap:var(--g3-e2);margin-top:2px;font:700 var(--g3-t-cifra)/1.2 var(--g3-fuente-titulo);font-variant-numeric:tabular-nums;white-space:nowrap}
.g3-stats em{display:block;font:400 calc(11px * var(--g3-esc))/1.25 var(--g3-fuente-texto);font-style:normal;color:var(--g3-texto-suave)}
.g3-stats--rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(110px * var(--g3-esc)),1fr));gap:var(--g3-e3);background:none;box-shadow:none;padding:0}
.g3-stats--rejilla>div{border:0;padding:var(--g3-e3) var(--g3-e4);background:var(--g3-tinte);border-radius:var(--g3-radio-fila);min-width:0}
/* chip de cifra con etiqueta (Golf360 .gm-golpes) */
.g3-cifra{display:inline-flex;flex-direction:column;align-items:center;padding:var(--g3-e3) var(--g3-e5);border-radius:var(--g3-radio-boton);background:var(--g3-tinte);color:var(--g3-marca-texto)}
.g3-cifra small{font:600 calc(10px * var(--g3-esc))/1.2 var(--g3-fuente-texto);text-transform:uppercase;letter-spacing:var(--g3-tracking-etiqueta);color:var(--g3-texto-suave)}
.g3-cifra b{font:800 var(--g3-t-cifra-xl)/1 var(--g3-fuente-titulo);font-variant-numeric:tabular-nums}
@media (max-width:720px){.g3-stats>div{padding:0 10px;min-width:0}.g3-stats b{font-size:calc(15px * var(--g3-esc))}}

/* ---------------------------------------------------------------------
   8. HOJA / MODAL  (Golf360 multijugador.css:5-18, game.css:347-382,
   tiempo.css:146-160: tres hojas con el mismo aspecto, aquí UNA)
   Escritorio: centrada · lateral (panel derecho) · inferior.
   Móvil (<=720 px ancho o <=500 alto): siempre hoja inferior.
   Se crea con G3UI.hoja(); el HTML está en references/componentes.md
   --------------------------------------------------------------------- */
.g3-velo{position:fixed;inset:0;z-index:var(--g3-z-modal);display:flex;align-items:flex-end;justify-content:center;
  padding:12px 12px calc(env(safe-area-inset-bottom,0px) + 12px);background:var(--g3-velo);
  font-family:var(--g3-fuente-texto);color:var(--g3-marca-texto)}
@media (min-width:721px) and (min-height:501px){.g3-velo{align-items:center}}
.g3-velo--absoluto{position:absolute}                /* acotado a un contenedor (marco de quiosco, demo) */
.g3-hoja{position:relative;display:flex;flex-direction:column;width:min(calc(520px * var(--g3-esc)),100%);max-height:calc(100dvh - 24px);overflow:hidden;
  background:var(--g3-superficie);border-radius:var(--g3-radio-hoja);box-shadow:var(--g3-sombra-hoja-centrada);
  padding:14px 16px 16px;animation:g3-entra var(--g3-dur-hoja) var(--g3-ease-hoja) both}
.g3-hoja__cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;flex:0 0 auto}
.g3-hoja__cab h2{margin:0;font:800 var(--g3-t-hoja)/1.2 var(--g3-fuente-titulo);color:var(--g3-marca-texto)}
.g3-hoja__cuerpo{flex:1 1 auto;min-height:0;padding:5px 5px 2px;margin:-5px;overflow-y:auto;   /* 5 px: que overflow no recorte el anillo de foco */
  overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--g3-e5)}
.g3-hoja__pie{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:var(--g3-e3);margin-top:var(--g3-e4)}
.g3-hoja__pie .g3-btn--prim{flex:1 1 180px}           /* primario ancho */
.g3-seccion{display:flex;flex-direction:column;gap:var(--g3-e3)}
.g3-seccion__t{margin:0;font:700 calc(12.5px * var(--g3-esc))/1.2 var(--g3-fuente-texto);text-transform:uppercase;letter-spacing:var(--g3-tracking-etiqueta);color:var(--g3-texto-suave)}   /* Golf360: «HOYOS», «VISTA Y JUEGO» ~13 px / 700 */
/* leyenda de un segmentado o campo: verde 700, SIN versalitas (Golf360 «Jugadores», «Cómo se juega») */
.g3-seccion__t--leyenda{text-transform:none;letter-spacing:0;font-size:var(--g3-t-chip);color:var(--g3-marca-texto)}

/* variante inferior forzada (menú «⋯» de Golf360) */
.g3-velo--inferior{align-items:flex-end!important;padding:0}
.g3-velo--inferior .g3-hoja{width:100%;max-width:min(720px,100%);max-height:88%;border-radius:var(--g3-radio-hoja) var(--g3-radio-hoja) 0 0;
  box-shadow:var(--g3-sombra-hoja);padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 18px);animation-name:g3-sube}

/* variante lateral (panel del tiempo de Golf360: 380 px a la derecha) */
.g3-velo--lateral{align-items:stretch!important;justify-content:flex-end}
.g3-velo--lateral .g3-hoja{width:calc(380px * var(--g3-esc));max-width:calc(100% - 24px);max-height:none;border-radius:var(--g3-radio-tarjeta);
  box-shadow:var(--g3-sombra);padding:0;animation-name:g3-entra-lado}
.g3-velo--lateral .g3-hoja__cab{padding:16px 12px 10px 18px;margin:0;border-bottom:1px solid var(--g3-linea)}
.g3-velo--lateral .g3-hoja__cuerpo{padding:9px 23px 23px;margin:-5px -5px 0;gap:0}   /* inset efectivo 18 px, igual que cab y pie */
.g3-velo--lateral .g3-hoja__pie{padding:0 18px 16px}
@media (max-width:720px),(max-height:500px){
  .g3-velo--lateral{align-items:flex-end!important;padding:0;justify-content:center}
  .g3-velo--lateral .g3-hoja{width:100%;max-width:none;max-height:88%;border-radius:var(--g3-radio-hoja) var(--g3-radio-hoja) 0 0;
    padding-bottom:env(safe-area-inset-bottom,0px);animation-name:g3-sube;box-shadow:var(--g3-sombra-hoja)}
}
@keyframes g3-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes g3-sube{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes g3-entra-lado{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes g3-baja{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------------
   9. SEGMENTADO EN PÍLDORA  (Golf360 multijugador.css:41-48, js opciones())
   Radios nativos ocultos pero accesibles. Cada opción es una píldora suelta.
   También vale con botones role=radio (G3UI.segmentado los gestiona).
   --------------------------------------------------------------------- */
.g3-seg{margin:0 0 6px;padding:0;border:0;min-width:0}
.g3-seg legend,.g3-seg__leyenda{padding:0;margin:0 0 5px;font:700 var(--g3-t-chip)/1.2 var(--g3-fuente-texto);color:var(--g3-marca-texto)}
.g3-seg__lista{display:flex;flex-wrap:wrap;gap:var(--g3-e2)}
.g3-seg__op{position:relative;display:inline-flex}
.g3-seg__op input{position:absolute;opacity:0;width:1px;height:1px}
.g3-seg__op span,.g3-seg__lista>button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--g3-toque-seg);min-width:var(--g3-toque-seg);padding:0 13px;border:0;border-radius:var(--g3-radio-pildora);
  background:var(--g3-tinte);color:var(--g3-marca-texto);font:600 calc(13.5px * var(--g3-esc))/1.2 var(--g3-fuente-texto);cursor:pointer}
.g3-seg__op input:checked + span,.g3-seg__lista>button[aria-checked="true"],.g3-seg__lista>button[aria-pressed="true"],.g3-seg__lista>button.active,.g3-seg__lista>button.is-active{background:var(--g3-relleno);color:#fff}
.g3-seg__op--dis span{opacity:.5;cursor:default}
.g3-seg--bloque .g3-seg__lista{flex-direction:column}
.g3-seg--bloque .g3-seg__op span,.g3-seg--bloque .g3-seg__lista>button{width:100%;justify-content:flex-start}
.g3-seg--reparto .g3-seg__op{flex:1 1 0}
.g3-seg--reparto .g3-seg__op span{width:100%;justify-content:center}
.g3-seg--reparto .g3-seg__lista>button{flex:1 1 0;justify-content:center}

/* ---------------------------------------------------------------------
   10. CAMPOS Y CASILLAS  (Golf360 multijugador.css:15-17, 50-53)
   --------------------------------------------------------------------- */
.g3-etq{display:block;margin:4px 0 0;font:700 var(--g3-t-chip)/1.2 var(--g3-fuente-texto);color:var(--g3-marca-texto)}
.g3-campo{width:100%;min-height:var(--g3-toque);padding:0 12px;border:0;border-radius:var(--g3-radio-fila);
  background:var(--g3-campo);box-shadow:inset 0 0 0 1.5px var(--g3-pista-off);color:var(--g3-marca-texto);
  font:600 calc(16px * var(--g3-esc))/1.2 var(--g3-fuente-texto)}          /* 16 px evita el zoom de iOS */
.g3-campo::placeholder{color:var(--g3-texto-suave);opacity:1;font-weight:400}   /* sin alfa: con .8 no llegaba a 4,5:1 */
.g3-check{display:flex;align-items:center;gap:10px;min-height:var(--g3-toque);font:600 var(--g3-t-cuerpo)/1.3 var(--g3-fuente-texto);cursor:pointer;color:var(--g3-marca-texto)}
.g3-check input{width:calc(22px * var(--g3-esc));height:calc(22px * var(--g3-esc));accent-color:var(--g3-marca)}   /* el toque de 44/64 px lo da el <label> completo */
.g3-err{margin:6px 0 0;min-height:1em;font:600 var(--g3-t-chip)/1.4 var(--g3-fuente-texto);color:var(--g3-error)}
.g3-err:empty{display:none}
.g3-rango{width:100%;min-height:var(--g3-toque);accent-color:var(--g3-marca)}

/* ---------------------------------------------------------------------
   11. BOTONES  (Golf360 multijugador.css:20-28; unifica .mj-btn/.gm-btn/.tp-btn)
   primario con «canto» inferior · secundario tinte · fantasma · opción-tarjeta
   --------------------------------------------------------------------- */
.g3-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--g3-e3);min-height:var(--g3-toque);padding:0 16px;border:0;
  border-radius:var(--g3-radio-boton);font:700 var(--g3-t-boton)/1.15 var(--g3-fuente-texto);cursor:pointer;text-align:center;text-decoration:none}
.g3-btn:disabled,.g3-btn[aria-disabled="true"]{opacity:.5;cursor:default}
.g3-btn svg{width:1.3em;height:1.3em;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.g3-btn--prim{background:var(--g3-relleno);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.g3-btn--sec{background:var(--g3-tinte);color:var(--g3-marca-texto)}
.g3-btn--sec[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--g3-marca)}
.g3-btn--fantasma{background:none;color:var(--g3-marca-texto);box-shadow:inset 0 0 0 2px var(--g3-borde)}
.g3-btn--ancho{width:100%}
@media (hover:hover){
  .g3-btn--prim:hover:not(:disabled){background:var(--g3-marca-oscura)}
  .g3-btn--sec:hover:not(:disabled){background:var(--g3-tinte-hover)}
  .g3-item:hover:not(.active):not(.is-active),.g3-opc:hover:not(.g3-opc--prim),.g3-fila:hover{background:var(--g3-tinte-hover)}
}
.g3-btn--sec:active,.g3-fila:active{background:var(--g3-tinte-activo)}

/* opción-tarjeta: título + explicación de una línea (el patrón del menú de tótem) */
.g3-opc{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-height:calc(var(--g3-toque) + 16px);padding:10px 14px;border:0;
  border-radius:var(--g3-radio-opc);background:var(--g3-tinte);color:var(--g3-marca-texto);text-align:left;cursor:pointer;font-family:var(--g3-fuente-texto)}
.g3-opc b{font:700 calc(15.5px * var(--g3-esc))/1.2 var(--g3-fuente-texto)}
.g3-opc small{font:400 calc(12.5px * var(--g3-esc))/1.35 var(--g3-fuente-texto);color:var(--g3-texto-suave)}
.g3-opc--prim{background:var(--g3-relleno);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.g3-opc--prim small{color:rgba(255,255,255,.88)}

/* fila de menú con interruptor (Golf360 .gm-op + .gm-sw) */
.g3-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:var(--g3-toque-fila);padding:0 14px;border:0;
  border-radius:var(--g3-radio-fila);background:var(--g3-tinte);color:var(--g3-marca-texto);font:600 var(--g3-t-boton)/1.2 var(--g3-fuente-texto);text-align:left;cursor:pointer}
.g3-fila small{display:block;font:400 var(--g3-t-nota)/1.3 var(--g3-fuente-texto);color:var(--g3-texto-suave)}
.g3-fila--salir{background:none;box-shadow:inset 0 0 0 2px var(--g3-borde)}
.g3-fila__sw{position:relative;flex:0 0 calc(36px * var(--g3-esc));width:calc(36px * var(--g3-esc));height:calc(21px * var(--g3-esc));border-radius:99px;background:var(--g3-pista-off);transition:background var(--g3-dur) ease}
.g3-fila__sw::after{content:"";position:absolute;left:calc(2.5px * var(--g3-esc));top:calc(2.5px * var(--g3-esc));width:calc(16px * var(--g3-esc));height:calc(16px * var(--g3-esc));border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(var(--g3-sombra-rgb),.35);transition:transform var(--g3-dur) ease}
.g3-fila[aria-checked="true"] .g3-fila__sw{background:var(--g3-marca)}
.g3-fila[aria-checked="true"] .g3-fila__sw::after{transform:translateX(calc(15px * var(--g3-esc)))}
.g3-fila__chev{width:calc(18px * var(--g3-esc));height:calc(18px * var(--g3-esc));transition:transform var(--g3-dur);stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.g3-fila[aria-expanded="true"] .g3-fila__chev{transform:rotate(180deg)}

/* ---------------------------------------------------------------------
   12. TIRA DE CHIPS CON ACTIVO  (Golf360 app.css:61-71)
   El activo es el ACENTO («estás aquí»), no la marca.
   --------------------------------------------------------------------- */
.g3-tira{display:flex;gap:var(--g3-e2);justify-content:flex-start;padding:6px 12px;overflow-x:auto;scrollbar-width:none}
.g3-tira::-webkit-scrollbar{display:none}
.g3-tira>:first-child{margin-left:auto}.g3-tira>:last-child{margin-right:auto}   /* centrada si cabe; desplazable desde el principio si no */
.g3-tira>button{position:relative;flex:0 0 auto;border:0;font:inherit;background:var(--g3-panel);backdrop-filter:var(--g3-cristal-filtro);border-radius:var(--g3-radio-fila);
  box-shadow:var(--g3-sombra);min-width:var(--g3-toque);height:var(--g3-toque);padding:0 6px;display:grid;place-items:center;cursor:pointer;color:var(--g3-marca-texto)}
.g3-tira>button b{font:700 calc(15px * var(--g3-esc))/1 var(--g3-fuente-titulo)}
.g3-tira>button small{position:absolute;bottom:3px;left:0;right:0;text-align:center;font:500 calc(9px * var(--g3-esc))/1 var(--g3-fuente-texto);color:var(--g3-texto-suave)}
.g3-tira>button:has(small) b{transform:translateY(-4px)}
.g3-tira>button[aria-current="true"],.g3-tira>button[aria-pressed="true"],.g3-tira>button.active,.g3-tira>button.is-active{background:var(--g3-acento-fondo,var(--g3-acento));color:var(--g3-acento-texto)}
.g3-tira>button[aria-current="true"] small,.g3-tira>button[aria-pressed="true"] small,.g3-tira>button.active small,.g3-tira>button.is-active small{color:var(--g3-acento-texto)}
.g3-tira>.g3-tira__todo{padding:0 12px;font:600 var(--g3-t-chip)/1 var(--g3-fuente-texto)}
.g3-tira--rejilla{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible;padding:0}
.g3-tira--rejilla>button{background:var(--g3-tinte);box-shadow:none;width:auto}
.g3-tira--rejilla>:first-child,.g3-tira--rejilla>:last-child{margin:0}

/* ---------------------------------------------------------------------
   13. BARRA DE ACCIÓN INFERIOR  (Golf360 game.css:58-86)
   botón de acción ancho y grueso, flanqueado por botones cuadrados.
   Desactivado = colores invertidos, no opacidad.
   --------------------------------------------------------------------- */
.g3-acciones{display:flex;align-items:center;gap:var(--g3-e3);padding:10px;background:var(--g3-superficie);border-radius:var(--g3-radio-tarjeta);box-shadow:var(--g3-sombra)}
.g3-btn-cuadro{flex:0 0 auto;width:calc(50px * var(--g3-esc));height:calc(50px * var(--g3-esc));min-width:var(--g3-toque);border:0;border-radius:var(--g3-radio-boton);
  background:var(--g3-tinte);color:var(--g3-marca-texto);display:grid;place-items:center;cursor:pointer;font:600 calc(26px * var(--g3-esc))/1 var(--g3-fuente-texto)}
.g3-btn-cuadro svg{width:55%;height:55%;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.g3-btn-cuadro:active,.g3-btn-cuadro.on{background:var(--g3-tinte-activo)}
.g3-btn--accion{flex:1 1 auto;min-width:0;height:var(--g3-toque-accion);border-radius:var(--g3-radio-opc);background:var(--g3-relleno);color:#fff;
  font:700 calc(17px * var(--g3-esc))/1.1 var(--g3-fuente-texto);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);border:0;cursor:pointer;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--g3-e3)}
.g3-btn--accion:disabled,.g3-btn--accion.off{background:var(--g3-linea);color:var(--g3-marca-texto);box-shadow:inset 0 -3px 0 rgba(var(--g3-sombra-rgb),.08);cursor:default;opacity:1}

/* ---------------------------------------------------------------------
   14. MENÚ «⋯»  (Golf360 game.css:264-274: botón circular + hoja.
   Aquí también como desplegable anclado; para la hoja completa usa G3UI.hoja
   con variante 'inferior')
   --------------------------------------------------------------------- */
.g3-menu{position:relative;display:inline-block}
.g3-menu__panel{position:absolute;z-index:var(--g3-z-modal);right:0;top:calc(100% + 8px);min-width:calc(240px * var(--g3-esc));max-width:calc(100vw - 24px);
  display:flex;flex-direction:column;gap:var(--g3-e2);padding:var(--g3-e3);background:var(--g3-superficie);border-radius:var(--g3-radio-opc);
  box-shadow:var(--g3-sombra);animation:g3-baja var(--g3-dur-rapida) ease both}
.g3-menu__panel[hidden]{display:none}
.g3-menu__panel--arriba{top:auto;bottom:calc(100% + 8px)}
.g3-menu__item{display:flex;align-items:center;gap:var(--g3-e3);width:100%;min-height:var(--g3-toque-fila);padding:0 14px;border:0;border-radius:var(--g3-radio-fila);
  background:var(--g3-tinte);color:var(--g3-marca-texto);font:600 var(--g3-t-boton)/1.2 var(--g3-fuente-texto);text-align:left;cursor:pointer;text-decoration:none}
.g3-menu__item svg{width:1.3em;height:1.3em;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.g3-menu__item:hover{background:var(--g3-tinte-hover)}}

/* ---------------------------------------------------------------------
   15. AVISOS  (Golf360 app.css:121-122 toast; tiempo.css:178-184 aviso)
   --------------------------------------------------------------------- */
.g3-toast{position:fixed;z-index:var(--g3-z-toast);left:50%;top:calc(var(--g3-top) + 64px);transform:translateX(-50%);max-width:calc(100vw - 24px);
  background:var(--g3-relleno);color:#fff;padding:9px 16px;border-radius:var(--g3-radio-pildora);
  font:600 var(--g3-t-cuerpo)/1.3 var(--g3-fuente-texto);box-shadow:var(--g3-sombra);text-align:center;transition:opacity .3s}
.g3-toast[hidden]{display:none}
[data-g3-quiosco] .g3-toast{min-height:var(--g3-toque);display:flex;align-items:center;pointer-events:none}
[data-g3-quiosco] .g3-toast[hidden]{display:none}
/* móvil: la barra superior se parte en 2 filas (hasta ~112 px) y un toast arriba la tapa: va abajo, sobre la tab bar */
@media (max-width:720px){.g3-toast{top:auto;bottom:var(--g3-pie-movil)}}
/* aviso de contenido: borde izquierdo de 5 px + pastel. Siempre con texto, no solo color */
.g3-aviso{margin:0;padding:10px 12px;border-left:5px solid var(--g3-aviso-amarillo);background:var(--g3-aviso-amarillo-bg);border-radius:var(--g3-radio-fila);color:#3a2a00;font-family:var(--g3-fuente-texto)}
.g3-aviso b{display:block;font:700 var(--g3-t-cuerpo)/1.3 var(--g3-fuente-texto)}
.g3-aviso p{margin:2px 0 0;font:400 var(--g3-t-chip)/1.45 var(--g3-fuente-texto)}
.g3-aviso small{display:block;margin-top:4px;font:400 var(--g3-t-nota)/1.3 var(--g3-fuente-texto);opacity:.8}
.g3-aviso--naranja{border-color:var(--g3-aviso-naranja);background:var(--g3-aviso-naranja-bg);color:#4a2400}
.g3-aviso--rojo{border-color:var(--g3-peligro);background:var(--g3-aviso-rojo-bg);color:#5a100b}
/* píldoras de estado */
.g3-estado{display:inline-flex;align-items:center;min-height:calc(24px * var(--g3-esc));padding:0 10px;border-radius:var(--g3-radio-fila);
  font:600 var(--g3-t-nota)/1 var(--g3-fuente-texto);background:var(--g3-tinte);color:var(--g3-marca-texto)}
.g3-estado--ideal{background:var(--g3-relleno);color:#fff}
.g3-estado--no{background:var(--g3-aviso-rojo-bg);color:var(--g3-aviso-rojo-tx)}
.g3-estado--inc{background:var(--g3-aviso-gris-bg);color:var(--g3-aviso-gris-tx)}

/* ---------------------------------------------------------------------
   16. PIE LEGAL  (Golf360 app.css:116-119, 147-151)
   dos textos por elemento (largo/corto) intercambiados por CSS;
   cada trozo en su píldora al 70 %; no captura toques.
   --------------------------------------------------------------------- */
.g3-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--g3-e4);padding:6px 14px;font:400 var(--g3-t-legal)/1.4 var(--g3-fuente-texto);
  color:var(--g3-marca-texto);pointer-events:none}
.g3-legal>span{background:color-mix(in srgb,var(--g3-superficie) 70%,transparent);border-radius:99px;padding:1px 8px}
.g3-legal .g3-corto{display:none}
@media (max-width:720px){
  .g3-legal{flex-wrap:nowrap;gap:var(--g3-e2);padding:6px 8px;font-size:calc(9.5px * var(--g3-esc))}
  .g3-legal .g3-largo{display:none}.g3-legal .g3-corto{display:inline}
}
[data-g3-quiosco] .g3-legal{font-size:calc(12px * var(--g3-esc))}    /* el crédito sigue siendo legible a distancia */

/* ---------------------------------------------------------------------
   17. MOVIMIENTO REDUCIDO  (Golf360 solo apagaba transition: aquí también animation)
   Acotado a elementos g3-, no toca el resto de la página.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  [class^="g3-"],[class*=" g3-"],[class^="g3-"] *,[class*=" g3-"] *{animation:none!important;transition:none!important}
}