/*
 | ---------------------------------------------------------------------------
 | CONVITE DE INSTALAÇÃO DO APLICATIVO (PWA)
 | ---------------------------------------------------------------------------
 |
 | Arquivo próprio, de propósito. Duas razões:
 |
 |  1. Este convite aparece na home (CSS solto) E dentro do painel (Tailwind
 |     compilado pelo Vite). Nenhuma das duas máquinas tem `node_modules`, então
 |     classe nova de Tailwind simplesmente não existe no pacote publicado —
 |     seria estilo que não pinta nada em produção.
 |
 |  2. Mexer no `home-real.css` para isto seria misturar o layout da página com
 |     uma peça que vive por cima dele. Aqui, se um dia o convite sair, some um
 |     arquivo e mais nada.
 |
 | Todo nome começa com `pwa-` e toda variável com `--pwa-`, para não esbarrar
 | em nada que já exista nas duas casas.
 */

.pwa-veu,
.pwa-barra {
    --pwa-azul: #0649a0;
    --pwa-azul-escuro: #003b86;
    --pwa-amarelo: #ffda16;
    --pwa-verde: #4c9638;
    --pwa-texto: #15315e;
    --pwa-suave: #5b6c82;
    --pwa-linha: #e6ebf0;
    --pwa-raio: 16px;

    font-family: Inter, Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/*
 | ⚠️ Esta regra não é decoração: sem ela o convite nasce aberto.
 |
 | O atributo `hidden` do HTML vale `display:none`, mas isso vem da folha de
 | estilo do navegador, que perde de qualquer seletor de classe. Como logo
 | abaixo `.pwa-veu` recebe `display:flex`, o `hidden` seria ignorado e o modal
 | apareceria na primeira pintura de toda página — inclusive para quem já
 | instalou. Repetir a regra com a classe junto devolve a vitória a ele.
 */
.pwa-veu[hidden],
.pwa-barra[hidden],
.pwa-botao[hidden],
.pwa-passos[hidden] {
    display: none !important;
}

/*
 | O botão "Baixar o app" do cabeçalho nasce com `hidden` e mora em outro
 | arquivo (o header da home). Pela mesma razão de cima, qualquer
 | `display:flex` que ele receba lá venceria o `hidden` — e apareceria um botão
 | de instalar para quem já instalou. Esta linha garante que só o JavaScript
 | daqui decide quando ele aparece.
 */
[data-instalar-app][hidden] {
    display: none !important;
}

/* ==========================================================================
   O CONVITE GRANDE — só no primeiro acesso
   ========================================================================== */

.pwa-veu {
    position: fixed;
    inset: 0;
    /* Acima de tudo: o cabeçalho da home usa z-index 100 e o menu do painel 40. */
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(4, 22, 56, 0.62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.pwa-veu[data-visivel='1'] {
    opacity: 1;
}

.pwa-modal {
    width: min(100%, 380px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 20, 60, 0.38);
    text-align: center;
    padding: 26px 24px 22px;
    transform: translateY(14px) scale(0.97);
    transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.pwa-veu[data-visivel='1'] .pwa-modal {
    transform: none;
}

/* O ícone do app dentro do convite: é a mesma arte que vai ficar na tela do
   celular, e mostrar ela aqui é metade da explicação do que o botão faz. */
.pwa-modal-icone {
    width: 92px;
    height: 92px;
    margin: 0 auto 16px;
    display: block;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(0, 39, 96, 0.28);
}

.pwa-modal-titulo {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--pwa-texto);
}

.pwa-modal-texto {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--pwa-suave);
}

.pwa-acoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pwa-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--pwa-raio);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.15s ease;
}

.pwa-botao:active {
    transform: scale(0.97);
}

.pwa-botao-sim {
    background: var(--pwa-verde);
    color: #fff;
    box-shadow: 0 8px 20px rgba(76, 150, 56, 0.34);
}

.pwa-botao-sim:hover {
    filter: brightness(1.06);
}

.pwa-botao-nao {
    background: transparent;
    color: var(--pwa-suave);
    min-height: 42px;
    font-size: 14.5px;
    font-weight: 600;
}

.pwa-botao-nao:hover {
    color: var(--pwa-texto);
}

/* As instruções do iPhone. O Safari não tem botão de instalar: ali o convite
   vira um passo a passo, e por isso ganha caixa própria em vez de botão. */
.pwa-passos {
    margin: 0 0 18px;
    padding: 14px 16px;
    list-style: none;
    text-align: left;
    background: #f4f7fb;
    border: 1px solid var(--pwa-linha);
    border-radius: var(--pwa-raio);
    counter-reset: passo;
}

.pwa-passos li {
    position: relative;
    padding-left: 30px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--pwa-texto);
}

.pwa-passos li + li {
    margin-top: 10px;
}

.pwa-passos li::before {
    counter-increment: passo;
    content: counter(passo);
    position: absolute;
    left: 0;
    top: 0;
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pwa-azul);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.pwa-passos b {
    color: var(--pwa-azul);
}

/* ==========================================================================
   A BARRINHA DISCRETA — dos acessos seguintes em diante, para quem recusou
   ========================================================================== */

.pwa-barra {
    position: fixed;
    left: 12px;
    right: 12px;
    /* `env(safe-area-inset-bottom)` por causa da barra do iPhone; e no painel
       do cliente existe um menu fixo embaixo, daí os 12px de folga extra. */
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 9980;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 460px;
    margin-inline: auto;
    padding: 10px 10px 10px 12px;
    background: linear-gradient(135deg, var(--pwa-azul) 0%, var(--pwa-azul-escuro) 100%);
    border-radius: var(--pwa-raio);
    box-shadow: 0 12px 30px rgba(0, 26, 70, 0.34);
    color: #fff;
    transform: translateY(140%);
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.pwa-barra[data-visivel='1'] {
    transform: none;
}

/* Na área do cliente existe um menu fixo colado no rodapé. Sem esta folga a
   barrinha cairia em cima dele e esconderia justamente o botão de "Minhas
   cartelas" — o JS põe esta classe quando encontra um menu desses na página. */
.pwa-barra--acima {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

.pwa-barra-icone {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: block;
    border-radius: 10px;
}

.pwa-barra-texto {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    line-height: 1.25;
}

.pwa-barra-titulo {
    display: block;
    font-size: 14px;
    font-weight: 800;
}

.pwa-barra-sub {
    display: block;
    font-size: 11.5px;
    opacity: 0.82;
}

.pwa-barra-instalar {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--pwa-amarelo);
    color: #15315e;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.pwa-barra-instalar:active {
    transform: scale(0.95);
}

.pwa-barra-fechar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.pwa-barra-fechar:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Telas estreitas: o texto de apoio some antes do botão, que é o que importa. */
@media (max-width: 380px) {
    .pwa-barra-sub {
        display: none;
    }

    .pwa-barra-instalar {
        padding: 8px 11px;
    }
}

/* Quem pediu menos animação no sistema não leva salto nenhum. */
@media (prefers-reduced-motion: reduce) {
    .pwa-veu,
    .pwa-modal,
    .pwa-barra {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   A ABERTURA ANIMADA (28/09/2026) — só no aplicativo instalado.
   O fundo é transparente de propósito: por trás está o `html.pwa-abrindo`,
   pintado com a cor de fundo do PWA, a mesma da tela de abertura do Android.
--------------------------------------------------------------------------- */
.pwa-abertura {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .35s ease;
}

/* ⚠️ Sem esta regra o `display: flex` acima vence o `hidden` do HTML, e a
   camada fica invisível POR CIMA do site inteiro, engolindo todo clique
   (aconteceu em 28/09, no navegador comum, onde ela nunca é removida). */
.pwa-abertura[hidden] {
    display: none;
}

.pwa-abertura[data-saindo="1"] {
    opacity: 0;
    pointer-events: none;
}

.pwa-abertura video,
.pwa-abertura img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 480px);
    height: auto;
    display: block;
    transition: opacity .45s ease;
}

/* A emenda com a abertura do Android (29–30/09/2026): o ícone da tela inicial
   no MESMO tamanho da abertura do sistema (240 dp) e o vídeo invisível; quando
   o vídeo começa a tocar, um se dissolve no outro. O vídeo tem largura FIXA
   (345 px) porque o logo dele precisa bater com o do ícone, que o Android
   desenha sempre a 240 dp, qualquer que seja a tela. Medidas em pwa.blade. */
.pwa-abertura img.pwa-abertura-icone {
    width: 240px;
    height: 240px;
}

.pwa-abertura video {
    width: 345px;
    max-width: none;
}

.pwa-abertura video {
    opacity: 0;
}

.pwa-abertura[data-tocando="1"] .pwa-abertura-icone {
    opacity: 0;
}

.pwa-abertura[data-tocando="1"] video {
    opacity: 1;
}