/* ==========================================================================
   LEGAL.CSS — Páginas legales autónomas (privacidad.html, terminos.html,
   eliminar-cuenta.html).

   Por qué páginas separadas y no las pestañas de index.html#politicas:
   Google Play exige que la URL de la política de privacidad sea una página
   pública, estable y cuyo contenido esté visible al cargar, sin depender de
   JavaScript ni de hacer clic en una pestaña. Un ancla dentro de una SPA con
   pestañas es una causa habitual de rechazo en la revisión. Estas páginas son
   HTML plano: el texto está en el documento aunque el JS no corra.

   Reutiliza la paleta y las clases de styles.css (--parchment, .container,
   .topbar, .footer, .policy-article...). Aquí solo va lo específico de las
   páginas legales.
   ========================================================================== */

.legal-page {
  /* .topbar es position: fixed — sin este colchón el título queda debajo. */
  padding-top: 120px;
  padding-bottom: 80px;
}

.legal-header {
  text-align: center;
  margin-bottom: 36px;
}

.legal-title {
  font-family: var(--font-medieval);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: var(--gold-light);
  margin: 14px 0 10px;
  text-shadow: 0 3px 0 #000;
}

.legal-meta {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text-muted);
}

.legal-meta strong {
  color: var(--gold-light);
}

/* Barra de navegación entre los tres documentos legales. */
.legal-doc-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 0;
}

.legal-doc-nav a {
  font-family: var(--font-medieval);
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  padding: 8px 14px;
  color: var(--gold-light);
  background: var(--bg-panel-light);
  border: 2px solid var(--border-stone);
  transition: all 0.2s ease;
}

.legal-doc-nav a:hover {
  border-color: var(--gold-primary);
  background: var(--bg-card);
}

.legal-doc-nav a[aria-current="page"] {
  background: var(--gold-dark);
  border-color: var(--gold-light);
  color: #fff;
}

/* Índice de contenidos: obligatorio de facto en un documento largo, y ayuda
   al revisor de Google a encontrar la sección que está buscando. */
.legal-toc {
  background: #ece0c4;
  border: 3px solid var(--parchment-border);
  padding: 18px 22px;
  margin-bottom: 30px;
}

.legal-toc h2 {
  font-family: var(--font-medieval);
  font-size: 1.2rem;
  color: #78350f;
  margin-bottom: 10px;
}

.legal-toc ol {
  margin: 0;
  padding-left: 22px;
  columns: 2;
  column-gap: 28px;
}

.legal-toc li {
  margin-bottom: 5px;
  break-inside: avoid;
}

.legal-toc a {
  color: #451a03;
  font-size: 1.02rem;
  text-decoration: none;
  border-bottom: 1px dotted #8b6d3b;
}

.legal-toc a:hover {
  color: #78350f;
  border-bottom-style: solid;
}

/* Tablas de tratamiento de datos (categorías, finalidades, bases jurídicas,
   plazos de conservación y destinatarios). El RGPD no exige tabla, pero es la
   forma en que un revisor puede comprobar el art. 13 de un vistazo. */
.legal-table-wrap {
  overflow-x: auto;
  margin: 14px 0 4px;
  border: 2px solid var(--parchment-border);
}

.legal-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.98rem;
  background: #fff9ed;
}

.legal-table th,
.legal-table td {
  border: 1px solid #c4af89;
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  color: #292524;
  line-height: 1.5;
}

.legal-table th {
  background: #e4d3b1;
  font-family: var(--font-medieval);
  color: #78350f;
  font-size: 1.02rem;
}

.legal-article-body ul,
.policy-article-body ul {
  margin: 8px 0 10px 22px;
}

.legal-article-body li,
.policy-article-body li {
  margin-bottom: 6px;
  line-height: 1.6;
}

.policy-article-body a {
  color: #78350f;
  font-weight: bold;
}

/* Caja de aviso fuerte (salud, apuestas virtuales, menores). */
.legal-warning-box {
  background: rgba(239, 68, 68, 0.14);
  border-left: 5px solid var(--danger-dark);
  padding: 14px 18px;
  margin: 14px 0;
  color: #292524;
}

.legal-warning-box strong {
  color: #7f1d1d;
}

.legal-contact-box {
  background: #ece0c4;
  border: 3px solid var(--parchment-border);
  padding: 20px 24px;
  margin-top: 26px;
  text-align: center;
  color: #292524;
}

.legal-contact-box a {
  color: #78350f;
  font-weight: bold;
  font-size: 1.15rem;
}

/* Pasos numerados de la página de eliminación de cuenta. */
.legal-steps {
  counter-reset: legal-step;
  list-style: none;
  margin: 16px 0;
  padding: 0;
}

.legal-steps li {
  counter-increment: legal-step;
  position: relative;
  padding: 10px 0 10px 52px;
  border-bottom: 1px dashed #c4af89;
  color: #292524;
  line-height: 1.6;
}

.legal-steps li:last-child {
  border-bottom: none;
}

.legal-steps li::before {
  content: counter(legal-step);
  position: absolute;
  left: 0;
  top: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-dark);
  color: #fff;
  border: 2px solid #78350f;
  font-family: var(--font-pixel);
  font-size: 0.75rem;
}

@media (max-width: 768px) {
  .legal-page {
    padding-top: 100px;
  }

  .legal-toc ol {
    columns: 1;
  }

  .policies-wrapper {
    padding: 24px 18px;
  }
}