/* ==========================================================================
   Banner de atalho na tela inicial
   Views/Shared/Partials/_BannerAtalhoTelaInicial.cshtml

   CSS puro, sem passar pelo compilador SASS. Usa os tokens de tokens.css e a
   fonte de :root (--font-primary), então precisa ser carregado depois deles.
   ========================================================================== */

.banner-atalho {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(96vw, 520px);

    /* Acima de tudo o que fica fixo na tela: o menu inferior usa z-index 10
       (_nav-bar.sass) e o botão flutuante do WhatsApp da landing usa 100
       (home.sass). O banner é transitório e tem "X", então pode cobrir o
       WhatsApp enquanto está aberto — o contrário deixava o convite atrás de um
       botão permanente. Fica abaixo dos modais do Bootstrap (1055) e do overlay
       de loading de propósito. */
    z-index: 101;

    /* O rodapé das telas onde o mecânico mais fica já é ocupado: menu inferior
       (_MenuDemanda, _MenuFinanceiro) e botões flutuantes. A altura real do que
       está na tela é medida em atalhoTelaInicial.mjs e chega aqui como
       --altura-do-rodape-fixo; onde não há nada, o fallback 0px encosta o
       banner no rodapé. */
    bottom: calc(var(--altura-do-rodape-fixo, 0px) + 12px);

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;

    background-color: var(--cor-branca);
    border-radius: 16px;
    box-shadow: 0 12px 32px var(--cor-preta-opacidade-2);
    font-family: var(--font-primary);
}

/* O display: flex acima venceria o [hidden] do navegador, e o banner nasce
   escondido — tanto ele quanto as variantes de plataforma dentro dele. */
.banner-atalho[hidden],
.banner-atalho [hidden] {
    display: none;
}

.banner-atalho-icone {
    flex: 0 0 auto;
    border-radius: 10px;
}

.banner-atalho-conteudo {
    flex: 1 1 auto;
    min-width: 0;
}

.banner-atalho-titulo {
    margin: 0;
    color: var(--cor-roxa);
    font-weight: bold;
    line-height: 1.2;
}

.banner-atalho-texto {
    margin: 0;
    color: var(--cor-cinza);
    font-size: 13px;
    line-height: 1.3;
}

.banner-atalho-instalar {
    flex: 0 0 auto;
    background-color: var(--cor-roxa);
    border: none;
    border-radius: 8px;
    color: var(--cor-branca);
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: bold;
    padding: 8px 16px;

    &:hover {
        background-color: var(--cor-roxa-claro);
    }
}

.banner-atalho-dispensar {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--cor-cinza);
    cursor: pointer;
    font-size: var(--tamanho-padrao);
    line-height: 1;

    /* Um glifo de 16px com padding de 4px dava 24px de alvo — metade dos 44px
       que um dedo alcança com confiança. O convite é para quem trabalha de mão
       suja no celular, e a dispensa é definitiva: errar o "X" faz o toque
       parecer que não funcionou. */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 10px;
}

/* O banner que se oferece sozinho é coisa de aparelho de toque: no desktop o
   próprio navegador já mostra a instalação na barra de endereço.

   O corte é pelo TIPO DE PONTEIRO, não pela largura da viewport. Com o antigo
   `min-width: 835px` um iPhone Pro Max em paisagem (932px) caía na regra de
   desktop e o banner desaparecia justamente no aparelho que ele existe para
   atender. Ponteiro fino é mouse/trackpad; celular e tablet reportam `coarse`.

   Isso vale só para o convite que se abre sozinho: o item "Criar atalho" do
   menu continua no desktop, onde o Chrome também instala.

   E vale só para o banner que se ABRE SOZINHO. Quando ele é a resposta a um
   clique no "Criar atalho" (data-abertura="manual"), esconder era transformar o
   item num controle inerte no desktop: o único caminho que sobra ali, quando o
   Chrome ainda não ofereceu instalar, é a instrução que o banner carrega. */
@media (pointer: fine) {
    .banner-atalho:not([data-abertura="manual"]) {
        display: none;
    }
}