/* OVA GYM · tokens y componentes comunes del formulario del socio y del panel de profes (DISENO.md, F4).
   Este archivo está COPIADO igual en formulario_web/comun.css y panel_web/comun.css (se publican por separado en
   Cloudflare). Si cambiás uno, copiá el otro: las pruebas fallan si quedan distintos.
   Colores por rol: acción = amarillo OVA (botón principal y selección) · listo = verde (solo confirmado / está bien) ·
   alerta = rojo (solo salud, dolor fuerte, riesgo y errores) · foco = azul, distinto de la marca. */
:root{
  color-scheme:light;
  --bg:#F6F6F3; --surface:#FFFFFF; --surface2:#EDEDE8; --text:#111111; --muted:#55554F; --line:#8A8A84; --line-suave:#DDDDD7;
  --accion:#FFD900; --sobre-accion:#0A0A0A; --accion-borde:#7A6200; --accion-suave:#FFF7C2;
  --listo:#1E7A3C; --listo-suave:#E6F4EA; --alerta:#B3261E; --sobre-alerta:#FFFFFF; --alerta-suave:#FCECEA; --foco:#2B4FC7;
  --aviso-fondo:#1B1B1A; --aviso-texto:#F3F3EF; --aviso-accion:#FFD900;
  --font:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Atkinson Hyperlegible Mono",ui-monospace,Menlo,monospace;
  --r:10px; --r-hoja:14px;
  --m1:120ms; --m2:220ms; --m3:360ms;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0B0B0B; --surface:#171717; --surface2:#222220; --text:#F3F3EF; --muted:#B4B4AC; --line:#7A7A74; --line-suave:#2E2E2B;
    --accion-borde:#FFD900; --accion-suave:#2E2A0A; --listo:#5CC883; --listo-suave:#11261A;
    --alerta:#FF8A80; --sobre-alerta:#0A0A0A; --alerta-suave:#2E1513; --foco:#9DB4FF;
    --aviso-fondo:#F3F3EF; --aviso-texto:#111111; --aviso-accion:#5A4800;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B0B0B; --surface:#171717; --surface2:#222220; --text:#F3F3EF; --muted:#B4B4AC; --line:#7A7A74; --line-suave:#2E2E2B;
  --accion-borde:#FFD900; --accion-suave:#2E2A0A; --listo:#5CC883; --listo-suave:#11261A;
  --alerta:#FF8A80; --sobre-alerta:#0A0A0A; --alerta-suave:#2E1513; --foco:#9DB4FF;
  --aviso-fondo:#F3F3EF; --aviso-texto:#111111; --aviso-accion:#5A4800;
}
@media (prefers-contrast: more){
  :root{ --muted:#3A3A36; --line:#4A4A46; --line-suave:#8A8A84; }
  :root[data-theme="dark"]{ --muted:#D8D8D2; --line:#B0B0AA; --line-suave:#7A7A74; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --muted:#D8D8D2; --line:#B0B0AA; --line-suave:#7A7A74; }
}

/* base: 16/24, escala 12/16 · 14/20 · 16/24 · 20/24 · 26/32 · 36/40 */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}
h1[tabindex="-1"]:focus-visible,h2[tabindex="-1"]:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
h1{font-size:26px;line-height:32px;font-weight:800;margin:8px 0 8px;text-wrap:balance}
h2{font-size:20px;line-height:24px;font-weight:800;margin:32px 0 12px;text-wrap:balance}
p{margin:0 0 12px;text-wrap:pretty}
.sub{color:var(--muted)}
.chica{font-size:14px;line-height:20px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* links: los chicos amplían su zona de toque sin cambiar de tamaño */
.link{background:none;border:0;padding:0;color:var(--text);text-decoration:underline;text-underline-offset:3px;font-size:14px;line-height:20px;cursor:pointer;position:relative;min-height:24px;font-weight:700}
.link::after{content:"";position:absolute;inset:-12px -8px}
.link[disabled]{cursor:default;color:var(--muted)}

/* botones: 48 px; principal = acción; salud = alerta. Al tocar: velo del 10 % y una leve reducción */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);font-weight:700;cursor:pointer;text-align:center;position:relative;text-decoration:none;color:var(--text);font-size:16px;line-height:24px}
.btn.prim{background:var(--accion);color:var(--sobre-accion);border-color:var(--accion-borde)}
.btn.alerta{background:var(--alerta);color:var(--sobre-alerta);border-color:var(--alerta)}
.btn.ancho{width:100%}
.btn.chato{min-height:44px;padding:8px 14px;font-size:14px;line-height:20px}
.btn[disabled]{opacity:.55;cursor:default}
.btn[aria-busy="true"]{cursor:progress}
.btn,.opcion,.boton-op{transition:transform var(--m1) ease-out}
.btn:active:not([disabled]),.opcion:active,.boton-op:active{background-image:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1));transform:scale(.98)}

/* opción de una lista: la fila entera se toca; lo elegido, con fondo y borde de la marca */
.opcion{display:flex;align-items:center;gap:12px;min-height:56px;width:100%;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;position:relative;text-align:left;font-size:16px;line-height:24px}
.opcion:has(input:checked),.opcion[aria-checked="true"],.opcion[aria-pressed="true"]{background:var(--accion-suave);border-color:var(--accion-borde);box-shadow:inset 0 0 0 1px var(--accion-borde);font-weight:700}

/* botones segmentados (aria-pressed) */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.seg button{min-height:44px;min-width:44px;padding:0 12px;background:var(--surface);border:0;border-left:1px solid var(--line-suave);cursor:pointer;font-size:14px;line-height:20px}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--accion);color:var(--sobre-accion);font-weight:700}
.seg button:focus-visible{outline-offset:-3px}

/* cajas: neutra, alerta (salud y errores) y listo */
.caja{padding:12px 16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line-suave);margin:0 0 16px}
.caja.alerta{border-color:var(--alerta);background:var(--alerta-suave)}
.caja.alerta b{color:var(--alerta)}
.caja.listo{border-color:var(--listo);background:var(--listo-suave)}
.caja > :last-child{margin-bottom:0}

/* errores y estados */
.err{color:var(--alerta);font-weight:700;margin:8px 0 0}
.err:empty{display:none}
.esq{background:var(--line-suave);border-radius:var(--r);height:20px;margin-bottom:12px}
.esq.t{height:32px;width:70%}
.esq.f{height:56px}
.lento{color:var(--muted);min-height:24px}

/* temas: Automático / Claro / Oscuro */
.tema-pie{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;line-height:20px;color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .btn:active,.opcion:active,.boton-op:active{transform:none}
}
@media (forced-colors: active){
  .opcion,.boton-op,.btn,.seg,.caja{border:1px solid CanvasText}
  .opcion:has(input:checked),.opcion[aria-checked="true"],.opcion[aria-pressed="true"],.seg button[aria-pressed="true"]{background:Highlight;color:HighlightText;forced-color-adjust:none}
  .esq{background:CanvasText}
}