/*
 * Páginas legales (aviso de privacidad y términos): texto largo, cómodo de leer en el celular.
 * Solo usa los tokens de base.css. Mobile-first.
 */

.legal {
  max-width: 46rem;
  padding-block: var(--espacio-7) var(--espacio-8);
}

.legal h1 {
  font-size: var(--titulo-2);
}

.legal h2 {
  margin-top: var(--espacio-7);
  font-size: var(--titulo-3);
}

.legal ul {
  padding-left: var(--espacio-5);
}

.legal li {
  margin-bottom: var(--espacio-2);
}

.legal__fecha {
  color: var(--color-tinta-suave);
  font-size: var(--texto-pequeno);
}

/* Aviso de borrador: bien visible arriba, con texto normal (no solo color). */
.legal__borrador {
  margin: 0 0 var(--espacio-6);
  padding: var(--espacio-4);
  border: 2px solid var(--color-oro);
  border-radius: var(--radio);
  background: var(--color-crema);
  font-size: 0.9375rem;
}

/* Datos que faltan: se marcan con subrayado punteado, además del texto «por completar». */
.legal__pendiente {
  padding: 0 var(--espacio-1);
  border-bottom: 2px dotted var(--color-oro);
  background: var(--color-acento-suave);
  font-weight: 600;
}

.legal__tabla {
  overflow-x: auto;
  margin-bottom: var(--espacio-4);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
}

.legal table {
  width: 100%;
  min-width: 26rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.legal th,
.legal td {
  padding: var(--espacio-3) var(--espacio-4);
  border-bottom: 1px solid var(--color-linea);
  text-align: left;
  vertical-align: top;
}

.legal thead th {
  background: var(--color-crema);
  font-weight: 600;
}

.legal tbody th {
  font-weight: 500;
}

.legal tbody tr:last-child th,
.legal tbody tr:last-child td {
  border-bottom: 0;
}