@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');  
/* overflow:hidden por defecto en html Y body: bloquea el scroll de la página mientras está visible la
pantalla inicial CONFIGURABLE/UNIK/PACK (#menu_tipomueble, visible siempre al cargar la página). Se
libera en cambia_tipo_mueble() (funciones.js) cuando esa pantalla se cierra. Hace falta también en
html, y no solo en body: si solo se pone en body, en algunos casos (p.ej. al refrescar la página
después de haber hecho scroll) el elemento html seguía pudiendo desplazarse, dejando esta pantalla
"cortada" con el configurador asomando por debajo en vez de verse a pantalla completa. */
html{overflow:hidden}
body{margin:0; background-color:#FFF; font-family: 'Roboto', sans-serif; max-width:86%; margin-left:auto; margin-right:auto; overflow:hidden}
a {text-decoration:none; color:#000}
a:hover{text-decoration:underline}
hr {color:#eee}

.filtros-unik select{
	margin-right: 10px;
    margin-top: 10px;
    padding: 5px;
}
.filtros-unik{
	float:right;
}

.menu-tipomueble {width: 86%;height: 100%;position: absolute;top: 0;left: 7%;background-color: rgb(255, 255, 255,0.95);	z-index: 999; font-weight:bold}

/* Las tres columnas ocupan todo el ancho disponible (antes 80%) para que la descripcion de cada
tipo quepa en dos lineas. Los porcentajes de .ico que dependen de este ancho (margin-top, padding-top
y background-size) se han recalculado abajo para compensar, de modo que las imagenes y los titulos
siguen exactamente donde estaban: lo unico que cambia es que la columna de texto pasa de un 14,5% a
un 25,8% del ancho de la ventana. */
.menu-tipomueble .tipos{width: 100%;margin-left: anchor-size;margin-left: auto;margin-right: auto;margin-top: 8%;}

/* A 13px y a todo el ancho de la columna, las descripciones mas largas (portugues y espanol) caben
en dos lineas a partir de ~1000px de ventana. Ojo al tocar estos valores: con el ancho anterior
(70%) el texto se iba a 4 lineas y acababa pisando la barra del configurador que se transparenta
por detras de esta pantalla. El <br> que traen los textos de la tabla de idiomas se convierte en un
espacio al pintarlos (ver verso_descripcion_tipo en index.php); si volviera a ser un salto duro, la
primera frase por si sola ya no cabria en una linea. */
.menu-tipomueble .tipos .subtipos {
	font-size: 13px;
	margin-top: 6px;
	width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	font-weight:normal;
}

.menu-tipomueble .ico {
	float: left;
	width: 30%;
	position: relative;
	height: 90%;
	/* margin-top y padding-top son porcentajes del ancho de .tipos, que ha pasado de 80% a 100%:
	10%->8% y 24%->19,2% dejan la imagen y el titulo en la misma posicion vertical de siempre. */
	margin-top: 8%;
	opacity: 1;
	margin-left: 1.5%;
	margin-right: 2.5;
	margin-right: 1.5%;
	text-align: center;
	padding-top: 19.2%;
	font-size: 20px;
	cursor:pointer;
}

/* background-size 90%->72% y posicion centrada: con la columna mas ancha, un 72% da exactamente el
mismo tamano de imagen que antes daba el 90%, y centrarla la deja alineada con el titulo y el texto. */
.menu-tipomueble .ico.modular{
	background: url(img/ico-modular.png) no-repeat center top;
	background-size:72%;
}

.menu-tipomueble .ico.modular:hover{ opacity:0.75}

.menu-tipomueble .ico.unik{background: url(img/ico-compacto.png) no-repeat center top;	background-size:72%;}

.menu-tipomueble .ico.unik:hover{opacity:0.75}

.menu-tipomueble .ico.pack{background: url(img/ico-pack.png) no-repeat center top;	background-size:72%;}

.menu-tipomueble .ico.pack:hover{opacity:0.75}

/* Botón "CARGA LOCALIZADOR" flotante sobre la pantalla CONFIGURABLE/UNIK/PACK, para no tener que
hacer scroll hasta el botón original (.bottom .boton) cuando el conjunto cargado por el localizador
queda oculto detrás de esta pantalla. */
.boton-localizador-flotante {
	position: absolute;
	bottom: 20px;
	right: 20px;
	background-color: #fff;
	color: #000;
	border: 1px solid #000;
	padding: 10px 15px;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
	cursor: pointer;
	z-index: 1000;
}
.boton-localizador-flotante:hover{color:#fff; background-color:#000;}

.preset-thumb {
	float: left;
	width: 30%;
	padding: 1%;
	border: 1px solid #ccc;
	margin: 0.5%;
	cursor: pointer;
	font-size: 14px;
	line-height: 30px;
}

.preset-thumb:hover{border:1px solid #000}

.preset-title{font-size: 30px;padding: 10px;}

.preset-thumb img{width:100%}

.ico-tapon {
	width: 22%;
	float: left;
	padding: 1%;
	font-size: 12px;
	cursor: pointer;
	border: 1px solid #fff;
	height:140px;
}
.ico-tapon:hover{border:1px solid #333}
.ico-tapon img{width:100%}

.ico-animar {
	clear: both;
	color: #fff;
	background-color: #000;
	padding: 10px;
	text-align: center;
	cursor: pointer;
	font-size: 14px;
	width: 75%;
	position: absolute;
	bottom: 10px;
}

.burger-icon{position: absolute;top: 15px;right: 15px;width: 40px;height: 40px;cursor: pointer;margin-right:0%;display:none; background:url(img/ico-menu.png) no-repeat;background-size:100%}
.burger-icon.abierto {margin-right: 31.5%;background: url(img/ico-menu-closed.png) no-repeat;background-size: 100%;width: 20px;}

.x-cerrar{float: right;padding: 5px;width: 15px;height: 15px;background-color: #000;color: #fff;font-weight: bold;cursor: pointer;line-height: 15px;text-align: center;rgin-top: -5px;border:1px solid #000;}
.x-cerrar:hover{color:#000; background-color:#fff}
.separador-horizontal{border-top: 1px dashed #aaa;clear: both;margin-bottom: 10px;}

.largo-ancho{border: 1px solid #000;background-color: #fff;padding: 5px;width: 160px;}
.cota-escenario{width: 148px;padding: 5px;border: 1px solid #000;margin-top: -5px; background:#fff}
.cota-escenario.combo{width:160px; font-size:12px; font-family: 'Roboto', sans-serif;}

.controles-animacion {position: absolute;left: 34%;bottom: 1%;background-color:none;width: 30%;padding: 10px 15px 4px 15px;border-radius: 5px;	display: none;}
.controles-animacion .ico-play{float: left;width: 8%;margin-right: 2%; cursor:pointer; filter:invert(1)}
.controles-animacion .range-play {float: left;width: 90%;}
.abridor {-webkit-appearance: none;width: 100%;height: 1px;background: #fff;outline: none; margin-top:4%}
.abridor::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 8px; height: 20px; background: #fff; cursor: pointer;}
.abridor::-moz-range-thumb { width: 8px; height: 20px; background: #fff; cursor: pointer; border-radius:0px}

.ico-fullscreen {position: absolute;bottom: 50px;left: 0%;cursor: pointer;width: 40px;padding: 10px;}
.ico-marmol{position:absolute; bottom:0%; padding:10px; left:0%; width:40px; cursor:pointer}
.ico-camera {position: absolute;bottom: 100px;padding: 7px;left: 0%;width: 45px;cursor: pointer;}
.ico-reset {position: absolute;bottom: 0;padding: 10px;right: 0;width: 40px;cursor: pointer;}

.icos-camaras {position: absolute;bottom: 100px;left: 54px;display: none;padding: 7px;}
.icos-camaras .thumb-camara{cursor:pointer;width:45px; float:left; margin-right:10px}
.icos-camaras .thumb-camara:hover{opacity:0.5}


.ico-ruler {position: absolute;bottom: 150px;padding: 8px;left: 0%;width: 45px;cursor: pointer;display:none}
.ico-ar {position: absolute;bottom: 200px;padding: 8px;left: 0%;width: 45px;cursor: pointer;display:none}
.ico-anima {position: absolute;bottom: 250px;padding: 8px;left: 0%;width: 45px;cursor: pointer;display:none}
.icos-acabados {position: absolute;bottom: 0;left: 50px;display: none;padding: 10px;}
.icos-acabados .thumb-acabado{cursor:pointer;width:40px; float:left; margin-right:10px}
.icos-acabados .thumb-acabado:hover{opacity:0.5}

.contenido{max-width:100%; margin-left:auto; margin-right:auto; margin-top:0px}
.renderCanvas{width:100%;height:100%;outline:none;overscroll-behavior: contain;}
.capa3D {width: 100%;height:720px;	position: relative; overflow:hidden}

.boton-volver {background: #000;color: #fff;padding: 10px;position: absolute;top: 10px;font-size: 12px;	margin-left: 20%;right: 10px;}
.boton-volver:hover{cursor:pointer; opacity:.75}

.ventana-aux-grifos {display: none;position: absolute;background: #fff;width: 40%;top: 20%;z-index: 999;left: 30%;padding: 10px;}
.ventana-aux-grifos .titulo {text-align: center;padding: 10px;font-size: 20px;margin-bottom: 20px;font-weight: bold;background-color: #000;	color: #fff;}

.wrapper-campanas{position:absolute; top:0; left:0;width:100%; height:100%; background-color:rgba(0,0,0,0.75);display:none; z-index:9999}
.ventana-campanas {position: absolute;background: #fff;width: 60%;top: 10%;z-index: 999;left: 20%;padding: 10px;}
.ventana-campanas .ico-cerrar{position:absolute; right:10px; top:10px; padding: 5px;width: 15px;height: 15px;background-color: #000;color: #fff;font-weight: bold;cursor: pointer;line-height: 15px;text-align:center;border:1px solid #000;}
.ventana-campanas .ico-cerrar:hover{color:#000; background-color:#fff}
.ventana-campanas .titulo{text-align: center;padding: 10px;font-size: 20px;margin-bottom: 20px;margin-top: -8px; font-weight:bold}
.ventana-campanas .subtipo_item {float: left;border-bottom: 1px solid #fff;cursor: pointer;font-size: 14px;margin-right: 10px;margin-left: 10px;}
.ventana-campanas .subtipo_item.activo {border-bottom: 1px solid #000;font-size: ;	font-weight: bold;}
.ventana-campanas .new-campana {font-size: 12px;margin-top: 20px;}
.ventana-campanas .new-campana .campo{float:left; margin-left:10px}
.ventana-campanas .new-campana .campo select{background-color: #fff;border: 1px solid #666;	padding: 2px;}
.ventana-campanas .new-campana .campo .boton {background-color: #000;color: #fff;cursor: pointer;padding: 8px 10px 8px 10px;margin-top: 8px;}
.ventana-campanas .fila-servicio {font-size: 14px;color:#000;font-size:13px; text-align:left}
.ventana-campanas .fila-servicio.titulo{font-weight:bold; background:#000;color:#fff;font-size:13px; text-align:left}
.ventana-campanas .lista-campanas-servicios {margin-top: 20px;border-top: 1px solid #666;padding-top: 20px;}

.ventana-servicios {display: none;position: absolute;background: #fff;width: 50%;top: 20%;z-index: 999;left: 25%;padding: 10px;}
.ventana-servicios .fila-servicio {font-size: 14px;color:#000;font-size:13px; text-align:left}
.ventana-servicios .fila-servicio.titulo{font-weight:bold; background:#000;color:#fff;font-size:13px; text-align:left}
.ventana-servicios .titulo{text-align: center;padding: 10px;font-size: 20px;margin-bottom: 20px;margin-top: -8px; font-weight:bold}
.ventana-servicios .ico-cerrar{position:absolute; right:10px; top:10px; padding: 5px;width: 15px;height: 15px;background-color: #000;color: #fff;font-weight: bold;cursor: pointer;line-height: 15px;text-align:center;border:1px solid #000;}
.ventana-servicios .ico-cerrar:hover{color:#000; background-color:#fff}
.selector-servicios{border: 1 px solid #000;border: 1px solid #000;background: none;padding: 5px 10px 5px 10px;margin-bottom: 10px;width: 170px;}

.ventana-dimensiones {display: none;position: absolute;background: #fff;width: 50%;top: 20%;z-index: 999;left: 25%;padding: 10px;}
.ventana-dimensiones .titulo {text-align: center;padding: 10px;font-size: 20px;margin-bottom: 20px;margin-top: 20px;}
.ventana-dimensiones .iconos {text-align: center;margin-left: 0%;}

.ventana-dimensiones .iconos .pared {float: left;width: 20%;padding: 2.5%;font-size: 12px;margin-bottom: 40px;cursor: pointer;}
.ventana-dimensiones .iconos .pared img {border:2px solid #fff;padding:5px}
.ventana-dimensiones .iconos .pared img:hover,  .ventana-dimensiones .iconos .pared .seleccionada{border:2px solid #000;}

.ventana-dimensiones .dimensiones {margin-left: 26%;font-size: 14px;margin-bottom: 20px;}
.ventana-dimensiones .dimensiones .col1 {float: left;width: 20%;margin-bottom: 20px;}
.ventana-dimensiones .dimensiones .error{border:1px solid #f00;}

.ventana-dimensiones .dimensiones .col2{float:left}
.ventana-dimensiones .boton {text-align: center;background: #000;color: #fff;padding: 10px;	width: 100px;margin-left: auto;	margin-right: auto;	cursor: pointer;}
.ventana-dimensiones .boton:hover{opacity:.5}
.ventana-dimensiones .ayuda-medidas {text-decoration: underline;text-align: center;font-size: 13px;margin-top: 20px;color: #666;margin-bottom: 20px; visibility:hidden}
.ventana-dimensiones .msg-error-medidas{color:#f00; font-size:12px; text-align:center}
.ventana-dimensiones .ico-cerrar{position:absolute; right:10px; top:10px; padding: 5px;width: 15px;height: 15px;background-color: #000;color: #fff;font-weight: bold;cursor: pointer;line-height: 15px;text-align:center;border:1px solid #000;}
.ventana-dimensiones .ico-cerrar:hover{color:#000; background-color:#fff}

.boton-sup {float: left;color: #000;background-color: #fff;padding: 1.5%;width: 21%;margin-right: 1%;text-align: center;border: 1px solid #000;margin-bottom: 12px;cursor: pointer;font-size: 14px;}
.boton-sup.off{opacity:0.5;cursor:default;}

.boton-sup.mamparas {background-size: 14%;float:right;margin-right:0;}
.boton-sup.mamparas.activo {background-size: 14%,10%;float:right;margin-right:0;}
.boton-sup.espacio {background-size: 12%;}
.boton-sup.espacio.activo {
	background-size: 12%,10%;
	padding-top: 1%;
	padding-bottom: 0.8%;
}
.boton-sup.plato {background-size: 18%;}
.boton-sup.plato.recortado{background-size: 18%;}
.boton-sup.plato.activo {background-size: 18%,10%;}
.boton-sup.plato.activo.recortado {background-size: 18%,10%;}
.boton-sup.griferia {margin-right: 0%;background-size: 16%; text-transform:uppercase;}
.boton-sup.griferia.activo {margin-right: 0%;background-size: 16%,10%;}
.boton-sup:not(.off):hover, .boton-sup.plato.activo.recortado:hover{color:#fff; background-color:#000; background-image:none}


.bottom {background-color: #000;color: #fff;width: 98%;padding: 1%;margin-top: 10px;}
.bottom .boton {color: #000;background-color: #fff;text-align: center;padding: 10px;float: left;width: 150px;font-size: 12px;cursor: pointer; margin-right:10px}
.bottom .price {float: right;font-size: 24px;}
.bottom .price span{font-size:12px;}

.bottom .escandallo {margin-top: 10px;background: #fff;padding: 10px; display:none}
.bottom .escandallo .titulo-tabla{background: #000;color: #fff;font-size: 12px;}
.bottom .escandallo .linea-tabla{background: #fff;color: #000;font-size: 12px;}
.bottom .despliega-escandallo {background: url(img/ico-despliega-flechita.png) no-repeat;cursor: pointer;float: right;width: 15px;height: 15px;background-size: contain;margin-right: 8px;margin-top: 13px;}
.bottom .despliega-escandallo.cerrado{background: url(img/ico-pliega-flechita.png) no-repeat;background-size: contain;}

.lightbox-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.85);z-index: 2000;display: flex;align-items: center;justify-content: center;}
.lightbox-img {max-width: 90%;max-height: 90%;box-shadow: 0 0 30px rgba(0,0,0,0.5);cursor: default;}
.lightbox-close {position: absolute;top: 20px;right: 30px;color: #fff;font-size: 40px;line-height: 1;cursor: pointer;}
.lightbox-nav {position: absolute;top: 50%;transform: translateY(-50%);color: #fff;font-size: 40px;line-height: 1;cursor: pointer;padding: 10px;}
.lightbox-prev {left: 30px;}
.lightbox-next {right: 30px;}
.lightbox-download {
	position: absolute;
	top: 29px;
	right: 90px;
	width: 20px;
	height: 20px;
	color: #fff;
	cursor: pointer;
}
.lightbox-prompt {position: absolute;bottom: 130px;left: 50%;transform: translateX(-50%);color: #fff;font-size: 13px;font-style: italic;max-width: 80%;text-align: center;background-color: rgba(0,0,0,0.4);padding: 6px 12px;border-radius: 3px;}
.lightbox-tabs {position: absolute;bottom: 90px;left: 50%;transform: translateX(-50%);display: none;gap: 10px;}
.lightbox-tab {background-color: rgba(255,255,255,0.15);color: #fff;padding: 6px 14px;font-size: 13px;cursor: pointer;border-radius: 3px;}
.lightbox-tab.activa {background-color: #fff;color: #000;}
.lightbox-edicion {position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);background-color: #000;color: #fff;padding: 10px 20px;font-size: 13px;cursor: pointer;}
.edicion-avanzada-textarea {width: 100%;min-height: 100px;padding: 8px;font-family: inherit;font-size: 14px;box-sizing: border-box;}
.estilo-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.85);z-index: 2000;display: flex;align-items: center;justify-content: center;}
.estilo-menu {display: flex;gap: 30px;}
.estilo-card {width: 200px;text-align: center;cursor: pointer;}
.estilo-thumb {width: 200px;height: 200px;object-fit: cover;border: 3px solid transparent;box-shadow: 0 0 20px rgba(0,0,0,0.5);}
.estilo-card:hover .estilo-thumb {border-color: #fff;}
.estilo-label {color: #fff;font-size: 16px;margin-top: 10px;}

.galeria-menu {max-width: 80%;max-height: 80%;overflow: auto;}
.galeria-grid {display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;}
.galeria-grid .estilo-vacio {color: #fff;font-size: 16px;}
.galeria-item {text-align: center;}
.galeria-thumb {width: 280px;height: 280px;object-fit: cover;cursor: pointer;box-shadow: 0 0 15px rgba(0,0,0,0.5);border: 3px solid transparent;}
.galeria-thumb:hover {border-color: #fff;}
.galeria-fecha {color: #fff;font-size: 14px;margin-top: 8px;}

.overlay-menu {position: absolute;top: 10px;right: 10px;background-color: #fff;width: 50%;height: 95%;display: none;padding: 10px; overflow:scroll; z-index:900}
.overlay-menu.configmode{width:30%}
.overlay-menu .titulo-seccion{padding: 5px;color: #000;font-size: 14px;border-bottom: 2px solid #000;}
.overlay-menu .apertura{float: left;width: 25%;text-align: center; font-size:12px; margin-bottom:20px}
.overlay-menu .apertura img{border-bottom: 2px solid #fff;cursor: pointer;}
.overlay-menu .apertura img.activa{border-bottom: 2px solid #000;}
.overlay-menu .griferia{float: left;width: 33%;text-align: center; font-size:12px; margin-bottom:20px}
.overlay-menu .griferia img{border-bottom: 2px solid #fff;cursor: pointer;}
.overlay-menu .griferia img.activa{border-bottom: 2px solid #000;}
.overlay-menu .titulo-seccion-editar{padding: 5px;color: #000;font-size: 14px; font-weight:bold}




.overlay-boton {float: left;margin-left: 20px;cursor: pointer;background-color: #fff;padding: 8px;font-size: 12px;font-weight: bold;text-transform: uppercase;}
.overlay-boton.estilo{background:url(img/ico-estilo.png) no-repeat; background-size:20px; background-position:10% 50%; background-color:#fff; padding-left:30px;}
.overlay-boton.reset{background:url(img/ico_reset.png) no-repeat; background-size:16px; background-position:10% 50%; background-color:#fff; padding-left:30px;}
.overlay-boton.cam{background:url(img/ico_camara.png) no-repeat; background-size:16px; background-position:10% 50%; background-color:#fff; padding-left:30px;}
.overlay-boton.pdf{background:url(img/ico_pdf.png) no-repeat; background-size:16px; background-position:10% 50%; background-color:#fff; padding-left:30px;}
.overlay-boton.ar{background:url(img/ar-ico.png) no-repeat; background-size:16px; background-position:10% 50%; background-color:#fff; padding-left:30px;}
.overlay-boton:hover{opacity:.75}
.overlay-boton img{width:100%}
.overlay-ico{position: absolute;bottom: 10px;right:10px;}
.overlay-ico img{width:100%}
.overlay-boton.additem{position: absolute;top: 10px;left: 0;width: 36px;display:none}


.icono-item {float: left;width: 24%;padding: .5%;font-size: 11px; height:150px}
.icono-item.mueble{margin-bottom:30px; height:160px}
.icono-item.mueble.off{opacity:.25; cursor:default}
.tipo-mueble{clear:both; margin-top:10px; margin-bottom:10px;width:100%; border-bottom:1px solid #eee;font-size:14px; font-weight:bold}
.icono-item.mampara{height:280px}
.icono-item.grifo{height:190px}
.icono-item.grifo.columna{height:300px}
.icono-item.rociador, .icono-item.ducheta, .icono-item.jet {height: 140px;line-height: normal;text-align: center;}
.icono-item.flexo {width: 15%;text-align: center;height: 200px;}


.icono-item img {border-bottom: 4px solid #000;cursor: pointer;}
.icono-item .desc-item {display: none;position: relative;width: 100%;font-size: 12px;}
.icono-item .desc-item .mini-acabados {border: 1px solid #000;border-radius: 50%;width: 8%;margin-right: 5px;margin-top: 10px;}

.icono-item.rociador img, .icono-item.ducheta img, .icono-item.jet img{border-bottom: 4px solid #fff;cursor: pointer;}
.icono-item.rociador img:hover,.icono-item.rociador img.activa, .icono-item.ducheta img:hover, .icono-item.ducheta img.activa, .icono-item.jet img:hover, .icono-item.jet img.activa{border-bottom: 4px solid #000;cursor: pointer;}



.menu-opciones{color:#000;font-size:12px;}
.menu-opciones .top-titulo {margin-bottom: 20px;padding-top: 5px;text-transform: uppercase;font-weight: bold;font-size: 14px;}
.menu-opciones .titulo-menu {padding: 7px;color: #fff;margin-top: 10px;	background-color: #000;position:relative; z-index:2}
.menu-opciones .titulo-menu.secundario {
	background-color: none;
	font-weight: bold;
	background: none;
	color: #000;
	padding: 10px 5px 0px 5px;
	margin-top: 0px;
	border-bottom: 1px solid #000;
	background: url(img/ico-pliega-flechita-black.png) no-repeat 98% 75%;
	background-size: 14px 7px;
	cursor: pointer;
}
.menu-opciones .titulo-menu.secundario.plegado {
	background: url(img/ico-despliega-flechita-black.png) no-repeat 98% 75%;
	background-size: 14px 7px;
}

.menu-opciones .titulo-menu .texto{float:left; padding-top:5px}
.menu-opciones .titulo-menu .icos{float:right;}
.menu-opciones .titulo-menu .icos img{cursor:pointer}
.menu-opciones .titulo-menu .icos img:hover{cursor:pointer;opacity:0.5}
.menu-opciones .bloque-medidas {margin-bottom: 10px;}
.menu-opciones .bloque-medidas input {padding: 10px 5px 10px 5px;border: 1px solid #eee;width: 76px;background-color: #fff;}
.menu-opciones .info-lado {	float: left;padding: 9px;background-color: #000;width: 10px;height: 10px;color: #fff;text-align: center;font-size: 20px;font-weight: bold;line-height: 12px;margin-left: 7px;cursor: pointer;margin-top: 5px;}
.menu-opciones .thumb-vidrio, .menu-opciones .thumb-perfil {float: left;font-size: 11px;text-align: center;width: 20%;margin-top: 8px;}
.menu-opciones .ico-vidrio, .menu-opciones .ico-perfil {border: 2px solid #fff;cursor: pointer;}
.menu-opciones .ico-vidrio.activa,.menu-opciones .ico-perfil.activa{border:2px solid #000;}
.menu-opciones .maxiclean {float: right;text-align: center;margin-top: 10px;font-size: 11px;}

.menu-opciones .contenido-menu {padding: 10px 0px 0px 0px;color: #000;}
.menu-opciones .contenido-menu .nombre-producto{font-weight:bold; font-size:14px}
.menu-opciones .bloque-medidas select {padding: 10px 0px 10px 5px;border: 1px solid #eee;background-color: #fff;min-width: 90px;}
.menu-opciones .bloque-medidas.instalacion {float: left;}
.menu-opciones .bloque-medidas.oculto {display: none;}
.menu-opciones .medidas-esquema {float: right;width: 30%;position:relative; z-index:1; margin-top:-10px}
.menu-opciones .medidas-esquema img {width: 100%;}
.menu-opciones .medidas-numeros {float: left;width: 70%;}
.menu-opciones .ico-acabados, .menu-opciones .ico-acabados-rejilla, .menu-opciones .ico-posgrifo, .menu-opciones .ico-posrociador, .menu-opciones .ico-posducheta, .menu-opciones .ico-posjets{float: left;cursor: pointer;font-size: 11px;text-align: center;margin-right: 5px;border-bottom:2px solid #fff}
.menu-opciones .ico-acabados span, .ico-acabados-rejilla span {display: none;}
.menu-opciones .ico-acabados.activa span, .menu-opciones .ico-acabados-rejilla.activa span {display: block;float: right;margin: 10px 0px 0px 5px;}
.menu-opciones .ico-acabados img, .menu-opciones .ico-acabados-rejilla img {border-radius: 50%;border: 1px solid #ccc;width: 38px;}
.menu-opciones .ico-acabados img:hover, .menu-opciones .ico-acabados.activa img, .menu-opciones .ico-acabados-rejilla img:hover, .menu-opciones .ico-acabados-rejilla.activa img {box-shadow: 0 0 3px #02538b;width: 25px;border: 8px solid #fff;}


.ico-rejillas{float: left;text-align: center;margin-right: 10px;cursor: pointer;padding-bottom: 2px;min-width: 20%;}
.ico-rejillas img{border: 1px solid #fff;}
.ico-rejillas.activa, .ico-rejillas:hover{border-bottom: 2px solid #000;}

.thumb-opcional{float: left;font-size: 11px;text-align: center;width: 32%;margin-top: 8px;}

/*ESTILOS ANTIGUOS*/

.formulario-contacto{position:relative}
.formulario-contacto .cerrar{position:absolute; right:1%; margin-top:1%;cursor:pointer}
.formulario-contacto .cerrar:hover{opacity:.5}
.formulario-contacto .titulo {padding-top: 10px;padding-bottom: 20px;font-size: 18px;}
.formulario-contacto input {border: none;border-bottom: 1px solid #333;outline: none;width: 90%;margin-bottom: 40px;padding: 4px;font-size: 14px;color: #666;}
.formulario-contacto select{border: none;border-bottom: 1px solid #333;outline: none;width: 90%;margin-bottom: 40px;background-color: #fff;color: #666;}
.formulario-contacto textarea {width: 90%;border: none;background-color: #d9d9d9;height: 100px;margin-bottom: 40px;color:#666; padding:5px}
.formulario-contacto input[type="button"]{color: #000;border: none;padding: 10px;width: 50%;margin-bottom: 0px;background-color: #d9d9d9;cursor: pointer;}
.formulario-contacto input[type="button"]:hover{background-color:#bbb}
.formulario-contacto .msg{ margin-top:10px; color:#d00;}

.swal-modal { border-radius:0px;}
.swal-button { background-color:#000; border-radius:0px}
.swal-text{text-align:center}

.msg-zoom {position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.5); text-align:center; color:#fff; display:none; font-size:18px}
.msg-zoom .texto {position: absolute;top: 50%;width: 100%;}

.menu-estilo{position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.75); text-align:center; color:#fff; display:none; font-size:18px; z-index:1000}
.menu-estilo .opciones {position: absolute;background-color: #fff;width: 80%;left: 10%;top: 15%;color: #000; padding:10px}
.menu-estilo .opciones .titulo{text-align: left;padding: 20px;font-size: 18px;}
.nombre-estilo span{font-size:10px; color:#aaa}

.menu-desplegable{position: absolute;top:10px;left:10px;background-color: #fff;min-width: 200px;width: 380px;display: none;}
.menu-desplegable .titulo-seccion {padding: 5px;font-size: 14px;color: #000;font-weight: bold;margin-left: 20px;	clear: both;line-height: normal;}
.menu-desplegable .titulo-seccion img{cursor:pointer}
.menu-desplegable .titulo-seccion img:hover{opacity:0.75}
.menu-desplegable .minitexto-descripcion {font-size: 11px;color: #888;font-weight: normal;}
.menu-desplegable .icono-mueble {float: left;margin-left: 20px;max-width: 33%; cursor:pointer}
.menu-desplegable .icono-encimera {float: left;margin-left: 20px;max-width: 33%; cursor:pointer}
.menu-desplegable .icono-lavabo {float: left;margin-left: 20px;max-width: 26.5%;cursor: pointer;text-align: center;font-size: 12px;}
.menu-desplegable .icono-espejo {float: left;margin-left: 20px;max-width: 25%;cursor: pointer;text-align: center;font-size: 12px;}
.menu-desplegable .icono-auxiliar {float: left;margin-left: 20px;max-width: 25%;cursor: pointer;text-align: center;font-size: 12px;}


.info {
	font-size: 13px;
	margin-left: 0px;
	padding: 5px;
	line-height: 20px;
}
.edit-wrapper{float:left;width:90%}
.ico-acabado {float: left;width: 14%;padding: 2.5%;cursor: pointer;text-align: center;font-size: 11px;color: #666; height:100px}
.ico-acabado.mini{padding:1.5%; width:6%}
.ico-acabado.selected{font-weight:bold}

.ico-accesorio {float: left;width: 14%;padding: 2.5%;cursor: pointer;text-align: center;font-size: 11px;color: #666; height:100px; opacity:.5}
.ico-accesorio.selected{opacity:1}
/*Accesorio opcional del espejo (aplique de pared): icono al doble de tamaño que el de un
accesorio de mueble normal, para que se vea con claridad debajo de la foto del espejo.*/
.ico-accesorio.grande{width:28%; height:200px}

.ico-tirador {float: left;width: 14%;padding: 2.5%;cursor: pointer;text-align: center;font-size: 11px;color: #666; height:100px;}
.ico-tirador img{width:100%}
.ico-tirador.selected{opacity:1}

.ico-valvula {float: left;width: 14%;padding: 2.5%;cursor: pointer;text-align: center;font-size: 11px;color: #666; height:100px}
.ico-valvula img{width:100%}


.ico-posicion-grifo{float: left;width: 15%;padding: 2.5%;cursor: pointer;text-align: center;font-size: 11px;color: #666; height:100px}
.ico-posicion-grifo img{width:100%}

.ico-borrar {margin-right: 10px;cursor: pointer;width: 30px;position: absolute;bottom: 10px;right: 5px;}
.ico-borrar:hover{opacity:0.75}
.ico-borrar img{width:100%;}

img-edit{width: 80%;margin-left: auto;margin-right: auto;}
img-edit img{width:100%}

.icono-mueble {float: left;	margin-left: 20px;	max-width: 33%;}
.icono-mueble img{height:96px;}
.icono-encimera{float:left; max-width:33%; cursor:pointer; margin-left:20px}
.icono-encimera img{width:100%}
.icono-lavabo{float:left; max-width:33%; cursor:pointer; margin-left:20px}
.icono-lavabo img{width:100%}
.icono-espejo{float:left; max-width:33%; cursor:pointer; margin-left:20px}
.icono-espejo img{width:100%}
.icono-auxiliar{float:left; max-width:33%; cursor:pointer; margin-left:20px}
.icono-auxiliar img{max-height:160px}

.ico-frontal {width: 17.9%;font-size: 12px;float: left;padding: 1%;cursor: pointer;}
.nombre-estilo.selected{font-weight:bold}
.ico-frontal:hover, .ico-acabado:hover{opacity:.75}
.ico-frontal img{width:100%}
.ico-acabado img {border-radius: 50%;width: 100%;border: 1px solid #000;}
.ico-accesorio img {width: 100%;}



/*ESTILOS TABLET(LANDSCAPE)*/
@media only screen and (max-width: 1200px) {
	.contenido{width:95%; margin-left:auto; margin-right:auto}
	.navbar {width: 95%;padding: 20px 0px 20px 0px;	margin-bottom: 20px;	margin-left: auto;	margin-right: auto;}
	.thumb-pared .left{width:90%; margin-right:10%}
	.thumb-pared .center{width:90%; margin-left:5%; margin-right:5%}
	.thumb-pared .right{width:90%; margin-left:10%}	
	.texto-paso {color: #666;margin-bottom: 20px;font-size: 14px;text-transform: capitalize;}
	.capa3D {width: 100%;padding-right: 10px;height: 500px;position: relative; border:none}		
	/*MODO DISEÑO ROCA*/
	.menu3D {margin-top: 70px;width: 100%;margin-left: auto;margin-right: auto;	clear: both; display:none}
	.seccion {	color: #666;	font-size: 13px;	float: left;	width: 40%; margin-right:10%}
	.seccion .item {width: 36%;	padding: 4%;	cursor: pointer;	float: left;	font-size: 14px;	margin-right: 2%;}	
	.seccion .item img {width: 65%;}	
	.menu3D .tapa {position: absolute;width: 100%;	height: 40vh;	background-color: #FFF;	display: none;	opacity: 1;}		
	/*MODO DISEÑO HYDRAGRAFIX 2.0*/
	.menu3D {clear: both;display: none;position: absolute;background-color: #fff;width: 40%;height: 67.5vh;margin-top: 1%;right: 3.5%; overflow:scroll}	
	.seccion {color: #666;font-size: 13px;float: none;width: 90%;margin-left: 5%;margin-top: 10px;}	
	.seccion .item {width: 29%;padding: 1%;cursor: pointer;float: left;font-size: 14px;margin-top: 10px; text-align:center}
	.seccion .item img {width: 70%;}	
	.menu3D .tapa {position: absolute;width: 0px;height: 0px;background-color: #FFF;display: none;}	
	.menu3D .close {display: block;position: absolute;top: -2%;right: 2%;font-size: 50px;cursor: pointer;}	
	.menu3D .locator {width:47%}
	/*--------------------------------------*/	
	.escandallo {z-index: 999;	position: relative;}	
	.overlay-boton.menu{display:block}
	.seccion select{width:52%;}
	.seccion .titulo {	font-size: 15px;	margin-bottom: 15px;	color: #333;}	
	.menu-inferior .boton {padding: 15px 1% 15px 1%;margin-right: 2%;}	
}

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
	.msg-zoom {display:none}
}