/* =========================================================
   Formula Pos - Capa responsiva (móvil / tablet)
   IMPORTANTE: no aplicar reglas globales que alteren el escritorio.
   Todo el comportamiento responsivo vive dentro de @media.
   ========================================================= */

/* ----- Tablet (<= 1024px) ----- */
@media (max-width: 1024px){

	html{
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body{
		overflow-x: hidden;
		max-width: 100vw;
	}

	#area_pestanas{
		height: 42px;
		padding-top: 4px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		padding-right: 48px;
		z-index: 900;
		background: #fff;
	}

	#contenedor_botones{
		width: auto;
		min-width: 100%;
		height: auto;
		display: inline-flex;
		gap: 4px;
		padding: 0 8px 4px 8px;
	}

	.pestana{
		max-width: 140px;
		flex: 0 0 auto;
	}

	.div_relleno{
		display: none;
	}

	#area_aplicacion,
	.aplicacion{
		top: 42px;
	}

	.area_aplicacion{
		top: 76px;
		padding-bottom: 16px;
	}

	.item_home{
		width: 31%;
		margin: 1%;
		font-size: 1.15em;
		vertical-align: top;
	}

	.label_estadistica_basica{
		width: 46%;
		font-size: 1.35em;
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.divlogin{
		width: 92% !important;
		max-width: 720px;
	}

	.divlogin > .div49{
		width: 100%;
		border-left: none !important;
		height: auto !important;
	}

	.texto_login{
		padding: 4%;
	}

	.msgBox{
		max-width: 96vw !important;
	}

	.area_trabajo{
		width: 100%;
		margin: 8px 0;
		padding: 0 8px;
		-webkit-overflow-scrolling: touch;
	}

	.tabla{
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.boton,
	.botonE,
	.div_custom{
		min-height: 40px;
		padding: 10px 14px;
	}

	.formulario,
	select.formulario,
	select{
		min-height: 42px;
		font-size: 16px; /* evita zoom automático en iOS */
	}

	.menu_hijo{
		transform: translate(-120px, 0);
		max-width: 80vw;
	}

	.acciones_usuario{
		width: 220px;
		transform: translate(-190px, -2px);
	}

}

/* ----- Móvil (<= 768px) ----- */
@media (max-width: 768px){

	body{
		font-size: 15px;
		overflow-x: hidden;
		max-width: 100vw;
	}

	/* Solo miniaturas de módulos en inicio; no tocar iconos de barras/menús */
	.area_aplicacion .item_home > img,
	.paso_asistente > .div24 img{
		max-width: 100%;
	}

	.barra_titulo img,
	.barra_titulo_des img,
	.pestana img,
	.boton_usuario img,
	.menu_hijo img,
	.acciones_usuario img,
	.item_menu img{
		max-width: none;
	}

	h2{
		font-size: 1.25em;
		line-height: 1.25;
	}

	#area_pestanas{
		height: 46px;
	}

	#area_aplicacion,
	.aplicacion{
		top: 46px;
	}

	.area_aplicacion{
		top: 78px;
		left: 0;
		right: 0;
		text-align: left;
		padding: 0 0 24px 0;
	}

	.barra_titulo{
		height: auto;
		min-height: 28px;
		padding: 6px 4px;
		font-size: 13px;
		line-height: 1.2;
	}

	.barra_titulo > div > img{
		height: 22px;
	}

	/* Columnas del sistema: apilar */
	.div24,
	.div25,
	.div32,
	.div33,
	.div45,
	.div49,
	.div60,
	.div66,
	.div69,
	.div73,
	.div74,
	.div90{
		display: block;
		width: 100% !important;
		max-width: 100%;
	}

	.divright,
	.divleft,
	.divcenter{
		text-align: left !important;
	}

	.divright .boton,
	.divright .botonE,
	.divright .boton_cancelar{
		margin: 4px 4px 4px 0;
	}

	.forzar_izquierda,
	.forzar_derecha{
		float: none;
	}

	.item_home{
		width: 46%;
		margin: 2%;
		font-size: 1.05em;
		padding-bottom: 8px;
	}

	.item_home img.div74,
	.item_home .div74{
		width: 70% !important;
		display: block;
		margin: 0 auto;
	}

	.label_estadistica_basica{
		width: 100%;
		margin: 8px 0;
		font-size: 1.2em;
	}

	/* Login */
	#cuadro_login,
	.divlogin{
		width: 94% !important;
		margin: 0 auto;
		box-shadow: 0 6px 18px rgba(0,0,0,.2);
	}

	.divlogin > .div49:first-child{
		display: none; /* oculta panel decorativo en móvil */
	}

	.texto_login{
		display: none;
	}

	/* Tablas con scroll horizontal */
	.area_trabajo,
	#tabla_ubicaciones,
	.div100.divcenter{
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tabla{
		min-width: 560px;
		font-size: 13px;
	}

	.tr_head,
	.tr_content,
	th{
		font-size: 12px !important;
	}

	.tabla td,
	.tabla th{
		padding: 8px 6px;
		white-space: nowrap;
	}

	.td_acciones{
		position: sticky;
		right: 0;
		background: inherit;
		z-index: 2;
	}

	/* Menús contextuales: más usables al tacto */
	.menu_hijo{
		position: fixed;
		left: 8px !important;
		right: 8px;
		width: auto !important;
		max-width: none;
		transform: none !important;
		bottom: 12px;
		top: auto !important;
		z-index: 2000 !important;
		border-radius: 10px;
		box-shadow: 0 8px 24px rgba(0,0,0,.25);
		max-height: 50vh;
		overflow: auto;
	}

	.menu_padre:hover > .menu_hijo{
		display: none; /* en móvil se abre por tap (JS) */
	}

	.menu_padre.menu_abierto > .menu_hijo{
		display: block;
	}

	.item_menu{
		padding: 12px 10px;
		min-height: 44px;
	}

	.boton_usuario{
		width: 40px;
		height: 40px;
		top: 3px;
		right: 4px;
	}

	.boton_usuario img{
		width: 36px;
		height: 36px;
	}

	.boton_usuario > .div100:hover > .acciones_usuario{
		display: none;
	}

	.boton_usuario.menu_abierto .acciones_usuario,
	.boton_usuario > .div100.menu_abierto > .acciones_usuario{
		display: block;
	}

	.acciones_usuario{
		position: fixed;
		top: 46px;
		right: 8px;
		left: auto;
		width: min(280px, 92vw);
		transform: none;
		z-index: 2001;
		border-radius: 8px;
		box-shadow: 0 8px 24px rgba(0,0,0,.25);
	}

	/* Ventanas emergentes a casi pantalla completa */
	.msgBox{
		left: 2vw !important;
		right: 2vw !important;
		top: 52px !important;
		width: 96vw !important;
		max-width: 96vw !important;
		max-height: calc(100vh - 64px) !important;
		min-height: 0 !important;
	}

	.msgBox .area_mensaje{
		max-height: calc(100vh - 120px) !important;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	.ficha_especial{
		margin: 8px 0;
		padding: 12px;
	}

	.contenedor_info > .div74{
		max-height: none;
	}

	.layer_adjunto{
		width: 72px;
		height: 72px;
	}

	/* Asistente / formularios densos */
	#asistente_bienvenida_root .boton{
		display: inline-block;
		margin: 6px 6px 6px 0;
	}

}

/* ----- Móvil estrecho (<= 480px) ----- */
@media (max-width: 480px){

	.item_home{
		width: 100%;
		margin: 8px 0;
		font-size: 1.1em;
	}

	.pestana{
		max-width: 120px;
		font-size: 12px;
	}

	.tabla{
		min-width: 520px;
	}

	.boton,
	.botonE,
	.boton_cancelar{
		width: 100%;
		margin: 6px 0 !important;
		display: block;
	}

	.div100.divright{
		text-align: left !important;
	}

}

/* Utilidad: contenedor de tabla con scroll en cualquier breakpoint */
.tabla_scroll{
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}