/* =========================
		   KUMEN VIEW LAYOUT
		========================= */
		html, body {
			height: 100%;
		}

		.km-view-root {
			--km-view-skin: var(--ianua-primary);
			--km-view-contrast: var(--ianua-primary-contrast);
			--km-view-soft: var(--ianua-primary-soft);
			--km-view-soft-strong: var(--ianua-ui-teal-soft);
			--km-view-border: var(--ianua-ui-border);
			--km-view-muted: var(--ianua-ui-muted);
			display: flex;
			flex-direction: column;
			gap: 10px;
			height: 100%;
			min-height: 0;
		}

		.km-view-header {
			position: relative;
			display: flex;
			align-items: center;
			gap: 20px;
			min-height: 64px;
			margin: 0 10px;
			padding: 4px 18px;
			border: 0;
			border-bottom: 1px solid #31966b;
			border-radius: 0;
			background: transparent;
			box-shadow: none;
			font-weight: 600;
			flex: 0 0 auto;
		}

		.km-view-left {
			flex: 1 1 0;
			min-width: 0;
			display: flex;
			align-items: center;
		}

		.km-view-center {
			flex: 0 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.km-view-right {
			flex: 1 1 0;
			justify-content: flex-end;
			display: flex;
			gap: 8px;
			align-items: center;
		}

		.km-view-title {
			min-width: 0;
			color: inherit;
		}

		.km-view-header .km-view-icon {
			width: 56px;
			height: 56px;
			padding: 2px;
			object-fit: contain;
			flex-shrink: 0;
			box-sizing: border-box;
			border: 0;
			border-radius: 14px;
			background: transparent;
			box-shadow: none;
		}

		.km-view-header .km-view-title-text {
			font-size: 22px;
			font-weight: 800;
			letter-spacing: 0;
			color: inherit;
		}

		.km-view-header .km-view-subtitle-text {
			margin-top: 2px;
			font-size: 11px;
			font-weight: 500;
			letter-spacing: 0;
			color: var(--km-view-muted);
		}

		.km-view-center .dx-buttongroup {
			padding: 4px;
			border: 1px solid var(--km-view-border);
			border-radius: 12px;
			background: var(--ianua-ui-bg);
			box-shadow: none;
		}

		.km-view-center .dx-buttongroup .dx-button,
		.km-view-right .dx-button {
			border-radius: 9px;
		}

		.km-view-center .dx-buttongroup .dx-state-selected {
			border-color: var(--km-view-skin) !important;
			background: var(--km-view-skin) !important;
			color: var(--km-view-contrast) !important;
			box-shadow: none !important;
		}

		.km-view-center .dx-buttongroup .dx-state-selected .dx-icon {
			color: var(--km-view-contrast) !important;
		}

		.km-view-body {
			flex: 1;
			min-height: 0;
			overflow: hidden;
			display: flex; /* 🔥 clave */
			flex-direction: column; /* 🔥 clave */
		}

	/* ===========================
   KUMEN - GRID PRINCIPAL (SUAVE)
=========================== */

	.km-grid-root {
		border-radius: 12px 12px 0 0;
		overflow: hidden;
	}

	.km-grid-root .dx-datagrid-headers {
		background-color: var(--ianua-ui-bg);
	}

	.km-grid-root .dx-header-row > td {
		background-color: transparent;
		font-weight: 600;
	}

	/* ===========================
   KUMEN - SUBGRILLAS (MUY SUAVE)
=========================== */

	.km-grid-sub .dx-datagrid-headers {
		background-color: var(--ianua-ui-bg);
	}

	.km-grid-sub .dx-header-row > td {
		background-color: transparent;
		color: var(--ianua-ui-muted);
		font-weight: 500;
	}

	.km-vista-root {
		height: 100%;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	/* “card/surface” para el contenido */
	.page-surface {
		background: #fff;
		border: 1px solid var(--ianua-ui-border);
		border-radius: var(--ianua-ui-radius);
		box-shadow: var(--ianua-ui-shadow);
		padding: 16px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

		.page-surface > * {
			flex: 1;
			min-height: 0;
		}


/* Controles de las vistas genericas, compartidos por ambas entradas. */

	#DivGrillaGenerica {
		flex: 1;
		min-height: 0;
		display: flex;

		flex-direction: column;
		outline: none;
	}
	.km-filtros-container {
		flex: 0 0 auto; /* 🔥 clave */
	}
	.kumen-vista-container {
		--km-view-skin: var(--ianua-primary);
		--km-view-contrast: var(--ianua-primary-contrast);
		--km-view-soft: var(--ianua-primary-soft);
		--km-view-soft-strong: var(--ianua-ui-teal-soft);
		--km-view-border: var(--ianua-ui-border);
		--km-view-muted: var(--ianua-ui-muted);
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
		min-height: 0;
	}

	.kumen-vista-main {
		display: flex;
		flex-direction: row;
		flex: 1;
		min-height: 0;
	}

	.kumen-vista-body {
		flex: 1;
		overflow: hidden;
		min-width: 0;
		min-height: 0;
		order: 1;
	}

		/* ==========================================
	   OPTIONS DOCK
	========================================== */

		.kumen-options-dock {
			position: relative;
			width: var(--km-dock-width, 360px);
			min-width: 0;
			margin: 0 10px 10px;
			box-sizing: border-box;
			background: var(--ianua-ui-surface);
			border: 1px solid var(--km-view-border);
			border-radius: var(--ianua-ui-radius);
			box-shadow: var(--ianua-ui-shadow);
			overflow: hidden;
			transition: width .2s ease, box-shadow .2s ease;
			order: 0;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
		}

			.kumen-options-dock.km-collapsed {
				width: 0;
				margin: 0;
				border: 0;
				box-shadow: none;
			}

	.km-dock-profiles {
		display: none;
	}

	.km-dock-topbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 56px;
		border-bottom: 0;
		padding: 7px 9px 7px 10px;
		border-radius: 15px 15px 0 0;
		background: var(--km-view-soft);
	}

	.km-dock-tabs-host {
		flex: 1;
		min-width: 0;
		min-height: 42px;
	}
		.km-dock-tabs-host .dx-tabs {
			height: 42px;
			width: 100%;
			padding: 3px;
			border: 1px solid var(--km-view-border);
			border-radius: 12px;
			background: var(--ianua-ui-bg);
			overflow: hidden;
		}

		.km-dock-tabs-host .dx-tab {
			margin: 0 2px;
			border-radius: 9px;
			font-weight: 600;
			letter-spacing: 0;
		}

		.km-dock-tabs-host .dx-tab-content {
			padding: 0 10px;
		}

		.km-dock-tabs-host .dx-tab-selected {
			background: var(--km-view-skin) !important;
			color: var(--km-view-contrast) !important;
			box-shadow: none !important;
		}

		.km-dock-tabs-host .dx-tab-selected .dx-tab-text {
			color: var(--km-view-contrast) !important;
			font-weight: 700;
		}

		.km-dock-tabs-host .dx-tabs-indicator,
		.km-dock-tabs-host .dx-tab::before,
		.km-dock-tabs-host .dx-tab::after,
		.km-dock-tabs-host .dx-tab .dx-item-content::before,
		.km-dock-tabs-host .dx-tab .dx-item-content::after {
			display: none !important;
			content: none !important;
			width: 0 !important;
			height: 0 !important;
			border: 0 !important;
			box-shadow: none !important;
		}

	.km-dock-pin {
		flex: 0 0 auto;
		margin-left: 8px;
	}

	.km-dock-content {
		flex: 1;
		overflow: auto;
		padding: 18px;
	}

	.km-dock-pin .dx-button {
		opacity: .7;
	}

		.km-dock-pin .dx-button.dx-state-hover {
			opacity: 1;
		}

		.km-dock-pin .dx-button.dx-button-default {
			background: var(--km-view-soft);
			color: var(--km-view-skin);
		}

	.km-dock-filters .dx-form-group-caption {
		padding: 2px 2px 11px;
		border-bottom: 1px solid var(--km-view-border);
		font-size: 15px;
		font-weight: 800;
		color: inherit;
	}

	.km-dock-filters .dx-form-group-content {
		padding: 16px;
		border: 1px solid var(--km-view-border);
		border-radius: 14px;
		background: var(--ianua-ui-surface);
		box-shadow: none;
	}

	.km-dock-filters .dx-field-item-label-text {
		font-size: 11px;
		font-weight: 600;
		color: var(--km-view-muted);
	}

	.km-dock-filters .dx-texteditor {
		border-radius: 10px;
	}

	.km-dock-filters .dx-field-item {
		padding-bottom: 5px;
	}

	.km-dock-filters .dx-radiobutton {
		margin-right: 12px;
	}
	/* ==========================================
	   OPTIONS FORM
	========================================== */
	.km-options-popup {
		padding: 12px;
	}

		.km-option-hidden {
			visibility: hidden;
		}

		.km-root-options {
			margin-bottom: 10px;
		}

		/* ==========================================
	   COMBO SELECTOR
	========================================== */

		.km-combo-selector {
			display: flex;
			width: 100%;
			flex-direction: column;
			gap: 6px;
		}

		.km-combo-search {
			padding-bottom: 6px;
			border-bottom: 1px solid #eee;
		}

		.km-combo-body {
			max-height: 320px;
			overflow: auto;
		}

		/* ==========================================
	   OPTIONS RESIZE HANDLE
	========================================== */

		.km-options-resize {
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			width: 8px;
			cursor: col-resize;
			z-index: 5;
		}

			.km-options-resize:hover {
				background: color-mix(in srgb, var(--km-view-skin) 18%, transparent);
			}

		.km-no-select {
			user-select: none;
			-webkit-user-select: none;
			-moz-user-select: none;
		}

		/* ==========================================
	   KUMEN MASTER DETAIL AUTO WIDTH
	========================================== */

		.km-detail-wrapper {
			width: 100%;
			padding: 12px 0;
		}

			.km-detail-wrapper.km-detail-narrow {
				width: 50%;
				min-width: 400px;
				margin-left: 16px;
			}

		/* ==========================================
	   DETAIL ANIMATION
	========================================== */

		.km-detail-animate {
			opacity: 0;
			transform: translateY(-6px);
			transition: opacity 500ms ease, transform 500ms ease;
		}

			.km-detail-animate.km-detail-visible {
				opacity: 1;
				transform: translateY(-8px);
			}

		/* ==========================================
	   GRID EXPANDED STYLE
	========================================== */

		body:has(.kumen-vista-container) .dx-datagrid-rowsview .dx-row.km-row-expanded {
			background-color: var(--ianua-primary-soft);
		}

		body:has(.kumen-vista-container) .dx-datagrid-expand {
			transition: transform 300ms ease;
		}

		body:has(.kumen-vista-container) .dx-datagrid-row-expanded .dx-datagrid-expand {
			transform: rotate(90deg);
		}

	.km-profiles-title {
		font-weight: 700;
		margin-bottom: 10px;
	}

	.km-profiles-toolbar {
		display: flex;
		gap: 8px;
		margin-bottom: 12px;
		flex-wrap: wrap;
	}

	.km-profiles-section {
		margin-top: 12px;
	}

	.km-profiles-section-title {
		font-size: 12px;
		font-weight: 700;
		color: #777;
		margin-bottom: 6px;
		text-transform: uppercase;
	}

	.km-dock-columns {
		display: none;
	}

		.km-dock-columns .dx-button {
			margin-bottom: 10px;
		}

	body:has(.kumen-vista-container) .dx-overlay-wrapper {
		position: absolute !important;
	}

	.km-action-btn {
		opacity: 0.7;
		transition: all 0.2s;
	}

		.km-action-btn:hover {
			opacity: 1;
			transform: scale(1.1);
		}
	.km-action-menu {
		border-radius: 8px !important;
		box-shadow: 0 4px 20px rgba(0,0,0,0.15);
		padding: 4px;
	}

	.km-actions-dropdown .dx-button {
		height: 34px;
	}
	body:has(.kumen-vista-container) .dx-popup-title {
		white-space: normal !important;
		line-height: 1.2;
	}
	body:has(.kumen-vista-container) .dx-popup-title-container {
		width: 100% !important;
	}
	body:has(.kumen-vista-container) .dx-popup-title .dx-toolbar {
		display: flex;
	}

	body:has(.kumen-vista-container) .dx-popup-title .dx-toolbar-before {
		flex: 1;
	}

	body:has(.kumen-vista-container) .dx-popup-title .dx-toolbar-after {
		flex-shrink: 0;
	}

/* Mismo lenguaje visual que los tableros: superficies claras y acentos semanticos. */
.km-view-root, .kumen-vista-container {
    color: var(--ianua-ui-ink);
    font-family: "Segoe UI", Arial, sans-serif;
}
body:has(.kumen-vista-container) :is(.divTipoVistaVisible, .km-desktop-content) {
    background: var(--ianua-ui-bg);
}
.km-view-header .km-view-title-text { font-weight: 700; }
.km-view-header .km-view-icon { box-shadow: none; }
.km-dock-topbar { background: var(--ianua-ui-bg); }
.km-dock-filters .dx-form-group-caption { font-weight: 700; }
.km-dock-filters .dx-form-group-content { border: 0; padding: 12px 0; box-shadow: none; }
.km-view-root :is(.km-grid-root, .km-grid-sub) .dx-datagrid {
    color: var(--ianua-ui-ink);
    background: var(--ianua-ui-surface);
    border-color: var(--ianua-ui-border);
}
.km-view-root .dx-datagrid-headers { color: var(--ianua-ui-muted); border-color: var(--ianua-ui-border); }
.km-view-root .dx-datagrid-rowsview .dx-row-lines > td { border-color: var(--ianua-ui-border); }
.km-view-root .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td {
    background: var(--ianua-primary-soft);
    color: var(--ianua-ui-ink);
}
.km-view-root .dx-datagrid .dx-row-alt:not(.dx-selection):not(.dx-row-focused) > td {
    background-color: var(--ianua-ui-bg);
}
.km-view-root .dx-button-mode-contained.dx-button-normal {
    background: var(--ianua-ui-surface);
    border-color: var(--ianua-ui-border);
    color: var(--ianua-ui-ink);
    border-radius: var(--ianua-control-radius);
}
.km-view-root .dx-button-mode-contained.dx-button-normal.dx-state-hover {
    background: var(--ianua-primary-soft);
}

.km-view-panel-button { flex-shrink: 0; margin-right: 16px; }

.kumen-options-dock.km-resizing { transition: none; }
.km-dock-tab {
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--km-view-border);
    border-left: 3px solid #31966b;
    border-radius: 0 10px 10px 0;
    background: var(--ianua-ui-surface);
    color: var(--ianua-ui-ink);
    cursor: pointer;
}
.km-view-root:has(.kumen-options-dock:not(.km-collapsed)) .km-dock-tab { display: none; }
.km-dock-tab .dx-icon { font-size: 20px; }
.km-dock-close {
    flex: 0 0 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.km-dock-tab:hover, .km-dock-close:hover { background: var(--km-view-soft); }
.km-dock-tab:focus-visible, .km-dock-close:focus-visible { outline: 2px solid #31966b; outline-offset: 2px; }

/* Los controles del encabezado quedan fuera del area de arrastre. */
.km-options-resize { top: 56px; }
/* Alineada con el titulo y pegada al borde interior de la tarjeta. */
.page-surface .km-view-header .km-dock-tab { left: -26px; }
/* Un poco mas de contraste en los encabezados del panel y las grillas. */
.km-dock-topbar,
.km-dock-tabs-host .dx-tabs,
.km-view-root .dx-datagrid-headers,
.km-view-root .dx-datagrid-headers .dx-header-row > td {
    background-color: var(--ianua-primary);
    color: #fff;
}

/* Encabezados con el mismo verde pleno que la pagina seleccionada. */
body:is(.ianua-theme, :has(.kumen-vista-container)) .km-dock-topbar .dx-tabs .dx-tab {
    background: transparent !important;
    color: #fff !important;
}
body:is(.ianua-theme, :has(.kumen-vista-container)) .km-dock-topbar .dx-tabs .dx-tab:is(.dx-tab-selected,.dx-state-hover,.dx-state-active,.dx-state-focused) {
    background: rgba(255,255,255,.16) !important;
}
body:is(.ianua-theme, :has(.kumen-vista-container)) .km-dock-topbar .dx-tabs .dx-tab :is(.dx-tab-text,.dx-icon),
.km-dock-topbar :is(.dx-button,.dx-button .dx-icon,.km-dock-close),
.km-view-root .dx-datagrid-headers :is(.dx-header-row > td,.dx-sort,.dx-header-filter,.dx-icon) {
    color: #fff !important;
}
.km-dock-topbar .km-dock-close:hover,
.km-dock-topbar .dx-button.dx-state-hover {
    background: rgba(255,255,255,.16);
}
/* Botonera compacta y menu de acciones. */
.km-view-header .dx-buttongroup { padding: 3px; border-radius: 10px; }
.km-view-header .dx-button { min-height: 32px; border-radius: 8px; font-weight: 600; }
.km-view-header .dx-button .dx-button-content { padding: 6px 12px; }
.km-view-header .dx-buttongroup .dx-button:not(.dx-state-selected) {
    background: transparent; border-color: transparent; color: var(--ianua-ui-muted);
}
.km-view-header .km-actions-dropdown .dx-button {
    background: var(--ianua-primary-soft); border: 1px solid var(--km-view-border); color: var(--ianua-primary);
}
.km-view-header .dx-button.dx-state-hover { background: var(--ianua-primary-soft); }
.km-view-header .dx-button.dx-state-focused { outline: 2px solid var(--ianua-primary); outline-offset: 2px; }
.km-view-actions-menu .dx-overlay-content {
    border: 1px solid var(--ianua-ui-border); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(25,52,65,.14); overflow: hidden;
}
.km-view-actions-menu .dx-list { padding: 6px; }
.km-view-actions-menu .dx-list-item { border-radius: 7px; border-top: 0; margin: 2px 0; }
.km-view-actions-menu .dx-list-item-content { padding: 10px 12px; }
.km-view-actions-menu .dx-list-item.dx-state-hover { background: var(--ianua-primary-soft); color: var(--ianua-primary); }
.km-view-root .dx-datagrid-headers { border-radius: 10px 10px 0 0; overflow: hidden; }

/* Mantener contraste en todas las etiquetas Fluent, seleccionadas o no. */
body:is(.ianua-theme, :has(.kumen-vista-container)) .km-dock-topbar .dx-tabs .dx-tab :is(.dx-tab-content, .dx-tab-text, .dx-tab-text-span, .dx-tab-text-span-pseudo, .dx-icon),
body:is(.ianua-theme, :has(.kumen-vista-container)) .km-dock-topbar .dx-tabs .dx-tab :is(.dx-tab-text, .dx-tab-text-span)::before,
body:is(.ianua-theme, :has(.kumen-vista-container)) .km-dock-topbar .dx-tabs .dx-tab :is(.dx-tab-text, .dx-tab-text-span)::after {
    color: #fff !important;
}