/* ══════════════════════════════════════════════════════════════════════ PULGAR · EL SUELO DE 44 px, Y LOS TRES BOTONES QUE NO SE PODÍAN DAR ───────────────────────────────────────────────────────────────────── POR QUÉ EXISTE ESTE FICHERO Y NO SON LÍNEAS DENTRO DE tema.css. Las tres hojas de arriba —estilo.css, venta.css, tema.css— las están reescribiendo tres procesos a la vez, y esto es lo único que decide si en un teléfono se puede cerrar el carrito. Va en su propia hoja, la última de todas, para que no se pierda en una reescritura ajena y para que gane por orden de cascada sin repartir !important. QUÉ ESTABA MAL, MEDIDO CONTRA PRODUCCIÓN EL 23-08-2026 a 360 y 390 px con un iPhone de verdad (Chromium con `is_mobile`, UA de Safari iOS): · El botón que CIERRA el carrito lateral medía 24 × 27 px. · La «×» que QUITA una línea del carrito medía 20 × 29 px. · La «×» que cierra la GUÍA DE TALLAS medía 21 × 18 px — el control más pequeño de la web, y está dentro de un diálogo modal. · El botón que ABRE el carrito medía 44 × 37, en las 22 rutas. · «RELIC», el enlace a la portada, 46 × 43, en las 22 rutas. Y por debajo de todo eso, la causa común: la pasada anterior de móvil fijó el suelo general en 40 px («a{min-height:40px}», tema.css) y además lo puso a CERO dentro de la cabecera («.cabecera a,.cabecera button,.nav a{min-height:0}»), confiando el alto al relleno. 40 no es el número: la guía de Apple, las WCAG 2.5.5 y el propio comprobador de la casa piden 44. Cuatro píxeles por control, 594 enlaces de pie + 70 chips + 36 enlaces de pasillo + 40 flechas. No se nota mirando; se nota fallando el toque. POR QUÉ SÓLO ALTO Y ANCHO MÍNIMOS, Y NADA DE `display`. El comentario de tema.css cuenta que cambiar `display` a inline-flex en la cabecera sacó los iconos 104 px por la derecha en una tablet. Aquí no se cambia el modo de caja de nada que ya esté colocado: se sube `min-height` —que es vertical y no puede ensanchar una fila— y sólo se toca `min-width` en controles que ya son cajas sueltas (las flechas, el contador). Y VA ENTERO DENTRO DE @media (max-width:1180px), el mismo corte que usa tema.css. Por encima de eso no cambia ni un píxel: el escritorio en español es lo que vende hoy y no se toca. ══════════════════════════════════════════════════════════════════════ */ @media (max-width:1180px){ /* ── 1. LOS TRES BOTONES QUE NO SE PODÍAN DAR ───────────────────────── Los tres son la salida de algo que tapa la pantalla: el carrito lateral y el diálogo de tallas. Un botón de cerrar pequeño no es una molestia, es una trampa: quien no acierta se va de la página, y en el carrito eso es el pedido. Se agrandan con `place-items:center` para que la «×» siga pintándose donde estaba —el dibujo no se mueve, sólo crece lo que se pulsa— y con margen negativo para no empujar la fila que los contiene. */ .panel-cab .panel-cerrar{ min-width:44px; min-height:44px; display:grid; place-items:center; margin:-8px -10px -8px 0; padding:0; line-height:1} .panel-quitar button{ min-width:44px; min-height:44px; display:grid; place-items:center; margin:-7px -8px; padding:0; line-height:1} /* La guía de tallas es un modal: si no se cierra, la ficha de la pieza queda inaccesible detrás. Va en posición absoluta dentro del diálogo, así que crecer no descoloca nada; se recolocan `top`/`right` para que el cuadro de 44 px quede donde estaba el aspa. */ .guia .cerrar{ top:4px; right:6px; width:44px; height:44px; display:grid; place-items:center; padding:0; line-height:1} /* ── 2. LA CABECERA: ABRIR EL CARRITO Y VOLVER A LA PORTADA ─────────── tema.css pone `min-height:0` a todo lo de la cabecera y fía el alto al relleno vertical. Con relleno solo, «RELIC» se queda en 43 y el carrito en 37, porque su contenido es un svg de 19 px. El relleno se mantiene —es lo que evita que la fila se ensanche— y encima se pone un suelo real, con `.cabecera` delante para ganar en especificidad. */ .cabecera a, .cabecera button, .nav a{ padding-top:.62rem; padding-bottom:.62rem} .cabecera .marca, .cabecera .boton-carrito, .cabecera .tema-boton, .cabecera .idioma > summary, .cabecera .nav a{min-height:44px} .cabecera .boton-carrito{min-width:44px} /* ── 3. EL SUELO GENERAL SUBE DE 40 A 44 ────────────────────────────── Se repiten EXACTAMENTE los selectores que tema.css dejó en 40 px, no otros: así esto es un cambio de número y no un juego nuevo de reglas que pueda contradecir al de al lado. La excepción de tema.css —un enlace dentro de un párrafo vuelve a ser texto— sigue mandando, porque `p a` tiene más peso que `a` y aquí no se toca. */ a{min-height:44px} summary, .boton-carrito, .pie a, .pie-int a, footer a, .miga a{ min-height:44px} li > a:only-child, p > a:only-child, dd > a:only-child, .cal-lista a, .chips a, .miga a, .enlace-mas, .enlace-flecha{ min-height:44px} h1 > a:only-child, h2 > a:only-child, h3 > a:only-child, h4 > a:only-child, .tit > a:only-child, .bo-tit > a:only-child{ min-height:44px} a.sello, a.bo-mas, a.enlace-flecha, button.enlace-guia, button.voto, .tp-mas, .ft-cajon-limpiar{min-height:44px} .ft-puesto{min-height:44px} .ft-des > summary, .ft-cajon > summary{min-height:46px} /* ── 4. EL PASILLO DE PRODUCTO OFICIAL ──────────────────────────────── `.pa-obra` («Ver la película: …») y `.pa-mas` («Ver los 224 →») son los dos enlaces que sacan a alguien de un pasillo, y medían 37 px de alto en los 12 pasillos de /oficial y de las fichas. tienda.css les pone `display:inline-block`, que gana al `inline-flex` general, así que el suelo de arriba no les llegaba: se les nombra. */ .pa-cab .pa-obra, .pa-cab .pa-mas{ min-height:44px; display:inline-flex; align-items:center} /* ── 5. LAS FLECHAS DE LOS PASILLOS Y CARRUSELES ────────────────────── 40 × 40 en 40 sitios. Son cajas sueltas en su propia fila, así que aquí sí se puede tocar el ancho sin mover nada de al lado. */ .carrusel-flechas button, .pa-flechas button{ width:44px; height:44px; flex:none} /* ── 6. EL CONTADOR DE UNIDADES DE LA FICHA ─────────────────────────── Los botones «−» y «+» medían 35 px de ancho. Son los que deciden si alguien compra una o tres. El alto ya estaba en 44 (venta.css); lo que faltaba era el ancho. */ .cantidad-bloque .contador button{min-width:44px} /* ── 7. LA BARRA DE COMPRA PEGAJOSA ─────────────────────────────────── «Cesta» medía 69 × 40 al lado de «Comprar ahora» de 44: los dos botones que cobran, y el de guardar era el bajo. */ .barra-compra .barra-cesta{min-height:44px} /* La barra tapa 109 px del final de la página y el relleno de abajo eran 120: los dos últimos enlaces del pie —«Deutsch» y «Desistimiento»— se quedaban debajo de ella y no se podían pulsar. */ body:has(.barra-compra){padding-bottom:150px} /* ── 8. EL ORDEN DE LA TIENDA ───────────────────────────────────────── Enlaces de 36 px de ancho. Son cortos («Nuevas», «Precio»), así que el ancho se lo da el texto; se les da suelo. */ .barra-orden a{min-width:44px; justify-content:center} /* ── 9. RED DE SEGURIDAD PARA LAS ANCLAS ────────────────────────────── La cabecera es `sticky` y mide 123 px en un teléfono. Sin esto, cualquier salto a un ancla de la misma página —o un `:target`— deja el destino DEBAJO de la cabecera y parece que el enlace no ha hecho nada. Hoy no hay víctima medida, pero cuesta una línea y evita el fallo la próxima vez que alguien escriba un índice. */ html{scroll-padding-top:132px} } /* ══════════════════════════════════════════════════════════════════════ SEGUNDA PASADA · LO QUE SACÓ EL COMPROBADOR YA ARREGLADO ───────────────────────────────────────────────────────────────────── Estas cuatro las encontró revisar_movil.py DESPUÉS de enseñarle a mirar lo que no miraba. Son la prueba de que el medidor estaba corto, y no de que la web estuviera bien. ══════════════════════════════════════════════════════════════════════ */ @media (max-width:1180px){ /* ── 10. EL FORMULARIO DE LA CAJA SE SALÍA DE LA PANTALLA ───────────── Y es LA página. Medido a 360 y a 390: «Código postal» y «Teléfono» —la columna derecha de las dos filas de dos— empezaban en x=233 y terminaban en x=434. En una pantalla de 390 eso son 44 px de campo FUERA, y no se puede llegar a ellos desplazando porque estilo.css línea 36 tiene `body{overflow-x:hidden}`: el CSS recorta el desbordamiento y lo esconde. Se escribe el código postal sin ver lo que se escribe. LA CAUSA ES UN CARÁCTER, y es la misma que ya está documentada dos veces en estilo.css para las notas y los carruseles: `1fr` es `minmax(auto, 1fr)`, o sea que el ancho MÍNIMO del contenido manda sobre el de la pantalla. Un trae de fábrica un ancho mínimo de unos 200 px (el atributo `size`), así que dos columnas pedían 201+14+201 = 416 px y la rejilla se los daba aunque no cupieran. Con `minmax(0,1fr)` la columna puede encogerse, que es lo único que hacía falta. `min-width:0` en los campos remata: sin él, el vuelve a imponer su ancho de fábrica desde dentro. A 1440 px no cambia nada: allí sobra sitio y las dos formas dan el mismo resultado. */ .formulario-fila{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .formulario-fila > *, .formulario-fila input, .formulario-fila select{min-width:0; max-width:100%} /* ── 11. LA TERCERA FAMILIA DE FLECHAS ──────────────────────────────── `.bo-flechas` son las de los bloques de película de /tienda: 24 por página, 34 × 34. Por debajo de 600 px tienda.css las esconde («con el dedo sobran», y es verdad), pero entre 600 y 1180 se quedan visibles y a 34 px — y una tableta se usa con el dedo igual que un teléfono, como dice el propio comentario de tema.css. Donde se ven, se pulsan. */ .bo-flechas button{width:44px; height:44px} .bo-flechas{gap:8px} /* ── 12. EL CONTADOR DE UNIDADES, TAMBIÉN EN TABLETA ────────────────── venta.css le da 44 px de alto sólo por debajo de 720; entre 720 y 1180 se quedaba en 35,2. El ancho ya se arregló arriba; faltaba el alto en la franja de la tableta. */ .cantidad-bloque .contador button, .cantidad-bloque .contador input{min-height:44px} }