/* Hoja compartida por las páginas legales públicas (/privacidad, /terminos y
   /eliminar-cuenta).

   Estas páginas son HTML estático, NO la SPA, y es a propósito: el revisor de
   Google Play y el de Apple las abren sin sesión, y a menudo desde un navegador
   sin JavaScript o con la app desinstalada. `vercel.json` las excluye del
   rewrite que manda todo lo demás a index.html — sin esa exclusión, cualquiera
   de estas rutas serviría la pantalla de login, que es exactamente el motivo por
   el que Google rechaza una URL de borrado de datos.

   Colores tomados de src/index.css para que no se separen de la marca. */

:root {
  --bg: #050505;
  --surface: #0B0B0B;
  --ink: #F5F5F4;
  --ink-2: rgba(245, 245, 244, 0.6);
  --ink-3: rgba(245, 245, 244, 0.45);
  --accent: #FFC72C;
  --hairline: rgba(245, 245, 244, 0.1);
  --danger: #FF6B5A;
}

* { box-sizing: border-box; }

html {
  /* Los tamaños van en rem para que respeten el ajuste de tamaño de letra del
     sistema: el resto de la app todavía no lo hace (07-13), pero una página
     legal que no se puede agrandar es un problema de accesibilidad real, y
     parte de los clientes pasan de 45 años. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  font-size: 1rem;
}

.envoltorio {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
}

header.marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--hairline);
}

header.marca img { width: 2.5rem; height: 2.5rem; object-fit: contain; }

header.marca .nombre {
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 1.125rem;
}

h1 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }

.actualizado {
  color: var(--ink-3);
  font-size: 0.875rem;
  margin: 0 0 2rem;
}

p, li { color: var(--ink-2); }
li { margin-bottom: 0.4rem; }
strong { color: var(--ink); font-weight: 600; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

.caja {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin: 1.5rem 0;
}

.caja.destacada { border-color: rgba(255, 199, 44, 0.35); }
.caja.aviso { border-color: rgba(255, 107, 90, 0.35); }

.caja > :first-child { margin-top: 0; }
.caja > :last-child { margin-bottom: 0; }

/* Pendiente de que Dani rellene sus datos identificativos: se ve a la legua en
   la página publicada, para que no se quede puesto por descuido. */
.pendiente {
  background: rgba(255, 107, 90, 0.12);
  border: 1px dashed var(--danger);
  color: var(--danger);
  border-radius: 0.35rem;
  padding: 0.1rem 0.4rem;
  font-weight: 600;
  font-size: 0.9em;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.9375rem;
}

/* La tabla desborda en móvil si no se le deja su propio scroll: el body nunca
   debe hacer scroll horizontal. */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

th, td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

th { color: var(--ink); font-weight: 600; white-space: nowrap; }
td { color: var(--ink-2); }

footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  color: var(--ink-3);
  font-size: 0.875rem;
}

footer a { margin-right: 1rem; }

.pasos { counter-reset: paso; list-style: none; padding-left: 0; }
.pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: 0.9rem;
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--accent);
  color: #050505;
  font-weight: 700;
  font-size: 0.875rem;
  display: grid;
  place-items: center;
}

@media (max-width: 30rem) {
  .envoltorio { padding: 1.5rem 1rem 3rem; }
  h1 { font-size: 1.5rem; }
}