/* Invitación a instalar la app (assets/app-install.js) y aviso de que no hay
   conexión (assets/app-offline.js).

   La invitación es una tira baja y estrecha, no una tarjeta: sale dos
   segundos y se va, así que no puede tapar ni un botón mientras está.
   En móvil se pega al borde y deja libre la barra inferior de navegación.

   Los colores salen de las variables del tema, para que en modo claro y en
   oscuro se vea como el resto del sitio y no como una pieza pegada. */
.app-aviso {
  position: fixed; z-index: 10050;
  right: 18px; bottom: calc(18px + env(safe-area-inset-bottom));
  max-width: min(420px, calc(100vw - 28px));
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card); color: var(--ink);
  font-size: 13px; line-height: 1.35;
  box-shadow: var(--shadow, 0 10px 30px rgba(7, 17, 32, .32));
  animation: appAvisoIn .26s ease;
}
.app-aviso.fuera { animation: appAvisoOut .25s ease forwards; }
.app-aviso-ico {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--gold); color: var(--bg); font-size: 15px;
}
.app-aviso-txt { flex: 1; min-width: 0; }
.app-aviso-txt strong { font-weight: 700; }
.app-aviso-btn {
  flex: 0 0 auto; border: 0; cursor: pointer;
  border-radius: 999px; padding: 6px 13px;
  background: var(--gold); color: var(--bg); font-size: 13px; font-weight: 600;
}
.app-aviso-btn:hover { filter: brightness(1.08); }
@keyframes appAvisoIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes appAvisoOut { to { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .app-aviso, .app-aviso.fuera { animation: none; }
}

/* En móvil la barra inferior de navegación ocupa el borde: el aviso sube. */
@media (max-width: 720px) {
  .app-aviso {
    left: 12px; right: 12px; max-width: none;
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
}
/* Con el visor de fotos abierto no se asoma nada. */
body.lb-open .app-aviso, body.lb-open .sin-red { display: none; }

/* Enlace permanente del pie: siempre a mano, nunca en medio.

   Va en su PROPIA línea. Como `inline-flex` se colocaba al lado de «Mapa del
   sitio», pegado a él y sin un solo píxel de separación, justo debajo de las
   banderas de países. `display:flex` lo baja a su renglón y `width:fit-content`
   evita que la píldora se estire de lado a lado. */
.app-pie {
  display: flex; width: fit-content;
  align-items: center; gap: 6px;
  margin: 14px 0 0; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line);
  color: inherit; text-decoration: none; font-size: 12px;
}
.app-pie:hover { border-color: var(--gold); }
.app-pie-ico { font-size: 13px; }

/* Aire alrededor de las banderas de países del pie: entre ellas, el texto de
   arriba y los enlaces de abajo no había apenas separación y todo el bloque
   se leía apelmazado. */
.aqp-site-footer .aqp-footer-flags { margin: 4px 0 14px; }
.aqp-site-footer > div > p { margin-bottom: 12px; }

/* Aviso de que no hay conexión (assets/app-offline.js). */
.sin-red {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 9000;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.sin-red i { width: 8px; height: 8px; border-radius: 50%; background: var(--bad, #c44a5d); }
.sin-red.vuelve i { background: var(--ok, #3d9a6a); }
@media (max-width: 720px) {
  .sin-red { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Mientras no hay red, lo que depende de la red se atenúa para que se note
   que está congelado y no que la web se rompió. */
html[data-offline] .notif-fab, html[data-offline] .chat-dock { opacity: .55; }
.app-aviso-sec { background: transparent; color: var(--muted, #6b7280); border: 1px solid var(--line); }
@media (max-width: 640px) {
  .app-aviso { left: 12px; right: 12px; max-width: none; bottom: calc(76px + env(safe-area-inset-bottom)); font-size: 12.5px; padding: 8px 10px; }
  .app-aviso-btn { padding: 6px 10px; font-size: 12px; }
}