/* =============================================================================
   ESTILOS DE LAS PÁGINAS LEGALES (privacidad y términos)
   =============================================================================
   POR QUÉ ESTE ARCHIVO EXISTE Y NO REUSA index.css / shared.module.css:

   Estas dos páginas son HTML estático servido desde /public, NO parte del SPA.
   Se hizo así a propósito:
     · Tienen que verse SIN LOGIN. Quien las va a leer primero es el revisor de
       Google en el trámite del consentimiento OAuth, que no tiene cuenta en la
       app; si fueran una ruta de React quedarían detrás del gate de sesión de
       App.jsx.
     · No pueden romper nada: no cargan el bundle, no tocan Supabase, no
       dependen del router (que ni existe — ver main.jsx).
     · Cargan al instante, que es lo que se quiere de una página legal.

   El costo es que los tokens de color están COPIADOS de index.css en vez de
   importados. Es una duplicación consciente y acotada: son ~8 valores del tema
   oscuro que no cambian seguido. Si alguna vez se retoca la paleta de la app y
   estas páginas quedan desfasadas, no se rompe nada — se ven con la paleta
   vieja. Si esa duplicación llegara a molestar, la salida es convertirlas en
   rutas reales del SPA con un bypass del login, no ir parcheando este archivo.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Chivo:wght@300..900&display=swap');

:root {
  color-scheme: dark;
  --fondo:        #07161a;
  --vidrio:       rgba(214, 240, 245, 0.055);
  --vidrio-borde: rgba(214, 240, 245, 0.11);
  --texto:        #e3edef;
  --texto-dim:    #8fa3a8;
  --acento:       #7fb2d9;
  --radio:        12px;
  --fuente:       'Chivo', system-ui, sans-serif;
  --fuente-display: 'Archivo', var(--fuente);
}

* { box-sizing: border-box; }

body {
  margin:      0;
  padding:     32px 20px 64px;
  background:  var(--fondo);
  color:       var(--texto);
  font-family: var(--fuente);
  font-size:   15px;
  line-height: 1.7;
}

.hoja {
  max-width: 760px;
  margin:    0 auto;
}

/* Encabezado: mismo tratamiento que el header de la app (nombre en Archivo,
   bajada en versalitas espaciadas). */
.masthead {
  border-bottom:  1px solid var(--vidrio-borde);
  padding-bottom: 20px;
  margin-bottom:  32px;
}
.masthead a {
  color:           var(--texto);
  text-decoration: none;
  font-family:     var(--fuente-display);
  font-size:       20px;
  font-weight:     700;
}
.masthead p {
  margin:         6px 0 0;
  font-size:      10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color:          var(--texto-dim);
}

h1 {
  font-family: var(--fuente-display);
  font-size:   26px;
  line-height: 1.25;
  margin:      0 0 6px;
}

/* Fecha de última actualización */
.vigencia {
  margin:    0 0 32px;
  font-size: 13px;
  color:     var(--texto-dim);
}

h2 {
  font-family:   var(--fuente-display);
  font-size:     17px;
  margin:        36px 0 10px;
  padding-top:   20px;
  border-top:    1px solid var(--vidrio-borde);
}
h2:first-of-type { border-top: none; padding-top: 0; }

p, li { color: var(--texto); }
ul    { padding-left: 22px; }
li    { margin-bottom: 8px; }

strong { font-weight: 600; }

a { color: var(--acento); }

/* Bloque destacado para lo que conviene que no se pase por alto (qué datos
   salen hacia un tercero, y que esto no es asesoramiento financiero). */
.destacado {
  background:    var(--vidrio);
  border:        1px solid var(--vidrio-borde);
  border-radius: var(--radio);
  padding:       16px 18px;
  margin:        20px 0;
}
.destacado p:first-child { margin-top: 0; }
.destacado p:last-child  { margin-bottom: 0; }

/* Letra chica: aclaraciones que tienen que estar por completitud pero que no
   son lo importante del párrafo (ej. que a los proveedores de datos de mercado
   no se les manda ningún dato personal). Menor jerarquía a propósito — pedido
   del dueño: que las fuentes no ocupen el mismo peso que lo que sí toca datos
   personales. */
.letraChica {
  font-size:   13px;
  color:       var(--texto-dim);
  line-height: 1.6;
}

.pie {
  margin-top:  48px;
  padding-top: 20px;
  border-top:  1px solid var(--vidrio-borde);
  font-size:   13px;
  color:       var(--texto-dim);
}

@media (max-width: 600px) {
  body { padding: 24px 16px 48px; font-size: 14px; }
  h1   { font-size: 22px; }
  h2   { font-size: 16px; }
}