/*
 * BARRA DE NAVEGACIÓN INFERIOR — móvil y tablet.
 *
 * Se sirve desde public/ y NO pasa por el build de Vite, igual que chip-desglose.css y
 * datatables-paginacion.css. No es pereza: las clases nuevas de Tailwind solo existen si
 * alguien recuerda reconstruir public/build, y una barra de navegación que se queda sin
 * estilos es una fila de texto suelto encima del footer en todas las páginas de la app.
 *
 * La hoja la enlaza el propio partial `plantillas/navbar_movil.blade.php`, no el layout: si
 * la barra no se pinta (checkout, presupuestos, firma) tampoco se define
 * --mrx-nav-movil-alto, y los flotantes que la leen se quedan donde estaban.
 *
 * Tema: solo claro. tailwind.config.js usa darkMode:'class' y la app nunca añade `.dark`,
 * así que un @media (prefers-color-scheme: dark) aquí pintaría la barra en negro sobre una
 * página blanca. Es exactamente el fallo que documenta partials/tema_claro.blade.php.
 */

:root {
    /* Duplicado en App\Support\NavegacionMovil::ALTO_PX — NavbarMovilTest comprueba que
       los dos números siguen siendo el mismo. */
    --mrx-nav-movil-alto: 64px;
    --mrx-nav-azul: #1C95DA;
    --mrx-nav-gris: #6b7280;
    --mrx-nav-rojo: #ef4444;
}

/* El hueco que la barra le roba a la página. Sin esto, el último bloque del footer y
   cualquier botón al final del contenido quedan debajo de la barra y no se pueden pulsar. */
body {
    padding-bottom: calc(var(--mrx-nav-movil-alto) + env(safe-area-inset-bottom, 0px));
}

.mrx-nav-movil {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Por debajo de los modales (z-50), del loader (z-50) y de los banners (z-101), y a la
       altura del header (z-40): la barra es navegación, no una capa por encima de todo. */
    z-index: 40;
    display: flex;
    align-items: stretch;
    height: calc(var(--mrx-nav-movil-alto) + env(safe-area-inset-bottom, 0px));
    /* El área segura del notch se paga con padding, no con alto útil: los iconos no pueden
       acabar debajo de la barra de gestos del iPhone. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
}

/* ESCRIBIENDO: la barra se aparta. El script la marca en cuanto un campo de texto coge el
   foco, que en un móvil es lo mismo que decir "el teclado está abierto". Sin esto, en Android
   la barra se come una fila de la conversación y en iOS —donde el teclado no redimensiona el
   layout viewport— se queda flotando a media pantalla, encima de los mensajes.
   Se baja en vez de ocultarse para que al cerrar el teclado vuelva deslizándose y no de
   golpe; `visibility` la saca además del árbol de accesibilidad y del alcance del dedo. */
.mrx-nav-movil--escribiendo {
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.18s ease, visibility 0.18s ease;
}

.mrx-nav-movil {
    transition: transform 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
    .mrx-nav-movil,
    .mrx-nav-movil--escribiendo {
        transition: none;
    }
}

/* Mientras se escribe, el hueco que la barra le reservaba a la página se devuelve. En el chat
   es lo que hace que el campo de texto suba pegado al teclado en lugar de quedarse con 64px
   de vacío debajo. */
body.mrx-escribiendo {
    padding-bottom: 0;
}

.mrx-nav-movil__slot {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* 44px es el mínimo táctil de Apple; con cinco huecos y el alto de la barra sobra. */
    min-height: 44px;
    padding: 6px 2px 4px;
    border: 0;
    background: transparent;
    color: var(--mrx-nav-gris);
    font: inherit;
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* El hover, SOLO donde hay ratón. En una pantalla táctil el navegador deja el :hover pegado
   al último elemento tocado, así que tras abrir la hoja de "Más" ese hueco se quedaba azul
   —el mismo azul del hueco activo— y parecían dos pestañas seleccionadas a la vez. */
@media (hover: hover) {
    .mrx-nav-movil__slot:hover {
        color: var(--mrx-nav-azul);
    }
}

.mrx-nav-movil__slot:focus-visible {
    color: var(--mrx-nav-azul);
}

.mrx-nav-movil__slot:focus-visible {
    outline: 2px solid var(--mrx-nav-azul);
    outline-offset: -2px;
    border-radius: 8px;
}

.mrx-nav-movil__slot--activo {
    color: var(--mrx-nav-azul);
    font-weight: 600;
}

/* La pastilla de la pestaña activa. Va arriba, pegada al borde superior de la barra: en una
   barra tan baja, subrayar por debajo se come el área segura. */
.mrx-nav-movil__slot--activo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--mrx-nav-azul);
}

.mrx-nav-movil__icono {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hasta DOS líneas, y el hueco de las dos reservado siempre.
   "Mis alquileres" mide ~91px a 11px de Comfortaa y en un hueco de 390/5 caben 74: en una
   sola línea se quedaba en "Mis alquile…". Con `min-height` de dos líneas en TODOS los
   rótulos —aunque los demás sean de una palabra— los iconos siguen alineados entre sí; sin
   ella, el hueco que parte en dos empuja su icono hacia arriba y la fila se descuadra. */
.mrx-nav-movil__etiqueta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    min-height: 2.1em;
    overflow: hidden;
    overflow-wrap: break-word;
    line-height: 1.05;
    text-align: center;
}

/* EL BOTÓN CENTRAL. Ninguno de los dos navega: abren una hoja. Sobresale por encima de la
   barra para que se lea como una acción y no como una pestaña más.

   Lo usan dos huecos distintos según quién mire: el "+" de "Crear" en la barra del proveedor
   y la lupa de "Alquilar" en la del cliente, que es su equivalente —lo único que esa barra
   ofrece HACER, frente a cuatro destinos a los que ir—.

   Su RÓTULO va en el gris de los demás, no en el azul de marca. Lo tuvo, y el azul es
   justamente el color de "estás aquí": "Crear" salía siempre resaltado, y cuando además
   había un hueco activo de verdad parecían dos pestañas seleccionadas a la vez. Quien
   distingue a este botón es el círculo, no el texto. */
.mrx-nav-movil__slot--destacado {
    color: var(--mrx-nav-gris);
}

/* ...SALVO CUANDO EL DESTACADO ES DE VERDAD LA PÁGINA EN LA QUE ESTÁS. Le pasa a la lupa del
   cliente en /alquiler y nunca al "+" del proveedor, que no es un destino. Aquí el azul no
   confunde con nada: es el único hueco marcado.

   Y la pastilla de arriba se quita, porque en un destacado no dice nada: cae dentro del
   círculo —que sobresale 22px por encima del borde de la barra— y encima del mismo azul, así
   que es invisible. El "estás aquí" lo da un aro alrededor del círculo.

   `content: none` y no `display: none`: con `display` el pseudoelemento sigue existiendo con
   su `content: ""`, y la forma de preguntar "¿qué huecos llevan pastilla?" es justamente
   `getComputedStyle(slot, '::before').content !== 'none'` (así lo hace el E2E). Escondiéndola
   con display, el hueco seguiría contando como marcado para quien lo mire desde fuera. */
.mrx-nav-movil__slot--destacado.mrx-nav-movil__slot--activo {
    color: var(--mrx-nav-azul);
}

.mrx-nav-movil__slot--destacado.mrx-nav-movil__slot--activo::before {
    content: none;
}

.mrx-nav-movil__slot--destacado.mrx-nav-movil__slot--activo .mrx-nav-movil__icono {
    box-shadow: 0 6px 16px rgba(28, 149, 218, 0.45), 0 0 0 4px rgba(28, 149, 218, 0.22);
}

/* CON SU HOJA ABIERTA, el hueco se marca — pero en gris oscuro y SIN la pastilla de arriba.
   La pastilla y el azul significan "esta es la página en la que estás"; una hoja abierta es
   otra cosa, y usar la misma señal para las dos deja la barra diciendo dos verdades. */
.mrx-nav-movil__slot[aria-expanded="true"] {
    color: #334155;
    font-weight: 600;
}

.mrx-nav-movil__slot--destacado .mrx-nav-movil__icono {
    width: 48px;
    height: 48px;
    margin-top: -22px;
    padding: 12px;
    border-radius: 9999px;
    background: var(--mrx-nav-azul);
    color: #ffffff;
    stroke: #ffffff;
    stroke-width: 2.2;
    box-shadow: 0 6px 16px rgba(28, 149, 218, 0.45);
}

.mrx-nav-movil__slot--destacado .mrx-nav-movil__etiqueta {
    margin-top: -2px;
}

/* CON UNA HOJA ABIERTA, LA BARRA SUBE POR ENCIMA DEL VELO.
   El botón central sobresale 22px por encima de la barra, y el velo empieza justo ahí: con la
   barra en z-40 y el velo en z-45, el panel le cortaba la mitad de arriba al círculo y quedaba
   un semicírculo raro asomando. Subiéndola por encima, el botón se ve entero y la barra sigue
   respondiendo —que es lo que ya buscaba que el velo terminase en ella—. */
body.mrx-hoja-abierta .mrx-nav-movil {
    z-index: 46;
}

/* CON SU HOJA ABIERTA, EL CÍRCULO SE APAGA: ese botón ya no lleva a ninguna parte, cierra.
   Va después del aro de "estás aquí" a propósito —misma especificidad, gana el último—: con
   la hoja abierta manda el estado de la hoja, no el de la página que hay detrás. */
.mrx-nav-movil__slot--destacado .mrx-nav-movil__icono {
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.mrx-nav-movil__slot--destacado[aria-expanded="true"] .mrx-nav-movil__icono {
    background: #64748b;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.45);
}

/* Y EL "+" ADEMÁS GIRA A "×". Solo el "+": la marca la pone el blade cuando el icono es el
   de sumar. La lupa comparte círculo pero no puede girar —una lupa a 45º no significa
   "cerrar", solo parece torcida—, y ahí basta con que se apague. */
.mrx-nav-movil__slot--aspa[aria-expanded="true"] .mrx-nav-movil__icono {
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .mrx-nav-movil__slot--destacado .mrx-nav-movil__icono {
        transition: none;
    }
}

/* Badges. El número se recorta a "9+" en el marcado, no aquí: un contador de tres cifras
   ensancharía el hueco y descuadraría la fila entera. */
.mrx-nav-movil__badge {
    position: absolute;
    top: 2px;
    left: 50%;
    margin-left: 4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9999px;
    background: var(--mrx-nav-rojo);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.mrx-nav-movil__badge[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------
   Hoja de acciones (la que abren el "+" y "Más")
   --------------------------------------------------------------------------- */

.mrx-hoja {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* El velo se para justo ENCIMA de la barra, no la tapa. Con `inset: 0` la barra quedaba
       debajo del velo y, con una hoja abierta, tocar el otro hueco no abría la otra hoja:
       el primer toque solo cerraba. Dejando la barra fuera del velo se salta de "Crear" a
       "Más" —o a Chats— de un toque, que es como se comporta una barra de pestañas. */
    bottom: calc(var(--mrx-nav-movil-alto) + env(safe-area-inset-bottom, 0px));
    z-index: 45;
    display: flex;
    align-items: flex-end;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.mrx-hoja.mrx-hoja--abierta {
    opacity: 1;
    visibility: visible;
}

/* El `display:flex` de arriba GANA al `display:none` que el navegador aplica por defecto a
   [hidden] —una regla de autor siempre gana a la hoja del user-agent—, así que el atributo
   hay que respetarlo a mano. Sin esto la hoja está siempre en el DOM ocupando la pantalla:
   invisible, pero tragándose los toques de toda la página. */
.mrx-hoja[hidden] {
    display: none;
}

.mrx-hoja__panel {
    width: 100%;
    /* Relativo al VELO (que ya descuenta la barra), no a la ventana. Con `80vh` el panel
       se quedaba corto justo por el alto de la barra: en una ventana de 410px pedía 401px,
       se le daban 328 y la última acción quedaba fuera mientras el velo tenía 346 sin usar.
       Con `100%` aprovecha todo el hueco disponible y solo hace scroll cuando de verdad no
       cabe. Los 8px son el aire que deja ver que hay página detrás. */
    max-height: calc(100% - 8px);
    overflow-y: auto;
    /* El scroll del panel no se propaga a la página de detrás al llegar al final. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Sin área segura abajo: el velo termina en la barra y es ella la que la paga. */
    padding: 8px 12px 16px;
    border-radius: 18px 18px 0 0;
    background: #ffffff;
    transform: translateY(100%);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.mrx-hoja--abierta .mrx-hoja__panel {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .mrx-hoja,
    .mrx-hoja__panel {
        transition: none;
    }
}

/* EL ASA. Ya no es decorativa: se toca para cerrar y se arrastra para descartar. Lo era, y
   era mentira — un asa es la señal universal de "tira de mí", así que la gente lo intentaba,
   no pasaba nada y la hoja parecía atascada. El área táctil se agranda con un ::after
   invisible: 4px de alto no se aciertan con el dedo. */
.mrx-hoja__agarre {
    /* Flex y no block: con `display:block` y sin padding propio, los márgenes verticales del
       asa se colapsan HACIA FUERA del botón y este se queda con 0px de alto. Se ve la rayita
       pero no hay nada que tocar — que es exactamente el síntoma de "el asa no hace nada".
       Un contenedor flex no colapsa los márgenes de sus hijos. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 0;
    border: 0;
    background: transparent;
    cursor: grab;
    /* El navegador no debe robar el gesto vertical para hacer scroll: lo gestionamos nosotros. */
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.mrx-hoja__agarre:active {
    cursor: grabbing;
}

.mrx-hoja__asa {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 4px;
    border-radius: 9999px;
    background: #d1d5db;
    transition: background-color 0.15s ease;
}

.mrx-hoja__agarre:hover .mrx-hoja__asa,
.mrx-hoja__agarre:focus-visible .mrx-hoja__asa {
    background: #94a3b8;
}

/* Zona de toque de 44px centrada en el asa, sin ocupar espacio visible. */
.mrx-hoja__asa::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* Mientras se arrastra no hay transición: el panel tiene que seguir al dedo. */
.mrx-hoja__panel--arrastrando {
    transition: none;
}

.mrx-hoja__titulo {
    margin: 0 8px 8px;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mrx-hoja__accion {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    /* 11px y no 12: con cinco acciones son 10px menos de panel, que es lo que decide si
       en una ventana baja hay que hacer scroll o no. */
    padding: 11px 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.mrx-hoja__accion:hover,
.mrx-hoja__accion:focus-visible {
    background: #f3f4f6;
}

.mrx-hoja__accion .mrx-nav-movil__icono {
    width: 20px;
    height: 20px;
    color: var(--mrx-nav-azul);
}

.mrx-hoja__detalle {
    display: block;
    margin-top: 2px;
    color: #6b7280;
    font-size: 12px;
}

/* Cerrar sesión: en rojo y separado del resto. Es la única entrada de la hoja que no lleva a
   ninguna pantalla sino que termina la sesión, y va la última, justo donde el pulgar cae. */
.mrx-hoja__accion--peligro {
    margin-top: 6px;
    border-top: 1px solid #f1f5f9;
    border-radius: 0 0 12px 12px;
    color: #dc2626;
    font-weight: 600;
}

.mrx-hoja__accion--peligro .mrx-nav-movil__icono {
    color: #dc2626;
}

.mrx-hoja__accion--peligro:hover,
.mrx-hoja__accion--peligro:focus-visible {
    background: #fef2f2;
}

.mrx-hoja__badge {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 9999px;
    background: var(--mrx-nav-rojo);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* Con la hoja abierta la página de detrás no debe moverse: en iOS el scroll se "escapa" al
   body y la hoja se queda flotando sobre contenido que ya no es el que se estaba mirando. */
body.mrx-hoja-abierta {
    overflow: hidden;
}

/* TODO LO QUE FLOTA EN UNA ESQUINA SE QUITA DE EN MEDIO MIENTRAS LA HOJA ESTÁ ABIERTA.
   El velo de la hoja va en z-index 45, y estos botones viven entre 50 y 1051: sin esto se
   quedan nítidos ENCIMA del panel. Ya ha pasado tres veces —los botones de "¿Te llamamos?"
   sobre la hoja de acciones, "Mostrar Mapa" sobre el botón de buscar del catálogo y el de
   "Guía" sobre las opciones de "Más"—, así que en vez de ir añadiendo ids a la lista hay una
   clase: cualquier botón flotante de esquina que se añada a partir de ahora lleva
   `mrx-flotante-esquina` y se aparta solo.

   Los dos ids de "¿Te llamamos?" siguen aquí porque ese partial se toca desde otro sitio y su
   marcado no lleva la clase. No hace falta !important: `body.mrx-hoja-abierta #ll-launcher`
   es más específico que el `#ll-launcher` a secas, aunque aquel venga después.

   `mrx-filtros-catalogo-abiertos` es la MISMA situación con el panel de filtros del catálogo,
   que por debajo de lg se abre como hoja pero no es la de la barra: sin esto, "Mostrar Mapa" y
   el chat se pintaban sobre "SuperRenter" y sobre el último "Ordenar por". Lo pone y lo quita
   articulos.js. Va con su propia clase y no reutiliza `mrx-hoja-abierta` porque aquella hace
   más cosas —congela el scroll y convierte el "+" de la barra en "×"—, y ese "×" cerraría una
   hoja que no es la que está abierta. */
body.mrx-hoja-abierta .mrx-flotante-esquina,
body.mrx-hoja-abierta #ll-launcher,
body.mrx-hoja-abierta .ll-popup,
body.mrx-filtros-catalogo-abiertos .mrx-flotante-esquina,
body.mrx-filtros-catalogo-abiertos #ll-launcher,
body.mrx-filtros-catalogo-abiertos .ll-popup {
    opacity: 0;
    pointer-events: none;
}

/* La transición evita el parpadeo al abrir y cerrar la hoja de un toque. */
.mrx-flotante-esquina {
    transition: opacity 0.18s ease;
}

/* EL PANEL DE CONVERSACIÓN DE /chats ya no se dimensiona aquí. Aquí hubo una regla que le
   descontaba los 64px de la barra a su `h-[85vh]`, con la advertencia de que eso no arreglaba
   el desbordamiento que la página ya tenía —el campo de escribir quedaba fuera de la pantalla
   por el alto del panel más la cabecera y el banner— sino que evitaba empeorarlo.

   Ese desbordamiento ya está arreglado, y el alto entero vive donde le toca: en
   public/css/chats.css, que calcula el hueco real y sigue restando esta misma
   --mrx-nav-movil-alto. Dos reglas de id para el mismo elemento en dos hojas distintas —y esta
   se enlaza después, así que ganaba— era pedir que el arreglo no llegase. */

/* Pantallas MUY BAJAS (móvil en horizontal, ventana de escritorio pequeña, teclado abierto).
   Con cinco acciones la hoja pide ~390px y por debajo de 480px de alto no caben, así que la
   última quedaba fuera. Antes que dejarla detrás de un scroll que no se ve —que es como se
   lee "se corta"—, la hoja se queda solo con los rótulos: el subtítulo explica, pero no es
   lo que se viene a pulsar. Recupera ~100px y vuelve a caber entera. */
@media (max-height: 480px) {
    .mrx-hoja__detalle {
        display: none;
    }

    .mrx-hoja__accion {
        padding: 9px 8px;
    }

    .mrx-hoja__titulo {
        margin-bottom: 4px;
    }

    .mrx-hoja__asa {
        margin: 4px auto 6px;
    }
}

/* ---------------------------------------------------------------------------
   El buscador de la hoja de "Alquilar"
   --------------------------------------------------------------------------- */

/* LA HOJA NO SE MUEVE AL ESCRIBIR, y esto costó encontrarlo.
   Aquí hubo un `body.mrx-escribiendo .mrx-hoja { bottom: 0 }` para recuperar los 64px que la
   hoja le reserva a la barra cuando la barra ya se ha apartado por el teclado. El problema es
   CUÁNDO pasa: enfocar el desplegable de provincia dispara `mrx-escribiendo` en el mousedown,
   la hoja entera baja 64px, y para cuando llega el mouseup el dedo ya no está sobre el campo
   sino sobre la lista que se acaba de abrir. Resultado: tocar "Dónde" elegía una provincia al
   azar —Barcelona, la que cayera bajo el dedo—.
   La franja de 64px que queda con el teclado abierto la tapa el propio teclado; una selección
   fantasma al primer toque no la arregla nadie. */

/* El panel de esta hoja NO recorta. Es la excepción a `.mrx-hoja__panel { overflow-y: auto }`:
   son cuatro campos y un botón, nunca necesita scroll, y con el recorte activo lo que se abre
   HACIA ARRIBA y se sale del panel —el desplegable de selectize, el calendario de "Cuándo"— se
   cortaba por el borde superior.

   `position: relative` es para el calendario: se le pasa este panel como `container` para que
   no calcule su sitio contra el <body> (ver el porqué en navbar_movil.blade.php), y air-datepicker
   se coloca en absoluto. El panel ya establece bloque contenedor por su `transform`, pero eso es
   un efecto colateral de la animación: el día que la animación cambie, esto sigue en pie. */
#mrx-hoja-buscar .mrx-hoja__panel {
    position: relative;
    overflow: visible;
}

.mrx-buscar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 8px 4px;
}

.mrx-buscar__etiqueta {
    display: block;
    margin-bottom: 4px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}

/* "— opcional". Los otros tres campos también lo son, pero solo este cuesta dos toques y un
   calendario: sin la marca, la hoja parece pedir fechas para poder buscar. */
.mrx-buscar__opcional {
    font-weight: 500;
    color: #9ca3af;
}

/* DESDE / HASTA, uno al lado del otro. `minmax(0, 1fr)` y no `1fr` a secas: el tamaño mínimo
   automático de una pista de rejilla es el contenido, así que con `1fr` los dos campos se
   ensanchan hasta lo que mida su placeholder y la fila se sale de la hoja. */
.mrx-buscar__fechas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

/* El calendario no necesita z-index propio: vive DENTRO del panel, y el panel abre contexto de
   apilamiento por su `transform`, así que el 100 que trae air-datepicker de serie ya lo pone por
   encima de todo lo que hay en la hoja. Lo que sí necesita es no salirse de ancho en una pantalla
   estrecha, que su `--adp-width` son 246px fijos. */
#mrx-hoja-buscar .air-datepicker {
    max-width: calc(100vw - 24px);
}

/* Los tres campos comparten caja. El selector va cualificado por ELEMENTO (`input.`, `select.`)
   a propósito: selectize copia las clases del original al div que lo envuelve, y una clase
   suelta pintaría el borde y el fondo dos veces, una caja dentro de otra. Con `input.`/`select.`
   el div del wrapper no entra, y el aspecto se lo da `.selectize-input` unas líneas más abajo. */
input.mrx-buscar__control,
select.mrx-buscar__control,
.mrx-buscar .selectize-input {
    width: 100%;
    box-sizing: border-box;
    /* 44px es el mínimo táctil; los 16px de letra NO son estética: por debajo de 16 iOS hace
       zoom al enfocar el campo y deja la página descuadrada al salir. */
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
    font: inherit;
    font-size: 16px;
    line-height: 1.2;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

input.mrx-buscar__control:focus,
select.mrx-buscar__control:focus,
.mrx-buscar .selectize-input.focus {
    border-color: var(--mrx-nav-azul);
    box-shadow: 0 0 0 3px rgba(28, 149, 218, 0.15);
}

/* La flecha del desplegable, que `appearance: none` se lleva por delante. Va en data: URI
   para no depender de una petición más ni de la hoja de iconos. El `select.` es el camino sin
   JavaScript; `.selectize-input` el normal. */
select.mrx-buscar__control,
.mrx-buscar .selectize-input {
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
}

/* La punta de flecha que selectize dibuja por su cuenta: sobra, ya está la de arriba. */
.mrx-buscar .selectize-control.single .selectize-input::after {
    display: none;
}

/* El input de teclear de selectize hereda el tamaño para que no salte al enfocar. */
.mrx-buscar .selectize-input input {
    font-size: 16px;
    color: #111827;
}

/* EL DESPLEGABLE SE ABRE HACIA ARRIBA. La hoja está pegada al borde inferior y sus campos
   caen en los últimos 250px de pantalla: hacia abajo la lista se metería bajo la barra y,
   con el teclado abierto para escribir "hue", debajo del teclado. Hacia arriba tiene toda la
   página por delante. Selectize no lo hace solo, pero al ir dentro del control basta CSS. */
.mrx-buscar .selectize-dropdown {
    top: auto !important;
    bottom: calc(100% + 4px);
    border-radius: 10px;
    border: 1px solid #d1d5db;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.mrx-buscar .selectize-dropdown-content {
    max-height: 46vh;
}

.mrx-buscar .selectize-dropdown .option {
    padding: 11px 12px;
    font-size: 15px;
}

.mrx-buscar__enviar {
    margin-top: 2px;
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    background: var(--mrx-nav-azul);
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.mrx-buscar__enviar:hover,
.mrx-buscar__enviar:focus-visible {
    background: #1580bb;
}

/* Con la ventana muy baja (móvil en horizontal) el mismo criterio que la hoja de acciones:
   se sacrifican los rótulos de los campos antes que dejar el botón detrás de un scroll. */
@media (max-height: 480px) {
    .mrx-buscar {
        gap: 7px;
    }

    .mrx-buscar__etiqueta {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Escritorio: la barra no existe
   --------------------------------------------------------------------------- */

/* 1024px = el breakpoint `lg` de Tailwind, el mismo en el que el header cambia la
   hamburguesa por el menú completo. Por debajo (móvil Y tablet) manda la barra. */
@media (min-width: 1024px) {
    :root {
        /* A 0 antes que `display:none` a propósito: así el padding del body y los
           flotantes que leen la variable vuelven solos a su sitio. */
        --mrx-nav-movil-alto: 0px;
    }

    .mrx-nav-movil,
    .mrx-hoja {
        display: none;
    }
}