/* Instalar como app: convite no rodapé e janela de instruções (pwa-install.js).
   Usa só tokens de tokens.css para acompanhar o tema escuro. */

[data-pwa-instalar][hidden],
.pwa-convite[hidden],
.pwa-janela[hidden],
.pwa-janela [hidden] {
    display: none !important;
}

.pwa-botao {
    border: 0;
    border-radius: var(--radius-md, 10px);
    background: var(--brand-500);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.55rem 1rem;
    cursor: pointer;
    white-space: nowrap;
}
.pwa-botao:hover { background: var(--brand-600); }

.pwa-fechar {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
}
.pwa-fechar:hover { background: var(--hover-surface, rgba(15, 23, 42, 0.06)); }

/* ---------- convite ---------- */
.pwa-convite {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--mobile-nav-height, 0px) + 12px + env(safe-area-inset-bottom, 0px));
    z-index: 1060;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem 0.75rem 0.85rem;
    background: var(--surface-card);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    font-family: var(--font-sans);
    animation: pwa-sobe 0.25s ease-out;
}
/* --mobile-nav-height já soma a área segura; sem a barra (login), soma aqui */
body:has(.mobile-menu) .pwa-convite { bottom: calc(var(--mobile-nav-height, 0px) + 12px); }
@media (min-width: 768px) {
    .pwa-convite { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
    body:has(.mobile-menu) .pwa-convite { bottom: 24px; }
}
.pwa-convite img { border-radius: 10px; flex-shrink: 0; }
.pwa-convite-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.pwa-convite-texto strong { font-size: 0.92rem; }
.pwa-convite-texto span { font-size: 0.8rem; color: var(--text-secondary); }

@keyframes pwa-sobe {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* ---------- janela de instruções ---------- */
.pwa-janela {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: var(--font-sans);
}
.pwa-janela-fundo { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
.pwa-janela-painel {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--surface-card);
    color: var(--text-primary);
    border-radius: 20px;
    padding: 1.5rem 1.25rem 1.25rem;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
}
@media (max-width: 575.98px) {
    /* No celular, folha que sobe de baixo, perto do polegar */
    .pwa-janela { align-items: flex-end; padding: 0; }
    .pwa-janela-painel {
        max-width: none;
        border-radius: 20px 20px 0 0;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
        animation: pwa-sobe 0.25s ease-out;
    }
}
.pwa-janela .pwa-fechar { position: absolute; top: 0.6rem; right: 0.6rem; }
.pwa-janela-cabeca { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.75rem; padding-right: 2rem; }
.pwa-janela-cabeca img { border-radius: 12px; }
.pwa-janela-cabeca h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
.pwa-intro, .pwa-rodape { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0 1rem; }
.pwa-intro strong, .pwa-rodape strong { color: var(--text-primary); }

.pwa-passos { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.pwa-passo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-page);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.45;
}
.pwa-passo-num {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.8rem;
}
.pwa-passo-texto { flex: 1; min-width: 0; }
.pwa-passo-icone { flex-shrink: 0; width: 2rem; height: 2rem; color: var(--text-primary); }
.pwa-passo-icone svg { width: 100%; height: 100%; }

.pwa-copiar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.pwa-copiar code {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0.5rem 0.65rem;
    background: var(--surface-page);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    color: var(--text-primary);
    user-select: all;
}

.pwa-botao-ok { width: 100%; padding: 0.75rem 1rem; }

/* Link "Instalar o app" da tela de login */
.pwa-link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}