/* ═══════════════════════════════════════════════════════════════════════════
   RENOVO · páginas legales VIVAS
   Construido solo con tokens de renovo-system.css. Cero valores a pelo.

   Una página legal no tiene por qué ser un muro muerto. Lo que la hace viva:
   índice fijo que sabe dónde estás · barra de progreso de lectura · resumen en
   lenguaje humano antes del texto jurídico · enlace por sección para poder citar
   una cláusula concreta · cambio de idioma que no te saca de la página.
   Y funciona sin JavaScript: el JS solo añade, nunca es requisito.
   ═══════════════════════════════════════════════════════════════════════════ */

body { margin: 0; }

/* progreso de lectura */
.lg-progress {
  position: fixed; top: 0; left: 0; height: var(--sp-1); width: 0;
  background: var(--accent-solid); z-index: 20;
  transition: width var(--dur-fast) linear;
}

/* cabecera fija */
.lg-top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--surface-page) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4);
}
.lg-top img { height: 28px; }
.lg-top .lg-doc-name { font-size: var(--t-11); color: var(--ink-soft); }
.lg-langs { margin-left: auto; display: flex; gap: var(--sp-1); }
.lg-langs a {
  font-size: var(--t-11); font-weight: var(--w-semi);
  color: var(--ink-soft); text-decoration: none;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.lg-langs a:hover { color: var(--ink); border-color: var(--line-strong); }
.lg-langs a[aria-current="true"] { background: var(--accent-soft); color: var(--accent-ink); }

/* estructura: índice + documento */
.lg-shell {
  display: grid; grid-template-columns: 232px minmax(0, var(--measure));
  gap: var(--sp-10); justify-content: center;
  padding: var(--sp-10) var(--sp-5) var(--sp-16);
}
.lg-toc { position: sticky; top: var(--sp-16); align-self: start; }
.lg-toc .lg-toc-t {
  font-size: var(--t-10); font-weight: var(--w-bold); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--sp-3);
}
.lg-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.lg-toc a {
  display: block; font-size: var(--t-125); color: var(--ink-soft); text-decoration: none;
  padding: var(--sp-1) var(--sp-3); border-left: 2px solid var(--line);
  line-height: var(--lh-base);
}
.lg-toc a:hover { color: var(--ink); }
.lg-toc a[aria-current="true"] {
  color: var(--accent-ink); border-left-color: var(--accent); font-weight: var(--w-semi);
}

/* el documento */
.lg-doc h1 {
  font-family: var(--font-display); font-size: var(--t-27); font-weight: var(--w-medium);
  letter-spacing: var(--track-tight); line-height: var(--lh-tight); margin: 0 0 var(--sp-2);
}
.lg-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  margin-bottom: var(--sp-6);
}
.lg-meta .lg-chip {
  font-size: var(--t-10); font-weight: var(--w-bold); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--ink-soft);
  background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3);
}

/* resumen humano antes del texto jurídico */
.lg-tldr {
  background: var(--surface-card); border: 1px solid var(--line);
  border-left: var(--sp-1) solid var(--accent);
  border-radius: var(--r-card); padding: var(--sp-5); margin-bottom: var(--sp-8);
}
.lg-tldr h2 {
  font-family: var(--font-ui); font-size: var(--t-11); font-weight: var(--w-bold);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 var(--sp-3);
}
.lg-tldr ul { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.lg-tldr li { font-size: var(--t-13); color: var(--ink); line-height: var(--lh-read); }
.lg-tldr .lg-nota { font-size: var(--t-11); color: var(--ink-soft); margin: var(--sp-3) 0 0; }

/* secciones */
.lg-sec { scroll-margin-top: var(--sp-16); margin-bottom: var(--sp-8); }
.lg-sec h2 {
  font-family: var(--font-display); font-size: var(--t-20); font-weight: var(--w-medium);
  margin: 0 0 var(--sp-3); display: flex; align-items: baseline; gap: var(--sp-2);
}
.lg-sec h2 .lg-n { font-size: var(--t-13); color: var(--ink-soft); font-family: var(--font-ui); }
.lg-anchor {
  opacity: 0; text-decoration: none; color: var(--ink-soft);
  font-size: var(--t-13); transition: opacity var(--dur-fast) var(--ease);
}
.lg-sec h2:hover .lg-anchor, .lg-anchor:focus-visible { opacity: 1; }
.lg-sec p, .lg-sec li { font-size: var(--t-13); color: var(--ink-2); line-height: var(--lh-read); }
.lg-sec p { margin: 0 0 var(--sp-3); }
.lg-sec ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.lg-sec a { color: var(--accent-ink); }
.lg-sec strong { color: var(--ink); font-weight: var(--w-semi); }

/* tablas: nunca desbordan la página */
.lg-tabla { overflow-x: auto; margin: 0 0 var(--sp-4); }
.lg-tabla table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: var(--t-125); }
.lg-tabla th, .lg-tabla td {
  border: 1px solid var(--line); padding: var(--sp-2) var(--sp-3);
  text-align: left; vertical-align: top; color: var(--ink-2);
}
.lg-tabla th { background: var(--surface-raised); color: var(--ink); font-weight: var(--w-semi); }

/* destacado dentro de una cláusula */
.lg-destacado {
  background: var(--good-soft); border-left: var(--sp-1) solid var(--good);
  border-radius: var(--r-field); padding: var(--sp-4); margin: 0 0 var(--sp-4);
}
.lg-destacado p { color: var(--ink); margin: 0; }

/* pie */
.lg-pie {
  border-top: 1px solid var(--line); margin-top: var(--sp-10); padding-top: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
}
.lg-pie a { color: var(--accent-ink); text-decoration: none; font-size: var(--t-13); font-weight: var(--w-semi); }
.lg-arriba { margin-left: auto; }

/* móvil: el índice pasa a ser un desplegable arriba */
@media (max-width: 900px) {
  .lg-shell { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); padding-top: var(--sp-6); }
  .lg-toc { position: static; border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-4); }
  .lg-toc ol { max-height: 42vh; overflow-y: auto; }
}

/* impresión: el cliente puede querer el contrato en papel */
@media print {
  .lg-top, .lg-toc, .lg-progress, .lg-anchor, .lg-arriba { display: none !important; }
  .lg-shell { grid-template-columns: 1fr; padding: 0; }
  .lg-sec { break-inside: avoid; }
  .lg-sec p, .lg-sec li { color: #000; }
}