/* ═══════════════════════════════════════════════════════════════════
   FITALY — Páginas legales (Términos, Aviso de Privacidad)
   Hoja aparte de app.css a propósito: estas páginas son documentos
   normales que se leen, se imprimen y se enlazan desde fuera de la app.
   app.css fija el body y le quita el scroll para el shell de la PWA;
   aplicarlo aquí volvería ilegible un texto de varias pantallas.
   Los tokens de color se repiten para que la página no dependa de
   cargar dos hojas.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bone:#F2F2F2; --paper:#FFFFFF; --ink:#0F0F0F;
  /* Mismos valores que app.css: son dos hojas, una sola marca. */
  /* Los mismos valores que app.css. Si cambia el morado allá, cambia aquí:
     los legales se sirven como páginas sueltas y no comparten hoja. */
  --pine:#5E16EB; --pine-pale:#EFE9FE;
  --sand:#E5E5E5; --mist:#6B6B70;
  --clay:#DC4545; --clay-pale:#FBE4E4;
  --r-sm:10px; --r:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bone); color:var(--ink);
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
  padding:0 0 64px;
}

/* ── Barra superior ──────────────────────────────────────────────── */
.legal-top{
  position:sticky; top:0; z-index:10;
  background:var(--paper); border-bottom:1px solid var(--sand);
  padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px;
  display:flex; align-items:center; gap:14px;
}
.legal-top .volver{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14.5px; font-weight:600; color:var(--pine); text-decoration:none;
}
.legal-top .volver svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
.legal-top .marca{font-weight:800; letter-spacing:-.01em; font-size:17px; margin-left:auto}

/* ── Lienzo del documento ────────────────────────────────────────── */
.legal{
  max-width:720px; margin:0 auto; padding:28px 20px 0;
}
.legal h1{
  font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.15;
  margin-bottom:8px;
}
.legal .fecha{color:var(--mist); font-size:14px; margin-bottom:26px}
.legal h2{
  font-size:19px; font-weight:700; letter-spacing:-.01em;
  margin:34px 0 10px; padding-top:20px; border-top:1px solid var(--sand);
}
.legal h2:first-of-type{border-top:none; padding-top:0}
.legal h3{font-size:16.5px; font-weight:700; margin:20px 0 6px}
.legal p{margin-bottom:13px}
.legal ul,.legal ol{margin:0 0 13px 22px}
.legal li{margin-bottom:7px}
.legal strong{font-weight:650}
.legal a{color:var(--pine)}

/* Recuadro para lo que el socio tiene que entender sí o sí: caducidad,
   penalizaciones, que el club es quien da la clase. */
.legal .clave{
  background:var(--pine-pale); border-radius:var(--r);
  padding:15px 17px; margin:18px 0; font-size:15px;
}
.legal .clave p:last-child{margin-bottom:0}

/* Marcador de dato pendiente de llenar antes de publicar. Chilla a
   propósito: si queda uno vivo en producción, se ve a un metro.
   Hoy no hay ninguno en uso —los dos documentos se reescribieron para no
   depender de datos que todavía no existen— pero la clase se queda para
   el día que vuelva a hacer falta marcar algo a medias. */
.pendiente{
  background:var(--clay-pale); color:#8A1E1E; font-weight:650;
  padding:1px 7px; border-radius:6px; font-size:.92em;
  border:1px dashed var(--clay);
}

.legal table{width:100%; border-collapse:collapse; margin:14px 0; font-size:14.5px}
.legal th,.legal td{text-align:left; padding:9px 11px; border-bottom:1px solid var(--sand); vertical-align:top}
.legal th{font-weight:650; background:var(--paper)}
.legal .tabla-wrap{overflow-x:auto; margin:14px 0}

.legal footer{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--sand);
  color:var(--mist); font-size:14px;
}
.legal footer a{font-weight:600}

@media print{
  .legal-top{display:none}
  body{background:#fff; font-size:11pt}
  .legal .clave{border:1px solid #999; background:#fff}
}