/* ==========================================================================
   Aviso "Adicionar à tela de início" — barra fixa no rodapé, só no celular.
   Injetada via JS (public/js/pwa-install.js) quando faz sentido mostrá-la.
   ========================================================================== */
.pwa-install-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    padding-left: calc(var(--space-4) + env(safe-area-inset-left));
    padding-right: calc(var(--space-4) + env(safe-area-inset-right));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -10px 30px rgba(15, 23, 42, .12);
    transform: translateY(110%);
    transition: transform .32s cubic-bezier(.32, .72, 0, 1);
}

.pwa-install-banner.is-visible {
    transform: translateY(0);
}

@media (min-width: 768px) {
    .pwa-install-banner {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-install-banner {
        transition: none;
    }
}

.pwa-install-banner__icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
}

.pwa-install-banner__texto {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.pwa-install-banner__texto strong {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-ink-900);
}

.pwa-install-banner__texto span {
    font-size: var(--fs-xs);
    color: var(--color-ink-500);
    line-height: 1.4;
}

.pwa-install-banner__texto span i {
    color: var(--color-primary-600);
    font-size: .82rem;
}

.pwa-install-banner__acoes {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.pwa-install-banner__btn {
    white-space: nowrap;
}

.pwa-install-banner__fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-ink-400);
    font-size: .85rem;
    flex-shrink: 0;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.pwa-install-banner__fechar:hover {
    background: var(--color-bg);
    color: var(--color-ink-700);
}