/* LOS TEXTOS LEGALES: la página de un documento (título, fecha, raya y
   apartados en una columna de texto). Es la de la landing —aviso legal,
   privacidad y cookies— y la usan también las páginas legales de cada
   restaurante (`/aviso-legal`, `/privacidad`…): una sola hoja, así que si
   cambia aquí cambia en las dos. La landing la carga después de `landing.css`
   y la web del restaurante, que no tiene esas variables, las declara abajo para
   `html.legal-document-mode`. */

/* CAPAS: esta hoja no usa `!important`. Todo va en `foodev-base`. */
@layer foodev-base, foodev-prioridad;

@layer foodev-base {
/* Las variables de la landing que el documento necesita, para la web del
   restaurante. Mismos valores que `landing.css`. */
html.legal-document-mode {
  --white: var(--foodev-fondo);
  --display-text: var(--foodev-texto);
  --description: var(--foodev-texto);
  --font-display: "Merriweather", Georgia, "Times New Roman", serif;
  --type-display-size: 2.5rem;
  --type-display-weight: 600;
  --type-display-tracking: normal;
  --type-display-line: 1.12;
  --type-description-size: 1.3rem;
  --type-description-weight: 400;
  --type-description-line: 1.5;
  --type-description-tracking: -.5px;
  --type-body-size: 1rem;
  --type-body-weight: 400;
  --type-body-line: 1.5;
  --document-width: 880px;
  --page-padding: clamp(20px, 4vw, 64px);
}

/* LOS TEXTOS LEGALES SOLO EXISTEN EN CLARO, también en la web de un restaurante
   con tema oscuro: son un documento en blanco de papel, como los de la landing
   (que no tiene modo oscuro). La clase repetida gana al bloque del tema oscuro. */
html.legal-document-mode.legal-document-mode {
  color-scheme: light;
  --foodev-fondo: #FFFFFF;
  --foodev-fondo-2: #F2F2F2;
  --foodev-fondo-3: #FFFFFF;
  --foodev-texto: #000000;
  --foodev-texto-2: rgb(60 60 60 / 60%);
  --foodev-separador: rgb(60 60 60 / 29%);
  --foodev-separador-opaco: #C6C6C6;
  --foodev-interaction-selector: rgb(0 0 0 / 5%);
  --foodev-floating-capsule-selector: rgb(0 0 0 / 5%);
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --text: #000000;
}

@media (max-width: 900px) {
  html.legal-document-mode { --type-description-size: 1.25rem; }
}

@media (max-width: 620px) {
  html.legal-document-mode { --type-description-size: 1.125rem; }
}

/* Los márgenes por defecto del navegador, sin especificidad, para que las reglas
   del documento (que sí los fijan) manden siempre. */
:where(html.legal-document-mode) :where(h1, h2, h3, p, ul, li, hr) { margin: 0; }
:where(html.legal-document-mode) * { box-sizing: border-box; }

html.legal-document-mode,
html.legal-document-mode body {
  background: var(--white);
}

html.legal-document-mode body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--foodev-texto);
}

/* Los títulos del documento y el rótulo de cada apartado: la tipografía de
   display de la landing. */
.legal-intro h1,
.legal-section h2 {
  color: var(--display-text);
  font-family: var(--font-display);
}

.section-kicker {
  margin: 0 0 16px;
  color: var(--display-text);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
  line-height: var(--type-display-line);
}

.cerrar-pagina {
  position: fixed;
  z-index: 40;
}

/* Public legal pages have no navigation bar. Their only navigation is the
   canonical floating back capsule, aligned with the document column. */
.legal-main {
  /* Del título a la fecha, 12 px; de la fecha a la raya, 8 más; y de la raya
     al documento, 78 px. */
  --legal-cabecera-hueco: 12px;
  --legal-entre-apartados: 52px;
  padding-bottom: clamp(72px, 9vw, 128px);
}

.legal-intro {
  padding-block: clamp(112px, 12vw, 160px) 0;
}

/* LAS PÁGINAS LEGALES VAN EN BLANCO, documento entero: el papel del resto de la
   web es #F4F4F4, y un texto largo se lee mejor sobre el blanco de una hoja. El
   cuerpo también, porque el pie queda fuera del documento. */
.legal-document-page,
.legal-main { background: var(--white); }

.legal-intro-inner {
  width: min(calc(100% - (var(--page-padding) * 2)), var(--document-width));
  margin-inline: auto;
}

.legal-back-row {
  width: 100%;
  margin: 0 0 clamp(48px, 6vw, 72px);
}

.legal-document {
  width: min(calc(100% - (var(--page-padding) * 2)), var(--document-width));
  margin-inline: auto;
}

.legal-intro h1 {
  color: var(--foodev-texto);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
  line-height: var(--type-display-line);
}

.legal-intro h1 { margin-bottom: 0; }

.legal-updated {
  margin-top: var(--legal-cabecera-hueco, 12px);
  margin-bottom: 0;
  color: var(--description);
  font-size: var(--type-description-size);
  font-weight: var(--type-description-weight);
  letter-spacing: var(--type-description-tracking);
  line-height: var(--type-description-line);
}

/* LA LÍNEA BAJO EL CABEZADO. Separa el título y su fecha del documento, y mide
   lo mismo que el documento porque vive en su misma columna: el ancho no se
   repite aquí, lo pone `.legal-intro-inner`. */
.legal-rule {
  height: 0;
  margin: calc(var(--legal-cabecera-hueco, 12px) + 8px) 0 0;
  border: 0;
  border-top: var(--foodev-raya);
}

.legal-section { margin-top: var(--legal-entre-apartados, 52px); }

.legal-document > .legal-section:first-child {
  margin-top: 78px;
}

/* EL TÍTULO DE CADA APARTADO ES EL RÓTULO DE LA PORTADA, el que va encima del
   titular de cada servicio en el inicio: `.section-kicker`. No se copia su
   estilo, se le pone su clase —así que si cambia allí, cambia aquí—. Iban a
   2 rem, el tamaño de un titular de sección, y en un documento de quince
   apartados eso son quince titulares compitiendo con el de la página. */

.legal-section h3 {
  margin-top: 28px;
  color: var(--foodev-texto);
  font-size: var(--type-body-size);
  font-weight: 600;
  line-height: var(--type-body-line);
}

.legal-section p,
.legal-section li,
.legal-section dd,
.legal-section dt {
  color: #000000;
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line);
}

.legal-section h2 + p,
.legal-section p + p,
.legal-section p + ul,
.legal-section p + dl,
.legal-section h3 + p,
.legal-section h3 + ul,
.legal-section ul + p { margin-top: 16px; }

.legal-section ul { margin-bottom: 0; padding-left: 22px; }
.legal-section li + li { margin-top: 8px; }
.legal-section a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* AQUÍ ESTABA LA REJILLA DE DATOS de los documentos legales, y ya no está. Era
   una tabla —dos columnas con filos— para decir siete cosas: el titular, el
   NIF, el domicilio. Un documento legal se lee en una columna de texto; lo que
   sea una enumeración se enumera con una lista normal, que es lo que hay
   ahora. */

@media (max-width: 620px) {
  .legal-intro { padding-top: 104px; padding-bottom: 16px; }
  .legal-cerrar { top: calc(16px + 6px + env(safe-area-inset-top, 0px)); }
}

/* En la web del restaurante la página del documento sustituye a la aplicación:
   todo lo que no sea el documento se esconde. */
}

@layer foodev-prioridad {
/* En los textos legales es la única salida: no hay cápsula de Volver. Con el
   fondo opaco de la página, para que el texto no se lea por detrás al subir.
   Va en la capa de prioridad: el botón de icono estándar (`.foodev-icon-button`)
   declara su propio fondo transparente, y según el orden de carga de las hojas
   —distinto en la landing y en la web del restaurante— le ganaba al blanco. */
.legal-cerrar {
  background: var(--white);
  top: calc(20px + 6px + env(safe-area-inset-top, 0px));
  right: max(var(--page-padding), calc((100vw - var(--document-width)) / 2));
}

/* Su hover es el estándar, ENCIMA de ese fondo, como en cualquier botón: el
   velo como imagen sobre el blanco, que no se quita. */
@media (hover: hover) and (pointer: fine) {
  .foodev-icon-button.legal-cerrar:not(:disabled):hover {
    background: linear-gradient(var(--foodev-floating-capsule-selector) 0 0), var(--white);
  }
}

/* Todo lo que no es el documento, fuera y sin recibir un toque: la aplicación
   sigue cargada debajo, y sus cápsulas, velos y ventanas no pueden verse ni
   tapar el documento. `:not(#…)` solo sube la especificidad sobre las reglas
   de cada elemento, escritas con id. */
html.legal-document-mode body > :not(.legal-main):not(#legal-x1):not(#legal-x2) {
  display: none;
  visibility: hidden;
  pointer-events: none;
}
}