/* =========================================================
   Formula Base - 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: 90px;
		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;
	}

	/* Menú lateral: drawer en tablet/móvil + botón hamburguesa visible */
	body.ft_con_menu{
		--ft-menu-w: 0px;
	}
	body.ft_con_menu .ft_menu_toggle{
		display:flex !important;
		z-index:1100;
	}
	body.ft_con_menu #area_pestanas{
		left: 0;
		padding-left: 52px;
	}
	body.ft_con_menu #area_aplicacion,
	body.ft_con_menu .aplicacion,
	body.ft_con_menu .area_aplicacion{
		left: 0;
	}
	body.ft_con_menu .ft_menu_lateral{
		width: min(86vw, 300px);
		transform: translateX(-105%);
		box-shadow: 8px 0 28px rgba(0,0,0,.25);
		z-index:1060;
		pointer-events: none;
	}
	body.ft_con_menu.ft_menu_abierto .ft_menu_lateral{
		transform: translateX(0);
		pointer-events: auto;
	}
	body.ft_con_menu.ft_menu_abierto .ft_menu_backdrop{
		display:block;
		z-index:1050;
	}
	body.ft_con_menu .ft_menu_collapse{
		display:none;
	}
	body.ft_con_menu.ft_menu_colapsado .ft_menu_brand_txt,
	body.ft_con_menu.ft_menu_colapsado .ft_menu_item span{
		display:inline;
	}
	body.ft_con_menu.ft_menu_colapsado .ft_menu_item{
		justify-content:flex-start;
		padding:10px 10px;
	}

	.ft_login_page{
		padding: 12px 10px 28px;
		align-items: flex-start;
	}

	.ft_login_shell{
		width: 100%;
	}

	.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: 90px;
		left: 0;
		right: 0;
		text-align: left;
		padding: 0 0 24px 0;
	}

	.barra_titulo,
	.barra_titulo_des{
		height: 44px;
		min-height: 44px;
		padding: 0 10px !important;
		font-size: 13px;
	}

	.barra_titulo > div > img,
	.barra_titulo_des img,
	.barra_accion img{
		height: 16px !important;
		width: 16px !important;
	}

	.barra_titulo_icon{
		width: 26px !important;
		height: 26px !important;
	}

	/* 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;
	}

	.dash_kpis{
		grid-template-columns:1fr 1fr !important;
	}
	.dash_grid{
		grid-template-columns:1fr !important;
	}
	.rep_kpis{
		grid-template-columns:1fr 1fr !important;
	}
	.rep_grid{
		grid-template-columns:1fr !important;
	}
	.rep_head,
	.rep_actions,
	.agenda_nav,
	.ficha_hero,
	.ficha_hero_actions{
		flex-direction:column !important;
		align-items:stretch !important;
	}
	.wizard_grid{
		grid-template-columns:1fr !important;
	}
	.msgBox{
		width:96vw !important;
		max-width:96vw !important;
		left:2vw !important;
		margin:0 !important;
	}
	.portal_meta{
		grid-template-columns:1fr !important;
	}

}

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

/* Tablas del sistema: scroll horizontal en móvil sin romper layout */
@media (max-width: 768px){
	.tabla.pi_tabla_latam{
		min-width: 0 !important;
		border:0;
	}
	.tabla.pi_tabla_latam .tr_head{
		display:none;
	}
	.tabla.pi_tabla_latam .tr_content{
		display:block;
		border:1px solid #e2e8f0;
		border-radius:12px;
		margin:0 0 10px;
		padding:10px 12px;
		background:#fff;
	}
	.tabla.pi_tabla_latam .tr_content td{
		display:flex;
		justify-content:space-between;
		gap:10px;
		border:0;
		padding:4px 0;
		font-size:14px;
	}
	.tabla.pi_tabla_latam .tr_content td:first-child{
		display:block;
		padding-bottom:8px;
		margin-bottom:6px;
		border-bottom:1px solid #f1f5f9;
	}
	.tabla.pi_tabla_latam .tr_content td::before{
		content: attr(data-label);
		font-size:11px;
		color:#64748b;
		font-weight:600;
		flex:0 0 78px;
	}
	.tabla.pi_tabla_latam .tr_content td:first-child::before{
		display:none;
	}
	.tabla.pi_tabla_latam .pi_tr_detalle.abierto{
		display:block;
		margin-top:-8px;
		border-top:0;
		border-top-left-radius:0;
		border-top-right-radius:0;
	}
	.tabla.pi_tabla_latam .pi_tr_detalle td,
	.tabla.pi_tabla_latam .pi_tr_detalle td::before{
		display:block;
		content:none !important;
	}
	.tabla.pi_tabla_latam .pi_detalle_grid{
		grid-template-columns:1fr;
	}
	.tabla.pi_tabla_latam .pi_td_acciones{
		justify-content:flex-start;
	}
	.tabla.pi_tabla_latam .pi_td_acciones .boton{
		min-height:40px;
	}
	.pi_chip{
		padding:10px 16px;
		min-height:44px;
	}
	.area_trabajo,
	.rep_table_wrap,
	.dash_panel{
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.ficha_tabs{
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
}