/* Páginas institucionales: aviso de privacidad, términos y condiciones,
 * política de cookies, información regulatoria y política de calidad.
 *
 * Las cinco comparten una sola plantilla, `LegalDoc`, que recibe el documento
 * de `window.LEGAL_DATA` y lo arma. Son páginas de consulta: el diseño
 * prioriza encontrar un apartado y leerlo, no persuadir.
 *
 * Decisiones de diseño que conviene no deshacer sin pensarlo:
 *  · Ancho de lectura limitado (68ch). Un texto legal a 1240 px no se lee.
 *  · Índice lateral pegajoso en escritorio, plegable arriba en móvil. Es la
 *    misma lista; no se duplica el contenido.
 *  · Las tablas se vuelven fichas a 390 px: cada celda lleva su rótulo de
 *    columna como texto. Una tabla de 7 columnas con scroll horizontal en un
 *    teléfono no la lee nadie.
 *  · Los avisos de «pendiente» son parte del contenido, no un adorno del
 *    prototipo: dicen al público que ese apartado todavía no está cerrado.
 *  · La etiqueta «Borrador sujeto a revisión jurídica» es visible y temporal.
 *    Se retira cuando jurídico apruebe, no antes.                           */

const LG = () => window.LEGAL_DATA;

function lglEnlaceDocumento(href, txt) {
  if (window.INFECTOLAB_PRODUCTION === true && href === LG().ISO_PDF) {
    return {
      href: "https://wa.me/526646985015?text=" + encodeURIComponent("Hola, quisiera solicitar el certificado ISO 9001:2015 de InfectoLab."),
      txt: "Solicitar certificado por WhatsApp",
    };
  }
  return { href, txt };
}

/* Desplazamiento a un ancla, descontando el encabezado fijo. `smooth` no
 * funciona en este prototipo (ver el lote ginecológico), así que `instant`. */
function lglIrA(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const top = el.getBoundingClientRect().top + window.scrollY - 88;
  window.scrollTo({ top: Math.max(top, 0), behavior: "instant" });
  /* El foco se mueve de verdad: con el teclado, el índice debe llevar al
   * apartado, no sólo mover la página. */
  el.setAttribute("tabindex", "-1");
  el.focus({ preventScroll: true });
}

/* ───────────────────────── piezas de contenido ───────────────────────── */

function LglBloque({ b }) {
  if (b.t === "p") return <p className="lgl-p">{b.txt}</p>;

  if (b.t === "h3") return <h3 className="lgl-h3">{b.txt}</h3>;

  if (b.t === "ul") return (
    <ul className="lgl-ul">{b.items.map((x, i) => <li key={i}>{x}</li>)}</ul>
  );

  if (b.t === "resumen") return (
    <aside className="lgl-resumen">
      <span className="lgl-resumen-tag">En resumen</span>
      <p>{b.txt}</p>
    </aside>
  );

  if (b.t === "nota") return (
    <aside className={"lgl-nota lgl-nota--" + (b.tono || "info")}>
      <span className="lgl-nota-ic" aria-hidden="true">
        <Icon name={b.tono === "aviso" ? "clock" : "shield"} size={15} />
      </span>
      <div>
        <strong>{b.titulo}</strong>
        <p>{b.txt}</p>
      </div>
    </aside>
  );

  if (b.t === "dl") return (
    <dl className="lgl-dl">
      {b.items.map((it, i) => (
        <div key={i}>
          <dt>{it.k}</dt>
          <dd>{it.href ? <a href={it.href}>{it.v}</a> : it.v}</dd>
        </div>
      ))}
    </dl>
  );

  if (b.t === "enlace") {
    const enlace = lglEnlaceDocumento(b.href, b.txt);
    return (
      <p className="lgl-p">
        <a className="lgl-enlace" href={enlace.href}
           target={b.externo ? "_blank" : undefined}
           rel={b.externo ? "noopener noreferrer" : undefined}>
          {enlace.txt}
          {b.externo && <span className="lgl-sr"> · abre en una pestaña nueva</span>}
          <Icon name="arrow" size={13} />
        </a>
      </p>
    );
  }

  if (b.t === "tabla") return (
    <div className="lgl-tabla-wrap">
      <table className="lgl-tabla">
        <thead>
          <tr>{b.cols.map((c, i) => <th key={i} scope="col">{c}</th>)}</tr>
        </thead>
        <tbody>
          {b.filas.map((fila, i) => (
            <tr key={i}>
              {b.claves.map((k, j) => (
                <td key={j}>
                  {/* El rótulo de columna va en el DOM, no en un ::before: al
                    * apilarse la tabla en móvil el navegador ya no asocia la
                    * celda con su encabezado, y el texto generado por CSS no
                    * es un sustituto fiable. En escritorio se oculta con
                    * display:none, así que ahí manda el <th>. */}
                  <span className="lgl-td-col">{b.cols[j]}</span>
                  {fila[k]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );

  /* Tabla declarada pero todavía sin filas. Se muestra la estructura y el
   * motivo; nunca una fila de ejemplo que alguien pueda leer como un dato. */
  if (b.t === "tablaVacia") {
    if (b.filas && b.filas.length) {
      return <LglBloque b={{ ...b, t: "tabla" }} />;
    }
    return (
      <div className="lgl-tabla-vacia">
        <div className="lgl-tabla-vacia-cols">
          {b.cols.map((c, i) => <span key={i}>{c}</span>)}
        </div>
        <p>{b.vacio}</p>
      </div>
    );
  }

  return null;
}

/* ───────────────────────── índice de anclas ───────────────────────── */

function LglIndice({ secciones, activa }) {
  const [abierto, setAbierto] = React.useState(false);
  return (
    <nav className="lgl-toc" aria-label="Contenido de esta página">
      <button type="button" className="lgl-toc-tog"
              aria-expanded={abierto}
              onClick={() => setAbierto(!abierto)}>
        Contenido de esta página
        <Icon name="arrowDown" size={14}
              style={{ transform: abierto ? "rotate(180deg)" : "none" }} />
      </button>
      <div className={"lgl-toc-box" + (abierto ? " is-open" : "")}>
        <p className="lgl-toc-tit" aria-hidden="true">Contenido</p>
        <ol>
          {secciones.map((s) => (
            <li key={s.id}>
              <a href={"#" + s.id}
                 className={activa === s.id ? "is-activa" : ""}
                 aria-current={activa === s.id ? "true" : undefined}
                 onClick={(e) => { e.preventDefault(); setAbierto(false); lglIrA(s.id); }}>
                {s.titulo}
              </a>
            </li>
          ))}
        </ol>
      </div>
    </nav>
  );
}

/* Marca el apartado que se está leyendo. Umbral en 140 px: lo que quedó justo
 * debajo del encabezado fijo es lo que el lector tiene delante. */
function useSeccionActiva(ids) {
  const [activa, setActiva] = React.useState(ids[0]);
  React.useEffect(() => {
    const alScroll = () => {
      let actual = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top <= 140) actual = id;
      }
      setActiva(actual);
    };
    alScroll();
    window.addEventListener("scroll", alScroll, { passive: true });
    return () => window.removeEventListener("scroll", alScroll);
  }, [ids.join("|")]);
  return activa;
}

/* ───────────────────────── plantilla común ───────────────────────── */

function LegalDoc({ doc, navigate, migas, children }) {
  const ids = doc.secciones.map((s) => s.id);
  const activa = useSeccionActiva(ids);
  const ruta = migas || [];

  return (
    <main className="lgl" data-screen-label={doc.etiqueta}><LegalStyles />

      <div className="lgl-head">
        <div className="container">
          <nav className="lgl-migas" aria-label="Ruta de navegación">
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("home"); }}>Inicio</a>
            {ruta.map((m, i) => (
              <React.Fragment key={i}>
                <span aria-hidden="true">/</span>
                <a href="#" onClick={(e) => { e.preventDefault(); navigate(m.page); }}>{m.label}</a>
              </React.Fragment>
            ))}
            <span aria-hidden="true">/</span>
            <span aria-current="page">{doc.etiqueta}</span>
          </nav>

          <div className="eyebrow eyebrow--light" style={{ marginTop: 22 }}>{doc.eyebrow}</div>
          <h1 className="text-balance">{doc.h1}</h1>
          <p className="lgl-intro text-pretty">{doc.intro}</p>

          <div className="lgl-meta">
            <span className="lgl-chip">{doc.version}</span>
            <span className="lgl-chip">Actualizado: {doc.actualizado}</span>
            {/* Etiqueta temporal de prototipo. Se retira al aprobar jurídico. */}
            <span className="lgl-chip lgl-chip--draft">Borrador sujeto a revisión jurídica</span>
          </div>
        </div>
      </div>

      <div className="lgl-body">
        <div className="container lgl-cols">
          <aside className="lgl-side">
            <LglIndice secciones={doc.secciones} activa={activa} />
            <div className="lgl-acciones">
              <button type="button" className="btn btn-ghost btn-sm"
                      onClick={() => window.print()}>
                <Icon name="clipboard" size={14} /> Imprimir
              </button>
              <button type="button" className="btn btn-ghost btn-sm"
                      onClick={() => navigate("home")}>
                <Icon name="home" size={14} /> Volver al inicio
              </button>
            </div>
          </aside>

          <div className="lgl-doc">
            {children}
            <footer className="lgl-pie">
              <p><strong>{doc.version}</strong> · Actualizado el {doc.actualizado}.</p>
              <p>
                Para cualquier duda sobre este documento escriba a{" "}
                <a href={"mailto:" + LG().CONTACTO.correo}>{LG().CONTACTO.correo}</a>.
              </p>
            </footer>
          </div>
        </div>
      </div>
    </main>
  );
}

/* Cuerpo estándar: una sección por apartado, con sus bloques. */
function LglSecciones({ doc }) {
  return (
    <>
      {doc.secciones.map((s, i) => (
        <section key={s.id} className="lgl-sec">
          <h2 id={s.id} className="lgl-h2">
            <span className="lgl-num" aria-hidden="true">{i + 1}</span>
            {s.titulo}
          </h2>
          {s.bloques.map((b, j) => <LglBloque key={j} b={b} />)}
        </section>
      ))}
    </>
  );
}

/* ───────────────────────── las cinco páginas ───────────────────────── */

function PrivacidadPage({ navigate }) {
  const doc = LG().PRIVACIDAD;
  return <LegalDoc doc={doc} navigate={navigate}><LglSecciones doc={doc} /></LegalDoc>;
}

function TerminosPage({ navigate }) {
  const doc = LG().TERMINOS;
  return <LegalDoc doc={doc} navigate={navigate}><LglSecciones doc={doc} /></LegalDoc>;
}

function CookiesPage({ navigate }) {
  const doc = LG().COOKIES;
  return <LegalDoc doc={doc} navigate={navigate}><LglSecciones doc={doc} /></LegalDoc>;
}

function InformacionRegulatoriaPage({ navigate }) {
  const doc = LG().REGULATORIO;
  return <LegalDoc doc={doc} navigate={navigate}><LglSecciones doc={doc} /></LegalDoc>;
}

/* La política de calidad no es un texto corrido: separa lo que está publicado
 * desde 2021 de lo que hoy tiene respaldo documental. Por eso tiene cuerpo
 * propio en vez de usar `LglSecciones`.                                     */
function PoliticaDeCalidadPage({ navigate }) {
  const doc = LG().CALIDAD;
  const { historico, evidencia, lineas } = doc;

  return (
    <LegalDoc doc={doc} navigate={navigate}
              migas={[{ page: "calidad", label: "Calidad y certificación" }]}>

      <section className="lgl-sec">
        <h2 id="compromiso" className="lgl-h2">
          <span className="lgl-num" aria-hidden="true">1</span>Nuestro compromiso
        </h2>
        <p className="lgl-destacado">{doc.declaracion}</p>
      </section>

      <section className="lgl-sec">
        <h2 id="lineas" className="lgl-h2">
          <span className="lgl-num" aria-hidden="true">2</span>Líneas de trabajo
        </h2>
        <p className="lgl-p">
          Los objetivos que InfectoLab publicó en su política de calidad guían el
          trabajo diario del laboratorio. Se presentan aquí como líneas de trabajo:
        </p>
        <ol className="lgl-lineas">
          {lineas.map((l, i) => (
            <li key={i}>
              <span className="lgl-lineas-n" aria-hidden="true">{i + 1}</span>
              <div>
                <strong>{l.titulo}</strong>
                <p>{l.txt}</p>
              </div>
            </li>
          ))}
        </ol>
      </section>

      <section className="lgl-sec">
        <h2 id="evidencia" className="lgl-h2">
          <span className="lgl-num" aria-hidden="true">3</span>Evidencia y documentación
        </h2>
        <p className="lgl-p">
          Una línea de trabajo y una evidencia no son lo mismo. Abajo se indica, para
          cada una, qué documentación está disponible hoy.
        </p>
        <ul className="lgl-evid">
          {evidencia.map((e, i) => (
            <li key={i} className={e.ok ? "is-ok" : "is-pend"}>
              <span className="lgl-evid-ic" aria-hidden="true">
                <Icon name={e.ok ? "check" : "clock"} size={14} />
              </span>
              <div>
                <strong>{e.linea}</strong>
                <span className="lgl-evid-estado">{e.estado}</span>
                <p>{e.detalle}</p>
                {e.enlace && (
                  <a className="lgl-enlace" href={lglEnlaceDocumento(e.enlace, e.enlaceTxt).href} target="_blank" rel="noopener noreferrer">
                    {lglEnlaceDocumento(e.enlace, e.enlaceTxt).txt}
                    <span className="lgl-sr"> · abre en una pestaña nueva</span>
                    <Icon name="arrow" size={13} />
                  </a>
                )}
              </div>
            </li>
          ))}
        </ul>
        <p className="lgl-p">
          El detalle del certificado, su alcance y el organismo que lo emite están en la{" "}
          <a href="#" className="lgl-enlace"
             onClick={(e) => { e.preventDefault(); navigate("calidad"); }}>
            página de calidad y certificación<Icon name="arrow" size={13} />
          </a>.
        </p>
      </section>

      <section className="lgl-sec">
        <h2 id="historico" className="lgl-h2">
          <span className="lgl-num" aria-hidden="true">4</span>
          Política y objetivos publicados en {historico.anio}
        </h2>
        <p className="lgl-p">
          Éste es el texto que InfectoLab publicó en {historico.anio}. Se reproduce
          íntegro como antecedente. Los objetivos que enuncia son metas del sistema de
          gestión, no resultados alcanzados.
        </p>
        <blockquote className="lgl-cita">
          <p>{historico.politica}</p>
          <span className="lgl-cita-tit">Objetivos</span>
          <ul>{historico.objetivos.map((o, i) => <li key={i}>{o}</li>)}</ul>
          <footer>Política de calidad InfectoLab, {historico.anio}</footer>
        </blockquote>
        <p className="lgl-p">
          <a className="lgl-enlace" href={historico.fuente} target="_blank" rel="noopener noreferrer">
            Consultar el documento original en PDF
            <span className="lgl-sr"> · abre en una pestaña nueva</span>
            <Icon name="arrow" size={13} />
          </a>
        </p>
      </section>

      <section className="lgl-sec">
        <h2 id="contacto-calidad" className="lgl-h2">
          <span className="lgl-num" aria-hidden="true">5</span>Quejas y sugerencias
        </h2>
        <p className="lgl-p">
          El seguimiento de quejas forma parte del sistema de gestión de la calidad.
          Si quiere presentar una queja, una sugerencia o una felicitación, escriba a{" "}
          <a href={"mailto:" + LG().CONTACTO.correo}>{LG().CONTACTO.correo}</a> o
          comuníquese al {LG().CONTACTO.telAtencion}.
        </p>
      </section>
    </LegalDoc>
  );
}

/* ───────────────────────── estilos, con alcance .lgl ───────────────────────── */

/* OJO al editar: todo lo de abajo vive dentro de un literal de plantilla.
 * Un acento grave en un comentario CSS lo cierra a media hoja y Babel tumba
 * la página entera con un error de sintaxis. Para citar un valor, comillas. */
function LegalStyles() {
  return <style>{`
.lgl { --l-navy:#1d2a4d; --l-linea:var(--ink-200); --l-lectura:68ch; }

/* ── Encabezado institucional: más bajo que una landing comercial ── */
.lgl-head { background:var(--l-navy); color:#fff; padding:40px 0 44px; }
.lgl-head h1 { color:#fff; margin:12px 0 0; font-size:clamp(30px,3.4vw,44px); line-height:1.1; }
.lgl-intro { color:rgba(255,255,255,.8); margin:16px 0 0; max-width:62ch; font-size:16.5px; line-height:1.65; }
.lgl-migas { display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:13px; color:rgba(255,255,255,.55); }
.lgl-migas a { color:rgba(255,255,255,.62); text-decoration:none; }
.lgl-migas a:hover { color:#fff; text-decoration:underline; }
.lgl-migas [aria-current="page"] { color:#fff; font-weight:600; }

.lgl-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.lgl-chip { font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.14); }
.lgl-chip--draft { background:rgba(253,195,69,.14); border-color:rgba(253,195,69,.42); color:var(--brand-yellow); }

/* ── Cuerpo a dos columnas ── */
.lgl-body { background:var(--paper); padding:48px 0 88px; }
.lgl-cols { display:grid; grid-template-columns:268px minmax(0,1fr); gap:56px; align-items:start; }

.lgl-side { position:sticky; top:96px; }
.lgl-toc-tog { display:none; }
.lgl-toc-tit { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-500); margin:0 0 12px; }
.lgl-toc ol { list-style:none; margin:0; padding:0; border-left:2px solid var(--l-linea); }
.lgl-toc li a { display:block; padding:7px 0 7px 16px; margin-left:-2px;
  border-left:2px solid transparent; font-size:13.5px; line-height:1.4;
  color:var(--ink-600); text-decoration:none; }
.lgl-toc li a:hover { color:var(--brand-primary); }
.lgl-toc li a.is-activa { color:var(--brand-primary); font-weight:650; border-left-color:var(--brand-primary); }
.lgl-toc li a:focus-visible { outline:2px solid var(--brand-primary); outline-offset:2px; border-radius:4px; }

.lgl-acciones { display:flex; flex-direction:column; gap:8px; margin-top:24px;
  padding-top:24px; border-top:1px solid var(--l-linea); align-items:flex-start; }
.lgl-acciones .btn { gap:8px; }

/* ── Documento ──
 * La medida de lectura la llevan los bloques de texto, no el contenedor. Si
 * la lleva el contenedor, una tabla de siete columnas queda encajonada en
 * 68ch y cada celda se convierte en una columna de una palabra.            */
.lgl-doc { max-width:none; }
.lgl-h2, .lgl-h3, .lgl-p, .lgl-ul, .lgl-dl, .lgl-resumen, .lgl-nota,
.lgl-destacado, .lgl-cita, .lgl-lineas, .lgl-evid, .lgl-tabla-vacia,
.lgl-pie { max-width:var(--l-lectura); }
.lgl-sec { padding-bottom:40px; margin-bottom:40px; border-bottom:1px solid var(--ink-100); }
.lgl-sec:last-of-type { border-bottom:none; }
.lgl-h2 { display:flex; gap:14px; align-items:baseline; font-size:22px; line-height:1.25;
  margin:0 0 18px; color:var(--ink-900); scroll-margin-top:96px; }
.lgl-h2:focus { outline:none; }
.lgl-h2:focus-visible { outline:2px solid var(--brand-primary); outline-offset:6px; border-radius:6px; }
.lgl-num { flex:none; width:26px; font-size:12.5px; font-weight:800; color:var(--brand-cyan);
  letter-spacing:.04em; padding-top:4px; }
.lgl-h3 { font-size:16.5px; margin:28px 0 10px; color:var(--ink-900); }
.lgl-p { font-size:15.5px; line-height:1.72; color:var(--ink-700); margin:0 0 14px; }
.lgl-p a, .lgl-dl a { color:var(--brand-primary); }
.lgl-destacado { font-size:17.5px; line-height:1.65; color:var(--ink-700); margin:0; }

.lgl-ul { margin:0 0 16px; padding-left:20px; }
.lgl-ul li { font-size:15.5px; line-height:1.68; color:var(--ink-700); margin-bottom:8px; }
.lgl-ul li::marker { color:var(--brand-cyan); }

.lgl-dl { display:grid; gap:2px; margin:0 0 16px; border:1px solid var(--l-linea);
  border-radius:var(--radius-md); overflow:hidden; background:var(--l-linea); }
.lgl-dl > div { display:grid; grid-template-columns:180px 1fr; gap:16px;
  background:var(--paper); padding:14px 18px; }
.lgl-dl dt { font-size:13px; font-weight:700; color:var(--ink-500); }
.lgl-dl dd { margin:0; font-size:15px; color:var(--ink-800,var(--ink-700)); }

/* ── «En resumen»: la idea del apartado en una frase ── */
.lgl-resumen { background:var(--brand-cyan-50); border-radius:var(--radius-md);
  padding:18px 20px; margin:0 0 20px; }
.lgl-resumen-tag { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand-deep); margin-bottom:6px; }
.lgl-resumen p { margin:0; font-size:15.5px; line-height:1.62; color:var(--ink-700); }

/* ── Avisos. Tono "aviso" = falta cerrar algo; "info" = contexto ── */
.lgl-nota { display:flex; gap:12px; border-radius:var(--radius-md); padding:16px 18px;
  margin:0 0 20px; border:1px solid; }
.lgl-nota--aviso { background:var(--brand-yellow-50); border-color:#f3dca4; }
.lgl-nota--info  { background:var(--ink-50); border-color:var(--l-linea); }
.lgl-nota-ic { flex:none; width:26px; height:26px; border-radius:8px; display:flex;
  align-items:center; justify-content:center; }
.lgl-nota--aviso .lgl-nota-ic { background:var(--brand-yellow); color:var(--ink-900); }
.lgl-nota--info  .lgl-nota-ic { background:var(--brand-deep); color:#fff; }
.lgl-nota strong { display:block; font-size:14px; color:var(--ink-900); margin-bottom:4px; }
.lgl-nota p { margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-600); }

/* ── Tablas ── */
.lgl-tabla-wrap { margin:0 0 20px; border:1px solid var(--l-linea);
  border-radius:var(--radius-md); overflow:hidden; }
.lgl-tabla { width:100%; border-collapse:collapse; font-size:14px; }
/* La finalidad es la columna que se lee; las demás son etiquetas cortas. */
.lgl-tabla { table-layout:fixed; }
.lgl-tabla th:nth-child(1) { width:15%; }
.lgl-tabla th:nth-child(2) { width:15%; }
.lgl-tabla th:nth-child(3) { width:24%; }
.lgl-tabla th:nth-child(4) { width:11%; }
.lgl-tabla th:nth-child(5) { width:12%; }
.lgl-tabla th:nth-child(6) { width:9%; }
.lgl-tabla th:nth-child(7) { width:14%; }
.lgl-tabla th { text-align:left; background:var(--ink-50); padding:12px 11px;
  font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-500); border-bottom:1px solid var(--l-linea); white-space:nowrap; }
/* Con table-layout:fixed una cadena larga sin espacios (app.infectolab.mx)
 * se sale de su celda y pisa la vecina. "break-word" la parte sólo cuando no
 * cabe de ninguna forma; "anywhere" partiría también «Necesaria». */
.lgl-tabla td { padding:13px 11px; vertical-align:top; line-height:1.55;
  color:var(--ink-700); border-bottom:1px solid var(--ink-100);
  overflow-wrap:break-word; }
.lgl-tabla tr:last-child td { border-bottom:none; }
.lgl-td-col { display:none; }

.lgl-tabla-vacia { border:1px dashed var(--ink-300); border-radius:var(--radius-md);
  padding:22px; margin:0 0 20px; background:var(--ink-50); }
.lgl-tabla-vacia-cols { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.lgl-tabla-vacia-cols span { font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-500); background:var(--paper);
  border:1px solid var(--l-linea); border-radius:6px; padding:4px 9px; }
.lgl-tabla-vacia p { margin:0; font-size:15px; line-height:1.6; color:var(--ink-600); }

/* ── Enlaces con flecha ── */
.lgl-enlace { display:inline-flex; align-items:center; gap:6px; font-weight:600;
  color:var(--brand-primary); text-decoration:none; }
.lgl-enlace:hover { text-decoration:underline; }
.lgl-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── Política de calidad ── */
.lgl-lineas { list-style:none; margin:0 0 8px; padding:0; display:grid; gap:2px;
  background:var(--l-linea); border:1px solid var(--l-linea); border-radius:var(--radius-md); overflow:hidden; }
.lgl-lineas li { display:flex; gap:14px; background:var(--paper); padding:16px 18px; }
.lgl-lineas-n { flex:none; width:26px; height:26px; border-radius:8px; background:var(--brand-cyan-50);
  color:var(--brand-deep); font-size:12.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; }
.lgl-lineas strong { display:block; font-size:15px; color:var(--ink-900); margin-bottom:3px; }
.lgl-lineas p { margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-600); }

.lgl-evid { list-style:none; margin:0 0 20px; padding:0; display:grid; gap:12px; }
.lgl-evid li { display:flex; gap:14px; padding:18px; border-radius:var(--radius-md);
  border:1px solid var(--l-linea); background:var(--paper); }
.lgl-evid li.is-pend { background:var(--ink-50); }
.lgl-evid-ic { flex:none; width:26px; height:26px; border-radius:999px; display:flex;
  align-items:center; justify-content:center; color:#fff; }
.lgl-evid li.is-ok .lgl-evid-ic { background:var(--brand-deep); }
.lgl-evid li.is-pend .lgl-evid-ic { background:var(--ink-400); }
.lgl-evid strong { display:block; font-size:15px; color:var(--ink-900); }
.lgl-evid-estado { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; margin:5px 0 8px; padding:3px 8px; border-radius:5px; }
.lgl-evid li.is-ok .lgl-evid-estado { background:var(--brand-cyan-50); color:var(--brand-deep); }
.lgl-evid li.is-pend .lgl-evid-estado { background:var(--ink-200); color:var(--ink-600); }
.lgl-evid p { margin:0 0 10px; font-size:14.5px; line-height:1.6; color:var(--ink-600); }
.lgl-evid p:last-child { margin-bottom:0; }

.lgl-cita { margin:0 0 18px; padding:22px 24px; border-left:3px solid var(--brand-yellow);
  background:var(--ink-50); border-radius:0 var(--radius-md) var(--radius-md) 0; }
.lgl-cita p { font-size:15.5px; line-height:1.7; color:var(--ink-700); margin:0 0 14px; }
.lgl-cita-tit { display:block; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-500); margin:18px 0 8px; }
.lgl-cita ul { margin:0; padding-left:20px; }
.lgl-cita li { font-size:15px; line-height:1.62; color:var(--ink-700); margin-bottom:7px; }
.lgl-cita footer { margin-top:16px; font-size:13px; color:var(--ink-500); font-style:italic; }

.lgl-pie { margin-top:8px; padding-top:24px; border-top:1px solid var(--l-linea); }
.lgl-pie p { margin:0 0 4px; font-size:13.5px; color:var(--ink-500); }
.lgl-pie a { color:var(--brand-primary); }

/* ── Tabla → fichas ──
 * Se apila mucho antes de los 980 px del resto del diseño. Siete columnas
 * caben en 854 px (escritorio, 1440), pero en cuanto el documento baja de
 * unos 700 px cada celda queda en 47 px y palabras como «Necesaria» se
 * parten a la mitad. Medido: a 1024 px de ventana la tabla mide 627 px.  */
@media (max-width:1180px) {
  .lgl-tabla-wrap { border:none; border-radius:0; }
  .lgl-doc > *, .lgl-sec > * { max-width:none; }
  .lgl-tabla, .lgl-tabla tbody, .lgl-tabla tr, .lgl-tabla td { display:block; width:100%; }
  .lgl-tabla { table-layout:auto; }
  .lgl-tabla thead { display:none; }
  /* El rótulo de columna sólo aparece cuando la tabla deja de serlo. */
  .lgl-td-col { display:block; font-size:10.5px; font-weight:800; letter-spacing:.07em;
    text-transform:uppercase; color:var(--ink-500); margin-bottom:3px; }
  .lgl-tabla tr { border:1px solid var(--l-linea); border-radius:var(--radius-md);
    padding:6px 0; margin-bottom:12px; background:var(--paper); }
  .lgl-tabla td { border-bottom:1px solid var(--ink-100); padding:10px 16px; overflow-wrap:normal; }
  .lgl-tabla tr td:last-child { border-bottom:none; }
}

/* ── 980 px: el índice se pliega y el documento pasa a una columna ── */
@media (max-width:980px) {
  .lgl-cols { grid-template-columns:1fr; gap:28px; }
  .lgl-side { position:static; }
  .lgl-doc { max-width:none; }

  /* El índice se pliega: en un teléfono, 16 apartados abiertos empujan el
   * documento fuera de la pantalla antes de que empiece a leerse. */
  .lgl-toc-tog { display:flex; width:100%; align-items:center; justify-content:space-between;
    gap:12px; padding:13px 16px; border:1px solid var(--l-linea); border-radius:var(--radius-md);
    background:var(--paper); font-size:14px; font-weight:650; color:var(--ink-900); cursor:pointer; }
  .lgl-toc-tit { display:none; }
  .lgl-toc-box { display:none; padding:14px 4px 0; }
  .lgl-toc-box.is-open { display:block; }
  .lgl-acciones { flex-direction:row; flex-wrap:wrap; }

  .lgl-dl > div { grid-template-columns:1fr; gap:4px; }
  .lgl-head { padding:28px 0 34px; }
  .lgl-h2 { font-size:19.5px; gap:10px; }
  .lgl-num { width:20px; }
}

/* ── Impresión: el documento y nada más ── */
@media print {
  /* Todo lo que no es el documento desaparece. Se hace por posición y no por
   * clase a propósito: el encabezado es .il-nav, arrastra overlay y cajón, y
   * la bandeja del prototipo no tiene clase. Enumerarlos uno a uno se rompe
   * en cuanto alguien añada un elemento fijo más. Esta regla sólo existe
   * mientras hay una página legal montada. */
  #root > *:not(main.lgl) { display:none !important; }
  .lgl-side, .lgl-chip--draft { display:none !important; }
  .lgl-head { background:#fff !important; color:#000 !important; padding:0 0 16px; }
  .lgl-head h1, .lgl-intro { color:#000 !important; }
  .lgl-migas, .eyebrow--light { display:none !important; }
  .lgl-chip { border:1px solid #999; color:#000; background:none; }
  .lgl-cols { display:block; }
  .lgl-doc { max-width:none; }
  .lgl-body { padding:0; }
  .lgl-sec { break-inside:avoid; page-break-inside:avoid; }
  .lgl-h2 { break-after:avoid; page-break-after:avoid; }
  .lgl-tabla-wrap, .lgl-nota, .lgl-resumen, .lgl-cita { break-inside:avoid; page-break-inside:avoid; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:10px; color:#555; word-break:break-all; }
}
  `}</style>;
}

Object.assign(window, {
  PrivacidadPage, TerminosPage, CookiesPage,
  InformacionRegulatoriaPage, PoliticaDeCalidadPage,
  LegalDoc, LglSecciones, LglBloque, LegalStyles,
});