/* Sin conexión: página independiente y aviso dentro de la app */

.offline-page { display: grid; place-items: center; padding: 24px 16px; }
.offline-card {
  width: min(100%, 420px); display: grid; justify-items: center; gap: 14px; text-align: center;
  padding: 34px 26px 28px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.offline-card .brand { margin-bottom: 6px; }
.offline-ico { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--surface-3); color: var(--text); }
.offline-ico .icon { width: 28px; height: 28px; }
.offline-card h1 { font-size: 26px; }
.offline-card p { color: var(--muted); max-width: 340px; }
.offline-card .btn { margin-top: 6px; min-width: 160px; }
.offline-card .offline-note { font-size: 13px; }

/* Aviso al perder la red con la app abierta */
:root { --offline-h: calc(38px + env(safe-area-inset-top)); }
.offline-banner {
  position: fixed; z-index: 95; top: 0; left: 0; right: 0; min-height: var(--offline-h);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: env(safe-area-inset-top) 16px 0; text-align: center; font-size: 13.5px; font-weight: 600;
  background: linear-gradient(rgba(255, 176, 32, 0.18), rgba(255, 176, 32, 0.18)), var(--surface);
  border-bottom: 1px solid rgba(255, 176, 32, 0.45); color: var(--amber);
}
.offline-banner[hidden] { display: none; }
.offline-banner .icon { width: 18px; height: 18px; }
:root[data-theme='light'] .offline-banner { color: #9A6200; }
.is-offline body { padding-top: var(--offline-h); }
.is-offline .sidebar { top: var(--offline-h); }

/* Sin red no hay datos frescos: los importes se ocultan hasta que vuelva */
.is-offline .amt { filter: blur(9px); user-select: none; }
.is-offline .axis-amt { visibility: hidden; }
.is-offline .lines-box svg { pointer-events: none; }

@media (max-width: 560px) {
  :root { --offline-h: calc(54px + env(safe-area-inset-top)); }
  .offline-banner { font-size: 13px; padding-bottom: 6px; }
}