/* ========================== EL PADDING CUENTA DENTRO DEL ANCHO ========================== ESTA LINEA ARREGLA LA FRANJA BLANCA DE LA DERECHA EN EL CELULAR. La tienda NO tenia reinicio de box-sizing. En todo el sitio publico habia una sola regla que lo declarara, y era para dos botones flotantes. El panel de administracion si lo tenia desde el principio; la tienda no, y nadie se dio cuenta porque el sintoma no es que algo se vea roto: es que la pagina se puede correr de lado unos pixeles. Lo que pasaba, medido en la tienda de verdad: .site-shell -> width:100% (390px) + padding 0 14px = 418px de caja Con content-box el padding se SUMA al 100%, asi que el contenedor principal media 28px mas que la pantalla. De ahi todo lo demas: la pagina se podia arrastrar 28px a la derecha, y al hacerlo el encabezado —que si media 390— dejaba ver una franja en blanco al lado. Parecia que "el menu no ocupa toda la pantalla"; lo que no ocupaba toda la pantalla era la PAGINA. En escritorio pasaba igual y era peor: a 1265px el padding de clamp(16px,2vw,36px) mas los 78px de la derecha dejaban el documento en 1369px, o sea 104px de desplazamiento lateral en todas las pantallas. Medido antes y despues en store.minksoft.co, en el movil y en el escritorio: de 28px y 104px de desborde a CERO. Y comparando elemento por elemento, lo unico que cambia de tamano son los descendientes del contenedor que se encoge, mas dos detalles de la ficha de producto que ahora miden lo que decian medir: las miniaturas (64px pedidos, 68px pintados por el borde) y la caja de cantidad. ========================== */ *, *::before, *::after { box-sizing: border-box; } /* RED DE SEGURIDAD, NO EL ARREGLO. El arreglo es la regla de arriba. Esto es para el dia que alguien meta un bloque mas ancho que la pantalla y no se de cuenta: en una tienda, que el visitante pueda arrastrar la pagina de lado se ve como un sitio mal hecho. `clip` y NO `hidden`, y la diferencia importa: `hidden` convierte al elemento en un contenedor de desplazamiento, y eso rompe `position:sticky` en todo lo que tenga dentro. `clip` recorta sin crear ese contenedor. Comprobado en la tienda de verdad: el desplazamiento vertical sigue funcionando y los botones flotantes siguen pegados donde estaban. En un navegador viejo que no entienda `clip` esta linea simplemente no hace nada, que es exactamente el comportamiento de antes. */ html { overflow-x: clip; } /* ========================== LOS MAPAS NO SE PINTAN ENCIMA DE LO DEMAS ========================== Leaflet apila sus capas con numeros propios y altos: los paneles van de 200 a 700 y los controles de zoom estan en 1000. Las capas de la tienda son mucho mas bajas —el riel de redes en 45, los botones flotantes en 50, el panel del chat en 60—, asi que el mapa le gana a todos. Donde se nota: el CHECKOUT, que es la unica pagina publica con mapa y justo la que no puede fallar. El mapa de elegir la direccion tapaba el boton del carrito y el panel del chat. El arreglo no es subirle el numero a lo de la tienda —eso es una carrera que se pierde con la siguiente libreria— sino encerrar el mapa en su propio contexto de apilamiento. Con `isolation:isolate`, los 1000 de Leaflet se comparan solo entre ellos DENTRO de la caja; hacia afuera la caja vale lo que diga su z-index, que es 0. El mapa conserva su orden interno y deja de competir con la pagina. `.leaflet-container` es la clase que Leaflet le pone al div el solo, asi que esto se aplica tambien a cualquier mapa que se agregue despues sin que nadie tenga que acordarse. `.mapa` se escribe ademas en la vista para que se entienda de donde sale. ========================== */ .mapa, .leaflet-container { position: relative; z-index: 0; isolation: isolate; } /* ========================== EL PIE SIEMPRE ABAJO ========================== Con poco contenido —una tienda recien creada, una categoria vacia, una busqueda sin resultados— el pie quedaba flotando a media pantalla y debajo se veia el fondo del navegador. Da la impresion de que la pagina se corto. La receta: el body es una columna de alto minimo la pantalla, y el bloque central es el unico que crece. Si el contenido es largo, todo empuja hacia abajo como siempre; si es corto, el hueco se lo come el centro y el pie aterriza justo al borde. Va aqui y no en cada plantilla porque las siete cargan este archivo primero y ninguna de ellas declara `display` sobre el body — asi que esto no le pisa nada a nadie. */ body { min-height: 100vh; display: flex; flex-direction: column; } /* ========================== CINTA DE PROMOCIONES ========================== La franja de arriba con mensajes cortos que se desplazan hacia la izquierda. La pinta _CintaPromos.cshtml desde _Header, así que queda como hijo directo del body: ancho completo sin tocar ninguno de los siete layouts. */ .cinta { /* `0 0 auto`: el body es una columna flex y .site-shell es el único que puede crecer (de eso depende que el pie quede abajo). Sin esto, la cinta se estiraría o se encogería según el contenido de la página. */ flex: 0 0 auto; overflow: hidden; /* Gris medio y color heredado: es lo ÚNICO que se lee igual en las siete plantillas, claras y oscuras. Una franja negra con letra blanca se ve muy bien en Moderno y desaparece en Zafiro. */ background: rgba(128,128,128,.14); border-bottom: 1px solid rgba(128,128,128,.25); color: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 7px 0; } .cinta-pista { display: flex; /* `max-content` para que la pista mida lo que miden sus mensajes y no el ancho de la pantalla. Si se encogiera, el -50% de la animación dejaría de coincidir con una copia exacta y el bucle daría un salto visible. */ width: max-content; animation-name: cinta-correr; animation-timing-function: linear; animation-iteration-count: infinite; /* La duración la pone la vista, con los segundos que configuró la tienda. */ } /* Se detiene al pasar el mouse, para alcanzar a leer un mensaje. En táctil no hay hover y no pasa nada: la cinta sigue andando, que es el comportamiento correcto en un celular. */ .cinta:hover .cinta-pista { animation-play-state: paused; } .cinta-grupo { display: flex; flex: none; } .cinta-item { padding: 0 28px; white-space: nowrap; } /* El separador entre mensajes. Va como pseudo-elemento y no como carácter dentro del texto: así un lector de pantalla no lee "punto" entre frases. */ .cinta-item::after { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .45; margin-left: 28px; vertical-align: middle; } @keyframes cinta-correr { from { transform: translateX(0); } /* -50% = exactamente una de las dos copias de los mensajes. */ to { transform: translateX(-50%); } } /* Hay quien marca en su sistema que no quiere animaciones, y no es un capricho: a alguien con vértigo o migraña vestibular, un texto cruzando la pantalla sin parar le produce malestar físico. No se esconde la cinta —la información sigue sirviendo—: se detiene y los mensajes se acomodan centrados, envolviéndose si no caben. */ @media (prefers-reduced-motion: reduce) { .cinta-pista { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; } /* La segunda copia sobra cuando no hay movimiento: repetiría todo. */ .cinta-grupo[aria-hidden="true"] { display: none; } .cinta-grupo { flex-wrap: wrap; justify-content: center; } } @media (max-width: 780px) { .cinta { font-size: .72rem; } .cinta-item { padding: 0 16px; } .cinta-item::after { margin-left: 16px; } } /* ========================== CONTENEDOR PRINCIPAL ========================== */ .site-shell { /* FLEX Y NO GRID, PARA QUE LA COLUMNA QUE NO ESTÁ NO OCUPE SITIO. Con `grid-template-columns: 250px 1fr` la primera columna existe aunque nadie la llene: la tarjeta de la izquierda la apaga el dueño de la tienda desde Configuración, y al apagarla quedaban 250px en blanco a la izquierda con todo el catálogo corrido hacia la derecha. Una rejilla reserva sus columnas; un flex solo reparte lo que hay. Ahora el