/**
 * Aviso de instalación de la app (PWA).
 *
 * Sólo se ve en pantallas estrechas: por encima de 900px se oculta aunque el
 * JS lo haya destapado. La decisión no puede tomarse en PHP porque el HTML lo
 * sirve la caché de FlyingPress y se reparte igual a móvil y a escritorio.
 */

.mjr-app-instalar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Por encima del botón de "volver arriba" (z-index 99) y por debajo de
       cualquier modal (--z-modal: 500). */
    z-index: 320;
    background: #fff;
    border-top: 1px solid var(--color-gray-light, #ecf0f1);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12);
    font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    /* La franja del gesto de inicio en iPhone se come la parte de abajo. */
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform 0.28s ease-out;
}

.mjr-app-instalar[hidden] {
    display: none;
}

.mjr-app-instalar.esta-visible {
    transform: translateY(0);
}

.mjr-app-instalar-fila {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mjr-app-instalar-icono {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex: 0 0 auto;
    display: block;
}

.mjr-app-instalar-texto {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

.mjr-app-instalar-texto strong {
    display: block;
    font-size: var(--text-base, 1rem);
    font-weight: 700;
    color: var(--color-text, #212121);
    /* Nombres largos no deben empujar al botón fuera de la pantalla. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mjr-app-instalar-texto span {
    display: block;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-gray-medium, #7f8c8d);
}

.mjr-app-instalar-boton {
    flex: 0 0 auto;
    background: var(--color-blue, #2634ED);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 18px;
    font-family: inherit;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 700;
    cursor: pointer;
    /* Mínimo táctil recomendado. */
    min-height: 44px;
}

.mjr-app-instalar-boton:active {
    background: var(--color-blue-dark, #1a25d0);
}

.mjr-app-instalar-cerrar {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--color-gray-medium, #7f8c8d);
    font-size: 26px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    min-width: 32px;
    min-height: 44px;
}

.mjr-app-instalar-ayuda {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--color-gray-light, #ecf0f1);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text, #212121);
}

.mjr-app-instalar-ayuda[hidden] {
    display: none;
}

/* Lo que ya vive pegado abajo tiene que subirse, o el aviso lo tapa.
   La altura no es fija —en iOS crece al desplegar las instrucciones— así que la
   mide el JS y la publica en --mjr-app-instalar-alto. */

/* El botón de "volver arriba" se apoya en bottom:60px en móvil. */
body.mjr-app-instalar-abierto .scroll-to-top {
    bottom: calc(var(--mjr-app-instalar-alto, 0px) + 60px);
}

/* La barra de acciones de la ficha de negocio (single-perfil-main.css:2479,
   dentro de @media max-width:768px) es position:fixed con bottom:0 y z-index 99.
   Sin esto el aviso le cae encima y esconde "Llamar", "Cómo llegar" y la web:
   justo los botones por los que se paga. */
body.mjr-app-instalar-abierto .col-movil {
    bottom: var(--mjr-app-instalar-alto, 0px);
}

@media (min-width: 900px) {
    .mjr-app-instalar {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mjr-app-instalar {
        transition: none;
    }
}