/* ============================================================================
Momix — panel "Más filtros" de la vidriera pública. UNA sola hoja para las DOS
pantallas (home y explorador), a pedido de Máximo (2026-08-24): "los filtros
tienen que ser iguales porque la lógica debe estar en el mismo lugar".
Antes eran dos: `.mx-ff-*` en home.css sobre superficie oscura y `.ex-drawer-*`
/ `.ex-frow` en global.css sobre superficie clara. Mismas cajas, dos veces, con
dos paletas escritas a mano — y cada retoque había que hacerlo dos veces.
Cómo conviven las dos paletas sin duplicar una regla: TODO el color sale de
tokens `--mxf-*`. Acá se declaran los valores por defecto (superficie oscura,
que es la de la home) sobre `:root`, y cada pantalla los pisa donde manda:
· home.css → `body { --mxf-… }` (una sola paleta, va sobre foto)
· global.css → `.ex-body { --mxf-… }` y ya está: los `--x-*` del explorador
cambian solos en `.ex-body.dark`, así que el drawer sigue el tema sin una
segunda declaración.
`body`/`.ex-body` ganan sobre `:root` por elemento (el token se resuelve en el
elemento donde está declarado, y el panel hereda del body), no por orden — así
que no importa en qué orden se enlacen las hojas.
El comportamiento vive en assets/filters.js y el markup en
components/public_filters.php.
============================================================================ */
:root {
--mxf-surface:#0F172A; /* fondo del panel */
--mxf-surface-2:rgba(8,17,31,.35); /* fondo de campos y hover */
--mxf-border:rgba(148,163,184,.25);
--mxf-border-soft:rgba(148,163,184,.18);
--mxf-tx:#F1F5F9; /* texto fuerte */
--mxf-tx2:#CBD5E1; /* texto normal */
--mxf-tx3:#94A3B8; /* etiquetas y notas */
--mxf-on-bg:#12362D; /* chip elegido */
--mxf-on-tx:#7CEAD7;
--mxf-track:#5E6D82; /* riel apagado del slider */
--mxf-thumb-bd:#0F172A; /* el pulgar lleva el color del fondo como borde */
--mxf-shadow:-18px 0 44px rgba(8,17,31,.55);
--mxf-foot-shadow:0 -8px 20px rgba(8,17,31,.35);
}
/* El verde y el navy NO son tokens de tema: un acento que cambia de color con el tema deja de ser
un acento. Son los mismos en las dos pantallas y en los dos temas. */
.mxf-panel { --mxf-acc:#22D3A6; --mxf-acc-h:#14B8A6; --mxf-btn-tx:#08111F; }
/* ── El drawer ───────────────────────────────────────────────────────────────────────────────
Pegado al borde DERECHO de la ventana. `position:fixed` se mide contra el viewport salvo que un
ancestro tenga transform/filter/backdrop-filter, y la barra de búsqueda de la home tiene
backdrop-filter: por eso el panel cuelga del en las dos pantallas (ver el comentario de
components/public_filters.php). Anclado al viewport el desborde no puede pasar por construcción.
`visibility:hidden` cuando está cerrado, no solo el translate: un panel corrido fuera de pantalla
SIGUE siendo tabulable, así que el teclado se metía en filtros invisibles (axe: aria-hidden-focus).
La transición de visibility se demora para que la salida siga animando. */
.mxf-panel { position:fixed; top:0; right:0; bottom:0; z-index:70; width:min(430px,92vw);
display:flex; flex-direction:column; gap:14px;
background:var(--mxf-surface); border-left:1px solid var(--mxf-border); padding:20px;
box-shadow:var(--mxf-shadow); color:var(--mxf-tx2);
font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;
transform:translateX(108%); visibility:hidden;
transition:transform .5s cubic-bezier(.3,.7,.2,1), visibility 0s linear .5s; }
.mxf-panel.is-open { transform:none; visibility:visible;
transition:transform .5s cubic-bezier(.3,.7,.2,1), visibility 0s; }
.mxf-panel button { font-family:inherit; }
.mxf-dim { position:fixed; inset:0; z-index:69; background:rgba(8,17,31,.45);
backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
opacity:0; pointer-events:none; transition:opacity .35s; }
.mxf-dim.is-on { opacity:1; pointer-events:auto; }
@media (prefers-reduced-motion:reduce) { .mxf-panel, .mxf-dim { transition:none; } }
/* ── Cabecera: título · orden · cerrar ── */
.mxf-head { flex:none; display:flex; align-items:center; gap:8px; }
.mxf-title { font:600 16px 'Outfit',sans-serif; color:var(--mxf-tx); }
.mxf-x { width:36px; height:36px; flex:none; border-radius:999px; border:1px solid var(--mxf-border);
background:none; color:var(--mxf-tx2); cursor:pointer; font:400 15px 'Manrope',sans-serif;
display:inline-flex; align-items:center; justify-content:center; transition:background .2s; }
.mxf-x:hover { background:var(--mxf-surface-2); }
.mxf-sortwrap { position:relative; flex:none; margin-left:auto; }
.mxf-sort { width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center;
justify-content:center; border:1px solid var(--mxf-border); background:none;
color:var(--mxf-tx); cursor:pointer; transition:background .2s; }
.mxf-sort:hover { background:var(--mxf-surface-2); }
/* Este desplegable sale HACIA ABAJO: está arriba del panel y ahí es donde hay lugar. */
.mxf-drop { position:absolute; top:calc(100% + 8px); right:0; z-index:9; width:232px; max-width:76vw;
background:var(--mxf-surface); border:1px solid var(--mxf-border); border-radius:14px; padding:8px;
box-shadow:0 10px 24px rgba(8,17,31,.5); }
.mxf-drop[hidden] { display:none; } /* [hidden] pierde por cascada contra un display propio */
.mxf-drop-item { display:flex; align-items:center; width:100%; min-height:40px; padding:0 12px;
border:none; border-radius:9px; background:none; cursor:pointer; text-align:left;
font:400 13.5px 'Manrope',sans-serif; color:var(--mxf-tx2); }
.mxf-drop-item:hover { background:var(--mxf-surface-2); color:var(--mxf-tx); }
.mxf-drop-item.on { background:var(--mxf-on-bg); color:var(--mxf-on-tx); font-weight:600; }
/* ── Cuerpo: el único que scrollea ── */
.mxf-body { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.mxf-row { display:flex; flex-direction:column; gap:8px; }
.mxf-row[hidden] { display:none; } /* la fila de Terreno se esconde según el tipo elegido */
.mxf-lbl { display:block; font:600 10.5px 'Outfit',sans-serif; letter-spacing:.12em;
text-transform:uppercase; color:var(--mxf-tx3); }
.mxf-note { font:400 11.5px 'Manrope',sans-serif; color:var(--mxf-tx3); }
/* ── Chips ── */
.mxf-chips { display:flex; gap:6px; flex-wrap:wrap; }
.mxf-chip { height:34px; padding:0 13px; border-radius:999px; border:1px solid var(--mxf-border);
background:none; color:var(--mxf-tx2); font:500 12.5px 'Manrope',sans-serif; cursor:pointer;
display:inline-flex; align-items:center; transition:border-color .15s, background .15s, color .15s; }
.mxf-chip:hover { border-color:var(--mxf-acc); color:var(--mxf-tx); }
.mxf-chip.on { border:1.5px solid var(--mxf-acc); background:var(--mxf-on-bg); color:var(--mxf-on-tx); font-weight:600; }
/* Comodidades: 61 chips en 6 grupos. Plegados por defecto — abiertos serían un muro que empuja el
resto del panel fuera de la pantalla. El número dice cuántas hay adentro sin tener que abrir. */
.mxf-grp { border:1px solid var(--mxf-border-soft); border-radius:10px; margin-bottom:6px; }
.mxf-grp > summary { list-style:none; cursor:pointer; padding:10px 12px; display:flex; align-items:center;
justify-content:space-between; gap:8px; font:500 13px 'Manrope',sans-serif; color:var(--mxf-tx2); }
.mxf-grp > summary::-webkit-details-marker { display:none; }
.mxf-grp[open] > summary { color:var(--mxf-tx); border-bottom:1px solid var(--mxf-border-soft); }
.mxf-grp-n { font:600 11px 'Outfit',sans-serif; color:var(--mxf-tx3); background:var(--mxf-surface-2);
border-radius:999px; padding:2px 8px; }
.mxf-grp .mxf-chips { padding:10px 12px; }
/* ── Rangos y selects ──
`min-width:0` en los campos: un ítem de flex tiene `min-width:auto` implícito y no se achica sin
eso — es la trampa que ya desbordó dos pantallas en mobile. */
.mxf-range { display:flex; gap:8px; flex-wrap:wrap; }
.mxf-range input, .mxf-range select { flex:1; min-width:0; height:40px; border-radius:9px; padding:0 12px;
border:1px solid var(--mxf-border); background:var(--mxf-surface-2); color:var(--mxf-tx);
font:400 13px 'Manrope',sans-serif; outline:none; }
.mxf-range input:focus, .mxf-range select:focus { border-color:var(--mxf-acc); }
/* 118px y no 96: con 96 la opción más larga ("Cualquiera" / "Any") salía cortada a media palabra.
El ancho lo tiene que garantizar el CSS y no el largo de la traducción. */
.mxf-range .mxf-cur { flex:0 0 118px; }
.mxf-range .mxf-sel { flex:1 1 30%; min-width:110px; }
/* ── Pie: pegado abajo, los dos botones en una fila ── */
.mxf-foot { flex:none; display:flex; align-items:center; gap:10px; padding-top:14px;
border-top:1px solid var(--mxf-border); box-shadow:var(--mxf-foot-shadow); }
.mxf-apply { flex:1; height:48px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
border:none; border-radius:11px; background:var(--mxf-acc); color:var(--mxf-btn-tx);
font:600 14.5px 'Outfit',sans-serif; cursor:pointer; transition:background .2s; }
.mxf-apply:hover { background:var(--mxf-acc-h); }
.mxf-apply:active { transform:scale(.98); }
.mxf-clear { flex:none; height:48px; padding:0 14px; border:none; border-radius:11px; background:none;
color:var(--mxf-tx3); font:500 13px 'Manrope',sans-serif; cursor:pointer;
display:inline-flex; align-items:center; transition:color .2s, background .2s; }
.mxf-clear:hover { color:var(--mxf-tx); background:var(--mxf-surface-2); }
/* ── Precio con distribución (histograma + doble pulgar) ─────────────────────────────────────
Referencia: la barra de presupuesto de Booking, en el idioma de Momix. Las barras las pinta
assets/histogram.js con `el.style.height` — la CSP prohíbe `style=""` en el HTML servido, no la
CSSOM. Las clases `.mx-hist-*` las escribe ese archivo, así que se conservan tal cual.
Detalle que hace que se entienda sin explicación: las barras DENTRO del rango van encendidas y
las de afuera apagadas, así el gráfico responde mientras se arrastra. */
.mxf-hist { display:flex; flex-direction:column; gap:6px; margin-bottom:4px; }
.mxf-hist[hidden] { display:none; }
.mxf-hist .mx-hist-cap { font:600 14px 'Outfit',sans-serif; color:var(--mxf-tx); font-variant-numeric:tabular-nums; }
.mxf-hist .mx-hist-bars { display:flex; align-items:flex-end; gap:2px; height:64px; padding:0 2px; }
.mxf-hist .mx-hist-b { flex:1; min-width:0; border-radius:3px 3px 0 0; background:var(--mxf-acc);
transition:background .25s, opacity .25s, height .35s cubic-bezier(.3,.7,.2,1); }
.mxf-hist .mx-hist-b.is-out { background:var(--mxf-track); opacity:.5; }
/* Dos superpuestos: los nativos traen teclado y lectura de pantalla gratis; un
par de
arrastrables no. Se les saca el fondo y se dibuja el riel abajo, para que los dos
pulgares vivan sobre la misma línea. */
.mxf-hist .mx-hist-slider { position:relative; height:28px; }
.mxf-hist .mx-hist-track, .mxf-hist .mx-hist-fill { position:absolute; top:12px; height:4px; border-radius:999px; pointer-events:none; }
.mxf-hist .mx-hist-track { left:0; right:0; background:var(--mxf-track); opacity:.55; }
.mxf-hist .mx-hist-fill { background:var(--mxf-acc); }
.mxf-hist .mx-hist-slider input[type="range"] { position:absolute; inset:0; width:100%; height:28px; margin:0;
-webkit-appearance:none; appearance:none; background:none; pointer-events:none; }
.mxf-hist .mx-hist-slider input[type="range"]:focus-visible { outline:2px solid var(--mxf-on-tx); outline-offset:3px; border-radius:8px; }
/* pointer-events solo en el pulgar: si el input entero los capturara, el de arriba taparía al de
abajo y uno de los dos extremos quedaría imposible de agarrar. */
.mxf-hist .mx-hist-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; pointer-events:auto;
width:20px; height:20px; border-radius:999px; background:var(--mxf-acc); border:3px solid var(--mxf-thumb-bd);
box-shadow:0 2px 8px rgba(8,17,31,.4); cursor:grab; transition:transform .15s; }
.mxf-hist .mx-hist-slider input[type="range"]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.15); }
.mxf-hist .mx-hist-slider input[type="range"]::-moz-range-thumb { pointer-events:auto;
width:20px; height:20px; border-radius:999px; background:var(--mxf-acc); border:3px solid var(--mxf-thumb-bd);
box-shadow:0 2px 8px rgba(8,17,31,.4); cursor:grab; }
/* ── Táctil ──
44px mínimo en todo control operable (estándar del proyecto), y 16px de letra en los campos: con
menos, iOS Safari zoomea solo al enfocar y deja la página corrida de costado. */
@media (pointer:coarse) {
.mxf-range input, .mxf-range select { font-size:16px; min-height:44px; }
.mxf-chip, .mxf-drop-item { min-height:44px; }
.mxf-x, .mxf-sort { width:44px; height:44px; }
.mxf-hist .mx-hist-slider input[type="range"]::-webkit-slider-thumb { width:26px; height:26px; }
}
/* Cartel de "sin distribución" y el botón para soltar el precio. La nota va apagada y en cursiva
para que no se confunda con el rango real, que es el mismo nodo cuando SÍ hay datos. */
.mx-hist-cap.is-nota { font:400 12.5px 'Manrope',sans-serif; color:var(--mxf-tx3, #94A3B8); font-style:italic; }
.mx-hist-soltar { align-self:flex-start; min-height:36px; padding:0 12px; border-radius:9px;
border:1px solid var(--mxf-bd, rgba(148,163,184,.3)); background:none;
color:var(--mxf-ac, #22D3A6); font:600 12.5px 'Manrope',sans-serif; cursor:pointer; }
.mx-hist-soltar[hidden] { display:none; }
@media (pointer:coarse) { .mx-hist-soltar { min-height:44px; } }
/* ── Modo alerta del panel (2026-08-25) ──────────────────────────────────────────────────────
La campana abre ESTE panel en vez de un modal con su propio juego reducido de filtros. Solo
cambia el pie: aparece la frecuencia y el botón de aplicar se reemplaza por el de crear.
Las filas de filtros no se tocan — son las mismas, y por eso los prefiltros vienen cargados. */
.mxf-alerta { padding:14px 18px 0; border-top:1px solid var(--mxf-bd, #E2E8F0); }
.mxf-alerta[hidden] { display:none; } /* [hidden] pierde por cascada contra el display de clase */
.mxf-alerta-l { font:600 12.5px 'Manrope',sans-serif; opacity:.72; margin:0 0 8px; }
.mxf-alerta-freq { display:flex; gap:7px; flex-wrap:wrap; margin:0 0 4px; }
.mxf-alerta-freq button { flex:1 1 auto; min-width:0; min-height:44px; padding:0 14px;
border:1px solid var(--mxf-bd, #E2E8F0); border-radius:10px; background:none; cursor:pointer;
color:inherit; font:600 13px 'Manrope',sans-serif; transition:background .16s, border-color .16s; }
.mxf-alerta-freq button:hover { background:rgba(34,211,166,.10); }
.mxf-alerta-freq button.on { border-color:#22D3A6; background:#DFF9F1; color:#0B6E63; }
.mxf-alerta-go[hidden] { display:none; }