/* ========================================================================== MatzApp - Header movil (mlayouts/header-mstyle1.php) -------------------------------------------------------------------------- El tema conmuta el layout en el SERVIDOR segun el User-Agent (lib/mobile-layout.php). Cuando lo hace, anade la clase `mobile-layout` al (lib/cleanup.php:36-38) y pinta `.header-mobile-style1`. Esa rama nunca se habia usado en este sitio (la opcion apuntaba a una plantilla inexistente), asi que no tenia ningun ajuste de marca. ALCANCE (leer antes de tocar nada): - Secciones 1, 2 y 3: acotadas a `.mobile-layout` / `.header-mobile-style1`. El sitio de escritorio NO puede verse afectado por ellas. - Seccion 3-bis (panel lateral MENU / CATEGORIAS): NO esta acotada, porque ese panel lo comparten la rama movil y la rama responsive de escritorio. En escritorio ancho el panel existe pero esta fuera de pantalla. Version: 20260815.7 ========================================================================== */ /* -------------------------------------------------------------------------- 1. Recorte lateral de 5px (afecta a TODA la pagina en movil) -------------------------------------------------------------------------- `app-orange.css` trae: body.mobile-layout .container { padding: 0 10px; } -> (0,2,1) mientras que `.row` y `.vc_row` conservan `margin: 0 -15px`. La diferencia de 5px hace que cada fila mida 424px dentro de un viewport de 414 y arranque en x=-5, de modo que `.body-wrapper` (overflow:hidden) recorta 5px del borde izquierdo de toda la pagina. `app-responsive.css` ya intenta corregirlo con `body .container { padding: 0 15px }`, pero su especificidad (0,1,1) pierde contra la de arriba, asi que nunca llega a aplicarse. Se restaura el par estandar de Bootstrap: container 15px / row -15px. Se usa `html body.mobile-layout` (0,2,2) para ganar por especificidad y no depender del orden de carga de las hojas. -------------------------------------------------------------------------- */ html body.mobile-layout .container { padding-left: 15px; padding-right: 15px; } /* -------------------------------------------------------------------------- 2. Areas tactiles del header -------------------------------------------------------------------------- Medido en el header renderizado (iPhone 414x896): hamburguesa de categorias .... 26 x 26 icono de busqueda ............ 26 x 26 enlace del carrito ........... 15 x 19 El minimo recomendado es 44x44 (mismo criterio aplicado en el resto del sitio). Se agranda el AREA PULSABLE con flex, sin tocar el tamano visual del icono, y el header sigue cabiendo en sus ~69px de alto. -------------------------------------------------------------------------- */ .header-mobile-style1 .header-menu-categories .navbar-toggle, .header-mobile-style1 .mobile-search .icon-seach { min-width: 44px; min-height: 44px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; box-sizing: border-box; } /* Carrito: caso aparte. Su enlace mide 15x19 y lleva ENCIMA el contador de unidades, posicionado en absoluto respecto del PROPIO ENLACE (el tema le pone `position:relative`; el contador va con `top:7px; right:8px`). Si se agranda el enlace a 44x44 con flex, el icono de la bolsa se recentra dentro de la caja nueva pero el contador no le sigue, y el numero queda descolgado. Tampoco sirve agrandarlo con padding: su contenedor `.header-cart` calcula `width:0`, asi que la caja no crece lo suficiente (queda en 30x26). Solucion: una capa invisible con `::after` centrada sobre el icono. Amplia la zona pulsable a 44x44 SIN tocar la caja del enlace, de modo que ni el icono ni el contador se mueven. El tema ya declara `position:relative` en este enlace, asi que sirve de referencia (no hay que anadirlo: hacerlo descolgaria el contador). */ .header-mobile-style1 .header-cart > a::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* ALINEACION VERTICAL DE LOS CUATRO BLOQUES DEL HEADER. Medido en produccion a 390px, el centro vertical de cada control era: hamburguesa 35 · logo 36 · lupa 37 · CARRITO 25 El carrito colgaba ~10px por encima del resto y se veia descuadrado. Causa: su contenedor `.header-cart` solo mide 24px de alto (el enlace es de 15x19 y `.onemall-minicart-mobile` calcula altura 0) mientras los demas ocupan 44 y, al ser `float:right`, se alinea arriba. Se fija la MISMA altura a los cuatro contenedores y se centra su contenido. Se centra el CONTENEDOR, nunca el icono: el contador del carrito (.minicart-number) esta posicionado en absoluto respecto del enlace, asi que mover el enlace entero lo lleva consigo y la burbuja no se descuelga. La altura es 52 (no 44) porque el logo se muestra a 64px: los iconos conservan sus 44x44 y solo crece la caja que los envuelve. Poner la altura en los ICONOS en vez de en los contenedores deformaba la hamburguesa, que pasaba de cuadrada a rectangulo alto. Dispersion resultante: 2px (39 · 40 · 41 · 41). */ .header-mobile-style1 .header-menu-categories, .header-mobile-style1 .onemall-logo, .header-mobile-style1 .mobile-search, .header-mobile-style1 .header-cart { height: 52px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /* OJO - NO convertir `.header-top-mobile` en flex. La plantilla coloca sus cuatro bloques con floats de Bootstrap (`pull-left` en categorias y logo, `pull-right` en carrito y buscador). Al pasar el contenedor a `display:flex` los floats dejan de aplicarse y los cuatro se alinean a la izquierda en orden de DOM: el carrito y la lupa se van al centro. Se deja el layout de floats del tema tal cual. */ /* El logo es el unico enlace que ya rozaba el minimo (41x44): se completa. */ .header-mobile-style1 .onemall-logo > a { display: inline-block; min-height: 44px; } /* LOGO CENTRADO en la barra (decision del cliente). Se saca del flujo de floats y se ancla al centro de `.header-top-mobile`, que ya es `position:relative` (ver seccion 4). TRAMPA - `top:0` NO alinea con el resto. El contenedor tiene `padding-top:13px` y el bloque contenedor de un elemento absoluto es su caja de RELLENO, no la de contenido: con `top:0` el logo se pega a y=0 mientras los demas arrancan en y=13, y la dispersion vertical se va a 15px. Se usa `top:50%` + `translate(-50%,-50%)`, que centra en esa misma caja sin depender del valor del relleno. Probado tambien `top:13px` (identico resultado) pero se descarta por fijar a mano un valor del tema. Medido a 360, 390 y 414px: desvio del centro 0px, dispersion vertical 2px (39 · 39 · 41 · 41) y sin solaparse con la hamburguesa ni con la lupa. */ .header-mobile-style1 .onemall-logo { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0 !important; float: none !important; z-index: 2; } /* -------------------------------------------------------------------------- 3. Menu de categorias -------------------------------------------------------------------------- `mlayouts/header-mstyle1.php:13-16` vuelca el menu de la ubicacion `vertical_menu` dentro del header, asi que el desplegable debe poder desplazarse en lugar de crecer sin limite por debajo del pliegue. OJO: en la practica el tema mantiene ese bloque OCULTO y la hamburguesa abre el panel lateral de la seccion 3-bis, que es otro elemento distinto. Estas reglas son por si alguna vez se muestra; el estilo que se ve de verdad es el de 3-bis. -------------------------------------------------------------------------- */ .header-mobile-style1 .header-menu-categories .vertical_megamenu ul.nav { max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Filas del menu comodas de pulsar. */ .header-mobile-style1 .header-menu-categories .vertical_megamenu ul.nav > li > a { padding-top: 11px; padding-bottom: 11px; min-height: 44px; } /* -------------------------------------------------------------------------- 3-bis. Panel lateral de navegacion (pestanas MENU / CATEGORIAS) -------------------------------------------------------------------------- Lo pinta `lib/responsive_dropdown_sidebar.php` (incluido desde `lib/nav.php`) y lo abre la hamburguesa del header. Estructura real: .menu-responsive-wrapper > .menu-close > .menu-responsive-inner > ul.nav-tabs (Menu / Categorias) > .tab-content > #ResPrimary / #ResVertical > ul.menu.onemall-menures > li > a.item-link (nivel 1) > span.show-dropdown (flecha) > ul.dropdown-resmenu > li > a (nivel 2) Problema: el tema pinta los dos niveles casi identicos (mismo tamano, mismo peso, mismo color #333, sangria de 20px), asi que el desplegable de un departamento no se distingue de la lista de departamentos y el panel se lee como una lista plana desordenada. OJO: este panel lo comparten la rama movil Y la rama responsive de escritorio, por eso estas reglas NO se acotan a `.mobile-layout`. En escritorio ancho el panel existe pero esta fuera de pantalla, asi que estilizarlo no tiene efecto visible ahi. -------------------------------------------------------------------------- */ .menu-responsive-wrapper .menu-responsive-inner { background: #fff; } /* Pestanas */ .menu-responsive-wrapper .nav-tabs { border-bottom: 1px solid #e6eaf2; background: #fff; } .menu-responsive-wrapper .nav-tabs > li > a { min-height: 52px; line-height: 32px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a97ab; margin: 0; border: 0 !important; background: transparent !important; border-radius: 0; } .menu-responsive-wrapper .nav-tabs > li.active > a { color: #2e448e !important; background: #fff !important; box-shadow: inset 0 -3px 0 #2e448e; /* subrayado de marca en la activa */ } /* Boton de cerrar. El tema lo saca FUERA del panel con `right:-25px` sobre una caja de 25x25, como una pestanita pegada al borde derecho. Al agrandarlo a 44x44 (area tactil) se quedaba a caballo del borde: 19px dentro y 25px fuera, que es justo lo que se veia descuadrado. Dejarlo fuera con `right:-44px` tampoco sirve: el panel mide 320px fijos y en pantallas de 360px el boton se saldria (320+44 = 364 > 360). Se mete DENTRO, arriba a la derecha, y se le reserva una franja propia con `padding-top` en `.menu-responsive-inner` para que no pise las pestanas. */ .menu-responsive-wrapper .menu-responsive-inner { padding-top: 48px; } .menu-responsive-wrapper .menu-close { top: 6px !important; right: 8px !important; left: auto !important; width: 40px !important; height: 40px !important; border-radius: 50%; background-color: #f1f4f9 !important; color: #2e448e; font-size: 15px; z-index: 5; background-position: center center !important; background-repeat: no-repeat !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* Nivel 1 - departamentos: navy, negrita, fila alta. El `!important` del color es necesario: `app-orange.css` trae `.resmenu-container.resmenu-container-sidebar .menu-responsive-wrapper .menu` con especificidad (0,4,0), que gana a cualquier selector razonable de aqui. */ .menu-responsive-wrapper ul.onemall-menures > li { border-bottom: 1px solid #eef1f6; } .menu-responsive-wrapper ul.onemall-menures > li > a { min-height: 52px; padding: 15px 52px 15px 18px; font-size: 15px; font-weight: 600; color: #2e448e !important; line-height: 22px; border: 0 !important; } .menu-responsive-wrapper ul.onemall-menures > li.active > a { color: #1d2b5c !important; } /* Flecha de desplegar: medía 40x39. */ .menu-responsive-wrapper .show-dropdown { width: 52px !important; height: 52px !important; line-height: 52px !important; top: 0 !important; right: 0 !important; text-align: center; } /* Nivel 2 - subcategorias: bloque con fondo tenue y barra de marca a la izquierda, texto menor y mas claro. Es lo que da la jerarquia. */ .menu-responsive-wrapper ul.dropdown-resmenu { background: #f6f8fc; border-left: 3px solid #2e448e; margin: 0; padding: 4px 0; } .menu-responsive-wrapper ul.dropdown-resmenu > li { border-bottom: 1px solid #e8edf6; } .menu-responsive-wrapper ul.dropdown-resmenu > li:last-child { border-bottom: 0; } .menu-responsive-wrapper ul.dropdown-resmenu > li > a { min-height: 44px; padding: 11px 18px 11px 26px; font-size: 13.5px; font-weight: 400; color: #54607a !important; line-height: 22px; } /* -------------------------------------------------------------------------- 3-ter. Bloque "Tu cuenta" dentro de la pestana MENU -------------------------------------------------------------------------- Lo inyecta `matizapp_links_cuenta_en_panel_movil()` (functions.php) porque el header movil no tiene la barra superior de escritorio y esos enlaces (Mi cuenta / Lista de deseos / Finalizar compra / sesion) no eran alcanzables desde el telefono. Se pintan como bloque secundario para que no compitan con la navegacion principal: rotulo pequeno en mayusculas y enlaces mas ligeros que los departamentos. -------------------------------------------------------------------------- */ .menu-responsive-wrapper ul.onemall-menures > li.matz-cuenta-titulo { border-bottom: 0; background: #f6f8fc; } .menu-responsive-wrapper ul.onemall-menures > li.matz-cuenta-titulo > span { display: block; padding: 16px 18px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a97ab; line-height: 16px; } .menu-responsive-wrapper ul.onemall-menures > li.matz-cuenta-item { background: #f6f8fc; border-bottom: 1px solid #e8edf6; } .menu-responsive-wrapper ul.onemall-menures > li.matz-cuenta-item:last-child { border-bottom: 0; } .menu-responsive-wrapper ul.onemall-menures > li.matz-cuenta-item > a { min-height: 46px; padding: 12px 18px; font-size: 14px !important; font-weight: 500 !important; color: #54607a !important; line-height: 22px; } /* -------------------------------------------------------------------------- 4. Panel de busqueda desplegable -------------------------------------------------------------------------- Estado que traia el tema, medido en produccion a 390px: - `.top-form` es `position:absolute` anclado a `.mobile-search`, que solo mide 54px de ancho -> el panel salia como una tira de 270x32 en x=77, ni pegado a un borde ni centrado, y ademas SOBRESALIA por debajo del header (y=52 + 32 = 84, con el header de 74). - El campo tenia `font-size: 11px`. Por debajo de 16px **iOS hace zoom automatico al enfocar**, y luego el usuario se queda con la pagina ampliada. Es el motivo principal para forzar 16px aqui. - El boton de buscar media 26x32. OJO - el input NO lleva atributo `type`. Un selector `input[type="text"]` NO lo alcanza (fue el fallo de la primera version de este bloque); hay que anadir `input:not([type])`. Solucion: se mueve el contexto de posicionamiento a `.header-top-mobile` (la barra completa) para que el panel pueda ir de borde a borde justo debajo del header. -------------------------------------------------------------------------- */ .header-mobile-style1 .header-top-mobile { position: relative; } .header-mobile-style1 .mobile-search { position: static; } .header-mobile-style1 .mobile-search .top-form { top: 100% !important; left: 0 !important; right: 0 !important; width: auto !important; background: #fff; padding: 10px 15px 14px; border-top: 1px solid #e6eaf2; box-shadow: 0 10px 20px rgba(30, 45, 90, .14); z-index: 60; } .header-mobile-style1 .mobile-search .topsearch-entry, .header-mobile-style1 .mobile-search .topsearch-entry form, .header-mobile-style1 .mobile-search .topsearch-entry form > div { width: 100%; } .header-mobile-style1 .mobile-search .topsearch-entry form { position: relative; } .header-mobile-style1 .mobile-search .topsearch-entry input[type="text"], .header-mobile-style1 .mobile-search .topsearch-entry input:not([type]) { width: 100% !important; height: 46px !important; line-height: 46px !important; font-size: 16px !important; /* < 16px = iOS hace zoom al enfocar */ padding: 0 56px 0 16px !important; margin: 0 !important; border: 1px solid #d7dee9 !important; border-radius: 24px !important; background: #fff !important; box-sizing: border-box !important; } .header-mobile-style1 .mobile-search .topsearch-entry .button-search-pro { width: 48px !important; height: 46px !important; top: 0 !important; right: 0 !important; border-radius: 0 24px 24px 0 !important; background-position: center center !important; }