@charset "utf-8";
/* responsive.css - Capa responsive para Tienda NXD (layout legacy 985px)
   Cargado al final del <head> para sobrescribir anchos fijos solo en pantallas pequeñas. */

#hamburguesa-toggle,
#categorias-toggle,
#buscar-toggle{
	display:none;
}

/* =============================== MOVIL / TABLET =============================== */
@media (max-width:800px){
	html,
	body{
		width:100%;
		min-width:0;
		overflow-x:hidden;
	}
	img{
		max-width:100%;
		height:auto;
	}
	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	select,
	textarea{
		max-width:100%;
		box-sizing:border-box;
	}

	/* ---------- Estructura general ---------- */
	.top{
		height:auto;
	}
	.cont_top{
		display:flex;
		flex-direction:column;
		width:100% !important;
		height:auto;
		margin-top:0;
		border:none;
		border-radius:0;
		box-sizing:border-box;
	}
	.contenedor_cenro_ind,
	.contenedor_cenro{
		width:100% !important;
		margin-bottom:0;
		border:none;
		box-sizing:border-box;
	}
	div[style*="983px"]{
		width:100% !important;
		float:none !important;
		box-sizing:border-box;
		padding:0 8px;
		margin-top:0 !important;
	}

	/* ---------- Header ---------- */
	.top_mid{
		order:1;
		position:static;
		width:100%;
		height:auto;
		padding:12px 0 0;
		text-align:center;
	}
	.logo{
		position:static;
		margin:0 auto;
		width:150px;
		height:102px;
	}
	#top_bar{
		display:none !important;
	}
	#buscar-toggle{
		display:block;
		position:absolute;
		top:10px;
		left:10px;
		z-index:6000;
		width:42px;
		height:42px;
		border:1px solid #CCCCCC;
		border-radius:50%;
		background-color:#FFFFFF;
		background-image:url(../images/lupa-rosas-premium.png);
		background-repeat:no-repeat;
		background-position:center;
		background-size:24px;
		box-shadow:0 1px 3px rgba(0,0,0,.25);
		cursor:pointer;
		padding:0;
		outline:none;
	}

	/* ---------- Menu superior ---------- */
	.menu_top_contenedor{
		order:3;
		position:static;
		width:100%;
		height:auto;
		margin:8px 0 0;
	}
	.menu_top_contenedor .list_derecha{
		float:none;
		display:block;
		width:100%;
	}
	.menu_top_contenedor .list_derecha a{
		display:block;
		padding:12px 10px;
		border-bottom:1px solid rgba(255,255,255,.15);
		line-height:normal;
	}
	.menu_top_contenedor .list_derecha:last-child a{
		border-bottom:none;
	}
	body.menu-cerrado .menu_top_contenedor .list_derecha{
		display:none;
	}

	#hamburguesa-toggle{
		display:block;
	}

	/* ---------- Boton categorias ---------- */
	#categorias-toggle{
		display:block;
	}

	/* ---------- Columnas apiladas ---------- */
	.modulo_iz{
		width:100% !important;
		float:none;
		margin:0;
	}
	body.cat-cerrado .modulo_iz{
		display:none;
	}
	#div_para_menu_izquierdo{
		width:100% !important;
		float:none;
		max-height:none;
		min-height:0;
		margin:0;
	}
	.menu_left{
		width:100%;
		float:none;
		height:auto;
	}
	.menu_left img,
	#div_para_menu_izquierdo img{
		display:none;
	}
	.btn_menu_left{
		width:100%;
		box-sizing:border-box;
	}
	/* Jerarquía del menú lateral: más compacto en móvil */
	.menu_left_tree .menu_cabecera{
		font-size: 13px;
		padding: 9px 10px;
	}
	.menu_left_tree .menu_enlace{
		font-size: 15px;
		padding: 10px;
	}
	.menu_left_tree .menu_activo > .menu_enlace{
		padding-left: 7px;
	}
	.menu_left_tree .menu_enlace_hijo{
		font-size: 13px;
		padding: 8px 10px 8px 30px;
	}
	.menu_left_tree .menu_enlace_hijo::before{
		left: 16px;
	}
	.menu_left_tree .menu_nivel_2 .menu_enlace{
		font-size: 12px;
		padding: 7px 10px 7px 44px;
	}
	.menu_left_tree .menu_nivel_2 .menu_enlace::before{
		left: 30px;
	}
	.modulo_derecho{
		width:100% !important;
		min-width:0;
		margin:0 !important;
	}

	/* ---------- Grilla de productos ---------- */
	.destacados_productos2{
		width:100%;
		float:left;
	}
	.TABS_prods{
		padding-left:0;
		margin-bottom:20px;
	}
	.prev_producto{
		width:48.5%;
		margin-right:1.5%;
		box-sizing:border-box;
	}
	.prev_nombreprod{
		display:block;
		width:100% !important;
		box-sizing:border-box;
	}
	.TablaImagenCentrada{
		width:100%;
	}
	.btn_verdetalle{
		width:100% !important;
	}

	/* ---------- Slides de portada ---------- */
	#container{
		width:100% !important;
		height:auto;
		padding:0;
		overflow:hidden;
	}
	#example{
		width:100% !important;
		height:auto;
		left:0;
	}
	.slides_container{
		width:100% !important;
		height:auto;
	}
	.slides_container div.slide{
		width:100% !important;
		height:auto;
	}
	.slides_container .slide img{
		width:100%;
		height:auto;
	}
	#slides .next{
		left:auto;
		right:6px;
	}
	.pagination{
		right:10px;
	}

	/* ---------- Producto detalle ---------- */
	.main_detcat_P{
		width:100%;
		margin:0;
		padding:10px;
		box-sizing:border-box;
	}
	.iz_detcat_P{
		width:100% !important;
		float:none;
		margin:0 0 15px;
	}
	.de_detcat_P{
		width:100% !important;
		float:none;
	}
	.de_detcat_de_ima_P{
		width:100% !important;
	}
	#kjhvfi{
		max-width:100% !important;
		height:auto;
	}
	.boton_compra_ahora,
	.boton_compra_ahora_foot{
		max-width:100%;
	}
	.agregues_tit_ob{
		width:100%;
		margin-left:0;
		box-sizing:border-box;
	}

	/* ---------- Paginas estaticas ---------- */
	.contenido{
		width:100%;
		max-width:100%;
		margin:10px 0;
		padding:15px;
		box-sizing:border-box;
		float:none;
	}
	.contenido img{
		float:none;
		max-width:100%;
	}
	.contenido div[style*="px"],
	.contenido p[style*="px"],
	.contenido table[style*="px"]{
		width:auto !important;
		max-width:100% !important;
		box-sizing:border-box;
	}

	/* ---------- Tablas fijas (carro / cuentas / webpay) ---------- */
	table{
		max-width:100% !important;
	}
	.txt_form,
	.register{
		max-width:100% !important;
		box-sizing:border-box;
	}
	.hover_bkgr_fricc > div{
		width:92%;
		max-width:92%;
	}

	/* ---------- Avisos ---------- */
	.jGrowl{
		left:3% !important;
		max-width:94%;
		box-sizing:border-box;
	}

	/* ---------- Paginador ---------- */
	#tabs_paginador_main{
		padding-left:0;
		text-align:center;
	}

	/* ---------- Footer ---------- */
	.contenedor_cenro_footer{
		width:100% !important;
		padding:20px 5px;
		box-sizing:border-box;
	}
	.DatosEmpresa{
		width:100%;
		box-sizing:border-box;
	}
}

/* =============================== MOVILES PEQUEÑOS =============================== */
@media (max-width:480px){
	.prev_producto{
		width:48.5%;
	}
	.btn_menu_left a{
		font-size:13px;
	}
}

/* =============================== MUY PEQUEÑOS =============================== */
@media (max-width:360px){
	.prev_producto{
		width:100%;
		margin-right:0;
	}
	.prev_producto .img_base,
	.TablaImagenCentrada{
		margin:0 auto;
	}
	.logo{
		width:130px;
		height:89px;
	}
}

/* ---------- Estilo de los botones toggle (visibles solo en <=800px) ---------- */
#hamburguesa-toggle,
#categorias-toggle{
	margin:0;
	padding:12px 10px;
	width:100%;
	border:none;
	color:#FFFFFF;
	font-family:Arial,Helvetica,sans-serif;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	cursor:pointer;
	box-sizing:border-box;
}
#hamburguesa-toggle{
	background:linear-gradient(180deg,#4b538b,#15191d);
	border-bottom:1px solid rgba(255,255,255,.25);
}
#categorias-toggle{
	background:linear-gradient(180deg,#f7a21b,#e45635);
	text-align:center;
	border-radius:4px;
	margin:0 0 10px;
}

/* ---------- SweetAlert2 (buscador movil) ---------- */
.swal2-close{
	width:42px !important;
	height:42px !important;
	border:none !important;
	border-radius:50% !important;
	background-color:#e45635 !important;
	color:#FFFFFF !important;
	font-size:28px !important;
	font-weight:bold !important;
	line-height:42px !important;
	box-shadow:0 2px 6px rgba(0,0,0,.3) !important;
	cursor:pointer !important;
}
.swal2-close:hover{
	background-color:#c0392b !important;
	color:#FFFFFF !important;
}