/* ===========================================================================
Configurador — capa de adaptación a móvil y tableta. 10-ago-2026.
Fichero NUEVO y aislado: no se ha modificado ni una regla de los CSS
originales. Para revertirlo basta con quitar el del header.php.
El problema: la app es de 2014 y los escenarios tienen tamaño fijo
(#divConstructor 900px, #divPerspectiveContainer 800px), con las capas de
color colocadas en position:absolute y coordenadas en píxeles sobre ellos.
Convertirlos a porcentajes obligaría a recalcular esas coordenadas y a tocar
la lógica de colocación de azulejos.
La solución: el escenario NO se redimensiona, se ESCALA entero con
transform (lo hace responsive.js), así las coordenadas internas siguen
siendo válidas. Aquí va todo lo demás: el envoltorio del escenario y la
interfaz de alrededor, que sí reflui con CSS normal.
Criterio: el escenario se escala para que quepa; los controles NO se
escalan, se recolocan a tamaño real, para que se puedan pulsar con el dedo.
=========================================================================== */
/* nada debe provocar barra horizontal.
SOLO en html, NUNCA en body (1-sep-2026): style.css ya pone overflow-x:hidden en
html; si body tambien lo lleva, deja de propagar su scroll al viewport y se
convierte en un contenedor de scroll de la altura de su contenido en flujo.
En la plantilla del configurador de relieve de hispalceramica.com el bloque
.conf-divMain es position:absolute (no cuenta para esa altura) y quedaba
recortado dentro de una franja de 131 px: solo se veia la cabecera. */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; }
/* envoltorio que crea responsive.js alrededor de cada escenario fijo */
.confazu-fit {
width: 100%;
max-width: 100%;
overflow: hidden;
position: relative;
}
.confazu-fit > * {
transform-origin: top left;
}
/* Imágenes: NO tocar aquí.
Aviso por experiencia propia: una regla "#divContent img { max-width:100%; height:auto }"
parece inocente y NO lo es. Gana por especificidad (1,0,1) a las clases del theme y de
Bootstrap, y al liberar la altura el logo de la cabecera pasó de 174x124 a 1046x872 px,
ocupando media pantalla en escritorio. Las imágenes ya están acotadas por .img-fluid.
Si alguna vez hace falta acotarlas, hacerlo SOLO dentro del media query de móvil y sin
tocar la altura. */
@media (max-width: 991px) {
/* imágenes: acotadas solo aquí, y sin tocar la altura */
#divContent img:not([class*="col-"]) { max-width: 100%; }
/* Filas más anchas que su padre: en el configurador hay .row de 378 px dentro
de contenedores de 345, lo que empuja los botones fuera de pantalla. */
#divContent .row { max-width: 100%; }
#divContent .row.w-100 {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#divContent .btn { max-width: 100%; }
/* la rejilla de Bootstrap del configurador se apila */
#divContent .row { margin-left: 0; margin-right: 0; }
#divContent [class*="col-"] { padding-left: 8px; padding-right: 8px; }
/* grupos de botones: que envuelvan en vez de desbordar */
#divContent .btn-group,
#divContent .btn-group-lg {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 6px;
}
#divContent .btn-group > .btn,
#divContent .btn-group-lg > .btn {
flex: 1 1 auto;
border-radius: 4px !important; /* al envolver, los cantos unidos quedan mal */
white-space: normal; /* que el texto largo no estire el botón */
}
/* botones grandes: alto cómodo para el dedo, sin desbordar */
#divContent .btn-lg { padding: 12px 10px; font-size: 15px; }
/* selectores de tipo y de color */
.divTypeSelectorContainer,
.divConfCenter,
#divAmbientSelector,
#divColorSelector {
max-width: 100%;
overflow-x: auto; /* si aun así no cabe, que scrolle SOLO él */
-webkit-overflow-scrolling: touch;
}
/* el menú superior y el selector de idioma */
#divMenu, #divLangSelector { max-width: 100%; }
/* precio final: que no se salga */
#divFinalPrice { max-width: 100%; word-wrap: break-word; }
}
@media (max-width: 575px) {
/* en móvil estrecho, los botones a ancho completo y apilados */
#divContent .btn-group > .btn,
#divContent .btn-group-lg > .btn { flex: 1 1 100%; }
}
/* ---------------------------------------------------------------------------
Los paneles APARCADOS y el scroll horizontal. 10-ago-2026.
El configurador de artesanos arrastraba scroll horizontal en móvil: 724 px de
ancho real para una pantalla de 360. El culpable no era el contenido visible
sino los paneles que la app aparca FUERA por la derecha esperando a
deslizarse: #divPerspectivePane (364→724) y #divAmbientSelector (404→554).
Lo que sobresale por la derecha SÍ genera barra de scroll.
Por qué "html, body { overflow-x: hidden }" no bastaba: esos paneles van en
position:absolute y, al no tener ningún ancestro posicionado, su bloque
contenedor es el del documento — se escapan de cualquier recorte intermedio.
La solución son las dos cosas a la vez, y ninguna sirve sola:
· position: relative → #divContent pasa a ser su bloque contenedor, así que
ya se les puede recortar. (Solo con overflow-x:clip NO funciona: probado,
el ancho real seguía en 724.)
· overflow-x: clip → recorta SIN crear un contenedor de scroll. Con
"hidden" el navegador convierte el overflow-y en auto y aparece una barra
vertical interna; "clip" no tiene ese efecto secundario.
Efecto conocido y aceptado: al cambiar el bloque contenedor, los paneles
aparcados bajan ~80 px. Comprobado que "VER EN AMBIENTE" sigue abriendo
visible y dentro de la pantalla (izq 0, ancho 345). Aparcados no se ven, así
que el desplazamiento no tiene consecuencia visual.
--------------------------------------------------------------------------- */
@media (max-width: 991px) {
#divContent {
position: relative;
overflow-x: clip;
}
}
/* ---------------------------------------------------------------------------
"VER EN AMBIENTE": las franjas blancas de los botones. 10-ago-2026.
Reportado por Pedro. Los botones de ambiente (Baño, Patio, Zaguán, Cocina,
Patio árabe) miden 150x110 y traen su foto como imagen de fondo con
`background-size: auto` y `background-repeat: repeat`. Es decir: la foto ni
se ajusta a la caja ni se recorta. Si es más pequeña que el botón deja franjas
y se repite; si es más grande, se corta por donde cae.
⚠️ Esto NO lo hemos causado nosotros: se ve igual a 1400 px, donde nuestras
reglas de móvil (max-width: 991px) ni se aplican. Es de la aplicación original.
Por eso la corrección va FUERA del media query: hace falta en todos los anchos.
`cover` + `center` llena la caja y recorta lo justo; `no-repeat` evita el
mosaico. Se recorta un poco de foto, que es mucho mejor que una franja blanca.
--------------------------------------------------------------------------- */
.ambientButton {
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
/* Impresión: el escalado no debe afectar al PDF/impresión */
@media print {
.confazu-fit { overflow: visible; }
.confazu-fit > * { transform: none !important; }
}
/* ---------------------------------------------------------------------------
Configurador de ARTESANOS: su panel de formulario y opciones va en una rama
distinta del escenario, con anchos fijos propios. Aqui no hace falta escalar
nada: son controles, y basta con que no se salgan.
--------------------------------------------------------------------------- */
@media (max-width: 991px) {
#divLeft,
.divOptions,
.conf-divFormConfigurator,
.conf-divMain,
.conf-divMainConfigurator,
.divConfCenter {
max-width: 100%;
box-sizing: border-box;
}
/* Campos de formulario: que no estiren la página.
El textarea de comentarios trae cols/ancho propio con más peso, de ahí el !important. */
#divContent input,
#divContent select,
#divContent textarea,
#divContent .email,
#divContent .form-group {
max-width: 100% !important;
box-sizing: border-box;
}
#divContent textarea { width: 100% !important; }
#divContent label { max-width: 100%; }
/* etiquetas y textos largos */
#divContent label { max-width: 100%; word-wrap: break-word; }
}
/* ---------------------------------------------------------------------------
Selector de azulejos: AQUI NO SE TOCA SU TAMAÑO. Nunca.
La app mide ese panel para montar el carrusel; en cuanto se le fuerza
width, height o display deja de cargar azulejos. Costó romperlo para verlo.
Su ancho nativo son 240px, que caben en cualquier móvil: el problema era
solo que el JS de la app lo coloca en left:-235px para la columna lateral
de escritorio. Esa posición se corrige desde responsive.js, y nada más.
--------------------------------------------------------------------------- */
/* ===========================================================================
EL CAJÓN DE AZULEJOS — completar lo que la app dejó a medias. 10-ago-2026
Hallazgo: el panel .confTilesSelector está diseñado como un cajón deslizante.
Su CSS dice literalmente:
position:absolute; left:-235px !important; transition: left 0.30s;
es decir, aparcado fuera por la izquierda y listo para entrar deslizándose.
Y el JS de la app YA hace lo correcto:
loadTiles() -> addClass('open') al pulsar una zona
tileClick() -> removeClass('open') al elegir un azulejo
Pero **NUNCA se escribió la regla .open**, así que el cajón jamás entraba y se
quedaba asomando a la izquierda de forma permanente. Eso era la "caja blanca".
Aquí se escribe esa regla que faltaba. No se inventa nada: se completa el
mecanismo que ya estaba a medio hacer.
=========================================================================== */
/* ESCRITORIO: el cajón entra deslizándose cuando la app lo abre */
@media (min-width: 992px) {
.confTilesSelector { z-index: 60; }
.confTilesSelector.open { left: 0 !important; }
}
/* MÓVIL: el panel flota SOBRE el diseño, como una bandeja inferior.
Antes aparecía debajo, fuera de la vista, y había que buscarlo.
Así, mientras eliges azulejos sigues viendo cómo va quedando el zócalo por
encima, y al cerrarlo lo ves entero.
⚠️ Se mantiene su ANCHO NATIVO de 240px (centrado, no estirado a toda la
pantalla): la app mide este panel para montar el carrusel y estirarlo hace
que dejen de cargar los azulejos. Solo se cambia dónde está, no cuánto mide. */
@media (max-width: 991px) {
.confTilesSelector {
transition: opacity .25s ease, max-height .3s ease;
z-index: 9999;
}
.confTilesSelector:not(.open) {
max-height: 0 !important;
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
opacity: 0;
overflow: hidden;
box-shadow: none;
pointer-events: none;
}
.confTilesSelector.open {
position: fixed !important;
left: 50% !important;
right: auto !important;
top: auto !important;
bottom: 12px !important;
transform: translateX(-50%);
max-height: 42vh !important;
opacity: 1;
background: #fff;
border-radius: 10px;
box-shadow: 0 6px 26px rgba(0, 0, 0, .38);
pointer-events: auto;
/* UNA sola barra de scroll. La lista real vive en .innerDiv, que ya tiene la
suya (575px de alto para 3.060px de azulejos). Si además scrollea el panel
de fuera salen DOS barras pegadas, que es lo que se veía. El de fuera no
scrollea: manda el de dentro. */
overflow: hidden;
}
/* Se limita con max-height, NUNCA con height: la app le pone height:575px y
necesita seguir midiéndose. max-height solo recorta lo que se ve. */
.confTilesSelector.open .innerDiv {
max-height: calc(42vh - 24px) !important;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
/* El botón de cerrar existía en el HTML con class="hidden" y sin una sola regla
de estilo: nadie lo llegó a usar. Se le da forma y se muestra solo al abrir. */
.confTilesSelector.open #btCloseTilesSelector {
display: block !important;
position: absolute;
top: 6px;
right: 8px;
z-index: 70;
width: 34px;
height: 34px;
line-height: 30px;
padding: 0;
border: 1px solid #ddd;
border-radius: 50%;
background: #fff;
color: #870e16;
font-size: 18px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.confTilesSelector.open #btCloseTilesSelector:hover { background: #870e16; color: #fff; }
/* El desplegable que sustituye a los grupos de botones en móvil.
Los botones originales siguen en el DOM, solo ocultos: el