/* ============================================================
   Oldenait — páginas legales (términos y privacidad)
   ------------------------------------------------------------
   Mismo ancho de lectura que una nota, más tres cosas que una
   nota no tiene: el resumen de arriba, el índice y las tablas.
   Todo prefijado con legal- para no chocar con el sitio.
   ============================================================ */

.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px) clamp(18px, 4vw, 40px) 72px;
}

.legal-migas { font-size: 14px; margin-bottom: 22px; }
.legal-migas a { color: var(--apagado); text-decoration: none; }
.legal-migas a:hover { color: var(--texto); }

.legal-rotulo {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--violeta-claro);
}

.legal h1 { margin: 10px 0 12px; }

.legal-fecha {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--apagado);
}

/* ── Resumen corto ─────────────────────────────────────────── */

.legal-resumen {
  margin: 28px 0 8px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--violeta);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.legal-resumen h2 {
  font-size: 15px; margin: 0 0 10px;
  font-family: "Space Mono", ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--violeta-claro); font-weight: 700;
}
.legal-resumen ul { margin: 0; padding-left: 20px; }
.legal-resumen li { margin: 6px 0; color: var(--texto); }

/* ── Índice ────────────────────────────────────────────────── */

.legal-indice {
  margin: 28px 0 8px;
  padding: 16px 20px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.legal-indice h2 {
  font-size: 12px; margin: 0 0 10px;
  font-family: "Space Mono", ui-monospace, monospace;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--apagado); font-weight: 400;
}
.legal-indice ol {
  margin: 0; padding-left: 22px;
  columns: 2; column-gap: 28px;
}
@media (max-width: 620px) { .legal-indice ol { columns: 1; } }
.legal-indice li { margin: 4px 0; break-inside: avoid; }
.legal-indice a { color: var(--texto); text-decoration: none; }
.legal-indice a:hover { color: var(--violeta-claro); }

/* ── Cuerpo ────────────────────────────────────────────────── */

.legal-cuerpo { font-size: 17px; line-height: 1.75; }
.legal-cuerpo h2 {
  font-size: clamp(21px, 2.4vw, 26px);
  margin: 46px 0 14px;
  scroll-margin-top: 20px;
}
.legal-cuerpo h3 { font-size: 18px; margin: 28px 0 8px; }
.legal-cuerpo p { margin: 0 0 16px; }
.legal-cuerpo ul, .legal-cuerpo ol { margin: 0 0 16px; padding-left: 24px; }
.legal-cuerpo li { margin: 6px 0; }
.legal-cuerpo strong { color: var(--texto); }
.legal-cuerpo code {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: .86em;
  background: var(--panel-alto);
  border: 1px solid var(--linea);
  border-radius: 5px;
  padding: 1px 5px;
}

/* Cita obligatoria de la ley: se distingue del texto propio. */
.legal-cita {
  margin: 18px 0;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font-size: 15px; color: var(--apagado);
}

/* Texto en inglés que va literal (el aviso de Riot). */
.legal-literal {
  margin: 18px 0;
  padding: 14px 18px;
  border-left: 2px solid var(--linea-viva);
  font-size: 15px; color: var(--apagado);
  font-style: italic;
}

/* ── Tablas ────────────────────────────────────────────────── */

.legal-tabla-envoltorio { overflow-x: auto; margin: 0 0 20px; }
.legal-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px; line-height: 1.5;
}
.legal-tabla th {
  text-align: left; vertical-align: bottom;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 400; color: var(--apagado);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--linea-viva);
}
.legal-tabla td {
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--linea);
}
.legal-tabla td:first-child { font-weight: 600; color: var(--texto); min-width: 130px; }

/* ── Dato sin completar ────────────────────────────────────── */

.legal-falta {
  background: var(--ambar);
  color: #231a05;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

/* ── Otra página legal ─────────────────────────────────────── */

.legal-otra {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
  font-size: 15px; color: var(--apagado);
}