/* Lázarus · PWA: aviso de sin conexión y de versión nueva. */

.offline-banner {
  margin-bottom: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--warn);
  border-left-width: 3px;
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--text);
  font-size: var(--size-caption);
}

.update-banner {
  position: fixed;
  right: var(--space-m);
  bottom: calc(var(--space-m) + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--accent);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--text);
  font-size: var(--size-caption);
}

/* ── Página sin conexión (estática, guardada por el service worker) ── */
.offline {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--space-l) var(--space-m);
}

.offline__card {
  display: grid;
  gap: var(--space-m);
  width: min(100%, 28rem);
  padding: var(--space-xl) var(--space-l);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-l);
  background: var(--surface);
}

.offline__card h1 {
  font-size: var(--size-title);
  font-weight: var(--weight-title);
  line-height: 1.2;
}

.offline__card p {
  color: var(--text-2);
}

.offline__hint {
  font-size: var(--size-caption);
}

.offline .logo {
  width: 2.5rem;
  height: 2.5rem;
}

.offline .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  padding: 0.5625rem var(--space-sm);
  border: 1px solid var(--accent);
  border-radius: var(--radius-m);
  color: var(--text);
  text-decoration: none;
}

.push__result--error {
  color: var(--error);
}