/* Botón "Instalar la app" y su hoja de pasos (install_app.js). */
[data-install-app][hidden] {
    display: none !important;
}

/* Botón discreto de la pantalla de inicio de sesión. */
.app-install-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    margin-top: 0.75rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #8a4534;
    background: transparent;
    border: 1px solid #e7ddd9;
    border-radius: 0.5rem;
    cursor: pointer;
}

.app-install-link:hover {
    background: #fbf5f3;
}

.app-install-link:focus-visible {
    outline: 2px solid #8a4534;
    outline-offset: 2px;
}

/* Hoja con los pasos (cuando el navegador no ofrece instalar solo: iPhone y algunos Android). */
.app-install-help {
    width: min(26rem, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 14px;
    color: #1c1917;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(28, 25, 23, 0.28);
}

.app-install-help::backdrop {
    background: rgba(12, 14, 18, 0.55);
}

.app-install-panel {
    padding: 20px;
}

.app-install-panel h2 {
    margin: 0 0 12px;
    font-size: 1.0625rem;
    font-weight: 700;
}

.app-install-panel ol {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9375rem;
    line-height: 1.45;
}

.app-install-nota {
    margin: 14px 0 0;
    font-size: 0.8125rem;
    color: #6b7280;
}

.app-install-ok {
    width: 100%;
    min-height: 44px;
    margin-top: 16px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #ffffff;
    background: #8a4534;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
}

.app-install-ok:hover {
    background: #6e372a;
}

.app-install-ok:focus-visible {
    outline: 2px solid #1c1917;
    outline-offset: 2px;
}