/**
 * common/footer — Pie global.
 * Handle: pf_pfuture_component_footer
 *
 * Bloques: __notice (aviso legal sobre fondo claro), __body (zona navy),
 * __brand (logo, descripción), __column--servicios, __column--menu,
 * __column--contacto, __bottom (copyright + legales + __tools: redes discretas y
 * botón de modo sol/luna, issue #181).
 *
 * Tokens: solo los canónicos de style.css (issue #60), sin literales de respaldo.
 * Los tokens `--pf-footer-*` son de componente y REMAPEAN la paleta: el pie cuelga
 * de `--pf-color-bg-ink` (navy en claro, navy profundo en oscuro) y lo que se
 * escribe encima es `--pf-color-on-ink`, NUNCA el token de texto invertido, que
 * sobre `bg-ink` da 1,03:1 en modo oscuro (medido en #111). Como los dos tokens
 * cambian solos de modo, esta hoja no lleva ningún bloque de modo oscuro.
 *
 * Dirección «Expediente» (issue #112): sin cita, contactos y hovers en `on-ink`
 * con subrayado y no en naranja, títulos de columna como única versalita del pie
 * (13 px, peso 500, `--pf-tracking-caps`), redes como glifo pequeño en la tinta suave,
 * sin borde, sin relleno y sin sombra (desde la tanda 17, a petición del dueño).
 */

.pf-footer {
  --pf-footer-bg: var(--pf-color-bg-ink);
  --pf-footer-text: var(--pf-color-on-ink);
  --pf-footer-text-soft: color-mix(in srgb, var(--pf-color-on-ink) 80%, transparent);
  --pf-footer-link: var(--pf-color-on-ink);
  --pf-footer-rule: color-mix(in srgb, var(--pf-color-on-ink) 20%, transparent);
  --pf-footer-notice-bg: var(--pf-color-bg);
  --pf-footer-notice-text: var(--pf-color-text-soft);
  --pf-footer-logo-width: 14rem;

  width: 100%;
  font-family: var(--pf-font-sans);
}

.pf-footer__inner {
  width: 100%;
  max-width: var(--pf-container);
  margin-inline: auto;
  padding-inline: var(--pf-gutter);
}

.pf-footer .pf-icon {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

/* Listas del componente: sin viñetas ni márgenes. */
.pf-footer__list,
.pf-footer__social,
.pf-footer__legal-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -------------------------------------------------------------------------
 * Aviso legal (financiación europea).
 * ---------------------------------------------------------------------- */

.pf-footer__notice {
  background: var(--pf-footer-notice-bg);
  color: var(--pf-footer-notice-text);
  font-size: var(--pf-text-sm);
  border-top: 1px solid var(--pf-color-border);
}

.pf-footer__inner--notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-md);
  padding-block: var(--pf-space-md);
}

.pf-footer__inner--notice > * {
  margin: 0;
}

.pf-footer__inner--notice img {
  max-height: 4.5rem;
  width: auto;
}

/* -------------------------------------------------------------------------
 * Zona principal.
 * ---------------------------------------------------------------------- */

.pf-footer__body {
  background: var(--pf-footer-bg);
  color: var(--pf-footer-text);
}

.pf-footer__inner--grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--pf-space-xl) var(--pf-space-lg);
  padding-block: var(--pf-space-2xl) var(--pf-space-xl);
}

.pf-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-md);
  align-items: flex-start;
}

.pf-footer__logo {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
}

 /* El logo se dimensiona por ANCHO, nunca por alto (issue #181, punto 1). Con
 * `height: 9rem` y `width: auto` el `max-width: 100%` global lo recortaba al ancho de
 * la columna y el 300×100 se pintaba a 297×144: la palabra estrecha y alta. Con el
 * ancho acotado y `height: auto` la proporción es siempre la del fichero. */
.pf-footer__logo-img {
  display: block;
  width: min(100%, var(--pf-footer-logo-width));
  height: auto;
}

.pf-footer__logo-text {
  font-size: var(--pf-text-xl);
  font-weight: var(--pf-weight-bold);
}

.pf-footer__description {
  margin: 0;
  max-width: 32ch;
  color: var(--pf-footer-text-soft);
}

/* Columnas de enlaces. El titulo es la unica versalita que queda en el pie:
 * 13 px, peso 500, tracking del token y color apagado (regla de uso 130). */
.pf-footer__column-title {
  margin: 0 0 var(--pf-space-sm);
  color: var(--pf-footer-text-soft);
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-weight-medium);
  letter-spacing: var(--pf-tracking-caps);
  text-transform: uppercase;
}

/* El plegado de móvil convierte el título en <button> (ver script.js). El botón
 * hereda la tipografía del título en TODOS los anchos; lo que solo existe en móvil
 * es el signo de plegar y el ocultado de la lista. Sin esto el botón se pinta con el
 * estilo por defecto del navegador: caja gris y texto pequeño. */
.pf-footer__column-title button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
}

.pf-footer__column-title-link {
  color: inherit;
  text-decoration: none;
}

.pf-footer__column-title-link:hover,
.pf-footer__column-title-link:focus-visible {
  color: var(--pf-footer-text);
  text-decoration: underline;
  text-underline-offset: var(--pf-underline-offset);
}

.pf-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-2xs);
}

/* Enlaces de navegacion y contacto: `on-ink` sin subrayar; el hover y la pagina
 * actual se subrayan con el mismo color. El naranja no vuelve: es solo del boton
 * primario de conversion (regla de uso 124). */
.pf-footer__list-link {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-space-2xs);
  color: var(--pf-footer-link);
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-weight-regular);
  text-decoration: none;
  transition: color var(--pf-transition);
}

.pf-footer__list-link:hover,
.pf-footer__list-link:focus-visible,
.pf-footer__list-link[aria-current="page"] {
  color: var(--pf-footer-link);
  text-decoration: underline;
  text-underline-offset: var(--pf-underline-offset);
}

/* Contacto: mismo color que el resto de enlaces, un punto mas grande. La clase
 * `--accent` se conserva por el marcado; ya no pinta el acento. */
.pf-footer__list--contact {
  gap: var(--pf-space-xs);
}

.pf-footer__list-link--accent {
  font-size: var(--pf-text-base);
}

.pf-footer__list-item--address,
.pf-footer__list-item--schedule {
  display: flex;
  align-items: flex-start;
  gap: var(--pf-space-2xs);
  color: var(--pf-footer-text-soft);
  font-size: var(--pf-text-sm);
}

.pf-footer__address {
  font-style: normal;
}

/* -------------------------------------------------------------------------
 * Herramientas de la franja inferior: redes discretas y botón de modo (issue #181).
 * ---------------------------------------------------------------------- */

.pf-footer__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pf-space-2xs);
}

/* Redes: glifos pequeños (20 px) en el color suave del pie, sin círculo ni borde ni
 * franja propia. El área de pulsación se mantiene en 44×44 con relleno, no con tamaño
 * de glifo: el dueño las quiere discretas, no difíciles de pulsar. */
.pf-footer__social {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
}

.pf-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--pf-radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--pf-footer-text-soft);
  transition: color var(--pf-transition);
}

.pf-footer__social-link .pf-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Una sola señal al hover: el glifo sube a la tinta plena. */
.pf-footer__social-link:hover,
.pf-footer__social-link:focus-visible {
  color: var(--pf-footer-text);
}

/* Botón de modo: 44×44, un icono en `currentColor`. QUÉ ICONO SE VE —Y QUÉ TEXTO DE
 * LECTOR DE PANTALLA DA NOMBRE AL BOTÓN— LO DECIDE ESTE CSS, por los mismos ganchos que
 * la paleta, así que icono y nombre son correctos en el primer pintado, sin esperar al
 * script y también sin JavaScript (issue #190): en claro se ve la luna y el nombre dice
 * «Cambiar a modo oscuro»; en oscuro, el sol y «Cambiar a modo claro». `display: none`
 * saca el texto del nombre accesible, que es lo que hace que un solo mecanismo sirva
 * para los dos. Sin animación: cambiar de modo repinta la página entera, y un giro del
 * icono encima es ruido. */
.pf-footer__theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--pf-radius-sm);
  background: transparent;
  color: var(--pf-footer-text-soft);
  cursor: pointer;
  transition: color var(--pf-transition);
}

.pf-footer__theme:hover,
.pf-footer__theme:focus-visible {
  color: var(--pf-footer-text);
}

/* 20 px, como las seis redes de la misma fila. Con `.pf-footer` delante para ganar a
 * `.pf-footer .pf-icon { width: 1.125rem }` de arriba, que tiene dos clases: sin el
 * prefijo la hoja decía 20 y servía 18 (revisión de la tanda 17). */
.pf-footer .pf-footer__theme-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Estado por defecto (claro): luna y su texto; sol y el suyo, fuera. Con `.pf-footer`
 * delante por la misma razón de especificidad que el tamaño. */
.pf-footer .pf-footer__theme-icon--sun,
.pf-footer .pf-footer__theme-label--sun {
  display: none;
}

/* Modo oscuro por el sistema, salvo que el visitante haya forzado claro: sol y su texto. */
@media (prefers-color-scheme: dark) {
  :root:not([data-pf-theme="light"]) .pf-footer__theme-icon--moon,
  :root:not([data-pf-theme="light"]) .pf-footer__theme-label--moon {
    display: none;
  }

  :root:not([data-pf-theme="light"]) .pf-footer__theme-icon--sun,
  :root:not([data-pf-theme="light"]) .pf-footer__theme-label--sun {
    display: block;
  }
}

/* Modo oscuro forzado (visitante o sitio): sol y su texto, gane lo que gane el sistema. */
:root[data-pf-theme="dark"] .pf-footer__theme-icon--moon,
:root[data-pf-theme="dark"] .pf-footer__theme-label--moon {
  display: none;
}

:root[data-pf-theme="dark"] .pf-footer__theme-icon--sun,
:root[data-pf-theme="dark"] .pf-footer__theme-label--sun {
  display: block;
}

/* Franja inferior: copyright y legales. */
.pf-footer__bottom {
  border-top: 1px solid var(--pf-footer-rule);
}

.pf-footer__inner--bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-space-sm) var(--pf-space-lg);
  padding-block: var(--pf-space-md);
}

.pf-footer__copyright-text,
.pf-footer__copyright-extra {
  margin: 0;
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-weight-medium);
}

.pf-footer__copyright-extra {
  color: var(--pf-footer-text-soft);
  font-weight: var(--pf-weight-regular);
}

.pf-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-xs) var(--pf-space-lg);
}

.pf-footer__legal-link {
  color: var(--pf-footer-link);
  font-size: var(--pf-text-sm);
  text-decoration: none;
  transition: color var(--pf-transition);
}

.pf-footer__legal-link:hover,
.pf-footer__legal-link:focus-visible,
.pf-footer__legal-link[aria-current="page"] {
  color: var(--pf-footer-link);
  text-decoration: underline;
  text-underline-offset: var(--pf-underline-offset);
}

/* -------------------------------------------------------------------------
 * Responsive.
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .pf-footer__inner--grid {
    grid-template-columns: 1fr 1fr;
    padding-block: var(--pf-space-xl);
  }

  .pf-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .pf-footer {
    --pf-footer-logo-width: 12rem;
  }

  .pf-footer__tools {
    width: 100%;
    justify-content: space-between;
  }

  /* Si las redes ocupan la fila entera, el botón baja y se queda a la derecha. */
  .pf-footer__theme {
    margin-inline-start: auto;
  }

  .pf-footer__inner--grid {
    grid-template-columns: 1fr;
    gap: var(--pf-space-lg);
  }

  .pf-footer__inner--bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Seis enlaces de 44 px caben en 312 px de contenido (viewport 360) solo con un
   * hueco de 8 px (6×44 + 5×8 = 304); con 16 px la fila medía 344 y desbordaba el
   * documento por debajo de 368 px (revisión de la tanda 17). `wrap` es la red por
   * si algún día hay una séptima red. */
  .pf-footer__social {
    flex-wrap: wrap;
    gap: var(--pf-space-2xs);
  }
}

/* Plegado de columnas en móvil: solo con JS activo, ver script.js. */
@media (max-width: 600px) {
  .pf-footer.has-js .pf-footer__column-title button::after {
    content: "+";
    font-weight: var(--pf-weight-regular);
  }

  .pf-footer.has-js .pf-footer__column-title button[aria-expanded="true"]::after {
    content: "−";
  }

  .pf-footer.has-js .pf-footer__column-title:has(button[aria-expanded="false"]) + .pf-footer__list {
    display: none;
  }
}