/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
:root {
  /* ==========================================================================
     Status color tokens — usados por las clases `.status-*` en styles.scss y
     por cualquier componente que necesite señalizar estado (chips, dots, pills).

     Antes los colores estaban hardcoded como literales hex (#03a9f4 etc.) lo
     cual los dejaba inertes al cambio de tema y forzaba a duplicar la paleta
     en cada lugar. Ahora todos pasan por estos tokens — un único punto de cambio.

     Override por modo oscuro mas abajo (body[data-theme-mode='dark']).
     ========================================================================== */
  --status-commission: #03a9f4; /* azul info */
  --status-salaried: #2eb52c; /* verde activo */
  --status-terminated: #de8e8c; /* rojo claro / cerrado */
  --status-indicator-open: #505ed9; /* indigo / abierto */
  --status-indicator-progress:#34aa95; /* teal / en progreso */
  --status-indicator-deferred:#969696; /* gris neutro / diferido */
  --status-indicator-completed:#2b9029; /* verde / completado */
  --status-indicator-low: #d3a268; /* tan / prioridad baja */
  --status-indicator-normal: #6fbaca; /* celeste / prioridad normal */
  --status-indicator-high: #ff5722; /* naranja / prioridad alta */
}
:root .dx-theme-generic {
  --change-password-popup-height: 190px;
}

/* Dark mode: levantamos saturación y luminosidad para mantener legibilidad
   sobre fondo oscuro. Los hue se preservan; solo cambia L para AA contrast. */
body[data-theme-mode=dark] {
  --status-commission: #4fc3f7;
  --status-salaried: #66d669;
  --status-terminated: #f5a8a6;
  --status-indicator-open: #8e9aff;
  --status-indicator-progress:#5fd5c0;
  --status-indicator-deferred:#b8b8b8;
  --status-indicator-completed:#5fc25e;
  --status-indicator-low: #e2b888;
  --status-indicator-normal: #92d2dd;
  --status-indicator-high: #ff7e54;
}

/* ==========================================================================
   Escala tipográfica fija — tamaños y line-heights canónicos.

   Antes el codebase mezclaba `font-size: 22px` (variables.scss header mixin),
   `24px` y `10.5px` (cliente-detail), `14px`, `13px`, `12.5px`, etc. ad-hoc.
   Esta escala unifica esos valores y permite ajuste global desde un solo lugar.

   Uso:
     .titulo { font-size: var(--text-2xl); line-height: var(--leading-tight); }
     .badge  { font-size: var(--text-xs);  line-height: var(--leading-snug);  }

   Step ratio ~1.18 entre niveles (escala mayor moderada — más utilidad en CRM
   que en marketing site). Base 14px = lo que usa DevExtreme como body.
   ========================================================================== */
:root {
  --text-xs: 11px; /* badges, captions, hint text */
  --text-sm: 12px; /* labels, metadata, status pills */
  --text-base: 14px; /* body default — alineado con DevExtreme */
  --text-md: 16px; /* énfasis en body, párrafos importantes */
  --text-lg: 18px; /* page-counter, h3 secciones */
  --text-xl: 22px; /* h2, page-title */
  --text-2xl: 28px; /* h1 hero */
  --text-3xl: 34px; /* numeros KPI grandes */
  --leading-tight: 1.25; /* headings */
  --leading-snug: 1.4; /* labels, captions */
  --leading-normal: 1.5; /* body */
  --tracking-tight: -0.4px; /* h1, h2 */
  --tracking-normal: 0;
  --tracking-wide: 0.4px; /* eyebrow, uppercase labels */
}

:root {
  --clay-accent: var(--crm-accent-1, #1890ff);
  --clay-accent-2: var(--crm-accent-2, #10b981);
  --clay-success: #10b981;
  --clay-warning: #f59e0b;
  --clay-danger: #ef4444;
  --clay-info: #3b82f6;
  --clay-violet: #8b5cf6;
  --clay-surface: var(--card-background, var(--base-bg, #fff));
  --clay-cream: color-mix(in srgb, var(--crm-accent-1, #1890ff) 6%, var(--base-bg, #fff));
  --clay-cream-2: color-mix(in srgb, var(--crm-accent-2, #10b981) 6%, var(--base-bg, #fff));
  --clay-ink: var(--base-text-color, #2b2545);
  --clay-ink-soft: color-mix(in srgb, var(--base-text-color, #2b2545) 65%, transparent);
  --clay-pastel-accent-top: color-mix(in srgb, var(--clay-accent) 8%, var(--clay-surface));
  --clay-pastel-accent-bottom: color-mix(in srgb, var(--clay-accent) 18%, var(--clay-surface));
  --clay-pastel-accent-2-top: color-mix(in srgb, var(--clay-accent-2) 8%, var(--clay-surface));
  --clay-pastel-accent-2-bottom: color-mix(in srgb, var(--clay-accent-2) 18%, var(--clay-surface));
  --clay-pastel-success-top: color-mix(in srgb, var(--clay-success) 8%, var(--clay-surface));
  --clay-pastel-success-bottom: color-mix(in srgb, var(--clay-success) 22%, var(--clay-surface));
  --clay-pastel-warning-top: color-mix(in srgb, var(--clay-warning) 12%, var(--clay-surface));
  --clay-pastel-warning-bottom: color-mix(in srgb, var(--clay-warning) 28%, var(--clay-surface));
  --clay-pastel-danger-top: color-mix(in srgb, var(--clay-danger) 12%, var(--clay-surface));
  --clay-pastel-danger-bottom: color-mix(in srgb, var(--clay-danger) 24%, var(--clay-surface));
  --clay-pastel-info-top: color-mix(in srgb, var(--clay-info) 10%, var(--clay-surface));
  --clay-pastel-info-bottom: color-mix(in srgb, var(--clay-info) 22%, var(--clay-surface));
  --clay-pastel-violet-top: color-mix(in srgb, var(--clay-violet) 10%, var(--clay-surface));
  --clay-pastel-violet-bottom: color-mix(in srgb, var(--clay-violet) 22%, var(--clay-surface));
  --clay-shadow-sm: 0 4px 0 color-mix(in srgb, var(--crm-accent-1, #1890ff) 18%, transparent);
  --clay-shadow: 0 6px 0 color-mix(in srgb, var(--crm-accent-1, #1890ff) 22%, transparent);
  --clay-shadow-md: 0 8px 0 color-mix(in srgb, var(--crm-accent-1, #1890ff) 24%, transparent);
  --clay-shadow-lg: 0 10px 0 color-mix(in srgb, var(--crm-accent-1, #1890ff) 26%, transparent);
  --clay-shadow-accent: 0 6px 0 color-mix(in srgb, var(--clay-accent) 28%, transparent);
  --clay-shadow-accent-2: 0 6px 0 color-mix(in srgb, var(--clay-accent-2) 28%, transparent);
  --clay-shadow-success: 0 6px 0 rgba(20, 160, 120, 0.24);
  --clay-shadow-warning: 0 6px 0 rgba(190, 120, 20, 0.26);
  --clay-shadow-danger: 0 6px 0 rgba(190, 40, 40, 0.26);
  --clay-shadow-info: 0 6px 0 rgba(40, 80, 200, 0.24);
  --clay-shadow-violet: 0 6px 0 rgba(120, 70, 200, 0.24);
  --clay-top-highlight: inset 0 2px 0 rgba(255, 255, 255, 0.55);
  --clay-radius-xs: 12px;
  --clay-radius-sm: 16px;
  --clay-radius-md: 22px;
  --clay-radius-lg: 28px;
  --clay-radius-xl: 32px;
  --clay-radius-pill: 999px;
  --clay-padding-sm: 12px 16px;
  --clay-padding: 18px 22px;
  --clay-padding-lg: 22px 26px;
}

body[data-theme-mode=dark] {
  --clay-cream: color-mix(in srgb, var(--crm-accent-1, #1890ff) 14%, var(--base-bg));
  --clay-cream-2: color-mix(in srgb, var(--crm-accent-2, #10b981) 14%, var(--base-bg));
  --clay-pastel-accent-top: color-mix(in srgb, var(--clay-accent) 16%, var(--clay-surface));
  --clay-pastel-accent-bottom: color-mix(in srgb, var(--clay-accent) 28%, var(--clay-surface));
  --clay-pastel-accent-2-top: color-mix(in srgb, var(--clay-accent-2) 16%, var(--clay-surface));
  --clay-pastel-accent-2-bottom: color-mix(in srgb, var(--clay-accent-2) 28%, var(--clay-surface));
  --clay-pastel-success-top: color-mix(in srgb, var(--clay-success) 16%, var(--clay-surface));
  --clay-pastel-success-bottom: color-mix(in srgb, var(--clay-success) 32%, var(--clay-surface));
  --clay-pastel-warning-top: color-mix(in srgb, var(--clay-warning) 20%, var(--clay-surface));
  --clay-pastel-warning-bottom: color-mix(in srgb, var(--clay-warning) 38%, var(--clay-surface));
  --clay-pastel-danger-top: color-mix(in srgb, var(--clay-danger) 20%, var(--clay-surface));
  --clay-pastel-danger-bottom: color-mix(in srgb, var(--clay-danger) 34%, var(--clay-surface));
  --clay-pastel-info-top: color-mix(in srgb, var(--clay-info) 18%, var(--clay-surface));
  --clay-pastel-info-bottom: color-mix(in srgb, var(--clay-info) 32%, var(--clay-surface));
  --clay-pastel-violet-top: color-mix(in srgb, var(--clay-violet) 18%, var(--clay-surface));
  --clay-pastel-violet-bottom: color-mix(in srgb, var(--clay-violet) 32%, var(--clay-surface));
  --clay-shadow-sm: 0 4px 0 rgba(0, 0, 0, 0.45);
  --clay-shadow: 0 6px 0 rgba(0, 0, 0, 0.50);
  --clay-shadow-md: 0 8px 0 rgba(0, 0, 0, 0.55);
  --clay-shadow-lg: 0 10px 0 rgba(0, 0, 0, 0.60);
  --clay-shadow-accent: 0 6px 0 rgba(0, 0, 0, 0.50);
  --clay-shadow-accent-2: 0 6px 0 rgba(0, 0, 0, 0.50);
  --clay-shadow-success: 0 6px 0 rgba(0, 0, 0, 0.50);
  --clay-shadow-warning: 0 6px 0 rgba(0, 0, 0, 0.50);
  --clay-shadow-danger: 0 6px 0 rgba(0, 0, 0, 0.50);
  --clay-shadow-info: 0 6px 0 rgba(0, 0, 0, 0.50);
  --clay-shadow-violet: 0 6px 0 rgba(0, 0, 0, 0.50);
  --clay-top-highlight: inset 0 2px 0 rgba(255, 255, 255, 0.08);
}

body[data-theme-density=compact] {
  --clay-radius-xs: 10px;
  --clay-radius-sm: 12px;
  --clay-radius-md: 16px;
  --clay-radius-lg: 20px;
  --clay-radius-xl: 24px;
  --clay-shadow-sm: 0 3px 0 color-mix(in srgb, var(--crm-accent-1, #1890ff) 18%, transparent);
  --clay-shadow: 0 4px 0 color-mix(in srgb, var(--crm-accent-1, #1890ff) 22%, transparent);
  --clay-shadow-md: 0 5px 0 color-mix(in srgb, var(--crm-accent-1, #1890ff) 24%, transparent);
  --clay-shadow-lg: 0 7px 0 color-mix(in srgb, var(--crm-accent-1, #1890ff) 26%, transparent);
  --clay-shadow-accent: 0 4px 0 color-mix(in srgb, var(--clay-accent) 28%, transparent);
  --clay-shadow-accent-2: 0 4px 0 color-mix(in srgb, var(--clay-accent-2) 28%, transparent);
  --clay-shadow-success: 0 4px 0 rgba(20, 160, 120, 0.24);
  --clay-shadow-warning: 0 4px 0 rgba(190, 120, 20, 0.26);
  --clay-shadow-danger: 0 4px 0 rgba(190, 40, 40, 0.26);
  --clay-shadow-info: 0 4px 0 rgba(40, 80, 200, 0.24);
  --clay-shadow-violet: 0 4px 0 rgba(120, 70, 200, 0.24);
  --clay-padding-sm: 8px 12px;
  --clay-padding: 12px 16px;
  --clay-padding-lg: 16px 20px;
}

body[data-theme-mode=dark][data-theme-density=compact] {
  --clay-shadow-sm: 0 3px 0 rgba(0, 0, 0, 0.45);
  --clay-shadow: 0 4px 0 rgba(0, 0, 0, 0.50);
  --clay-shadow-md: 0 5px 0 rgba(0, 0, 0, 0.55);
  --clay-shadow-lg: 0 7px 0 rgba(0, 0, 0, 0.60);
  --clay-shadow-accent: 0 4px 0 rgba(0, 0, 0, 0.50);
  --clay-shadow-accent-2: 0 4px 0 rgba(0, 0, 0, 0.50);
  --clay-shadow-success: 0 4px 0 rgba(0, 0, 0, 0.50);
  --clay-shadow-warning: 0 4px 0 rgba(0, 0, 0, 0.50);
  --clay-shadow-danger: 0 4px 0 rgba(0, 0, 0, 0.50);
  --clay-shadow-info: 0 4px 0 rgba(0, 0, 0, 0.50);
  --clay-shadow-violet: 0 4px 0 rgba(0, 0, 0, 0.50);
}

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

* {
  box-sizing: border-box;
}

.theme-text-color {
  color: var(--dx-color-text);
}

.theme-bg-color {
  background-color: var(--dx-component-color-bg);
}

.header-text {
  font-size: var(--text-xl);
  font-weight: 400;
  padding-right: 25px;
}

.title-text {
  font-size: var(--text-md);
  font-weight: 500;
}

.subtitle-text {
  color: var(--subtitle-text-color);
  font-size: var(--text-base);
  font-weight: 400;
}

.content {
  line-height: var(--leading-normal);
  height: 100%;
}
.content h2 {
  font-size: var(--text-2xl);
  margin-top: 20px;
  margin-bottom: 20px;
}

.responsive-paddings {
  padding: 20px;
}
.screen-large .responsive-paddings {
  padding: 40px;
}

.dx-dropdownbutton-content .dx-list-item {
  display: block;
}

.dx-card.wide-card {
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
  border-right: 0;
  border-left: 0;
}

.view-wrapper-scroll > .dx-scrollable-wrapper > .dx-scrollable-container > .dx-scrollable-content {
  height: 100%;
}
.view-wrapper-scroll > .dx-scrollable-wrapper > .dx-scrollable-container > .dx-scrollable-content > .dx-scrollview-content {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.embedded.embedded .layout-header,
.embedded.embedded .dx-swatch-additional,
.embedded.embedded .dx-drawer-shader {
  display: none;
}
.embedded.embedded .dx-drawer-content {
  padding: initial !important;
}
.embedded.embedded .dx-drawer-panel-content,
.embedded.embedded .dx-drawer-panel-content .dx-overlay-content {
  width: initial !important;
}

.separator {
  height: 24px;
  width: 1px;
  background: var(--border-color);
}
::ng-deep .dx-toolbar-menu-section .separator {
  height: 1px;
  width: auto;
}

.view-wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 var(--page-padding);
}

.dx-card.details-card {
  border: none;
}

.dx-texteditor-label {
  height: auto;
}
.dx-texteditor-label .dx-label {
  line-height: 1;
}

.dx-form.plain-styled-form.dx-form > .dx-layout-manager.dx-layout-manager-one-col .dx-field-item.dx-last-row:not(.dx-last-col) {
  padding-bottom: 0;
}
.dx-form.plain-styled-form .dx-layout-manager .dx-field-item {
  padding-bottom: 0;
}
.dx-form.plain-styled-form .dx-layout-manager .dx-field-item:not(.dx-first-col) {
  padding-left: 0;
}
.dx-form.plain-styled-form .dx-layout-manager .dx-field-item.contact-fields-group {
  padding: 15px 0;
}
.dx-form.plain-styled-form.view-mode .accent .dx-texteditor.form-editor .form-editor-input {
  color: var(--accent-color);
}
.dx-form.plain-styled-form.view-mode .dx-texteditor,
.dx-form.plain-styled-form.view-mode .dx-texteditor.dx-editor-filled,
.dx-form.plain-styled-form.view-mode .dx-texteditor.form-editor {
  pointer-events: none;
}
.dx-form.plain-styled-form.view-mode .dx-texteditor .form-editor-input,
.dx-form.plain-styled-form.view-mode .dx-texteditor.dx-editor-filled .form-editor-input,
.dx-form.plain-styled-form.view-mode .dx-texteditor.form-editor .form-editor-input {
  color: var(--texteditor-edit-color);
}
.dx-form.plain-styled-form.view-mode .dx-texteditor, .dx-form.plain-styled-form.view-mode .dx-texteditor > *,
.dx-form.plain-styled-form.view-mode .dx-texteditor.dx-editor-filled,
.dx-form.plain-styled-form.view-mode .dx-texteditor.dx-editor-filled > *,
.dx-form.plain-styled-form.view-mode .dx-texteditor.form-editor,
.dx-form.plain-styled-form.view-mode .dx-texteditor.form-editor > * {
  background-color: transparent;
}
.dx-form.plain-styled-form.view-mode .dx-texteditor, .dx-form.plain-styled-form.view-mode .dx-texteditor *, .dx-form.plain-styled-form.view-mode .dx-texteditor::after,
.dx-form.plain-styled-form.view-mode .dx-texteditor.dx-editor-filled,
.dx-form.plain-styled-form.view-mode .dx-texteditor.dx-editor-filled *,
.dx-form.plain-styled-form.view-mode .dx-texteditor.dx-editor-filled::after,
.dx-form.plain-styled-form.view-mode .dx-texteditor.form-editor,
.dx-form.plain-styled-form.view-mode .dx-texteditor.form-editor *,
.dx-form.plain-styled-form.view-mode .dx-texteditor.form-editor::after {
  border-color: transparent;
  opacity: 1;
}

.dx-tooltip-wrapper:has(.planning-calendar-appointment-tooltip) .dx-popup-content,
.dx-tooltip-wrapper:has(.planning-calendar-appointment-tooltip) .dx-popup-normal {
  max-height: 600px !important;
  border-radius: 8px;
}

.status-commission {
  color: var(--status-commission);
}
.status-commission.dx-texteditor .status-input.status-editor-input, .status-commission.dx-texteditor.dx-editor-filled .status-input.status-editor-input {
  color: var(--status-commission);
}
.status-commission::before {
  background: var(--status-commission);
}

.status-salaried {
  color: var(--status-salaried);
}
.status-salaried.dx-texteditor .status-input.status-editor-input, .status-salaried.dx-texteditor.dx-editor-filled .status-input.status-editor-input {
  color: var(--status-salaried);
}
.status-salaried::before {
  background: var(--status-salaried);
}

.status-terminated {
  color: var(--status-terminated);
}
.status-terminated.dx-texteditor .status-input.status-editor-input, .status-terminated.dx-texteditor.dx-editor-filled .status-input.status-editor-input {
  color: var(--status-terminated);
}
.status-terminated::before {
  background: var(--status-terminated);
}

.status-indicator-open {
  color: var(--status-indicator-open);
}
.status-indicator-open.dx-texteditor .status-input.status-editor-input, .status-indicator-open.dx-texteditor.dx-editor-filled .status-input.status-editor-input {
  color: var(--status-indicator-open);
}
.status-indicator-open::before {
  background: var(--status-indicator-open);
}

.status-indicator-in-progress {
  color: var(--status-indicator-progress);
}
.status-indicator-in-progress.dx-texteditor .status-input.status-editor-input, .status-indicator-in-progress.dx-texteditor.dx-editor-filled .status-input.status-editor-input {
  color: var(--status-indicator-progress);
}
.status-indicator-in-progress::before {
  background: var(--status-indicator-progress);
}

.status-indicator-deferred {
  color: var(--status-indicator-deferred);
}
.status-indicator-deferred.dx-texteditor .status-input.status-editor-input, .status-indicator-deferred.dx-texteditor.dx-editor-filled .status-input.status-editor-input {
  color: var(--status-indicator-deferred);
}
.status-indicator-deferred::before {
  background: var(--status-indicator-deferred);
}

.status-indicator-completed {
  color: var(--status-indicator-completed);
}
.status-indicator-completed.dx-texteditor .status-input.status-editor-input, .status-indicator-completed.dx-texteditor.dx-editor-filled .status-input.status-editor-input {
  color: var(--status-indicator-completed);
}
.status-indicator-completed::before {
  background: var(--status-indicator-completed);
}

.status-indicator-low {
  color: var(--status-indicator-low);
}
.status-indicator-low.dx-texteditor .status-input.status-editor-input, .status-indicator-low.dx-texteditor.dx-editor-filled .status-input.status-editor-input {
  color: var(--status-indicator-low);
}
.status-indicator-low::before {
  background: var(--status-indicator-low);
}

.status-indicator-normal {
  color: var(--status-indicator-normal);
}
.status-indicator-normal.dx-texteditor .status-input.status-editor-input, .status-indicator-normal.dx-texteditor.dx-editor-filled .status-input.status-editor-input {
  color: var(--status-indicator-normal);
}
.status-indicator-normal::before {
  background: var(--status-indicator-normal);
}

.status-indicator-high {
  color: var(--status-indicator-high);
}
.status-indicator-high.dx-texteditor .status-input.status-editor-input, .status-indicator-high.dx-texteditor.dx-editor-filled .status-input.status-editor-input {
  color: var(--status-indicator-high);
}
.status-indicator-high::before {
  background: var(--status-indicator-high);
}

.dx-theme-fluent-typography {
  font-family: "Inter", sans-serif;
}

.dx-theme-fluent .dx-widget {
  font-family: "Inter", sans-serif;
}
.dx-theme-fluent .light .dx-drawer-panel-content {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.08);
}
.dx-theme-fluent .dark .dx-drawer-panel-content {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.96);
}
.dx-theme-fluent .layout-body .menu-container.theme-dependent,
.dx-theme-fluent app-footer {
  background-color: var(--base-bg);
}
.dx-theme-fluent .layout-body .menu-container.theme-dependent {
  padding-top: 0;
}
.dx-theme-fluent .view-wrapper .dx-toolbar.dx-widget.theme-dependent {
  background-color: var(--base-bg);
  padding: 5px var(--content-padding);
  border-radius: 8px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.04);
}
.dx-theme-fluent .view-wrapper .grid.theme-dependent .dx-toolbar {
  background-color: var(--base-bg);
  padding: 5px var(--content-padding);
  border-radius: 8px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.04);
}
.dx-theme-fluent .view-wrapper .grid.theme-dependent .dx-datagrid-header-panel {
  padding: 0;
}
.dx-theme-fluent .view-wrapper .panels .left {
  background-color: var(--base-bg);
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.04);
}
.dx-theme-fluent .view-wrapper .panels .theme-dependent.right {
  flex: 1 calc(100% - var(--left-panel-width) - 110px) !important;
}
.dx-theme-fluent .view-wrapper.crm-contact-list {
  margin-bottom: var(--content-padding);
}
.dx-theme-fluent .view-wrapper.list-page {
  margin-top: var(--content-padding);
}
.dx-theme-fluent .view-wrapper.list-page .dx-toolbar.dx-widget.theme-dependent,
.dx-theme-fluent .view-wrapper.list-page .grid.theme-dependent .dx-toolbar {
  margin-bottom: var(--content-padding);
}
.dx-theme-fluent .dx-card {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.04);
}
.dx-theme-fluent .plain-styled-form .photo {
  border-radius: 50%;
}
.dx-theme-fluent .dx-form.plain-styled-form.view-mode .dx-texteditor.form-editor .form-editor-input, .dx-theme-fluent .dx-form.plain-styled-form.view-mode .dx-texteditor.dx-editor-filled .form-editor-input {
  padding-left: 0;
}
.dx-theme-fluent .form-editor.dx-state-readonly .status.status-indicator .dx-state-readonly .status-input.status-editor-input {
  padding-left: 0;
}
.dx-theme-fluent .form-editor.dx-state-readonly .form-editor-input {
  padding-left: 0;
}
.dx-theme-fluent .contact-status.dx-state-readonly .status-editor-field .status-indicator {
  padding-left: 0;
  align-self: center !important;
}
.dx-theme-fluent .contact-status .status-editor-field .status-indicator {
  align-self: center !important;
}
.dx-theme-fluent .contact-status .status-editor-field .status-indicator .status {
  display: flex !important;
}
.dx-theme-fluent .cards:not(.grey) .card {
  border-radius: 8px;
  border: 0;
  background: var(--base-bg);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.04);
}
.dx-theme-fluent .dx-form.plain-styled-form .dx-button.form-item-button {
  margin-left: 0;
  margin-top: 5px;
}
.dx-theme-fluent .contact-form .form-editor-input {
  padding-left: 0;
}
.dx-theme-fluent div.gantt {
  padding: 0 !important;
}
.dx-theme-fluent .dx-datagrid-headers.dx-datagrid-nowrap.dx-bordered-top-view {
  border-radius: 8px 8px 0 0;
}
.dx-theme-fluent .theme-dependent .dx-gridbase-container > .dx-bordered-bottom-view {
  border-radius: 0 0 8px 8px;
}
.dx-theme-fluent .profile-card .panel {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.04);
  background-color: var(--base-bg);
}
.dx-theme-fluent .right-side-panel.open {
  background-color: var(--base-bg);
}

/* ===== Accent dinámico por familia de tema =====
   Cambian con body[data-theme-family]. El accent-1 es el principal,
   accent-2 es el secundario para gradients. */
:root {
  --toast-accent-1: #1890ff;
  --toast-accent-2: #10b981;
  --crm-accent-1: #1890ff;
  --crm-accent-2: #10b981;
}

body[data-theme-family="fluent.blue"] {
  --crm-accent-1: #0078d4;
  --crm-accent-2: #10b981;
  --toast-accent-1: #0078d4;
  --toast-accent-2: #10b981;
}

body[data-theme-family="fluent.saas"] {
  --crm-accent-1: #6366f1;
  --crm-accent-2: #06b6d4;
  --toast-accent-1: #6366f1;
  --toast-accent-2: #06b6d4;
}

body[data-theme-family="material.blue"] {
  --crm-accent-1: #1976d2;
  --crm-accent-2: #03a9f4;
  --toast-accent-1: #1976d2;
  --toast-accent-2: #03a9f4;
}

body[data-theme-family="material.teal"] {
  --crm-accent-1: #00897b;
  --crm-accent-2: #4dd0e1;
  --toast-accent-1: #00897b;
  --toast-accent-2: #4dd0e1;
}

body[data-theme-family="material.purple"] {
  --crm-accent-1: #8e24aa;
  --crm-accent-2: #ba68c8;
  --toast-accent-1: #8e24aa;
  --toast-accent-2: #ba68c8;
}

body[data-theme-family="material.orange"] {
  --crm-accent-1: #f57c00;
  --crm-accent-2: #ffb74d;
  --toast-accent-1: #f57c00;
  --toast-accent-2: #ffb74d;
}

body[data-theme-family="material.lime"] {
  --crm-accent-1: #cddc39;
  --crm-accent-2: #8bc34a;
  --toast-accent-1: #cddc39;
  --toast-accent-2: #8bc34a;
}

/* Override del --accent-color del template para que use el accent IONICS dinamico */
body[data-theme-family] {
  --accent-color: var(--crm-accent-1);
}

/* === Toasts: TODO el layout va en el contenedor outer (.dx-overlay-content)
   con !important + body prefix para ganarle al tema de DevExtreme que carga despues.
   El icono va como background-image del mismo elemento — no depende de pseudos
   internos que pueden o no existir segun la version de DX. */
body .dx-toast-wrapper .dx-overlay-content,
body .dx-overlay-content[class*=dx-toast] {
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--toast-accent-1) 22%, transparent) !important;
  color: #e6ecf5 !important;
  font-family: "Inter", sans-serif !important;
  font-size: var(--text-base) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  line-height: var(--leading-snug) !important;
  /* Layout: padding generoso a la izquierda para hacer espacio al icono + banda lateral */
  padding: 16px 22px 16px 60px !important;
  min-width: 320px !important;
  min-height: 56px !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
  position: relative !important;
  overflow: hidden !important;
  /* Banda lateral gradient — accent visual a la izquierda */
  /* Sweep animado superior — efecto scan futurista */
  /* Reseteamos el inner content para que no agregue su propio padding/display */
  /* === Variantes: cada una define su gradient + icono via background multilayer ===
     Capa 1 (icono): SVG posicionado a 18px del izq, vert centrado, 24x24.
     Capa 2 (gradient): fondo del toast.
     Padding-left: 60px del outer ya hace espacio para el icono. */
}
body .dx-toast-wrapper .dx-overlay-content::before,
body .dx-overlay-content[class*=dx-toast]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--toast-accent-1) 0%, var(--toast-accent-2) 100%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--toast-accent-1) 70%, transparent);
}
body .dx-toast-wrapper .dx-overlay-content::after,
body .dx-overlay-content[class*=dx-toast]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--toast-accent-1) 30%, var(--toast-accent-2) 70%, transparent 100%);
  background-size: 200% 100%;
  animation: toast-sweep 3s linear infinite;
}
@keyframes toast-sweep {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: -100% 0%;
  }
}
body .dx-toast-wrapper .dx-overlay-content .dx-toast-content,
body .dx-overlay-content[class*=dx-toast] .dx-toast-content {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  color: inherit !important;
  display: block !important;
  min-height: 0 !important;
}
body .dx-toast-wrapper .dx-overlay-content .dx-toast-icon,
body .dx-overlay-content[class*=dx-toast] .dx-toast-icon {
  display: none !important;
}
body .dx-toast-wrapper .dx-overlay-content .dx-toast-message,
body .dx-overlay-content[class*=dx-toast] .dx-toast-message {
  color: inherit !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
body .dx-toast-wrapper .dx-overlay-content.dx-toast-info,
body .dx-overlay-content[class*=dx-toast].dx-toast-info {
  --toast-accent-1: #1890ff;
  --toast-accent-2: #10b981;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2360a5fa'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.04-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z' clip-rule='evenodd'/%3E%3C/svg%3E") 20px center/24px 24px no-repeat, linear-gradient(135deg, color-mix(in srgb, #0a1f3d 88%, #1890ff) 0%, color-mix(in srgb, #0a1f3d 92%, #10b981) 100%) !important;
}
body .dx-toast-wrapper .dx-overlay-content.dx-toast-success,
body .dx-overlay-content[class*=dx-toast].dx-toast-success {
  --toast-accent-1: #10b981;
  --toast-accent-2: #34d399;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2334d399'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z' clip-rule='evenodd'/%3E%3C/svg%3E") 20px center/24px 24px no-repeat, linear-gradient(135deg, color-mix(in srgb, #052e1d 88%, #10b981) 0%, color-mix(in srgb, #052e1d 92%, #34d399) 100%) !important;
}
body .dx-toast-wrapper .dx-overlay-content.dx-toast-warning,
body .dx-overlay-content[class*=dx-toast].dx-toast-warning {
  --toast-accent-1: #f59e0b;
  --toast-accent-2: #fbbf24;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fbbf24'%3E%3Cpath fill-rule='evenodd' d='M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z' clip-rule='evenodd'/%3E%3C/svg%3E") 20px center/24px 24px no-repeat, linear-gradient(135deg, color-mix(in srgb, #2a1d05 88%, #f59e0b) 0%, color-mix(in srgb, #2a1d05 92%, #fbbf24) 100%) !important;
}
body .dx-toast-wrapper .dx-overlay-content.dx-toast-error,
body .dx-overlay-content[class*=dx-toast].dx-toast-error {
  --toast-accent-1: #ef4444;
  --toast-accent-2: #f87171;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f87171'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z' clip-rule='evenodd'/%3E%3C/svg%3E") 20px center/24px 24px no-repeat, linear-gradient(135deg, color-mix(in srgb, #2a0d1a 88%, #ef4444) 0%, color-mix(in srgb, #2a0d1a 92%, #f87171) 100%) !important;
}

/* === Side-panel pinned: reduccion del area de contenido ===
   Cuando el SidePanelComponent esta en modo "pinned" (anclado a la derecha sin backdrop),
   pone `body.has-pinned-side-panel` y setea `--side-panel-pinned-width`. Esta regla
   global achica el area de contenido para que NI la grilla NI el topbar queden tapados
   por el panel.

   Targeting: SOLO `app-root` (root flex de Angular). Como contiene tanto `app-header`
   (topbar) como `dx-drawer` (sidebar+content), aplicar `padding-right` aca shifta TODO
   el layout en una sola vez. Antes se targeteaba tambien `.dx-drawer-content` (anidado
   dentro de app-root) → padding doble, 840px efectivos. Y al sacar app-root y dejar
   solo .dx-drawer-content, el topbar dejaba de hacer shift y el panel le pasaba por
   encima. La forma correcta es solo el wrapper outermost. */
body.has-pinned-side-panel app-root {
  padding-right: var(--side-panel-pinned-width, 420px);
  transition: padding-right 0.26s cubic-bezier(0.32, 0.72, 0.24, 1);
}

/* Sin la clase, garantizamos la transicion suave de vuelta al cerrar/desanclar. */
app-root {
  transition: padding-right 0.26s cubic-bezier(0.32, 0.72, 0.24, 1);
}

/* === Sidebar compacto: shrink del logo del topbar — override GLOBAL ===
   El SCSS encapsulado del header tambien tiene este shrink, pero en ciertos
   browsers/cache el path encapsulado no se aplicaba consistentemente (el user
   reporto que el logo solo se achicaba en mobile). Esta regla global con
   `!important` gana sin importar la especificidad del CSS encapsulado o
   reglas dark-mode hardcoded. La clase `crm-sidebar-compact` la maneja el
   layout side-nav-outer-toolbar via ngDoCheck. */
body.crm-sidebar-compact app-header .header-brand {
  padding: 4px 10px !important;
  transition: padding 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
body.crm-sidebar-compact app-header .header-brand img {
  height: 33px !important;
  transition: height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Toolbar interna del dx-data-grid: layout responsive ===
   PROBLEMA: DevExtreme posiciona `.dx-toolbar-before/center/after` con
   `position: absolute` dentro de `.dx-toolbar-items-container`. NO son
   flex children — por eso `flex-wrap` en el container no hacia nada
   (el toolbar quedaba en una sola fila desbordando hacia la derecha).
   FIX: forzamos `position: static` + flex en las tres secciones para
   que se comporten como children normales que pueden wrappear.
   `transform` y anchos inline tambien hay que matar — DevExtreme los
   inyecta inline-style cuando recalcula. */
.dx-data-grid .dx-toolbar {
  height: auto !important;
  padding: 6px 8px;
  /* Sacamos las 3 secciones del positioning absoluto. */
  /* Layout horizontal: before a la izquierda, after a la derecha. */
  /* Cada item del toolbar tampoco debe tener position absolute. */
}
.dx-data-grid .dx-toolbar .dx-toolbar-items-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 8px;
  height: auto !important;
  min-height: 48px;
  width: 100%;
  position: relative !important;
}
.dx-data-grid .dx-toolbar .dx-toolbar-before,
.dx-data-grid .dx-toolbar .dx-toolbar-center,
.dx-data-grid .dx-toolbar .dx-toolbar-after {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  /* DevExtreme mete inline `top:0; left:Xpx` que ya no aplica con
     position:static, pero lo neutralizamos por las dudas. */
  top: auto !important;
  left: auto !important;
  right: auto !important;
}
.dx-data-grid .dx-toolbar .dx-toolbar-before {
  margin-right: auto;
}
.dx-data-grid .dx-toolbar .dx-toolbar-after {
  margin-left: auto;
}
.dx-data-grid .dx-toolbar .dx-toolbar-item {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
}
.dx-data-grid .dx-toolbar .dx-toolbar-item .dx-datagrid-search-panel {
  min-width: 200px;
}

/* === Mobile: ajustes responsive para listados con dx-data-grid ===
   En viewports angostos (<= 600px) las grillas se veian apretadas: padding del
   page-host de 28px L/R + padding del grid-card de 8px dejaba <300px utiles
   para 8+ columnas. Achicamos paddings, reducimos la toolbar interna del grid
   y compactamos el pager. No tocamos comportamiento del grid: los columnas
   sigue scrolleando horizontal cuando no caben. */
@media (max-width: 600px) {
  /* Pages que usan el mixin grid-page-host (clientes-list, eventualidades,
     etc.) tienen `padding: 24px 28px` por default. En mobile achicamos. */
  app-clientes-list,
  app-contactos-list,
  app-pedidos-list,
  app-productos-list,
  app-eventualidades-list,
  app-tipos-eventualidad-list,
  app-sub-tipos-eventualidad-list,
  app-no-conformidades-list,
  app-acontecimientos-list,
  app-novedades-list,
  app-mails-list,
  app-industrias-list,
  app-usuarios-list,
  app-roles-list,
  app-empleados-en-planta-list {
    padding: 12px 10px !important;
  }
  /* El card en mobile no necesita padding interno — el grid tiene su propio
     header/toolbar/pager con padding suficiente. */
  .grid-card {
    padding: 4px !important;
    border-radius: 12px !important;
  }
  /* En mobile el search panel se merece su propia fila full-width — sino
     comparte fila con los botones y queda cortito. Lo logramos forzando
     flex-basis 100% en el item que lo contiene. */
  .dx-data-grid .dx-toolbar .dx-toolbar-after .dx-toolbar-item:has(.dx-datagrid-search-panel) {
    flex: 1 1 100%;
    order: -1;
  }
  /* Pager mas compacto: ocultar el selector de pageSize, dejar solo nav. */
  .dx-data-grid .dx-datagrid-pager .dx-page-sizes,
  .dx-data-grid .dx-datagrid-pager .dx-info {
    display: none !important;
  }
  /* Page header (titulo + counter) ocupa toda la fila — el counter debajo
     del titulo en vez de al lado. */
  .page-header.page-header--slim .title-block {
    flex-wrap: wrap;
  }
  .page-header.page-header--slim .title-block .page-title {
    font-size: var(--text-lg) !important;
  }
  .page-header.page-header--slim .title-block .page-counter {
    width: 100%;
  }
  /* Search panel del grid full-width en mobile (default es 280px fijo). */
  .dx-data-grid .dx-toolbar .dx-toolbar-item .dx-datagrid-search-panel {
    width: 100% !important;
    max-width: none !important;
  }
}
/* === A11y: foco visible en componentes DevExtreme ===
   DevExtreme 25.2 sobrescribe los focus styles → en dark mode el foco queda
   invisible al navegar con Tab. Restauramos un outline consistente con el
   accent del tema activo. Aplica solo a `:focus-visible` (no en click). */
::ng-deep .dx-button:focus-visible,
::ng-deep .dx-texteditor.dx-state-focused,
::ng-deep .dx-checkbox:focus-visible,
::ng-deep .dx-radiobutton:focus-visible,
::ng-deep .dx-tab:focus-visible,
::ng-deep .dx-list-item:focus-visible,
::ng-deep .dx-treeview-item:focus-visible {
  outline: 2px solid var(--crm-accent-1, var(--accent-color, #1890ff));
  outline-offset: 2px;
  border-radius: 4px;
}

/* En tema light, los toasts se ven con fondo claro pero acentos vivos */
body[data-theme-mode=light] .dx-toast.dx-overlay-content {
  background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, #ffffff 92%, var(--toast-accent-1)) 100%) !important;
  color: #0a1f3d !important;
  border-color: color-mix(in srgb, var(--toast-accent-1) 30%, transparent) !important;
}
body[data-theme-mode=light] .dx-toast.dx-overlay-content.dx-toast-error {
  background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, #ffffff 90%, #ef4444) 100%) !important;
  color: #7f1d1d !important;
}
body[data-theme-mode=light] .dx-toast.dx-overlay-content.dx-toast-warning {
  background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, #ffffff 90%, #f59e0b) 100%) !important;
  color: #78350f !important;
}
body[data-theme-mode=light] .dx-toast.dx-overlay-content.dx-toast-success {
  background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, #ffffff 90%, #10b981) 100%) !important;
  color: #064e3b !important;
}

/* ============================================================================
 * GLOBAL SCROLLBAR — patron unificado para toda la app
 * ----------------------------------------------------------------------------
 * Estandariza el scrollbar (custom thin + accent-tinted) que ya usaba el
 * home dashboard, aplicandolo a TODOS los elementos scrolleables. Sin esto,
 * cada pantalla tenia el scrollbar nativo del browser (look distinto en
 * Windows/macOS/Linux). Ahora es coherente con el theme:
 *   - 8px de ancho
 *   - thumb accent al 30% (hover 55%)
 *   - track transparente
 *   - reactivo a `data-theme-family` via `--crm-accent-1` (cambia con el tema)
 *   - scroll-behavior smooth en todo el documento
 *
 * Especificidad 0: cualquier componente que necesite un override puntual
 * (ej. el sidebar usa 6px para visual narrow) puede pisar localmente con su
 * propia regla y gana.
 *
 * Firefox usa `scrollbar-width` + `scrollbar-color`; Chromium/Safari usan
 * los pseudo-elementos `::-webkit-scrollbar*`. Cubrimos ambos.
 * ============================================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--crm-accent-1, #1890ff) 35%, transparent) transparent;
}

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

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--crm-accent-1, #1890ff) 30%, transparent);
  border-radius: 4px;
  -webkit-transition: background 0.18s ease;
  transition: background 0.18s ease;
}

*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--crm-accent-1, #1890ff) 55%, transparent);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Modo dark: thumb un poco mas opaco para que se vea sobre fondos oscuros. */
body[data-theme-mode=dark] *::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--crm-accent-1, #1890ff) 45%, transparent);
}

body[data-theme-mode=dark] *::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--crm-accent-1, #1890ff) 70%, transparent);
}

html {
  scroll-behavior: smooth;
}

/* Respetamos al usuario si pidio reduce-motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *::-webkit-scrollbar-thumb {
    -webkit-transition: none;
    transition: none;
  }
}
/* === GLOBAL SCROLLBAR END === */
/* ============================================================================
 * VIEW TRANSITIONS — transiciones de ruta nativas del browser.
 * ----------------------------------------------------------------------------
 * Activado por `withViewTransitions()` en main.ts (Angular 20 + Router). El
 * navegador toma un snapshot del DOM antes del cambio de ruta, otro despues, y
 * los cross-fade automaticamente. Sobre eso definimos animacion custom (fade +
 * leve translateY) para que la transicion se sienta "intencional" en vez del
 * dissolve plano default.
 *
 * Soporte:
 *   - Chrome 111+, Edge, Opera, Samsung Internet — funciona nativo
 *   - Safari 18+, Firefox (TP) — soporte parcial/en desarrollo
 *   - Browsers sin soporte: navegan sin animacion (graceful degradation, NO rompe)
 *
 * Pseudo-elementos:
 *   ::view-transition-old(root)  → snapshot del DOM ANTERIOR (fade out)
 *   ::view-transition-new(root)  → snapshot del DOM NUEVO (fade in)
 *   ::view-transition-group(root) → contenedor padre, controla layering
 *
 * Para elementos compartidos entre rutas (logo, page header), agregar
 * `view-transition-name: <unique-name>` en el CSS del elemento — el browser
 * lo morphea de una posicion a la otra. No lo usamos por default para evitar
 * bugs con DevExtreme que reparenta nodes.
 * ============================================================================ */
/* Duracion y curva del cross-fade. Suficientemente rapido para no estorbar
   (180ms) pero notable. El ease-out se siente "decisivo" — el contenido nuevo
   entra firme. cubic-bezier(0.22, 1, 0.36, 1) es la curva "out-expo" suavizada
   usada por Linear/Vercel/Notion. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  /* Forzar mixing en GPU para evitar paint flicker en transiciones grandes. */
  mix-blend-mode: normal;
}

/* Fade-out de la pagina anterior: opacity + leve scale-down + translateY hacia
   arriba (sugiere que la pagina vieja "se va"). Mantiene el feel sutil — no es
   un swipe horizontal completo, solo un acompanamiento del fade. */
::view-transition-old(root) {
  animation-name: crm-route-fade-out;
}

/* Fade-in de la pagina nueva: opacity + entra desde leve translateY abajo.
   Asimetrico con el old (uno sale arriba, otro entra de abajo) para sugerir
   layering "la nueva pagina viene desde abajo a tapar la vieja". */
::view-transition-new(root) {
  animation-name: crm-route-fade-in;
}

@keyframes crm-route-fade-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-6px) scale(0.995);
  }
}
@keyframes crm-route-fade-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Si el usuario tiene `prefers-reduced-motion: reduce`, anulamos el movimiento
   y dejamos solo un cross-fade mas corto y plano. Cumple WCAG 2.3.3. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 120ms;
    animation-timing-function: ease;
  }
  @keyframes crm-route-fade-out {
    0% {
      opacity: 1;
      transform: none;
    }
    100% {
      opacity: 0;
      transform: none;
    }
  }
  @keyframes crm-route-fade-in {
    0% {
      opacity: 0;
      transform: none;
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
}
/* Print: anular cualquier animacion residual. */
@media print {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}
/* ===== Named transitions ===== */
/* Elementos con `view-transition-name` definido en su CSS (ej. .header-brand,
   .bc-current) reciben su propio par de pseudo-elementos. Sin override, el
   browser usa un fade default — para shared elements queremos un cross-fade
   suave + leve scale (sutil, no exagerado). El brand morphea de su posicion
   anterior a la nueva (mismo path → cero movimiento; rutas con/sin breadcrumb
   varian su posicion → el browser interpola). */
::view-transition-old(header-brand),
::view-transition-new(header-brand),
::view-transition-old(header-page-title),
::view-transition-new(header-page-title) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(header-brand),
  ::view-transition-new(header-brand),
  ::view-transition-old(header-page-title),
  ::view-transition-new(header-page-title) {
    animation-duration: 120ms;
  }
}
/* === VIEW TRANSITIONS END === */
/* ============================================================================
 * GRID DENSITY — densidad configurable de dx-data-grid via body data-attr.
 * ----------------------------------------------------------------------------
 * Activado por `GridDensityService` que setea `data-grid-density` en el body.
 * Los selectores apuntan a `.dx-data-grid` para que CUALQUIER grilla del CRM
 * herede sin necesidad de inyectar el service o tocar cada componente.
 *
 * 3 niveles:
 *   - compact   → rows 28px, fuente 12.5px, padding apretado
 *   - normal    → DevExtreme default (sin override, ~38px)
 *   - spacious  → rows ~50px, aire para data-heavy
 *
 * NOTA: Estos selectores usan especificidad alta para vencer al CSS de
 * DevExtreme, pero NO usan !important — vamos por raw specificity.
 * ============================================================================ */
body[data-grid-density=compact] .dx-data-grid .dx-data-row > td {
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 12.5px;
  line-height: 1.3;
}
body[data-grid-density=compact] .dx-data-grid .dx-header-row > td {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 11.5px;
}
body[data-grid-density=compact] .dx-data-grid .dx-row-lines > td {
  line-height: 1.3;
}

body[data-grid-density=spacious] .dx-data-grid .dx-data-row > td {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 13.5px;
  line-height: 1.55;
}
body[data-grid-density=spacious] .dx-data-grid .dx-header-row > td {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 12px;
}

/* === GRID DENSITY END === */
/* ============================================================================
 * ANIMATED GROUPING — transiciones suaves al expandir/colapsar grupos.
 * ----------------------------------------------------------------------------
 * Por default dx-data-grid muestra/oculta data rows instantáneo al togglear
 * el chevron de un group row. Esto agrega micro-animaciones para que el
 * usuario sienta la jerarquia "abrir/cerrar" en lugar de un salto duro.
 *
 * Ataca 3 cosas:
 *   1. Chevron del group row rotando suavemente.
 *   2. Group row con fondo accent-tinted que pulsa sutil al toggle.
 *   3. Data rows con fade-in stagger al expandir (CSS-only, no requiere JS).
 *
 * Cubre prefers-reduced-motion.
 * ============================================================================ */
/* Chevron del toggle: rotacion suave en lugar de "snap" duro */
.dx-data-grid .dx-group-row .dx-datagrid-group-opened,
.dx-data-grid .dx-group-row .dx-datagrid-group-closed {
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}

/* Group row: highlight sutil al click (sugiere "te lo escuchamos") */
.dx-data-grid .dx-group-row {
  transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.dx-data-grid .dx-group-row:active {
  background-color: color-mix(in srgb, var(--crm-accent-1, #1890ff) 10%, transparent);
}

/* Data rows: fade-in stagger SUTIL al renderizarse.
 *
 * Reactivado tras el rollback con guards anti-stuck:
 *   - `from { opacity: 0.92 }` (NO 0.6): si DevExtreme reusa el nodo y
 *     re-dispara la animation, el "estado de inicio" es casi indistinguible
 *     del final — no se ve "stuck" en gris.
 *   - SIN `transform: translateY`: evita el feel "rows desfasadas" cuando
 *     DevExtreme cambia el orden (sort/filter).
 *   - `animation-fill-mode: forwards`: la rule deja la row en su estado final
 *     después de la animation. Si el frame de la animation se interrumpe (ej.
 *     scroll virtual reusando el nodo), no queda en intermedio.
 *   - Solo aplicamos delay a las primeras 5 rows. El resto entra instantáneo
 *     — menos riesgo de "stuck" en virtualización de listas grandes.
 *   - `--ease-out` (no in-out) para que termine rápido.
 */
@keyframes dx-row-enter {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 1;
  }
}
.dx-data-grid .dx-data-row {
  animation: dx-row-enter 0.18s ease-out forwards;
}

.dx-data-grid .dx-data-row:nth-child(1) {
  animation-delay: 0ms;
}

.dx-data-grid .dx-data-row:nth-child(2) {
  animation-delay: 25ms;
}

.dx-data-grid .dx-data-row:nth-child(3) {
  animation-delay: 50ms;
}

.dx-data-grid .dx-data-row:nth-child(4) {
  animation-delay: 75ms;
}

.dx-data-grid .dx-data-row:nth-child(5) {
  animation-delay: 100ms;
}

.dx-data-grid .dx-data-row:nth-child(n+6) {
  animation-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .dx-data-grid .dx-group-row .dx-datagrid-group-opened,
  .dx-data-grid .dx-group-row .dx-datagrid-group-closed,
  .dx-data-grid .dx-group-row,
  .dx-data-grid .dx-data-row {
    transition: none !important;
    animation: none !important;
  }
}
/* === ANIMATED GROUPING END === */
/* ============================================================================
 * CONTEXT MENU DANGER ITEM — Eliminar / acciones destructivas en rojo.
 * ----------------------------------------------------------------------------
 * dx-context-menu del dx-data-grid acepta `cssClass` por item. Aplicamos esa
 * clase al item "Eliminar" para diferenciarlo visualmente. NO usamos `danger`
 * como prop (no existe en la API) — la clase via cssClass sí funciona.
 *
 * El item completo se ve tinted en rojo; el icono (default trash) hereda el
 * color. Border-top sutil para separarlo de los items normales.
 * ============================================================================ */
.dx-context-menu .dx-menu-item.dx-context-menu-item-danger {
  color: var(--clay-danger, #ef4444);
}
.dx-context-menu .dx-menu-item.dx-context-menu-item-danger .dx-icon {
  color: var(--clay-danger, #ef4444);
}
.dx-context-menu .dx-menu-item.dx-context-menu-item-danger.dx-state-hover, .dx-context-menu .dx-menu-item.dx-context-menu-item-danger.dx-state-focused {
  background-color: color-mix(in srgb, var(--clay-danger, #ef4444) 12%, transparent);
  color: var(--clay-danger, #ef4444);
}

/* === CONTEXT MENU DANGER END === */
/* ============================================================================
 * PULL-TO-REFRESH — indicator styles (creado por la directiva como DOM
 * imperativo, pero los estilos viven aca para que sean themeables).
 * ============================================================================ */
.ptr-indicator {
  font-size: 11.5px;
  font-weight: 600;
  color: color-mix(in srgb, var(--base-text-color, #2b2545) 65%, transparent);
  letter-spacing: 0.01em;
}
.ptr-indicator.is-ready .ptr-spinner {
  transform: rotate(180deg);
  border-color: var(--crm-accent-1, #1890ff);
}
.ptr-indicator.is-refreshing .ptr-spinner {
  animation: ptr-spin 0.8s linear infinite;
  border-color: var(--crm-accent-1, #1890ff);
  border-top-color: transparent;
}

.ptr-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid color-mix(in srgb, var(--crm-accent-1, #1890ff) 30%, transparent);
  border-top-color: transparent;
  border-radius: 50%;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s ease;
}

@keyframes ptr-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ptr-indicator.is-refreshing .ptr-spinner {
    animation: none;
    opacity: 0.6;
  }
  .ptr-spinner {
    transition: none;
  }
}
/* === PULL-TO-REFRESH END === */
/* ============================================================================
 * GRID is-hidden — utility global para ocultar el dx-data-grid sin destruirlo.
 * ----------------------------------------------------------------------------
 * `[hidden]` no funciona confiable en dx-data-grid (su widget interno tiene
 * display propio). Usamos esta clase con display:none !important. La aplican
 * las grillas con `[class.is-hidden]="data().length === 0 || bp.isMobile()"`.
 * Preserva el state interno del grid (filtros, columnas) porque no lo desmonta.
 * ============================================================================ */
.dx-data-grid.is-hidden {
  display: none !important;
}

/* === GRID is-hidden END === */
/* ============================================================================
 * SWIPE ACTIONS — wrapper sin position relative + transitions del content.
 * Las cards se envuelven con .swipe-wrap y la directiva mueve `.swipe-content`.
 * ============================================================================ */
.swipe-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 14px; /* igual que la card — los rails no deben sobresalir. */
}

.swipe-wrap .swipe-content {
  position: relative;
  z-index: 2;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  /* Mientras arrastramos: sin transition, sigue al dedo. */
}
.swipe-wrap .swipe-content.swipe-dragging {
  transition: none;
}

/* Rails (acciones reveladas) — absolute, ocultos detrás del content. */
.swipe-wrap .swipe-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  z-index: 1;
}

.swipe-wrap .swipe-rail-left {
  left: 0;
  /* Background con accent — al swipe a derecha se ve aparecer este lado. */
  background: linear-gradient(90deg, color-mix(in srgb, var(--clay-info, #3b82f6) 88%, white), color-mix(in srgb, var(--clay-info, #3b82f6) 100%, white));
}

.swipe-wrap .swipe-rail-right {
  right: 0;
  /* Lado destructive (Eliminar). */
  background: linear-gradient(90deg, color-mix(in srgb, var(--clay-danger, #ef4444) 100%, white), color-mix(in srgb, var(--clay-danger, #ef4444) 88%, white));
}

.swipe-wrap .swipe-action-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 64px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-transform: uppercase;
}
.swipe-wrap .swipe-action-btn:active {
  background: rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .swipe-wrap .swipe-content {
    transition: none !important;
  }
}
/* === SWIPE ACTIONS END === */
/*!*******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/devexpress-gantt/dist/dx-gantt.css?ngGlobalStyle ***!
  \*******************************************************************************************************************************************************************************************************************************************************/
/*!
 * DevExpress Gantt (dx-gantt)
 * Version: 4.1.68
 * Build date: Mon Apr 13 2026
 *
 * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExpress licensing here: https://www.devexpress.com/Support/EULAs
 */
.dx-gantt-tsac{position:relative;overflow:hidden;background-color:#fff;z-index:6}.dx-gantt-tsa{position:relative}.dx-gantt-hb{position:absolute;left:0;height:0;z-index:6}.dx-gantt-vb{position:absolute;top:0;width:0;z-index:6}.dx-gantt-tm,.dx-gantt-ti,.dx-gantt-tc{position:absolute;top:0;z-index:6}.dx-gantt-tm:before,.dx-gantt-ti:before,.dx-gantt-tc:before{content:"";position:absolute;top:0;width:6px;margin-left:-3px;z-index:6;height:100%}.dx-gantt-si{position:absolute;top:0;white-space:nowrap;box-sizing:border-box}.dx-gantt-taskWrapper,.dx-gantt-milestoneWrapper,.dx-gantt-taskResWrapper{position:absolute;z-index:10;vertical-align:top;white-space:nowrap}.dx-gantt-taskWrapper>div{vertical-align:top}.dx-gantt-taskResWrapper{pointer-events:none}.dx-gantt-task{position:relative;display:inline-block;white-space:nowrap;vertical-align:top}.dx-gantt-tPrg{position:absolute;top:0;height:100%;z-index:0}.dx-gantt-taskTitle,.dx-gantt-taskRes{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dx-gantt-titleIn{position:relative;width:100%;z-index:1}.dx-gantt-titleOut{display:inline-block;width:500px;margin-left:-500px;text-align:right;text-overflow:ellipsis;padding-left:5px}.dx-gantt-taskRes{display:inline-block;overflow:hidden}.dx-gantt-task,.dx-gantt-taskTitle,.dx-gantt-titleOut,.dx-gantt-taskRes{box-sizing:border-box}.dx-gantt-sel{position:absolute;z-index:5}.dx-gantt-task.dx-gantt-milestone{transform:rotate(45deg);border-radius:0 !important;padding:0}.dx-gantt-task.dx-gantt-smallTask{text-align:center}.dx-gantt-task.dx-gantt-smallTask .dx-gantt-titleIn{padding:0;visibility:hidden}.dx-gantt-conn-h,.dx-gantt-conn-v,.dx-gantt-arrow{position:absolute;z-index:9}.dx-gantt-conn-v{top:0;width:4px;cursor:pointer;border-left-width:1px;border-left-style:solid}.dx-gantt-conn-v.active{border-left-width:2px !important}.dx-gantt-conn-h{left:0;height:4px;cursor:pointer;border-top-width:1px;border-top-style:solid}.dx-gantt-conn-h.active{border-top-width:2px !important}.dx-gantt-arrow{width:0;height:0}.dx-gantt-arrow.dx-gantt-TA{border-left-color:rgba(0,0,0,0) !important;border-right-color:rgba(0,0,0,0) !important;border-top-color:rgba(0,0,0,0) !important}.dx-gantt-arrow.dx-gantt-RA{border-right-color:rgba(0,0,0,0) !important;border-top-color:rgba(0,0,0,0) !important;border-bottom-color:rgba(0,0,0,0) !important}.dx-gantt-arrow.dx-gantt-BA{border-left-color:rgba(0,0,0,0) !important;border-right-color:rgba(0,0,0,0) !important;border-bottom-color:rgba(0,0,0,0) !important}.dx-gantt-arrow.dx-gantt-LA{border-left-color:rgba(0,0,0,0) !important;border-top-color:rgba(0,0,0,0) !important;border-bottom-color:rgba(0,0,0,0) !important}.dx-gantt-nwi{position:absolute;z-index:3}.dx-gantt-altRow{position:absolute;z-index:2}.dx-gantt-task-edit-wrapper{padding-left:1px}.dx-gantt-task-edit-wrapper,.dx-gantt-task-edit-wrapper-successor{position:absolute;z-index:11}.dx-gantt-task-edit-wrapper-custom{background-color:rgba(90,84,84,.3)}.dx-gantt-task-edit-wrapper-custom.hide-updating{background-color:rgba(0,0,0,0);pointer-events:none}.dx-gantt-task-edit-wrapper.milestone .dx-gantt-task-edit-frame,.dx-gantt-task-edit-wrapper.hide-updating .dx-gantt-task-edit-frame{border:none !important}#dx-gantt-ta.ms-pointer-active,#dx-gantt-ta.ms-pointer-active .dx-gantt-task-edit-frame,#dx-gantt-ta.ms-pointer-active .dx-gantt-task-edit-frame div{-webkit-appearance:none;touch-action:none;-webkit-user-select:none;user-select:none;-moz-user-select:none}.dx-gantt-task-edit-wrapper.milestone .dx-gantt-task-edit-progress,.dx-gantt-task-edit-wrapper.milestone .dx-gantt-task-edit-start,.dx-gantt-task-edit-wrapper.milestone .dx-gantt-task-edit-end,.dx-gantt-task-edit-wrapper.move .dx-gantt-task-edit-progress,.dx-gantt-task-edit-wrapper.move .dx-gantt-task-edit-dependency-r,.dx-gantt-task-edit-wrapper.move .dx-gantt-task-edit-dependency-l,.dx-gantt-task-edit-wrapper.hide-dependency .dx-gantt-task-edit-dependency-r,.dx-gantt-task-edit-wrapper.hide-dependency .dx-gantt-task-edit-dependency-l,.dx-gantt-task-edit-wrapper.hide-updating .dx-gantt-task-edit-progress,.dx-gantt-task-edit-wrapper.hide-updating .dx-gantt-task-edit-start,.dx-gantt-task-edit-wrapper.hide-updating .dx-gantt-task-edit-end{display:none}.dx-gantt-task-edit-frame,.dx-gantt-task-edit-frame-successor{box-sizing:border-box;height:100%;width:100%;position:absolute;z-index:9}.dx-gantt-task-edit-frame{border:1px solid #269aff}.dx-gantt-task-edit-progress{position:absolute;width:0;height:0;bottom:0;cursor:pointer;border-style:solid;border-width:0 6px 9px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #269aff;z-index:10}.dx-gantt-task-edit-progress:before{content:"";width:10px;height:4px;background-color:#fff;position:absolute;bottom:-14px;left:-6px;border:1px solid #269aff;border-top:none}.dx-gantt-task-edit-progress div{position:absolute;bottom:0;cursor:pointer;border-style:solid;border-width:0 5px 7px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #fff;z-index:9;top:2px;left:-5px;pointer-events:none}.dx-gantt-task-edit-tooltip{position:absolute;font-family:sans-serif;width:max-content;line-height:16px;font-size:12px;border-radius:2px;display:none;z-index:12}.dx-gantt-task-edit-tooltip-default{padding:6px;color:#fff;background-color:rgba(0,0,0,.64)}.dx-gantt-task-edit-tooltip-after:after{content:"";width:0;height:0;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-bottom:6px solid rgba(0,0,0,.64);top:-6px;position:absolute}.dx-gantt-task-edit-tooltip-before:before{content:"";width:0;height:0;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-top:6px solid rgba(0,0,0,.64);bottom:-6px;position:absolute}.dx-gantt-task-edit-tooltip .dx-gantt-task-title{padding-bottom:3px}.dx-gantt-task-edit-tooltip .dx-gantt-status-time tr td:first-child{padding-right:3px}.dx-gantt-task-edit-tooltip .dx-gantt-status-time tr td:first-child,.dx-gantt-task-edit-tooltip .dx-gantt-status-time span:first-child,.dx-gantt-task-edit-tooltip .dx-gantt-task-title{font-weight:600}.dx-gantt-task-edit-dependency-r,.dx-gantt-task-edit-successor-dependency-r,.dx-gantt-task-edit-dependency-l,.dx-gantt-task-edit-successor-dependency-l{position:absolute;border-radius:50%;box-sizing:border-box;top:5px;width:10px;height:10px;background:#fff;border:1px solid #269aff;cursor:pointer}.dx-gantt-task-edit-dependency-r,.dx-gantt-task-edit-successor-dependency-r{left:-10px}.dx-gantt-task-edit-dependency-l,.dx-gantt-task-edit-successor-dependency-l{right:-10px}.dx-gantt-task-edit-dependency-r.dx-gantt-edit-touch,.dx-gantt-task-edit-successor-dependency-r.dx-gantt-edit-touch,.dx-gantt-task-edit-dependency-l.dx-gantt-edit-touch,.dx-gantt-task-edit-successor-dependency-l.dx-gantt-edit-touch{top:3px;width:11px;height:11px}.dx-gantt-task-edit-dependency-r.dx-gantt-edit-touch,.dx-gantt-task-edit-successor-dependency-r.dx-gantt-edit-touch{left:-15px}.dx-gantt-task-edit-dependency-l.dx-gantt-edit-touch,.dx-gantt-task-edit-successor-dependency-l.dx-gantt-edit-touch{right:-15px}.dx-gantt-task-edit-start,.dx-gantt-task-edit-end{position:absolute;height:100%;width:5px;top:0;cursor:col-resize}.dx-gantt-task-edit-end{right:0}.dx-gantt-task-edit-dependency-line{height:2px;background-color:#269aff;position:absolute;transform-origin:0% 0%;z-index:9}.dx-gantt-touch-action{touch-action:none}


/*# sourceMappingURL=styles.css.map*/