/**
 * App instalável (hero-core 2.82.0): convite para instalar, aviso no pé da
 * tela, botão "App" no topo e o indicador de "puxar para atualizar".
 * A barra de baixo e a abertura são do tema (pwa-app.css).
 */
.hap, .hap-aviso {
    --hap-sup: #FFFFFF;
    --hap-txt: #14171E;
    --hap-mut: #4A505A;
    --hap-linha: #E1E3E7;
    --hap-suave: #F2F3F5;
    --hap-lima: #A6DF00;
    --hap-lima-bg: #F2FAD9;
    --hap-lima-ink: #3D5200;
    font-family: var(--font-body, 'Outfit'), system-ui, sans-serif;
}
[data-theme="dark"] .hap {
    --hap-sup: #16191F;
    --hap-txt: #F2F3F5;
    --hap-mut: #B4B9C1;
    --hap-linha: #2A2F38;
    --hap-suave: #20242C;
    --hap-lima-bg: rgba(166, 223, 0, .14);
    --hap-lima-ink: #C6F24A;
}
.hap[hidden], .hap [hidden], .hap-aviso[hidden] { display: none !important; }
.hap { position: fixed; inset: 0; z-index: 100001; }
.hap-fundo { position: absolute; inset: 0; background: rgba(6, 8, 12, .55); }

.hap-folha {
    position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box;
    max-height: 92vh; overflow-y: auto;
    background: var(--hap-sup); color: var(--hap-txt);
    border-radius: 22px 22px 0 0;
    padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 18px;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .35);
    animation: hapSobe .24s cubic-bezier(.2, .8, .3, 1);
}
@media (min-width: 640px) {
    .hap-folha { left: 50%; right: auto; width: 440px; bottom: 24px; border-radius: 22px; transform: translateX(-50%); animation: none; }
}
.hap-folha--ios { left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); border-radius: 20px; padding: 20px; gap: 16px; }
@keyframes hapSobe { from { transform: translateY(40px); opacity: .4; } }
.hap-alca { align-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--hap-linha); }
.hap-app { display: flex; align-items: center; gap: 14px; }
.hap-app > span { display: flex; flex-direction: column; gap: 2px; }
.hap-app b { font-size: 18px; }
.hap-app small { font-size: 14px; color: var(--hap-mut); }
.hap-marca { width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0; object-fit: cover; }
.hap-folha--ios .hap-marca { width: 52px; height: 52px; border-radius: 13px; }
.hap-marca--letra { background: var(--hap-lima); color: #14171E; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; }
.hap-titulo { margin: 0; font-family: var(--font-display, 'League Spartan'), sans-serif; font-size: 26px; line-height: 1.05; font-weight: 800; color: var(--hap-txt); }
.hap-folha--ios .hap-titulo { font-size: 22px; }
.hap-texto { margin: 0; font-size: 15px; line-height: 1.45; color: var(--hap-mut); }
.hap-vant { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.hap-vant li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.hap-vant__ico { width: 36px; height: 36px; border-radius: 10px; background: var(--hap-lima-bg); color: var(--hap-lima-ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hap-acoes { display: flex; flex-direction: column; gap: 8px; }
.hap-nota { font-size: 13px; color: var(--hap-mut); text-align: center; line-height: 1.4; }
.hap-passos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.hap-passos li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--hap-suave); font-size: 15px; }
.hap-passos li > b { width: 28px; height: 28px; border-radius: 50%; background: var(--hap-txt); color: var(--hap-sup); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.hap-passos li > span { flex-grow: 1; }
.hap-passos li > i { display: inline-flex; }
.hap-azul { color: #0A84FF; }
.hap-seta { position: fixed; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom)); margin-left: -20px; animation: hapPula 1.2s ease-in-out infinite; }
@keyframes hapPula { 50% { transform: translateY(6px); } }

.hap-btn {
    font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 18px; border-radius: var(--r-btn, 8px); border: 0;
    font-size: 16px; font-weight: 800; cursor: pointer; text-decoration: none;
}
.hap-btn:focus-visible { outline: 3px solid var(--hap-lima); outline-offset: 2px; }
.hap-btn--lima { background: var(--hap-lima); color: #14171E; min-height: 56px; font-size: 17px; }
.hap-btn--lima:hover { background: #B5EA14; color: #14171E; }
.hap-btn--texto { background: transparent; color: var(--hap-mut); min-height: 48px; font-weight: 700; }
.hap-btn--claro { background: var(--hap-sup); color: var(--hap-txt); border: 1px solid var(--hap-linha); min-height: 48px; }
.hap-btn--peq { min-height: 40px; padding: 0 14px; font-size: 14px; }

.hap-qr {
    position: fixed; right: 24px; bottom: 24px; width: 360px; box-sizing: border-box;
    display: flex; align-items: center; gap: 14px; padding: 16px 40px 16px 16px;
    background: var(--hap-sup); color: var(--hap-txt); border: 1px solid var(--hap-linha);
    border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
}
.hap[data-qual="qr"] .hap-fundo { display: none; }
.hap[data-qual="qr"] { inset: auto; }
.hap-qr svg { flex-shrink: 0; background: #FFFFFF; border-radius: 8px; padding: 6px; }
.hap-qr span { display: flex; flex-direction: column; gap: 4px; }
.hap-qr b { font-size: 16px; }
.hap-qr small { font-size: 13px; color: var(--hap-mut); line-height: 1.4; }
.hap-qr__x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--hap-mut); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

/* Aviso no pé (versão nova, avisos, app instalado) */
.hap-aviso {
    position: fixed; left: 12px; right: 12px; z-index: 100000;
    bottom: calc(16px + env(safe-area-inset-bottom));
    max-width: 520px; margin: 0 auto; box-sizing: border-box;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 12px 12px 16px; border-radius: 14px;
    background: #14171E; color: #FFFFFF; box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
}
html.hero-appmode .hap-aviso { bottom: calc(86px + env(safe-area-inset-bottom)); }
.hap-aviso__txt { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.hap-aviso__txt b { font-size: 15px; }
.hap-aviso__txt small { font-size: 13px; color: #C9CDD4; }

/* Botão "App" no topo e item no menu */
.hap-topo {
    font: inherit; display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 10px; border-radius: var(--r-btn, 8px);
    border: 1px solid var(--card-border, #C7CBD2); background: transparent; color: inherit;
    font-size: 13px; font-weight: 700; cursor: pointer;
}
@media (min-width: 1025px) { .hap-topo { display: none; } }
.hap-menu-item { list-style: none; }
.hap-menu-item a { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; background: #14171E; color: #FFFFFF !important; text-decoration: none; }
.hap-menu-item small { font-size: 13px; color: #C9CDD4; font-weight: 500; }
@media (min-width: 1025px) { .hap-menu-item { display: none; } }

/* Puxar para atualizar (dentro do app) */
.hap-ptr {
    position: fixed; top: 8px; left: 50%; z-index: 100000; width: 36px; height: 36px;
    transform: translate(-50%, 0); border-radius: 50%; background: #FFFFFF;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.hap-ptr::after {
    content: ''; position: absolute; inset: 9px; border-radius: 50%;
    border: 3px solid #C7CBD2; border-top-color: #14171E;
}
.hap-ptr.is-pronto::after { border-color: var(--hap-lima, #A6DF00); border-top-color: #14171E; }
.hap-ptr.is-girando::after { animation: hapGira .7s linear infinite; }
@keyframes hapGira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .hap-folha, .hap-seta, .hap-ptr.is-girando::after { animation: none; }
}