/* ══════════════════════════════════════════════════════════════════════ MEGA MAYORISTA — mm-shell.css Chasis del sitio: header rojo de dos filas + footer rojo. ══════════════════════════════════════════════════════════════════════ Depende de tokens.css y mm-base.css. Se carga después de las hojas legacy, así que gana por cascada a igual especificidad; donde el legacy usa !important o selectores de id, acá se sube la especificidad igual. POSICIONAMIENTO — por qué `fixed` y no `sticky`: el

se inyecta DENTRO de #mainContent, que lleva padding-top para compensar la barra. Un header sticky se quedaría pegado DEBAJO de ese padding y dejaría una franja blanca de 132px arriba en el primer paint. Además cart-preview.js empuja las barras fijas por la izquierda con left/width inline cuando se abre el panel "Tu pedido": eso solo funciona sobre un elemento fixed. Por eso el header es fixed y #mainContent lo compensa (regla en mm-base.css). ══════════════════════════════════════════════════════════════════════ */ /* ── TOP-STRIP: absorbido por el header y el footer ──────────────────── El componente quedó vacío, pero ecommerce.css sigue reservándole 38px arriba del header. Se apaga por si algún resto quedara en el DOM. */ .top-strip { display: none !important; } /* ══════════════════════════════════════════════════════════════════════ HEADER ══════════════════════════════════════════════════════════════════════ */ #siteHeader.mm-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--mm-z-header); background: var(--mm-red); color: var(--mm-on-red); border-bottom: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--mm-sh-header); transition: transform var(--mm-dur-base) var(--mm-ease); } /* ── Separación al hacer scroll ──────────────────────────────────────── Contrato con js/ui/animations.js: pone `mm-scrolled` en cuando la página se despegó del tope. Acá vive SOLO el estado visual. El header no cambia de alto, de padding ni de --mm-header-h: cualquiera de las tres desplazaría #mainContent (CLS). Lo único que aparece es la sombra, y se dibuja en un pseudo-elemento para poder animar `opacity` —compuesta por GPU— en vez del `box-shadow` del propio header, que repintaría la barra entera en cada cuadro. Sin la clase el header queda exactamente como hoy: si el JS no llega a correr, no se rompe nada, simplemente no aparece la sombra. */ #siteHeader.mm-header::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: var(--mm-sh-card); opacity: 0; transition: opacity var(--mm-dur-base) var(--mm-ease); } html.mm-scrolled #siteHeader.mm-header::after { opacity: 1; } /* Grilla única para las dos filas: el logotipo ocupa las dos de alto, igual que en la maqueta. En móvil las mismas celdas se reordenan a tres barras apiladas (64 + 56 + 44 = --mm-header-h-mobile). */ .mm-header-inner { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-rows: var(--mm-header-row1) var(--mm-header-row2); grid-template-areas: "logo cat search envio" "logo nav nav acts"; align-items: center; column-gap: var(--mm-s-5); } .mm-hd-logo { grid-area: logo; } .mm-hd-cat { grid-area: cat; } .mm-hd-search { grid-area: search; } .mm-hd-envio { grid-area: envio; justify-self: end; min-width: 0; } .mm-hd-acts { grid-area: acts; justify-self: end; } .mm-hd-burger { grid-area: burger; display: none; } /* El nav va centrado respecto del CONTENEDOR, no de la celda que le deja libre el logotipo: por eso se coloca por líneas (fila 2, de borde a borde) en lugar de usar el área "nav". Como justify-self lo encoge a su ancho de contenido, no llega a tapar ni el logotipo ni las acciones. */ .mm-hd-nav { grid-row: 2; grid-column: 1 / -1; justify-self: center; } /* ── Logotipo ────────────────────────────────────────────────────────── No existe el SVG del wordmark de la maqueta: se reconstruye con Poppins 800 en dos líneas. La cursiva la sintetiza el navegador (Poppins solo trae itálicas reales en 400/500) y en 800 el resultado es el oblicuo correcto. */ /* min-height: el wordmark mide 33px de alto en móvil y 41px en escritorio, por debajo del área táctil. Como ya es flex column centrado, subir la caja no mueve ni una letra: crece simétrico dentro de una fila de 64px que tiene aire de sobra. Los font-size NO cambian. */ .mm-logo { display: flex; flex-direction: column; justify-content: center; min-height: var(--mm-tap); gap: 1px; text-decoration: none; color: var(--mm-on-red); font-style: italic; font-weight: var(--mm-w-black); line-height: var(--mm-lh-none); letter-spacing: var(--mm-ls-tight); transition: opacity var(--mm-dur-fast) var(--mm-ease); } /* Hover sólo con mouse: en táctil se queda pegado después del tap. */ @media (hover: hover) and (pointer: fine) { .mm-logo:hover { opacity: 0.9; } } .mm-logo-1 { font-size: 28px; } .mm-logo-2 { font-size: 12.5px; letter-spacing: 0.055em; } /* ── Botón Categorías + panel ─────────────────────────────────────── */ .mm-hd-cat { position: relative; } .mm-cat-btn { display: inline-flex; align-items: center; gap: var(--mm-s-3); height: var(--mm-ctl-h); min-width: 220px; padding: 0 var(--mm-ctl-pad-x); background: var(--mm-surface); border: none; border-radius: var(--mm-r-sm); color: var(--mm-text); font-size: var(--mm-t-base); font-weight: var(--mm-w-medium); cursor: pointer; /* El border-radius NO se transiciona: tiene que engancharse con el panel en el mismo cuadro en que abre, y animarlo repinta el botón entero. */ transition: var(--mm-tr-color), transform var(--mm-dur-fast) var(--mm-ease); } /* Confirmación de que el clic llegó. Es lo más barato que existe y lo que más se nota; en táctil es la única respuesta posible (no hay hover). */ .mm-cat-btn:active { transform: scale(var(--mm-press, 0.97)); } /* Anillo POR DENTRO: el botón es blanco sobre la banda roja, y con el offset positivo el rojo del anillo cae sobre el rojo del header y deja de verse (1.8:1). Contra el blanco del botón sí contrasta. Instantáneo, sin transición: el foco es información, no decoración. */ .mm-cat-btn:focus-visible { outline: var(--mm-focus-ring); outline-offset: calc(var(--mm-focus-offset) * -1); } .mm-cat-btn-icon { width: 20px; height: 14px; flex: 0 0 auto; color: var(--mm-text-soft); } .mm-cat-btn[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .mm-cat-panel { position: absolute; top: 100%; left: 0; min-width: 100%; max-height: min(60vh, 420px); overflow-y: auto; padding-block: var(--mm-s-1); background: var(--mm-surface); border: none; border-radius: 0 0 var(--mm-r-sm) var(--mm-r-sm); box-shadow: var(--mm-sh-pop); z-index: var(--mm-z-dropdown); animation: mm-panel-in var(--mm-dur-base) var(--mm-ease-out) both; } /* Apertura de un panel anclado: baja 8px desde su origen y se asienta. Va como `animation` y no como `transition` porque el panel se oculta con el atributo [hidden] (display:none) y las transiciones no arrancan desde display:none; una animación, en cambio, se reinicia sola cada vez que el nodo vuelve a renderizarse. El CIERRE no se anima: app.js vuelve a poner [hidden] y el nodo desaparece en el mismo cuadro. Animar la salida exigiría retrasar el display desde JS, y esta tarea no toca JS. */ @keyframes mm-panel-in { from { opacity: 0; transform: translate3d(0, calc(var(--mm-move-2, 8px) * -1), 0); } } .mm-cat-panel[hidden] { display: none; } .mm-cat-panel ul { list-style: none; margin: 0; padding: 0; } /* min-height y no height: además de dar el área táctil en móvil, deja que una categoría de nombre largo envuelva en dos líneas en vez de desbordar la fila. La densidad de 40px vuelve en escritorio. */ .mm-cat-panel a { display: flex; align-items: center; min-height: var(--mm-tap); padding: var(--mm-s-1) var(--mm-ctl-pad-x); color: var(--mm-text-soft); font-size: var(--mm-t-sm); text-decoration: none; transition: var(--mm-tr-color); } @media (min-width: 1024px) { .mm-cat-panel a { min-height: var(--mm-ctl-h); } } .mm-cat-panel a:focus-visible { background: var(--mm-band); color: var(--mm-text); } @media (hover: hover) and (pointer: fine) { .mm-cat-panel a:hover { background: var(--mm-band); color: var(--mm-text); } } /* ── Buscador ──────────────────────────────────────────────────────── */ .mm-search { display: flex; align-items: center; height: var(--mm-ctl-h); background: var(--mm-surface); border-radius: var(--mm-r-sm); overflow: hidden; } .mm-search input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 var(--mm-s-2) 0 var(--mm-s-5); border: none; background: transparent; color: var(--mm-ink); font-family: var(--mm-font); font-size: var(--mm-t-base); outline: none; -webkit-appearance: none; appearance: none; } /* El `outline: none` de arriba dejaba el buscador SIN indicador de foco: se repone acá. El offset va en negativo porque .mm-search tiene `overflow: hidden` y un anillo por fuera quedaría recortado. */ .mm-search input:focus-visible { outline: var(--mm-focus-ring); outline-offset: calc(var(--mm-focus-offset) * -1); } .mm-search input::placeholder { color: var(--mm-text-faint); } .mm-search input::-webkit-search-cancel-button { display: none; } /* Un solo buscador visible por breakpoint. Los dos inputs existen porque app.js referencia ambos ids (#headerSearchInput y #headerSearchInputMobile) en el saneado de entradas y en el proxy hacia el catálogo. */ @media (max-width: 1023.98px) { #headerSearchInput { display: none; } } @media (min-width: 1024px) { #headerSearchInputMobile { display: none; } } .mm-search-btn { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border: none; background: transparent; color: var(--mm-text); cursor: pointer; transition: var(--mm-tr-color), transform var(--mm-dur-fast) var(--mm-ease); } .mm-search-btn svg { width: 20px; height: 20px; } .mm-search-btn:active { transform: scale(var(--mm-press, 0.97)); } /* Mismo motivo que el input: el `overflow: hidden` del contenedor. */ .mm-search-btn:focus-visible { outline: var(--mm-focus-ring); outline-offset: calc(var(--mm-focus-offset) * -1); } @media (hover: hover) and (pointer: fine) { .mm-search-btn:hover { color: var(--mm-red); } } /* ── Envíos gratis + sucursal ──────────────────────────────────────── */ /* max-width + min-width:0: el nombre de la sucursal lo trae la API y hay ciudades largas ("Santo Domingo de los Colorados"). Con `nowrap` y sin esto la píldora se sale de la fila en pantallas de 360; ahora el texto se recorta con puntos suspensivos y el header nunca desborda. */ .mm-envio { display: flex; align-items: stretch; max-width: 100%; min-width: 0; height: var(--mm-ctl-h); } .mm-envio-pill { display: inline-flex; align-items: center; padding: 0 var(--mm-s-4); background: var(--mm-red-accent); color: var(--mm-on-red); border-radius: var(--mm-r-full) 0 0 var(--mm-r-full); font-size: var(--mm-t-sm); font-weight: var(--mm-w-black); text-transform: uppercase; white-space: nowrap; } .mm-envio-suc { display: inline-flex; align-items: center; gap: var(--mm-s-2); padding: 0 var(--mm-s-4); background: var(--mm-surface); border: none; border-radius: 0 var(--mm-r-full) var(--mm-r-full) 0; color: var(--mm-ink); font-family: var(--mm-font); font-size: var(--mm-t-sm); font-weight: var(--mm-w-black); text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: var(--mm-tr-color), transform var(--mm-dur-fast) var(--mm-ease); } /* El recorte va en el del texto y NO en el botón: el botón lleva un halo táctil ::after de 44px que sobresale de su caja de 28, y un `overflow: hidden` ahí lo recortaría y mataría el área de toque. */ .mm-envio-suc { min-width: 0; } .mm-envio-suc-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .mm-envio-suc svg { width: 14px; height: 14px; color: var(--mm-text-soft); } .mm-envio-suc:active { transform: scale(var(--mm-press, 0.97)); } /* Píldora blanca sobre la banda roja: anillo por dentro, igual que el botón de categorías. */ .mm-envio-suc:focus-visible { outline: var(--mm-focus-ring); outline-offset: calc(var(--mm-focus-offset) * -1); } @media (hover: hover) and (pointer: fine) { .mm-envio-suc:hover { color: var(--mm-red); } } /* ── Nav ───────────────────────────────────────────────────────────── */ .mm-nav { display: flex; align-items: stretch; gap: var(--mm-s-14); height: 100%; } .mm-nav a { position: relative; display: flex; align-items: center; color: var(--mm-on-red); font-size: var(--mm-t-base); font-weight: var(--mm-w-medium); text-decoration: none; transition: var(--mm-tr-color); } .mm-nav a.is-active { font-weight: var(--mm-w-bold); } /* Subrayado del nav: existe en TODOS los enlaces y se revela con `scaleX`, nunca con `width` (width relayoutea la barra entera en cada cuadro; scaleX lo compone la GPU). El origen lateral hace que crezca desde la izquierda, como una lectura, en vez de abrirse desde el centro. Sirve para dos cosas a la vez: orienta el hover y marca la vista activa —cuando el router cambia .is-active, el subrayado se corre solo. */ .mm-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--mm-red-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--mm-dur-fast) var(--mm-ease); } .mm-nav a.is-active::after { transform: scaleX(1); } @media (hover: hover) and (pointer: fine) { .mm-nav a:hover::after { transform: scaleX(1); } } /* ── Acciones (Mis cosas · Carrito · Cuenta) ───────────────────────── */ .mm-hd-acts { display: flex; align-items: flex-start; gap: var(--mm-s-7); } /* ecommerce.css:1804-1809 reordena estos ids con `order` para el header viejo (Usuario → Mis pedidos → Favoritos → Carrito → Salir). Acá el orden de la maqueta es Mis cosas → Carrito → Cuenta, así que se fija explícitamente con especificidad id+clase, que gana al id solo. */ #btnHeaderFavoritos.mm-act { order: 1; } #btnAbrirCarrito.mm-act { order: 2; } #btnOpenLogin.mm-act { order: 3; } #userLoggedBox.mm-acct { order: 3; } .mm-acct-trigger #userLoggedName, .mm-acct-menu #btnAbrirPerfil, .mm-acct-menu #btnAbrirMisPedidos, .mm-acct-menu #btnAbrirFavoritos, .mm-acct-menu #btnLogoutMayorista { order: 0; } .mm-act { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; background: none; border: none; color: var(--mm-on-red); font-family: var(--mm-font); text-decoration: none; cursor: pointer; transition: opacity var(--mm-dur-fast) var(--mm-ease), transform var(--mm-dur-fast) var(--mm-ease); } .mm-act:active { transform: scale(var(--mm-press, 0.97)); } @media (hover: hover) and (pointer: fine) { .mm-act:hover { opacity: 0.85; } } .mm-act svg { width: 22px; height: 22px; } .mm-act-label { font-size: var(--mm-t-xs); font-style: italic; font-weight: var(--mm-w-regular); line-height: var(--mm-lh-none); white-space: nowrap; } .mm-act-cart-ic { position: relative; display: block; line-height: 0; } .mm-act-count { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: var(--mm-r-full); background: var(--mm-red-accent); color: var(--mm-on-red); font-size: 11px; font-weight: var(--mm-w-black); line-height: 1; } /* Caja de sesión activa. NO se declara `display` acá a propósito: app.js la muestra/oculta con las clases Tailwind .hidden/.flex, y un display propio (id, 1-0-0) las anularía y dejaría la caja siempre visible. Solo se estilan alineación y separación. */ #userLoggedBox.mm-acct { position: relative; align-items: center; gap: var(--mm-s-2); } .mm-acct-trigger { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--mm-on-red); cursor: pointer; } /* Sin hover propio a propósito: al pasar el mouse ya se abre el menú de abajo, y dos respuestas para el mismo gesto se pisan. Queda sólo la presión, que es lo único que el táctil puede mostrar. */ .mm-acct-trigger { transition: transform var(--mm-dur-fast) var(--mm-ease); } .mm-acct-trigger:active { transform: scale(var(--mm-press, 0.97)); } .mm-acct-trigger svg { width: 22px; height: 22px; } .mm-acct-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--mm-t-xs); font-style: italic; } .mm-acct-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px; display: none; flex-direction: column; padding: var(--mm-s-1) 0; background: var(--mm-surface); border-radius: var(--mm-r-sm); box-shadow: var(--mm-sh-pop); z-index: var(--mm-z-dropdown); } /* Misma mecánica que el panel de Categorías: el menú pasa de display:none a flex, así que la entrada va como `animation` (una transición no arranca desde display:none) y se reinicia sola en cada apertura. El cierre es instantáneo por la misma razón: el nodo desaparece en el mismo cuadro. */ #userLoggedBox:hover .mm-acct-menu, #userLoggedBox:focus-within .mm-acct-menu { display: flex; animation: mm-panel-in var(--mm-dur-base) var(--mm-ease-out) both; } /* Mismo tratamiento que .mm-cat-panel a. El menú hoy sólo existe ≥1024 (abajo #userLoggedBox va display:none), pero la caja se deja táctil por si mañana se muestra en tablet. */ .mm-acct-menu button { display: flex; align-items: center; gap: var(--mm-s-2); width: 100%; min-height: var(--mm-tap); padding: var(--mm-s-1) var(--mm-s-4); background: none; border: none; color: var(--mm-text); font-family: var(--mm-font); font-size: var(--mm-t-sm); text-align: left; cursor: pointer; transition: var(--mm-tr-color); } .mm-acct-menu button:focus-visible { background: var(--mm-band); color: var(--mm-ink); } .mm-acct-menu button svg { width: 16px; height: 16px; flex: 0 0 auto; } @media (hover: hover) and (pointer: fine) { .mm-acct-menu button:hover { background: var(--mm-band); color: var(--mm-ink); } } @media (min-width: 1024px) { .mm-acct-menu button { min-height: var(--mm-ctl-h); } } /* #btnAbrirFavoritos existe por compatibilidad con app.js (lo referencia por id); la entrada visible a favoritos es "Mis cosas". */ #btnAbrirFavoritos { display: none !important; } /* ── Hamburguesa (solo móvil) ────────────────────────────────────────── 44x44 fijo: es un control que sólo existe por debajo de 1024, o sea siempre táctil. Las tres barras de 20x2 no cambian de tamaño. */ .mm-burger { width: var(--mm-tap); height: var(--mm-tap); display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 0; background: none; border: none; cursor: pointer; } .mm-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--mm-on-red); transition: transform var(--mm-dur-fast) var(--mm-ease), opacity var(--mm-dur-fast) var(--mm-ease); } .mm-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .mm-burger.is-open span:nth-child(2) { opacity: 0; } .mm-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ── Foco sobre la banda roja ────────────────────────────────────────── El anillo global de mm-base.css es --mm-red-accent (#EE2E33): contra el rojo del header (#A81E22) da 1.8:1 y desaparece. Para los controles que se apoyan DIRECTO sobre la banda —no los blancos, que llevan el anillo por dentro— el anillo pasa a blanco (6.6:1). Mismo grosor y offset que el global; sin transición, aparece instantáneo. */ .mm-logo:focus-visible, .mm-nav a:focus-visible, .mm-act:focus-visible, .mm-acct-trigger:focus-visible, .mm-burger:focus-visible { outline: var(--mm-focus-width) solid var(--mm-on-red); outline-offset: var(--mm-focus-offset); } /* ── HEADER · MÓVIL Y TABLET (<1024px) ─────────────────────────────── */ @media (max-width: 1023.98px) { /* Tercera fila de 44 y no de 32: el botón de sucursal tiene que ser tappeable y no hay margen para robarle alto al buscador. 64 + 56 + 44 = --mm-header-h-mobile (164px). */ .mm-header-inner { grid-template-columns: auto 1fr auto; grid-template-rows: 64px 56px var(--mm-tap); grid-template-areas: "burger logo acts" "cat search search" "envio envio envio"; column-gap: var(--mm-s-2); row-gap: 0; } .mm-hd-burger { display: block; } .mm-burger { display: flex; } .mm-hd-logo { justify-self: center; } .mm-logo-1 { font-size: 22px; } .mm-logo-2 { font-size: 10px; } /* El nav se muda al panel desplegable. */ .mm-hd-nav { display: none; } /* En la barra superior solo queda el carrito; "Mis cosas" y "Cuenta" viven en el panel desplegable. */ .mm-hd-acts { gap: var(--mm-s-3); } .mm-act-fav, .mm-hd-acts .mm-act-cuenta, #userLoggedBox.mm-acct { display: none !important; } /* Ícono 22 + gap 2 + label 12 = 36px de alto. Se sube la caja a 44 y se centra el contenido: como la fila de 64 lo centra a su vez, el ícono queda exactamente donde estaba. */ .mm-act { min-height: var(--mm-tap); justify-content: center; } /* Categorías: botón compacto solo-ícono a la izquierda del buscador. */ .mm-hd-cat { align-self: center; } .mm-cat-btn { min-width: 0; width: var(--mm-tap); height: var(--mm-tap); padding: 0; justify-content: center; } .mm-cat-btn-label { display: none; } .mm-cat-panel { width: max(240px, 70vw); border-radius: var(--mm-r-sm); margin-top: 4px; } .mm-cat-btn[aria-expanded="true"] { border-radius: var(--mm-r-sm); } .mm-hd-search { align-self: center; } .mm-search { height: var(--mm-tap); } /* El botón vive dentro de .mm-search, que acá mide 44: por eso el 44 va sólo en este bloque — en escritorio la barra mide 40 y tiene overflow:hidden, que recortaría un botón más alto. El svg sigue en 20. */ .mm-search-btn { width: var(--mm-tap); height: var(--mm-tap); } /* Fila de envíos: la caja pasa a 44 de alto (área táctil) pero la píldora se queda chica y centrada, para no convertir el detalle de la maqueta en una barra gruesa. El área activa la aporta el halo de .mm-envio-suc, más abajo. `align-items: center` pisa el `stretch` de la regla base, que si no estiraría la píldora a los 44. */ .mm-hd-envio { justify-self: center; align-self: center; height: var(--mm-tap); } .mm-envio { height: var(--mm-tap); align-items: center; } .mm-envio-pill, .mm-envio-suc { height: 28px; padding: 0 var(--mm-s-3); font-size: var(--mm-t-eyebrow); } .mm-envio-suc svg { width: 12px; height: 12px; } /* Halo táctil del botón de sucursal (medido 142x24 en la auditoría). No se usa el halo cuadrado de .mm-tap porque el botón ya es ancho de sobra: sólo falta alto. Los 44 del halo coinciden exactos con el alto de la fila, así que no invade el buscador que tiene justo encima. */ .mm-envio-suc { position: relative; } .mm-envio-suc::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: var(--mm-tap); transform: translateY(-50%); } } @media (max-width: 479.98px) { .mm-envio-pill, .mm-envio-suc { padding: 0 var(--mm-s-2); } } /* ── PANEL MÓVIL DESPLEGABLE ───────────────────────────────────────── */ #headerMobileMenu { display: none; background: var(--mm-surface); border-top: 1px solid var(--mm-line-soft); padding: var(--mm-s-2) 0 var(--mm-s-4); max-height: calc(100vh - var(--mm-header-h-mobile)); overflow-y: auto; box-shadow: var(--mm-sh-pop); } /* La hamburguesa togglea .is-open (display: none ↔ block), así que la entrada va como `animation`: se reinicia sola cada vez que el panel vuelve a renderizarse. Baja los mismos 8px que los otros dos paneles del header, para que los tres se abran igual. El cierre es instantáneo: el display lo cambia el onclick del markup y esta tarea no toca JS. */ #headerMobileMenu.is-open { display: block; animation: mm-panel-in var(--mm-dur-base) var(--mm-ease-out) both; } @media (min-width: 1024px) { #headerMobileMenu, #headerMobileMenu.is-open { display: none; } } /* Lleva onclick (abre el perfil): es un control, y con padding 12 + una línea de 13px se quedaba en 43px. */ .mm-mobile-user { display: flex; align-items: center; gap: var(--mm-s-3); min-height: var(--mm-tap); padding: var(--mm-s-3) var(--mm-gutter); color: var(--mm-ink); font-weight: var(--mm-w-semi); font-size: var(--mm-t-sm); border-bottom: 1px solid var(--mm-line-soft); } .mm-mobile-user svg { width: 20px; height: 20px; color: var(--mm-red); } .mm-mobile-nav { display: flex; flex-direction: column; } .mm-mobile-nav a { display: flex; align-items: center; gap: var(--mm-s-3); min-height: 48px; padding: 0 var(--mm-gutter); color: var(--mm-text); font-size: var(--mm-t-base); text-decoration: none; transition: var(--mm-tr-color); } /* El hover queda fuera: este panel sólo existe por debajo de 1024, casi siempre táctil, y ahí el :hover se queda pegado al ítem que tocaste después de navegar. Con mouse (ventana chica de escritorio) sí va. */ .mm-mobile-nav a:focus-visible, .mm-mobile-nav a.is-active { background: var(--mm-band); color: var(--mm-ink); } .mm-mobile-nav a.is-active { font-weight: var(--mm-w-bold); } @media (hover: hover) and (pointer: fine) { .mm-mobile-nav a:hover { background: var(--mm-band); color: var(--mm-ink); } } .mm-mobile-nav a svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--mm-text-soft); } .mm-mobile-sep { height: 1px; margin: var(--mm-s-2) var(--mm-gutter); background: var(--mm-line-soft); } .mm-mobile-count { min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; display: grid; place-items: center; border-radius: var(--mm-r-full); background: var(--mm-red-accent); color: var(--mm-on-red); font-size: 11px; font-weight: var(--mm-w-black); } /* ── Saltar al contenido ───────────────────────────────────────────── */ .skip-to-content { position: absolute; left: -9999px; top: 0; z-index: var(--mm-z-toast); padding: var(--mm-s-3) var(--mm-s-5); background: var(--mm-ink); color: var(--mm-on-red); font-size: var(--mm-t-sm); font-weight: var(--mm-w-bold); border-radius: 0 0 var(--mm-r-sm) 0; text-decoration: none; } /* El `top: 0` es necesario aunque la regla base ya lo diga: futuristic.css (legado) declara `.skip-to-content:focus { top: 1rem }` y la pseudo-clase le gana en especificidad a nuestra regla base. */ .skip-to-content:focus { left: 0; top: 0; } /* ══════════════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════════════ */ .mm-footer { background: var(--mm-red); color: var(--mm-on-red-soft); border-top: none; padding: clamp(40px, 4vw, 56px) var(--mm-gutter) 24px; } /* auto-fit y no conteos por breakpoint: las cuatro columnas se acomodan solas (4 → 2 → 1) sin saltos duros ni media queries. El `min(100%, 240px)` evita que el minmax desborde cuando el contenedor mide menos de 240. */ .mm-footer-inner { width: 100%; max-width: var(--mm-container); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(28px, 3vw, 40px); } /* El mínimo `auto` de un hijo de grid lo ensancharía con la dirección más larga de la columna de contacto. */ .mm-footer-col { min-width: 0; } .mm-footer-title { margin: 0 0 var(--mm-s-3); color: var(--mm-on-red); font-size: var(--mm-t-base); font-weight: var(--mm-w-bold); } .mm-footer-col ul { list-style: none; margin: 0; padding: 0; } /* ── Columna "Categorías": 12 rótulos en DOS columnas ────────────── category-strip.js genera 12 categorías ("dos columnas x 6") y marca "Ver todos los productos" con .mmf-cats-all para que cruce las dos. Ese CSS faltaba: los 12 caían en una sola pila de ~475px y estiraban el pie entero a 652px, dejando las otras tres columnas con 300-425px de rojo vacío debajo. La celda ocupa dos tracks del grid para que cada subcolumna conserve el ancho de una columna normal: el rótulo más largo ("Electrodomésticos y climatización") mide 273px y partirlo dentro de una sola celda de 300px lo dejaría en tres renglones. */ @media (min-width: 1024px) { .mm-footer-inner { grid-template-columns: 1fr 2fr 1fr 1fr; } /* `columns: 2` y no `columns: 2`: el ancho es un MÍNIMO, así que cuando la celda no da para dos subcolumnas el navegador deja una sola en lugar de exprimir los rótulos. Debajo de 1024 la regla ni corre: el grid ya pasó a dos o una columna y la lista se lee mejor apilada. */ #footerCategorias { columns: 220px 2; column-gap: var(--mm-s-6); } #footerCategorias li { /* Un rótulo de dos renglones no debe quedar partido entre columnas. */ break-inside: avoid; } } /* "Ver todos los productos" cierra la lista cruzando las dos columnas, separado del resto: es una acción, no una categoría más. */ .mmf-cats-all { column-span: all; margin-top: var(--mm-s-3); padding-top: var(--mm-s-3); border-top: 1px solid rgb(255 255 255 / 0.18); } .mm-footer-col a, .mm-footer-col li { color: var(--mm-on-red-soft); font-size: var(--mm-t-base); font-weight: var(--mm-w-regular); line-height: var(--mm-lh-link); text-decoration: none; } .mm-footer-col a { transition: var(--mm-tr-color); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .mm-footer-col a:hover { color: var(--mm-on-red); text-decoration: underline; } } /* Antes era una columna flex porque envolvia dos (MEGA / MAYORISTA.) apilados. Ahora envuelve una imagen, y esa columna la rompia: en un flex en columna el `align-items: stretch` por defecto le imponia a la imagen el ancho del contenedor, que a su vez se calculaba a partir del contenido — el resultado era un logo de 0 px de ancho y 38 de alto. Como caja en linea que se ajusta a su contenido, la imagen manda y el aspecto se respeta. Las propiedades de texto (italic, peso, interletraje) se fueron con los spans: ya no hay texto que componer aqui. */ .mm-footer-logo { display: inline-block; min-height: var(--mm-tap); margin-top: clamp(var(--mm-s-6), 2.4vw, var(--mm-s-8)); text-decoration: none; } /* El pie llevaba el nombre compuesto a mano con dos . Ahora es el logo de verdad, el mismo archivo que la cabecera. Va algo mas chico que arriba: aqui cierra la pagina, no la encabeza. */ .mm-footer-logo-img { display: block; height: clamp(38px, 4.2vw, 54px); width: auto; max-width: 100%; } /* Contacto: cada fila es ícono + texto, alineados arriba. */ .mm-footer-contact li { display: flex; } /* La llamada a la acción de la dirección se leía cortada ("… Cómo / llegar"). Viaja entera al renglón siguiente o se queda, nunca partida. */ .mm-footer-nowrap { white-space: nowrap; } .mm-footer-contact a, .mm-footer-contact span.mm-footer-plain { display: flex; align-items: flex-start; gap: var(--mm-s-2); line-height: var(--mm-lh-body); padding-block: 6px; } .mm-footer-contact svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; } .mm-footer-contact span.mm-footer-plain { color: var(--mm-on-red-soft); } .mm-footer-social { display: flex; gap: var(--mm-s-3); margin-top: var(--mm-s-1); } .mm-footer-social a { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--mm-r-full); background: var(--mm-ink); color: var(--mm-on-red); transition: var(--mm-tr-color), transform var(--mm-dur-fast) var(--mm-ease); } @media (hover: hover) and (pointer: fine) { .mm-footer-social a:hover { background: #000000; transform: translate3d(0, var(--mm-lift, -2px), 0); text-decoration: none; } } .mm-footer-social a:active { transform: scale(var(--mm-press, 0.97)); } .mm-footer-social svg { width: 19px; height: 19px; } /* Mismo problema que en el header: el footer también es rojo, así que el anillo rojo del token global no se ve. Blanco sobre --mm-red = 6.6:1 y sobre el círculo --mm-ink de las redes, 17:1. */ .mm-footer-col a:focus-visible, .mm-footer-logo:focus-visible, .mm-footer-social a:focus-visible { outline: var(--mm-focus-width) solid var(--mm-on-red); outline-offset: var(--mm-focus-offset); } .mm-footer-bottom { max-width: var(--mm-container); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--mm-on-red-line); text-align: center; } .mm-footer-copy { margin: 0; color: var(--mm-on-red-faint); font-size: var(--mm-t-xs); text-transform: uppercase; letter-spacing: var(--mm-ls-copy); } /* ── FOOTER · ÁREA TÁCTIL (<1024px) ──────────────────────────────────── max-width porque lo que se apaga es la densidad de escritorio: con --mm-lh-link (2.2) sobre 14px el link mide ~31px de alto. Se agranda la CAJA, no la tipografía: font-size y line-height no se tocan. */ @media (max-width: 1023.98px) { /* Sólo los links de lista: quedan fuera el wordmark (flex column) y las redes (grid), que se resuelven aparte. */ .mm-footer-col ul:not(.mm-footer-contact) li > a { display: flex; align-items: center; min-height: var(--mm-tap); } /* Contacto ya es flex de ícono + texto alineados arriba: se garantiza el alto sin tocar el align-items, o el ícono se despegaría del renglón en las filas que envuelven a dos líneas. */ .mm-footer-contact li > a { min-height: var(--mm-tap); } /* Halo del círculo de red social: 44 de área sobre un botón de 40 que no cambia de tamaño. Desborda 2px por lado y la separación al vecino es de 12px, así que no le roba el clic a nadie. */ .mm-footer-social a::after { content: ""; position: absolute; top: 50%; left: 50%; width: var(--mm-tap); height: var(--mm-tap); transform: translate(-50%, -50%); } } /* ══════════════════════════════════════════════════════════════════════ TRANSICIÓN ENTRE VISTAS ══════════════════════════════════════════════════════════════════════ El router (app.js → mostrar()) muestra una vista y esconde el resto con `hidden` + `style.display`. Cuando un elemento vuelve de display:none a visible, una `animation` CSS se reinicia sola: no hace falta ninguna clase nueva ni tocar el JS. SOLO OPACIDAD, nunca transform: un transform en la raíz de la vista crearía un containing block y rompería los `position: fixed` y `sticky` que viven adentro (sidebar de filtros del catálogo, modales). Tampoco se anima #mainContent, que contiene el header compensado y el footer. 220ms: es una respuesta a un clic del usuario en el nav, no una entrada de sección. Más lento se sentiría como una espera. AUDITORÍA — #productosView queda FUERA de la lista, por dos razones: 1. Una animación por gesto. Sus tarjetas ya entran escalonadas por su cuenta (mm-in-up, mm-catalogo.css); fundir además el contenedor son dos entradas para el mismo clic. 2. Coste real. Mientras el contenedor tiene opacity < 1, el navegador tiene que aplanar TODO el subárbol en una sola capa: las 24 tarjetas dejan de poder componerse por separado y se rerasterizan juntas en cada cuadro. El fundido convertía la entrada más barata del sitio en la más cara, justo en la vista con más nodos. */ #vistaHome, #nosotrosView, #sucursalesView, #carritoView, #checkoutView, #misPedidosView, #loginView, #perfilView, #notFoundView, #forbiddenView { animation: mm-vista-in var(--mm-dur-base) var(--mm-ease) both; } @keyframes mm-vista-in { from { opacity: 0; } } /* ══════════════════════════════════════════════════════════════════════ MOVIMIENTO REDUCIDO ══════════════════════════════════════════════════════════════════════ Los tokens ya ponen las duraciones en 0 y las distancias en 0, así que todo lo de arriba queda quieto por sí solo. Esto es la red de seguridad para las dos animaciones locales: se apagan del todo, y como su estado final es el natural del elemento, apagarlas nunca esconde contenido. */ @media (prefers-reduced-motion: reduce) { #siteHeader.mm-header::after { transition: none; } .mm-cat-panel, #userLoggedBox:hover .mm-acct-menu, #userLoggedBox:focus-within .mm-acct-menu, #headerMobileMenu.is-open { animation: none; } #vistaHome, #nosotrosView, #sucursalesView, #carritoView, #checkoutView, #misPedidosView, #loginView, #perfilView, #notFoundView, #forbiddenView { animation: none; } .mm-nav a::after { transition: none; } /* AUDITORÍA: los `transform` de esta hoja llevan valor de respaldo escrito a mano (`var(--mm-press, 0.97)`), y un fallback no lo apaga el interruptor por tokens de tokens.css — sólo lo apaga si el token existe. Estas reglas garantizan quietud pase lo que pase. */ .mm-cat-btn, .mm-search-btn, .mm-envio-suc, .mm-act, .mm-acct-trigger, .mm-footer-social a { transition: none; } .mm-cat-btn:active, .mm-search-btn:active, .mm-envio-suc:active, .mm-act:active, .mm-acct-trigger:active, .mm-footer-social a:hover, .mm-footer-social a:active { transform: none; } } /* ══════════════════════════════════════════════════════════════════════ SUGERENCIAS EN VIVO DEL BUSCADOR · js/ui/buscador.js ══════════════════════════════════════════════════════════════════════ El listbox no está en components/modal-buscador.html: lo monta el módulo una sola vez y lo inserta entre .mm-busc-barra y .mm-busc-cuerpo, dentro de .mm-busc-panel (flex column). De ahí el `flex: 0 1 auto` + `min-height: 0`: la lista puede crecer hasta su tope y, cuando ya no cabe, es el CUERPO (las tarjetas) el que cede altura, nunca la barra de búsqueda. Estas clases viven acá y no en mm-catalogo.css porque el buscador es chasis —se abre desde el header, en cualquier vista— y porque mm-catalogo.css ya es propiedad de otra tarea. El estado activo se pinta con la clase .is-activa que escribe el JS junto con aria-selected: un solo par de listeners delegados mueve las dos cosas, así el teclado y el mouse producen exactamente el mismo resultado. ────────────────────────────────────────────────────────────────────── */ .mm-sug { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; max-height: min(40vh, 320px); background: var(--mm-surface); border-bottom: 1px solid var(--mm-line-soft); animation: mm-sug-in var(--mm-dur-fast) var(--mm-ease-out) both; } /* Especificidad 0,2,0 para ganarle al `[hidden] { display: none }` del preflight de Tailwind pase lo que pase con el orden de las hojas. */ .mm-sug[hidden] { display: none; } /* Aviso del motor: sólo aparece cuando el backend responde origen 'similitud' o 'sinonimo'. Es role="status" aria-live="polite", así que el lector de pantalla lo anuncia sin robar el foco del input. */ .mm-sug-aviso { margin: 0; padding: var(--mm-s-3) var(--mm-s-4); background: var(--mm-red-tint); border-bottom: 1px solid var(--mm-line-soft); font-size: var(--mm-t-sm); font-style: italic; line-height: var(--mm-lh-snug); color: var(--mm-ink); } .mm-sug-aviso[hidden] { display: none; } @media (min-width: 768px) { .mm-sug-aviso { padding-inline: var(--mm-gutter); } } .mm-sug-lista { list-style: none; margin: 0; padding: var(--mm-s-2) 0; } /* Encabezado de sección. role="presentation": no es una opción, no se puede activar y las flechas lo saltan. */ .mm-sug-tit { padding: var(--mm-s-2) var(--mm-s-4) var(--mm-s-1); font-size: var(--mm-t-eyebrow); font-weight: var(--mm-w-bold); text-transform: uppercase; letter-spacing: var(--mm-ls-eyebrow); color: var(--mm-text-soft); } .mm-sug-op { display: flex; align-items: center; gap: var(--mm-s-3); min-height: var(--mm-tap); padding: var(--mm-s-2) var(--mm-s-4); border-left: 3px solid transparent; cursor: pointer; color: var(--mm-text); /* Sin transición de background: la fila activa cambia con cada flecha y un fundido de 140ms haría que la selección "arrastre" detrás del teclado. */ } @media (min-width: 768px) { .mm-sug-tit, .mm-sug-op { padding-inline: var(--mm-gutter); } .mm-sug-op { padding-inline-start: calc(var(--mm-gutter) - 3px); } } .mm-sug-op.is-activa { background: var(--mm-band); border-left-color: var(--mm-red-accent); } .mm-sug-ico { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; color: var(--mm-text-faint); } .mm-sug-ico svg { width: 18px; height: 18px; } .mm-sug-op.is-activa .mm-sug-ico { color: var(--mm-red-accent); } .mm-sug-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .mm-sug-nom { font-size: var(--mm-t-base); font-weight: var(--mm-w-medium); line-height: var(--mm-lh-snug); color: var(--mm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* El tramo que coincide con lo tecleado. `mark` por defecto viene con fondo amarillo del UA: se apaga y se marca sólo con color + peso, que es lo que ya hace la grilla de resultados con . */ .mm-sug-nom mark { background: transparent; color: var(--mm-red-accent); font-weight: var(--mm-w-bold); } .mm-sug-en { font-weight: var(--mm-w-regular); color: var(--mm-text-soft); } .mm-sug-sub { font-size: var(--mm-t-xs); color: var(--mm-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-sug-meta { flex: 0 0 auto; font-size: var(--mm-t-sm); font-weight: var(--mm-w-bold); color: var(--mm-red-accent); white-space: nowrap; } @keyframes mm-sug-in { from { opacity: 0; transform: translateY(calc(var(--mm-move-1, 4px) * -1)); } } /* ── Pista del atajo "/" ─────────────────────────────────────────────── La inserta buscador.js dentro de .mm-hd-search, antes de la lupa. Es un cartel, no un control: pointer-events:none para que el clic caiga en la barra y abra el buscador igual que si no estuviera. El atajo que anuncia es real (document keydown en buscador.js), y el input lleva además aria-keyshortcuts="/" para los lectores de pantalla. */ .mm-search-kbd { flex: 0 0 auto; display: grid; place-items: center; min-width: 22px; height: 22px; margin-inline-end: var(--mm-s-1); padding: 0 6px; border: 1px solid var(--mm-line); border-radius: var(--mm-r-xs); background: var(--mm-surface-2); color: var(--mm-text-soft); font-family: var(--mm-font); font-size: var(--mm-t-xs); font-weight: var(--mm-w-semi); line-height: 1; pointer-events: none; } /* Sin teclado físico el cartel sólo ocupa lugar en una barra ya angosta. Coincide con el breakpoint que decide cuál de los dos inputs se muestra. */ @media (max-width: 1023.98px) { .mm-search-kbd, .mm-solo-teclado { display: none; } } /* Tecla mencionada en el texto del estado vacío del buscador. */ .mm-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--mm-line); border-radius: var(--mm-r-xs); background: var(--mm-surface-2); color: var(--mm-text); font-family: var(--mm-font); font-size: var(--mm-t-xs); font-weight: var(--mm-w-semi); line-height: 1; vertical-align: baseline; } @media (prefers-reduced-motion: reduce) { .mm-sug { animation: none; } } /* Logo de marca en el header. Sustituye al texto "MEGA MAYORISTA." que habia antes: el PNG es blanco con transparencia, que es justo lo que pide el rojo del header. Se escala por ALTO —la proporcion 1080x444 la mantiene `width:auto`— para que ocupe lo mismo que ocupaba el texto y no empuje al buscador. */ .mm-logo-img { display: block; height: clamp(42px, 5.4vw, 68px); width: auto; max-width: 100%; }