/* GANK - Movil tipo app (solo <=991px). 2026-09-25 · v2 (app2): cookies sobre la barra, header sin parpadeo al pegarse, animacion suave. 2026-09-26 · v3: franja superior fija (.gank-topcap) y menu Catalogo con la barra visible. 2026-09-26 · v4 (app4): panel de categorias propio (.gank-cat, riel lateral + cuadricula). 1) Barra inferior fija: Inicio, Categorias, Carrito, Mi cuenta. 2) Header pegado que se esconde al bajar y reaparece al subir (clase en desde gank-app-mobile.js). 3) WhatsApp y "subir" a 44px (minimo recomendado para objetivos tactiles: Apple HIG y WCAG 2.5.5), colocados por encima de la barra. 4) Tinte de la franja de estado de iOS: el contenedor del buscador pegado era transparente y Safari no podia tomar un color uniforme del borde superior. Se le da el mismo blanco del header. Se carga al final de stylesheets.tpl. Nada de esto aplica en escritorio. */ @media (max-width:991px){ :root{--gank-tabbar-h:56px} /* --- 4) Borde superior uniforme para iOS --- */ #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper{background:#fff!important} /* --- 2) Esconder / mostrar header pegado --- v2: se quita la animacion de entrada del tema (gank-mobile-header-enter / mySticky); el movimiento lo hace solo la transicion de transform. Aparecer: .45s con desaceleracion suave. Esconder: .3s acelerando. html.gank-hdr-instant corta la transicion en el instante en que el tema pega el header bajando (entra ya escondido, sin parpadeo). */ #tvcms-mobile-view-header .tvcmsheader-sticky.sticky, #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper{ animation:none!important; transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease!important;will-change:transform} html.gank-hdr-hidden #tvcms-mobile-view-header .tvcmsheader-sticky.sticky, html.gank-hdr-hidden #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper{ transform:translateY(calc(-100% - 20px - env(safe-area-inset-top,0px)))!important; transition:transform .3s cubic-bezier(.4,0,1,1),box-shadow .3s ease!important; box-shadow:none!important;pointer-events:none} html.gank-hdr-instant #tvcms-mobile-view-header .tvcmsheader-sticky.sticky, html.gank-hdr-instant #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper{ transition:none!important} /* El buscador mide 80px y no el 100% de la fila: se sube por su propia altura mas la franja */ html.gank-hdr-hidden #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper{ transform:translateY(calc(-100px - env(safe-area-inset-top,0px)))!important} /* --- 1) Barra inferior --- */ .gank-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:999;display:flex;align-items:stretch; height:calc(var(--gank-tabbar-h) + env(safe-area-inset-bottom,0px)); padding:0 0 env(safe-area-inset-bottom,0px);margin:0;box-sizing:border-box; background:#fff;border-top:1px solid #ececec;box-shadow:0 -4px 14px rgba(0,0,0,.08); font-family:inherit} .gank-tabbar__item{flex:1 1 25%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;padding:6px 2px 4px;margin:0;border:0;background:none;cursor:pointer; color:#3a3a3a;text-decoration:none!important;font:inherit;font-size:11px;font-weight:600;line-height:1.1; -webkit-tap-highlight-color:transparent} .gank-tabbar__item:hover,.gank-tabbar__item:focus{color:#111} .gank-tabbar__item[aria-current="page"]{color:#111} .gank-tabbar__item[aria-current="page"] .gank-tabbar__icon{color:#F5A800} .gank-tabbar__item:focus-visible{outline:2px solid #111;outline-offset:-4px;border-radius:8px} .gank-tabbar__icon{position:relative;display:block;width:24px;height:24px} .gank-tabbar__icon svg{display:block;width:24px;height:24px} .gank-tabbar__label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gank-tabbar__badge{position:absolute;top:-6px;left:14px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box; border-radius:9px;background:#111;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center} .gank-tabbar__badge[hidden]{display:none} /* Contenido: que el final de la pagina no quede bajo la barra */ body.gank-has-tabbar{padding-bottom:calc(var(--gank-tabbar-h) + env(safe-area-inset-bottom,0px))!important} /* --- 3) Flotantes a 44px, arriba de la barra --- */ body.gank-has-tabbar .wa-float{width:44px!important;height:44px!important; bottom:calc(var(--gank-tabbar-h) + 12px + env(safe-area-inset-bottom,0px))!important} body.gank-has-tabbar .wa-float__icon{width:26px!important;height:26px!important} body.gank-has-tabbar .tvbottom-to-top{width:44px!important;height:44px!important;padding:0!important; background:transparent!important;box-shadow:none!important;border:0!important; bottom:calc(var(--gank-tabbar-h) + 12px + env(safe-area-inset-bottom,0px))!important} /* Boton "subir": blanco al 90 %, flecha oscura centrada con flex (sin depender del line-height) */ body.gank-has-tabbar .tvbottom-to-top .tvbottom-to-top-icon{ width:44px!important;height:44px!important;padding:0!important;margin:0!important;box-sizing:border-box; display:flex!important;align-items:center!important;justify-content:center!important; border-radius:50%!important;background:rgba(255,255,255,.9)!important;color:#1a1a1a!important; border:1px solid rgba(0,0,0,.08)!important;box-shadow:0 2px 8px rgba(0,0,0,.15)!important; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} body.gank-has-tabbar .tvbottom-to-top .tvbottom-to-top-icon span{display:none!important} body.gank-has-tabbar .tvbottom-to-top .tvbottom-to-top-icon i{ display:block!important;width:24px!important;height:24px!important;margin:0!important;padding:0!important; font-size:24px!important;line-height:24px!important;color:#1a1a1a!important;text-align:center; position:static!important;transform:none!important} /* El panel del carrito ocupa todo el alto: ahi la barra se oculta. */ body.classicCartOpen .gank-tabbar{visibility:hidden} /* v3: menu Catalogo (Categorias). La barra inferior sigue visible (z 999, por encima del fondo oscuro z 99) y el panel termina justo encima de ella. WhatsApp y "subir" se ocultan mientras el menu esta abierto para no quedar encima del panel. */ /* El panel vive dentro del header pegado (que lleva transform), asi que su "fixed" se mide contra el header y no contra la pantalla: por eso se fija la altura y no el bottom. */ body.gank-has-tabbar .tvmobile-slidebar{ bottom:auto!important; height:calc(100vh - var(--gank-tabbar-h) - env(safe-area-inset-bottom,0px))!important; height:calc(100dvh - var(--gank-tabbar-h) - env(safe-area-inset-bottom,0px))!important} body.mobile-menu-open .wa-float, body.mobile-menu-open .tvbottom-to-top{opacity:0!important;visibility:hidden!important;pointer-events:none!important} body.mobile-menu-open .gank-tabbar__cats{color:#111} body.mobile-menu-open .gank-tabbar__cats .gank-tabbar__icon{color:#F5A800} /* v3: franja superior fija y blanca. Safari (iOS 26) pinta la zona de la hora con el color del elemento fijo que toca el borde superior, pero solo cuando lo vuelve a medir. El header pegado se mueve con transform y el buscador es otro fijo encima, asi que a veces no lo detectaba y se veia la pagina pasar por detras de la hora (al abrir y cerrar el menu si lo detectaba). Esta franja nunca se mueve: el borde superior siempre es un solo blanco uniforme. z 102: encima del header (100) y del buscador (101), debajo de los paneles (1001+). Sin pointer-events:none a proposito: Safari puede ignorar elementos que no reciben toques. */ .gank-topcap{position:fixed;top:0;left:0;right:0;z-index:102; height:calc(env(safe-area-inset-top,0px) + 8px);background:#fff} /* Los paneles (menu, carrito, cuenta) viven dentro del header (z 100): con uno abierto la franja se quita para no taparles la parte de arriba. Esos paneles ya son blancos arriba. */ body.mobile-menu-open .gank-topcap, body.classicCartOpen .gank-topcap, body.dropdown-open .gank-topcap{display:none} /* --- v4: panel de categorias (riel lateral + cuadricula, opcion B) --- Ocupa de arriba hasta la barra inferior, que sigue visible. z 1003: por encima del header (100), de la franja superior (102) y de los paneles del tema. */ .gank-cat{position:fixed;left:0;right:0;top:0;z-index:1003; bottom:calc(var(--gank-tabbar-h) + env(safe-area-inset-bottom,0px)); display:flex;flex-direction:column;background:#fff;color:#1a1a1a;font-family:inherit; padding-top:env(safe-area-inset-top,0px);box-sizing:border-box; opacity:0;transform:translateY(12px);transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1)} .gank-cat[hidden]{display:none} .gank-cat.is-in{opacity:1;transform:none} .gank-cat a{text-decoration:none!important;color:#1a1a1a} .gank-cat ul{list-style:none;margin:0;padding:0} .gank-cat button{font-family:inherit} .gank-cat a:focus-visible,.gank-cat button:focus-visible{outline:3px solid #1a1a1a;outline-offset:-3px;border-radius:12px} .gank-cat__head{display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 12px 8px 16px; box-sizing:border-box;border-bottom:1px solid #ececec;flex-shrink:0} .gank-cat__title{flex:1;margin:0;font-size:20px;font-weight:800;line-height:1.2;text-transform:none;color:#1a1a1a} .gank-cat__close{width:44px;height:44px;border:0;border-radius:22px;background:#f3f3f3;color:#1a1a1a; display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0} .gank-cat__body{flex:1;min-height:0;display:flex} .gank-cat__rail{width:104px;flex-shrink:0;background:#f3f3f3;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column} .gank-cat__railitem{min-height:84px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:6px;padding:10px 6px;font-size:12px;font-weight:600;line-height:1.2;color:#1a1a1a; text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;box-sizing:border-box} .gank-cat__railitem.is-on{background:#fff;font-weight:800} .gank-cat__railicon{width:36px;height:36px;border-radius:10px;background:#e3e3e3;display:flex;align-items:center;justify-content:center} .gank-cat__railitem.is-on .gank-cat__railicon{background:#F5A800} .gank-cat__railicon svg{display:block} .gank-cat__railgo{font-size:11px;font-weight:700;color:#4a4a4a} .gank-cat__pane{flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 24px;box-sizing:border-box; display:flex;flex-direction:column;gap:18px} .gank-cat__panehead{display:flex;align-items:center;gap:8px} .gank-cat__panetitle{flex:1;margin:0;font-size:20px;font-weight:800;line-height:1.2;text-transform:none;color:#1a1a1a} .gank-cat__all{min-height:44px;padding:0 12px;border:1px solid #1a1a1a;border-radius:10px;display:inline-flex;align-items:center; font-size:13px;font-weight:700;white-space:nowrap;box-sizing:border-box} /* v5: un solo estilo de tarjeta (miniatura + nombre) para todo el panel, como las subcategorias del listado. 2 columnas: a 3 no caben palabras como Fotogrametria o Procesadores sin partirse. */ .gank-cat__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none} .gank-cat__grid>li{display:flex;min-width:0} .gank-cat__tile{flex:1;min-width:0;min-height:96px;padding:10px 6px;border:1px solid #e5e7eb;border-radius:10px;background:#fff; display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;box-sizing:border-box; font-size:12.5px;font-weight:600;line-height:1.2;text-align:center;color:#1a1a1a;overflow-wrap:break-word} .gank-cat__tile:active{background:#fafafa;border-color:#cfd3d8} .gank-cat__thumb{flex:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:#9aa0a6} .gank-cat__thumb img{display:block;width:48px;height:48px;object-fit:contain} .gank-cat__thumb svg{display:block} .gank-cat__group{display:flex;flex-direction:column;gap:6px} .gank-cat__grouptitle{min-height:44px;display:flex;align-items:center;gap:6px;font-size:15px;font-weight:800} .gank-cat__grouptitle span{flex:1} .gank-cat__grouptitle svg{color:#5c5c5c} .gank-cat__status{margin:8px 2px;font-size:14px;color:#4a4a4a} /* v6: sin boton de menu (tres lineas) en el header: la columna se colapsa y el logo se alinea con el buscador. La clase la pone gank-app-mobile.js solo cuando el panel de Categorias existe. El menu lateral del tema sigue en la pagina (position:fixed) por si el panel no pudiera leer las categorias. */ html.gank-no-hdr-menu #tvcms-mobile-view-header .tvcmsmobile-header-menu{width:0!important;min-width:0!important; flex:0 0 0!important;padding:0!important;margin:0!important} html.gank-no-hdr-menu #tvcms-mobile-view-header .tvmobile-sliderbar-btn{display:none!important} html.gank-no-hdr-menu #tvcms-mobile-view-header .tvcmsmobile-header-logo-right-wrapper{padding-left:0!important} /* v7: header movil limpio (clase html.gank-clean-hdr, la pone el JS al crear la barra inferior). - Mi cuenta: oculto (la barra lo tiene). - Carrito: solo se esconde el icono; #tvmobile-cart sigue en la pagina porque ahi vive el panel lateral que abre el boton Carrito de la barra. - Columna de iconos colapsada, logo centrado y buscador pegado de borde a borde. */ html.gank-clean-hdr #tvcms-mobile-view-header #tvcmsmobile-account-button{display:none!important} html.gank-clean-hdr #tvcms-mobile-view-header .tvcmsmobile-cart-acount-text{width:0!important;min-width:0!important; flex:0 0 0!important;padding:0!important;margin:0!important;overflow:visible!important} html.gank-clean-hdr #tvcms-mobile-view-header #tvmobile-cart .tvheader-cart-btn-wrapper{position:absolute!important; width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;opacity:0!important; pointer-events:none!important} html.gank-clean-hdr #tvcms-mobile-view-header .tvcmsmobile-header-logo-right-wrapper{flex:1 1 auto!important; width:auto!important;max-width:none!important;padding:0!important;justify-content:center!important} html.gank-clean-hdr #tvcms-mobile-view-header .tvcmsmobile-header-logo-right-wrapper img.logo{margin-left:auto!important; margin-right:auto!important} html.gank-clean-hdr #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper{ left:15px!important;right:15px!important;width:auto!important} /* Con el panel abierto: sin scroll de fondo, sin flotantes, Categorias marcada. */ html:has(body.gank-cat-open),body.gank-cat-open{overflow:hidden!important} body.gank-cat-open .wa-float, body.gank-cat-open .tvbottom-to-top{opacity:0!important;visibility:hidden!important;pointer-events:none!important} body.gank-cat-open .gank-tabbar__cats{color:#111} body.gank-cat-open .gank-tabbar__cats .gank-tabbar__icon{color:#F5A800} /* v2: aviso de cookies (modulo tvcmscookiesnotice: fixed, bottom:0, z-index:100) quedaba debajo de la barra (z 999) y no se podia cerrar. Se coloca encima de la barra y por delante de todo, incluidos WhatsApp y "subir" (z 99999), mientras siga visible. */ body.gank-has-tabbar .tvcmscookies-notice{ bottom:calc(var(--gank-tabbar-h) + env(safe-area-inset-bottom,0px))!important;z-index:100000!important} } /* Checkout tiene su propia barra inferior: ahi no se muestra la nuestra (el JS tampoco la crea). */ body#checkout .gank-tabbar{display:none!important} @media (min-width:992px){ .gank-tabbar,.gank-topcap,.gank-cat{display:none!important} } @media (max-width:991px) and (prefers-reduced-motion:reduce){ #tvcms-mobile-view-header .tvcmsheader-sticky.sticky, #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper, html.gank-hdr-hidden #tvcms-mobile-view-header .tvcmsheader-sticky.sticky, html.gank-hdr-hidden #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper, .gank-cat{transition:none!important} }