/*
 * Estilos de las paginas estaticas que sirve nginx fuera del router: las
 * legales (privacidad, terminos, cookies, eliminar-cuenta), la FAQ y las guias.
 *
 * Existe por una razon concreta: hasta el 2026-09-20 todas eran BLANCAS con el
 * texto casi negro, y la app es oscura. Ir de la app a una guia era un fogonazo
 * en la cara. `deploy/precios.html` no usa esto: tiene su propia maqueta de
 * pagina de venta, y ya venia en oscuro.
 *
 * Los colores son los de `apps/mobile/src/palettes.ts`, no aproximaciones: si
 * la paleta de la app cambia, hay que cambiarlos aqui tambien.
 *
 * El tema se elige en este orden (lo resuelve el script en linea de cada
 * pagina, ANTES de pintar, para que no haya destello):
 *   1. `localStorage['mipadel.theme.preference']` -> light | dark | system
 *   2. si es `system` o no hay nada, `prefers-color-scheme`
 */

:root {
  --fondo: #f4f2ec;
  --superficie: #ffffff;
  --texto: #141c26;
  --texto-suave: #5c6773;
  --titulo: #0f2034;
  --linea: #e3e2db;
  --enlace: #4a6701;
  --acento: #7aa901;
  color-scheme: light;
}

html[data-theme='dark'] {
  --fondo: #0a131d;
  --superficie: #111e2c;
  --texto: #edf1f5;
  --texto-suave: #96a5b5;
  --titulo: #edf1f5;
  --linea: #22364b;
  --enlace: #a9dc3d;
  --acento: #8fc414;
  color-scheme: dark;
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.6;
}

h1,
h2,
h3 {
  color: var(--titulo);
}
h1 {
  line-height: 1.2;
}

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

code {
  background: var(--superficie);
  border: 1px solid var(--linea);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

ol,
ul {
  padding-left: 1.2rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}
th,
td {
  border: 1px solid var(--linea);
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--superficie);
}
td.destaca {
  background: var(--superficie);
  font-weight: 600;
}

.nota {
  background: var(--superficie);
  border-left: 4px solid var(--acento);
  padding: 0.8rem 1rem;
  margin: 1.5rem 0;
}

.formula {
  background: var(--superficie);
  border: 1px solid var(--linea);
  padding: 0.7rem 1rem;
  border-radius: 6px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.95rem;
}

footer {
  margin-top: 3rem;
  font-size: 0.9rem;
  color: var(--texto-suave);
  border-top: 1px solid var(--linea);
  padding-top: 1.5rem;
}