/* ═══════════════════════════════════════════════════════════════════════════════════════════
   «HAY MÁS ABAJO»: AVISO DE SCROLL EN MODALES Y ALERTAS
   ═══════════════════════════════════════════════════════════════════════════════════════════

   Cuando un modal no cabe se desplaza, pero nada lo dice: el contenido se corta a ras del borde
   inferior y parece que ahí se acaba. La enciende y la apaga public/js/mrx-scroll-modales.js:
   mientras el contenedor siga arriba y quede contenido por ver. En cuanto se empieza a bajar se
   apaga —la pista ya está dada, y a mitad de recorrido el círculo sólo tapa lo que hay debajo—.
   @see tests/Feature/ScrollModalesTest.php */

.mrx-mas-abajo {
    position: fixed;
    /* CENTRADA, que es donde se busca un «hay más abajo». Se probó corrida a la derecha para no
       tapar contenido y quedaba peor: en pantallas estrechas se salía de la tarjeta del modal y
       quedaba montada sobre lo que hay detrás. */
    left: 50%;
    bottom: calc(14px + var(--mrx-nav-movil-alto, 0px));
    transform: translate(-50%, 8px);
    z-index: 10000;              /* por encima de la tarjeta del modal y de las alertas */
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    /* Translúcida y con el fondo desenfocado: se ve que está y se puede pulsar, pero lo que
       queda debajo se sigue leyendo a través en vez de desaparecer. Antes era azul macizo con un
       aro blanco alrededor, y encima de un botón de color —«Descargar contrato»— lo recortaba.
       Se queda sólida al pasar por encima, que es cuando de verdad se va a pulsar. */
    background: rgba(28, 149, 218, .62);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px -4px rgba(16, 33, 44, .3);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.mrx-mas-abajo svg { width: 18px; height: 18px; display: block }
.mrx-mas-abajo:hover { background: rgb(28, 149, 218) }

.mrx-mas-abajo--se-ve {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* El que bota es el ICONO, no el botón. Animar el botón lo deja moviéndose sin parar, y un
   objetivo que no se está quieto es más difícil de acertar con el dedo —y directamente
   inalcanzable para Playwright, que espera a que el elemento se estabilice antes de pulsar—. */
.mrx-mas-abajo--se-ve svg { animation: mrxBota 1.6s ease-in-out infinite }

@keyframes mrxBota {
    0%, 100% { transform: translateY(0) }
    50%      { transform: translateY(4px) }
}
@media (prefers-reduced-motion: reduce) {
    .mrx-mas-abajo--se-ve svg { animation: none }
}

/* La barra nativa sobra donde ya avisa la flecha: es fea, y en móvil y en Mac ni siquiera se
   pinta hasta que estás arrastrando, así que tampoco avisaba de nada. El contenedor SIGUE
   desplazándose con la rueda, el dedo y el teclado: sólo se esconde la barra. */
.mrx-sin-barra { scrollbar-width: none; -ms-overflow-style: none }
.mrx-sin-barra::-webkit-scrollbar { width: 0; height: 0 }