/* ===========================================================================
   PÁGINAS LEGALES — HOJA DE ESTILOS (legal/style.css)
   ===========================================================================

   Esta hoja es la de las cuatro páginas legales (privacidad, términos,
   eliminar cuenta y su índice). Es MUCHO más corta y sencilla que la
   styles.css de la web principal, y eso es a propósito.

   ¿POR QUÉ NO REUTILIZA EL DISEÑO DE LA WEB?
   Porque tienen objetivos distintos:
     · La web principal tiene que impresionar y convencer → animaciones,
       vídeo, efectos.
     · Un texto legal tiene que LEERSE. Nada de distracciones. La única
       misión aquí es que el usuario encuentre rápido lo que busca y lo
       entienda. Un aviso de privacidad con parallax sería absurdo.

   Lo único que comparten es la paleta de color (el azul noche y el naranja),
   para que se note que son del mismo sitio.

   Otra diferencia que verás enseguida: aquí se estilan las ETIQUETAS
   directamente (body, h1, p, table...) en vez de usar clases. Con cuatro
   páginas de texto corrido es lo más práctico; en una web grande, con
   muchos componentes distintos, esto se te iría de las manos y por eso allí
   usamos clases.
   =========================================================================== */


/* Las variables de color, igual que en la web principal pero con menos
   tonos: aquí no hacen falta más. */
:root {
  --bg: #081425;      /* El mismo azul noche de la app. */
  --card: #0e1e33;    /* Fondo de los recuadros destacados y las tablas. */
  --accent: #ff5f1f;  /* El naranja de BallerLink. */
  --text: #e8edf6;
  --muted: #9aa6bd;   /* Gris para las fechas y el pie. */
  --border: #1d2f4a;  /* Las líneas divisorias. */
}

/* Que el ancho de una caja incluya bordes y relleno (ver la explicación
   larga en la styles.css principal). */
* { box-sizing: border-box; }

body {
  margin: 0;
  /* 0 arriba, 20px a los lados (aire en móvil) y 80px abajo, para que el
     último párrafo no quede pegado al borde de la pantalla. */
  padding: 0 20px 80px;
  background: var(--bg);
  color: var(--text);
  /* Aquí NO cargamos fuentes de Google. Usamos la del propio sistema
     operativo: San Francisco en Mac/iPhone, Segoe UI en Windows, Roboto en
     Android. Se ven perfectas, son las que el usuario ya está acostumbrado a
     leer, y sobre todo: no hay que descargar nada, así que la página abre al
     instante. En un documento legal eso vale más que una fuente bonita. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;  /* Renglones separados = lectura cómoda de textos largos. */
  font-size: 17px;
}

/* El carril central. 760px es un ancho pensado para leer: caben unos 75
   caracteres por línea, que es el máximo recomendable. Si dejaras el texto
   ocupar un monitor entero, el ojo se perdería al saltar de renglón.
   margin: 0 auto = sin margen arriba/abajo y automático a los lados, que es
   la forma clásica de centrar un bloque. */
.wrap { max-width: 760px; margin: 0 auto; }

/* La cabecera de cada documento, separada del texto por una línea. */
header {
  padding: 48px 0 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 36px;
}

/* "BallerLink" en pequeñito y naranja encima del título.
   letter-spacing: 2px separa las letras: es lo que hace que un texto
   diminuto en mayúsculas se lea bien en vez de parecer una mancha. */
.logo {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 12px;
}

/* La jerarquía de títulos. Fíjate en el patrón de los márgenes: todos tienen
   MUCHO margen arriba y poco abajo (40px y 12px en el h2). Es intencionado:
   así cada título queda visualmente pegado al texto que introduce y separado
   del que acaba de terminar. Es una regla de oro de la maquetación de
   documentos, y se nota muchísimo al hojear una página larga. */
h1 { font-size: 30px; line-height: 1.25; margin: 0 0 10px; }

h2 {
  font-size: 20px;
  margin: 40px 0 12px;
  padding-top: 4px;
  color: #fff;        /* Blanco puro: destaca sobre el gris de los párrafos. */
}

h3 { font-size: 17px; margin: 26px 0 8px; color: #fff; }

/* La línea de "última actualización". En gris porque es un dato secundario. */
.updated { color: var(--muted); font-size: 14px; margin: 0; }

/* Los párrafos y los elementos de lista comparten color: un blanco un pelín
   apagado. El blanco puro sobre fondo oscuro cansa la vista en textos largos
   (produce un efecto de "vibración"), así que se baja un poco. */
p, li { color: #d3dbe9; }

/* Los enlaces en naranja, para que se distingan del texto. */
a { color: var(--accent); }

/* Sangría de las listas, para que las viñetas no toquen el margen. */
ul { padding-left: 22px; }

/* Un poco de aire entre puntos de una lista: se leen mucho mejor. */
li { margin-bottom: 7px; }

/* LAS TABLAS (la de "qué datos recogemos" de la política de privacidad).
     border-collapse: collapse → junta los bordes de las celdas en uno solo.
       Sin esto, cada celda lleva su borde y se ven líneas dobles.
     display: block + overflow-x: auto → este es el truco importante: si la
       tabla no cabe en un móvil, en vez de romper el diseño de la página
       entera, la tabla se convierte en un bloque con su propio scroll
       horizontal. Deslizas solo la tabla y el resto queda intacto. */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 15px;
  display: block;
  overflow-x: auto;
}

/* th = celda de cabecera, td = celda normal. Comparten estilos, así que se
   agrupan con una coma.
   vertical-align: top alinea el contenido arriba, que es lo que se espera
   cuando unas celdas tienen dos líneas y otras cinco. */
th, td {
  text-align: left;
  padding: 11px 13px;
  border: 1px solid var(--border);
  vertical-align: top;
}

/* La fila de cabecera, con fondo para distinguirla de los datos. */
th { background: var(--card); color: #fff; font-weight: 700; }

/* El recuadro de aviso destacado. La franja naranja de la izquierda
   (border-left) es lo que hace que el ojo se pare ahí.
   border-radius: 0 8px 8px 0 son las cuatro esquinas en el sentido de las
   agujas del reloj empezando arriba a la izquierda: 0 arriba-izquierda, 8px
   arriba-derecha, 8px abajo-derecha y 0 abajo-izquierda. O sea, se redondea
   solo el lado contrario a la franja, para que la franja quede recta. */
.note {
  background: var(--card);
  border-left: 3px solid var(--accent);
  padding: 16px 18px;
  border-radius: 0 8px 8px 0;
  margin: 22px 0;
}

/* Al párrafo de dentro del aviso le quitamos su margen: ya lo pone el
   recuadro con su padding, y si no quedaría doble espacio. */
.note p { margin: 0; }

/* El pie de cada documento, con los enlaces a los otros. */
footer {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
}

/* Separación entre los enlaces del pie, que van seguidos en la misma línea. */
footer a { margin-right: 18px; }

/* <code> se usa para escribir cosas como una dirección de email o un dato
   técnico dentro de un párrafo, resaltado en una cajita. */
code {
  background: var(--card);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 15px;
  color: var(--accent);
}