:root {
	--clean-bg: #ffffff;
	--clean-surface: #ffffff;
	--clean-surface-2: #f7f8fa;
	--clean-text: #111111;
	--clean-muted: #5f6772;
	--clean-border: #d9dde3;
	--clean-border-strong: #c8ced7;
	--clean-shadow-soft: 0 6px 18px rgba(17, 24, 39, 0.08);
	--clean-radius: 4px;
}

body.tracking-clean,
body.cpanel-clean,
body.login-clean,
body.mobile-clean {
	background: var(--clean-bg) !important;
	color: var(--clean-text) !important;
	font-family: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

body.tracking-clean,
body.cpanel-clean {
	overflow-x: hidden !important;
}

body.tracking-clean *,
body.cpanel-clean * {
	box-sizing: border-box;
}

body.tracking-clean #menu,
body.cpanel-clean #top_panel,
body.tracking-clean #side_panel,
body.tracking-clean #bottom_panel,
body.tracking-clean .ui-dialog,
body.cpanel-clean .ui-dialog,
body.tracking-clean .ui-jqgrid,
body.cpanel-clean .ui-jqgrid {
	background-image: none !important;
}

body.tracking-clean .button,
body.cpanel-clean .button,
body.tracking-clean .panel-button,
body.cpanel-clean .panel-button,
body.tracking-clean .tracking-action-button {
	background: #ffffff !important;
	color: var(--clean-text) !important;
	border: 1px solid var(--clean-border) !important;
	border-radius: var(--clean-radius) !important;
	height: 34px;
	line-height: 32px;
}

body.tracking-clean .button:hover,
body.cpanel-clean .button:hover,
body.tracking-clean .tracking-action-button:hover {
	background: #f3f4f6 !important;
}

body.tracking-clean input,
body.tracking-clean select,
body.tracking-clean textarea,
body.cpanel-clean input,
body.cpanel-clean select,
body.cpanel-clean textarea,
body.tracking-clean .ms-parent .ms-choice,
body.cpanel-clean .ms-parent .ms-choice {
	background: #ffffff !important;
	color: var(--clean-text) !important;
	border: 1px solid var(--clean-border) !important;
	border-radius: var(--clean-radius) !important;
}

body.tracking-clean .ui-jqgrid,
body.cpanel-clean .ui-jqgrid {
	font-size: 12px !important;
	border: 1px solid var(--clean-border) !important;
	background: #ffffff !important;
}

body.tracking-clean .ui-jqgrid .ui-jqgrid-hdiv,
body.cpanel-clean .ui-jqgrid .ui-jqgrid-hdiv {
	margin: 0 !important;
	border-bottom: 1px solid var(--clean-border) !important;
	background: var(--clean-surface-2) !important;
}

body.tracking-clean .ui-jqgrid .ui-jqgrid-htable th div,
body.cpanel-clean .ui-jqgrid .ui-jqgrid-htable th div {
	height: auto !important;
	line-height: 1.25 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	padding-top: 2px;
	padding-bottom: 2px;
}

body.tracking-clean .ui-jqgrid tr.jqgrow td,
body.cpanel-clean .ui-jqgrid tr.jqgrow td {
	padding: 4px 6px !important;
	line-height: 1.25 !important;
	font-size: 12px !important;
	height: 30px !important;
}

body.tracking-clean .ui-jqgrid .ui-jqgrid-bdiv,
body.cpanel-clean .ui-jqgrid .ui-jqgrid-bdiv {
	overflow-x: auto !important;
	overflow-y: auto !important;
}

body.tracking-clean .ui-jqgrid .ui-jqgrid-pager,
body.cpanel-clean .ui-jqgrid .ui-jqgrid-pager {
	position: relative !important;
	bottom: auto !important;
	margin: 0 !important;
	padding: 6px 8px !important;
	height: 36px !important;
	min-height: 36px !important;
	border-top: 1px solid var(--clean-border) !important;
	background: #ffffff !important;
	overflow: visible !important;
}

body.tracking-clean .ui-jqgrid .ui-pg-table td,
body.cpanel-clean .ui-jqgrid .ui-pg-table td {
	padding: 0 2px !important;
	vertical-align: middle !important;
}

body.tracking-clean .ui-dialog,
body.cpanel-clean .ui-dialog {
	max-width: calc(100vw - 18px) !important;
	max-height: calc(100vh - 18px) !important;
	border: 1px solid var(--clean-border-strong) !important;
	border-radius: 6px !important;
	box-shadow: var(--clean-shadow-soft) !important;
	overflow: hidden !important;
}

body.tracking-clean .ui-dialog .ui-dialog-titlebar,
body.cpanel-clean .ui-dialog .ui-dialog-titlebar {
	background: #ffffff !important;
	border: 0 !important;
	border-bottom: 1px solid var(--clean-border) !important;
	padding: 10px 14px !important;
}

body.tracking-clean .ui-dialog .ui-dialog-title,
body.cpanel-clean .ui-dialog .ui-dialog-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
}

body.tracking-clean .ui-dialog .ui-dialog-content,
body.cpanel-clean .ui-dialog .ui-dialog-content {
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

body.tracking-clean .dialog-form-shell .row2,
body.cpanel-clean .dialog-form-shell .row2 {
	margin-bottom: 8px;
}

body.tracking-clean .dialog-form-shell .row2 > div:first-child,
body.cpanel-clean .dialog-form-shell .row2 > div:first-child {
	font-size: 12px;
	color: #2f3a47;
	padding-top: 8px;
}

/* CPANEL */

body.cpanel-clean {
	background: #f6f7f9 !important;
}

body.cpanel-clean #content {
	display: block !important;
	min-height: calc(100vh - var(--cpanel-top-offset, 74px));
	padding: 0 !important;
}

body.cpanel-clean #top_panel {
	position: sticky !important;
	top: 0;
	height: auto !important;
	min-height: 52px !important;
	z-index: 120;
	background: #ffffff !important;
	border-bottom: 1px solid var(--clean-border) !important;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
	padding: 8px 10px !important;
}

body.cpanel-clean #top_panel .tp-menu,
body.cpanel-clean #top_panel .tp-group {
	gap: 6px;
}

body.cpanel-clean #top_panel .tp-group {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
}

body.cpanel-clean #top_panel .left-menu,
body.cpanel-clean #top_panel .right-menu,
body.cpanel-clean #top_panel .tp-menu div {
	float: none !important;
}

body.cpanel-clean #top_panel .tp-menu div a {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
}

body.cpanel-clean #top_panel .left-menu {
	flex: 1 1 auto;
	min-width: 0;
}

body.cpanel-clean #top_panel .right-menu {
	justify-content: flex-end;
}

body.cpanel-clean #top_panel a {
	background: #ffffff !important;
	border: 1px solid var(--clean-border) !important;
	color: #111827 !important;
	border-radius: var(--clean-radius) !important;
	height: 34px !important;
	line-height: 32px !important;
	padding: 0 10px !important;
}

body.cpanel-clean #top_panel a.active {
	background: #111111 !important;
	border-color: #111111 !important;
	color: #ffffff !important;
}

body.cpanel-clean #cpanel_user_list,
body.cpanel-clean #cpanel_object_list,
body.cpanel-clean #cpanel_unused_object_list,
body.cpanel-clean #cpanel_billing_plan_list,
body.cpanel-clean #cpanel_manage_server,
body.cpanel-clean .cpanel-panel {
	position: relative !important;
	margin: 10px !important;
	padding: 10px !important;
	border: 1px solid var(--clean-border) !important;
	border-top: 1px solid var(--clean-border) !important;
	border-radius: 6px !important;
	background: #ffffff !important;
	height: calc(100vh - var(--cpanel-top-offset, 74px) - 14px) !important;
	max-height: calc(100vh - var(--cpanel-top-offset, 74px) - 14px) !important;
	min-height: 340px !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
}

body.cpanel-clean .cpanel-title {
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
	flex: 0 0 auto;
}

body.cpanel-clean #cpanel h1.title {
	display: block !important;
	float: none !important;
	font-size: 22px !important;
	color: #111111 !important;
}

body.cpanel-clean #cpanel h1.title span,
body.cpanel-clean .cpanel-title .version {
	color: var(--clean-muted) !important;
}

body.cpanel-clean .cpanel-grid-shell {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow: hidden !important;
	padding-bottom: 0 !important;
}

body.cpanel-clean #cpanel_manage_server .cpanel-tabs-content {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	margin: 0 !important;
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto !important;
}

body.cpanel-clean .ui-jqgrid .ui-jqgrid-pager {
	height: 44px !important;
	min-height: 44px !important;
	padding: 6px 8px !important;
}

body.cpanel-clean .ui-jqgrid .ui-jqgrid-pager .ui-pg-div {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	height: 30px !important;
	padding: 0 8px !important;
	border: 1px solid var(--clean-border) !important;
	border-radius: var(--clean-radius) !important;
	background: #ffffff !important;
	color: #111827 !important;
}

body.cpanel-clean .ui-jqgrid .ui-jqgrid-pager .ui-pg-div:hover {
	background: #f3f4f6 !important;
}

body.cpanel-clean #cpanel_user_list_grid_add_button .ui-pg-div::after {
	content: " Nuevo usuario";
}

body.cpanel-clean #cpanel_object_list_grid_add_button .ui-pg-div::after {
	content: " Nueva unidad";
}

body.cpanel-clean #cpanel_billing_plan_list_grid_add_button .ui-pg-div::after {
	content: " Nuevo plan";
}

body.cpanel-clean #cpanel_user_list_grid_action_menu_button .ui-pg-div::after,
body.cpanel-clean #cpanel_object_list_grid_action_menu_button .ui-pg-div::after,
body.cpanel-clean #cpanel_unused_object_list_grid_action_menu_button .ui-pg-div::after,
body.cpanel-clean #cpanel_billing_plan_list_grid_action_menu_button .ui-pg-div::after {
	content: " Acción";
}

body.cpanel-clean .menu.ui-menu {
	background: #ffffff !important;
	border: 1px solid var(--clean-border) !important;
	border-radius: 6px !important;
	box-shadow: var(--clean-shadow-soft) !important;
}

body.cpanel-clean .menu.ui-menu .ui-menu-item > a {
	font-size: 12px;
	font-weight: 600;
	color: #1f2937;
	border-radius: 4px;
}

body.cpanel-clean .menu.ui-menu .ui-menu-item > a:hover {
	background: #f3f4f6 !important;
}

/* TRACKING */

body.tracking-clean #menu {
	background: #ffffff !important;
	border-bottom: 1px solid var(--clean-border) !important;
	box-shadow: 0 1px 8px rgba(15, 23, 42, 0.06) !important;
	z-index: 80 !important;
}

body.tracking-clean #menu a,
body.tracking-clean #menu b {
	color: #111827 !important;
	border-radius: var(--clean-radius) !important;
}

body.tracking-clean #menu li a:hover {
	background: #f3f4f6 !important;
	color: #111111 !important;
}

body.tracking-clean #menu ul.sub-menus {
	background: #ffffff !important;
	border: 1px solid var(--clean-border) !important;
	box-shadow: var(--clean-shadow-soft) !important;
	border-radius: 6px !important;
}

body.tracking-clean #menu ul.sub-menus a {
	color: #111827 !important;
}

body.tracking-clean #menu ul.sub-menus a:hover {
	background: #f3f4f6 !important;
}

body.tracking-clean #sidebar-menu {
	background: #ffffff !important;
	border-right: 1px solid var(--clean-border) !important;
}

body.tracking-clean #sidebar-menu .v-menu a,
body.tracking-clean #sidebar-menu .v-menu a .label,
body.tracking-clean #sidebar-menu .material-symbols-outlined {
	color: #111827 !important;
}

body.tracking-clean #sidebar-menu .v-menu a:hover,
body.tracking-clean #sidebar-menu .v-menu li.active a {
	background: #f3f4f6 !important;
}

body.tracking-clean #side_panel {
	background: #ffffff !important;
	border-right: 1px solid var(--clean-border) !important;
}

body.tracking-clean #side_panel > .ui-tabs-nav,
body.tracking-clean #side_panel_objects_live_panel,
body.tracking-clean .object-live-preview-wrap,
body.tracking-clean .object-live-metric,
body.tracking-clean .object-live-empty,
body.tracking-clean .map-switcher a,
body.tracking-clean .map-layer-control {
	background-image: none !important;
	box-shadow: none !important;
	border-radius: var(--clean-radius) !important;
}

body.tracking-clean .object-live-preview-overlay {
	background: rgba(17, 17, 17, 0.72) !important;
	color: #ffffff !important;
	border-radius: 0 !important;
}

body.tracking-clean #side_panel > .ui-tabs-nav {
	background: #f7f8fa !important;
	border: 1px solid var(--clean-border) !important;
	border-radius: 6px !important;
}

body.tracking-clean #side_panel > .ui-tabs-nav li a {
	border: 1px solid transparent !important;
	background: transparent !important;
	color: #374151 !important;
	border-radius: 4px !important;
}

body.tracking-clean #side_panel > .ui-tabs-nav li.ui-tabs-active a {
	background: #111111 !important;
	color: #ffffff !important;
}

body.tracking-clean #side_panel_dragbar,
body.tracking-clean #bottom_panel_dragbar {
	background: #e6e9ee !important;
}

body.tracking-clean .panel-button.icon-btn {
	border-radius: var(--clean-radius) !important;
}

body.tracking-clean #map {
	background: #eef1f5 !important;
}

body.tracking-clean #bottom_panel {
	background: #ffffff !important;
}

body.tracking-clean #bottom_panel_datalist,
body.tracking-clean #bottom_panel_graph,
body.tracking-clean #bottom_panel_msg {
	background: #ffffff !important;
	border: 1px solid var(--clean-border) !important;
	border-radius: var(--clean-radius) var(--clean-radius) 0 0 !important;
	box-shadow: none !important;
}

body.tracking-clean #bottom_panel .controls {
	top: 8px !important;
	right: 8px !important;
	z-index: 4;
}

body.tracking-clean #bottom_panel .controls a {
	width: 26px !important;
	height: 26px !important;
	border-radius: var(--clean-radius) !important;
	background: #ffffff !important;
	border: 1px solid var(--clean-border) !important;
}

body.tracking-clean #bottom_panel_tabs > .ui-tabs-nav {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	padding-right: 90px !important;
}

body.tracking-clean #bottom_panel_tabs > .ui-tabs-panel {
	overflow-x: hidden !important;
}

body.tracking-clean #side_panel_objects_footer_controls {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 8px 8px 0 !important;
	margin: 0 !important;
	border-top: 1px solid var(--clean-border);
	background: #ffffff;
	position: relative;
	z-index: 4;
	min-height: 48px;
	overflow: visible !important;
}

body.tracking-clean #side_panel_objects_footer_controls .right-actions {
	display: flex !important;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	flex-wrap: wrap;
}

body.tracking-clean #side_panel_objects_footer_controls .tracking-action-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	min-height: 32px;
	padding: 0 10px;
	border-radius: var(--clean-radius) !important;
	background: #ffffff !important;
	border: 1px solid var(--clean-border) !important;
	color: #111827 !important;
	text-decoration: none;
}

body.tracking-clean #side_panel_objects_footer_controls .tracking-action-button .material-symbols-outlined {
	font-size: 16px !important;
	line-height: 1 !important;
}

body.tracking-clean #side_panel_objects_footer_controls .tracking-action-button .action-label {
	font-size: 11px;
	font-weight: 600;
}

body.tracking-clean #side_panel_objects_live_panel {
	background: #ffffff !important;
	border-left: 1px solid var(--clean-border) !important;
}

body.tracking-clean.layout-side-inspector-open #side_panel {
	width: min(680px, calc(100vw - 340px)) !important;
}

body.tracking-clean.layout-side-inspector-open #side_panel_objects {
	grid-template-columns: minmax(290px, 52%) minmax(240px, 1fr) !important;
	grid-template-rows: auto minmax(0, 1fr) auto !important;
	padding: 8px 0 8px 0 !important;
}

body.tracking-clean.layout-side-inspector-open #side_panel > .ui-tabs-nav {
	width: min(360px, 52%) !important;
	max-width: min(360px, 52%) !important;
	min-width: min(360px, 52%) !important;
}

body.tracking-clean.layout-side-inspector-open #side_panel_objects_status {
	max-width: none !important;
	margin: 0 6px 6px 0 !important;
}

body.tracking-clean.layout-side-inspector-open #side_panel_objects_object_list {
	width: auto !important;
	flex: 0 0 auto !important;
	padding-right: 6px !important;
}

body.tracking-clean.layout-side-inspector-open #side_panel_objects_footer_controls {
	grid-column: 1 !important;
	grid-row: 3 !important;
	margin: 0 6px 0 0 !important;
}

body.tracking-clean.layout-side-inspector-open #side_panel_objects_live_panel {
	grid-row: 1 / span 3 !important;
	background: #ffffff !important;
	border-left: 1px solid var(--clean-border) !important;
	padding: 8px 8px 8px 8px !important;
}

body.tracking-clean #history_view_control,
body.tracking-clean .map-layer-control,
body.tracking-clean .map-switcher a {
	background: #ffffff !important;
	border: 1px solid var(--clean-border) !important;
	box-shadow: none !important;
}

/* RESPONSIVE */

@media screen and (max-width: 1024px) {
	body.cpanel-clean #top_panel .left-menu,
	body.cpanel-clean #top_panel .right-menu {
		flex: 1 1 100%;
		justify-content: flex-start !important;
	}

	body.cpanel-clean #cpanel_user_list,
	body.cpanel-clean #cpanel_object_list,
	body.cpanel-clean #cpanel_unused_object_list,
	body.cpanel-clean #cpanel_billing_plan_list,
	body.cpanel-clean #cpanel_manage_server,
	body.cpanel-clean .cpanel-panel {
		height: calc(100vh - var(--cpanel-top-offset, 74px) - 10px) !important;
		max-height: calc(100vh - var(--cpanel-top-offset, 74px) - 10px) !important;
		margin: 6px !important;
		padding: 8px !important;
	}

	body.cpanel-clean .ui-jqgrid .ui-jqgrid-pager .ui-pg-div::after {
		content: "" !important;
	}
}

@media screen and (max-width: 800px) {
	body.tracking-clean #side_panel_objects_footer_controls {
		flex-wrap: wrap;
		padding-right: 4px !important;
	}

	body.tracking-clean #side_panel_objects_footer_controls .right-actions {
		width: 100%;
		justify-content: flex-start;
		margin-left: 0;
	}

	body.tracking-clean #side_panel_objects_footer_controls .tracking-action-button {
		flex: 1 1 120px;
		min-width: 0;
	}
}
