/* ============================================================================
   Cloudflare Turnstile — sólo el acomodo del widget.

   Archivo propio a propósito: sartori.css es la hoja compartida de todo el
   sistema y esto no tiene por qué vivir ahí. Se carga sólo en las páginas que
   muestran el widget (lo mete turnstile_helper.php junto al primer widget).

   Lo único que resuelve este archivo es que el widget no rompa nada: el
   recuadro de Cloudflare mide 300x65 px fijos y estos formularios los usan
   pacientes mayores desde el celular. En una pantalla de 320 px, 300 px de
   ancho más el padding de la tarjeta se desbordan, aparece scroll horizontal y
   el botón de enviar se corre de lugar.
   ============================================================================ */

.turnstile-campo {
    /* El aire de abajo es lo que separa el widget del botón de enviar. Sin esto
       quedan pegados y el dedo toca cualquiera de los dos. */
    margin: 4px 0 18px;
    /* Si el iframe de Cloudflare no entra, se recorta acá adentro y no empuja la
       página entera hacia el costado. */
    max-width: 100%;
    overflow: hidden;
}

.turnstile-campo > .cf-turnstile {
    display: block;
    /* Reserva el alto del widget desde el primer pintado. Sin esto, la tarjeta
       pega un salto cuando Cloudflare termina de cargar y el botón se mueve
       justo cuando la persona iba a tocarlo. */
    min-height: 65px;
}

.turnstile-campo iframe {
    max-width: 100%;
}

.turnstile-nota {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    /* --tinta-2 es el gris de texto secundario de sartori.css; el color de
       reserva está por si este archivo se usa en una pantalla que no la cargue. */
    color: var(--tinta-2, #5A6172);
}

/* ----------------------------------------------------------------------------
   Celulares angostos: el widget se achica en vez de desbordar.

   Los números no son a ojo. El recuadro de Cloudflare mide 300 px y el ancho
   que le queda adentro de cada tarjeta se calcula así:

     Portal   .portal-angosto es `100% - clamp(36px, 6vw, 128px)` y .tarjeta
              mete 14 px de padding por lado en celular:
                 320 px de pantalla -> 320 - 36 - 28 = 256 px útiles.
     Login    .login-caja es `max-width: 410px` con 34 px de padding por lado,
              adentro de .login-fondo que tiene 20 px:
                 375 px de pantalla -> 335 - 68 = 267 px útiles
                 320 px de pantalla -> 280 - 68 = 212 px útiles

   O sea: el login es la caja MÁS angosta de las dos y necesita su propio
   escalón. Sin esto, en un iPhone SE el widget se corta al medio (.login-caja
   tiene `overflow:hidden`, así que no se ve que falta: se ve roto).

   El origen arriba a la izquierda lo deja alineado con los campos de al lado, y
   la altura se baja junto con la escala para que no quede un hueco blanco
   debajo (el `transform` no cambia el espacio que el elemento ocupa).
   ---------------------------------------------------------------------------- */

/* Portal y cualquier otra pantalla. 300 x 0.84 = 252 px, entra en los 256 de
   un celular de 320 px. */
@media (max-width: 359px) {
    .turnstile-campo > .cf-turnstile {
        transform: scale(0.84);
        transform-origin: left top;
        min-height: 55px;
        height: 55px;
    }
}

/* El login, que es más angosto. 300 x 0.82 = 246 px. */
@media (max-width: 409px) {
    .login-caja .turnstile-campo > .cf-turnstile {
        transform: scale(0.82);
        transform-origin: left top;
        min-height: 54px;
        height: 54px;
    }
}

/* El login en pantallas de 320-355 px. 300 x 0.70 = 210 px, entra en los 212
   que deja un iPhone SE. */
@media (max-width: 355px) {
    .login-caja .turnstile-campo > .cf-turnstile {
        transform: scale(0.70);
        transform-origin: left top;
        min-height: 46px;
        height: 46px;
    }
}