/*
 * Bloqueo en computador: la app solo funciona en celular.
 *
 * Se decide por el tipo de dispositivo, no por el ancho: con mouse o
 * trackpad (hover + puntero fino) es un computador, aunque la ventana sea
 * angosta. Celulares y tablets se usan con el dedo y nunca lo cumplen.
 * Todo dispositivo con pantalla táctil (any-pointer: coarse) queda
 * permitido por esta regla: así un iPad con teclado-trackpad o mouse no se
 * bloquea. Los computadores táctiles se cubren con la clase es-computador.
 *
 * La cargan las pantallas públicas (layout publico) y la del escáner
 * (ScannerBridge), que no usa app.css; por eso trae sus propios colores.
 * El escenario reproduce el marco de Figma (579,5 × 1081) escalado para
 * caber en la ventana.
 */
.bloqueo-desktop {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    @media not all and (any-pointer: coarse) {
        body.con-bloqueo > :not(.bloqueo-desktop) {
            display: none !important;
        }

        .bloqueo-desktop {
            display: flex;
        }
    }
}

/* Computadores con pantalla táctil (notebooks, 2 en 1, Chromebook): los
   marca partials/detectar-computador por sistema operativo. */
.es-computador body.con-bloqueo > :not(.bloqueo-desktop) {
    display: none !important;
}

.es-computador .bloqueo-desktop {
    display: flex;
}

.bloqueo-desktop {
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    /* En el escáner, por encima de la cámara y de la interfaz del dev. */
    z-index: 2147483647;
    overflow: hidden;
    --azul: #004fff;
    --negro: #000;
    --blanco: #fff;
    --fuente-titular: 'Anton', 'Arial Narrow', sans-serif;
    background: var(--azul);
    /* Cabe por alto y por ancho (ventanas angostas). */
    --u: min(calc(100vh / 1081), calc(100vw / 600), 1px);
}

.bloqueo-desktop__escena {
    position: relative;
    flex: none;
    width: calc(579.533 * var(--u));
    height: calc(1081 * var(--u));
}

.bloqueo-desktop__marco {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.bloqueo-desktop h1 {
    position: absolute;
    top: calc(248 * var(--u));
    left: calc(115.27 * var(--u));
    margin: 0;
    color: var(--negro);
    font-family: var(--fuente-titular);
    font-size: calc(65 * var(--u));
    font-weight: 400;
    line-height: calc(61.5 * var(--u));
    letter-spacing: calc(-1.3 * var(--u));
    white-space: nowrap;
    text-transform: uppercase;
}

.bloqueo-desktop h1 span {
    display: block;
}

.bloqueo-desktop h1 em {
    color: var(--blanco);
    font-style: normal;
}

.bloqueo-desktop__dispositivos {
    position: absolute;
    top: calc(479 * var(--u));
    left: calc(119.27 * var(--u));
    width: calc(348 * var(--u));
    height: calc(177 * var(--u));
    object-fit: cover;
}

.bloqueo-desktop__qr {
    position: absolute;
    top: calc(690 * var(--u));
    left: calc(210.27 * var(--u));
    width: calc(163 * var(--u));
    height: calc(163 * var(--u));
    padding: calc(12 * var(--u));
    background: var(--blanco);
}

.bloqueo-desktop__qr svg {
    display: block;
    width: 100%;
    height: 100%;
}