/* Cartel de instalacion de la PWA */

.pwa-install{
    position: fixed;
    z-index: 100000;
    left: 60px;
    bottom: 20px;
    width: calc(100% - 80px);
    max-width: 470px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 44px 14px 14px;
    background: var(--grey-111, #111);
    border: 1px solid var(--grey-333, #333);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,.6);
    transform: translateY(calc(100% + 40px));
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
}
.pwa-install[hidden]{ display: none !important; }
.pwa-install.visible{ transform: translateY(0); opacity: 1; }

.pwa-install .pwa-install-icon{ flex: none; width: 52px; height: 52px; border-radius: 11px; }

.pwa-install .pwa-install-text{ flex: 1 1 auto; min-width: 0; }
.pwa-install .pwa-install-title{
    font-family: var(--poppins, "Poppins", sans-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--white, #fff);
    margin-bottom: 3px;
}
.pwa-install .pwa-install-subtitle{
    font-size: 13px;
    line-height: 1.4;
    color: var(--white-aaa, #aaa);
}
.pwa-install .pwa-install-subtitle[hidden]{ display: none !important; }
.pwa-install .pwa-install-subtitle strong{ color: var(--white-ddd, #ddd); font-weight: 600; }
.pwa-install .pwa-install-subtitle i{ font-size: 15px; color: var(--yellow, #f3b402); vertical-align: -2px; }

.pwa-install .pwa-install-actions{ flex: none; }
.pwa-install .pwa-install-accept{
    font-family: var(--poppins, "Poppins", sans-serif);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--black, #000);
    background: var(--yellow, #f3b402);
    border: 0;
    border-radius: 5px;
    padding: 11px 16px;
    cursor: pointer;
    transition: var(--transition, all .3s);
}
.pwa-install .pwa-install-accept:hover{ background: var(--yellow-100, #ffc830); }

.pwa-install .pwa-install-close{
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--grey-888, #888);
    font-size: 17px;
    cursor: pointer;
    transition: var(--transition, all .3s);
}
.pwa-install .pwa-install-close:hover{ background: var(--grey-222, #222); color: var(--white, #fff); }

/* En iOS no hay boton de instalar: mostramos las instrucciones y el cartel se va con la X */
.pwa-install.ios .pwa-install-actions{ display: none; }

@media screen and (max-width: 1024px){
    .pwa-install{
        left: 10px;
        right: 10px;
        width: auto;
        max-width: none;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
}

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