/* Minification failed. Returning unminified contents.
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(47,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(51,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(52,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(53,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(58,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(59,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(60,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(61,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(66,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(67,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(70,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(71,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(72,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(73,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(75,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(76,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(77,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(78,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(79,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(80,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(82,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(83,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(85,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(86,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(87,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(88,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(89,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(90,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(91,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(92,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(93,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(95,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(96,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(97,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(99,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(100,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(101,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(102,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(104,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(105,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(106,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(107,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(108,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(119,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(120,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(121,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(122,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(123,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(125,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(126,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(127,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(128,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(129,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(130,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(131,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(133,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(134,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(135,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(136,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(137,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(138,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(139,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(141,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(142,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(143,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(144,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(145,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(146,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(147,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(148,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(149,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(151,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(152,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(153,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(154,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(155,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(156,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(157,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(159,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(160,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(161,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(162,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(163,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(164,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(166,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(167,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(168,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(169,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(170,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(171,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(172,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(173,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(174,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(176,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(177,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(178,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(179,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(180,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(181,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(183,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(184,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(186,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(187,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(188,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(189,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(190,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(191,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(192,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(193,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(194,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(196,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(197,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(198,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(200,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(201,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(202,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(203,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(204,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(212,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-disabled-text'
(213,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-disabled-bg'
(214,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-disabled-border'
(222,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-required-bg'
(223,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-required-border'
(232,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-page-bg'
(236,23): run-time error CSS1039: Token not allowed after unary operator: '-kr-font-family'
(241,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(262,27): run-time error CSS1039: Token not allowed after unary operator: '-kr-scroll-thumb'
(262,50): run-time error CSS1039: Token not allowed after unary operator: '-kr-scroll-track'
(271,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-scroll-track'
(275,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-scroll-thumb'
(277,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-scroll-track'
(281,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-scroll-thumb-hover'
(296,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(298,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(322,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(327,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(343,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(344,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-warning'
(348,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-warning'
(349,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(353,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-gray-300'
(359,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-gray-350'
(378,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(384,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(385,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(392,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(393,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(401,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(402,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(408,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(413,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(417,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(421,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(428,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(437,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(445,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(457,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(483,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(484,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(501,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(502,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(503,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-ui-blue'
(519,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-button-hover'
(520,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(532,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(533,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(543,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(546,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(561,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(562,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(563,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-ui-blue'
(578,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-button-hover'
(579,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(595,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-selected-accent'
(596,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(597,33): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(653,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-strong'
(654,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(657,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(666,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(672,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(675,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(689,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(690,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(702,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(708,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(715,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(717,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(718,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(723,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(725,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(726,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(734,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(738,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(744,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(748,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(754,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(758,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(762,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-deeper'
(766,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(770,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-deeper'
(771,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(776,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(791,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(792,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(793,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-button'
(809,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-button-hover'
(810,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(828,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(849,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(854,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-deeper'
(855,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(856,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-button-hover'
(857,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(864,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(869,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(870,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(876,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(883,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(894,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(905,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(952,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-strong'
(954,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(959,29): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(960,35): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(961,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(962,31): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(968,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-muted'
(975,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(990,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(997,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-overlay'
(1009,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1029,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1032,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1055,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger'
(1056,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1064,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1065,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(1066,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(1079,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(1080,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(1102,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-loading-overlay'
(1104,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-loading-text'
(1113,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-loading-text'
(1138,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1169,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-strong'
(1176,35): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-strong'
(1202,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-strong'
(1212,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-strong'
(1218,35): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-strong'
(1228,35): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-muted'
(1243,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-muted'
(1253,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-muted'
(1263,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-muted'
(1273,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1322,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(1323,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1324,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1332,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(1333,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1334,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1342,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1350,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1376,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1383,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1397,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1409,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(1410,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(1411,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1420,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(1421,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1426,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(1432,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(1433,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-disabled-bg'
(1441,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(1445,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(1453,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1455,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(1456,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1464,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(1471,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(1472,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1476,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(1483,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(1484,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1488,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(1489,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1493,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(1494,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1498,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(1508,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(1509,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1513,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(1514,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1518,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(1519,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1530,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(1534,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(1535,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1536,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1546,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(1550,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(1554,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(1559,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(1560,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1564,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(1565,34): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger'
(1573,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger-soft'
(1574,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1575,38): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger'
(1579,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger-soft'
(1580,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1581,38): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger'
(1585,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(1586,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1587,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1596,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(1597,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1598,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1603,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(1604,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1605,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1614,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(1615,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1616,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(1632,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1639,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-gray-200'
(1641,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(1642,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-table'
(1647,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-link-dark'
(1653,29): run-time error CSS1039: Token not allowed after unary operator: '-kr-link-dark'
(1666,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-link-dark'
(1688,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1691,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(1726,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(1727,64): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(1727,84): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(1727,106): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(1727,133): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(1728,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(1731,43): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(1740,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(1741,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(1748,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(1776,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(1782,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(1789,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(1791,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(1804,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(1809,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover-strong'
(1826,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(1830,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-link-green'
(1841,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(1843,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(1847,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(1857,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-selected-bg'
(1858,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-selected-text'
(1863,40): run-time error CSS1039: Token not allowed after unary operator: '-kr-selected-accent'
(1867,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(1882,37): run-time error CSS1039: Token not allowed after unary operator: '-kr-gray-600'
(1888,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-gray-600'
(1900,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-inverse'
(1901,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-strong'
(1910,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-strong'
(1914,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-overlay'
(1923,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(1936,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(2022,34): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2023,40): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-card'
(2043,33): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(2051,51): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(2062,37): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(2103,38): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2139,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2140,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-card'
(2175,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2176,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(2190,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-gray-200'
(2191,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-table'
(2344,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(2482,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-checkbox-off'
(2498,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-success'
(2512,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2514,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-table'
(2521,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-gray-200'
(2523,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(2525,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-table'
(2529,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(2536,29): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(2541,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(2545,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-table'
(2549,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-warning'
(2553,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(2558,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-link-green'
(2569,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(2571,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-gray-200'
(2575,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(2580,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2590,41): run-time error CSS1039: Token not allowed after unary operator: '-kr-gray-600'
(2596,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-gray-600'
(2601,29): run-time error CSS1039: Token not allowed after unary operator: '-kr-overlay'
(2610,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(2622,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(2634,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger-light'
(2638,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger-medium'
(2642,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-success-soft'
(2646,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(2650,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-info-soft'
(2654,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-accent-orange'
(2658,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger-bright'
(2662,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-accent-purple'
(2666,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-link-dark'
(2675,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-link-green'
(2686,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-deep'
(2704,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-info-cyan'
(2708,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-warning-soft'
(2712,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-success-neon'
(2720,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-gray-200'
(2725,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(2726,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2729,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(2737,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(2738,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(2742,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(2743,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(2747,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(2748,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2752,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(2760,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(2761,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(2765,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(2766,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(2770,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(2771,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2775,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(2776,34): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger'
(2784,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger-soft'
(2785,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(2786,38): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger'
(2790,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger-soft'
(2791,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(2792,34): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger'
(2797,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(2798,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2799,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(2809,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(2813,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(2817,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2818,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-gray-500'
(2827,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(2836,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(2850,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(2856,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(2862,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(2868,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(2873,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(2879,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(2885,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2886,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(2892,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(2896,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(2901,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(2902,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(2912,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(2913,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2914,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(2925,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(2950,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(2951,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2964,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2971,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(2977,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(2978,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(2987,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(2988,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(2992,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(2993,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(2998,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(2999,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(3003,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(3010,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(3011,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(3015,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(3016,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(3027,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(3030,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(3073,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(3108,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(3114,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger'
(3125,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(3135,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(3151,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-soft'
(3159,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(3191,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger'
(3192,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger-soft'
(3197,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger'
(3205,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-ui-blue'
(3206,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(3207,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-ui-blue'
(3220,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-deep'
(3221,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-deep'
(3222,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(3231,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-page-bg'
(3242,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(3243,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(3248,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(3249,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(3253,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-grid-bg'
(3253,46): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(3254,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(3258,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(3259,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(3264,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(3268,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover-strong'
(3273,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-selected-bg'
(3274,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-selected-text'
(3278,40): run-time error CSS1039: Token not allowed after unary operator: '-kr-selected-accent'
(3308,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-bg'
(3309,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-text'
(3310,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(3318,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(3323,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-bg'
(3324,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-text'
(3329,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger-soft'
(3330,34): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger'
(3338,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(3339,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-card'
(3340,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-shadow-color'
(3346,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(3347,39): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(3352,29): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-strong'
(3361,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3362,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3363,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3364,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3365,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3366,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3367,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3368,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3369,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3370,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3580,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-inverse'
(3584,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(3585,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(3586,34): run-time error CSS1039: Token not allowed after unary operator: '-kr-shadow-color'
(3590,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(3594,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(3598,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-ui-blue'
(3599,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-inverse'
(3603,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-deep'
(3608,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(3609,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(3613,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(3659,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(4003,27): run-time error CSS1030: Expected identifier, found '['
(4003,32): run-time error CSS1031: Expected selector, found '='
(4003,32): run-time error CSS1025: Expected comma or open brace, found '='
(4038,15): run-time error CSS1030: Expected identifier, found '>'
(4038,37): run-time error CSS1031: Expected selector, found ')'
(4038,37): run-time error CSS1025: Expected comma or open brace, found ')'
(4043,19): run-time error CSS1030: Expected identifier, found '>'
(4043,41): run-time error CSS1031: Expected selector, found ')'
(4043,41): run-time error CSS1025: Expected comma or open brace, found ')'
(4053,19): run-time error CSS1030: Expected identifier, found '>'
(4053,41): run-time error CSS1031: Expected selector, found ')'
(4053,41): run-time error CSS1025: Expected comma or open brace, found ')'
(4231,18): run-time error CSS1039: Token not allowed after unary operator: '-kr-footer-height'
(4241,18): run-time error CSS1039: Token not allowed after unary operator: '-kr-footer-height'
(4251,18): run-time error CSS1039: Token not allowed after unary operator: '-kr-footer-height'
(4278,18): run-time error CSS1039: Token not allowed after unary operator: '-kr-footer-height'
(4619,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(4631,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(4736,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-loader-track'
(4744,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-loader-track'
(4910,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4918,18): run-time error CSS1039: Token not allowed after unary operator: '-kr-footer-height'
(5672,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(5673,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(5674,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(5727,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(5746,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(5757,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(5768,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(5785,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(5796,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(5803,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-hover'
(5804,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(5808,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(5821,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-danger'
(5905,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-bg'
(5906,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-text'
(5907,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-border'
(5911,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-bg-alt'
(5912,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-text'
(5913,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-border'
(5917,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-panel-bg'
(5918,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-text'
(5929,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-text'
(5934,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-hover'
(5950,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary'
(5983,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(5984,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(5985,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(6038,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-soft'
(6039,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-strong'
(6046,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-strong'
(6054,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(6068,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-muted'
(6069,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(6077,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(6089,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(6097,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-strong'
(6098,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-strong'
(6159,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6160,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6161,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6162,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6163,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6164,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6165,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6166,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6167,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6168,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6169,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6185,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-bg'
(6186,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-text'
(6243,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-text-strong'
(6282,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-text-strong'
(6290,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-muted'
(6309,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-text'
(6336,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-primary'
(6337,39): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-border-dark'
(6349,37): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-border'
(6570,35): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-border-dark'
(6611,33): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-border'
(6621,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-border'
(6642,35): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-primary-2'
(6654,37): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-border'
(6688,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-primary'
(6689,35): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-primary-2'
(6962,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-border-dark'
(6963,35): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-primary'
(6982,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-primary'
(7000,33): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-border'
(7074,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-primary'
(7075,35): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-primary-2'
(7084,34): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-border'
(7103,33): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-border'
(7114,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-soft'
(7147,110): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-primary'
(7147,137): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-primary'
(7172,33): run-time error CSS1039: Token not allowed after unary operator: '-kr-rpt-border'
(7930,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7931,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7932,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7964,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7965,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7966,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8019,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8020,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8021,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8135,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8136,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8137,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8138,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8142,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8143,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8144,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8145,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8160,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-loader-track'
(8161,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-loader-accent'
(8162,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-loader-accent'
(8171,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-loading-overlay'
(8172,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-loading-text'
(8200,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-loading-overlay'
(8223,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-loader-text'
(8224,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-loader-card'
(8225,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(8226,34): run-time error CSS1039: Token not allowed after unary operator: '-kr-shadow-color'
(8232,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-loading-overlay'
(8233,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-loading-text'
(8238,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(8239,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-strong'
(8250,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(8251,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(8252,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(8258,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(8259,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(8260,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(8265,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(8269,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(8273,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(8274,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(8275,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-button'
(8279,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-default'
(8280,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-button-hover'
(8284,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-inverse'
(8285,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-deep'
(8286,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-deep'
(8292,31): run-time error CSS1039: Token not allowed after unary operator: '-kr-gray-500'
(8297,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(8302,31): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(8306,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-inverse'
(8307,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-deep'
(8312,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-muted'
(8313,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(8317,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(8318,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(8331,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-text'
(8332,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-bg'
(8333,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(8342,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-text'
(8405,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-selected-text'
(8406,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover-strong'
(8412,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-selected-text'
(8413,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-selected-bg'
(8420,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(8421,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(8422,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(8430,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-disabled-text'
(8431,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-disabled-bg'
(8432,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-disabled-border'
(8438,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(8439,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(8440,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(8444,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(8448,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-inverse'
(8456,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(8457,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(8458,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(8463,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(8498,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-loader-text'
(8499,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-loader-card'
(8500,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-medium'
(8502,34): run-time error CSS1039: Token not allowed after unary operator: '-kr-shadow-color'
(8512,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-loader-track'
(8513,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-loader-accent'
(8514,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-loader-accent'
(8520,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-loader-text'
(8521,23): run-time error CSS1039: Token not allowed after unary operator: '-kr-font-family'
(8562,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8563,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8564,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8565,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8566,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8567,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8568,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8569,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8570,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8571,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8572,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8573,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8574,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8575,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8576,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8577,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8578,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8583,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8584,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8585,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8586,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8587,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8588,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8589,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8590,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8592,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8593,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8594,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8596,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8597,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8598,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8599,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8601,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8602,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8604,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8605,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8606,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8607,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8608,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8610,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8611,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8612,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8613,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8614,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8615,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8625,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-bar-text'
(8626,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-bar-bg'
(8628,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-bar-bg'
(8647,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-bar-text'
(8674,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-bar-hover-text'
(8675,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-bar-hover-bg'
(8695,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-bar-selected-text'
(8696,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-bar-selected-bg'
(8708,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-popup-text'
(8709,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-popup-bg'
(8711,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-popup-border'
(8712,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-popup-shadow'
(8720,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-popup-border'
(8741,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-popup-text'
(8742,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-popup-bg'
(8778,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-popup-text'
(8779,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-popup-bg'
(8796,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-hover-text'
(8797,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-hover-bg'
(8807,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-selected-text'
(8808,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-selected-bg'
(8851,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-bar-arrow'
(8887,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-bar-arrow-hover'
(8920,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-popup-text'
(8921,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-popup-bg'
(8929,29): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-popup-text'
(8937,29): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-hover-text'
(8938,40): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-hover-bg'
(8954,29): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-popup-text'
(8955,40): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(8956,47): run-time error CSS1039: Token not allowed after unary operator: '-kr-menu-popup-border'
(9005,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9006,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9007,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9008,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9009,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9010,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9011,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9012,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9013,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9014,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9015,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9016,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9020,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9021,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9022,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9023,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9024,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9025,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9026,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9027,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9028,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9029,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9030,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9031,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9098,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-text'
(9099,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-bg'
(9100,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-border'
(9102,33): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-shadow'
(9103,23): run-time error CSS1039: Token not allowed after unary operator: '-kr-font-family'
(9105,27): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-scale'
(9111,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-text'
(9117,37): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-border'
(9121,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-text'
(9134,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-muted'
(9166,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-selected'
(9167,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-hover'
(9171,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-selected'
(9184,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-text'
(9185,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-bg'
(9204,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-muted'
(9212,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-text'
(9221,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-text'
(9236,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-text'
(9237,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-hover'
(9244,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-selected-text'
(9245,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-selected'
(9254,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-selected'
(9255,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-hover'
(9257,29): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-selected'
(9266,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-today'
(9273,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-selected-text'
(9278,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-selected'
(9284,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-muted'
(9291,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-disabled'
(9298,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-muted'
(9300,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-border'
(9304,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-muted'
(9312,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-ajax-calendar-selected'
(9322,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9347,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-text'
(9348,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-bg'
(9349,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(9368,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-primary-strong'
(9370,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-focus-ring'
(9374,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-disabled-text'
(9375,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-disabled-bg'
(9376,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-disabled-border'
(9455,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-text'
(9456,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-bg'
(9457,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(9467,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-text'
(9481,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-text'
(9482,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-bg'
(9483,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(9493,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-text'
(9494,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-input-bg'
(9499,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-selected-text'
(9500,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover-strong'
(9504,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-selected-text'
(9505,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-selected-bg'
(9511,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-disabled-text'
(9512,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-disabled-bg'
(9513,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-disabled-border'
(9526,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-bg'
(9527,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-text'
(9528,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-border'
(9539,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-text'
(9544,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-hover'
(9549,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-bg'
(9550,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-text'
(9551,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-shell-bar-border'
(9561,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9562,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9566,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9567,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9571,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9572,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9601,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-control-focus-border'
(9603,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-control-focus-ring'
(9618,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-control-focus-border'
(9620,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-control-focus-ring'
(9633,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-control-focus-border'
(9635,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-control-focus-ring'
(9645,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-control-focus-border'
(9647,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-control-focus-ring'
(9656,24): run-time error CSS1039: Token not allowed after unary operator: '-kr-control-focus-border'
(9658,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-control-focus-ring'
(9703,17): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9704,22): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(9706,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(9714,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(9715,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9726,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9727,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(9730,39): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(9736,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9746,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
(9747,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(9750,39): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(9764,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-heading'
(9765,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(9768,39): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(9777,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9785,29): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9793,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(9800,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(9807,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(9809,43): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(9815,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9816,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(9818,32): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(9825,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9826,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(9834,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9835,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(9837,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border-control'
(9846,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9847,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(9856,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9857,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(9862,40): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(9867,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(9874,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(9875,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9881,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-selected-text'
(9881,45): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9882,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-selected-bg'
(9882,48): run-time error CSS1039: Token not allowed after unary operator: '-kr-hover'
(9892,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9893,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface-alt'
(9895,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(9903,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9904,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(9907,36): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(9913,21): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(9926,26): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(9927,28): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(10153,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(10154,30): run-time error CSS1039: Token not allowed after unary operator: '-kr-surface'
(10156,40): run-time error CSS1039: Token not allowed after unary operator: '-kr-border'
(10173,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-text'
(10180,25): run-time error CSS1039: Token not allowed after unary operator: '-kr-text-muted'
 */
/* ============================================================
   KRONHOS ERP - GENERAL.CSS CON TEMA LIGHT / DARK
   ------------------------------------------------------------
   Tema claro:
       <html data-theme="light">

   Tema oscuro:
       <html data-theme="dark">

   Las clases originales se mantienen. Solo se centralizan
   colores y valores visuales mediante variables globales.
   ============================================================ */

:root,
html[data-theme="light"] {
    color-scheme: light;
    /* Base */
    --kr-page-bg: #FFFFFF;
    --kr-surface: #FFFFFF;
    --kr-surface-alt: #F5F7F9;
    --kr-surface-muted: #E6E6E6;
    --kr-surface-soft: #F0F3F6;
    /* Texto */
    --kr-text: #45454B;
    --kr-text-default: #444444;
    --kr-text-strong: #243447;
    --kr-text-heading: #34404C;
    --kr-text-muted: #777777;
    --kr-text-soft: #646464;
    --kr-text-inverse: #FFFFFF;
    /* Marca */
    --kr-primary: #006699;
    --kr-primary-strong: #104A7D;
    --kr-primary-deep: #093757;
    --kr-primary-deeper: #003550;
    --kr-action: #0066CC;
    --kr-ui-blue: #0F6CBD;
    --kr-link-dark: #005C87;
    /* Fondos interactivos */
    --kr-hover: #F0F6FF;
    --kr-hover-strong: #DCEAFF;
    --kr-primary-soft: #EDF9FF;
    --kr-primary-soft-2: #DAF2FC;
    --kr-button-hover: #D7EBF9;
    --kr-selected-bg: #F4F7F9;
    --kr-selected-text: #263746;
    --kr-selected-accent: #32678B;
    --kr-grid-bg: var(--kr-surface);
    /* Bordes */
    --kr-border: #DFE4E8;
    --kr-border-control: #D5D5D5;
    --kr-border-medium: #CCCCCC;
    --kr-border-table: #D3D3D3;
    --kr-border-card: #D3DCE3;
    --kr-border-button: #C6C6C6;
    --kr-border-strong: #C5C5C5;
    /* Grises auxiliares */
    --kr-gray-200: #E5E5E5;
    --kr-gray-300: #D7D7D7;
    --kr-gray-350: #E0E0E0;
    --kr-gray-500: #A6A6A6;
    --kr-gray-600: #666666;
    --kr-checkbox-off: #B8BBBE;
    /* Estados */
    --kr-success: #199B3B;
    --kr-success-soft: #DBF3BF;
    --kr-danger: #C62828;
    --kr-danger-bright: #E30000;
    --kr-danger-soft: #FFD6D6;
    --kr-danger-medium: #F5A9A9;
    --kr-danger-light: #FA5858;
    --kr-warning: #FBDE62;
    --kr-warning-soft: #FFFF99;
    /* Colores funcionales heredados */
    --kr-info-cyan: #00CCFF;
    --kr-success-neon: #66FF99;
    --kr-info-soft: #BFDBF3;
    --kr-accent-orange: #E9967A;
    --kr-accent-purple: #BE81F7;
    --kr-link-green: #003300;
    /* Sombra / overlays */
    --kr-overlay: #000000;
    --kr-shadow-color: rgba(0, 0, 0, .10);
    /* Controles */
    --kr-input-bg: #FFFFFF;
    --kr-input-text: #243447;
    --kr-disabled-bg: #F5F5F5;
    --kr-disabled-text: #66788A;
    --kr-disabled-border: #D8E0E7;
    --kr-required-bg: #FFF8D6;
    --kr-required-border: #D8AD00;
    --kr-loading-overlay: rgba(38, 55, 70, 0.9);
    --kr-loading-text: #34404C;
    /* Scroll */
    --kr-scroll-track: #F5F7F9;
    --kr-scroll-thumb: #B8C1CA;
    --kr-scroll-thumb-hover: #919DA8;
    /* Tipografía y geometría */
    --kr-font-family: "Inter", "Segoe UI", Arial, sans-serif;
    --kr-radius-sm: 3px;
    --kr-radius-md: 6px;
    --kr-radius-lg: 8px;
    /* Focus */
    --kr-focus-ring: 0 0 0 3px rgba(15,108,189,.15);
    --kr-loader-accent: #0F6CBD;
    --kr-loader-track: #DCE5EC;
    --kr-loader-card: rgba(255, 255, 255, .92);
    --kr-loader-text: #34404C;
}


/* ============================================================
   TEMA OSCURO
   ============================================================ */

html[data-theme="dark"] {
    color-scheme: dark;
    /* Base */
    --kr-page-bg: #0F141A;
    --kr-surface: #161D24;
    --kr-surface-alt: #1C252E;
    --kr-surface-muted: #222C36;
    --kr-surface-soft: #192129;
    /* Texto */
    --kr-text: #D5DDE5;
    --kr-text-default: #D5DDE5;
    --kr-text-strong: #E5EBF1;
    --kr-text-heading: #F0F4F8;
    --kr-text-muted: #A3AFBA;
    --kr-text-soft: #8F9BA7;
    --kr-text-inverse: #FFFFFF;
    /* Marca */
    --kr-primary: #5AADE6;
    --kr-primary-strong: #78BDEC;
    --kr-primary-deep: #397FAF;
    --kr-primary-deeper: #245A7D;
    --kr-action: #68B5F0;
    --kr-ui-blue: #55A9E7;
    --kr-link-dark: #83C4F2;
    /* Fondos interactivos */
    --kr-hover: #1C3040;
    --kr-hover-strong: #23465F;
    --kr-primary-soft: #162C3B;
    --kr-primary-soft-2: #19384C;
    --kr-button-hover: #1B4059;
    --kr-selected-bg: #203343;
    --kr-selected-text: #F1F5F8;
    --kr-selected-accent: #67B5EA;
    --kr-grid-bg: var(--kr-surface);
    /* Bordes */
    --kr-border: #303B46;
    --kr-border-control: #35414C;
    --kr-border-medium: #3A4651;
    --kr-border-table: #313C47;
    --kr-border-card: #34414D;
    --kr-border-button: #40505E;
    --kr-border-strong: #445260;
    /* Grises auxiliares */
    --kr-gray-200: #242E38;
    --kr-gray-300: #2C3742;
    --kr-gray-350: #28333D;
    --kr-gray-500: #687681;
    --kr-gray-600: #8C98A3;
    --kr-checkbox-off: #5E6974;
    /* Estados */
    --kr-success: #4BC477;
    --kr-success-soft: #203C29;
    --kr-danger: #FF7474;
    --kr-danger-bright: #FF6B6B;
    --kr-danger-soft: #46262A;
    --kr-danger-medium: #5B3035;
    --kr-danger-light: #C95860;
    --kr-warning: #6A5927;
    --kr-warning-soft: #3C351D;
    /* Colores funcionales heredados */
    --kr-info-cyan: #55C9EC;
    --kr-success-neon: #56C97B;
    --kr-info-soft: #24394B;
    --kr-accent-orange: #C87560;
    --kr-accent-purple: #9B72C6;
    --kr-link-green: #6DBB89;
    /* Sombra / overlays */
    --kr-overlay: #000000;
    --kr-shadow-color: rgba(0, 0, 0, .38);
    /* Controles */
    --kr-input-bg: #141B22;
    --kr-input-text: #DDE5EC;
    --kr-disabled-bg: #202831;
    --kr-disabled-text: #8291A0;
    --kr-disabled-border: #35414C;
    --kr-required-bg: #3A321B;
    --kr-required-border: #9D8129;
    --kr-loading-overlay: rgba(15, 20, 26, 0.9);
    --kr-loading-text: #D5DDE5;
    /* Scroll */
    --kr-scroll-track: #161D24;
    --kr-scroll-thumb: #52606D;
    --kr-scroll-thumb-hover: #6A7987;
    /* Focus */
    --kr-focus-ring: 0 0 0 3px rgba(103,181,234,.18);
    --kr-loader-accent: #5AADE6;
    --kr-loader-track: #34414D;
    --kr-loader-card: rgba(22, 29, 36, .94);
    --kr-loader-text: #D5DDE5;
}


input:disabled:not(.indicador-checkbox),
select:disabled,
textarea:disabled,
button:disabled {
    color: var(--kr-disabled-text);
    background-color: var(--kr-disabled-bg);
    border-color: var(--kr-disabled-border);
    cursor: not-allowed;
    opacity: 1;
}

input:required:not(:disabled):not([readonly]),
select:required:not(:disabled),
textarea:required:not(:disabled):not([readonly]) {
    background-color: var(--kr-required-bg);
    border-color: var(--kr-required-border);
}


/* Base mínima para que el cambio de tema también alcance
   elementos que antes dependían directamente de BODY. */

html,
body {
    background-color: var(--kr-page-bg);
}

html {
    font-family: var(--kr-font-family);
    font-size: 11px;
}

body {
    color: var(--kr-text-muted);
}

    body.kr-modal-open {
        overflow-y: scroll !important;
    }


/* Focus consistente */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: none;
    /* box-shadow: var(--kr-focus-ring); */
}


/* Scrollbar global */
* {
    scrollbar-color: var(--kr-scroll-thumb) var(--kr-scroll-track);
}

    *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    *::-webkit-scrollbar-track {
        background: var(--kr-scroll-track);
    }

    *::-webkit-scrollbar-thumb {
        background: var(--kr-scroll-thumb);
        border-radius: 999px;
        border: 2px solid var(--kr-scroll-track);
    }

        *::-webkit-scrollbar-thumb:hover {
            background: var(--kr-scroll-thumb-hover);
        }


/* ============================================================
   CSS ORIGINAL MIGRADO
   ============================================================ */




body {
    font-family: inherit;
    font-size: 1rem;
    margin-top: 0;
    background-color: var(--kr-surface) !important;
    text-align: center !important;
    color: var(--kr-text-muted);
    text-transform: uppercase;
    font-weight: 500;
}

input,
select,
textarea,
button,
option {
    font-family: inherit !important;
    font-size: 1rem !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}



.generalFont {
    font-family: "Inter", sans-serif;
    color: var(--kr-text-muted);
}

.dxgvControl, .dxgvDisabled {
    font-family: "Inter", sans-serif;
    color: var(--kr-text-muted);
}

.dxpLite {
    font-family: "Inter", sans-serif;
    font-size: 12px;
}

.dxeListBox {
    font-family: "Inter", sans-serif;
    font-size: 10px;
}



.dxgvFocusedRow {
    color: var(--kr-text-muted);
    background-color: var(--kr-warning);
}

.dxgvSelectedRow {
    background-color: var(--kr-warning);
    color: var(--kr-text-muted);
}

.dxgvFooter {
    background-color: var(--kr-gray-300);
}

.dxgvControl_Kronhos .dxpLite,
.dxgvDisabled_Kronhos .dxpLite {
    padding-top: 4px;
    background: var(--kr-gray-350);
}




.material-symbols-outlined {
    font-size: 22px;
}

.w100center {
    width: 100%;
    text-align: center;
}

.newlinkicon {
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    color: var(--kr-text-default);
}


.tabla {
    width: 790px;
    background-color: var(--kr-surface);
    border: 2px solid var(--kr-text-strong);
    margin-right: 0;
}

.tabla600 {
    width: 100%;
    max-width: 600px;
    border: 0.5px solid var(--kr-border-control);
    background-color: var(--kr-surface);
    padding: 2px;
    margin-top: 10px;
}

.tabla800 {
    width: 100%;
    max-width: 800px;
    border: 0.5px solid var(--kr-border-control);
    background-color: var(--kr-surface);
    padding: 2px;
    margin-top: 10px;
}

.tabla1024 {
    background-color: var(--kr-surface);
    max-width: 1024px;
    width: 100%;
    padding: 5px;
    margin-top: 10px;
    border: 0.5px solid var(--kr-border-control);
}

.tabla98p {
    background-color: var(--kr-surface);
    width: 98%;
    padding: 5px;
    margin-top: 10px;
    border: 0.5px solid var(--kr-border-control);
}

.tit_new {
    text-align: left;
    font-size: 16px;
    padding: 5px 5px 5px 5px;
    color: var(--kr-text-heading);
    width: 100% !important;
}

.subtit_new {
    text-align: left;
    padding-left: 5px;
    padding-bottom: 5px;
    font-size: 10px;
    color: var(--kr-text-heading);
    vertical-align: top;
    height: 11px;
}

.tabla_titulo {
    font-size: 12px;
    text-align: right;
    color: var(--kr-text-heading);
}

.tabla_cuerpo {
    width: 70%;
    text-align: left;
}

.tabla_titulo4 {
    font-size: 12px;
    text-align: right;
    text-align: right;
    color: var(--kr-text-heading);
}

.tabla_cuerpo4 {
    text-align: left;
    width: 35% !important;
}

.tabla_cuerpo_solo {
    text-align: left;
}

.botones_derecha {
    text-align: right;
    min-height: 30px !important;
}



.botones_derecha_iframe {
    position: fixed !important;
    bottom: 12px;
    left: 10px;
    right: 10px;
    min-height: 40px;
    padding: 7px 8px;
    background-color: var(--kr-surface-alt);
    border-top: 1px solid var(--kr-border);
    box-sizing: border-box;
    text-align: right;
    z-index: 100;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    display: block !important;
}


    .botones_derecha_iframe > a,
    .botones_derecha_iframe > input,
    .botones_derecha_iframe > button,
    .botones_derecha_iframe > span {
        background: var(--kr-surface);
        color: var(--kr-text-default);
        border: 1px solid var(--kr-ui-blue);
        border-radius: 6px !important;
        padding: 7px 14px !important;
        font-family: inherit;
        font-weight: 600;
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: auto !important;
        transition: background .18s ease, box-shadow .18s ease;
        margin: 1px;
        width: auto;
    }

        .botones_derecha_iframe > a:hover {
            background-color: var(--kr-button-hover);
            color: var(--kr-text-default);
        }

.boton_espacio {
    padding: 0 5px 0 5px;
}

.inferior_fixed {
    position: fixed;
    bottom: 1px;
    left: 10px;
    z-index: 2000;
    background-color: var(--kr-surface);
    border: 1px solid var(--kr-primary);
}

.botones_principales {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100000 !important;
    background-color: var(--kr-surface-alt);
    font-size: 11px;
    min-height: 30px;
    border: 1px solid var(--kr-border);
    border-top: none;
    padding: 3px 2px;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    display: block !important;
}

    .botones_principales > a,
    .botones_principales > input,
    .botones_principales > button,
    .botones_principales > span {
        background: var(--kr-surface);
        color: var(--kr-text-default);
        border: 1px solid var(--kr-ui-blue);
        border-radius: 6px !important;
        padding: 7px 14px !important;
        font-family: inherit;
        font-weight: 600;
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: auto !important;
        transition: background .18s ease, box-shadow .18s ease;
        margin: 1px;
    }

        .botones_principales > a:hover {
            background-color: var(--kr-button-hover);
            color: var(--kr-text-default);
        }

        .botones_principales > a:active {
            -webkit-box-shadow: 0 0 3px 1px rgba(136,170,225,1);
            -moz-box-shadow: 0 0 3px 1px rgba(136,170,225,1);
            box-shadow: 0 0 3px 1px rgba(136,170,225,1);
        }

.indicador-mas-acciones {
    position: sticky;
    left: -2px;
    z-index: 10;
    display: none;
    padding: 10px 12px 8px 6px !important;
    margin-right: 5px;
    color: var(--kr-selected-accent);
    background: var(--kr-surface-alt);
    box-shadow: 10px 0 7px var(--kr-surface);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: auto; /* bloquea clics sobre su propia área */
    display: none;
    border: none !important;
}



.tiene-mas-acciones .indicador-mas-acciones {
    display: inline-block;
    white-space: nowrap;
}


#logo_der {
    width: 300px;
    position: absolute;
    top: 0;
    left: 0 !important;
    z-index: 1000;
}

#logo_izq {
    width: 800px;
    right: 0;
    top: 5px;
    float: right;
    text-align: right;
    position: fixed;
    height: 20px;
    z-index: 1000;
    display: none;
}


.menu {
    font-size: 10px !important;
}








#usuario_v {
    position: fixed;
    top: 42px;
    width: 100%;
    z-index: 3000;
    left: 0;
    text-align: left;
    border: 1px solid var(--kr-primary-strong);
    background-color: var(--kr-surface);
    height: 31px;
    padding-top: 4px;
    background-color: var(--kr-primary);
}

#contenido {
    height: auto;
    width: 100%;
    top: 400px;
    z-index: 0;
    padding-top: 10px;
    background-color: var(--kr-surface);
    margin: 0 auto !important;
    text-align: center;
}

#contenido_pie {
    background-color: var(--kr-surface);
    width: 1048px;
    z-index: 0;
    border-top: 1px solid var(--kr-text-muted);
    margin: 480px 0 0 -10px;
    clear: both;
    position: absolute;
    font-size: 12px;
}

#pie {
    height: 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--kr-text-strong);
    color: var(--kr-surface);
    padding-top: 5px;
    z-index: 1000;
    visibility: hidden;
    font-size: 12px;
}

#alerta {
    height: 20px;
    position: fixed;
    bottom: 20px;
    width: 100%;
    background-color: var(--kr-surface);
    text-align: right;
    visibility: hidden;
}

.textbox {
    border: 1px solid var(--kr-text-muted);
    height: 30px !important;
    text-align: left;
    border-radius: 3px;
}

.boton {
    background-color: var(--kr-primary);
    height: 30px;
    border: 1px solid var(--kr-primary);
    color: var(--kr-surface);
}

.boton_hyp {
    font-size: 11px;
    background-color: var(--kr-primary);
    max-height: 40px !important;
    border: 1px solid var(--kr-primary);
    color: var(--kr-surface);
    text-decoration: none;
    padding: 3px;
}

.titulo {
    width: 100%;
    font-size: 22px;
    color: var(--kr-surface);
    font-weight: bolder;
    text-align: left;
    padding: 10px 10px 10px 10px;
    background-color: var(--kr-primary);
}

.titulo_login {
    width: 100%;
    font-size: 22px;
    color: var(--kr-surface);
    font-weight: bolder;
    text-align: left;
    padding: 10px 10px 10px 10px;
    background-color: var(--kr-primary);
}

.contenido_t {
    width: 100%;
    font-size: 12px;
    color: var(--kr-surface);
    font-weight: bolder;
    padding: 10px 20px 10px 20px;
    text-align: justify;
    background-color: var(--kr-primary);
}

.linksbtnRed {
    background-color: var(--kr-primary-deeper);
    text-decoration: none;
    padding: 5px;
    text-align: center;
    color: var(--kr-surface);
}

    .linksbtnRed:hover {
        background-color: var(--kr-primary-deeper);
        color: var(--kr-surface);
    }

.linksbtnMenu {
    font-size: 15px;
    color: var(--kr-text-strong);
    text-decoration: none;
    padding: 3px 6px 3px 6px;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}

    .linksbtnMenu:hover {
        text-decoration: underline;
    }

.linksbtn {
    font-size: 12px;
    background: var(--kr-surface);
    color: var(--kr-text-default);
    border: 1px solid var(--kr-border-button);
    border-radius: 6px !important;
    padding: 7px 14px !important;
    margin: 0px 2px;
    font-family: inherit;
    font-weight: 600;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content !important;
    text-transform: capitalize !important;
    transition: background .18s ease, box-shadow .18s ease;
}

    .linksbtn:hover {
        background-color: var(--kr-button-hover) !important;
        color: var(--kr-text-default);
    }

/*    .linksbtn:hover {
        background-color: var(--kr-primary-deeper);
        color: var(--kr-surface);
        background-color: var(--kr-button-hover);
        color: var(--kr-text-default) !important;
    }

    .linksbtn:active {
        -webkit-box-shadow: 0 0 3px 1px rgba(136,170,225,1);
        -moz-box-shadow: 0 0 3px 1px rgba(136,170,225,1);
        box-shadow: 0 0 3px 1px rgba(136,170,225,1);
    }*/


.lnkDisable {
    color: var(--kr-text-muted); /* Change text color to var(--kr-text-muted) */
    text-decoration: none; /* Remove underline */
    cursor: default; /* Change cursor to default */
    pointer-events: none; /* Prevent click events */
    opacity: 0.6; /* Add a slight opacity for visual indication */
}




/*.aspNetDisabled {
    color: var(--kr-text-muted); 
    text-decoration: none; 
    cursor: default; 
    pointer-events: none; 
    opacity: 0.6; 
}
*/
.linksbtnimg {
    padding: 0 2px;
    text-align: center;
    color: var(--kr-text-default);
    width: 30px;
}

    .linksbtnimg:hover {
        background-color: var(--kr-primary-deeper);
        color: var(--kr-surface);
        background-color: var(--kr-button-hover);
        color: var(--kr-text-default) !important;
    }

.linksbtn_clear {
    text-decoration: none;
    padding: 3px 6px 3px 6px;
    text-align: center;
    color: var(--kr-text-strong);
}

.watermark_login {
    font-style: italic;
    color: var(--kr-text-muted);
    border: 1px solid var(--kr-border-medium);
    height: 30px;
}

.tbl_titulo {
    text-align: right;
    color: var(--kr-text-heading);
    font-size: 11px;
    width: 30%;
}

.tbl_titulo_4 {
    text-align: right;
    color: var(--kr-text-heading);
    font-size: 11px;
    width: 15%;
}

.tbl_cuerpo {
    width: 70%;
    text-align: left;
}

.tbl_cuerpo_4 {
    background-color: var(--kr-surface);
    text-align: left;
    width: 35%;
}

.tbl_cuerpo_3 {
    width: 85%;
    text-align: left;
}

.tbl_cuerpo_btn {
    background-color: var(--kr-surface);
    text-align: left;
    height: 30px;
}

.tbl_gen {
    width: 100%;
    min-width: 80%;
    max-width: 100%;
}

.tbl_6_cab {
    font-size: 11px;
    text-align: right;
    width: 15% !important;
    text-transform: uppercase;
}

.tbl_6_cab3 {
    text-align: right;
    width: 10% !important;
    text-transform: uppercase;
}


.tbl_6_cue {
    text-align: left;
    width: 35% !important;
}

.tbl_6_cue2 {
    text-align: left;
}

.tbl_6_cue3 {
    width: 23.3%;
    text-align: left;
}

.tbl_6_cue5 {
    width: 850px;
    text-align: left;
}


.tbl_6_gnr {
    width: 1024px;
    border: 1px solid var(--kr-border-strong);
    padding: 2px;
    background-color: var(--kr-surface);
    margin-top: 10px;
}

.v_textbox {
    border-top: 0 none var(--kr-surface);
    border-bottom: 1px solid var(--kr-text-strong);
    border-left: 0 none var(--kr-surface);
    border-right: 0 none var(--kr-surface);
    background-color: transparent;
}

.v_table {
    width: 100%;
    background-color: var(--kr-surface-muted);
}

.v_title {
    text-align: right;
    font-weight: bold;
    text-transform: capitalize;
    color: var(--kr-text-heading);
    width: 30%;
}

.v_body {
    width: 70%;
    text-align: left;
}

.botones_principales_v {
    position: fixed;
    right: 80px;
    top: 0;
    left: 0;
    z-index: 900;
    background-color: var(--kr-border-medium);
    width: 100%;
    padding: 0 5px 0 0;
    height: 30px;
}

.fondo_texto {
    background-color: var(--kr-overlay);
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}

.iframes {
    position: absolute;
    top: 35px !important;
    bottom: 35px !important;
    left: 0;
    right: 0;
    overflow: hidden;
    background-color: var(--kr-surface);
}

.iframes_portable {
    position: absolute;
    top: 0 !important;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

.panel_show {
    position: fixed !important;
    top: 50px !important;
    bottom: 52px !important;
    left: 10px !important;
    right: 10px !important;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--kr-surface);
    overflow: auto;
    overflow-x: hidden !important;
    border: 1px solid var(--kr-border-medium);
}

.panelg {
    padding: 5px;
}

.btnCerrar {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    z-index: 10000;
    width: 28px;
    left: 1113px;
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

.error {
    background-color: var(--kr-danger);
    color: var(--kr-surface) !important;
    padding: 5px;
    margin: 5px;
    border: 5px;
}

.autocomplete_completionListElement {
    margin: 0 !important;
    background-color: var(--kr-surface);
    color: var(--kr-text-strong);
    border: 1px solid var(--kr-text-strong);
    cursor: pointer;
    overflow: auto;
    max-height: 200px;
    text-align: left;
    list-style-type: none;
    z-index: 999999 !important;
}

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem {
    z-index: 999999 !important;
    background-color: var(--kr-hover);
    color: var(--kr-text-strong);
    padding: 5px;
}



/* AutoComplete item */

.autocomplete_listItem {
    padding: 5px;
    z-index: 999999 !important;
}



.loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    background-color: var(--kr-loading-overlay);
    padding-top: 50px;
    color: var(--kr-loading-text);
    cursor: wait;
    text-align: center;
    display: none;
}

.loaderimg {
    z-index: 15000;
    text-align: center;
    color: var(--kr-loading-text);
    background-image: url("../loading.gif");
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 auto;
    height: 150px;
}

.titulos1 {
    font-weight: bolder;
    font-size: 18px;
    padding: 5px;
    text-align: center;
}

.style_icons {
    z-index: 1000;
    position: fixed;
    top: 6px;
    left: 2px;
}

.item_style_icons {
    z-index: 1000;
    padding: 0 5px;
    border: 1px solid var(--kr-border-medium);
    display: inline-block;
    height: 28px;
}

.style_icons_down {
    z-index: 1000;
    position: fixed;
    bottom: 2px;
    left: 146px;
}

.panel_max_100_porciento {
    max-width: 1080px;
    width: 95% !important;
    overflow: auto;
}

.titulo1 {
    font-family: Arial Narrow;
    font-size: 18px;
}




/* =========================================
   TITULO
   ========================================= */

.ttitulo {
    color: var(--kr-primary-strong);
    text-align: left;
    text-transform: uppercase;
    font-size: 15px;
    width: 100% !important;
    min-height: 40px;
    padding: 5px 0 10px 0 !important;
    border-bottom: 1px solid var(--kr-primary-strong);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    box-sizing: border-box;
}



/* =========================================
   RESPONSIVE
   ========================================= */

@media screen and (max-width: 769px) {

    .ttitulo {
        gap: 6px;
        padding: 7px 0 !important;
    }
}




.ttitulo1 {
    color: var(--kr-primary-strong);
    text-align: left;
    text-transform: capitalize;
    font-size: 14px;
    padding: 5px 0 0 0 !important;
    width: 100% !important;
}


.ttituloIn {
    color: var(--kr-primary-strong);
    text-align: left;
    font-size: 16px;
    padding: 5px 0 !important;
    width: 90% !important;
    text-transform: uppercase;
    border-bottom: 2px solid var(--kr-primary-strong);
}



.ttituloS {
    text-align: left;
    text-transform: uppercase;
    font-size: 16px;
    width: 100% !important;
    border-bottom: 1px solid var(--kr-surface-muted);
    display: block;
    margin-top: 10px;
    margin-bottom: 0px;
}




.newTitulo {
    text-align: left;
    text-transform: uppercase;
    font-size: 16px;
    padding: 5px 5px 0 5px;
    width: 100% !important;
    background-color: var(--kr-surface-muted);
}


.newTitulo2 {
    text-align: left;
    text-transform: uppercase;
    font-size: 16px;
    padding: 10px 5px 10px 5px;
    width: 95% !important;
    background-color: var(--kr-surface-muted);
    clear: both;
}



.div_tabla {
    width: 95%;
    max-width: 1400px;
    padding: 2px;
    background-color: var(--kr-surface-muted);
    text-align: left;
    clear: both;
    margin-top: 10px !important;
}

.div_tablaG {
    width: 95%;
    max-width: 1400px;
    padding: 2px;
    background-color: var(--kr-surface);
    text-align: left;
    clear: both;
    margin-top: 10px !important;
}

.div_tabla label {
    text-align: left !important;
    float: left;
    width: 130px !important;
    text-align: left !important;
    clear: both;
    display: block;
    padding-left: 3px;
}

.div_tablaG label {
    text-align: left !important;
    float: left;
    width: 130px !important;
    text-align: left !important;
    clear: both;
    display: block;
    padding-left: 3px;
}


.div_tabla_2 {
    width: 48%;
    max-width: 400px;
    float: left;
    text-align: left;
}

.div_tabla_3 {
    width: 30%;
    max-width: 300px;
    float: left;
    text-align: left;
}

.div_tabla_4 {
    width: 24%;
    max-width: 200px;
    float: left;
    text-align: left;
}

.newTextBox {
    color: var(--kr-text-default);
    background-color: var(--kr-surface);
    border: 1px solid var(--kr-border-medium);
    width: 60% !important;
    float: left !important;
    text-align: left;
    font-size: 11px;
}

.newTextBoxG {
    color: var(--kr-text-default);
    background-color: var(--kr-surface);
    border: 1px solid var(--kr-border-medium);
    width: 80% !important;
    float: left;
    text-align: left;
    font-size: 11px;
}

.newDropDown {
    border: 1px solid var(--kr-border-medium);
    width: 60% !important;
    float: left !important;
    text-align: left;
    border-radius: 3px;
}

.newDropDownG {
    border: 1px solid var(--kr-border-medium);
    width: 80% !important;
    float: left !important;
    text-align: left;
    border-radius: 3px;
}

.gvancho {
    margin-top: 20px !important;
    width: 90%;
    min-width: 400px;
}

.upspacer {
    margin-top: 0 !important;
}

.divContent {
    text-align: center;
    margin: 0 auto;
    max-width: 1400px;
    min-width: 500px;
    width: 100%;
    padding: 2px;
    margin: 2px;
    display: table;
    border: 1px solid var(--kr-border-medium);
}

.divT {
    width: 1024px;
    margin: 0 auto;
    display: table;
    border: 1px solid var(--kr-border-medium);
}

    .divT label {
        text-align: left !important;
        width: 130px;
        clear: left;
        float: left;
        padding-left: 3px;
        font-size: 11px !important;
    }

.divBoton {
    width: 100%;
    background-color: var(--kr-border-medium);
    clear: both;
    text-align: center;
    border-top: 5px;
    display: table;
}





.DropDown {
    border: 1px solid var(--kr-border-control);
    color: var(--kr-text-strong);
    background-color: var(--kr-surface);
    min-width: 100px;
    width: 98%;
    height: 30px !important;
    text-transform: uppercase;
    border-radius: 3px !important;
}

    .DropDown:hover {
        background-color: var(--kr-hover);
        border: 1px solid var(--kr-border-medium);
    }

    .DropDown select {
        font-size: 11px;
        color: var(--kr-text-default);
        height: 17px !important;
    }

.DropDownO {
    border: 1px solid transparent;
    color: var(--kr-text-default);
    background-color: var(--kr-disabled-bg);
    height: 21px !important;
    text-transform: uppercase;
    border-radius: 3px !important
}

    .DropDownO select {
        font-size: 11px;
        color: var(--kr-text-default);
    }

    .DropDownO:hover {
        background-color: var(--kr-hover);
    }





.DDmn {
    border: 1px solid var(--kr-border-medium);
    font-size: 18px;
    color: var(--kr-text-default);
    background-color: var(--kr-surface);
    min-width: 100px;
    height: 40px !important;
    text-transform: uppercase;
}

    .DDmn select {
        font-size: 18px;
        color: var(--kr-text-default);
        height: 40px !important;
    }



.textbox_gen {
    color: var(--kr-text-strong);
    background-color: var(--kr-surface);
    height: 30px;
    min-width: 30px;
    width: 98%;
    border: 1px solid var(--kr-border-control);
    resize: none;
    text-transform: uppercase;
    border-radius: 3px;
}

    .textbox_gen:hover {
        background-color: var(--kr-hover);
        border: 1px solid var(--kr-border-medium);
    }

    .textbox_gen:focus {
        background-color: var(--kr-hover);
        border: 1px solid var(--kr-border-medium);
    }

.textbox_genGV {
    color: var(--kr-text-strong);
    background-color: var(--kr-surface);
    height: 27px;
    min-width: 30px;
    width: 100%;
    border: 1px solid var(--kr-border-control);
    resize: none;
    text-transform: uppercase;
    border-radius: 3px;
    margin: 0;
    padding: 2px 5px;
    box-sizing: border-box;
}

    .textbox_genGV:hover {
        background-color: var(--kr-hover);
        border-color: var(--kr-border-medium);
    }

    .textbox_genGV:focus {
        background-color: var(--kr-hover);
        border-color: var(--kr-border-medium);
    }

.textbox_gen_sin_formato {
    color: var(--kr-text-default);
    background-color: var(--kr-surface);
    /*border: 1px solid var(--kr-border-medium);*/
    border: none;
    margin-bottom: 2px;
    height: 30px;
    text-transform: none !important;
    padding: 2px;
    border-radius: 3px;
}

    .textbox_gen_sin_formato:hover {
        background-color: var(--kr-hover);
    }

.textbox_gen2 {
    color: var(--kr-text-default);
    background-color: var(--kr-surface);
    border: 1px solid var(--kr-border-medium);
    font-size: 16px;
    margin-bottom: 2px;
    height: 30px;
    text-transform: uppercase;
    padding: 2px;
    border-radius: 3px;
}

    .textbox_gen2:hover {
        background-color: var(--kr-hover);
    }

.textbox_gen:focus {
    background-color: var(--kr-hover);
}

.textbox_gen2:focus {
    background-color: var(--kr-hover);
}


.textbox_genR {
    color: var(--kr-text-strong);
    background-color: var(--kr-surface);
    height: 30px;
    min-width: 80px;
    width: 98%;
    border: 1px solid var(--kr-border-control);
    border-right: 2px solid var(--kr-danger) !important;
    resize: none;
    text-transform: uppercase;
    border-radius: 3px;
}


    .textbox_genR:hover {
        background-color: var(--kr-danger-soft) !important;
        border: 1px solid var(--kr-border-medium);
        border-right: 2px solid var(--kr-danger) !important;
    }

    .textbox_genR:focus {
        background-color: var(--kr-danger-soft) !important;
        border: 1px solid var(--kr-border-medium);
        border-right: 2px solid var(--kr-danger) !important;
    }

.watermark {
    color: var(--kr-text-muted);
    background-color: var(--kr-surface);
    border: 1px solid var(--kr-border-medium);
    text-transform: lowercase !important;
}

    .watermark::first-letter {
        text-transform: uppercase;
    }

.watermarkDef {
    color: var(--kr-text-muted);
    background-color: var(--kr-surface);
    border: 1px solid var(--kr-border-medium);
    text-transform: lowercase !important;
}

.watermark2 {
    color: var(--kr-text-muted);
    background-color: var(--kr-surface);
    border: 1px solid var(--kr-border-medium);
    text-transform: lowercase !important;
}

    .watermark2::first-letter {
        text-transform: uppercase;
    }

.watermark_gen2 {
    color: var(--kr-text-muted);
    background-color: var(--kr-surface);
    border: 1px solid var(--kr-border-medium);
    text-transform: lowercase;
}

    .watermark_gen2::first-letter {
        text-transform: uppercase;
    }


/* nievo gridview */
.FixedHeader {
    position: absolute;
}


.aspxgridview {
    background-color: var(--kr-surface);
    font-size: 10px;
    margin-top: 10px !important;
    font-family: "Inter", sans-serif;
}

    .aspxgridview th {
        background: var(--kr-gray-200);
        padding: 5px;
        color: var(--kr-text);
        border: 1px solid var(--kr-border-table);
        padding: 4px;
    }

        .aspxgridview th a {
            color: var(--kr-link-dark);
            text-decoration: none;
            text-align: left;
        }

            .aspxgridview th a:hover {
                color: var(--kr-link-dark);
                text-decoration: underline;
                z-index: 30000;
            }



    .aspxgridview tr:hover {
        /*background: var(--kr-hover);*/
        z-index: 30000;
    }

    .aspxgridview td a {
        color: var(--kr-link-dark);
        text-decoration: none;
        text-align: left;
    }

        .aspxgridview td a:hover {
            text-decoration: underline;
        }





/* El encabezado sticky usa top: 0 por defecto.
   Si una pantalla concreta necesita un offset por una barra fija,
   debe aplicarlo con una clase específica de esa pantalla, no globalmente. */

/* =========================================================
   GRIDVIEW GENERAL
   ========================================================= */

.gridview {
    background-color: var(--kr-surface);
    font-size: 10px;
    margin-top: 0 !important;
    border: 1px solid var(--kr-border);
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.gv-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   GRIDVIEW STICKY
   ========================================================= */

.static-table {
    position: relative;
    overflow: auto;
    border-top: 0 !important;
}

    .static-table > .gridview,
    .static-table .gridview {
        margin-top: 0 !important;
        border-top: 0 !important;
    }


        /* CABECERA STICKY */
        .static-table .gridview th {
            position: sticky !important;
            top: 0 !important;
            z-index: 1000 !important;
            background-color: var(--kr-surface-alt) !important;
            background-image: linear-gradient( to bottom, var(--kr-border) 0, var(--kr-border) 1px, var(--kr-surface-alt) 1px, var(--kr-surface-alt) 100% ) !important;
            color: var(--kr-text-heading);
            padding: 5px;
            border-top: 0 !important;
            border-bottom: 1px solid var(--kr-border) !important;
        }


/* GridView fuera de static-table */
.gridview th {
    position: sticky;
    top: 0 !important;
    z-index: 1000;
    background: var(--kr-surface-alt) !important;
    color: var(--kr-text-heading);
    padding: 5px;
    border-top: 0 !important;
}

.gridview .th1 {
    font-size: 14px;
    color: var(--kr-primary);
}

.gridview > thead,
.gridview > thead > tr,
.gridview > thead > tr > th {
    margin-top: 0 !important;
    border-top: 0 !important;
}

    .gridview > thead > tr > th {
        top: 0 !important;
    }



    .gridview > thead > tr {
        height: 35px;
    }

        .gridview > thead > tr > th {
            height: 35px;
            box-sizing: border-box;
            vertical-align: middle;
        }


.gridview th a {
    color: var(--kr-text);
    text-decoration: none;
    text-align: left;
}

    .gridview th a:hover {
        color: var(--kr-text);
        text-decoration: underline;
        z-index: 30000;
    }


.gridview td {
    color: var(--kr-text);
    padding: 3px;
    border-top: 1px solid var(--kr-border);
    vertical-align: middle;
}



.gridview > tbody > tr {
    height: 35px;
}


    /* HOVER DE TODA LA FILA */
    .gridview > tbody > tr:not(.pgr):not(.ftr):hover > td {
        background-color: var(--kr-hover) !important;
    }

    /* HOVER DE LA CELDA ACTUAL */
    .gridview > tbody > tr:not(.pgr):not(.ftr) > td:hover {
        background-color: var(--kr-hover-strong) !important;
    }




/* Sin hover en Pager */
.gridview .pgr:hover,
.gridview .pgr tr:hover,
.gridview .pgr td:hover {
    background: inherit !important;
}

/* Sin hover en Footer */
.gridview .ftr:hover,
.gridview .ftr tr:hover,
.gridview .ftr td:hover {
    background: var(--kr-surface-alt) !important;
}

.gridview td a {
    color: var(--kr-link-green);
    text-decoration: none;
    text-align: left;
}

    .gridview td a:hover {
        text-decoration: underline;
    }


.gridview .ftr {
    color: var(--kr-text-strong) !important;
    text-decoration: none;
    background: var(--kr-surface-alt) !important;
}

    .gridview .ftr span {
        color: var(--kr-text-strong) !important;
        font-weight: bold;
    }

    .gridview .ftr tr {
        height: 20px !important;
    }

.GridViewSelectedRowStyle,
.GridViewSelectedRowStyle > td {
    background-color: var(--kr-selected-bg) !important;
    color: var(--kr-selected-text) !important;
}

    /* Solo la primera celda */
    .GridViewSelectedRowStyle > td:first-child {
        box-shadow: inset 3px 0 0 var(--kr-selected-accent);
    }

.gridview .pgr {
    background-color: var(--kr-surface);
    height: 20px !important;
}

    .gridview .pgr table {
        margin: 3px 0;
    }

    .gridview .pgr tr {
        height: 15px !important;
    }

    .gridview .pgr td {
        border-width: 0;
        padding: 0 6px;
        border-left: solid 1px var(--kr-gray-600);
        font-weight: bold;
        line-height: 12px;
    }

    .gridview .pgr a {
        color: var(--kr-gray-600);
        text-decoration: underline;
    }

    /* Página actual seleccionada del pager */
    .gridview .pgr span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        color: var(--kr-text-inverse) !important;
        background-color: var(--kr-primary-strong) !important;
        border-radius: 3px;
        font-weight: 600;
        text-decoration: none !important;
        box-sizing: border-box;
    }

    /* Fallback cuando ASP.NET renderiza el PageIndex como texto directo */
    .gridview .pgr td {
        color: var(--kr-primary-strong);
    }

    .gridview .pgr a:hover {
        color: var(--kr-overlay);
        text-decoration: underline;
    }

    .gridview .pgr a:link {
        text-decoration: underline;
    }

.gridview tr td a {
    color: var(--kr-primary);
    text-decoration: none;
    font-size: 10px;
    background-color: transparent;
    border: solid 1px transparent;
    padding: 0;
    margin: 0;
    z-index: 100;
    text-transform: capitalize;
    text-align: center;
}

    .gridview tr td a:hover {
        color: var(--kr-primary);
        text-decoration: underline;
        background-color: transparent;
        border: solid 1px transparent;
        padding: 0;
        margin: 0;
        z-index: 100;
    }

    .gridview tr td a::first-letter {
        /*text-transform: uppercase;*/
    }




/* =========================================================
   GRIDVIEW RESPONSIVE PARA TELÉFONOS
   Agregar después de todos los estilos actuales de .gridview
   ========================================================= */

.gridview-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 769px) {



    .gridview thead {
        display: none !important;
    }

    .gridview tr.gridview-header,
    .gridview .gridview-header {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .gridview-container {
        padding: 6px;
        overflow: visible;
        box-sizing: border-box;
    }

    .gridview {
        display: block !important;
        width: 100% !important;
        margin-top: 5px !important;
        background: transparent;
        border: 0;
        font-size: 12px;
    }

        .gridview > tbody {
            display: block !important;
            width: 100% !important;
        }

            /* Ocultar encabezado original */
            /*      .gridview > thead {
            position: relative;
            z-index: 1000;
        }*/

            .gridview > tbody > tr:first-child:has(th) {
                display: none !important;
            }

            /*
       Cada fila normal se convierte en tarjeta.
       No modifica el paginador ni el footer.
    */
            .gridview > tbody > tr:not(.gridview-header):not(.pgr):not(.ftr) {
                display: block !important;
                width: 100% !important;
                height: auto !important;
                margin: 0 0 12px !important;
                padding: 8px 12px !important;
                box-sizing: border-box;
                background: var(--kr-surface) !important;
                border: 1px solid var(--kr-border-card) !important;
                border-radius: 8px;
                box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
            }

                /*
       Cada celda se convierte en:
       ETIQUETA | VALOR
    */
                .gridview > tbody > tr:not(.gridview-header):not(.pgr):not(.ftr) > td {
                    display: block !important;
                    position: relative !important;
                    width: 100% !important;
                    min-width: 0 !important;
                    max-width: none !important;
                    height: auto !important;
                    /* 115px reservados para la etiqueta */
                    padding: 9px 2px 9px 130px !important;
                    margin: 0 !important;
                    box-sizing: border-box;
                    color: var(--kr-text);
                    font-size: 12px;
                    line-height: 18px;
                    text-align: left !important;
                    white-space: normal !important;
                    overflow-wrap: anywhere;
                    background: transparent !important;
                    border: 0 !important;
                    border-bottom: 1px solid var(--kr-border) !important;
                    min-height: 36px;
                }

                    /* Etiqueta generada con data-label */
                    .gridview > tbody > tr:not(.gridview-header):not(.pgr):not(.ftr) > td::before {
                        content: attr(data-label);
                        position: absolute;
                        left: 2px;
                        top: 9px;
                        width: 120px;
                        color: var(--kr-text-heading);
                        font-size: 11px;
                        font-weight: 700;
                        line-height: 18px;
                        text-align: left;
                        text-transform: capitalize;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    /* Cada Label ASP.NET genera un SPAN.
       Lo ponemos en una línea independiente */
                    .gridview > tbody > tr:not(.gridview-header):not(.pgr):not(.ftr) > td > span {
                        display: block !important;
                        width: 100% !important;
                        max-width: 100% !important;
                        margin: 0 !important;
                        padding: 0 !important;
                        white-space: normal !important;
                        overflow-wrap: anywhere;
                    }

                    /* Todos los elementos directos del TD van en la columna de valores */
                    .gridview > tbody > tr:not(.gridview-header):not(.pgr):not(.ftr) > td > * {
                        grid-column: 2;
                        min-width: 0;
                        max-width: 100%;
                    }

                    /* Los BR ya no son necesarios: Grid se encarga de separar las líneas */
                    .gridview > tbody > tr:not(.gridview-header):not(.pgr):not(.ftr) > td > br {
                        display: none !important;
                    }

                    .gridview > tbody > tr:not(.gridview-header):not(.pgr):not(.ftr) > td:last-child {
                        border-bottom: 0 !important;
                    }

                /* Evitar colores hover propios de escritorio */
                .gridview > tbody > tr:not(.gridview-header):not(.pgr):not(.ftr):hover {
                    background: var(--kr-surface) !important;
                }

                .gridview > tbody > tr:not(.gridview-header):not(.pgr):not(.ftr) > td:hover {
                    background: transparent !important;
                }

                /* Enlaces y botones */
                .gridview > tbody > tr:not(.gridview-header):not(.pgr):not(.ftr) > td a {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    min-height: 30px;
                    font-size: 12px;
                    box-sizing: border-box;
                }

        .gridview input,
        .gridview select,
        .gridview textarea {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }

        /* =========================
       PAGINADOR
       ========================= */

        .gridview > tbody > tr.pgr {
            display: block !important;
            width: 100% !important;
            height: auto !important;
            margin: 6px 0 12px;
            padding: 8px;
            box-sizing: border-box;
            background: var(--kr-surface) !important;
            border: 1px solid var(--kr-border-card);
            border-radius: 6px;
        }

            .gridview > tbody > tr.pgr > td {
                display: block !important;
                width: 100% !important;
                padding: 0 !important;
                border: 0 !important;
                text-align: center;
            }

        .gridview .pgr table {
            width: auto !important;
            margin: 0 auto !important;
        }

        .gridview .pgr td {
            display: table-cell !important;
            width: auto !important;
            padding: 5px 9px !important;
            border: 0 !important;
        }

        .gridview .pgr a,
        .gridview .pgr span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 30px;
            min-height: 30px;
            border-radius: 4px;
        }

        .gridview .pgr span {
            color: var(--kr-surface) !important;
            background: var(--kr-primary);
        }

        /* =========================
       FOOTER
       ========================= */

        .gridview > tbody > tr.ftr {
            display: block !important;
            width: 100% !important;
            height: auto !important;
            margin-bottom: 10px;
            padding: 8px 12px;
            box-sizing: border-box;
            background: var(--kr-gray-200) !important;
            border: 1px solid var(--kr-border-table);
            border-radius: 6px;
        }

            .gridview > tbody > tr.ftr > td {
                display: block !important;
                width: 100% !important;
                padding: 5px !important;
                box-sizing: border-box;
                border: 0 !important;
            }
}


@media print {

    .gridview {
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }

        .gridview tr {
            height: auto;
        }
        .gridview > tbody > tr,
        .gridview > thead > tr {
            height: auto !important;
        }

        .gridview th, .gridview td {
            border: 1px solid #B7BEC6 !important;
        }
        .gridview > thead > tr > th {
            height: auto !important;
        }
        .gridview th {
            position: static !important;
            top: auto !important;
            background: #F5F7F9 !important;
            color: #34404C !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

        .gridview th,
        .gridview td {
            box-shadow: none !important;
            outline: none !important;
        }
}


/* =========================================================
   GRIDVIEW PARA REPORTES / PDF
   Líneas horizontales y verticales completas
   ========================================================= */

.gridview-pdf {
    width: 100%;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background-color: #FFFFFF;
    color: #333333;
    font-size: 10px;
    border: 1px solid #B8B8B8;
}

    /* CABECERA */
    .gridview-pdf th {
        background-color: #F1F3F5;
        color: #30363B;
        font-weight: 600;
        text-align: left;
        vertical-align: middle;
        padding: 5px 6px;
        border: 1px solid #AEB4BA !important;
        /* Muy importante para PDF */
        position: static !important;
    }

    /* CELDAS */
    .gridview-pdf td {
        color: #333333;
        background-color: #FFFFFF;
        padding: 4px 6px;
        vertical-align: middle;
        border: 1px solid #C5C9CD !important;
    }

    /* FILAS */
    .gridview-pdf tr {
        page-break-inside: avoid;
    }

        /* FOOTER */
        .gridview-pdf .ftr,
        .gridview-pdf tr.ftr td {
            background-color: #F1F3F5 !important;
            color: #222222 !important;
            font-weight: 600;
            border: 1px solid #AEB4BA !important;
        }

    /* LINKS */
    .gridview-pdf a {
        color: #222222 !important;
        text-decoration: none !important;
    }

    /* Evitar que los estilos normales de selección interfieran */
    .gridview-pdf .GridViewSelectedRowStyle,
    .gridview-pdf .GridViewSelectedRowStyle td {
        background-color: #FFFFFF !important;
        color: #333333 !important;
    }

/* Impresión / PDF */
@media print {

    .gridview-pdf {
        width: 100%;
        border-collapse: collapse !important;
    }

        .gridview-pdf th,
        .gridview-pdf td {
            border: 1px solid #AEB4BA !important;
        }

        .gridview-pdf thead {
            display: table-header-group;
        }

        .gridview-pdf tfoot {
            display: table-footer-group;
        }

        .gridview-pdf tr {
            page-break-inside: avoid;
        }
}



.acciones-grid {
    display: flex;
    gap: 10px;
}

    .acciones-grid a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--kr-primary) !important;
        text-decoration: none !important;
    }

.btn-aprobar {
}

.btn-rechazar {
}

/* =========================================================
   KRONHOS - ACCIONES GRIDVIEW
   ========================================================= */

.grid-actions {
    display: grid !important;
    /* Una columna por cada acción renderizada */
    grid-auto-flow: column;
    grid-auto-columns: 34px;
    align-items: center !important;
    /*
     * Distribuye las acciones dentro de toda la celda.
     * Con 2: una al inicio y otra al final.
     * Con 3+: se distribuyen uniformemente.
     */
    justify-content: space-between !important;
    width: 100% !important;
    min-width: max-content;
    gap: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}


    /* =========================================================
   ACCIÓN
   ========================================================= */

    .grid-actions > a,
    .grid-actions > input,
    .grid-actions > button {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }


        /* =========================================================
   MATERIAL SYMBOLS / MATERIAL ICONS
   ========================================================= */

        .grid-actions > a > .material-symbols-outlined,
        .grid-actions > a > .material-icons {
            width: auto !important;
            min-width: 0 !important;
            max-width: none !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin: 0 !important;
            padding: 0 !important;
            line-height: 1 !important;
        }


    /* =========================================================
   IMÁGENES / SVG
   ========================================================= */

    .grid-actions img,
    .grid-actions svg {
        width: 20px !important;
        height: 20px !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }


/* =========================================================
   FILA SELECCIONADA / EDICIÓN
   Guardar + Cancelar juntos y centrados
   ========================================================= */

.GridViewSelectedRowStyle .grid-actions {
    display: grid !important;
    /*
     * En edición no queremos space-between porque separa
     * Guardar y Cancelar hacia los extremos.
     */
    grid-template-columns: repeat(2, 34px) !important;
    grid-auto-columns: 34px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 68px !important;
    gap: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}


    /* =========================================================
   SI EN LA FILA DE EDICIÓN EXISTE ALGÚN CONTROL OCULTO
   NO DEBE RESERVAR ESPACIO
   ========================================================= */

    .GridViewSelectedRowStyle .grid-actions > [style*="display: none"],
    .GridViewSelectedRowStyle .grid-actions > .hidden {
        display: none !important;
    }








.gridview input.indicador-checkbox {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0;
    background-color: var(--kr-checkbox-off);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px 9px;
    /* Raya blanca */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    border: 0 !important;
    border-radius: 50%;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: default;
    vertical-align: middle;
    box-sizing: border-box;
}

    .gridview input.indicador-checkbox:checked {
        background-color: var(--kr-success);
        /* Visto blanco */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5 9.5 3.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .gridview input.indicador-checkbox:disabled {
        opacity: 1 !important;
        filter: none !important;
    }




.gridviewF {
    background-color: var(--kr-surface);
    font-size: 11px;
    border: 1px solid var(--kr-border-table);
    margin-right: 2px;
    width: 80%;
    margin-bottom: 0;
}

    .gridviewF th {
        background: var(--kr-gray-200);
        padding: 3px;
        color: var(--kr-text);
        font-weight: lighter;
        border: 1px solid var(--kr-border-table);
    }

        .gridviewF th a {
            color: var(--kr-text);
            text-decoration: none;
            text-align: left;
            text-transform: uppercase !important;
        }

            .gridviewF th a:hover {
                color: var(--kr-text);
                text-decoration: underline;
            }

    .gridviewF td {
        color: var(--kr-text);
        padding-top: 2px;
        padding-left: 2px;
        padding-right: 2px;
        border: 1px solid var(--kr-border-table);
    }

        .gridviewF td:hover {
            background: var(--kr-warning);
        }

    .gridviewF tr:hover {
        background: var(--kr-hover);
        z-index: 100;
    }

    .gridviewF td a {
        color: var(--kr-link-green);
        text-decoration: none;
        text-align: left;
        text-transform: uppercase !important;
    }

        .gridviewF td a:hover {
            text-decoration: underline;
        }

    .gridviewF .ftr {
        color: var(--kr-text-strong) !important;
        text-decoration: none;
        background: var(--kr-gray-200);
    }

        .gridviewF .ftr span {
            color: var(--kr-text-strong) !important;
            font-weight: bold;
        }

    .gridviewF .pgr {
        background-color: var(--kr-surface);
    }

        .gridviewF .pgr table {
            margin: 3px 0;
        }

        .gridviewF .pgr td {
            border-width: 0;
            padding: 0 6px;
            border-left: solid 1px var(--kr-gray-600);
            font-weight: bold;
            line-height: 12px;
        }

        .gridviewF .pgr a {
            color: var(--kr-gray-600);
            text-decoration: underline;
        }

            .gridviewF .pgr a:hover {
                color: var(--kr-overlay);
                text-decoration: underline;
            }

            .gridviewF .pgr a:link {
                text-decoration: underline;
            }

    .gridviewF tr td a {
        color: var(--kr-primary);
        text-decoration: none;
        font-size: 12px;
        background-color: transparent;
        border: solid 1px transparent;
        padding: 0;
        margin: 0;
        z-index: 100;
        text-transform: uppercase;
    }

        .gridviewF tr td a:hover {
            color: var(--kr-primary);
            text-decoration: underline;
            background-color: transparent;
            border: solid 1px transparent;
            padding: 0;
            margin: 0;
            z-index: 100;
        }



.GVrowError {
    background-color: var(--kr-danger-light) !important;
}

.GVrowPromos {
    background-color: var(--kr-danger-medium) !important;
}

.GVrowMarcado {
    background-color: var(--kr-success-soft) !important;
}

.GVrowSelected {
    background-color: var(--kr-hover) !important;
}

.Color_celeste {
    background-color: var(--kr-info-soft) !important;
}

.Color_salmon {
    background-color: var(--kr-accent-orange) !important;
}

.Color_rojo_anulado {
    background-color: var(--kr-danger-bright) !important;
}

.Morado_claro_pedidos {
    background-color: var(--kr-accent-purple) !important;
}

.lnkGen {
    color: var(--kr-link-dark);
    text-decoration: none;
}

    .lnkGen:hover {
        text-decoration: underline;
    }

.lnkGenSmall {
    color: var(--kr-link-green);
    text-decoration: none;
    font-size: 10px;
    padding-left: 10px;
}

    .lnkGenSmall:hover {
        text-decoration: underline;
    }

.lnkNormal {
    color: var(--kr-primary-deep);
    text-decoration: none;
    font-size: 16px;
    text-transform: none;
    cursor: pointer;
}

    .lnkNormal:hover {
        text-decoration: underline;
    }

.panelMaxH {
    max-height: 300px;
    overflow: auto;
    overflow-x: none;
}

.GVrowVacacionAsignada {
    background-color: var(--kr-info-cyan) !important;
}

.GVrowVacacionSuspendida {
    background-color: var(--kr-warning-soft) !important;
}

.GVrowVacacionFinalizada {
    background-color: var(--kr-success-neon) !important;
}

.minW {
    min-width: 250px !important;
}

.GVFondoGray {
    background-color: var(--kr-gray-200) !important;
}


.txt_der {
    color: var(--kr-text-strong);
    background-color: var(--kr-surface);
    height: 30px;
    width: 98%;
    border: 1px solid var(--kr-border-control);
    resize: none;
    text-transform: uppercase;
    text-align: right !important;
    border-radius: 3px;
}

    .txt_der:focus {
        background-color: var(--kr-hover);
        border: 1px solid var(--kr-border-medium);
    }

    .txt_der:hover {
        background-color: var(--kr-hover);
        border: 1px solid var(--kr-border-medium);
    }

.txt_derGV {
    color: var(--kr-text-strong);
    background-color: var(--kr-surface);
    height: 30px;
    min-width: 30px;
    width: 98%;
    border: 1px solid var(--kr-border-control);
    resize: none;
    text-transform: uppercase;
    text-align: right !important;
    border-radius: 3px;
}

    .txt_derGV:focus {
        background-color: var(--kr-hover);
        border: 1px solid var(--kr-border-medium);
    }

    .txt_derGV:hover {
        background-color: var(--kr-hover);
        border: 1px solid var(--kr-border-medium);
    }

.txt_derR {
    color: var(--kr-text-strong) !important;
    background-color: var(--kr-surface) !important;
    height: 30px;
    min-width: 80px;
    width: 98%;
    border: 1px solid var(--kr-border-control);
    border-right: 2px solid var(--kr-danger) !important;
    resize: none;
    text-transform: uppercase;
    text-align: right !important;
    border-radius: 3px;
}

    .txt_derR:focus {
        background-color: var(--kr-danger-soft) !important;
        border: 1px solid var(--kr-border-medium);
        border-right: 2px solid var(--kr-danger) !important;
    }

.txt_der:hover {
    background-color: var(--kr-danger-soft) !important;
    border: 1px solid var(--kr-border-medium);
    border-right: 2px solid var(--kr-danger) !important;
}

.txt_der2 {
    text-align: right !important;
    color: var(--kr-text-default);
    background-color: var(--kr-surface);
    border: 1px solid var(--kr-border-medium);
    font-size: 14px;
    margin-bottom: 2px;
    height: 30px;
    padding: 2px;
    text-transform: uppercase;
    border-radius: 3px;
}

    .txt_der2:focus {
        background-color: var(--kr-hover);
    }

    .txt_der2:hover {
        background-color: var(--kr-hover);
    }

.txt_to_lbl {
    border: 0 none var(--kr-surface);
    border-bottom: 1px dotted var(--kr-gray-500);
    margin: 0;
    text-align: right !important;
}

.buscadorb,
.buscadorb_der,
.buscadorb_izq {
    width: 100%;
    background-color: var(--kr-surface-alt);
    display: inline-block;
    justify-content: center; /* centra horizontalmente */
    align-items: center; /* centra verticalmente */

    text-align: center !important;
    vertical-align: middle;
    padding: 5px;
    text-transform: uppercase;
    border: 1px solid var(--kr-border);
    box-sizing: border-box;
}

.buscadorb_der {
    text-align: right !important;
}

.buscadorb_izq {
    text-align: left !important;
}

.buscador {
    width: 100%;
    background-color: var(--kr-surface-alt);
    text-align: center !important;
    display: block;
    vertical-align: middle;
    padding: 5px 0 5px 0;
    text-transform: uppercase;
    border: 1px solid var(--kr-border);
    border-top: 0;
}

.buscador_izq {
    width: 100%;
    background-color: var(--kr-surface-alt);
    text-align: left !important;
    display: block;
    vertical-align: middle;
    padding: 5px 0px 5px 0px;
    text-transform: uppercase;
    border: 1px solid var(--kr-border);
    border-top: 0;
}

.buscador_dere {
    background-color: var(--kr-surface-alt);
    text-align: right !important;
    display: block;
    vertical-align: middle;
    padding: 5px;
    text-transform: uppercase;
    border: 1px solid var(--kr-border);
    border-top: 0;
}

.buscador_txt {
    height: 30px;
    background-color: var(--kr-surface);
    border: 1px solid var(--kr-border-medium);
    font-size: 14px;
    text-transform: uppercase;
}

    .buscador_txt:focus {
        background-color: var(--kr-hover);
    }

    .buscador_txt:hover {
        background-color: var(--kr-hover);
    }


.buscador_wm {
    color: var(--kr-text-muted);
    border: 1px solid var(--kr-border-medium);
    text-transform: lowercase;
}

    .buscador_wm::first-letter {
    }



.ajax__combobox_textboxcontainer input {
    color: var(--kr-text-default);
    background-color: var(--kr-surface);
    border: 1px solid var(--kr-border-medium);
    font-size: 11px;
    margin-bottom: 2px;
    height: 17px;
    width: 95% !important;
    display: block;
}



.ajax__combobox_buttoncontainer button {
    border: 1px solid var(--kr-border-medium);
    margin-top: 1px;
    margin-left: 0px;
}

.ajax__combobox_itemlist li {
    padding: 5px 3px 5px 2px;
    white-space: nowrap;
    width: 100%;
}

.ajax__combobox_inputcontainer {
    border-spacing: 0;
    width: 99% !important;
}

    .ajax__combobox_inputcontainer td {
        padding: 0;
    }



.menu1 {
    height: 80px;
    width: 100%;
    background: var(--kr-text-strong);
    color: var(--kr-surface);
    text-align: center;
}

a img {
    border: none;
}

.ajax__html_editor_extender_popupDiv {
    display: none;
}

.ajax__html_editor_extender_texteditor {
    background-color: var(--kr-surface);
    text-transform: none !important;
    text-align: left !important;
}

.listbox {
    padding: 3px;
    border: 1px solid var(--kr-border-medium);
    text-transform: uppercase;
}

.txt_der_none {
    text-align: right !important;
    color: var(--kr-text-default);
    background-color: var(--kr-surface);
    border: none;
    font-size: 11px;
    margin-bottom: 2px;
    height: 20px;
    padding: 2px;
}

.txt_der:focus {
    background-color: var(--kr-hover);
    border: 1px solid var(--kr-border-medium);
}

.txt_der:hover {
    background-color: var(--kr-hover);
    border: 1px solid var(--kr-border-medium);
}

.minusculas {
    text-transform: lowercase;
    color: var(--kr-text-strong);
    background-color: var(--kr-surface);
    height: 30px;
    min-width: 30px;
    width: 98%;
    border: 1px solid var(--kr-border-control);
    resize: none;
    text-transform: uppercase;
    border-radius: 3px;
}

    .minusculas:focus {
        background-color: var(--kr-hover);
        border: 1px solid var(--kr-border-medium);
    }

    .minusculas:hover {
        background-color: var(--kr-hover);
        border: 1px solid var(--kr-border-medium);
    }

.minusculasc {
    text-transform: lowercase;
}

.tit_rel_azul {
    width: 100%;
    border-collapse: collapse;
    border: none;
    background-color: var(--kr-text-default);
    padding: 5px;
    display: block;
    color: var(--kr-surface);
    line-height: 18px;
}


.nfp100 {
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 2px 1px;
    clear: both;
}

.nfp100l {
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 2px 0px;
    clear: both;
    max-width: 1024px;
}

.nfp50 {
    width: 50%;
    box-sizing: border-box;
    display: inline-block;
}

.nfp50m {
    width: 50%;
    box-sizing: border-box;
    display: inline-block;
    padding: 0px 10px;
}

.nfp40 {
    width: 40%;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    display: inline-block;
    color: grey;
    padding: 2px;
    border-bottom: 1px dotted var(--kr-border-control);
    text-transform: lowercase;
    text-align: left;
}

.nfp40b {
    width: 40%;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    display: inline-block;
    color: grey;
    padding: 2px;
    text-transform: lowercase;
    text-align: left;
    height: 20px;
}


.nfp40::first-letter {
    text-transform: uppercase;
}

.nfp60 {
    width: 60%;
    box-sizing: border-box;
    display: inline-block;
    text-align: left;
}

.barraBusq {
    width: 99%;
    text-align: left;
    height: 30px;
    padding-top: 5px;
    background-color: var(--kr-border-control);
}

.redline {
    font-size: 9px;
    font-style: italic;
    color: var(--kr-danger);
    text-transform: lowercase;
}


.inferior_fixedN {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 2000;
    background-color: var(--kr-surface-alt);
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    grid-auto-columns: minmax(95px, 1fr);
    justify-items: stretch;
    align-items: stretch;
    gap: 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid var(--kr-border);
    scrollbar-width: thin;
}

.cab_pie,
.cab_det {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cab_pie {
    padding: 8px 10px 3px;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    color: var(--kr-text-soft);
    font-size: 9px;
    font-weight: 600;
}

.cab_det {
    padding: 3px 10px 8px;
    border-top: 0;
    color: var(--kr-text-strong);
    font-size: 13px;
    font-weight: 600;
}

    .cab_pie input,
    .cab_pie select,
    .cab_pie a,
    .cab_det input,
    .cab_det select {
        max-width: 100%;
        box-sizing: border-box;
    }


@media screen and (max-width: 769px) {
    .inferior_fixedN {
        grid-auto-columns: minmax(85px, 110px);
        justify-content: start;
        padding: 6px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* =========================================
   VALIDADORES KRONHOS
   ========================================= */


.k-control-invalid {
    border: 2px solid var(--kr-danger) !important;
    background-color: var(--kr-danger-soft) !important;
}

.k-validator {
    margin-top: 3px;
    color: var(--kr-danger);
    font-size: 10px;
    line-height: 14px;
    display: none !important;
}

/*botones de guardar*/
.btn-guardar-global {
    background: var(--kr-ui-blue) !important;
    color: var(--kr-surface) !important;
    border: 1px solid var(--kr-ui-blue) !important;
    border-radius: 6px;
    padding: 7px 14px !important;
    font-family: inherit;
    font-weight: 600;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease, box-shadow .18s ease;
}

    .btn-guardar-global:hover {
        background: var(--kr-primary-deep) !important;
        border-color: var(--kr-primary-deep) !important;
        color: var(--kr-surface) !important;
    }

/* ============================================================
   AJUSTES FINALES DE TEMA
   ============================================================ */

body,
#contenido {
    background-color: var(--kr-page-bg) !important;
}

.panel_show,
.tabla,
.tabla600,
.tabla800,
.tabla1024,
.tabla98p,
.div_tablaG,
.tbl_cuerpo_4 {
    background-color: var(--kr-surface) !important;
    color: var(--kr-text);
}

.botones_principales,
.botones_derecha_iframe {
    background-color: var(--kr-surface-alt) !important;
    border-color: var(--kr-border) !important;
}

.gridview {
    background-color: var(--kr-grid-bg, var(--kr-surface)) !important;
    border-color: var(--kr-border) !important;
}

    .gridview th {
        background: var(--kr-surface-alt) !important;
        color: var(--kr-text-heading) !important;
    }


    .gridview > tbody > tr:not(.pgr):not(.ftr):hover > td {
        background-color: var(--kr-hover) !important;
    }

    .gridview > tbody > tr:not(.pgr):not(.ftr) > td:hover {
        background-color: var(--kr-hover-strong) !important;
    }

.GridViewSelectedRowStyle,
.GridViewSelectedRowStyle > td {
    background-color: var(--kr-selected-bg) !important;
    color: var(--kr-selected-text) !important;
}

    .GridViewSelectedRowStyle > td:first-child {
        box-shadow: inset 3px 0 0 var(--kr-selected-accent);
    }

/* La celda de acciones conserva table-cell en desktop.
   NO convertir .grid-actions en display:flex si está aplicada al TD. */
.grid-actions {
    white-space: nowrap !important;
    text-align: center;
}

    .grid-actions > a,
    .grid-actions > input,
    .grid-actions > button,
    .grid-actions > span {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
    }


/* Inputs principales */
.textbox_gen,
.textbox_genGV,
.textbox_gen2,
.newTextBox,
.newTextBoxG,
.newDropDown,
.newDropDownG,
.DropDown {
    background-color: var(--kr-input-bg);
    color: var(--kr-input-text);
    border-color: var(--kr-border-control);
}

    .textbox_gen:hover,
    .textbox_gen:focus,
    .textbox_genGV:hover,
    .textbox_genGV:focus,
    .DropDown:hover {
        background-color: var(--kr-hover) !important;
    }

/* Variante con alerta lateral: conserva su borde derecho rojo. */
.textbox_genR {
    background-color: var(--kr-input-bg);
    color: var(--kr-input-text);
}

    .textbox_genR:hover,
    .textbox_genR:focus {
        background-color: var(--kr-danger-soft) !important;
        border-right-color: var(--kr-danger) !important;
    }


/* Tema oscuro: evita fondos claros residuales en tarjetas móviles */
@media screen and (max-width: 769px) {
    html[data-theme="dark"] .gridview > tbody >
    tr:not(.gridview-header):not(.pgr):not(.ftr) {
        background: var(--kr-surface) !important;
        border-color: var(--kr-border-card) !important;
        box-shadow: 0 2px 7px var(--kr-shadow-color) !important;
    }

        html[data-theme="dark"] .gridview > tbody >
        tr:not(.gridview-header):not(.pgr):not(.ftr) > td {
            background: transparent !important;
            color: var(--kr-text) !important;
            border-bottom-color: var(--kr-border) !important;
        }

            html[data-theme="dark"] .gridview > tbody >
            tr:not(.gridview-header):not(.pgr):not(.ftr) > td::before {
                color: var(--kr-primary-strong) !important;
            }
}


/* Impresión: siempre clara */
@media print {
    :root,
    html[data-theme="dark"] {
        --kr-page-bg: #FFFFFF;
        --kr-surface: #FFFFFF;
        --kr-surface-alt: #F5F7F9;
        --kr-text: #333333;
        --kr-text-default: #333333;
        --kr-text-strong: #000000;
        --kr-text-heading: #222222;
        --kr-text-muted: #555555;
        --kr-border: #D5D5D5;
        --kr-border-control: #D5D5D5;
    }
}



/*ALERT*/
.kr-alert-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.38);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

    .kr-alert-overlay.visible {
        opacity: 1;
        visibility: visible;
    }

.kr-alert {
    width: min(90vw, 420px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px;
    background: #fff;
    border: 1px solid #DFE4E8;
    border-radius: 0px;
    box-shadow: 0 20px 50px rgba(0,0,0,.20);
    transform: translateY(12px) scale(.97);
    opacity: 0;
    transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}

.kr-alert-overlay.visible .kr-alert {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.kr-alert-contenido {
    width: 100%;
    min-width: 0;
}

.kr-alert-titulo {
    margin-bottom: 8px;
    color: #34404C;
    font-size: 14px;
    font-weight: 700;
    text-align: start;
}

.kr-alert-mensaje {
    width: 100%;
    color: #5F6B76;
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    text-transform: none;
}

.kr-alert-boton {
    align-self: flex-end;
    width: auto !important;
    min-width: 100px;
    min-height: 36px;
    padding: 8px 18px;
    border: 0;
    border-radius: 5px;
    background-color: #0876A5;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .25s ease;
}

    .kr-alert-boton:hover {
        background-color: #05638B;
    }

@media screen and (max-width: 769px) {

    .gridview tr.ftr {
        display: flex !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        justify-content: flex-end;
        align-items: stretch;
        flex-wrap: wrap;
        margin: 0 !important;
        padding: 0 !important;
        background: #F5F7F9;
        border: 1px solid #DFE4E8;
        border-radius: 0 0 6px 6px;
        box-sizing: border-box;
    }

        /* Oculta automáticamente los td con &nbsp; */
        .gridview tr.ftr > td.ftr-celda-vacia {
            display: none !important;
        }

        /* Muestra las celdas que contienen valores o controles */
        .gridview tr.ftr > td.ftr-celda-visible {
            display: flex !important;
            width: auto !important;
            min-width: 90px;
            min-height: 0 !important;
            height: auto !important;
            justify-content: flex-end;
            align-items: center;
            margin: 0 !important;
            padding: 9px 12px !important;
            box-sizing: border-box;
            color: #263746;
            font-size: 12px;
            font-weight: 700;
            text-align: right !important;
            border: 0 !important;
        }

        .gridview tr.ftr > td::before {
            display: none !important;
            content: none !important;
        }
}


/* =====================================================
   BADGES GLOBALES KRONHOS
   ===================================================== */

.kr-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 22px;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
}

/* Estados */

.kr-badge--success {
    color: #176B4D;
    background-color: #EAF7F1;
    border-color: #B9E2D0;
}

.kr-badge--danger {
    color: #B42332;
    background-color: #FFF1F2;
    border-color: #F2C2C7;
}

.kr-badge--warning {
    color: #865500;
    background-color: #FFF6DD;
    border-color: #EBD49B;
}

.kr-badge--info {
    color: #175D91;
    background-color: #EAF3FC;
    border-color: #BCD9F2;
}

.kr-badge--neutral {
    color: #526170;
    background-color: #F2F4F6;
    border-color: #D7DDE2;
}

/* ============================================================
   REFINAMIENTOS DARK SEGUROS
   Reglas acotadas para no alterar geometría ni clases heredadas.
   ============================================================ */

.boton,
.boton_hyp,
.titulo,
.titulo_login,
.contenido_t,
.linksbtnRed,
.error,
.btn-guardar-global,
.gridview .pgr span {
    color: var(--kr-text-inverse) !important;
}

.kr-alert {
    background: var(--kr-surface);
    border-color: var(--kr-border);
    box-shadow: 0 20px 50px var(--kr-shadow-color);
}

.kr-alert-titulo {
    color: var(--kr-text-heading);
}

.kr-alert-mensaje {
    color: var(--kr-text-muted);
}

.kr-alert-boton {
    background-color: var(--kr-ui-blue);
    color: var(--kr-text-inverse);
}

    .kr-alert-boton:hover {
        background-color: var(--kr-primary-deep);
    }

@media screen and (max-width: 769px) {
    .gridview tr.ftr {
        background: var(--kr-surface-alt);
        border-color: var(--kr-border);
    }

        .gridview tr.ftr > td.ftr-celda-visible {
            color: var(--kr-text-strong);
        }
}

html[data-theme="dark"] .kr-badge--success {
    color: #8AD7AE;
    background-color: #18352A;
    border-color: #2F6B51;
}

html[data-theme="dark"] .kr-badge--danger {
    color: #FF9CA5;
    background-color: #3E2328;
    border-color: #754049;
}

html[data-theme="dark"] .kr-badge--warning {
    color: #F0CF72;
    background-color: #3A311A;
    border-color: #746128;
}

html[data-theme="dark"] .kr-badge--info {
    color: #8BC8F2;
    background-color: #183247;
    border-color: #315F80;
}

html[data-theme="dark"] .kr-badge--neutral {
    color: #B6C1CB;
    background-color: #252E37;
    border-color: #46525E;
}



/* ============================================================
   FIX DEFINITIVO HEADER STICKY GRIDVIEW
   Compensa el borde superior de 1px del GridView.
   Debe permanecer al final de General.css
   ============================================================ */

.gridview > thead > tr > th {
    position: sticky !important;
    top: -1px !important;
    z-index: 999 !important;
    background-color: var(--kr-surface-alt) !important;
}




.style1 {
    width: 100%;
}

.cargando {
    position: fixed;
    bottom: 10px;
    left: 10px;
    padding: 20px 20px;
    background-color: #143f60;
    color: White;
    width: 250px;
    border: solid 1px #143f60;
    z-index: 8000;
}

.fondo_texto_error {
    background-color: Black;
    opacity: 0.8;
    filter: alpha(opacity=80); 
}

.boton_cerrar_error {

    font-size: 12px;
    padding: 10px 5px;
    border: 1px solid #c6c6c6;
    text-align: center;
    display: block;
    color: #444444;
    background-color: white;
    text-decoration: none;
    text-transform: capitalize !Important;
    margin-right: 5px;
}

    .boton_cerrar_error:hover {
        background-color: #d7ebf9;
        color: #444444 !important;
    }

    .boton_cerrar_error:active {
        -webkit-box-shadow: 0px 0px 3px 1px rgba(136,170,225,1);
        -moz-box-shadow: 0px 0px 3px 1px rgba(136,170,225,1);
        box-shadow: 0px 0px 3px 1px rgba(136,170,225,1);
    }



.modalBackground {
    background-color: white;
    filter: alpha(opacity=80);
    opacity: 0.80;
    z-index: 999999 !important;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.modalProcess {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; 
}

.modalPop {
    width: 100%;
    max-width: 450px;
    min-height: 300px !important;
    height: auto;
    max-height: calc(100vh - 40px);
    padding: 30px;
    background: white;
    border: 1px solid #DFE4E8;
    box-sizing: border-box;
    overflow-y: auto;
}


#GlobalpnlPopup.modalBackground {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10006 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#GlobalpnlPopup .modalProcess {
    position: static !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex1, .flex2, .flex3,
.flex4, .flex5, .flex6 {
    padding: 2px 5px;
}

.flex {
    display: flex;
}

.flex1 {
    flex: 1;
}

.flex2 {
    flex: 2;
}

.flex3 {
    flex: 3;
}

.flex4 {
    flex: 4;
}

.flex5 {
    flex: 5;
}

.flex6 {
    flex: 6;
}

.gridG {
    display: grid;
    grid-template-columns: repeat(150px auto);
    gap: 1px;
    padding: 5px;
}

    .gridG > div {
        padding: 5px;
        align-self: center;
    }

.gd {
    grid-column-start: 2;
    grid-column-end: 7;
}

.gd4a {
    grid-column-start: 2;
    grid-column-end: 4;
}

.gd4b {
    grid-column-start: 5;
    grid-column-end: 7;
}

.gd2a {
    grid-column-start: 1;
    grid-column-end: 3;
}

.gb2b {
    grid-column-start: 4;
    grid-column-end: 7;
}

.cabt {
    border-bottom: 2px dotted #aaa;
    text-align: left;
}

    .cabt span {
        display: inline-block;
        position: relative;
        background: white;
        bottom: -2px;
        height: 100%;
    }

.flextable {
    display: flex;
    flex-direction: column;
    margin: 5px 0;
}

.flextableC {
    column-gap: 8px;
    display: flex;
    flex-direction: row;
    margin: 5px 0;
    flex-wrap: wrap;
    min-width: 0;
    row-gap: 4px;
    width: 100%;
}

.flexrow {
    display: flex;
    flex-wrap: wrap;
}

.flexrowC {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
}

.flexcolumn {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 150px;
    row-gap: 4px;
}

.flexcolumnauto {
    flex: 1;
    min-width: 0;
}

.flexitem {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

.flexContenedor {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 40px;
    top: 90px;
    overflow: auto;
    background-color: white;
}

.flexContenedorCero {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 0;
    top: 62px;
    overflow: auto;
}

.flexcab {
    flex: 1.5px;
    min-width: 0;
    text-align: start;
    align-items: center;
    border-bottom: 1px dotted #ddd;
    overflow: hidden;
}

.flexcab3 {
    flex: 4.5px;
    text-align: start;
    word-wrap: break-word;
    align-items: center;
}

.flexcabT {
    flex: 3;
    text-align: start;
    word-wrap: break-word;
    align-items: center;
    border-bottom: 1px dotted transparent;
}

.flexcabclean {
    flex: 1.5px;
    text-align: start;
    word-wrap: break-word;
    align-items: center;
    border-bottom: 1px dotted transparent;
}

/* Texto dentro de cabeceras */
.flexcab > label,
.flexcab3 > label,
.flexcabT > label,
.flexcab > span,
.flexcab3 > span,
.flexcabT > span {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.flexcue {
    flex: 3;
    margin: 2px;
    height: 30px;
    display: flex;
    align-items: center;
    text-align: left;
    width: 100%;
    gap: 5px;
}


.flexcueauto {
    flex: 3 1 0;
    margin: 2px;
    height: auto;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    box-sizing: border-box;
    min-width: 0;
    text-align: left;
    min-height: 30px;
    gap: 5px;
}


    /* Si contiene checkbox, permitimos varias líneas */
    .flexcueauto:has(input[type="checkbox"]) {
        flex-wrap: wrap;
        column-gap: 0;
        row-gap: 5px;
    }


    /* Unidad checkbox + texto creada automáticamente */
    .flexcueauto .kr-checkbox-item {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        white-space: nowrap;
        /* espacio ENTRE opciones */
        margin-right: 16px;
    }


        /* Cuadrito + texto */
        .flexcueauto .kr-checkbox-item input[type="checkbox"] {
            margin: 0 4px 0 0 !important;
            flex: 0 0 auto;
        }

        .flexcueauto .kr-checkbox-item label {
            margin: 0 !important;
            padding: 0 !important;
            white-space: nowrap;
        }

/*
   Cuando flexcueauto contiene una tabla, el encabezado debe quedar arriba.
   Así la tabla usa todo el ancho de la flexcolumn y no solamente el espacio
   restante después de flexcab.
*/
.flexitem:has(> .flexcueauto > table) {
    align-items: stretch;
    flex-direction: column;
}

    .flexitem:has(> .flexcueauto > table) > .flexcab,
    .flexitem:has(> .flexcueauto > table) > .flexcab3,
    .flexitem:has(> .flexcueauto > table) > .flexcabT,
    .flexitem:has(> .flexcueauto > table) > .flexcabclean {
        box-sizing: border-box;
        flex: 0 0 auto;
        min-width: 0;
        width: 100%;
    }

    .flexitem:has(> .flexcueauto > table) > .flexcueauto {
        box-sizing: border-box;
        flex: 0 0 auto;
        margin-left: 0;
        margin-right: 0;
        min-width: 0;
        width: 100%;
    }

/* Alternativa para navegadores antiguos: agregar flexitem-gridfull al flexitem. */
.flexitem-gridfull {
    align-items: stretch;
    flex-direction: column;
}

    .flexitem-gridfull > .flexcab,
    .flexitem-gridfull > .flexcab3,
    .flexitem-gridfull > .flexcabT,
    .flexitem-gridfull > .flexcabclean,
    .flexitem-gridfull > .flexcueauto {
        box-sizing: border-box;
        flex: 0 0 auto;
        min-width: 0;
        width: 100%;
    }

.flexcue1 {
    flex: 3;
    margin: 2px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    text-align: left;
}

.flexcue3 {
    flex: 1;
    margin: 2px;
    height: 30px;
    display: inline-grid;
    align-items: center;
    text-align: left;
}

.flexcueT {
    flex: 1.5;
    margin: 2px;
    display: grid;
    align-items: center;
    text-align: right;
    border-bottom: 1px dotted #ddd;
}

    .flexcue > label,
    .flexcue1 > label,
    .flexcueT > label {
        font-size: 10px;
    }

.colorflex {
    background-color: #1f618d;
    color: white;
    padding: 5px 0;
}

.barraInferior {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px;
    text-align: right;
    background-color: #d5d5d5;
}

.barraInferiorfixed {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px;
    text-align: right;
    background-color: #d5d5d5;
}

.divscrollflex {
    position: relative;
    flex: 1;
    overflow: auto;
    min-height: 200px;
    margin-bottom: 20px;
}

.divscrollflexin {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px;
}

.flextableNL {
    display: flex;
    flex-direction: row;
    margin: 5px 0 0 0;
    flex-wrap: wrap;
    background-color: #f5f7f9;
    padding: 5px;
    border: 1px solid #dfe4e8;
}

.flexitemNL {
    align-items: center;
    width: 98%;
}

.flexcabNL {
    text-align: start;
    word-wrap: break-word;
    align-items: center;
}

    .flexcabNL > label {
        font-size: 8px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        min-width: 20px;
        text-transform: none;
        font-weight: bolder;
    }

.flexcueNL {
    align-items: center;
    text-align: left;
    padding: 1px 0;
    font-size: 10px !important;
}

.flexcueautoNL {
    height: auto;
    display: inline-flex;
    align-items: center;
    text-align: left;
    font-size: 10px !important;
}

.labelUp {
    text-align: left;
    font-size: 10px;
    margin-bottom: 2px;
    font-weight: 500;
    text-transform: capitalize;
}

.nowidth {
    min-width: 0;
}

@media screen and (max-width: 769px) {
    .flexcolumn {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
    }
}

html, body {
    height: 100%;
    border: 0;
    margin: 0;
}

.principal {
    position: fixed;
    top: 0;
    bottom: var(--kr-footer-height, 36px);
    left: 0;
    right: 0;
}

.menunV {
    position: fixed;
    top: 58px;
    left: 0;
    z-index: 1;
    bottom: var(--kr-footer-height, 36px);
    text-transform: capitalize;
    width: 160px;
}

.contenedorV {
    position: fixed;
    top: 58px;
    left: 160px;
    right: 0;
    bottom: var(--kr-footer-height, 36px);
    z-index: 0;
    border: 0;
}



.menunH {
    position: fixed;
    top: 58px;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 3px;
    z-index: 9000;
    background-color: #1f2a39;
    box-sizing: border-box;
}


/* Contenido principal */
.contenedorH {
    position: fixed;
    left: 0;
    right: 0;
    /* fallback; JS lo recalcula */
    top: 75px;
    bottom: var(--kr-footer-height, 36px);
    overflow: hidden;
    z-index: 1;
}

    .contenedorH > iframe,
    .contenedorV > iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        margin: 0;
        padding: 0;
    }



.menuN {
    padding: 0px !important;
}

.menuNH {
    background-color: #626567 !important;
    color: white;
    padding: 0px !important;
    border: 1px solid #626567;
}


.menuNsubitemstyle {
    background-color: #424949 !important;
    color: white;
    margin: 0 5px !important;
    padding-left: 10px;
}

.modalProcess {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* O el alto deseado */
}

.modalBackground {
    background-color: white;
    filter: alpha(opacity=80);
    opacity: 0.80;
    z-index: 999999 !important;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.menu-mobile-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: #1d2939;
}

    .menu-mobile-container > div {
        width: auto !important;
    }

    /* Botón hamburguesa */
    .menu-mobile-container .dxm-hamburger,
    .menu-mobile-container [class*="Hamburger"] {
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 7px !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18);
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

        .menu-mobile-container .dxm-hamburger:hover,
        .menu-mobile-container [class*="Hamburger"]:hover {
            background-color: rgba(0, 174, 239, 0.22) !important;
        }

        .menu-mobile-container .dxm-hamburger:active,
        .menu-mobile-container [class*="Hamburger"]:active {
            transform: scale(0.96);
            background-color: #00aeef !important;
        }



/* Kronhos ERP: flechas blancas */
.dxmLite.menu-erp .dxm-popOut img,
.menu-erp .dxm-popOut img {
    filter: brightness(0) invert(1) !important;
}

/* Kronhos Essentials: flechas negras */
.dxmLite.menu-ess .dxm-popOut img,
.menu-ess .dxm-popOut img {
    filter: brightness(0) saturate(100%) !important;
}

@media (max-width: 768px) {
    .menu-mobile-container {
        justify-content: flex-end;
        padding: 5px 10px;
    }

        .menu-mobile-container > div {
            width: auto !important;
            margin-left: auto !important;
        }
}








@media screen and (max-width: 768px) {


    .dxmLite.dxm-side-menu-mode .dxm-slide-panel,
    .dxmLite.dxm-side-menu-mode .dxm-slide-panel *,
    .dxmLite.dxm-side-menu-mode .dxm-bread-crumbs,
    .dxmLite.dxm-side-menu-mode .dxm-bread-crumbs * {
        box-sizing: border-box !important;
    }


        /* Mayor espacio táctil, sin cambiar colores */
        .dxmLite.dxm-side-menu-mode .dxm-slide-panel .dxm-item {
            box-sizing: border-box !important;
        }

            /* Hover: conserva el fondo normal */
            .dxmLite.dxm-side-menu-mode .dxm-slide-panel .dxm-hovered,
            .dxmLite.dxm-side-menu-mode .dxm-slide-panel .dxm-hovered .dxm-content,
            .dxmLite.dxm-side-menu-mode .dxm-slide-panel .dxm-item:hover,
            .dxmLite.dxm-side-menu-mode .dxm-slide-panel .dxm-item:hover .dxm-content {
                background-color: transparent !important;
                background-image: none !important;
            }

        /* Seleccionado: conserva el fondo normal */
        .dxmLite.dxm-side-menu-mode .dxm-slide-panel .dxm-selected,
        .dxmLite.dxm-side-menu-mode .dxm-slide-panel .dxm-selected .dxm-content {
            background-color: transparent !important;
            background-image: none !important;
        }

    .dxmLite.dxm-side-menu-mode .dxm-bread-crumbs {
        background-color: #1f2a39 !important;
        /* IMPORTANTE:
           no alterar dimensiones calculadas por DevExpress */
        padding: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 5 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

        .dxmLite.dxm-side-menu-mode .dxm-bread-crumbs * {
            pointer-events: auto !important;
            cursor: pointer !important;
        }

    .dxmLite.dxm-side-menu-mode
    .dxm-slide-panel
    .dxm-item
    .dxm-content {
        padding: 8px 12px !important;
    }
}

@media screen and (max-width: 768px) {
    .dxmLite.dxm-side-menu-mode .dxm-item {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        touch-action: manipulation;
    }
}

/* =========================================================
   KRONHOS - MODAL GLOBAL DE PANTALLAS HIJAS
   Vive en Kronhos.aspx y ocupa todo el viewport disponible.
   ========================================================= */

.kr-modal-global-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, .58) !important;
    opacity: 1 !important;
    z-index: 2147483000 !important;
}


/* =========================================================
   CONTENEDOR PRINCIPAL DEL MODAL
   ========================================================= */

.kr-modal-global {
    position: fixed !important;
    top: 65px !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 25px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #d7dee7;
    border-radius: 7px;
    box-sizing: border-box !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    z-index: 2147483001 !important;
}


/* =========================================================
   ÁREA DE CONTENIDO
   Reserva 48px inferiores para el footer.
   ========================================================= */

.kr-modal-global__body {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 48px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff;
}


/* =========================================================
   IFRAME PRINCIPAL
   ========================================================= */

.kr-modal-global__frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: block !important;
    background: #ffffff;
}


/* =========================================================
   IFRAME APILADO
   ========================================================= */

.kr-modal-global__frame--stack {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    z-index: 2;
}


/* =========================================================
   LOADING
   ========================================================= */

.kr-modal-global__loading {
    position: absolute !important;
    inset: 0 !important;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .88);
    z-index: 50;
    pointer-events: none;
}


    .kr-modal-global__loading.is-visible {
        display: flex !important;
    }


    .kr-modal-global__loading img {
        width: 42px;
        height: 42px;
        object-fit: contain;
    }


/* =========================================================
   FOOTER
   Siempre queda pegado abajo.
   ========================================================= */

.kr-modal-global__footer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px;
    box-sizing: border-box !important;
    background: #f5f7f9;
    border-top: 1px solid var(--kr-border-medium, #dfe4e8);
    z-index: 10;
}


/* =========================================================
   INDICADOR DE PROFUNDIDAD
   ========================================================= */

.kr-modal-global__depth {
    margin-right: auto;
    padding-left: 4px;
    color: var(--kr-text-muted, #667085);
    font: 500 11px/1 'Inter', sans-serif;
    user-select: none;
}


/* =========================================================
   BLOQUEAR SCROLL DEL SHELL
   ========================================================= */

body.kr-modal-open {
    overflow: hidden !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .kr-modal-global {
        top: 4px !important;
        left: 4px !important;
        right: 4px !important;
        bottom: 4px !important;
        border-radius: 6px;
    }


    .kr-modal-global__body {
        bottom: 44px !important;
    }


    .kr-modal-global__footer {
        height: 44px !important;
        min-height: 44px !important;
        padding: 5px 8px !important;
    }
}

.breadcrumb-kronhos {
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    min-height: 25px !important;
}


/* ITEMS */

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: #ccc;
    text-transform: capitalize;
}


/* FLECHAS */

.breadcrumb-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #6f8498;
    font-size: 18px !important;
    font-weight: 300;
    line-height: 1 !important;
    vertical-align: middle;
}


/* ÚLTIMA OPCIÓN */

.breadcrumb-active {
    color: #ffffff;
    font-weight: 500;
}



.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.loaderU {
    display: inline-block;
    position: relative;
    border: 4px solid var(--kr-loader-track);
    background-color: transparent;
}

.loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: var(--kr-loader-track);
}



.logo {
    height: 40px !important;
    max-height: 40px !important;
    overflow: hidden !important;
    white-space: nowrap;
}

.new_logo {
    float: left;
    height: 40px;
    display: flex;
    align-items: center;
    /* ancho adaptable */
    width: clamp(110px, 22vw, 220px);
    overflow: hidden;
    flex-shrink: 1;
}

    .new_logo img {
        max-width: 100%;
        height: 39px !important;
        width: auto !important;
        object-fit: contain;
        object-position: left center;
    }

.user_name {
    height: 40px !important;
    max-height: 40px !important;
    overflow: hidden !important;
    white-space: nowrap;
}

    .user_name > * {
        max-height: 40px;
    }






.men_up {
    cursor: pointer;
    float: right !important;
    padding: 10px;
    font-size: 18px;
    color: white;
}

    .men_up:hover {
        background-color: #3c516e;
    }

.men_up_img {
    cursor: pointer;
    padding-right: 5px;
    float: right !important;
    font-size: 18px;
    color: white;
    height: 28px;
    padding-top: 4px;
}

    .men_up_img:hover {
    }

.agenda {
    position: relative;
    float: right;
    text-align: center;
    color: white;
    font-size: 18px;
    padding: 10px 10px;
    margin-right: 10px;
}

    .agenda:hover {
        background-color: #3c516e;
    }

.agenda_txt_up {
    position: absolute;
    top: 3px;
    right: 3px;
    background-color: Red;
    display: block;
    text-decoration: none;
    font-size: 8px;
    padding: 2px;
    color: white;
}

.cabEmpresa {
    float: right;
    overflow: hidden;
    text-align: right;
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 20px;
}


#menu {
    font-size: 10px !important;
    background-color: black;
    width: 100%;
    text-align: left;
    z-index: 1;
    padding: 5px 0px;
    height: 40px;
    overflow: hidden;
}

#info_user {
    width: 125px;
    position: fixed;
    right: 5px;
    top: 38px;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
    display: none;
    z-index: 100001;
}

.linksbtnRed {
    background-color: #4aa45f;
    text-decoration: none;
    padding: 5px;
    text-align: center;
    color: White;
    display: block;
}

    .linksbtnRed:hover {
        background-color: #33596c;
        color: White;
    }

.felec_img {
    display: inline-block;
    float: left;
    font-size: 18px;
    color: #ddd;
    padding: 8px;
}

.felec_text {
    float: left;
    text-align: left;
    display: inline-block;
    font-size: 9px;
    padding-top: 9px;
    color: #ddd;
    text-transform: capitalize !important;
}

/* ================================
   BARRA INFERIOR KRONHOS
   ================================ */
:root {
    --kr-footer-height: 36px;
}

#usuario {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--kr-footer-height);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 8px;
    background-color: #1f2a39;
    z-index: 10000;
    overflow: hidden;
}

#menu_navigators {
    position: static;
    margin-left: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    max-width: 70%;
    font-size: 11px;
    color: white;
    overflow: hidden;
}

#lblUbicacionF {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

#lblUbicacion {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    color: white;
    text-decoration: none;
}

.nav_link {
}

    .nav_link:hover {
        text-decoration: underline;
    }

.icons_down_der {
    font-size: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
}

#menu_navigators > .icons_down_der:not(#lblUbicacionF) {
    flex: 0 0 auto;
}


.icons_down_der a {
    color: white;
    text-decoration: none;
}

.icons_down_der:hover {
    background-color: #3c516e;
}

.icons_down_der_text {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.icons_down_izq {
    font-size: 18px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
    cursor: pointer;
    color: white !important;
}


    .icons_down_izq a {
        color: white;
        text-decoration: none;
    }

    .icons_down_izq:hover {
        background-color: #3c516e;
    }



/* DevExpress ASPxMenu conserva su cálculo original */
.dxmLite,
.dxmLite *,
.dxmLite *::before,
.dxmLite *::after {
    box-sizing: content-box;
}

    .dxmLite td,
    .dxmLite div,
    .dxmLite span,
    .dxmLite a {
        box-sizing: content-box;
    }

.dxmLite {
    font-family: "Inter", sans-serif;
    font-size: 12px;
}

    .dxmLite,
    .dxmLite .dxm-popup,
    .dxmLite .dxm-subMenu,
    .dxmLite [class*="dxm-popup"] {
        z-index: 9500 !important;
    }

/*migrados*/


.menu_menu {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
}

.menu_menu1 {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    margin-right: 5px !important;
    min-width: 150px;
    display: block;
    border-left: 1px solid white !important;
}

.menu_menup {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    padding-top: 2px;
}



.cargandoK {
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
    background-color: white;
    z-index: 999999999;
    opacity: 1;
    filter: alpha(opacity=100);
}

.panel_shows {
    position: fixed;
    top: 10px !important;
    bottom: 10px;
    left: 10px;
    right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: blue;
    overflow: auto;
    overflow-x: hidden !important;
    border: 1px solid #ccc;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    z-index: -1000000;
}








.link_down {
    font-family: "Inter", sans-serif !important;
    display: block;
    text-align: center;
    border: 1px solid white;
    background-color: #104a7d;
    padding: 5px 15px;
    cursor: pointer;
    color: White;
}

    .link_down:hover {
        background-color: #1666b1;
    }

#VerMover {
    position: fixed;
    left: 30px;
    bottom: 40px;
    z-index: 50000;
    width: 150px;
    height: 400px;
    background-color: White;
    border: 1px solid #104a7d;
    padding: 5px;
    display: none;
    overflow: hidden;
}

#DvFavoritosIn {
    position: fixed;
    left: 150px;
    bottom: 40px;
    z-index: 50000;
    width: 150px;
    height: 400px;
    background-color: White;
    border: 1px solid #104a7d;
    padding: 5px;
    display: none;
    overflow: hidden;
}

#VerMover a {
    text-decoration: none;
    display: block;
    padding-bottom: 3px;
    color: Gray;
}

#DvFavoritosIn a {
    text-decoration: none;
    display: block;
    padding-bottom: 3px;
    color: Gray;
}

#VerMover a:hover {
    text-decoration: underline;
}

#DvFavoritosIn a:hover {
    text-decoration: underline;
}

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.pace-inactive {
    display: none;
}

.pace .pace-progress {
    background: #29d;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px;
}

.pace .pace-progress-inner {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #29d, 0 0 5px #29d;
    opacity: 1.0;
    -webkit-transform: rotate(3deg) translate(0px, -4px);
    -moz-transform: rotate(3deg) translate(0px, -4px);
    -ms-transform: rotate(3deg) translate(0px, -4px);
    -o-transform: rotate(3deg) translate(0px, -4px);
    transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
    display: block;
    position: fixed;
    z-index: 2000;
    top: 15px;
    right: 15px;
    width: 14px;
    height: 14px;
    border: solid 2px transparent;
    border-top-color: #29d;
    border-left-color: #29d;
    border-radius: 10px;
    -webkit-animation: pace-spinner 400ms linear infinite;
    -moz-animation: pace-spinner 400ms linear infinite;
    -ms-animation: pace-spinner 400ms linear infinite;
    -o-animation: pace-spinner 400ms linear infinite;
    animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes pace-spinner {
    0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes pace-spinner {
    0% {
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-ms-keyframes pace-spinner {
    0% {
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes pace-spinner {
    0% {
        transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.positionDiv {
    position: fixed;
    width: 750px;
    height: 450px;
    display: none;
}

.back {
    position: fixed;
    right: 25px;
    top: 80px;
    color: Gray;
    font-size: 16px;
    text-decoration: none;
}

    .back:hover {
        text-decoration: underline;
        color: Black;
    }


@media screen and (max-width: 600px) {
    #usuario {
        padding: 0 5px;
    }

    #menu_navigators {
        max-width: 65%;
    }

    .icons_down_der {
        padding: 0 4px;
        font-size: 16px;
    }

    .icons_down_der_text {
        font-size: 9px !important;
        text-transform: uppercase;
        letter-spacing: 0;
        overflow: hidden;
    }

    .icons_down_izq {
        font-size: 14px;
        padding: 0 5px;
    }

    #lblUbicacionF {
        min-width: 0;
    }

    .felec_text {
        display: none;
    }

    .cabEmpresa {
        display: none;
    }
}

@media screen and (max-width: 430px) {
    #menu_navigators {
        max-width: 60%;
    }
}

@media screen and (max-width: 790px) {
    .felec_text {
        display: none;
    }

    .cabEmpresa {
        float: right;
        overflow: hidden;
        text-align: right;
        padding-top: 5px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .agenda {
        position: relative;
        float: right;
        text-align: center;
        color: white;
        font-size: 18px;
        padding: 10px 2px;
        margin-right: 10px;
    }
}


.panel-modal-animado {
    transform-origin: center;
}

    .panel-modal-animado.modal-cerrando {
        animation: modalSalidaModerna 0.20s ease-in;
    }

@keyframes modalSalidaModerna {

    from {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: translateY(15px) scale(0.96);
        filter: blur(4px);
    }
}



/* ==========================================================
   SOPORTE - jQuery UI
   ========================================================== */

.kr-support-dialog {
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #b8c0c8;
    border-radius: 7px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .28);
}


    /* CABECERA */

    .kr-support-dialog .ui-dialog-titlebar {
        box-sizing: border-box;
        min-height: 38px;
        padding: 6px 42px 6px 12px;
        background: #f5f7f9;
        border: 0;
        border-bottom: 1px solid #dfe4e8;
        border-radius: 7px 7px 0 0;
    }


    /* TÍTULO */

    .kr-support-dialog .ui-dialog-title {
        font-family: Inter, sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: #34404c;
    }


    /* CONTENIDO */

    /*
 MUY IMPORTANTE:
 no definir height aquí.
 jQuery UI la calcula.
*/

    .kr-support-dialog .ui-dialog-content {
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box;
    }


    /* IFRAME */

    .kr-support-dialog #iframesupport {
        display: block;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }





.ui-dialog .ui-dialog-titlebar-close {
    position: absolute !important;
    top: 50% !important;
    right: 7px !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    overflow: hidden !important;
    font-size: 0 !important;
    color: transparent !important;
}

    .ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
        display: none !important;
    }

    .ui-dialog .ui-dialog-titlebar-close .ui-button-icon,
    .ui-dialog .ui-dialog-titlebar-close .ui-icon {
        position: static !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        transform: none !important;
        display: block !important;
    }

    .ui-dialog .ui-dialog-titlebar-close:hover {
        background: #e7eaed !important;
    }



.ui-dialog .ui-dialog-titlebar {
    position: relative;
    min-height: 36px;
    box-sizing: border-box;
    padding: 6px 42px 6px 12px;
    background: #f5f7f9;
    border: 0;
    border-bottom: 1px solid #dfe4e8;
}

.ui-dialog .ui-dialog-title {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #34404c;
}




.iframe-loading-container {
    position: relative;
    width: 100%;
    height: 100%;
}

    .iframe-loading-container iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }

.iframe-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    z-index: 10;
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #52606d;
}

.kr-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #dfe4e8;
    border-top-color: #32678b;
    border-radius: 50%;
    animation: krSpin .7s linear infinite;
}

@keyframes krSpin {
    to {
        transform: rotate(360deg);
    }
}


#dialog-support {
    position: relative;
    overflow: hidden !important;
}


.loading-support {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #52606d;
}


.loading-support-spinner {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: 3px solid #dfe4e8;
    border-top-color: #32678b;
    border-radius: 50%;
    animation: loadingSupportSpin .7s linear infinite;
}


@keyframes loadingSupportSpin {

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   DEVEXPRESS ASPxMenu
   Evitar que el wrapper transparente del popup bloquee
   el breadcrumb del SideMenu.
   ========================================================= */

[id^="ASPxMenu1_DXM"] {
    pointer-events: none !important;
}

    [id^="ASPxMenu1_DXM"] .dxm-popup,
    [id^="ASPxMenu1_DXM"] .dxm-popup * {
        pointer-events: auto !important;
    }

.dxm-bread-crumbs,
.dxm-bread-crumbs * {
    pointer-events: auto !important;
    cursor: pointer !important;
}


/* =========================================================
   KRONHOS - MENU DE USUARIO
   ========================================================= */

#user {
    cursor: pointer;
}

/* =========================================================
   KRONHOS - MENU USUARIO
   Sobrescribe el #info_user antiguo
   ========================================================= */

#info_user.kr-user-menu {
    display: block !important;
    position: fixed;
    top: 62px;
    right: 12px;
    width: 285px;
    padding: 0;
    background: var(--kr-surface, #FFFFFF);
    color: var(--kr-text, #263746);
    border: 1px solid var(--kr-border, #DFE4E8);
    border-radius: 10px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .08);
    z-index: 30000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity .16s ease, transform .18s cubic-bezier(.22, 1, .36, 1), visibility .16s;
}


    /* ABIERTO */
    #info_user.kr-user-menu.kr-user-menu-open {
        display: block !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }


/* FLECHA SUPERIOR */
.kr-user-menu-arrow {
    position: absolute;
    top: -7px;
    right: 66px !important;
    width: 13px;
    height: 13px;
    background: #1F2933;
    border-left: 1px solid #344250;
    border-top: 1px solid #344250;
    transform: rotate(45deg);
    z-index: 2;
}


/* HEADER */
.kr-user-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 16px 14px;
}


.kr-user-avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--kr-surface-alt, #F4F7F9);
}


    .kr-user-avatar img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }


.kr-user-data {
    min-width: 0;
    flex: 1;
}


.kr-user-name {
    color: var(--kr-text-heading, #263746);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.kr-user-company {
    margin-top: 3px;
    color: var(--kr-text-muted, #778492);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* SEPARADOR */
.kr-user-divider {
    height: 1px;
    background: var(--kr-border, #DFE4E8);
}


/* OPCIONES */
.kr-user-options {
    padding: 6px;
}


.kr-user-option {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 40px;
    padding: 0 11px;
    box-sizing: border-box;
    color: var(--kr-text, #34404C);
    text-decoration: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    transition: background-color .14s ease, color .14s ease;
}


    .kr-user-option .material-symbols-outlined {
        font-size: 19px;
        color: var(--kr-text-muted, #778492);
    }


@media (hover: hover) and (pointer: fine) {

    .kr-user-option:hover {
        background: var(--kr-surface-hover, #F2F5F7);
        color: var(--kr-primary, #32678B);
    }

        .kr-user-option:hover .material-symbols-outlined {
            color: var(--kr-primary, #32678B);
        }
}


/* CERRAR SESION */
.kr-user-logout {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 45px;
    padding: 6px 17px;
    box-sizing: border-box;
    color: var(--kr-danger, #D64545);
}


    .kr-user-logout .material-symbols-outlined {
        font-size: 20px;
    }


.kr-user-logout-link {
    color: inherit !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
}


.kr-user-logout:hover {
    background: rgba(214, 69, 69, .07);
}


html[data-theme="dark"] #info_user.kr-user-menu {
    background: #1F2933;
    color: #D7DEE7;
    border-color: #344250;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .35), 0 3px 10px rgba(0, 0, 0, .20);
}


html[data-theme="dark"] .kr-user-menu-arrow {
    background: #1F2933;
    border-color: #344250;
}


html[data-theme="dark"] .kr-user-name {
    color: #E8EDF2;
}


html[data-theme="dark"] .kr-user-company {
    color: #9BA8B5;
}


html[data-theme="dark"] .kr-user-divider {
    background: #344250;
}


html[data-theme="dark"] .kr-user-option {
    color: #D7DEE7;
}


    html[data-theme="dark"] .kr-user-option
    .material-symbols-outlined {
        color: #9BA8B5;
    }


@media (hover: hover) and (pointer: fine) {

    html[data-theme="dark"] .kr-user-option:hover {
        background: #293643;
        color: #FFFFFF;
    }

        html[data-theme="dark"] .kr-user-option:hover
        .material-symbols-outlined {
            color: #22C3E6;
        }
}


/* =========================================================
   DARK THEME OVERRIDES - SOLO COLORES
   Igualar barra superior e inferior y reforzar contraste.
   ========================================================= */
html[data-theme="dark"] .menunH,
html[data-theme="dark"] #usuario,
html[data-theme="dark"] .menu-mobile-container,
html[data-theme="dark"] .dxmLite.dxm-side-menu-mode .dxm-bread-crumbs {
    background-color: var(--kr-shell-bar-bg, #081A2E) !important;
    color: var(--kr-shell-bar-text, #F5F9FF) !important;
    border-color: var(--kr-shell-bar-border, rgba(123, 215, 255, .16)) !important;
}

html[data-theme="dark"] .menuNH {
    background-color: var(--kr-shell-bar-bg-alt, #0B223A) !important;
    color: var(--kr-shell-bar-text, #F5F9FF) !important;
    border-color: var(--kr-shell-bar-border, rgba(123, 215, 255, .16)) !important;
}

html[data-theme="dark"] .menuNsubitemstyle {
    background-color: var(--kr-shell-panel-bg, #0D2B47) !important;
    color: var(--kr-shell-bar-text, #F5F9FF) !important;
}

html[data-theme="dark"] #menu_navigators,
html[data-theme="dark"] #lblUbicacion,
html[data-theme="dark"] .icons_down_der,
html[data-theme="dark"] .icons_down_der a,
html[data-theme="dark"] .icons_down_izq,
html[data-theme="dark"] .icons_down_izq a,
html[data-theme="dark"] .felec_img,
html[data-theme="dark"] .felec_text {
    color: var(--kr-shell-bar-text, #F5F9FF) !important;
}

html[data-theme="dark"] .icons_down_der:hover,
html[data-theme="dark"] .icons_down_izq:hover {
    background-color: var(--kr-shell-bar-hover, #12395D) !important;
}

html[data-theme="dark"] .menu-mobile-container .dxm-hamburger,
html[data-theme="dark"] .menu-mobile-container [class*="Hamburger"] {
    border-color: rgba(123, 215, 255, 0.18) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .menu-mobile-container .dxm-hamburger:hover,
html[data-theme="dark"] .menu-mobile-container [class*="Hamburger"]:hover {
    background-color: rgba(41, 168, 255, 0.20) !important;
}

html[data-theme="dark"] .menu-mobile-container .dxm-hamburger:active,
html[data-theme="dark"] .menu-mobile-container [class*="Hamburger"]:active {
    background-color: var(--kr-primary, #29A8FF) !important;
}

html[data-theme="dark"] .modalBackground {
    background-color: rgba(3, 15, 28, 0.72) !important;
}
/* =========================================================
   KRONHOS - CONFIRM GLOBAL
   Archivo: KronhosConfirm.css
   ========================================================= */

.kr-confirm-backdrop {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, .52);
    z-index: 2147483600;
}

.kr-confirm-backdrop.is-visible {
    display: flex;
}

.kr-confirm-dialog {
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--kr-surface, #fff);
    color: var(--kr-text, #263746);
    border: 1px solid var(--kr-border-medium, #d7dee7);
    border-radius: 10px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .30);
    transform-origin: center;
}

.kr-confirm-backdrop.is-visible .kr-confirm-dialog {
    animation: krConfirmEntrada .22s cubic-bezier(.22, 1, .36, 1);
}

.kr-confirm-backdrop.is-closing .kr-confirm-dialog {
    animation: krConfirmSalida .16s ease-in forwards;
}

@keyframes krConfirmEntrada {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes krConfirmSalida {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }
}

.kr-confirm-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 10px;
}

.kr-confirm-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kr-primary-soft, #eef5fa);
    color: var(--kr-primary-strong, #32678b);
    font: 700 20px/1 Arial, sans-serif;
}

.kr-confirm-title {
    margin: 0;
    font: 600 15px/1.25 'Inter', sans-serif;
    color: var(--kr-text-strong, #1f2937);
    text-transform: none;
}

.kr-confirm-body {
    padding: 6px 18px 18px 62px;
    overflow: auto;
    font: 400 13px/1.5 'Inter', sans-serif;
    color: var(--kr-text, #445161);
    text-transform: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.kr-confirm-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 52px;
    padding: 8px 12px;
    box-sizing: border-box;
    background: var(--kr-surface-muted, #f5f7f9);
    border-top: 1px solid var(--kr-border-medium, #dfe4e8);
}

.kr-confirm-btn {
    min-width: 92px;
    min-height: 34px;
    border-radius: 6px;
    padding: 7px 14px;
    border: 1px solid var(--kr-border-medium, #cfd7df);
    font: 600 12px/1 'Inter', sans-serif;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.kr-confirm-btn:active {
    transform: translateY(1px);
}

.kr-confirm-btn-cancel {
    background: #fff;
    color: var(--kr-text, #34404c);
}

.kr-confirm-btn-cancel:hover {
    background: #f8fafc;
}

.kr-confirm-btn-ok {
    background: var(--kr-primary-strong, #32678b);
    border-color: var(--kr-primary-strong, #32678b);
    color: #fff;
}

.kr-confirm-btn-ok:hover {
    filter: brightness(.95);
}


@media (max-width: 520px) {
    .kr-confirm-backdrop {
        align-items: flex-end;
        padding: 8px;
    }

    .kr-confirm-dialog {
        width: 100%;
        border-radius: 10px 10px 8px 8px;
    }

    .kr-confirm-body {
        padding-left: 18px;
    }

    .kr-confirm-footer {
        flex-direction: column-reverse;
    }

    .kr-confirm-btn {
        width: 100%;
    }
}


/* ============================================================
   KRONHOS ERP - 10 THEMES DE CABECERA PARA REPORTES
   Compatible con el MISMO markup:

   <div id="divCabeceraReporte" runat="server" class="kr-report-header">
       <div class="kr-section kr-brand">...</div>
       <div class="kr-section kr-company-data">...</div>
       <div class="kr-section kr-report-data">...</div>
       <div class="kr-section kr-print-data">...</div>
   </div>

   Clases disponibles:
   kr-theme-01
   kr-theme-02
   kr-theme-03
   kr-theme-04
   kr-theme-05
   kr-theme-06
   kr-theme-07
   kr-theme-08
   kr-theme-09
   kr-theme-10

   Altura objetivo de impresión: 27mm
   ============================================================ */

:root {
    --kr-rpt-primary: #123B6D;
    --kr-rpt-primary-2: #32678B;
    --kr-rpt-primary-soft: #EAF1F7;
    --kr-rpt-accent: #C99716;
    --kr-rpt-text: #263746;
    --kr-rpt-text-strong: #172B3A;
    --kr-rpt-muted: #667085;
    --kr-rpt-border: #D9E0E6;
    --kr-rpt-border-dark: #AEB8C2;
    --kr-rpt-soft: #F4F7F9;
    --kr-rpt-bg: #FFFFFF;
}

/* ============================================================
   BASE COMÚN
   ============================================================ */

.kr-report-header {
    width: 100% !important;
    height: 105px !important;
    min-height: 105px !important;
    max-height: 105px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--kr-rpt-bg) !important;
    color: var(--kr-rpt-text) !important;
    font-family: Inter, Arial, Helvetica, sans-serif !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    text-align: left !important;
    page-break-inside: avoid !important;
}

    .kr-report-header *,
    .kr-report-header *::before,
    .kr-report-header *::after {
        box-sizing: border-box !important;
    }

    .kr-report-header > .kr-section {
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    /* ============================================================
   LOGO
   ============================================================ */

    .kr-report-header .kr-brand {
        min-width: 0 !important;
    }

    .kr-report-header .kr-company-logo {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        .kr-report-header .kr-company-logo img {
            display: block !important;
            width: auto !important;
            height: auto !important;
            max-width: 125px !important;
            max-height: 66px !important;
            object-fit: contain !important;
            margin: auto !important;
        }

    /* ============================================================
   EMPRESA
   ============================================================ */

    .kr-report-header .kr-company-name {
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 15px !important;
        font-weight: 700 !important;
        color: var(--kr-rpt-text-strong) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .kr-report-header .kr-company-commercial-name {
        margin: 0 !important;
        font-size: 9px !important;
        line-height: 12px !important;
        font-weight: 500 !important;
        color: #566573 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .kr-report-header .kr-company-ruc,
    .kr-report-header .kr-company-location,
    .kr-report-header .kr-company-phone {
        margin: 0 !important;
        font-size: 8px !important;
        line-height: 11px !important;
        font-weight: 400 !important;
        color: #34495E !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ============================================================
   REPORTE
   ============================================================ */

    .kr-report-header .kr-report-title {
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 14px !important;
        font-weight: 700 !important;
        color: var(--kr-rpt-text-strong) !important;
        text-transform: uppercase !important;
    }

    .kr-report-header .kr-report-period {
        margin: 0 !important;
        font-size: 8px !important;
        line-height: 11px !important;
        color: var(--kr-rpt-muted) !important;
    }

    /* ============================================================
   IMPRESIÓN
   ============================================================ */

    .kr-report-header .kr-meta-label {
        font-size: 8px !important;
        font-weight: 500 !important;
        color: #7B8794 !important;
        white-space: nowrap !important;
    }

    .kr-report-header .kr-print-user,
    .kr-report-header .kr-print-date,
    .kr-report-header .kr-page-number {
        font-size: 8px !important;
        font-weight: 600 !important;
        color: var(--kr-rpt-text) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .kr-report-header div,
    .kr-report-header span {
        text-transform: none;
    }

    .kr-report-header .kr-report-title {
        text-transform: uppercase !important;
    }


    /* ============================================================
   THEME 01
   Corporativo clásico:
   LOGO | EMPRESA | REPORTE | IMPRESIÓN
   ============================================================ */

    .kr-report-header.kr-theme-01 {
        display: grid !important;
        grid-template-columns: 145px minmax(230px, 1fr) minmax(190px, .85fr) 220px !important;
        grid-template-rows: 1fr !important;
        align-items: stretch !important;
        border-top: 3px solid var(--kr-rpt-primary) !important;
        border-bottom: 1px solid var(--kr-rpt-border-dark) !important;
    }

.kr-theme-01 > .kr-section {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 8px 14px !important;
}

    .kr-theme-01 > .kr-section + .kr-section {
        border-left: 1px solid var(--kr-rpt-border) !important;
    }

.kr-theme-01 .kr-brand {
    align-items: center !important;
    justify-content: center !important;
}

.kr-theme-01 .kr-company-data,
.kr-theme-01 .kr-report-data,
.kr-theme-01 .kr-print-data {
    gap: 3px !important;
}

.kr-theme-01 .kr-print-row {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 5px !important;
    align-items: center !important;
}


/* ============================================================
   THEME 02 - CORREGIDO
   Banda lateral azul + cabecera profesional compacta
   Compatible con el mismo markup actual
   ============================================================ */

.kr-report-header.kr-theme-02 {
    display: grid !important;
    grid-template-columns: 105px minmax(250px, 1fr) minmax(185px, .85fr) 190px !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
    background: #FFFFFF !important;
    border-top: 1px solid #1F3550 !important;
    border-bottom: 2px solid #32678B !important;
    overflow: hidden !important;
}


/* COLUMNA IZQUIERDA AZUL */
.kr-theme-02 .kr-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    background: #163E6E !important;
}


/* LOGO */
.kr-theme-02 .kr-company-logo {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .kr-theme-02 .kr-company-logo img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 82px !important;
        max-height: 52px !important;
        object-fit: contain !important;
        margin: auto !important;
        background: transparent !important;
    }


/* BLOQUES GENERALES */
.kr-theme-02 .kr-company-data,
.kr-theme-02 .kr-report-data,
.kr-theme-02 .kr-print-data {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 8px 14px !important;
    margin: 0 !important;
}


/* SEPARADORES */
.kr-theme-02 .kr-company-data,
.kr-theme-02 .kr-report-data,
.kr-theme-02 .kr-print-data {
    border-left: 1px solid #D9E0E6 !important;
}


/* EMPRESA */
.kr-theme-02 .kr-company-data {
    gap: 2px !important;
}

.kr-theme-02 .kr-company-name {
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 700 !important;
    color: #172B3A !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.kr-theme-02 .kr-company-commercial-name {
    font-size: 9px !important;
    line-height: 12px !important;
    font-weight: 500 !important;
    color: #566573 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.kr-theme-02 .kr-company-ruc,
.kr-theme-02 .kr-company-location,
.kr-theme-02 .kr-company-phone {
    font-size: 8px !important;
    line-height: 11px !important;
    color: #34495E !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* REPORTE */
.kr-theme-02 .kr-report-data {
    gap: 4px !important;
}

.kr-theme-02 .kr-report-title {
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    color: #172B3A !important;
    text-transform: uppercase !important;
}

.kr-theme-02 .kr-report-period {
    font-size: 8px !important;
    line-height: 11px !important;
    color: #667085 !important;
}


/* IMPRESIÓN */
.kr-theme-02 .kr-print-data {
    gap: 5px !important;
}

.kr-theme-02 .kr-print-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
}

.kr-theme-02 .kr-meta-label {
    font-size: 8px !important;
    font-weight: 500 !important;
    color: #7B8794 !important;
    white-space: nowrap !important;
}

.kr-theme-02 .kr-print-user,
.kr-theme-02 .kr-print-date,
.kr-theme-02 .kr-page-number {
    font-size: 8px !important;
    font-weight: 600 !important;
    color: #263746 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* RESET DE HERENCIAS */
.kr-theme-02 div,
.kr-theme-02 span {
    text-transform: none !important;
}


/* IMPRESIÓN */
@media print {
    .kr-report-header.kr-theme-02 {
        grid-template-columns: 24mm minmax(58mm, 1fr) minmax(39mm, .8fr) 41mm !important;
        height: 27mm !important;
        min-height: 27mm !important;
        max-height: 27mm !important;
    }

    .kr-theme-02 .kr-company-logo img {
        max-width: 18mm !important;
        max-height: 14mm !important;
    }
}


/* ============================================================
   THEME 03
   Centrado institucional
   EMPRESA predominante al centro
   ============================================================ */

.kr-report-header.kr-theme-03 {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 130px minmax(330px, 1fr) minmax(200px, .8fr) !important;
    grid-template-rows: 75px 30px !important;
    grid-template-areas:
        "brand company report"
        "print print print" !important;
    border-top: 1px solid #2D3748 !important;
    border-bottom: 1px solid var(--kr-rpt-border-dark) !important;
}

.kr-theme-03 .kr-brand {
    grid-area: brand !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px !important;
}

.kr-theme-03 .kr-company-data {
    grid-area: company !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 6px 18px !important;
    text-align: center !important;
}

.kr-theme-03 .kr-company-name,
.kr-theme-03 .kr-company-commercial-name,
.kr-theme-03 .kr-company-ruc,
.kr-theme-03 .kr-company-location,
.kr-theme-03 .kr-company-phone {
    text-align: center !important;
}

.kr-theme-03 .kr-company-name {
    font-size: 15px !important;
    line-height: 18px !important;
}

.kr-theme-03 .kr-report-data {
    grid-area: report !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 6px 16px !important;
    border-left: 1px solid var(--kr-rpt-border) !important;
}

.kr-theme-03 .kr-print-data {
    grid-area: print !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 24px !important;
    padding: 0 14px !important;
    border-top: 1px solid var(--kr-rpt-border) !important;
}

.kr-theme-03 .kr-print-row {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}


/* ============================================================
   THEME 04
   Corporativo horizontal limpio
   ============================================================ */

.kr-report-header.kr-theme-04 {
    display: grid !important;
    grid-template-columns: 145px minmax(240px, 1fr) minmax(190px, .85fr) 225px !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
    border-top: 1px solid #273746 !important;
    border-bottom: 2px solid var(--kr-rpt-primary-2) !important;
}

.kr-theme-04 > .kr-section {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 8px 14px !important;
}

    .kr-theme-04 > .kr-section + .kr-section {
        border-left: 1px solid var(--kr-rpt-border) !important;
    }

.kr-theme-04 .kr-brand {
    align-items: center !important;
}

.kr-theme-04 .kr-company-data,
.kr-theme-04 .kr-report-data,
.kr-theme-04 .kr-print-data {
    gap: 3px !important;
}

.kr-theme-04 .kr-print-row {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 5px !important;
}


/* ============================================================
   THEME 05
   Tarjetas / módulos compactos
   ============================================================ */

.kr-report-header.kr-theme-05 {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 135px minmax(245px, 1fr) minmax(205px, .9fr) 210px !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px 10px !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #F7F9FB 100%) !important;
    border-top: 2px solid var(--kr-rpt-primary) !important;
    border-bottom: 2px solid var(--kr-rpt-primary-2) !important;
}

.kr-theme-05 > .kr-section {
    height: 82px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    background: #FFFFFF !important;
    border: 1px solid #DDE3E9 !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
}

.kr-theme-05 .kr-brand {
    align-items: center !important;
}

.kr-theme-05 .kr-company-data,
.kr-theme-05 .kr-report-data,
.kr-theme-05 .kr-print-data {
    gap: 2px !important;
}

.kr-theme-05 .kr-print-row {
    display: grid !important;
    grid-template-columns: 47px minmax(0, 1fr) !important;
    gap: 4px !important;
}


/* ============================================================
   THEME 06 - CORREGIDO
   Ejecutivo diagonal compacto
   Optimizado para logo rectangular
   ============================================================ */

.kr-report-header.kr-theme-06 {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 115px minmax(250px, 1fr) minmax(190px, .80fr) 190px !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
    background: #FFFFFF !important;
    border-top: 1px solid #24384D !important;
    border-bottom: 2px solid #32678B !important;
    overflow: hidden !important;
}


    /* ============================================================
   FONDO DIAGONAL IZQUIERDO
   ============================================================ */

    .kr-report-header.kr-theme-06::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 132px !important;
        background: linear-gradient( 108deg, #163E6E 0%, #163E6E 77%, transparent 78% ) !important;
        z-index: 0 !important;
    }


/* ============================================================
   SECCIONES
   ============================================================ */

.kr-theme-06 > .kr-section {
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    margin: 0 !important;
}


/* ============================================================
   LOGO
   ============================================================ */

.kr-theme-06 .kr-brand {
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px 8px 8px !important;
}


.kr-theme-06 .kr-company-logo {
    width: 86px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}


    .kr-theme-06 .kr-company-logo img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 82px !important;
        max-height: 52px !important;
        object-fit: contain !important;
        margin: auto !important;
    }


/* ============================================================
   DATOS DE EMPRESA
   ============================================================ */

.kr-theme-06 .kr-company-data {
    gap: 2px !important;
    padding-left: 18px !important;
}


.kr-theme-06 .kr-company-name {
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 700 !important;
    color: #172B3A !important;
}


.kr-theme-06 .kr-company-commercial-name {
    font-size: 9px !important;
    line-height: 12px !important;
    font-weight: 500 !important;
    color: #566573 !important;
}


.kr-theme-06 .kr-company-ruc,
.kr-theme-06 .kr-company-location,
.kr-theme-06 .kr-company-phone {
    font-size: 8px !important;
    line-height: 11px !important;
    color: #34495E !important;
}


/* ============================================================
   REPORTE
   ============================================================ */

.kr-theme-06 .kr-report-data {
    gap: 4px !important;
    border-left: 1px solid #D9E0E6 !important;
}


.kr-theme-06 .kr-report-title {
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    color: #172B3A !important;
    text-transform: uppercase !important;
}


.kr-theme-06 .kr-report-period {
    font-size: 8px !important;
    line-height: 11px !important;
    color: #667085 !important;
}


/* ============================================================
   DATOS DE IMPRESIÓN
   ============================================================ */

.kr-theme-06 .kr-print-data {
    gap: 5px !important;
    border-left: 1px solid #D9E0E6 !important;
}


.kr-theme-06 .kr-print-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
}


.kr-theme-06 .kr-meta-label {
    font-size: 8px !important;
    font-weight: 500 !important;
    color: #7B8794 !important;
    white-space: nowrap !important;
}


.kr-theme-06 .kr-print-user,
.kr-theme-06 .kr-print-date,
.kr-theme-06 .kr-page-number {
    font-size: 8px !important;
    font-weight: 600 !important;
    color: #263746 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* ============================================================
   RESET
   ============================================================ */

.kr-theme-06 div,
.kr-theme-06 span {
    text-transform: none !important;
}

.kr-theme-06 .kr-report-title {
    text-transform: uppercase !important;
}


/* ============================================================
   IMPRESIÓN
   ============================================================ */

@media print {

    .kr-report-header.kr-theme-06 {
        grid-template-columns: 23mm minmax(58mm, 1fr) minmax(40mm, .80fr) 41mm !important;
        height: 27mm !important;
        min-height: 27mm !important;
        max-height: 27mm !important;
    }


        .kr-report-header.kr-theme-06::before {
            width: 27mm !important;
        }


    .kr-theme-06 .kr-company-logo {
        width: 19mm !important;
        height: 15mm !important;
    }


        .kr-theme-06 .kr-company-logo img {
            max-width: 18mm !important;
            max-height: 14mm !important;
        }
}


/* ============================================================
   THEME 07
   Logo compacto tipo sello
   ============================================================ */

.kr-report-header.kr-theme-07 {
    display: grid !important;
    grid-template-columns: 95px minmax(300px, 1fr) minmax(210px, .8fr) 215px !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
    padding: 0 10px !important;
    border-top: 1px solid var(--kr-rpt-border-dark) !important;
    border-bottom: 3px solid var(--kr-rpt-primary) !important;
}

.kr-theme-07 > .kr-section {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 8px 12px !important;
}

.kr-theme-07 .kr-brand {
    align-items: center !important;
}

.kr-theme-07 .kr-company-logo {
    width: 65px !important;
    height: 65px !important;
    margin: auto !important;
    background: var(--kr-rpt-primary) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

    .kr-theme-07 .kr-company-logo img {
        max-width: 54px !important;
        max-height: 54px !important;
    }

.kr-theme-07 .kr-company-data,
.kr-theme-07 .kr-report-data,
.kr-theme-07 .kr-print-data {
    gap: 3px !important;
}

.kr-theme-07 .kr-report-data,
.kr-theme-07 .kr-print-data {
    border-left: 1px solid var(--kr-rpt-border) !important;
}

.kr-theme-07 .kr-print-row {
    display: grid !important;
    grid-template-columns: 47px minmax(0, 1fr) !important;
    gap: 5px !important;
}


/* ============================================================
   THEME 08
   Contable / institucional
   ============================================================ */

.kr-report-header.kr-theme-08 {
    display: grid !important;
    grid-template-columns: 120px minmax(260px, 1fr) minmax(210px, .85fr) 215px !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
    border-top: 1px solid #CBD5E1 !important;
    border-bottom: 1px solid #CBD5E1 !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 100%) !important;
}

.kr-theme-08 > .kr-section {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 8px 14px !important;
}

    .kr-theme-08 > .kr-section + .kr-section {
        border-left: 1px solid #E1E6EB !important;
    }

.kr-theme-08 .kr-brand {
    align-items: center !important;
}

.kr-theme-08 .kr-company-data,
.kr-theme-08 .kr-report-data,
.kr-theme-08 .kr-print-data {
    gap: 3px !important;
}

.kr-theme-08 .kr-company-name {
    color: #0F3C6E !important;
}

.kr-theme-08 .kr-report-title {
    color: #0F3C6E !important;
}

.kr-theme-08 .kr-print-row {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 5px !important;
}


/* ============================================================
   THEME 09
   Minimalista tipo ERP
   ============================================================ */

.kr-report-header.kr-theme-09 {
    display: grid !important;
    grid-template-columns: 170px minmax(300px, 1fr) minmax(220px, .75fr) !important;
    grid-template-rows: 76px 29px !important;
    grid-template-areas:
        "brand company report"
        "print print print" !important;
    border-top: 2px solid var(--kr-rpt-primary) !important;
    border-bottom: 2px solid var(--kr-rpt-primary-2) !important;
}

.kr-theme-09 .kr-brand {
    grid-area: brand !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    border-right: 1px solid var(--kr-rpt-border) !important;
}

.kr-theme-09 .kr-company-data {
    grid-area: company !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 1px !important;
    padding: 6px 18px !important;
}

.kr-theme-09 .kr-report-data {
    grid-area: report !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 6px 18px !important;
    border-left: 1px solid var(--kr-rpt-border) !important;
}

.kr-theme-09 .kr-print-data {
    grid-area: print !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 28px !important;
    padding: 0 16px !important;
    background: var(--kr-rpt-soft) !important;
    border-top: 1px solid #E1E6EB !important;
}

.kr-theme-09 .kr-print-row {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}


/* ============================================================
   THEME 10
   Ejecutivo con curva/banda inferior
   ============================================================ */

.kr-report-header.kr-theme-10 {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 125px minmax(300px, 1fr) minmax(210px, .75fr) 220px !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
    padding-bottom: 8px !important;
    border-top: 1px solid #D6DEE8 !important;
}

    .kr-report-header.kr-theme-10::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 8px !important;
        background: linear-gradient( 176deg, transparent 0%, transparent 42%, #6C9BC4 43%, #6C9BC4 60%, var(--kr-rpt-primary) 61%, var(--kr-rpt-primary) 100% ) !important;
    }

.kr-theme-10 > .kr-section {
    position: relative !important;
    z-index: 1 !important;
    height: 97px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 8px 14px !important;
}

.kr-theme-10 .kr-brand {
    align-items: center !important;
}

.kr-theme-10 .kr-company-data,
.kr-theme-10 .kr-report-data,
.kr-theme-10 .kr-print-data {
    gap: 3px !important;
}

.kr-theme-10 .kr-report-data,
.kr-theme-10 .kr-print-data {
    border-left: 1px solid var(--kr-rpt-border) !important;
}

.kr-theme-10 .kr-print-row {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 5px !important;
}


/* ============================================================
   AJUSTE PARA PANTALLAS ANGOSTAS
   ============================================================ */

@media screen and (max-width: 950px) {

    .kr-report-header.kr-theme-01,
    .kr-report-header.kr-theme-04,
    .kr-report-header.kr-theme-05,
    .kr-report-header.kr-theme-08 {
        grid-template-columns: 110px minmax(200px, 1fr) minmax(155px, .75fr) 170px !important;
    }

    .kr-report-header.kr-theme-02,
    .kr-report-header.kr-theme-06 {
        grid-template-columns: 105px minmax(210px, 1fr) minmax(160px, .75fr) 170px !important;
    }

    .kr-report-header.kr-theme-07 {
        grid-template-columns: 80px minmax(220px, 1fr) minmax(160px, .75fr) 170px !important;
    }

    .kr-report-header.kr-theme-03,
    .kr-report-header.kr-theme-09 {
        grid-template-columns: 135px minmax(245px, 1fr) minmax(175px, .7fr) !important;
    }

    .kr-report-header.kr-theme-10 {
        grid-template-columns: 100px minmax(220px, 1fr) minmax(160px, .7fr) 170px !important;
    }
}


/* ============================================================
   IMPRESIÓN
   Altura máxima real de cabecera: 27mm
   ============================================================ */

@media print {

    .kr-report-header {
        width: 100% !important;
        height: 27mm !important;
        min-height: 27mm !important;
        max-height: 27mm !important;
        overflow: hidden !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

        .kr-report-header .kr-company-logo img {
            max-width: 25mm !important;
            max-height: 17mm !important;
        }

        .kr-report-header.kr-theme-01,
        .kr-report-header.kr-theme-04,
        .kr-report-header.kr-theme-05,
        .kr-report-header.kr-theme-08 {
            grid-template-columns: 28mm minmax(55mm, 1fr) minmax(40mm, .8fr) 47mm !important;
        }

        .kr-report-header.kr-theme-02,
        .kr-report-header.kr-theme-06 {
            grid-template-columns: 25mm minmax(58mm, 1fr) minmax(40mm, .8fr) 45mm !important;
        }

        .kr-report-header.kr-theme-07 {
            grid-template-columns: 20mm minmax(65mm, 1fr) minmax(40mm, .75fr) 43mm !important;
        }

        .kr-report-header.kr-theme-03,
        .kr-report-header.kr-theme-09 {
            grid-template-columns: 31mm minmax(69mm, 1fr) minmax(48mm, .75fr) !important;
            grid-template-rows: 19mm 8mm !important;
        }

        .kr-report-header.kr-theme-10 {
            grid-template-columns: 24mm minmax(65mm, 1fr) minmax(44mm, .75fr) 45mm !important;
            padding-bottom: 2mm !important;
        }

    .kr-theme-10 > .kr-section {
        height: 25mm !important;
    }

    .kr-report-header.kr-theme-10::after {
        height: 2mm !important;
    }
}


/* ============================================================
   USO DESDE C#
   ============================================================

   divCabecera.Attributes["class"] =
       "kr-report-header kr-theme-" + theme;

   Valores aceptados:
   01, 02, 03, 04, 05, 06, 07, 08, 09, 10

   ============================================================ */

/* ============================================================
   KRONHOS ERP - LAYOUT GENERAL DE REPORTES
   V2 - Impresión multipágina estable para Chrome / Edge

   IMPORTANTE:
   ReportesMP.Master usa una TABLA REAL:
       .kr-report-page-table
           THEAD -> cabecera Kronhos
           TBODY -> ContentPlaceHolder

   Esto evita el espacio vacío producido al intentar convertir
   <header>/<main> a table-header-group/table-row-group mediante CSS.
   ============================================================ */


/* ============================================================
   PANTALLA
   ============================================================ */

.kr-report-document {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #FFFFFF;
}


.kr-report-page-table {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: auto;
}


    .kr-report-page-table > thead > tr > td,
    .kr-report-page-table > tbody > tr > td {
        margin: 0;
        padding: 0;
        border: 0;
        vertical-align: top;
    }


.kr-report-page-header-cell {
    width: 100%;
}


.kr-report-body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 12px 0 0 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: visible;
}


/* ============================================================
   FIRMAS
   ============================================================ */

.kr-report-signatures {
    width: 100%;
    margin: 20px 0 0 0;
    padding: 0;
}


.kr-report-signature-container {
    width: 100%;
    max-width: 650px;
    margin: 15px 0 0 0;
}


.kr-report-signature-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
    table-layout: fixed;
}


    .kr-report-signature-table td {
        width: 25%;
        text-align: center;
    }


    .kr-report-signature-table tr:first-child td {
        height: 60px;
        vertical-align: bottom;
        border-bottom: 1px solid #344054;
    }


    .kr-report-signature-table .kr-signature-labels td {
        height: auto;
        padding-top: 5px;
        border-bottom: 0;
        font-size: 8px;
        color: #475467;
    }


.kr-report-bottom {
    width: 100%;
    padding-top: 10px;
}


/* ============================================================
   UTILIDADES
   ============================================================ */

.kr-print-keep {
    break-inside: avoid;
    page-break-inside: avoid;
}


/* ============================================================
   IMPRESIÓN
   ============================================================ */

@media print {

    /*
       Chrome / Edge:
       desactivar manualmente:
       Más opciones -> Encabezados y pies de página

       Esto elimina:
       - fecha del navegador
       - "Kronhos ERP"
       - URL
       - 1/13
    */

    @page {
        margin: 6mm 6mm 8mm 6mm;
    }


    html,
    body {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #FFFFFF !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }


    .kr-report-document {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }


    /* ========================================================
       TABLA MAESTRA
       ======================================================== */

    .kr-report-page-table {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-spacing: 0 !important;
        border-collapse: collapse !important;
        table-layout: auto !important;
        page-break-inside: auto !important;
        break-inside: auto !important;
    }


        /*
       ÉSTA es la cabecera global que se repite.
       Ahora existe un THEAD real en el HTML.
    */
        .kr-report-page-table > thead {
            display: table-header-group !important;
        }


        .kr-report-page-table > tbody {
            display: table-row-group !important;
        }


        .kr-report-page-table > thead > tr,
        .kr-report-page-table > thead > tr > td {
            page-break-inside: avoid !important;
            break-inside: avoid !important;
        }


        /*
       MUY IMPORTANTE:
       la fila exterior que contiene TODO el reporte sí debe poder
       fragmentarse entre múltiples páginas.
    */
        .kr-report-page-table > tbody > .kr-report-page-content-row {
            page-break-inside: auto !important;
            break-inside: auto !important;
        }


            .kr-report-page-table > tbody > .kr-report-page-content-row > .kr-report-page-body-cell {
                page-break-inside: auto !important;
                break-inside: auto !important;
                overflow: visible !important;
            }


    /* ========================================================
       CABECERA KRONHOS
       ======================================================== */

    .kr-report-header {
        width: 100% !important;
        height: 27mm !important;
        min-height: 27mm !important;
        max-height: 27mm !important;
        margin: 0 !important;
        overflow: hidden !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }


    /*
       Separación entre cabecera Kronhos y el contenido.
       Se aplica al BODY, no mediante margin-bottom del THEAD.
    */
    .kr-report-body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 2mm 0 0 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }


        /* ========================================================
       GRIDVIEWS / TABLAS HIJAS
       ======================================================== */

        /*
       Solamente las tablas dentro del cuerpo.
       No aplicamos reglas genéricas al outer table.
    */
        .kr-report-body table {
            page-break-inside: auto !important;
            break-inside: auto !important;
        }


            /*
       HeaderRow.TableSection = TableHeader en OnPreRender
       convierte la cabecera del GridView en THEAD real.
    */
            .kr-report-body table > thead {
                display: table-header-group !important;
            }


            .kr-report-body table > tfoot {
                display: table-footer-group !important;
            }


            /*
       Evitar cortar filas de detalle.
    */
            .kr-report-body table > tbody > tr {
                page-break-inside: avoid !important;
                break-inside: avoid !important;
            }


        /*
       No usamos avoid sobre cada TD porque en reportes grandes
       puede generar espacios vacíos o saltos incorrectos.
    */
        .kr-report-body td,
        .kr-report-body th {
            page-break-inside: auto !important;
            break-inside: auto !important;
        }


        /*
       Quitar sticky de GridView al imprimir.
    */
        .kr-report-body .gridview th,
        .kr-report-body .gridview thead th {
            position: static !important;
            top: auto !important;
            z-index: auto !important;
        }


        /*
       Utilizar todo el ancho imprimible.
    */
        .kr-report-body .gridview,
        .kr-report-body table.gridview {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            table-layout: auto;
        }


    /* ========================================================
       FIRMAS
       ======================================================== */

    .kr-report-signatures {
        display: block !important;
        width: 100% !important;
        margin-top: 8mm !important;
        padding: 0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }


    .kr-report-signature-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }


    .kr-report-signature-table {
        width: 100% !important;
        table-layout: fixed !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }


    /* ========================================================
       SALTOS CONTROLADOS
       ======================================================== */

    .kr-print-keep {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }


    .kr-page-break-before {
        page-break-before: always !important;
        break-before: page !important;
    }


    .kr-page-break-after {
        page-break-after: always !important;
        break-after: page !important;
    }




    /* ========================================================
       AJUSTE AUTOMÁTICO AL ANCHO QUE ELIJA EL USUARIO
       (Vertical / Horizontal desde Chrome o Edge)
       ======================================================== */

    .kr-report-document,
    .kr-report-page-table,
    .kr-report-body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

        .kr-report-body > div,
        .kr-report-body > table {
            max-width: 100% !important;
        }

        .kr-report-body .gridview,
        .kr-report-body table.gridview {
            width: 100% !important;
            max-width: 100% !important;
        }

    /* ========================================================
       LINKS
       ======================================================== */

    a {
        text-decoration: none !important;
        pointer-events: none !important;
        cursor: default !important;
        color: inherit !important;
    }


        a[href]::after {
            content: none !important;
        }


    /* ========================================================
       NO IMPRIMIR
       ======================================================== */

    .botones_principales,
    .botones_derecha,
    .botones_derecha_iframe,
    .kr-no-print {
        display: none !important;
    }
}


/* ============================================================
   PANTALLA - REPORTE ANCHO
   ============================================================ */

.kr-report-landscape .kr-report-body {
    overflow-x: auto;
}


/* ============================================================
   OVERRIDE FINAL DE IMPRESIÓN
   Permite que el navegador controle Vertical / Horizontal
   y fuerza al contenido hijo a usar TODO el ancho disponible.
   Debe permanecer al FINAL del archivo.
   ============================================================ */

@media print {

    @page {
        margin: 6mm 6mm 8mm 6mm;
    }

    html,
    body,
    form,
    #form1,
    #mainR,
    .kr-report-document,
    .kr-report-page-table,
    .kr-report-page-table > tbody,
    .kr-report-page-table > tbody > tr,
    .kr-report-page-body-cell,
    .kr-report-body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    html,
    body,
    form,
    #form1,
    #mainR,
    .kr-report-document,
    .kr-report-page-table,
    .kr-report-page-body-cell,
    .kr-report-body {
        overflow: visible !important;
    }

        /*
       Neutralizar anchos heredados frecuentes en páginas antiguas.
       No afecta columnas/celdas internas del GridView.
    */
        .kr-report-body > div,
        .kr-report-body > section,
        .kr-report-body > article,
        .kr-report-body > main,
        .kr-report-body > form,
        .kr-report-body > table,
        .kr-report-body > span > div {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            box-sizing: border-box !important;
        }

        /*
       Clases antiguas que suelen limitar reportes.
    */
        .kr-report-body .style1,
        .kr-report-body .auto-style1,
        .kr-report-body .contenedor,
        .kr-report-body .container,
        .kr-report-body .content,
        .kr-report-body .contenido,
        .kr-report-body .reporte,
        .kr-report-body .report,
        .kr-report-body .report-content {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
        }

        /*
       GridView y tablas principales:
       deben crecer al ancho imprimible real.
    */
        .kr-report-body .gridview,
        .kr-report-body table.gridview,
        .kr-report-body > table {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            table-layout: auto !important;
        }

        /*
       Evitar reglas responsive para móvil que conviertan
       GridViews en tarjetas/bloques al imprimir.
    */
        .kr-report-body table,
        .kr-report-body thead,
        .kr-report-body tbody,
        .kr-report-body tfoot {
            visibility: visible !important;
        }

        .kr-report-body thead {
            display: table-header-group !important;
        }

        .kr-report-body tbody {
            display: table-row-group !important;
        }

        .kr-report-body tfoot {
            display: table-footer-group !important;
        }

        .kr-report-body tr {
            display: table-row !important;
        }

        .kr-report-body th,
        .kr-report-body td {
            display: table-cell !important;
            float: none !important;
            position: static !important;
            transform: none !important;
        }

        /*
       No dejar que min-width históricos obliguen al documento
       a conservar ancho portrait.
    */
        .kr-report-body * {
            min-width: 0 !important;
        }

        /*
       EXCEPCIONES:
       inputs/controles internos pueden mantener su ancho natural.
    */
        .kr-report-body input,
        .kr-report-body select,
        .kr-report-body textarea,
        .kr-report-body button {
            max-width: 100% !important;
        }

        /*
       Si una página hija trae un width inline fijo en su primer
       contenedor, esta regla lo sustituye al imprimir.
    */
        .kr-report-body > [style*="width"],
        .kr-report-body > [style*="min-width"] {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
        }

    /*
       La tabla maestra nunca debe conservar un ancho físico
       de A4 portrait.
    */
    .kr-report-page-table {
        width: 100% !important;
        max-width: none !important;
    }
}


/* ============================================================
   MODOS DE ANCHO PARA REPORTES
   Aplicar una de estas clases sobre .kr-report-document:
     kr-report-normal
     kr-report-wide
     kr-report-extra-wide
   La orientación Vertical/Horizontal sigue siendo elegida
   por el usuario desde Chrome/Edge.
   ============================================================ */


/* ============================================================
   NORMAL
   Reportes estándar
   ============================================================ */

.kr-report-normal {
    --kr-report-font-size: 9px;
    --kr-report-cell-padding-y: 3px;
    --kr-report-cell-padding-x: 5px;
}


@media print {

    .kr-report-normal .gridview,
    .kr-report-normal table.gridview {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

        .kr-report-normal .gridview th,
        .kr-report-normal .gridview td {
            font-size: 9px !important;
            line-height: 1.15 !important;
            padding: 3px 5px !important;
            white-space: normal !important;
            overflow-wrap: break-word !important;
            word-break: normal !important;
        }
}


/* ============================================================
   WIDE
   Reportes con bastantes columnas
   Recomendado para ~10-14 columnas
   ============================================================ */

.kr-report-wide {
    --kr-report-font-size: 7px;
    --kr-report-cell-padding-y: 2px;
    --kr-report-cell-padding-x: 3px;
}


@media print {

    .kr-report-wide {
        font-size: 7px !important;
    }

        .kr-report-wide .kr-report-body {
            font-size: 7px !important;
        }

        .kr-report-wide .gridview,
        .kr-report-wide table.gridview {
            width: 100% !important;
            max-width: 100% !important;
            table-layout: fixed !important;
        }

            .kr-report-wide .gridview th,
            .kr-report-wide .gridview td {
                font-size: 7px !important;
                line-height: 1.08 !important;
                padding: 2px 3px !important;
                white-space: normal !important;
                overflow-wrap: anywhere !important;
                word-break: break-word !important;
                vertical-align: middle !important;
            }

                /*
       Evitar que textos largos obliguen a crecer una columna
       más allá del ancho disponible.
    */
                .kr-report-wide .gridview th *,
                .kr-report-wide .gridview td * {
                    max-width: 100% !important;
                    white-space: normal !important;
                    overflow-wrap: anywhere !important;
                    word-break: break-word !important;
                }
}


/* ============================================================
   EXTRA WIDE
   Reportes muy anchos
   Recomendado para 14+ columnas antes de dividir columnas
   ============================================================ */

.kr-report-extra-wide {
    --kr-report-font-size: 6px;
    --kr-report-cell-padding-y: 1px;
    --kr-report-cell-padding-x: 2px;
}


@media print {

    .kr-report-extra-wide {
        font-size: 6px !important;
    }

        .kr-report-extra-wide .kr-report-body {
            font-size: 6px !important;
        }

        /*
       Una reducción moderada ayuda a encajar reportes muy anchos
       sin llegar a tamaños ilegibles.
    */
        .kr-report-extra-wide .kr-report-body {
            zoom: .88;
        }

        .kr-report-extra-wide .gridview,
        .kr-report-extra-wide table.gridview {
            width: 100% !important;
            max-width: 100% !important;
            table-layout: fixed !important;
        }

            .kr-report-extra-wide .gridview th,
            .kr-report-extra-wide .gridview td {
                font-size: 6px !important;
                line-height: 1.04 !important;
                padding: 1px 2px !important;
                white-space: normal !important;
                overflow-wrap: anywhere !important;
                word-break: break-word !important;
                vertical-align: middle !important;
            }

                .kr-report-extra-wide .gridview th *,
                .kr-report-extra-wide .gridview td * {
                    max-width: 100% !important;
                    white-space: normal !important;
                    overflow-wrap: anywhere !important;
                    word-break: break-word !important;
                }

            /*
       Las columnas no deben imponer un min-width heredado.
    */
            .kr-report-extra-wide .gridview col,
            .kr-report-extra-wide .gridview th,
            .kr-report-extra-wide .gridview td {
                min-width: 0 !important;
            }
}


/* ============================================================
   ESCALAS MANUALES OPCIONALES
   Úsalas solo si un reporte concreto lo necesita.
   ============================================================ */

@media print {

    .kr-report-scale-90 .kr-report-body {
        zoom: .90;
    }

    .kr-report-scale-85 .kr-report-body {
        zoom: .85;
    }

    .kr-report-scale-80 .kr-report-body {
        zoom: .80;
    }
}


/* ============================================================
   RECOMENDACIÓN DE USO DESDE LA MASTER

   NORMAL:
   mainR.Attributes["class"] =
       "kr-report-document kr-report-normal";

   WIDE:
   mainR.Attributes["class"] =
       "kr-report-document kr-report-wide";

   EXTRA WIDE:
   mainR.Attributes["class"] =
       "kr-report-document kr-report-extra-wide";

   EXTRA WIDE + escala adicional:
   mainR.Attributes["class"] =
       "kr-report-document kr-report-extra-wide kr-report-scale-85";

   ============================================================ */

/* ============================================================
   KRONHOS ERP - CAPA FINAL LIGHT / DARK
   Debe cargarse al final de ~/bundle/kronhosMP.
   No modifica medidas, posiciones ni comportamiento.
   ============================================================ */



/* =========================================================
   COLOR AUTOMÁTICO DEL LOADING SEGÚN EL TEMA
   ========================================================= */

html[data-theme="light"] {
    --kr-loader-accent: #0F6CBD;
    --kr-loader-track: #DCE5EC;
    --kr-loader-card: #FFFFFF;
    --kr-loader-text: #34404C;
}

html[data-theme="dark"] {
    --kr-loader-accent: #31B1FF;
    --kr-loader-track: #214469;
    --kr-loader-card: #0A274A;
    --kr-loader-text: #D7E3F1;
}

.loader-wrapper .loaderU,
.loaderU {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   LOADING GLOBAL
   ========================================================= */

.kr-processing-spinner {
    border: 4px solid var(--kr-loader-track);
    border-top-color: var(--kr-loader-accent);
    border-right-color: var(--kr-loader-accent);
}


/* ---------- Procesando / loading ---------- */

[id$="GlobalpnlPopup"].modalBackground,
.loader-wrapper,
.cargandoK {
    background: var(--kr-loading-overlay, #263746) !important;
    color: var(--kr-loading-text, #34404C) !important;
    opacity: 1;
    filter: none;
    will-change: opacity;
}

/*
   Loader del iframe principal (Kronhos.aspx).
   La clase se agrega antes de aplicar display:none para permitir
   que la transición de salida termine.
*/
#loaderK,
.cargandoK {
    transition-property: opacity !important;
    transition-duration: .22s !important;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1) !important;
}

    #loaderK.kr-loading-saliendo,
    .cargandoK.kr-loading-saliendo {
        opacity: 0 !important;
        pointer-events: none !important;
        transition-timing-function: ease-in !important;
    }

html[data-theme="dark"] [id$="GlobalpnlPopup"].modalBackground,
html[data-theme="dark"] .loader-wrapper,
html[data-theme="dark"] .cargandoK {
    background: var(--kr-loading-overlay) !important;
}

.loader-wrapper .loader,
.loader-wrapper .loader-inner,
.loader-wrapper .loader-image {
    background: transparent !important;
    box-shadow: none !important;
}

.loader-wrapper .loader {
    border: 0 !important;
    border-radius: 0 !important;
}

.loader-wrapper .loader-image {
    display: block;
    border: 0 !important;
    outline: 0 !important;
}

/* Loaders clásicos de las otras MasterPages. */
html[data-theme] [id$="GlobalpnlPopup"].modalbox {
    color: var(--kr-loader-text) !important;
    background: var(--kr-loader-card) !important;
    border-color: var(--kr-border-medium, #CFD7DF) !important;
    box-shadow: 0 12px 32px var(--kr-shadow-color, rgba(0, 0, 0, .18)) !important;
}

.kr-modal-global__loading,
.iframe-loading,
.loading-support {
    background: var(--kr-loading-overlay, rgba(255, 255, 255, .90)) !important;
    color: var(--kr-loading-text, #52606D) !important;
}

.kr-spinner,
.loading-support-spinner {
    border-color: var(--kr-border, #DFE4E8) !important;
    border-top-color: var(--kr-primary-strong, #32678B) !important;
}

/* ---------- Modales ---------- */

.modalPop,
.kr-modal-global,
.kr-modal-global__body,
.kr-modal-global__frame,
.ui-dialog,
.kr-support-dialog {
    background: var(--kr-surface, #FFFFFF) !important;
    color: var(--kr-text, #45454B) !important;
    border-color: var(--kr-border, #DFE4E8) !important;
}

    .kr-modal-global__footer,
    .ui-dialog .ui-dialog-titlebar,
    .kr-support-dialog .ui-dialog-titlebar {
        background: var(--kr-surface-alt, #F5F7F9) !important;
        color: var(--kr-text-heading, #34404C) !important;
        border-color: var(--kr-border, #DFE4E8) !important;
    }

    .ui-dialog .ui-dialog-title,
    .kr-support-dialog .ui-dialog-title {
        color: var(--kr-text-heading, #34404C) !important;
    }

    .ui-dialog .ui-dialog-titlebar-close:hover {
        background: var(--kr-hover, #E7EAED) !important;
    }

.boton_cerrar_error {
    color: var(--kr-text-default, #444444) !important;
    background-color: var(--kr-surface, #FFFFFF) !important;
    border-color: var(--kr-border-button, #C6C6C6) !important;
}

    .boton_cerrar_error:hover {
        color: var(--kr-text-default, #444444) !important;
        background-color: var(--kr-button-hover, #D7EBF9) !important;
    }

.cargando {
    color: var(--kr-text-inverse, #FFFFFF) !important;
    background-color: var(--kr-primary-deep, #143F60) !important;
    border-color: var(--kr-primary-deep, #143F60) !important;
}

/* ---------- Contenedores flex ---------- */

.cabt {
    border-bottom-color: var(--kr-gray-500, #AAAAAA) !important;
}

    .cabt span,
    .flexContenedor {
        background-color: var(--kr-surface, #FFFFFF) !important;
    }

.flexcab,
.flexcueT {
    border-bottom-color: var(--kr-border, #DDDDDD) !important;
}

.colorflex {
    color: var(--kr-text-inverse, #FFFFFF) !important;
    background-color: var(--kr-primary-deep, #1F618D) !important;
}

.barraInferior,
.barraInferiorfixed {
    background-color: var(--kr-surface-muted, #D5D5D5) !important;
    border-color: var(--kr-border, #DFE4E8) !important;
}

.flextableNL {
    background-color: var(--kr-surface-alt, #F5F7F9) !important;
    border-color: var(--kr-border, #DFE4E8) !important;
}

/* ---------- Select2 ---------- */

/* ==========================================================
   SELECT2 - THEME KRONHOS
   ========================================================== */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-dropdown {
    color: var(--kr-input-text, #243447) !important;
    background: var(--kr-input-bg, #FFFFFF) !important;
    border-color: var(--kr-border-control, #D5D5D5) !important;
}


    /* Texto */

    .select2-container--default .select2-selection--single .select2-selection__rendered,
    .select2-container--default .select2-selection--multiple .select2-selection__rendered,
    .select2-results__option {
        color: var(--kr-input-text, #243447) !important;
    }


/* ==========================================================
   PROTECCIÓN ESTRUCTURAL SELECT2
   Evita interferencia de estilos globales ul / li / select
   ========================================================== */

select.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* UL interno del control múltiple */

.select2-container .select2-selection__rendered {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


    /* Elementos internos */

    .select2-container .select2-selection__rendered > li,
    .select2-container .select2-search--inline {
        list-style: none !important;
    }


/* UL de resultados */

.select2-results__options {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Cada opción */

.select2-results__option {
    list-style: none !important;
}


/* ==========================================================
   ESTADOS
   ========================================================== */

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    color: var(--kr-selected-text, #263746) !important;
    background-color: var(--kr-hover-strong, #DCEAFF) !important;
}


.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    color: var(--kr-selected-text, #263746) !important;
    background-color: var(--kr-selected-bg, #F4F7F9) !important;
}


/* Selección múltiple */

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: var(--kr-text, #45454B) !important;
    background-color: var(--kr-surface-alt, #F5F7F9) !important;
    border-color: var(--kr-border, #DFE4E8) !important;
}


/* Disabled */

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    color: var(--kr-disabled-text, #66788A) !important;
    background-color: var(--kr-disabled-bg, #F5F5F5) !important;
    border-color: var(--kr-disabled-border, #D8E0E7) !important;
}

/* ---------- Confirmación global ---------- */

.kr-confirm-btn-cancel {
    color: var(--kr-text, #34404C) !important;
    background: var(--kr-surface, #FFFFFF) !important;
    border-color: var(--kr-border-medium, #CFD7DF) !important;
}

    .kr-confirm-btn-cancel:hover {
        background: var(--kr-hover, #F8FAFC) !important;
    }

.kr-confirm-btn-ok {
    color: var(--kr-text-inverse, #FFFFFF) !important;
}

/* ---------- Paneles auxiliares del shell ---------- */

#VerMover,
#DvFavoritosIn,
[id$="PanelAux"].panel_show {
    color: var(--kr-text, #45454B) !important;
    background-color: var(--kr-surface, #FFFFFF) !important;
    border-color: var(--kr-border, #DFE4E8) !important;
}

    #VerMover a,
    #DvFavoritosIn a {
        color: var(--kr-text-muted, #777777) !important;
    }

/* Los documentos renderizados e impresos permanecen claros. */
@media print {
    .gridview-pdf,
    .gridview-pdf th,
    .gridview-pdf td {
        color: #333333 !important;
        background-color: #FFFFFF !important;
    }
}



/* =========================================
   LOADING GLOBAL SIN GIF
   ========================================= */

.modalProcess {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
}

.kr-processing {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-width: 150px;
    padding: 18px 24px;
    color: var(--kr-loader-text);
    background: var(--kr-loader-card) !important;
    border: 1px solid var(--kr-border-medium, #CFD7DF) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 32px var(--kr-shadow-color, rgba(0, 0, 0, .18)) !important;
    box-sizing: border-box;
    animation: krProcessingFadeIn .24s cubic-bezier(.22, 1, .36, 1) both;
}

.kr-processing-spinner {
    width: 38px;
    height: 38px;
    display: block;
    box-sizing: border-box;
    border: 4px solid var(--kr-loader-track);
    border-top-color: var(--kr-loader-accent);
    border-right-color: var(--kr-loader-accent);
    border-radius: 50%;
    animation: krProcessingSpin .70s linear infinite;
}

.kr-processing-text {
    color: var(--kr-loader-text);
    font-family: var(--kr-font-family);
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
}

@keyframes krProcessingSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes krProcessingFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kr-processing-spinner {
        animation-duration: 1.5s;
    }

    .kr-processing {
        animation: none;
    }
}


/* =========================================================
   ASPxMENU KRONHOS — LIGHT / DARK
   Un solo bloque para menú y popups flotantes DevExpress.
   ========================================================= */

html[data-theme="light"] {
    --kr-menu-bar-bg: #1F2A39;
    --kr-menu-bar-text: #FFFFFF;
    --kr-menu-bar-hover-bg: #29465B;
    --kr-menu-bar-hover-text: #F2F7FA;
    --kr-menu-bar-selected-bg: #397FAF;
    --kr-menu-bar-selected-text: #FFFFFF;
    --kr-menu-bar-arrow: #A8BAC7;
    --kr-menu-bar-arrow-hover: #FFFFFF;
    --kr-menu-popup-bg: #F7F9FB;
    --kr-menu-popup-text: #304354;
    --kr-menu-popup-border: #D4DEE7;
    --kr-menu-hover-bg: #E5F0F7;
    --kr-menu-hover-text: #194F70;
    --kr-menu-selected-bg: #326F98;
    --kr-menu-selected-text: #FFFFFF;
    --kr-menu-separator: transparent;
    --kr-menu-popup-shadow: 0 12px 28px rgba(31, 42, 57, .18);
}

html[data-theme="dark"] {
    /* Barra principal */
    --kr-menu-bar-bg: #111A24;
    --kr-menu-bar-text: #EAF1F7;
    --kr-menu-bar-hover-bg: #1B2834;
    --kr-menu-bar-hover-text: #F5F9FF;
    --kr-menu-bar-selected-bg: #25394A;
    --kr-menu-bar-selected-text: #FFFFFF;
    --kr-menu-bar-arrow: #9AABBA;
    --kr-menu-bar-arrow-hover: #FFFFFF;
    /* Submenús / popups */
    --kr-menu-popup-bg: #18232D;
    --kr-menu-popup-text: #DCE5ED;
    --kr-menu-popup-border: #334553;
    /* Estados */
    --kr-menu-hover-bg: #22313E;
    --kr-menu-hover-text: #F2F7FA;
    --kr-menu-selected-bg: #2A4052;
    --kr-menu-selected-text: #FFFFFF;
    /* Separadores / sombra */
    --kr-menu-separator: #2C3A46;
    --kr-menu-popup-shadow: 0 14px 34px rgba(0, 0, 0, .40);
    /* Shell Kronhos: barra superior e inferior */
    --kr-shell-bar-bg: #111A24;
    --kr-shell-bar-text: #F5F9FF;
    --kr-shell-bar-text-muted: #B7C3CE;
    --kr-shell-bar-hover: #1B2834;
    --kr-shell-bar-border: rgba(255, 255, 255, .09);
    /* Loader / Procesando */
    --kr-loader-accent: #39B9E8;
    --kr-loader-track: #2C3A46;
    --kr-loader-card: #18232D;
    --kr-loader-text: #DCE5ED;
    --kr-loading-overlay: rgba(17, 26, 36, .92);
    --kr-loading-text: #DCE5ED;
}

/* Barra principal. CssClass="menu-erp" debe estar en ASPxMenu1. */
#ASPxMenu1,
#ASPxMenu1.dxm-main,
#ASPxMenu1 .dxm-main,
.dxmLite.menu-erp,
.dxmLite.menu-erp.dxm-main,
.dxmLite.menu-erp .dxm-main {
    color: var(--kr-menu-bar-text) !important;
    background: var(--kr-menu-bar-bg) !important;
    background-image: none !important;
    border-color: var(--kr-menu-bar-bg) !important;
}

    #ASPxMenu1 .dxm-main .dxm-item,
    #ASPxMenu1 .dxm-main .dxm-content,
    #ASPxMenu1 .dxm-main .dxm-item > a,
    #ASPxMenu1 .dxm-main .dxm-item > a > span,
    #ASPxMenu1.dxm-main .dxm-item,
    #ASPxMenu1.dxm-main .dxm-content,
    #ASPxMenu1.dxm-main .dxm-item > a,
    #ASPxMenu1.dxm-main .dxm-item > a > span,
    .dxmLite.menu-erp .dxm-main .dxm-item,
    .dxmLite.menu-erp .dxm-main .dxm-content,
    .dxmLite.menu-erp .dxm-main .dxm-item > a,
    .dxmLite.menu-erp .dxm-main .dxm-item > a > span,
    .dxmLite.menu-erp.dxm-main .dxm-item,
    .dxmLite.menu-erp.dxm-main .dxm-content,
    .dxmLite.menu-erp.dxm-main .dxm-item > a,
    .dxmLite.menu-erp.dxm-main .dxm-item > a > span {
        color: var(--kr-menu-bar-text) !important;
        background-color: transparent !important;
        background-image: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

        #ASPxMenu1 .dxm-main .dxm-hovered,
        #ASPxMenu1 .dxm-main .dxm-hovered .dxm-content,
        #ASPxMenu1 .dxm-main .dxm-item:hover,
        #ASPxMenu1 .dxm-main .dxm-item:hover .dxm-content,
        #ASPxMenu1 .dxm-main .dxm-hovered > a,
        #ASPxMenu1 .dxm-main .dxm-hovered > a > span,
        #ASPxMenu1.dxm-main .dxm-hovered,
        #ASPxMenu1.dxm-main .dxm-hovered .dxm-content,
        #ASPxMenu1.dxm-main .dxm-item:hover,
        #ASPxMenu1.dxm-main .dxm-item:hover .dxm-content,
        #ASPxMenu1.dxm-main .dxm-hovered > a,
        #ASPxMenu1.dxm-main .dxm-hovered > a > span,
        .dxmLite.menu-erp .dxm-main .dxm-hovered,
        .dxmLite.menu-erp .dxm-main .dxm-hovered .dxm-content,
        .dxmLite.menu-erp .dxm-main .dxm-hovered > a,
        .dxmLite.menu-erp .dxm-main .dxm-hovered > a > span,
        .dxmLite.menu-erp.dxm-main .dxm-hovered,
        .dxmLite.menu-erp.dxm-main .dxm-hovered .dxm-content,
        .dxmLite.menu-erp.dxm-main .dxm-hovered > a,
        .dxmLite.menu-erp.dxm-main .dxm-hovered > a > span {
            color: var(--kr-menu-bar-hover-text) !important;
            background-color: var(--kr-menu-bar-hover-bg) !important;
            background-image: none !important;
        }

    #ASPxMenu1 .dxm-main .dxm-selected,
    #ASPxMenu1 .dxm-main .dxm-selected .dxm-content,
    #ASPxMenu1 .dxm-main .dxm-selected > a,
    #ASPxMenu1 .dxm-main .dxm-selected > a > span,
    #ASPxMenu1.dxm-main .dxm-selected,
    #ASPxMenu1.dxm-main .dxm-selected .dxm-content,
    #ASPxMenu1.dxm-main .dxm-selected > a,
    #ASPxMenu1.dxm-main .dxm-selected > a > span,
    .dxmLite.menu-erp .dxm-main .dxm-selected,
    .dxmLite.menu-erp .dxm-main .dxm-selected .dxm-content,
    .dxmLite.menu-erp .dxm-main .dxm-selected > a,
    .dxmLite.menu-erp .dxm-main .dxm-selected > a > span,
    .dxmLite.menu-erp.dxm-main .dxm-selected,
    .dxmLite.menu-erp.dxm-main .dxm-selected .dxm-content,
    .dxmLite.menu-erp.dxm-main .dxm-selected > a,
    .dxmLite.menu-erp.dxm-main .dxm-selected > a > span {
        color: var(--kr-menu-bar-selected-text) !important;
        background-color: var(--kr-menu-bar-selected-bg) !important;
        background-image: none !important;
    }

/*
   DevExpress puede insertar los submenús fuera de #ASPxMenu1.
   Por eso los popups se seleccionan por sus clases generadas.
*/
html[data-theme] .dxm-popup,
html[data-theme] .dxm-subMenu,
html[data-theme] [class*="dxm-popup"],
html[data-theme] [class*="dxm-subMenu"] {
    color: var(--kr-menu-popup-text) !important;
    background: var(--kr-menu-popup-bg) !important;
    background-image: none !important;
    border-color: var(--kr-menu-popup-border) !important;
    box-shadow: var(--kr-menu-popup-shadow) !important;
}

/* Acabado del popup light. No afecta la barra principal. */
html[data-theme="light"] .dxm-popup,
html[data-theme="light"] .dxm-subMenu,
html[data-theme="light"] [class*="dxm-popup"],
html[data-theme="light"] [class*="dxm-subMenu"] {
    border: 1px solid var(--kr-menu-popup-border) !important;
    border-radius: 3px !important;
}

    /* El primer nivel nace desde la barra: sin redondeo arriba. */
    html[data-theme="light"] .dxm-popup:not(.dxm-subMenu) {
        border-radius: 0 0 3px 3px !important;
    }

html[data-theme] .dxm-popup table,
html[data-theme] .dxm-popup tbody,
html[data-theme] .dxm-popup tr,
html[data-theme] .dxm-popup td,
html[data-theme] .dxm-subMenu table,
html[data-theme] .dxm-subMenu tbody,
html[data-theme] .dxm-subMenu tr,
html[data-theme] .dxm-subMenu td,
html[data-theme] [class*="dxm-popup"] table,
html[data-theme] [class*="dxm-popup"] td,
html[data-theme] [class*="dxm-subMenu"] table,
html[data-theme] [class*="dxm-subMenu"] td {
    color: var(--kr-menu-popup-text) !important;
    background-color: var(--kr-menu-popup-bg) !important;
    background-image: none !important;
}

/* El skin agrega bordes horizontales a cada fila: se eliminan. */
html[data-theme] .dxm-popup tr,
html[data-theme] .dxm-popup td,
html[data-theme] .dxm-popup .dxm-item,
html[data-theme] .dxm-popup .dxm-content,
html[data-theme] .dxm-popup .dxm-item > a,
html[data-theme] .dxm-subMenu tr,
html[data-theme] .dxm-subMenu td,
html[data-theme] .dxm-subMenu .dxm-item,
html[data-theme] .dxm-subMenu .dxm-content,
html[data-theme] .dxm-subMenu .dxm-item > a,
html[data-theme] [class*="dxm-popup"] tr,
html[data-theme] [class*="dxm-popup"] td,
html[data-theme] [class*="dxm-popup"] .dxm-item,
html[data-theme] [class*="dxm-popup"] .dxm-content,
html[data-theme] [class*="dxm-subMenu"] tr,
html[data-theme] [class*="dxm-subMenu"] td,
html[data-theme] [class*="dxm-subMenu"] .dxm-item,
html[data-theme] [class*="dxm-subMenu"] .dxm-content {
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
}

html[data-theme] .dxm-popup .dxm-item,
html[data-theme] .dxm-popup .dxm-content,
html[data-theme] .dxm-subMenu .dxm-item,
html[data-theme] .dxm-subMenu .dxm-content,
html[data-theme] [class*="dxm-popup"] .dxm-item,
html[data-theme] [class*="dxm-popup"] .dxm-content {
    color: var(--kr-menu-popup-text) !important;
    background-color: var(--kr-menu-popup-bg) !important;
    background-image: none !important;
}

html[data-theme] .dxm-popup a,
html[data-theme] .dxm-popup span,
html[data-theme] .dxm-subMenu a,
html[data-theme] .dxm-subMenu span {
    color: inherit !important;
}

html[data-theme] .dxm-popup .dxm-hovered,
html[data-theme] .dxm-popup .dxm-hovered td,
html[data-theme] .dxm-popup .dxm-hovered .dxm-content,
html[data-theme] .dxm-subMenu .dxm-hovered,
html[data-theme] .dxm-subMenu .dxm-hovered td,
html[data-theme] .dxm-subMenu .dxm-hovered .dxm-content {
    color: var(--kr-menu-hover-text) !important;
    background-color: var(--kr-menu-hover-bg) !important;
    background-image: none !important;
}

html[data-theme] .dxm-popup .dxm-selected,
html[data-theme] .dxm-popup .dxm-selected td,
html[data-theme] .dxm-popup .dxm-selected .dxm-content,
html[data-theme] .dxm-subMenu .dxm-selected,
html[data-theme] .dxm-subMenu .dxm-selected td,
html[data-theme] .dxm-subMenu .dxm-selected .dxm-content {
    color: var(--kr-menu-selected-text) !important;
    background-color: var(--kr-menu-selected-bg) !important;
    background-image: none !important;
}

html[data-theme] .dxm-popup .dxm-separator,
html[data-theme] .dxm-subMenu .dxm-separator,
html[data-theme] [class*="dxm-popup"] .dxm-separator,
html[data-theme] [class*="dxm-subMenu"] .dxm-separator {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: 0 !important;
}

html[data-theme="light"] .dxm-popup .dxm-hovered,
html[data-theme="light"] .dxm-popup .dxm-hovered .dxm-content,
html[data-theme="light"] .dxm-popup .dxm-selected,
html[data-theme="light"] .dxm-popup .dxm-selected .dxm-content,
html[data-theme="light"] .dxm-subMenu .dxm-hovered,
html[data-theme="light"] .dxm-subMenu .dxm-hovered .dxm-content,
html[data-theme="light"] .dxm-subMenu .dxm-selected,
html[data-theme="light"] .dxm-subMenu .dxm-selected .dxm-content {
    border-radius: 2px !important;
}

html[data-theme="dark"] .dxm-popOut img {
    filter: brightness(0) invert(1) !important;
    opacity: .78;
}

/* Flecha principal propia: evita la flecha negra del sprite del skin. */
#ASPxMenu1 .dxm-main .dxm-popOut,
#ASPxMenu1.dxm-main .dxm-popOut,
.dxmLite.menu-erp .dxm-main .dxm-popOut,
.dxmLite.menu-erp.dxm-main .dxm-popOut {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 10px !important;
    min-width: 10px !important;
    height: 10px !important;
    margin-left: 4px !important;
    color: var(--kr-menu-bar-arrow) !important;
    background-image: none !important;
    filter: none !important;
    vertical-align: middle !important;
}

    #ASPxMenu1 .dxm-main .dxm-popOut img,
    #ASPxMenu1.dxm-main .dxm-popOut img,
    .dxmLite.menu-erp .dxm-main .dxm-popOut img,
    .dxmLite.menu-erp.dxm-main .dxm-popOut img {
        display: none !important;
    }

    #ASPxMenu1 .dxm-main .dxm-popOut::after,
    #ASPxMenu1.dxm-main .dxm-popOut::after,
    .dxmLite.menu-erp .dxm-main .dxm-popOut::after,
    .dxmLite.menu-erp.dxm-main .dxm-popOut::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        margin-top: 2px;
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        border-top: 4px solid currentColor;
        transform: none;
    }

#ASPxMenu1 .dxm-main .dxm-hovered .dxm-popOut,
#ASPxMenu1 .dxm-main .dxm-selected .dxm-popOut,
#ASPxMenu1.dxm-main .dxm-hovered .dxm-popOut,
#ASPxMenu1.dxm-main .dxm-selected .dxm-popOut,
.dxmLite.menu-erp .dxm-main .dxm-hovered .dxm-popOut,
.dxmLite.menu-erp .dxm-main .dxm-selected .dxm-popOut,
.dxmLite.menu-erp.dxm-main .dxm-hovered .dxm-popOut,
.dxmLite.menu-erp.dxm-main .dxm-selected .dxm-popOut {
    color: var(--kr-menu-bar-arrow-hover) !important;
}

html[data-theme="light"] .dxm-popup .dxm-popOut img,
html[data-theme="light"] .dxm-subMenu .dxm-popOut img {
    filter: brightness(0) saturate(100%) !important;
    opacity: .62;
}

@media screen and (max-width: 768px) {

    .menunH,
    .menu-mobile-container,
    .dxmLite.menu-erp.dxm-side-menu-mode {
        overflow: visible !important;
    }

        .dxm-slide-panel.dxm-left,
        .dxmLite.menu-erp.dxm-side-menu-mode .dxm-slide-panel {
            position: fixed !important;
            top: 40px !important;
            bottom: 0 !important;
            /* NO poner left:0; DevExpress lo usa para el slide */

            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
            box-sizing: border-box !important;
            color: var(--kr-menu-popup-text) !important;
            background-color: var(--kr-menu-popup-bg) !important;
            z-index: 12000 !important;
        }

            .dxm-slide-panel.dxm-left .menu-erp .dxm-item,
            .dxm-slide-panel.dxm-left .menu-erp .dxm-content,
            .dxmLite.menu-erp.dxm-side-menu-mode .dxm-slide-panel .dxm-item,
            .dxmLite.menu-erp.dxm-side-menu-mode .dxm-slide-panel .dxm-content {
                color: var(--kr-menu-popup-text) !important;
                background-color: transparent !important;
            }

            .dxm-slide-panel.dxm-left .menu-erp .dxm-hovered,
            .dxm-slide-panel.dxm-left .menu-erp .dxm-hovered .dxm-content,
            .dxmLite.menu-erp.dxm-side-menu-mode .dxm-slide-panel .dxm-hovered,
            .dxmLite.menu-erp.dxm-side-menu-mode .dxm-slide-panel .dxm-hovered .dxm-content {
                color: var(--kr-menu-hover-text) !important;
                background-color: var(--kr-menu-hover-bg) !important;
            }

            .dxm-slide-panel.dxm-left .dxm-bread-crumbs,
            .dxmLite.menu-erp.dxm-side-menu-mode .dxm-bread-crumbs {
                position: sticky !important;
                top: 0 !important;
                width: 100% !important;
                min-height: 44px !important;
                height: 44px !important;
                padding: 0 12px !important;
                line-height: 44px !important;
                display: flex !important;
                align-items: center !important;
                gap: 8px;
                box-sizing: border-box !important;
                color: var(--kr-menu-popup-text) !important;
                background-color: var(--kr-surface-alt) !important;
                border-bottom: 1px solid var(--kr-menu-popup-border) !important;
                z-index: 20 !important;
                opacity: 1 !important;
                visibility: visible !important;
                transition: none !important;
                animation: none !important;
                pointer-events: auto !important;
                touch-action: manipulation;
                cursor: pointer !important;
                user-select: none;
                -webkit-user-select: none;
            }

                .dxm-slide-panel.dxm-left .dxm-bread-crumbs *,
                .dxmLite.menu-erp.dxm-side-menu-mode .dxm-bread-crumbs * {
                    opacity: 1 !important;
                    visibility: visible !important;
                    transition: none !important;
                    animation: none !important;
                    pointer-events: auto !important;
                    cursor: pointer !important;
                }

    /* Wrapper transparente que estaba bloqueando Regresar */
    [id^="ASPxMenu1_DXM"] {
        pointer-events: none !important;
    }

        [id^="ASPxMenu1_DXM"] .dxm-popup,
        [id^="ASPxMenu1_DXM"] .dxm-popup * {
            pointer-events: auto !important;
        }
}

/* =========================================================
   AJAX CONTROL TOOLKIT — CALENDAR EXTENDER
   KRONHOS LIGHT / DARK

   IMPORTANTE:
   No se modifica la geometría interna del CalendarExtender
   (width/height/top/left/position de body/days/months/years).
   AjaxControlToolkit usa esas medidas para las transiciones
   entre días, meses y años.

   Para hacerlo visualmente más grande se escala el control
   completo, sin alterar su layout interno.
   ========================================================= */

html[data-theme="light"] {
    --kr-ajax-calendar-bg: #FFFFFF;
    --kr-ajax-calendar-bg-alt: #F5F7F9;
    --kr-ajax-calendar-text: #263746;
    --kr-ajax-calendar-muted: #7B8996;
    --kr-ajax-calendar-border: #CCD6DF;
    --kr-ajax-calendar-hover: #E8F3FB;
    --kr-ajax-calendar-selected: #0F6CBD;
    --kr-ajax-calendar-selected-text: #FFFFFF;
    --kr-ajax-calendar-today: #0F6CBD;
    --kr-ajax-calendar-disabled: #A7B1BA;
    --kr-ajax-calendar-shadow: rgba(31, 42, 57, .16);
    --kr-ajax-calendar-scale: 1.26;
}

html[data-theme="dark"] {
    --kr-ajax-calendar-bg: #151D24;
    --kr-ajax-calendar-bg-alt: #1D2832;
    --kr-ajax-calendar-text: #E7EDF3;
    --kr-ajax-calendar-muted: #8FA0AE;
    --kr-ajax-calendar-border: #3B4A57;
    --kr-ajax-calendar-hover: #263B49;
    --kr-ajax-calendar-selected: #22C3E6;
    --kr-ajax-calendar-selected-text: #07151A;
    --kr-ajax-calendar-today: #22C3E6;
    --kr-ajax-calendar-disabled: #657582;
    --kr-ajax-calendar-shadow: rgba(0, 0, 0, .34);
    --kr-ajax-calendar-scale: 1.26;
}





/* =========================================================
   KRONHOS AJAX CALENDAR
   Mantener geometría independiente de FlexC / Grid / Tables
   ========================================================= */

.ajax__calendar_container {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    box-sizing: border-box !important;
}

    .ajax__calendar_container .ajax__calendar_header,
    .ajax__calendar_container .ajax__calendar_body,
    .ajax__calendar_container .ajax__calendar_footer {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .ajax__calendar_container .ajax__calendar_days,
    .ajax__calendar_container .ajax__calendar_months,
    .ajax__calendar_container .ajax__calendar_years {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

        .ajax__calendar_container .ajax__calendar_days table,
        .ajax__calendar_container .ajax__calendar_months table,
        .ajax__calendar_container .ajax__calendar_years table {
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            table-layout: fixed !important;
        }

    .ajax__calendar_container .ajax__calendar_body {
        overflow: hidden !important;
    }

    .ajax__calendar_container .ajax__calendar_day {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .ajax__calendar_container .ajax__calendar_days td {
        padding: 0 !important;
        text-align: center !important;
        vertical-align: middle !important;
    }


/* Escalar el control completo: NO redimensionar sus piezas internas. */
html[data-theme] .ajax__calendar_container {
    color: var(--kr-ajax-calendar-text) !important;
    background: var(--kr-ajax-calendar-bg) !important;
    border: 1px solid var(--kr-ajax-calendar-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 6px 18px var(--kr-ajax-calendar-shadow) !important;
    font-family: var(--kr-font-family, Inter, "Segoe UI", sans-serif) !important;
    font-size: 9px !important;
    transform: scale(var(--kr-ajax-calendar-scale)) !important;
    transform-origin: top left !important;
}

/* Cabecera: solo apariencia. */
html[data-theme] .ajax__calendar_header {
    color: var(--kr-ajax-calendar-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 4px !important;
    padding-bottom: 3px !important;
    box-shadow: inset 0 -1px 0 var(--kr-ajax-calendar-border) !important;
}

html[data-theme] .ajax__calendar_title {
    color: var(--kr-ajax-calendar-text) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: capitalize !important;
}

/* Flechas sin tocar su tamaño/posición nativos. */
html[data-theme] .ajax__calendar_prev,
html[data-theme] .ajax__calendar_next {
    color: var(--kr-ajax-calendar-muted) !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

    html[data-theme] .ajax__calendar_prev::before,
    html[data-theme] .ajax__calendar_next::before {
        display: block;
        width: 100%;
        height: 100%;
        font-family: Arial, sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 15px;
        text-align: center;
        color: currentColor;
    }

    html[data-theme] .ajax__calendar_prev::before {
        content: "\2039";
    }

    html[data-theme] .ajax__calendar_next::before {
        content: "\203A";
    }

    html[data-theme] .ajax__calendar_prev:hover,
    html[data-theme] .ajax__calendar_next:hover {
        color: var(--kr-ajax-calendar-selected) !important;
        background: var(--kr-ajax-calendar-hover) !important;
    }

html[data-theme] .ajax__calendar_hover .ajax__calendar_title {
    color: var(--kr-ajax-calendar-selected) !important;
    background: transparent !important;
}

/*
   BODY / DAYS / MONTHS / YEARS
   Solo colores. No width, height, position, top, left,
   margin, padding ni table-layout.
*/
html[data-theme] .ajax__calendar_body,
html[data-theme] .ajax__calendar_days,
html[data-theme] .ajax__calendar_months,
html[data-theme] .ajax__calendar_years {
    color: var(--kr-ajax-calendar-text) !important;
    background-color: var(--kr-ajax-calendar-bg) !important;
}

/* Neutralizar únicamente estilos globales que suelen contaminar la tabla. */
html[data-theme] .ajax__calendar_container table {
    font-family: inherit !important;
    font-size: inherit !important;
    background: transparent !important;
}

html[data-theme] .ajax__calendar_container td {
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
}

/* Texto */
html[data-theme] .ajax__calendar_dayname {
    color: var(--kr-ajax-calendar-muted) !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    letter-spacing: .015em !important;
    padding-top: 2px !important;
}

html[data-theme] .ajax__calendar_day {
    color: var(--kr-ajax-calendar-text) !important;
    background-color: transparent !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

html[data-theme] .ajax__calendar_month,
html[data-theme] .ajax__calendar_year {
    color: var(--kr-ajax-calendar-text) !important;
    background-color: transparent !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

html[data-theme] .ajax__calendar_month {
    text-transform: capitalize !important;
}

/* Hover: outline no modifica la geometría. */
html[data-theme] .ajax__calendar_hover .ajax__calendar_day,
html[data-theme] .ajax__calendar_hover .ajax__calendar_month,
html[data-theme] .ajax__calendar_hover .ajax__calendar_year {
    color: var(--kr-ajax-calendar-text) !important;
    background-color: var(--kr-ajax-calendar-hover) !important;
    border-radius: 3px !important;
    outline: 0 !important;
}

/* Seleccionado */
html[data-theme] .ajax__calendar_active .ajax__calendar_day {
    color: var(--kr-ajax-calendar-selected-text) !important;
    background-color: var(--kr-ajax-calendar-selected) !important;
    border-radius: 3px !important;
    outline: 0 !important;
    font-weight: 600 !important;
}

/* Mes/año seleccionado: énfasis más sutil que un bloque sólido grande. */
html[data-theme] .ajax__calendar_active .ajax__calendar_month,
html[data-theme] .ajax__calendar_active .ajax__calendar_year {
    color: var(--kr-ajax-calendar-selected) !important;
    background-color: var(--kr-ajax-calendar-hover) !important;
    border-radius: 3px !important;
    outline: 1px solid var(--kr-ajax-calendar-selected) !important;
    outline-offset: -1px !important;
    font-weight: 600 !important;
}

/* Hoy */
html[data-theme] .ajax__calendar_today .ajax__calendar_day,
html[data-theme] .ajax__calendar_today .ajax__calendar_month,
html[data-theme] .ajax__calendar_today .ajax__calendar_year {
    color: var(--kr-ajax-calendar-today) !important;
    font-weight: 600 !important;
    border-radius: 3px !important;
    outline: 0 !important;
}

html[data-theme] .ajax__calendar_active.ajax__calendar_today .ajax__calendar_day {
    color: var(--kr-ajax-calendar-selected-text) !important;
}

html[data-theme] .ajax__calendar_active.ajax__calendar_today .ajax__calendar_month,
html[data-theme] .ajax__calendar_active.ajax__calendar_today .ajax__calendar_year {
    color: var(--kr-ajax-calendar-selected) !important;
}

/* Fuera del mes / rango */
html[data-theme] .ajax__calendar_other .ajax__calendar_day,
html[data-theme] .ajax__calendar_other .ajax__calendar_year {
    color: var(--kr-ajax-calendar-muted) !important;
    opacity: .72 !important;
}

html[data-theme] .ajax__calendar_invalid .ajax__calendar_day,
html[data-theme] .ajax__calendar_invalid .ajax__calendar_month,
html[data-theme] .ajax__calendar_invalid .ajax__calendar_year {
    color: var(--kr-ajax-calendar-disabled) !important;
    text-decoration: line-through !important;
    cursor: default !important;
}

/* Footer: solo apariencia. */
html[data-theme] .ajax__calendar_footer {
    color: var(--kr-ajax-calendar-muted) !important;
    background-color: transparent !important;
    box-shadow: inset 0 1px 0 var(--kr-ajax-calendar-border) !important;
}

html[data-theme] .ajax__calendar_today {
    color: var(--kr-ajax-calendar-muted) !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
}

    html[data-theme] .ajax__calendar_today:hover {
        color: var(--kr-ajax-calendar-selected) !important;
        background-color: transparent !important;
    }

/*
   En pantallas estrechas reducimos SOLO la escala.
   Seguimos sin tocar la geometría interna.
*/
@media screen and (max-width: 480px) {
    html[data-theme] {
        --kr-ajax-calendar-scale: 1.22;
    }
}

/* =========================================================
   DROPDOWNS TÁCTILES
   No altera el tamaño compacto cuando se utiliza mouse.
   ========================================================= */

@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
    /* ASP:DropDownList y select HTML. */
    html[data-theme] select,
    html[data-theme] select.DropDown,
    html[data-theme] select.DropDownO,
    html[data-theme] select.newDropDown,
    html[data-theme] select.newDropDownG,
    html[data-theme] select.DDmn,
    html[data-theme] .DropDown select,
    html[data-theme] .DropDownO select,
    html[data-theme] .DDmn select {
        min-height: 30px !important;
        height: 30px !important;
        padding: 0 38px 0 10px !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        color: var(--kr-input-text, #243447) !important;
        background-color: var(--kr-input-bg, #FFFFFF) !important;
        border: 1px solid var(--kr-border-control, #CCD6DF) !important;
        border-radius: 5px !important;
        touch-action: manipulation;
    }

        html[data-theme] select[multiple],
        html[data-theme] select[size]:not([size="1"]) {
            height: auto !important;
            min-height: 132px !important;
            padding: 4px !important;
        }

        html[data-theme] select option {
            min-height: 30px;
            padding: 11px 10px;
            font-size: 14px !important;
        }

        html[data-theme] select:focus-visible {
            border-color: var(--kr-primary-strong, #32678B) !important;
            outline: 0 !important;
            box-shadow: var(--kr-focus-ring, 0 0 0 3px rgba(15, 108, 189, .15)) !important;
        }

        html[data-theme] select:disabled {
            color: var(--kr-disabled-text, #66788A) !important;
            background-color: var(--kr-disabled-bg, #F1F4F7) !important;
            border-color: var(--kr-disabled-border, #D8E0E7) !important;
        }

    /* Select2: control cerrado. */
    html[data-theme] .select2-container .select2-selection--single,
    html[data-theme] .select2-container--default .select2-selection--single {
        min-height: 30px !important;
        height: 30px !important;
        border-radius: 5px !important;
        touch-action: manipulation;
    }

        html[data-theme] .select2-container--default
        .select2-selection--single .select2-selection__rendered {
            height: 30px !important;
            padding: 0 48px 0 11px !important;
            font-size: 14px !important;
            line-height: 30px !important;
        }

        html[data-theme] .select2-container--default
        .select2-selection--single .select2-selection__arrow {
            top: 0 !important;
            right: 0 !important;
            width: 30px !important;
            height: 30px !important;
        }

    /* Select2 múltiple y sus etiquetas. */
    html[data-theme] .select2-container--default .select2-selection--multiple {
        min-height: 30px !important;
        padding: 4px 6px !important;
        border-radius: 5px !important;
    }

        html[data-theme] .select2-container--default
        .select2-selection--multiple .select2-selection__choice {
            min-height: 32px !important;
            margin: 2px 4px 2px 0 !important;
            padding: 5px 9px 5px 32px !important;
            line-height: 20px !important;
            border-radius: 5px !important;
        }

        html[data-theme] .select2-container--default
        .select2-selection--multiple .select2-selection__choice__remove {
            width: 32px !important;
            min-height: 32px !important;
            font-size: 18px !important;
            line-height: 30px !important;
        }

    /* Select2: buscador y opciones del popup. */
    html[data-theme] .select2-search--dropdown {
        padding: 6px !important;
    }

        html[data-theme] .select2-search--dropdown .select2-search__field {
            min-height: 30px !important;
            padding: 8px 10px !important;
            font-size: 14px !important;
            border-radius: 5px !important;
        }

    html[data-theme] .select2-results__option {
        display: flex !important;
        align-items: center !important;
        min-height: 30px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        text-align: left !important;
        touch-action: manipulation;
    }

    /* DevExpress ASPxComboBox y dropdowns equivalentes. */
    html[data-theme] table[class*="dxeButtonEdit"] {
        min-height: 30px !important;
        height: 30px !important;
        color: var(--kr-input-text, #243447) !important;
        background-color: var(--kr-input-bg, #FFFFFF) !important;
        border-color: var(--kr-border-control, #CCD6DF) !important;
        border-radius: 5px !important;
    }

    html[data-theme] input[class*="dxeEditArea"] {
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 10px !important;
        font-size: 14px !important;
        line-height: 42px !important;
        color: var(--kr-input-text, #243447) !important;
        background-color: transparent !important;
    }

    html[data-theme] table[class*="dxeButtonEdit"] td[class*="dxeButton"] {
        min-width: 30px !important;
        width: 30px !important;
        height: 42px !important;
        padding: 0 !important;
        text-align: center !important;
        touch-action: manipulation;
    }

    html[data-theme] [class*="dxeDropDownWindow"] {
        color: var(--kr-input-text, #243447) !important;
        background-color: var(--kr-input-bg, #FFFFFF) !important;
        border-color: var(--kr-border-control, #CCD6DF) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .22) !important;
    }

    html[data-theme] [class*="dxeListBoxItem"] {
        box-sizing: border-box !important;
        min-height: 30px !important;
        padding: 11px 12px !important;
        font-size: 14px !important;
        line-height: 20px !important;
        color: var(--kr-input-text, #243447) !important;
        background-color: var(--kr-input-bg, #FFFFFF) !important;
        touch-action: manipulation;
    }

    html[data-theme] [class*="dxeListBoxItemHover"] {
        color: var(--kr-selected-text, #263746) !important;
        background-color: var(--kr-hover-strong, #DCEAFF) !important;
    }

    html[data-theme] [class*="dxeListBoxItemSelected"] {
        color: var(--kr-selected-text, #263746) !important;
        background-color: var(--kr-selected-bg, #F4F7F9) !important;
        font-weight: 600 !important;
    }

    html[data-theme] table[class*="dxeButtonEditDisabled"],
    html[data-theme] table[class*="dxeDisabled"] {
        color: var(--kr-disabled-text, #66788A) !important;
        background-color: var(--kr-disabled-bg, #F1F4F7) !important;
        border-color: var(--kr-disabled-border, #D8E0E7) !important;
    }
}


/* =========================================================
   KRONHOS SHELL DARK - SOLO COLORES
   Esta capa se carga al final y unifica barra superior/inferior.
   ========================================================= */
html[data-theme="dark"] .menunH,
html[data-theme="dark"] #usuario,
html[data-theme="dark"] .menu-mobile-container,
html[data-theme="dark"] .dxmLite.dxm-side-menu-mode .dxm-bread-crumbs {
    background-color: var(--kr-shell-bar-bg, #081A2E) !important;
    color: var(--kr-shell-bar-text, #F5F9FF) !important;
    border-color: var(--kr-shell-bar-border, rgba(123, 215, 255, .16)) !important;
}

html[data-theme="dark"] #menu_navigators,
html[data-theme="dark"] #lblUbicacion,
html[data-theme="dark"] .icons_down_der,
html[data-theme="dark"] .icons_down_der a,
html[data-theme="dark"] .icons_down_izq,
html[data-theme="dark"] .icons_down_izq a,
html[data-theme="dark"] .felec_img,
html[data-theme="dark"] .felec_text {
    color: var(--kr-shell-bar-text, #F5F9FF) !important;
}

    html[data-theme="dark"] .icons_down_der:hover,
    html[data-theme="dark"] .icons_down_izq:hover {
        background-color: var(--kr-shell-bar-hover, #12395D) !important;
    }

html[data-theme="dark"] .barraInferior,
html[data-theme="dark"] .barraInferiorfixed {
    background-color: var(--kr-shell-bar-bg, #081A2E) !important;
    color: var(--kr-shell-bar-text, #F5F9FF) !important;
    border-color: var(--kr-shell-bar-border, rgba(123, 215, 255, .16)) !important;
}

/* =========================================================
   FOCO DE CONTROLES - KRONHOS LIGHT / DARK
   Resalta el control activo con una transición suave.
   No modifica medidas, posiciones ni comportamiento.
   ========================================================= */

:root {
    --kr-control-focus-border: var(--kr-primary-strong, #0F6CBD);
    --kr-control-focus-ring: rgba(15, 108, 189, .20);
}

html[data-theme="light"] {
    --kr-control-focus-border: var(--kr-primary-strong, #0F6CBD);
    --kr-control-focus-ring: rgba(15, 108, 189, .20);
}

html[data-theme="dark"] {
    --kr-control-focus-border: var(--kr-primary-strong, #31B1FF);
    --kr-control-focus-ring: rgba(49, 177, 255, .24);
}


/* =========================================================
   TRANSICIÓN DE FOCO
   ========================================================= */

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
select,
textarea,
a,
.select2-selection--single,
.select2-selection--multiple,
table[class*="dxeButtonEdit"] {
    transition: border-color .16s ease, box-shadow .16s ease !important;
}


    /* =========================================================
   INPUT / SELECT / TEXTAREA
   ========================================================= */

    input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
    input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus-visible,
    select:focus,
    select:focus-visible,
    textarea:focus,
    textarea:focus-visible {
        border-color: var(--kr-control-focus-border) !important;
        outline: 0 !important;
        box-shadow: 0 0 0 2px var(--kr-control-focus-ring) !important;
    }


    /* =========================================================
   ENLACES / BOTONES TIPO LINK
   Mismo efecto visual que los controles anteriores.
   ========================================================= */

    a:focus,
    a:focus-visible,
    a.linksbtnimg:focus,
    a.linksbtnimg:focus-visible,
    .linksbtnimg:focus,
    .linksbtnimg:focus-visible {
        border-color: var(--kr-control-focus-border) !important;
        outline: 0 !important;
        box-shadow: 0 0 0 2px var(--kr-control-focus-ring) !important;
        border-radius: 4px;
    }


/* =========================================================
   SELECT2
   ========================================================= */

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--kr-control-focus-border) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 2px var(--kr-control-focus-ring) !important;
}

/* Buscador interno del popup de Select2. */
.select2-container--default .select2-search--dropdown .select2-search__field {
    transition: border-color .16s ease, box-shadow .16s ease !important;
}

    .select2-container--default .select2-search--dropdown .select2-search__field:focus,
    .select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
        border-color: var(--kr-control-focus-border) !important;
        outline: 0 !important;
        box-shadow: 0 0 0 2px var(--kr-control-focus-ring) !important;
    }


/* =========================================================
   DEVEXPRESS - BUTTONEDIT / COMBOBOX
   ========================================================= */

table[class*="dxeButtonEdit"]:focus-within {
    border-color: var(--kr-control-focus-border) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 2px var(--kr-control-focus-ring) !important;
}


/* =========================================================
   ACCESIBILIDAD - REDUCIR MOVIMIENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html[data-theme] input,
    html[data-theme] select,
    html[data-theme] textarea,
    html[data-theme] a,
    html[data-theme] .select2-selection--single,
    html[data-theme] .select2-selection--multiple,
    html[data-theme] table[class*="dxeButtonEdit"],
    html[data-theme] .select2-search--dropdown .select2-search__field {
        transition: none !important;
    }
}










/* ============================================================
   ASPxGridView DevExpress -> apariencia GridView Kronhos
   Uso: CssClass="gridview aspxgridview"
   Colocar AL FINAL de KronhosThemeOverrides.css
   ============================================================ */

/* ---------- Control / superficie ---------- */
.aspxgridview[class*="dxgvControl"],
.aspxgridview {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 10px !important;
    font-family: "Inter", sans-serif !important;
    font-size: 10px !important;
    color: var(--kr-text) !important;
    background: var(--kr-surface) !important;
    background-image: none !important;
    border: 1px solid var(--kr-border) !important;
    outline: 0 !important;
    box-shadow: none !important;
}

    .aspxgridview [class*="dxgvTable"] {
        width: 100% !important;
        max-width: 100% !important;
        background: var(--kr-surface) !important;
        color: var(--kr-text) !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border: 0 !important;
    }

    /* ---------- Toolbar ---------- */
    .aspxgridview [class*="dxgvToolbar"] {
        min-height: 32px !important;
        padding: 5px 6px !important;
        box-sizing: border-box !important;
        color: var(--kr-text) !important;
        background: var(--kr-surface) !important;
        background-image: none !important;
        border: 0 !important;
        border-bottom: 1px solid var(--kr-border) !important;
        box-shadow: none !important;
    }

        .aspxgridview [class*="dxgvToolbar"] a,
        .aspxgridview [class*="dxgvToolbar"] span {
            color: var(--kr-text) !important;
            font-family: "Inter", sans-serif !important;
            text-decoration: none !important;
        }

    /* ---------- Panel de agrupación ---------- */
    .aspxgridview [class*="dxgvGroupPanel"] {
        min-height: 30px !important;
        padding: 7px 8px !important;
        box-sizing: border-box !important;
        color: var(--kr-text-muted) !important;
        background: var(--kr-surface-alt) !important;
        background-image: none !important;
        border: 0 !important;
        border-bottom: 1px solid var(--kr-border) !important;
        box-shadow: none !important;
        filter: none !important;
    }

    /* ---------- Cabecera: igual al GridView Kronhos ---------- */
    .aspxgridview [class*="dxgvHeader"] {
        height: 35px !important;
        box-sizing: border-box !important;
        padding: 5px !important;
        vertical-align: middle !important;
        font-family: "Inter", sans-serif !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        color: var(--kr-text-heading) !important;
        background: var(--kr-surface-alt) !important;
        background-image: none !important;
        border: 0 !important;
        border-bottom: 1px solid var(--kr-border) !important;
        outline: 0 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
    }

        .aspxgridview [class*="dxgvHeader"] a,
        .aspxgridview [class*="dxgvHeader"] span {
            color: var(--kr-text) !important;
            font-family: "Inter", sans-serif !important;
            font-size: 10px !important;
            font-weight: 400 !important;
            text-decoration: none !important;
        }

            .aspxgridview [class*="dxgvHeader"] a:hover {
                color: var(--kr-text) !important;
                text-decoration: underline !important;
            }

        /* Quitar líneas/azules de botones de orden y header-filter sin quitar botones */
        .aspxgridview [class*="dxgvHeader"] [class*="dxgvHeaderFilter"],
        .aspxgridview [class*="dxgvHeader"] [class*="dxgvFilter"],
        .aspxgridview [class*="dxgvHeader"] [class*="dxEditors"] {
            border-color: var(--kr-border-control) !important;
            outline: 0 !important;
            box-shadow: none !important;
        }

    /* ---------- Filter row ---------- */
    .aspxgridview [class*="dxgvFilterRow"] {
        background: var(--kr-surface) !important;
    }

        .aspxgridview [class*="dxgvFilterRow"] > td {
            height: 30px !important;
            padding: 3px !important;
            box-sizing: border-box !important;
            background: var(--kr-surface) !important;
            border: 0 !important;
            border-bottom: 1px solid var(--kr-border) !important;
        }

    .aspxgridview [class*="dxeTextBox"],
    .aspxgridview [class*="dxeButtonEdit"] {
        box-sizing: border-box !important;
        color: var(--kr-text) !important;
        background: var(--kr-surface) !important;
        background-image: none !important;
        border: 1px solid var(--kr-border-control) !important;
        outline: 0 !important;
        box-shadow: none !important;
        filter: none !important;
    }

    .aspxgridview [class*="dxeEditArea"] {
        color: var(--kr-text) !important;
        background: var(--kr-surface) !important;
        font-family: "Inter", sans-serif !important;
        font-size: 10px !important;
        outline: 0 !important;
    }

    .aspxgridview [class*="dxeButtonEditButton"],
    .aspxgridview [class*="dxeButton"] {
        color: var(--kr-text) !important;
        background: var(--kr-surface-alt) !important;
        background-image: none !important;
        border-color: var(--kr-border-control) !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    /* ---------- Datos: SIN líneas verticales, como GridView original ---------- */
    .aspxgridview [class*="dxgvDataRow"],
    .aspxgridview [class*="dxgvDataRowAlt"] {
        height: 35px !important;
        color: var(--kr-text) !important;
        background: var(--kr-surface) !important;
    }

        .aspxgridview [class*="dxgvDataRow"] > td,
        .aspxgridview [class*="dxgvDataRowAlt"] > td {
            height: 35px !important;
            padding: 3px !important;
            box-sizing: border-box !important;
            vertical-align: middle !important;
            color: var(--kr-text) !important;
            background: var(--kr-surface) !important;
            font-family: "Inter", sans-serif !important;
            font-size: 10px !important;
            /* Igual que .aspxgridview td de General.css: sólo separación horizontal */
            border: 0 !important;
            border-top: 1px solid var(--kr-border) !important;
        }

        /* Alternating row no agrega zebra propia de DevExpress */
        .aspxgridview [class*="dxgvDataRowAlt"] > td {
            background: var(--kr-surface) !important;
        }

        /* Hover Kronhos */
        .aspxgridview [class*="dxgvDataRow"]:hover > td,
        .aspxgridview [class*="dxgvDataRowAlt"]:hover > td,
        .aspxgridview [class*="dxgvDataRowHover"] > td {
            background: var(--kr-hover) !important;
            color: var(--kr-text) !important;
        }

    /* Focus / selección sin amarillo ni borde azul */
    .aspxgridview [class*="dxgvFocusedRow"] > td,
    .aspxgridview [class*="dxgvSelectedRow"] > td {
        color: var(--kr-selected-text, var(--kr-text)) !important;
        background: var(--kr-selected-bg, var(--kr-hover)) !important;
        border-left: 0 !important;
        border-right: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    /* ---------- Filas agrupadas ---------- */
    .aspxgridview [class*="dxgvGroupRow"],
    .aspxgridview [class*="dxgvGroupRow"] > td {
        color: var(--kr-text) !important;
        background: var(--kr-surface-alt) !important;
        border: 0 !important;
        border-top: 1px solid var(--kr-border) !important;
    }

    /* ---------- Pager ---------- */
    .aspxgridview [class*="dxgvPagerBottomPanel"],
    .aspxgridview [class*="dxgvPagerTopPanel"] {
        padding: 5px !important;
        box-sizing: border-box !important;
        color: var(--kr-text) !important;
        background: var(--kr-surface) !important;
        background-image: none !important;
        border: 0 !important;
        border-top: 1px solid var(--kr-border) !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    .aspxgridview [class*="dxpLite"] {
        color: var(--kr-text) !important;
        background: transparent !important;
        font-family: "Inter", sans-serif !important;
        font-size: 10px !important;
    }

    /* ---------- Scroll interno DevExpress ---------- */
    .aspxgridview [class*="dxgvCSD"],
    .aspxgridview [class*="dxgvHSDC"],
    .aspxgridview [class*="dxgvVSDC"],
    .aspxgridview [class*="dxgvFSDC"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: var(--kr-surface) !important;
        border-color: var(--kr-border) !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    /* Evita bordes azules residuales generados por el skin de DevExpress */
    .aspxgridview table,
    .aspxgridview td,
    .aspxgridview th {
        outline-color: transparent !important;
    }

/* ==========================================================
   CONTENEDORES DEL GRID
   No recortar el pager de DevExpress.
   El scroll de datos sigue siendo interno del ASPxGridView.
   ========================================================== */

#gridContainer,
#divScroll,
#divScroll .divscrollflexin {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

    /*
   IMPORTANTE:
   overflow:hidden recorta el PagerBottomPanel porque DevExpress
   lo renderiza fuera del área scrollable de datos.
*/
    #gridContainer,
    #divScroll,
    #divScroll .divscrollflexin {
        overflow: visible !important;
    }

/* ==========================================================
   PAGER - mantener estructura nativa de DevExpress
   IMPORTANTE: no cambiar su display a table-row.
   Eso hacía que el pager se encogiera y DevExpress ocultara
   los botones numéricos.
   ========================================================== */

.aspxgridview [class*="dxgvPagerBottomPanel"],
.aspxgridview [class*="dxgvPagerTopPanel"] {
    visibility: visible !important;
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
}

/* Pager siempre a todo el ancho disponible. */
.aspxgridview [class*="dxpLite"] {
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

    /*
   Botones numéricos/anterior/siguiente:
   dimensiones fijas para que NO se muevan al pasar el mouse.
*/
    .aspxgridview [class*="dxpLite"] a,
    .aspxgridview [class*="dxpLite"] span {
        box-sizing: border-box !important;
    }

    .aspxgridview [class*="dxpLite"] [class*="dxp-num"],
    .aspxgridview [class*="dxpLite"] [class*="dxp-current"],
    .aspxgridview [class*="dxpLite"] [class*="dxp-button"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 26px !important;
        height: 26px !important;
        margin: 0 2px !important;
        padding: 0 6px !important;
        border: 1px solid transparent !important;
        border-radius: 3px !important;
        line-height: 24px !important;
        vertical-align: middle !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }

        /* Hover sin cambio de tamaño, margen o posición. */
        .aspxgridview [class*="dxpLite"] [class*="dxp-num"]:hover,
        .aspxgridview [class*="dxpLite"] [class*="dxp-button"]:hover {
            margin: 0 2px !important;
            padding: 0 6px !important;
            border-width: 1px !important;
            top: auto !important;
            left: auto !important;
            transform: none !important;
        }

    /* Página actual: misma geometría que los demás botones. */
    .aspxgridview [class*="dxpLite"] [class*="dxp-current"] {
        font-weight: 600 !important;
    }


/* ============================================================
   AJUSTES RESPONSIVE DEL ASPxGridView
   En pantallas reducidas el grid debe adaptarse sin dañarse.
   ============================================================ */
@media screen and (max-width: 980px) {
    .aspxgridview,
    #gridContainer,
    #divScroll,
    #divScroll .divscrollflexin {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

        /* Permitir scroll horizontal interno suave cuando aún haga falta.
       La prioridad es: primero adaptividad, luego scroll interno. */
        .aspxgridview [class*="dxgvCSD"],
        .aspxgridview [class*="dxgvHSDC"],
        .aspxgridview [class*="dxgvVSDC"],
        .aspxgridview [class*="dxgvFSDC"] {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }

        /* Cabecera/filtros un poco más compactos */
        .aspxgridview [class*="dxgvHeader"] {
            padding: 4px 4px !important;
            font-size: 9px !important;
        }

            .aspxgridview [class*="dxgvHeader"] a,
            .aspxgridview [class*="dxgvHeader"] span,
            .aspxgridview [class*="dxeEditArea"],
            .aspxgridview [class*="dxpLite"] {
                font-size: 9px !important;
            }

        .aspxgridview [class*="dxgvFilterRow"] > td {
            padding: 2px !important;
        }

        .aspxgridview [class*="dxeTextBox"],
        .aspxgridview [class*="dxeButtonEdit"] {
            width: 100% !important;
            min-width: 0 !important;
        }

        /* El pager puede desplazarse horizontalmente si el ancho es muy poco,
       en lugar de romper el layout. */
        .aspxgridview [class*="dxgvPagerBottomPanel"],
        .aspxgridview [class*="dxgvPagerTopPanel"] {
            overflow-x: auto !important;
            overflow-y: hidden !important;
        }

        .aspxgridview [class*="dxpLite"] {
            width: max-content !important;
            min-width: 100% !important;
            white-space: nowrap !important;
        }
}


/* ============================================================
   ASPxGridView - MODO MÓVIL / LISTA ADAPTIVA
   DevExpress cambia automáticamente a Adaptive Layout cuando
   el viewport es <= 700px (HideDataCellsWindowLimit).
   ============================================================ */
@media screen and (max-width: 700px) {

    /* Eliminar cualquier desplazamiento lateral del control.
       El ASPxGridView debe comenzar en el borde izquierdo real
       de su contenedor y ocupar todo el ancho disponible. */
    #gridContainer,
    #gridContainer > div,
    #divScroll,
    #divScroll .divscrollflexin,
    .aspxgridview {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .aspxgridview {
        float: none !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
    }

        /* En modo adaptivo ya no necesitamos scroll horizontal:
       DevExpress reorganiza cada registro como detalle/lista. */
        .aspxgridview [class*="dxgvCSD"],
        .aspxgridview [class*="dxgvHSDC"],
        .aspxgridview [class*="dxgvVSDC"],
        .aspxgridview [class*="dxgvFSDC"] {
            max-width: 100% !important;
            overflow-x: hidden !important;
        }

        /* Superficies del modo adaptivo */
        .aspxgridview [class*="dxgvAdaptive"] {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        .aspxgridview [class*="dxgvAdaptiveDetailRow"] > td,
        .aspxgridview [class*="dxgvAdaptiveDetailCell"] {
            width: 100% !important;
            max-width: 100% !important;
            padding: 6px 8px !important;
            color: var(--kr-text) !important;
            background: var(--kr-surface) !important;
            border: 0 !important;
            border-top: 1px solid var(--kr-border) !important;
            box-sizing: border-box !important;
        }

        /* FormLayout que DevExpress utiliza internamente para el
       detalle adaptivo: una sola columna y sin márgenes laterales. */
        .aspxgridview [class*="dxfl"],
        .aspxgridview [class*="dxfl"] table {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            box-sizing: border-box !important;
        }

        .aspxgridview [class*="dxflCaption"],
        .aspxgridview [class*="dxflItem"] {
            color: var(--kr-text) !important;
            background: transparent !important;
            font-family: "Inter", sans-serif !important;
            font-size: 10px !important;
        }

        .aspxgridview [class*="dxflCaption"] {
            color: var(--kr-text-muted) !important;
            font-weight: 600 !important;
        }

        /* Toolbar y panel de agrupación ocupan exactamente el ancho
       del grid, sin sangría lateral. */
        .aspxgridview [class*="dxgvToolbar"],
        .aspxgridview [class*="dxgvGroupPanel"],
        .aspxgridview [class*="dxgvPagerBottomPanel"],
        .aspxgridview [class*="dxgvPagerTopPanel"] {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            box-sizing: border-box !important;
        }

        /* Pager móvil: si hay muchos números puede desplazarse sólo
       dentro del pager, nunca desplazar todo el grid. */
        .aspxgridview [class*="dxgvPagerBottomPanel"],
        .aspxgridview [class*="dxgvPagerTopPanel"] {
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
        }
}


/* ============================================================
   FIX MÓVIL - eliminar sangría izquierda interna de DevExpress
   Basado en el HTML real generado por ASPxGridView 22.2:
   dxmLite / dxgvAdaptiveGroupPanel / dxgvAdaptiveHeaderPanel /
   dxgvCSD / dxgvPagerBottomPanel.
   ============================================================ */
@media screen and (max-width: 700px) {

    /* Celda raíz del ASPxGridView: sin padding heredado de .aspxgridview td */
    .aspxgridview > tbody > tr > td {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

        /* Todos los bloques principales deben comenzar exactamente en x=0 */
        .aspxgridview > tbody > tr > td > .dxmLite,
        .aspxgridview > tbody > tr > td > [class*="dxgvAdaptiveGroupPanel"],
        .aspxgridview > tbody > tr > td > [class*="dxgvAdaptiveHeaderPanel"],
        .aspxgridview > tbody > tr > td > [class*="dxgvCSD"],
        .aspxgridview > tbody > tr > td > [class*="dxgvPagerBottomPanel"],
        .aspxgridview > tbody > tr > td > [class*="dxgvPagerTopPanel"] {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            left: 0 !important;
            right: auto !important;
            transform: none !important;
            box-sizing: border-box !important;
        }

    /* Toolbar DevExpress */
    .aspxgridview .dxmLite,
    .aspxgridview .dxm-main,
    .aspxgridview .dxctToolbar,
    .aspxgridview .dxgvCTTop {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Panel de cabeceras adaptivas */
    .aspxgridview [class*="dxgvAdaptiveHeaderPanel"],
    .aspxgridview .dxgvADH,
    .aspxgridview .dxgvADH > table {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Zona scrollable y tabla principal */
    .aspxgridview [class*="dxgvCSD"],
    .aspxgridview #ContentPlaceHolder1_GVAsiento1_DXMainTable,
    .aspxgridview [id$="_DXMainTable"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Detalle adaptivo tipo lista */
    .aspxgridview .dxgvAdaptiveDetailCell {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .aspxgridview .dxgvADT {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    .aspxgridview .dxgvADCC {
        width: 34% !important;
        padding: 4px 8px 4px 0 !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
    }

    .aspxgridview .dxgvADDC {
        width: 66% !important;
        padding: 4px 0 !important;
        vertical-align: top !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }

    /* No permitir que un ancho interno obligue a desplazar toda la página */
    #gridContainer,
    #divScroll,
    #divScroll .divscrollflexin {
        overflow-x: hidden !important;
    }
}


/* ============================================================
   FIX CRÍTICO: General.css convierte .gridview en tarjetas móviles
   y NO debe aplicarse al ASPxGridView de DevExpress.

   General.css usa, en móvil:
     .gridview { display:block }
     .gridview > tbody { display:block }
     .gridview > tbody > tr { display:block; padding:8px 12px }
     .gridview > tbody > tr > td { display:block; padding-left:130px }

   En ASPxGridView el TR/TD raíz NO es una fila de datos:
   contiene TODO el control DevExpress. Ese padding-left:130px
   era exactamente el espacio blanco que quedaba a la izquierda.
   ============================================================ */
@media screen and (max-width: 700px) {

    /* Restaurar la estructura TABLE real del control DevExpress */
    table.aspxgridview {
        display: table !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-collapse: separate !important;
    }

        table.aspxgridview > tbody {
            display: table-row-group !important;
            width: 100% !important;
        }

            /* El ASPxGridView raíz tiene un único TR contenedor.
       NO convertirlo en tarjeta. */
            table.aspxgridview > tbody > tr {
                display: table-row !important;
                width: auto !important;
                height: auto !important;
                margin: 0 !important;
                padding: 0 !important;
                background: transparent !important;
                border: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
            }

                /* Este TD contiene toolbar + adaptive header + datos + pager.
       General.css le estaba agregando 130px a la izquierda. */
                table.aspxgridview > tbody > tr > td {
                    display: table-cell !important;
                    position: static !important;
                    width: auto !important;
                    min-width: 0 !important;
                    max-width: none !important;
                    height: auto !important;
                    margin: 0 !important;
                    padding: 0 !important;
                    text-align: left !important;
                    background: transparent !important;
                    border: 0 !important;
                    box-sizing: border-box !important;
                }

                    /* El pseudo-label móvil del GridView ASP.NET tampoco corresponde
       al TD contenedor del ASPxGridView. */
                    table.aspxgridview > tbody > tr > td::before {
                        content: none !important;
                        display: none !important;
                    }

                    /* General.css también transforma todos los enlaces que están
       dentro del TD raíz. Restauramos una geometría neutra y dejamos
       que DevExpress/KronhosThemeOverrides estilice cada componente. */
                    table.aspxgridview > tbody > tr > td a {
                        min-height: 0 !important;
                        font-size: inherit !important;
                    }

                    /* Los hijos directos del TD raíz no pertenecen al grid de tarjetas. */
                    table.aspxgridview > tbody > tr > td > * {
                        grid-column: auto !important;
                        margin-left: 0 !important;
                        max-width: 100% !important;
                    }

        /* Asegurar que todos los grandes bloques DevExpress ocupen
       desde el borde izquierdo hasta el derecho. */
        table.aspxgridview .dxmLite,
        table.aspxgridview .dxm-main,
        table.aspxgridview .dxgvAdaptiveGroupPanel,
        table.aspxgridview .dxgvAdaptiveHeaderPanel,
        table.aspxgridview .dxgvCSD,
        table.aspxgridview .dxgvPagerBottomPanel,
        table.aspxgridview .dxgvPagerTopPanel {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            box-sizing: border-box !important;
        }
}



/* ============================================================
   ASPxGridView MÓVIL - AISLADO DE .gridview
   IMPORTANTE:
   El ASPxGridView ya NO usa la clase .gridview porque General.css
   convierte .gridview en tarjetas móviles y agrega padding-left.
   ============================================================ */
@media screen and (max-width: 700px) {

    table.aspxgridview {
        display: table !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 5px 0 0 0 !important;
        padding: 0 !important;
        border-collapse: separate !important;
        box-sizing: border-box !important;
    }

        table.aspxgridview > tbody {
            display: table-row-group !important;
            width: 100% !important;
        }

            table.aspxgridview > tbody > tr {
                display: table-row !important;
                margin: 0 !important;
                padding: 0 !important;
                border: 0 !important;
                box-shadow: none !important;
                background: transparent !important;
            }

                table.aspxgridview > tbody > tr > td {
                    display: table-cell !important;
                    position: static !important;
                    width: auto !important;
                    min-width: 0 !important;
                    max-width: none !important;
                    margin: 0 !important;
                    padding: 0 !important;
                    border: 0 !important;
                    background: transparent !important;
                    box-sizing: border-box !important;
                }

                    table.aspxgridview > tbody > tr > td::before {
                        content: none !important;
                        display: none !important;
                    }

    #gridContainer,
    #divScroll,
    #divScroll .divscrollflexin {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    table.aspxgridview .dxmLite,
    table.aspxgridview .dxm-main,
    table.aspxgridview .dxgvAdaptiveGroupPanel,
    table.aspxgridview .dxgvAdaptiveHeaderPanel,
    table.aspxgridview .dxgvCSD,
    table.aspxgridview .dxgvPagerBottomPanel,
    table.aspxgridview .dxgvPagerTopPanel {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    table.aspxgridview .dxgvAdaptiveDetailCell {
        padding: 6px 8px !important;
    }

    table.aspxgridview .dxgvADT {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    table.aspxgridview .dxgvADCC {
        width: 34% !important;
        padding: 4px 8px 4px 0 !important;
        box-sizing: border-box !important;
    }

    table.aspxgridview .dxgvADDC {
        width: 66% !important;
        padding: 4px 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   FIX LAYOUT ESCRITORIO
   Objetivo:
   - Solo un scroll vertical (interno del ASPxGridView)
   - Sin scrollbar horizontal externo
   - El contenedor flexible no debe generar scroll propio
   ============================================================ */
@media screen and (min-width: 701px) {

    /*
       IMPORTANTE:
       No modificar #divScroll ni .divscrollflexin desde el bloque del
       ASPxGridView. Esos contenedores pertenecen al layout general de
       Flexs.css y deben conservar su scroll vertical y bottom original.
    */

    #gridContainer {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    table.aspxgridview,
    .aspxgridview {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

        /* La zona de datos sí conserva el scroll vertical interno del control. */
        .aspxgridview [class*="dxgvCSD"] {
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }

        /* Nunca permitir que toolbar / pager ensanchen el contenedor padre. */
        .aspxgridview [class*="dxgvToolbar"],
        .aspxgridview [class*="dxgvGroupPanel"],
        .aspxgridview [class*="dxgvPagerBottomPanel"],
        .aspxgridview [class*="dxgvPagerTopPanel"],
        .aspxgridview [class*="dxpLite"] {
            max-width: 100% !important;
            box-sizing: border-box !important;
            overflow-x: visible !important;
        }
}


/* ============================================================
   FIX DIVSCROLL VERTICAL
   Mantiene el comportamiento original de Flexs.css:
   .divscrollflex es el contenedor que administra el scroll.
   No modificar loading, inputs, temas ni componentes DevExpress.
   ============================================================ */

.divscrollflex,
#divScroll.divscrollflex,
.divscrollflex#divScroll,
#divScroll {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

    /* El hijo conserva su geometría original de Flexs.css (incluido bottom:50px). */
    #divScroll .divscrollflexin,
    .divscrollflex .divscrollflexin {
        overflow: visible !important;
    }