/* ============================================================
   mecha-barra.css  ·  barra de resultados de /busqueda/
   Se carga DESPUES de resultados.min.css. No reemplaza nada.
   TODO lo que esconde o mueve algo cuelga de .mb-nueva, clase
   que pone el JS solo si la transformacion termino bien.
   Sin JS, la pagina queda exactamente como hoy.
   ============================================================ */

/* UNA morada, la que ya usa la hoja base (--mb-p #7b2fbe). Hasta el 14-sep-2026 este
   archivo inventaba la suya (#6017b1) y en la misma pantalla convivian dos.
   --mb-t es el objetivo tactil (44px, WCAG 2.5.5) y --mb-e la unidad de espacio: antes
   habia cinco separaciones distintas en la misma fila (4, 5, 7, 8 y 10).
   --mb-f es el gris del fondo, el mismo que hasta hoy se colaba DENTRO de la foto. */
/* `--mb-f` va en :root y NO solo en `.mb-pag`, y esto costo una ronda: la regla del
   fondo apunta a `#content`, que es el PADRE de `.mb-pag`, y las custom properties
   se heredan hacia abajo, nunca hacia arriba. Alli `var(--mb-f)` no resolvia nada,
   la declaracion quedaba invalida y el fondo salia transparente. */
:root{--mb-f:#f6f5f8}
.mb-pag{--mb-t:44px;--mb-e:8px}

/* ---------- 0. El gris va por FUERA de las tarjetas ----------
   Pablo lo marco en una captura: las franjas grises estaban dentro de la tarjeta,
   alrededor de la foto, y el espacio entre tarjetas era blanco. Es al reves: la
   tarjeta es una hoja blanca y el gris es la mesa donde se apoya.
   El interior lo arregla `resultados.css`, quitandole el fondo al <img>. El exterior
   es esto. Se pinta `.mb-pag` y no `#content` del tema para no salir de la pagina del
   buscador: esta hoja solo se encola con `is_page(MB_PAGINA)`, pero una regla sobre un
   contenedor del tema seria una bomba de relojeria si alguien la encola en otro sitio.
   En escritorio el gris es la banda de 1340px de `.mb-pag`, centrada con el contenido;
   en telefono `.mb-pag` ya ocupa el ancho util completo. */
/* EL GRIS VA EN `#content`, NO EN EL BLOQUE DE RESULTADOS, y esto costo dos intentos
   que Pablo caso mirando la pagina en su telefono.

   Intento 1, `.mb-pag:has(.mb-nueva)`: no casaba NUNCA. `.mb-pag` ES `#mb-resultados`,
   el mismo <div>, asi que `.mb-nueva` no es un descendiente suyo sino el propio
   elemento. El fondo quedo transparente.

   Intento 2, `.mb-pag.mb-nueva`: casaba, pero pintaba una ISLA. `#content` trae
   `padding:30px 0` del tema, asi que entre el buscador y el gris quedaba una franja
   blanca de 30px, y el bloque se leia como un recuadro pegado encima de la pagina en
   vez de como el fondo de la pagina. Asi lo dijo Pablo: "se ve pesimo".

   `#content` mide de borde a borde (medido: x 0 a 393 en un iPhone de 393) y empieza
   pegado al header, asi que el gris arranca donde termina el buscador y llega a los
   dos bordes. Es lo que hace Seeed: el gris es la mesa, no un mantel.

   El `:has()` acota la regla a la pagina de resultados y con el JS montado. Esta hoja
   ya solo se encola con `is_page(MB_PAGINA)`, pero una regla suelta sobre un contenedor
   del TEMA seria una bomba de relojeria si alguien la encolara en otro sitio. Si un
   navegador no soportara `:has()`, el fondo queda blanco: es lo de antes, no un roto. */
#content:has(#mb-resultados.mb-nueva){background:var(--mb-f)}
/* Los 30 px de gris VACIO que Flatsome pone sobre toda pagina (`.page-wrapper`). Entre
   el borde de abajo del buscador del tema y nuestro titulo no hay nada que mirar, y en
   telefono el primer producto arrancaba a 373 px del borde: el 44% de la pantalla.
   EL SELECTOR VA SIN `.mb-nueva` A PROPOSITO, y es la unica regla de este archivo que
   lo hace: `.mb-nueva` la pone el JS, que WP Rocket difiere hasta el primer toque, asi
   que la pagina pintaria 30 px y saltaria a 8 al entrar el JS. Serian 22 px de salto de
   contenido regalados. El `<div id="mb-resultados">` si viene en el HTML servido, o sea
   esta version aplica desde el primer pintado. */
#content:has(#mb-resultados){padding-top:8px}
/* el aire lateral de las tarjetas dentro del gris */
.mb-pag.mb-nueva{padding-left:14px;padding-right:14px}
/* padding-top 0: el respiro de arriba ya lo pone #content y aca estaba duplicado */
.mb-pag.mb-nueva{padding-top:0}
@media (max-width:600px){.mb-pag.mb-nueva{padding-left:10px;padding-right:10px}}

/* ---------- 1. Titulo y contador en una sola linea ---------- */
.mb-nueva .mb-cab{flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:2px 10px;margin-bottom:8px}
/* width:auto anula el 100% de la hoja base: con el, el h1 mide su texto y el
   contador cabe a su lado. Si el termino es larguisimo, el contador baja solo */
.mb-nueva .mb-cab h1{flex:0 1 auto;width:auto;min-width:0;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* El contador vive en la BARRA desde el 14-sep-2026, no en el titulo: en telefono el
   titulo entero se esconde y el contador se habria ido con el. `margin-left:auto` lo
   empuja al final de la fila, justo antes del embudo, que es donde Seeed pone el
   suyo. Cuesta CERO scroll porque esa fila ya existia. */
.mb-nueva .mb-bar>.mb-cnt{flex:none;align-self:center;margin:0 0 0 auto;padding:0;color:var(--mb-m);font-size:11.5px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- 2. La barra: una sola fila de 44 px ---------- */
/* La barra es una fila de pestanas apoyadas en su propia linea, como las de Seeed.
   `align-items:stretch` es lo que deja que la pestana llegue hasta abajo: asi el
   subrayado de la activa se apoya EN la linea en vez de flotar sobre ella. Que un
   boton "tocara la linea" era el sintoma de una capsula de 44px dentro de una barra
   de 45; ahora es el diseno. */
.mb-nueva .mb-bar{flex-wrap:nowrap;align-items:stretch;gap:calc(var(--mb-e) * 2);min-height:var(--mb-t);margin:0 0 10px;border-bottom:1px solid var(--mb-b)}
/* anti parpadeo: lo que el minificado sigue pintando en la barra no se ve nunca
   ahi. El JS lo muda al cajon, donde estos selectores ya no aplican */
.mb-nueva .mb-bar>.mb-fd,
.mb-nueva .mb-bar>.mb-fx{display:none}
/* el <select> se esconde SOLO si de verdad se mudo al cajon. `mb-sinlado` la pone el
   JS cuando esta busqueda no trajo facetas y por lo tanto no hay cajon a donde
   mudarlo: ahi se queda en la barra, que es el unico sitio que le queda. */
.mb-nueva .mb-bar:not(.mb-sinlado)>.mb-sord{display:none}
.mb-nueva .mb-bar.mb-sinlado>.mb-sord{flex:none;align-self:center;max-width:60%}
/* y ahi las pestanas se retiran: el <select> ya trae las mismas tres opciones mas
   las otras tres, asi que dejarlos juntos era un control duplicado que ademas
   escribia "Relevancia" dos veces en la misma fila. Sin cajon, la barra vuelve a
   ser la de siempre y no se pierde ningun orden. */
.mb-nueva .mb-bar.mb-sinlado>.mb-ord{display:none}

/* riel de orden */
.mb-nueva .mb-ord{display:flex;align-items:stretch;gap:calc(var(--mb-e) * 3);flex:1 1 auto;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mb-nueva .mb-ord::-webkit-scrollbar{display:none}

/* PESTANA, no capsula. La activa se marca con color y un subrayado de 2px, que es lo
   que hace Seeed y lo que evita el bloque morado macizo: 13px de texto dentro de una
   caja de 44px dejaban 31px de aire vertical contra 14 de lateral, mas del doble, y el
   radio de 999px convertia eso en una capsula muy alta y corta.
   `padding:0` a proposito: la primera pestana alinea con el titulo de arriba, que no
   tiene sangria. La separacion la pone el `gap` del riel, no el relleno del boton.
   `text-transform:none` porque el tema pone MAYUSCULAS a los <button> y a 13px con
   letter-spacing cero eso se lee como un boton de sistema, no como una pestana. */
.mb-nueva .mb-so{position:relative;flex:none;display:inline-flex;align-items:center;min-height:var(--mb-t);padding:0;margin:0;border:0;background:0 0;color:var(--mb-m);font:inherit;font-size:13.5px;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;transition:color .12s}
.mb-nueva .mb-so:hover{color:var(--mb-pd)}
/* El subrayado va en un ::after y NO en un `box-shadow:inset`, medido el 14-sep:
   el tema le pone 12px de radio a todo <button> y le gana a nuestro
   `border-radius:0`, asi que la sombra interior salia curvada como una U. Un
   pseudo-elemento absoluto es un rectangulo recto pase lo que pase con el radio.
   `bottom:0` lo apoya justo encima de la linea de la barra: la pestana mide 44 en
   una barra de 45, y ese 1px es el borde. */
.mb-nueva .mb-so.on{color:var(--mb-p);font-weight:700}
.mb-nueva .mb-so.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mb-p)}
/* El anillo va por FUERA. Con `padding:0` la caja del boton ES el texto, asi que un
   `outline-offset` negativo dibujaba la linea encima de las letras y las tachaba. */
.mb-nueva .mb-so:focus-visible{outline:2px solid var(--mb-p);outline-offset:3px;border-radius:2px}
/* fantasma en negrita: reserva el ancho para que activar no corra las palabras */
.mb-nueva .mb-so>span{display:grid;justify-items:center}
.mb-nueva .mb-so>span:after{content:attr(data-t);height:0;overflow:hidden;visibility:hidden;font-weight:700;pointer-events:none}

/* ---------- 3. El embudo ---------- */
/* El embudo se centra en la fila y NO llega a la linea: solo las pestanas se apoyan en
   ella. 36px de alto con 8px de radio, que es el lenguaje de la hoja base (los <select>
   y los <details> del buscador ya usan 8), en vez de los 12 que este archivo se habia
   inventado. El area tactil sigue siendo de 44 gracias al padding vertical del contenedor
   flexible: `align-self:center` dentro de una barra de 44 deja 4px arriba y abajo que
   tambien reciben el toque. */
.mb-nueva .mb-emb{position:relative;flex:none;align-self:center;display:inline-flex;align-items:center;justify-content:center;gap:var(--mb-e);min-width:36px;min-height:36px;padding:0 12px;margin:0;border:1px solid var(--mb-b);border-radius:8px;background:#fff;color:var(--mb-pd);font:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;transition:border-color .12s,color .12s}
/* El area TACTIL llega a 44 sin que el boton crezca: un pseudo-elemento invisible
   que sobresale 4px por lado. Medido el 14-sep: el embudo dibuja 43x36, y 36 esta
   bajo los 44x44 de WCAG 2.5.5 que el resto de la barra si cumple (las tres
   pestanas miden 44 de alto, la mas angosta "Nuevo" justo 44x44). Agrandar la caja
   lo habria devuelto al problema que este rediseno vino a matar: mucho fondo para
   poco contenido. */
.mb-nueva .mb-emb:before{content:"";position:absolute;inset:-4px}
.mb-nueva .mb-emb svg,.mb-nueva .mb-emb svg *{pointer-events:none}
.mb-nueva .mb-emb svg{width:17px;height:17px;flex:none;display:block}
.mb-nueva .mb-emb .tx{display:none}
.mb-nueva .mb-emb:hover{border-color:var(--mb-p);color:var(--mb-p)}
/* con filtros puestos: borde y texto de marca, fondo blanco. Sin relleno, igual que la
   pestana activa: el unico solido de la barra es la burbuja del numero. */
.mb-nueva .mb-emb.on{border-color:var(--mb-p);color:var(--mb-p)}
.mb-nueva .mb-emb:focus-visible{outline:2px solid var(--mb-p);outline-offset:2px}
.mb-nueva .mb-emb .n{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--mb-p);color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center;font-variant-numeric:tabular-nums}

/* la pieza nueva usa UNA sola morada, la de marca */
.mb-nueva .mb-side .mb-fc input{accent-color:var(--mb-p)}
/* las etiquetas llegan en minuscula desde el servicio; va fuera del @media
   para que el cajon del telefono y la columna del escritorio digan lo mismo */
.mb-nueva .mb-side .mb-fc span::first-letter{text-transform:uppercase}

/* cabecera y pie del cajon: en escritorio no existen */
.mb-nueva .mb-scab,.mb-nueva .mb-spie{display:none}

/* ---------- La seccion "Ordenar" dentro del panel ----------
   El <select> del minificado deja de esconderse y baja aca con sus SEIS opciones. Las
   tres pestanas de arriba son el atajo a lo mas pedido; Precio menor, Precio mayor y
   Mas stock no se perdieron, viven aca. En escritorio queda arriba de la columna de
   filtros, que es donde Seeed pone su "Default".
   El selector es `.mb-fo .mb-sord` y no `.mb-side .mb-sord` para que siga funcionando
   la regla anti parpadeo de la barra, que apunta a `.mb-bar>.mb-sord`. */
.mb-nueva .mb-fo .mb-sord{display:block;width:100%;min-height:40px;padding:0 34px 0 11px;font-size:13.5px}

/* ============================================================
   TELEFONO Y TABLET
   ============================================================ */
/* EN TELEFONO EL TITULO SE ESCONDE, Y NO SE BORRA. El termino buscado se lee dos filas
   mas arriba, dentro del campo del buscador del tema, asi que "Resultados para wifi"
   repetia lo que ya estaba en pantalla a cambio de 30 px: el bloque mas caro de los que
   son 100% nuestros.
   Va con el clip de accesibilidad y no con `display:none` porque el <h1> sigue siendo
   el encabezado de la pagina para Google y para un lector de pantalla, que lo anuncia
   igual. En escritorio no se toca: ahi el espacio sobra y el titulo ordena la lectura.
   Seeed va un paso mas alla y no tiene NINGUN encabezado (medido: querySelectorAll
   ("h1,h2") devuelve vacio), pero eso no nos sirve: a nuestra pagina se llega tambien
   desde Google y desde un enlace compartido. */
@media (max-width:600px){
  .mb-nueva .mb-cab{position:absolute;width:1px;height:1px;margin:0;padding:0;
   overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

@media (max-width:900px){

  /* el panel sale del flujo: la grilla arranca donde termina la barra */
  .mb-nueva .mb-cpo{grid-template-columns:1fr;gap:0}

  /* ---------- 4. El cajon ---------- */
  .mb-nueva .mb-side{position:fixed;z-index:10001;inset:auto 0 0 0;width:auto;max-width:none;max-height:82vh;max-height:82dvh;margin:0;padding:0;border:1px solid var(--mb-b);border-bottom:0;border-radius:16px 16px 0 0;box-shadow:0 -18px 44px #3a12622e;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;visibility:hidden;transform:translateY(100%);transition:transform .22s ease,visibility 0s linear .22s}
  .mb-nueva.mb-abierto .mb-side{visibility:visible;transform:none;transition:transform .22s ease}
  @media (prefers-reduced-motion:reduce){.mb-nueva .mb-side{transition:none}}

  /* el velo: en la regla base NO existe. Solo se dibuja con el cajon abierto */
  .mb-nueva.mb-abierto:after{content:"";position:fixed;inset:0;z-index:10000;background:#3a126280}

  .mb-nueva .mb-scab{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:2;padding:13px 14px 11px;background:#fff;border-bottom:1px solid var(--mb-b)}
  .mb-nueva .mb-scab b{color:var(--mb-pd);font-size:15px;font-weight:800;letter-spacing:-.2px}
  .mb-nueva .mb-cerr{flex:none;width:var(--mb-t);height:var(--mb-t);margin:-8px -10px -8px auto;padding:0;border:0;border-radius:999px;background:0 0;color:var(--mb-m);font:inherit;font-size:19px;line-height:1;cursor:pointer}
  .mb-nueva .mb-cerr:hover{background:#f4eefc;color:var(--mb-pd)}
  .mb-nueva .mb-cerr:focus-visible{outline:2px solid var(--mb-p);outline-offset:-4px}

  .mb-nueva .mb-spie{display:flex;align-items:center;gap:10px;position:sticky;bottom:0;z-index:2;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--mb-b)}
  .mb-nueva .mb-spie .mb-fx{flex:none;min-height:var(--mb-t);padding:0 14px;border:0;border-radius:999px;background:0 0;color:var(--mb-m);text-decoration:underline}
  .mb-nueva .mb-ver{flex:1;min-height:var(--mb-t);border:0;border-radius:999px;background:var(--mb-p);color:#fff;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
  .mb-nueva .mb-ver:hover{background:var(--mb-pd)}
  .mb-nueva .mb-ver:focus-visible{outline:2px solid var(--mb-pd);outline-offset:-4px}

  /* casillas al dedo dentro del cajon */
  .mb-nueva .mb-side .mb-fc{min-height:var(--mb-t);padding:4px 2px;gap:10px;font-size:13.5px}
  /* margin:0 quita el margen de la hoja base, que se sumaba al gap y daba 20 px */
  .mb-nueva .mb-side .mb-fc input{width:18px;height:18px;margin:0}
  .mb-nueva .mb-side .mb-fg{padding:10px 14px}
  .mb-nueva .mb-fo .mb-sord{min-height:var(--mb-t)}
  .mb-nueva .mb-side .mb-fg h2{font-size:13.5px}
  .mb-nueva .mb-side .mb-vermas{min-height:40px;font-size:13px}

  /* los dos flotantes de la tienda quedarian encima del pie del cajon:
     #mts-wa-btn (WhatsApp, z 99999, abajo a la derecha) y
     #mecha-float-widget (z 9999, abajo a la izquierda). Medidos en produccion */
  body.mb-cajon #mts-wa-btn,
  body.mb-cajon #mecha-float-widget{display:none}

  /* ---------- 5. Categorias relacionadas: una sola fila que se desliza ---------- */
  .mb-nueva .mb-main>nav.mb-cat{flex-wrap:nowrap;margin:0 0 8px;padding-bottom:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mb-nueva .mb-main>nav.mb-cat::-webkit-scrollbar{display:none}
  .mb-nueva .mb-main>nav.mb-cat>*{flex:none}
}

/* ============================================================
   ESCRITORIO: el embudo no existe, el panel sigue siendo lateral
   ============================================================ */
@media (min-width:901px){
  .mb-nueva .mb-emb{display:none}
  /* "Quitar filtros" se ve tambien en escritorio. El JS lo muda al pie del cajon, y el
     pie solo se dibujaba en telefono: a partir de 901px el boton quedaba dentro de un
     contenedor con display:none y el cliente tenia que desmarcar casilla por casilla.
     Aca el pie es una fila mas de la columna, sin sticky ni borde, y sin el "Ver N",
     que en escritorio no tiene nada que cerrar. */
  .mb-nueva .mb-spie{display:flex;padding:10px 14px 14px}
  .mb-nueva .mb-spie .mb-ver{display:none}
  .mb-nueva .mb-spie .mb-fx{flex:none;min-height:36px;padding:0;border:0;background:0 0;
   color:var(--mb-m);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
  .mb-nueva .mb-spie .mb-fx:hover{color:var(--mb-p)}
  .mb-nueva .mb-ord{overflow:visible}
  /* El panel sin scroll propio: lo mueve mecha-barra.js, que pone `.mb-dos` en
     #mb-resultados (27-oct-2026, el panel se quedaba cortado y trabado bajo el borde).
     Sin el JS la clase no esta y el panel conserva su `max-height` con scroll. */
  .mb-nueva.mb-dos .mb-side{max-height:none;overflow:visible}
}