/* ============================================================================
   DOCUMENTO FORMA2 - SISTEMA DE ESTILOS SCOPED
   Todos los estilos están contenidos dentro de .documento-forma2
   Variables CSS con prefijo --df2- para evitar conflictos
   ============================================================================ */

.documento-forma2 {
	/* ========================================================================
	   VARIABLES CSS - WINDOWS 11 FLUENT DESIGN
	   ======================================================================== */
	/* Colores Base - Neutrals */
	--df2-color-bg-base: #f3f3f3;
	--df2-color-bg-layer: #ffffff;
	--df2-color-bg-elevated: #fafafa;
	--df2-color-border-default: #e5e5e5;
	--df2-color-border-strong: #c0c0c0;
	--df2-color-border-subtle: #f0f0f0;
	/* Colores de Texto */
	--df2-color-text-primary: #323130;
	--df2-color-text-secondary: #605e5c;
	--df2-color-text-disabled: #a19f9d;
	--df2-color-text-inverse: #ffffff;
	/* Colores de Acento - Windows Blue */
	--df2-color-accent-default: #0078d4;
	--df2-color-accent-hover: #106ebe;
	--df2-color-accent-active: #005a9e;
	--df2-color-accent-disabled: #c7e0f4;
	/* Colores Semánticos */
	--df2-color-success: #107c10;
	--df2-color-success-bg: #dff6dd;
	--df2-color-warning: #f7630c;
	--df2-color-warning-bg: #fff4ce;
	--df2-color-error: #d13438;
	--df2-color-error-bg: #fde7e9;
	--df2-color-info: #0078d4;
	--df2-color-info-bg: #e6f2fa;
	/* Colores Especiales - Headers Negros */
	--df2-color-header-bg: #000000;
	--df2-color-header-text: #ffffff;
	/* Tipografía */
	--df2-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--df2-font-size-xs: 10px;
	--df2-font-size-sm: 11px;
	--df2-font-size-base: 12px;
	--df2-font-size-md: 14px;
	--df2-font-size-lg: 16px;
	--df2-font-weight-normal: 400;
	--df2-font-weight-medium: 500;
	--df2-font-weight-semibold: 600;
	--df2-font-weight-bold: 700;
	--df2-line-height-compact: 1.3;
	--df2-line-height-base: 1.4;
	/* Espaciado */
	--df2-space-0: 0;
	--df2-space-1: 2px;
	--df2-space-2: 4px;
	--df2-space-3: 8px;
	--df2-space-4: 12px;
	--df2-space-5: 16px;
	--df2-space-6: 20px;
	--df2-space-7: 24px;
	--df2-space-8: 32px;
	/* Dimensiones de Componentes - Mobile (Base) */
	--df2-input-height-mobile: 40px;
	--df2-input-height-tablet: 32px;
	--df2-input-height-desktop: 28px;
	--df2-input-padding-mobile: 8px 12px;
	--df2-input-padding-tablet: 6px 10px;
	--df2-input-padding-desktop: 4px 8px;
	--df2-button-height-mobile: 40px;
	--df2-button-height-tablet: 32px;
	--df2-button-height-desktop: 28px;
	--df2-button-padding-mobile: 8px 16px;
	--df2-button-padding-tablet: 6px 12px;
	--df2-button-padding-desktop: 4px 10px;
	--df2-toolbar-height-mobile: 48px;
	--df2-toolbar-height-tablet: 40px;
	--df2-toolbar-height-desktop: 32px;
	--df2-tab-header-height-mobile: 48px;
	--df2-tab-header-height-tablet: 42px;
	--df2-tab-header-height-desktop: 36px;
	--df2-grid-row-height-mobile: 40px;
	--df2-grid-row-height-tablet: 32px;
	--df2-grid-row-height-desktop: 28px;
	/* Border Radius */
	--df2-radius-sm: 2px;
	--df2-radius-md: 5px;
	--df2-radius-lg: 8px;
	--df2-radius-round: 50%;
	/* Colores de Legend/Header de sección */
	--df2-color-legend-bg: #e0e0e0;
	--df2-color-legend-text: var(--df2-color-text-primary);
	/* Sombras */
	--df2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--df2-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
	--df2-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
	--df2-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
	/* Transiciones */
	--df2-transition-fast: 0.1s ease;
	--df2-transition-base: 0.2s ease;
	--df2-transition-slow: 0.3s ease;
	/* ========================================================================
	   ESTILOS BASE
	   ======================================================================== */

	font-family: var(--df2-font-family);
	font-size: var(--df2-font-size-md);
	color: var(--df2-color-text-primary);
	line-height: var(--df2-line-height-base);
	background-color: var(--df2-color-bg-base);
	/* ========================================================================
	   FIELDSET - ESTILO WINDOWS
	   ======================================================================== */

	.fieldset-windows-compact {
		border: 1px solid var(--df2-color-border-default);
		border-radius: var(--df2-radius-md);
		padding: 0;
		margin: var(--df2-space-2) 0;
		background: var(--df2-color-bg-layer);
		overflow: hidden;
	}

		.fieldset-windows-compact legend {
			float: left;
			width: 100%;
			margin: 0;
			padding: var(--df2-space-2) var(--df2-space-3);
			font-size: var(--df2-font-size-base);
			font-weight: var(--df2-font-weight-semibold);
			color: var(--df2-color-legend-text);
			background: var(--df2-color-legend-bg);
			border-radius: var(--df2-radius-md) var(--df2-radius-md) 0 0;
		}

			.fieldset-windows-compact legend + * {
				clear: both;
			}
		/* Legend expandible */
		.fieldset-windows-compact legend {
			cursor: pointer;
			user-select: none;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--df2-space-2);
		}

			.fieldset-windows-compact legend:hover {
				background: var(--df2-color-border-strong);
			}

	.legend-icon-circle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: 18px;
		border-radius: var(--df2-radius-round);
		background: var(--df2-color-bg-layer);
		border: 1px solid var(--df2-color-border-strong);
		font-size: var(--df2-font-size-md);
		font-weight: var(--df2-font-weight-bold);
		line-height: 1;
		color: var(--df2-color-text-primary);
		transition: all var(--df2-transition-fast);
	}

		.legend-icon-circle:hover {
			background: var(--df2-color-accent-default);
			color: var(--df2-color-text-inverse);
			border-color: var(--df2-color-accent-default);
		}
	/* Estado colapsado */
	.fieldset-colapsado .fieldset-content {
		padding: var(--df2-space-2) var(--df2-space-3);
	}

	.fieldset-content {
		padding: var(--df2-space-3);
	}
	/* ========================================================================
	   INPUTS - ESTILO WINDOWS COMPACT
	   ======================================================================== */

	.input-windows-compact {
		height: var(--df2-input-height-mobile);
		padding: var(--df2-input-padding-mobile);
		font-size: var(--df2-font-size-md);
		border: 1px solid var(--df2-color-border-default);
		border-radius: var(--df2-radius-sm);
		background: var(--df2-color-bg-layer);
		color: var(--df2-color-text-primary);
		transition: border-color var(--df2-transition-fast);
	}

		.input-windows-compact:focus {
			border-color: var(--df2-color-accent-default);
			outline: none;
			box-shadow: 0 0 0 1px var(--df2-color-accent-default);
		}

		.input-windows-compact:disabled {
			background: var(--df2-color-bg-elevated);
			color: var(--df2-color-text-disabled);
			cursor: not-allowed;
		}
	/* Syncfusion NumericTextBox */
	.e-numeric input.e-input,
	.e-input-group.e-control-wrapper input.e-input,
	.e-float-input input,
	input.e-numerictextbox {
		padding-right: 5px !important;
	}
	/* ========================================================================
	   BUTTONS - ESTILO WINDOWS
	   ======================================================================== */

	.button-windows {
		height: var(--df2-button-height-mobile);
		padding: var(--df2-button-padding-mobile);
		font-size: var(--df2-font-size-base);
		font-weight: var(--df2-font-weight-medium);
		border: 1px solid var(--df2-color-border-strong);
		border-radius: var(--df2-radius-sm);
		background: linear-gradient(to bottom, #fefefe 0%, #e8e8e8 100%);
		color: var(--df2-color-text-primary);
		cursor: pointer;
		transition: all var(--df2-transition-fast);
		box-shadow: var(--df2-shadow-inset);
	}

		.button-windows:hover {
			background: linear-gradient(to bottom, #ffffff 0%, #d0d0d0 100%);
			border-color: var(--df2-color-accent-default);
		}

		.button-windows:active {
			background: linear-gradient(to bottom, #e0e0e0 0%, #f0f0f0 100%);
			box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
		}

		.button-windows:disabled {
			background: #f5f5f5;
			color: var(--df2-color-text-disabled);
			border-color: var(--df2-color-border-subtle);
			cursor: not-allowed;
			opacity: 0.6;
		}

	.button-windows-accent {
		background: var(--df2-color-accent-default);
		border-color: var(--df2-color-accent-default);
		color: var(--df2-color-text-inverse);
	}

		.button-windows-accent:hover {
			background: var(--df2-color-accent-hover);
			border-color: var(--df2-color-accent-hover);
		}

		.button-windows-accent:active {
			background: var(--df2-color-accent-active);
			border-color: var(--df2-color-accent-active);
		}
	/* ========================================================================
	   TOOLBAR - ESTILO WINDOWS
	   ======================================================================== */

	.toolbar-windows-compact {
		border: 1px solid var(--df2-color-border-default);
		border-radius: var(--df2-radius-md);
		background: #f0f0f0;
		padding: var(--df2-space-1);
		margin: var(--df2-space-2) 0;
		min-height: var(--df2-toolbar-height-mobile);
		box-shadow: var(--df2-shadow-inset);
	}

		.toolbar-windows-compact .e-toolbar-items {
			background: transparent;
		}

		.toolbar-windows-compact .e-toolbar-item {
			padding: 0 var(--df2-space-1);
		}

		.toolbar-windows-compact .e-tbar-btn {
			border: 1px solid #adadad;
			border-radius: var(--df2-radius-sm);
			background: linear-gradient(to bottom, #fefefe 0%, #e8e8e8 100%);
			padding: var(--df2-space-2) var(--df2-space-3);
			font-size: var(--df2-font-size-base);
			height: var(--df2-button-height-mobile);
			min-height: var(--df2-button-height-mobile);
			transition: all var(--df2-transition-fast);
		}

			.toolbar-windows-compact .e-tbar-btn:hover {
				background: linear-gradient(to bottom, #ffffff 0%, #d0d0d0 100%);
				border-color: var(--df2-color-accent-default);
			}

			.toolbar-windows-compact .e-tbar-btn:active {
				background: linear-gradient(to bottom, #e0e0e0 0%, #f0f0f0 100%);
				box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
			}

			.toolbar-windows-compact .e-tbar-btn.e-btn[disabled] {
				background: #f5f5f5;
				color: var(--df2-color-text-disabled);
				border-color: var(--df2-color-border-subtle);
			}

		.toolbar-windows-compact .e-separator {
			background: #999;
			width: 1px;
			height: 20px;
			margin: var(--df2-space-1) var(--df2-space-2);
		}
	/* Opciones toolbar row */
	.opciones-toolbar-row {
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
	}

		.opciones-toolbar-row .e-toolbar {
			flex: 1;
		}

	@media (max-width: 575.98px) {
		.opciones-toolbar-row {
			flex-wrap: wrap;
		}
	}
	/* ========================================================================
	   TABS - ESTILO WINDOWS
	   ======================================================================== */

	.tab-windows-compact .e-tab-header {
		background: var(--df2-color-bg-elevated);
		border-bottom: 1px solid var(--df2-color-border-default);
		min-height: var(--df2-tab-header-height-mobile);
	}

		.tab-windows-compact .e-tab-header .e-toolbar-item {
			padding: 0 var(--df2-space-1);
		}

		.tab-windows-compact .e-tab-header .e-tab-wrap {
			font-size: var(--df2-font-size-base);
			padding: var(--df2-space-3) var(--df2-space-4);
			color: var(--df2-color-text-secondary);
			transition: all var(--df2-transition-base);
		}

			.tab-windows-compact .e-tab-header .e-tab-wrap:hover {
				background: var(--df2-color-bg-layer);
				color: var(--df2-color-text-primary);
			}

		.tab-windows-compact .e-tab-header .e-item.e-active .e-tab-wrap {
			background: var(--df2-color-header-bg);
			color: var(--df2-color-header-text);
			font-weight: var(--df2-font-weight-semibold);
		}

	.tab-windows-compact .e-content {
		padding: var(--df2-space-3);
		background: var(--df2-color-bg-layer);
	}
	/* ========================================================================
	   GRID - ESTILO WINDOWS COMPACT
	   ======================================================================== */

	.grid-windows-compact .e-grid .e-gridheader {
		background: var(--df2-color-header-bg);
		color: var(--df2-color-header-text);
		font-weight: var(--df2-font-weight-semibold);
		font-size: var(--df2-font-size-base);
	}

	.grid-windows-compact .e-grid .e-headercell {
		border-color: var(--df2-color-border-default);
		padding: var(--df2-space-2);
	}

	.grid-windows-compact .e-grid .e-row {
		min-height: var(--df2-grid-row-height-mobile);
		font-size: var(--df2-font-size-base);
	}

	.grid-windows-compact .e-grid .e-rowcell {
		border-color: var(--df2-color-border-default);
		padding: var(--df2-space-2);
	}

	.grid-windows-compact .e-grid .e-altrow {
		background: var(--df2-color-bg-elevated);
	}

	.grid-windows-compact .e-grid .e-row:hover {
		background: var(--df2-color-info-bg);
	}

	.grid-windows-compact .e-grid .e-selectionbackground {
		background: var(--df2-color-accent-default);
		color: var(--df2-color-text-inverse);
	}
	/* ========================================================================
	   SCROLLBAR CUSTOM - ESTILO WINDOWS
	   ======================================================================== */

	.scrollbar-windows::-webkit-scrollbar {
		width: 12px;
		height: 12px;
	}

	.scrollbar-windows::-webkit-scrollbar-track {
		background: var(--df2-color-bg-elevated);
		border: 1px solid var(--df2-color-border-subtle);
	}

	.scrollbar-windows::-webkit-scrollbar-thumb {
		background: var(--df2-color-border-strong);
		border-radius: var(--df2-radius-sm);
		border: 2px solid var(--df2-color-bg-elevated);
	}

		.scrollbar-windows::-webkit-scrollbar-thumb:hover {
			background: #999;
		}

		.scrollbar-windows::-webkit-scrollbar-thumb:active {
			background: #666;
		}

	.scrollbar-windows::-webkit-scrollbar-corner {
		background: var(--df2-color-bg-elevated);
	}
	/* ========================================================================
	   COMPONENTES ESPECÍFICOS - ENCABEZADO
	   ======================================================================== */

	.encabezado-row-header {
		margin: 0 0 var(--df2-space-1) 0;
		padding: var(--df2-space-1) 0;
		row-gap: 0;
		background: var(--df2-color-header-bg);
	}

	.encabezado-row-content {
		margin: 0;
		padding: 0;
	}

	.encabezado-col {
		padding: 0 var(--df2-space-1);
	}

	.encabezado-label {
		display: block;
		font-size: var(--df2-font-size-md);
		font-weight: var(--df2-font-weight-normal);
		margin: 0;
		color: var(--df2-color-header-text);
		text-align: center;
	}

	.encabezado-numero-container {
		display: flex;
		align-items: center;
		gap: 1px;
	}

	.encabezado-numero-pre {
		min-width: 3ch;
		flex: 1;
	}

	.encabezado-numero-main {
		min-width: 10ch;
		flex: 3;
	}

	.encabezado-numero-pos {
		min-width: 3ch;
		flex: 1;
	}

	.encabezado-tabla {
		display: flex;
		flex-direction: column;
		width: 100%;
		overflow-x: auto;
		margin: calc(-1 * var(--df2-space-3));
		margin-bottom: 0;
		width: calc(100% + 2 * var(--df2-space-3));
	}

	.encabezado-header,
	.encabezado-body {
		display: flex;
		flex-wrap: nowrap;
		min-width: fit-content;
	}

	.encabezado-header {
		background: #c0c0c0;
		border-bottom: 1px solid var(--df2-color-border-default);
	}

		.encabezado-header .encabezado-celda {
			font-weight: var(--df2-font-weight-semibold);
			font-size: var(--df2-font-size-sm);
			color: #000000;
			text-align: center;
			padding: var(--df2-space-1) var(--df2-space-2);
		}

	.encabezado-body .encabezado-celda {
		padding: var(--df2-space-1) var(--df2-space-2);
	}

	.encabezado-celda {
		flex: 1 1 0;
		min-width: 80px;
	}

	.encabezado-button {
		padding: 0 var(--df2-space-1) !important;
		min-width: 24px !important;
		height: 24px !important;
	}

	@media (max-width: 767.98px) {
		.encabezado-tabla {
			margin: 0;
			width: 100%;
		}

		.encabezado-header {
			display: none;
		}

		.encabezado-body {
			flex-direction: column;
			gap: var(--df2-space-2);
		}

		.encabezado-celda {
			display: flex;
			align-items: center;
			gap: var(--df2-space-1);
			min-width: 100%;
		}

			.encabezado-celda::before {
				content: attr(data-label);
				min-width: 80px;
				flex: 0 0 80px;
				font-weight: var(--df2-font-weight-semibold);
				font-size: var(--df2-font-size-sm);
			}

		.encabezado-numero-container {
			flex-wrap: wrap;
		}
	}
	/* ========================================================================
	   COMPONENTES ESPECÍFICOS - DETALLE/GRILLA
	   ======================================================================== */

	.barra-template {
		border: 1px solid var(--df2-color-border-default);
		border-radius: var(--df2-radius-md);
		background: #f0f0f0;
		padding: var(--df2-space-1);
		margin: var(--df2-space-2) 0;
		box-shadow: var(--df2-shadow-inset);
	}
	/* ========================================================================
	   COMPONENTES ESPECÍFICOS - CONTENEDOR GENERAL
	   ======================================================================== */

	.contenedor {
		margin: 0;
		padding: var(--df2-space-2);
	}

	.contenedor-label {
		display: block;
		font-size: var(--df2-font-size-base);
		font-weight: var(--df2-font-weight-medium);
		margin-bottom: var(--df2-space-1);
		color: var(--df2-color-text-primary);
	}
	/* ========================================================================
	   COMPONENTES ESPECÍFICOS - ENTIDAD
	   ======================================================================== */

	.entidad-grid {
		display: flex;
		flex-direction: column;
		gap: var(--df2-space-1);
	}

	.entidad-campo {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.entidad-label {
		font-size: var(--df2-font-size-base);
		font-weight: var(--df2-font-weight-medium);
		color: var(--df2-color-text-primary);
		min-width: 80px;
		white-space: nowrap;
	}

	.entidad-label-center {
		font-size: var(--df2-font-size-base);
		font-weight: var(--df2-font-weight-medium);
		color: var(--df2-color-text-primary);
		text-align:center;
		min-width: 80px;
		white-space: nowrap;
	}

	.entidad-input-group {
		display: flex;
		gap: var(--df2-space-1);
		flex-wrap: wrap;
	}

		.entidad-input-group > *:first-child {
			flex: 0 0 120px;
			max-width: 150px;
		}

		.entidad-input-group > *:last-child {
			flex: 1 1 auto;
			min-width: 150px;
		}

	.entidad-campo-doble {
		display: flex;
		flex-wrap: wrap;
		gap: var(--df2-space-2);
	}

	.entidad-campo-inline {
		display: flex;
		align-items: center;
		gap: var(--df2-space-1);
		flex: 1 1 auto;
		min-width: 150px;
	}

		.entidad-campo-inline .entidad-label {
			flex: 0 0 auto;
		}

		.entidad-campo-inline > *:not(.entidad-label) {
			flex: 1 1 auto;
			min-width: 80px;
		}

	.entidad-campo-mitad {
		display: flex;
		flex-direction: column;
		gap: 0;
		flex: 1 1 calc(50% - var(--df2-space-2));
		min-width: 200px;
	}
	/* Responsive para entidad - Mobile */
	@media (max-width: 767.98px) {
		.entidad-grid {
			gap: var(--df2-space-2);
		}

		.entidad-input-group {
			flex-direction: row;
			gap: var(--df2-space-1);
		}

			.entidad-input-group > *:first-child {
				flex: 0 0 100px;
				min-width: 100px;
				max-width: 100px;
			}

			.entidad-input-group > *:last-child {
				flex: 1 1 auto;
				min-width: 0;
			}

		.entidad-campo-doble {
			flex-direction: column;
			gap: var(--df2-space-2);
		}

		.entidad-campo-inline {
			flex-direction: row;
			align-items: center;
			width: 100%;
		}

			.entidad-campo-inline .entidad-label {
				min-width: 70px;
				flex: 0 0 70px;
			}

			.entidad-campo-inline > *:not(.entidad-label) {
				flex: 1 1 auto;
			}

		.entidad-campo-mitad {
			flex: 1 1 100%;
		}
	}
	/* Responsive para entidad - Desktop grande */
	@media (min-width: 992px) {
		.entidad-campo {
			flex-direction: row;
			align-items: center;
		}

		.entidad-label {
			min-width: 100px;
		}

		.entidad-input-group {
			flex: 1;
			flex-wrap: nowrap;
		}
	}
	/* ========================================================================
	   ESTADOS Y UTILIDADES
	   ======================================================================== */

	.disable {
		opacity: 0.5;
		pointer-events: none;
	}

	.campo-requerido {
		border-color: var(--df2-color-error);
		background-color: var(--df2-color-error-bg);
	}

	.campo-valido {
		border-color: var(--df2-color-success);
		background-color: var(--df2-color-success-bg);
	}

	.text-error {
		color: var(--df2-color-error);
	}

	.text-success {
		color: var(--df2-color-success);
	}

	.text-warning {
		color: var(--df2-color-warning);
	}

	.text-center {
		text-align: center;
	}

	.text-right {
		text-align: right;
	}

	.font-bold {
		font-weight: var(--df2-font-weight-bold);
	}

	.font-semibold {
		font-weight: var(--df2-font-weight-semibold);
	}
	/* ========================================================================
	   OVERRIDES SYNCFUSION - READONLY
	   ======================================================================== */

	.e-input-group.e-control-wrapper.e-ddl.e-lib.e-keyboard[readonly] .e-input,
	.e-input-group.e-control-wrapper.e-ddl.e-lib.e-keyboard[readonly] .e-input-group-icon {
		background-color: var(--df2-color-bg-elevated);
		color: var(--df2-color-text-disabled);
		cursor: not-allowed;
	}

	.e-input-group.e-control-wrapper.e-input-focus.e-ddl.e-lib.e-keyboard[readonly] {
		border-color: var(--df2-color-border-default);
	}

	.e-input-group.e-control-wrapper.e-numeric.e-lib.e-keyboard[readonly] .e-input,
	.e-input-group.e-control-wrapper.e-numeric.e-lib.e-keyboard[readonly] .e-input-group-icon {
		background-color: var(--df2-color-bg-elevated);
		color: var(--df2-color-text-disabled);
		cursor: not-allowed;
	}

	.e-input-group.e-control-wrapper[readonly] .e-input {
		background-color: var(--df2-color-bg-elevated);
		color: var(--df2-color-text-disabled);
		cursor: not-allowed;
	}
	/* ========================================================================
	   RESPONSIVE - TABLET (768px - 991px)
	   ======================================================================== */

	@media (min-width: 768px) and (max-width: 991.98px) {
		.input-windows-compact {
			height: var(--df2-input-height-tablet);
			padding: var(--df2-input-padding-tablet);
			font-size: var(--df2-font-size-base);
		}

		.button-windows {
			height: var(--df2-button-height-tablet);
			padding: var(--df2-button-padding-tablet);
		}

		.toolbar-windows-compact {
			min-height: var(--df2-toolbar-height-tablet);
		}

			.toolbar-windows-compact .e-tbar-btn {
				height: var(--df2-button-height-tablet);
				min-height: var(--df2-button-height-tablet);
			}

		.tab-windows-compact .e-tab-header {
			min-height: var(--df2-tab-header-height-tablet);
		}

		.grid-windows-compact .e-grid .e-row {
			min-height: var(--df2-grid-row-height-tablet);
		}
	}
	/* ========================================================================
	   RESPONSIVE - DESKTOP (992px+)
	   ======================================================================== */

	@media (min-width: 992px) {
		font-size: var(--df2-font-size-base);

		.input-windows-compact {
			height: var(--df2-input-height-desktop);
			padding: var(--df2-input-padding-desktop);
			font-size: var(--df2-font-size-base);
		}

		.button-windows {
			height: var(--df2-button-height-desktop);
			padding: var(--df2-button-padding-desktop);
			font-size: var(--df2-font-size-sm);
		}

		.toolbar-windows-compact {
			min-height: var(--df2-toolbar-height-desktop);
		}

			.toolbar-windows-compact .e-tbar-btn {
				height: var(--df2-button-height-desktop);
				min-height: var(--df2-button-height-desktop);
				font-size: var(--df2-font-size-sm);
			}

		.tab-windows-compact .e-tab-header {
			min-height: var(--df2-tab-header-height-desktop);
		}

			.tab-windows-compact .e-tab-header .e-tab-wrap {
				font-size: var(--df2-font-size-sm);
				padding: var(--df2-space-2) var(--df2-space-3);
			}

		.grid-windows-compact .e-grid .e-row {
			min-height: var(--df2-grid-row-height-desktop);
			font-size: var(--df2-font-size-sm);
		}

		.grid-windows-compact .e-grid .e-headercell,
		.grid-windows-compact .e-grid .e-rowcell {
			padding: var(--df2-space-1) var(--df2-space-2);
		}

		.encabezado-label {
			font-size: var(--df2-font-size-base);
		}

		.contenedor-label {
			font-size: var(--df2-font-size-sm);
		}
	}
	/* ========================================================================
	   MOBILE - AJUSTES ESPECÍFICOS (<768px)
	   ======================================================================== */

	@media (max-width: 767.98px) {
		/* Ocultar columnas opcionales en mobile */
		.e-hidden-mobile {
			display: none;
		}
		/* Toolbar apilado en mobile */
		.toolbar-windows-compact .e-toolbar-items {
			flex-wrap: wrap;
		}
		/* Pestañas scrollable en mobile */
		.tab-windows-compact .e-tab-header {
			overflow-x: auto;
		}
		/* Inputs de ancho completo en mobile */
		.fieldset-windows-compact .col-12 {
			padding-left: 0;
			padding-right: 0;
		}
	}
}