/* ==========================================================================
   decoratel.net - adaptación a tableta y móvil (páginas .html con la plantilla "productos").
   Solo estilos: el contenido, los textos, los títulos y los enlaces no cambian.
   Por encima de 960px no se aplica nada: el escritorio se ve exactamente igual que antes.
   ========================================================================== */
@media screen and (max-width: 959px) {
	body { overflow-x: hidden; }
	body#bd { background-size: auto; -webkit-text-size-adjust: 100%; }

	/* contenedores de 920px -> ancho de la pantalla */
	#ja-header, #ja-mainnav, #ja-topsl, #ja-topsl2, #ja-topsl3, #ja-topsl4, #ja-topsl5, #ja-topsl6, #ja-topsl7,
	#ja-pathwaywrap, #ja-container, #ja-botsl, #ja-footer,
	#ja-containerwrap, #ja-containerwrap-cm, #ja-containerwrap-c, #ja-containerwrap-f,
	#ja-footerwrap, #ja-footerwrap2, #ja-headerwrap, #ja-topslwrap {
		width: auto !important;
		max-width: 100%;
		box-sizing: border-box;
	}
	#ja-container, #ja-pathwaywrap, #ja-footer { padding-left: 8px; padding-right: 8px; }

	/* menú principal: ver el bloque MENÚ MÓVIL al final */
	#ja-header { height: auto; }
	#ja-mainnav { position: relative; height: auto; background: #2f2f2f !important; }

	/* cabecera (logo, teléfonos y delegaciones): imagen de 920x240 de la que en escritorio se ven 180px;
	   en pantallas estrechas se escala a lo ancho con la misma proporción (180/920 = 19.57%) */
	[id^="ja-topsl"] { height: auto !important; background-size: 100% 100% !important; }
	[id^="ja-topsl"] [class^="ja-newflash"] { height: 0 !important; padding-bottom: 19.57% !important; background-size: 100% auto !important; }
	[id^="ja-topsl"] [class^="ja-newflash"] .moduletable { width: auto !important; padding: 0 !important; }

	/* columnas: una debajo de otra (primero el contenido, como está en la página) */
	#ja-content, #ja-colwrap, #ja-col1, #ja-col2 { float: none !important; width: auto !important; }
	#ja-content, #ja-content-top, #ja-content-bot { background: none !important; }
	#ja-content { background-color: #3a3a3a !important; border: 1px solid #555; border-radius: 4px; margin-bottom: 12px; }
	#ja-content div.ja-innerpad { min-height: 0; padding: 12px; }
	#ja-col1 div.ja-innerpad, #ja-col2 div.ja-innerpad { padding: 0; }
	#ja-col1 .module, #ja-col2 .module, #ja-col1 .moduletable, #ja-col2 .moduletable { width: auto !important; }
	#ja-col1 div, #ja-col2 div { max-width: 100%; box-sizing: border-box; }

	/* imágenes, vídeos y tablas de contenido: nunca más anchos que la pantalla */
	#ja-container img, #ja-footer img { max-width: 100%; height: auto; }
	#ja-container iframe, #ja-container object, #ja-container embed, #ja-container video { max-width: 100%; }
	#ja-container table { max-width: 100%; }
	#ja-content table[width], #ja-content td[width] { width: auto !important; }

	/* cajas de las fichas de butacas (template_css-butaca.css: 375/475/887px y márgenes superiores fijos) */
	.module-izq, .module-der, .module-centro, .module-centrado {
		width: auto !important; height: auto !important; min-height: 0 !important;
		margin: 10px 0 !important; padding: 10px !important; box-sizing: border-box; float: none !important;
	}
	#caja-1-1, #caja-1-2, #caja-3-1, #caja-3-2 { float: none !important; margin: 0 !important; }
	#caja-4 { margin-top: 10px !important; }
	#caja-4 p { margin: 10px 0 !important; }
	.iframe-google { margin-left: 0 !important; }
	.module-izq iframe, .module-der iframe, .module-centro iframe { max-width: 100%; }
	.module-izq img, .module-der img, .module-centro img, .module-centrado img { max-width: 100%; height: auto; }
	img.colores-modelos { margin-left: 0 !important; } /* margin-left:41px de escritorio */

	/* pie */
	#ja-footer { height: auto; }
	#ja-footer div[align="right"] { text-align: center; }
	#ja-banner { position: static; }
}

@media screen and (max-width: 600px) {
	#ja-content div.ja-innerpad { padding: 10px; }
	#ja-container h1, #ja-container h2 { font-size: 1.25em; line-height: 1.3; }
	/* tablas de texto a una sola columna */
	#ja-content table, #ja-content tbody, #ja-content tr, #ja-content td { display: block; width: auto !important; }
}

/* ==========================================================================
   MENÚ MÓVIL (lo crea scripts/menu-movil.js). Vale para el menú de las páginas .html (#ja-cssmenu) y el de la
   tienda (#css-menu).
   ========================================================================== */
/* en escritorio los botones del menú móvil no existen a la vista */
.menu-movil-boton, .menu-movil-sub { display: none; }
/* pantallas táctiles anchas: el primer toque en "Productos" abre el desplegable */
#ja-cssmenu li.menu-tactil-abierto > ul, #css-menu li.menu-tactil-abierto > ul { left: auto !important; }

@media screen and (max-width: 959px) {
	/* botón "Menú" con icono de hamburguesa */
	.menu-movil-boton {
		display: flex; align-items: center; width: 100%; min-height: 48px; margin: 0; padding: 0 16px; box-sizing: border-box;
		background: #2f2f2f linear-gradient(#4a4a4a, #2b2b2b); color: #fff; border: 0; border-bottom: 1px solid #1f1f1f;
		font: bold 16px/1 "Lucida Grande", "Trebuchet MS", Arial, sans-serif; letter-spacing: 1px; text-align: left; cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.menu-movil-icono { display: inline-block; width: 24px; margin-right: 12px; }
	.menu-movil-icono span { display: block; height: 3px; margin: 5px 0; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
	.menu-movil-abierto .menu-movil-icono span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.menu-movil-abierto .menu-movil-icono span:nth-child(2) { opacity: 0; }
	.menu-movil-abierto .menu-movil-icono span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

	/* menú cerrado por defecto; al pulsar el botón se despliega en vertical */
	#ja-cssmenu, #css-menu { display: none !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
	.menu-movil-abierto > #ja-cssmenu, .menu-movil-abierto > #css-menu { display: block !important; }
	#ja-cssmenu li, #css-menu li {
		float: none !important; display: block; width: auto !important; position: relative; margin: 0 !important; padding: 0 !important;
		border-top: 1px solid #444; background: #2f2f2f !important; white-space: normal !important;
	}
	#ja-cssmenu li a, #css-menu li a {
		float: none !important; display: block !important; width: auto !important; margin: 0 !important;
		padding: 0 60px 0 16px !important; border: 0 !important; line-height: 48px !important;
		font-size: 15px !important; color: #efefef !important; background: none !important; white-space: normal !important; text-align: left;
	}
	#ja-cssmenu li a span, #css-menu li a span { background: none !important; padding: 0 !important; display: inline !important; float: none !important; position: static !important; width: auto !important; }

	/* submenús: dentro del menú, cerrados hasta pulsar "+" */
	#ja-cssmenu li ul, #css-menu li ul {
		position: static !important; left: auto !important; width: auto !important; height: auto !important; margin: 0 !important;
		display: none !important; border: 0 !important; background: #262626 !important; box-shadow: none !important;
	}
	#ja-cssmenu li.menu-movil-sub-abierto > ul, #css-menu li.menu-movil-sub-abierto > ul { display: block !important; }
	#ja-cssmenu li li, #css-menu li li { background: #262626 !important; border-top: 1px solid #383838; }
	#ja-cssmenu li li a, #css-menu li li a { padding-left: 34px !important; font-size: 14px !important; line-height: 44px !important; color: #ccc !important; }

	/* botón "+" / "−" para abrir cada submenú (zona de toque grande) */
	.menu-movil-sub {
		display: block; position: absolute; right: 0; top: 0; width: 56px; height: 48px; margin: 0; padding: 0;
		border: 0; border-left: 1px solid #444; background: transparent; color: #fff; font: bold 24px/48px Arial, sans-serif;
		cursor: pointer; -webkit-tap-highlight-color: transparent; z-index: 5;
	}
	.menu-movil-con-sub.menu-movil-sub-abierto > .menu-movil-sub { background: #3a3a3a; }
}