@import url('tokens.css');

/* Página del contrato. Dos requisitos vienen del documento, no del diseño:
 *
 * 1. Tiene que leerse, imprimirse y archivarse sin depender de JS — es un
 *    contrato, no una vista de producto. No hay una sola línea de script en la
 *    página y `vercel.json` lo hace cumplir con `script-src 'none'`.
 * 2. La versión tiene que estar visible, porque la cláusula 21.3 exige conservar
 *    la versión aceptada y la API estampa ese mismo identificador en cada
 *    aceptación (`terms_acceptances`).
 *
 * El bloque @media print de abajo es parte del entregable, no un extra: si el
 * comercio imprime el contrato, tiene que salir legible y completo.
 */

.doc-head,
.doc-index,
.doc-body,
.doc-foot {
  margin: 0 auto;
  padding: 0 1.5rem;
  max-width: 46rem;
}

.doc-head {
  padding-top: 3rem;
}

.doc-head .wordmark {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-size: 1.25rem;
}

.doc-head h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.doc-head p {
  margin: 0 0 1rem;
  color: var(--gray-700);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.version {
  margin-top: 2rem !important;
  padding: 1rem 1.125rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--gray-600) !important;
  font-size: 0.875rem !important;
}

.doc-index {
  margin-top: 3rem;
}

.doc-index h2 {
  margin: 0 0 1rem;
  color: var(--gray-600);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.doc-index ol {
  margin: 0;
  padding-left: 1.5rem;
  color: var(--gray-400);
  columns: 2;
  column-gap: 2.5rem;
  font-size: 0.9375rem;
}

.doc-index li {
  margin-bottom: 0.4375rem;
  break-inside: avoid;
}

.doc-index a {
  text-decoration: none;
}

.doc-index a:hover {
  text-decoration: underline;
}

.doc-body {
  margin-top: 3.5rem;
}

.doc-body h2 {
  margin: 3rem 0 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  scroll-margin-top: 1.5rem;
}

.doc-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.clause {
  margin: 0 0 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  scroll-margin-top: 1.5rem;
}

/* El número de cláusula cuelga en el margen en pantallas anchas, así se puede
 * citar "8.4" de un vistazo sin que corte el flujo del párrafo. */
.clause .num {
  color: var(--gray-400);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

@media (min-width: 60rem) {
  .clause {
    position: relative;
  }

  .clause .num {
    position: absolute;
    right: 100%;
    padding-right: 1.25rem;
    text-align: right;
  }
}

.clause:target,
.doc-body h2:target {
  background: var(--primary-light);
  box-shadow: 0 0 0 0.5rem var(--primary-light);
  border-radius: 2px;
}

.doc-foot {
  margin: 4rem 0 0;
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  color: var(--gray-400);
  font-size: 0.8125rem;
}

.doc-foot p {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
}

/* --- Impresión / archivo ------------------------------------------------- */

@page {
  margin: 20mm 18mm;
}

@media print {
  :root {
    --background: #ffffff;
    --surface: #ffffff;
  }

  body {
    font-size: 10.5pt;
  }

  .doc-head,
  .doc-index,
  .doc-body,
  .doc-foot {
    max-width: none;
    padding: 0;
  }

  .doc-head {
    padding-top: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  /* En papel el link no se puede seguir: se imprime la URL al lado. Sólo para
   * los absolutos; los anchors internos del índice quedan como están. */
  .doc-head a[href^='/']::after,
  .doc-foot a[href^='http']::after {
    content: ' (' attr(href) ')';
    color: #555555;
    font-size: 0.9em;
  }

  .version {
    border-color: #999999;
  }

  .doc-index {
    margin-top: 2rem;
    break-after: page;
  }

  .doc-body {
    margin-top: 0;
  }

  .doc-body h2 {
    margin-top: 1.75rem;
    break-after: avoid;
    break-inside: avoid;
  }

  /* Una cláusula partida entre dos páginas es exactamente lo que no se quiere
   * al archivar un contrato. */
  .clause {
    break-inside: avoid;
    orphans: 3;
    widows: 3;
  }

  .clause:target,
  .doc-body h2:target {
    background: none;
    box-shadow: none;
  }
}