/* ============================================================
   SHELL DE TELA CHEIA — widgets avançados (micro-SaaS)
   Reutilizável por Finanças, Tarefas, Treino, Estudos, Bíblia.
   Estruturado para mobile (100dvh, header sticky, safe-area) e desktop.
   ============================================================ */
.zfs {
    position: fixed;
    inset: 0;
    /* acima da UI do app (nav, fab) e ABAIXO dos modais (.modal-overlay = 100000),
       p/ que confirmações e o modal de transação apareçam por cima da tela cheia */
    z-index: 90000;
    background: var(--bg-app);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s;
    will-change: transform;
}
.zfs.show { transform: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .zfs { transition: none; } }

/* barra superior */
.zfs-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    padding: 0 14px;
    padding-top: env(safe-area-inset-top, 0);
    box-sizing: content-box;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 2;
}
.zfs-back {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 12px; border: none; cursor: pointer;
    background: rgba(13, 13, 13, 0.05); color: var(--text-main);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; transition: background 0.18s;
}
.zfs-back:hover { background: rgba(13, 13, 13, 0.1); }
.zfs-titlewrap { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.zfs-ico {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
    background: var(--accent-soft, rgba(13, 13, 13, 0.06)); color: var(--accent, var(--text-main));
}
.zfs-title {
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.18rem;
    color: var(--text-main); margin: 0; letter-spacing: -0.4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zfs-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.zfs-act {
    height: 40px; padding: 0 12px; border-radius: 12px; border: none; cursor: pointer;
    background: rgba(13, 13, 13, 0.05); color: var(--text-main);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.85rem;
    display: inline-flex; align-items: center; gap: 7px; transition: background 0.18s;
}
.zfs-act:hover { background: rgba(13, 13, 13, 0.1); }
.zfs-act.icon-only { width: 40px; padding: 0; justify-content: center; }

/* corpo rolável */
.zfs-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px calc(28px + env(safe-area-inset-bottom, 0));
}
/* no desktop, conteúdo centralizado com largura máxima confortável */
.zfs-inner { width: 100%; max-width: 100%; margin: 0 auto; }

@media (min-width: 900px) {
    .zfs-bar { padding-left: 24px; padding-right: 24px; }
    .zfs-body { padding: 28px 24px 40px; }
}

/* FAB padrão dentro da tela cheia (ex.: adicionar transação/tarefa) */
.zfs-fab {
    position: absolute;
    right: 18px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0));
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--accent, var(--text-main)); color: var(--accent-fg, #fff);
    font-size: 1.3rem; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    display: flex; align-items: center; justify-content: center; z-index: 5;
    transition: transform 0.14s ease, filter 0.18s ease;
}
.zfs-fab:hover { filter: brightness(1.05); }
.zfs-fab:active { transform: scale(0.94); }

/* ============================================================
   v7 "QUIET PREMIUM" — escala e pesos contidos
   ============================================================ */
.zfs-title { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }
.zfs-act { font-weight: 600; font-size: 0.8rem; }
.zfs-ico { width: 32px; height: 32px; border-radius: 10px; font-size: 0.88rem; }
.zfs-back { border-radius: 12px; }