/* Páginas del pie: aviso legal, privacidad, cookies, créditos y las que añada el
   equipo desde /admin/pages (`public/site_page.html`). El cuerpo es Markdown
   convertido (`app/domain/site/page_markdown.py`): estas reglas son toda la
   forma que tiene, porque quien lo escribe no pone clases. */

.site-page {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
  gap: 18px 48px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 22px 64px;
}
.site-page.has-index { grid-template-columns: minmax(0, 760px) 240px; }
.site-page-crumbs,
.site-page-draft { grid-column: 1 / -1; }

.site-page-crumbs { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: .82rem; }
.site-page-crumbs a { color: var(--text-muted); text-decoration: none; }
.site-page-crumbs a:hover { color: var(--primary-hover); text-decoration: underline; }
.site-page-crumbs svg { width: 14px; height: 14px; }

.site-page-draft { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border: 1px solid #f3d38b; border-radius: 10px; background: #fff8e6; color: #7a5410; font-size: .88rem; }
.site-page-draft svg { width: 16px; height: 16px; flex: none; }
.site-page-draft a { margin-left: auto; color: inherit; font-weight: 600; }

.site-page-document {
  min-width: 0;
  padding: 44px 52px 52px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -18px rgba(15, 23, 42, .18);
}
.site-page-header { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--border-color); }
.site-page-header h1 { margin: 0; color: var(--text-main); font-family: var(--font-heading); font-size: clamp(1.7rem, 3.4vw, 2.25rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }

/* ── El cuerpo ─────────────────────────────────────────────────────────── */

.site-page-body { color: #334155; font-size: 1rem; line-height: 1.72; overflow-wrap: anywhere; }
.site-page-body > :first-child { margin-top: 0; }
.site-page-body > :last-child { margin-bottom: 0; }
.site-page-body p { margin: 0 0 1em; }
.site-page-body h2,
.site-page-body h3,
.site-page-body h4 { color: var(--text-main); font-family: var(--font-heading); line-height: 1.3; scroll-margin-top: 88px; }
.site-page-body h2 { margin: 2.1em 0 .7em; font-size: 1.28rem; font-weight: 650; }
.site-page-body h3 { margin: 1.7em 0 .5em; font-size: 1.08rem; font-weight: 650; }
.site-page-body h4 { margin: 1.4em 0 .4em; font-size: 1rem; font-weight: 650; }
.site-page-body strong { color: var(--text-main); font-weight: 650; }
.site-page-body a { color: var(--primary-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site-page-body a:hover { color: #075985; text-decoration-thickness: 2px; }
.site-page-body ul,
.site-page-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.site-page-body li { margin: .35em 0; padding-left: .2em; }
.site-page-body li::marker { color: var(--text-muted); }
.site-page-body blockquote { margin: 1.2em 0; padding: .4em 0 .4em 1.1em; border-left: 3px solid var(--border-color); color: var(--text-muted); }
.site-page-body hr { margin: 2.2em 0; border: 0; border-top: 1px solid var(--border-color); }
.site-page-body code { padding: .1em .35em; border-radius: 5px; background: #f1f5f9; font-size: .9em; }
.site-page-body table { width: 100%; margin: 0 0 1.2em; border-collapse: collapse; font-size: .94rem; }
.site-page-body th,
.site-page-body td { padding: .55em .7em; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: top; }
.site-page-body th { color: var(--text-main); font-weight: 650; }
/* En una tabla, un nombre (`artext_consent`) o una cabecera corta no se parten:
   el `anywhere` del cuerpo está para las URL largas de los párrafos. */
.site-page-body table { overflow-wrap: normal; }
.site-page-body th,
.site-page-body td code { white-space: nowrap; }
.site-page-body img { max-width: 100%; height: auto; }

/* Un párrafo que solo trae imágenes es una fila de logotipos (los créditos):
   franja clara, alto acotado y alineados. `multiply` funde el fondo blanco de
   los JPG con el de la franja. */
.site-page-body .page-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin: .4em 0 1.6em; padding: 18px 22px; border-radius: 12px; background: #f8fafc; }
.site-page-body .page-logos img { width: auto; max-height: 72px; object-fit: contain; mix-blend-mode: multiply; }

/* ── Índice ────────────────────────────────────────────────────────────── */

.site-page-index { position: sticky; top: 88px; align-self: start; padding-top: 6px; font-size: .86rem; }
.site-page-index-title { margin: 0 0 10px; color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.site-page-index ol { margin: 0; padding: 0; border-left: 1px solid var(--border-color); list-style: none; }
.site-page-index a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 2px solid transparent; color: #5b6c84; line-height: 1.4; text-decoration: none; }
.site-page-index a:hover,
.site-page-index a:focus-visible { border-left-color: var(--primary); color: var(--text-main); }

@media (max-width: 960px) {
  .site-page.has-index { grid-template-columns: minmax(0, 760px); }
  /* En una columna el índice va antes del documento, como un sumario. */
  .site-page-crumbs,
  .site-page-draft { order: -2; }
  .site-page-index { position: static; order: -1; padding: 14px 18px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); }
}

/* En el móvil la tarjeta sobra: su borde y su relleno se sumaban al margen del
   sitio (`.shell`, 16 px) y el texto quedaba a casi 50 px de cada lado, con 290
   de línea en una pantalla de 390. El documento pasa a ser la página misma. */
@media (max-width: 620px) {
  .site-page { gap: 14px; padding: 12px 0 36px; }
  .site-page-document { padding: 4px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .site-page-header { margin-bottom: 20px; padding-bottom: 16px; }
  .site-page-index { padding: 12px 14px; font-size: .84rem; }
  .site-page-index a { padding: 3px 0 3px 12px; }
  .site-page-body { font-size: .97rem; }
  .site-page-body .page-logos { gap: 14px 20px; padding: 14px; }
  .site-page-body .page-logos img { max-height: 56px; }
}

@media print {
  .site-page { display: block; padding: 0; }
  .site-page-crumbs,
  .site-page-index,
  .site-page-draft { display: none; }
  .site-page-document { padding: 0; border: 0; box-shadow: none; }
}