/* ============================================================================
   ENTERPRISE PAGES - MICROSOFT FLUENT DESIGN 3 (Windows 11 Style)
   Sistema de diseño profesional full responsive
   Tipografía: Segoe UI Variable (Windows 11 native)
   Accesibilidad: WCAG 2.2 Level AA compliant
   Grid System: CSS Grid + Flexbox responsive
   ============================================================================ */

/* ----------------------------------------------------------------------------
   GLOBAL MATERIAL ICONS - Direct Google Fonts Implementation
   ---------------------------------------------------------------------------- */
.material-icons {
  font-family: 'Material Icons' !important;
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  word-wrap: normal !important;
  white-space: nowrap !important;
  direction: ltr !important;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  -moz-osx-font-smoothing: grayscale !important;
  display: inline-block;
  vertical-align: middle;
}

/* Fallback for .rz-icon (Radzen compatibility) */
.rz-icon {
  font-family: 'Material Icons' !important;
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  word-wrap: normal !important;
  white-space: nowrap !important;
  direction: ltr !important;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ----------------------------------------------------------------------------
   RADZEN DATAGRID INTERNAL ICONS FIX
   Fix para iconos de filtro, paginación y navegación
   ---------------------------------------------------------------------------- */

/* Iconos del paginador */
.rz-paginator-first::before,
.rz-paginator-prev::before,
.rz-paginator-next::before,
.rz-paginator-last::before {
  font-family: 'Material Icons' !important;
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
}

.rz-paginator-first::before {
  content: 'first_page';
}

.rz-paginator-prev::before {
  content: 'chevron_left';
}

.rz-paginator-next::before {
  content: 'chevron_right';
}

.rz-paginator-last::before {
  content: 'last_page';
}

/* Iconos de ordenamiento en headers */
.rz-sortable-column .rzi-caret-down,
.rz-sortable-column .rzi-caret-up {
  font-family: 'Material Icons' !important;
  font-size: 12.8px;
}

.rz-sortable-column .rzi-caret-down::before {
  content: 'arrow_downward';
}

.rz-sortable-column .rzi-caret-up::before {
  content: 'arrow_upward';
}

/* Iconos de filtro */
.rz-column-filter-icon,
.rzi-filter-list {
  font-family: 'Material Icons' !important;
}

.rz-column-filter-icon::before,
.rzi-filter-list::before {
  content: 'filter_list';
  font-size: 12.8px;
}

/* Iconos de dropdown/select */
.rz-dropdown-trigger-icon,
.rzi-chevron-down {
  font-family: 'Material Icons' !important;
}

.rz-dropdown-trigger-icon::before,
.rzi-chevron-down::before {
  content: 'expand_more';
  font-size: 16px;
}

/* Iconos de calendario (date picker) */
.rz-calendar-trigger-icon,
.rzi-calendar {
  font-family: 'Material Icons' !important;
}

.rz-calendar-trigger-icon::before,
.rzi-calendar::before {
  content: 'event';
  font-size: 16px;
}

/* Iconos de búsqueda */
.rzi-search::before {
  font-family: 'Material Icons' !important;
  content: 'search';
  font-size: 16px;
}

/* Iconos de cerrar/limpiar */
.rzi-times::before,
.rz-clear-icon::before {
  font-family: 'Material Icons' !important;
  content: 'close';
  font-size: 14.4px;
}

/* Ocultar texto de iconos de Radzen para mostrar solo Material Icons */
.rzi-caret-down,
.rzi-caret-up,
.rzi-filter-list,
.rzi-chevron-down,
.rzi-calendar,
.rzi-search,
.rzi-times {
  /*font-size: 0 !important;*/
  display: inline-block;
  width: auto;
  height: auto;
}

.rzi-caret-down::before,
.rzi-caret-up::before,
.rzi-filter-list::before,
.rzi-chevron-down::before,
.rzi-calendar::before,
.rzi-search::before,
.rzi-times::before {
  font-size: 12.8px !important;
}

/* ----------------------------------------------------------------------------
   MICROSOFT FLUENT DESIGN 3 - DESIGN TOKENS
   ---------------------------------------------------------------------------- */
:root {
  /* Typography - Fluent Design System */
  --ep-font-family-display: 'Segoe UI Variable Display', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ep-font-family-text: 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;

  /* Type Ramp - Fluent Design 3 Scale */
  --ep-font-caption: 0.75rem;
  --ep-font-body: 0.875rem;
  --ep-font-body-large: 1rem;
  --ep-font-body-strong: 0.875rem;
  --ep-font-subtitle: 1.25rem;
  --ep-font-title: 1.75rem;
  --ep-font-title-large: 2rem;
  --ep-font-display: 3rem;

  /* Font Weights - Fluent Variable Font Axes */
  --ep-font-weight-regular: 400;
  --ep-font-weight-semibold: 600;
  --ep-font-weight-bold: 700;

  /* Line Heights - Fluent Design */
  --ep-line-height-tight: 1.25;
  --ep-line-height-normal: 1.5;
  --ep-line-height-loose: 1.75;

  /* Colors - Windows 11 System Palette */
  /* Neutral Colors */
  --ep-gray-10: #FAF9F8;
  --ep-gray-20: #F3F2F1;
  --ep-gray-30: #EDEBE9;
  --ep-gray-40: #E1DFDD;
  --ep-gray-50: #D2D0CE;
  --ep-gray-60: #C8C6C4;
  --ep-gray-70: #B3B0AD;
  --ep-gray-80: #A19F9D;
  --ep-gray-90: #8A8886;
  --ep-gray-100: #797775;
  --ep-gray-110: #605E5C;
  --ep-gray-120: #484644;
  --ep-gray-130: #3B3A39;
  --ep-gray-140: #323130;
  --ep-gray-150: #292827;
  --ep-gray-160: #252423;
  --ep-gray-170: #201F1E;
  --ep-gray-180: #1B1A19;
  --ep-gray-190: #11100F;

  /* Accent Colors - Fluent Design */
  --ep-blue-10: #F6F9FF;
  --ep-blue-20: #EBF3FF;
  --ep-blue-30: #DEECFF;
  --ep-blue-40: #C7E0FF;
  --ep-blue-50: #B4D6FA;
  --ep-blue-60: #96C6F5;
  --ep-blue-70: #78B7F0;
  --ep-blue-80: #4FA9EC;
  --ep-blue-90: #0F7DE8;  /* Primary accent */
  --ep-blue-100: #0F6CBD;
  --ep-blue-110: #115EA3;
  --ep-blue-120: #0F548C;

  /* Success Colors */
  --ep-green-10: #F1FAF1;
  --ep-green-20: #E0F4E0;
  --ep-green-30: #CEF0CE;
  --ep-green-40: #B6E7B6;
  --ep-green-50: #9EDD9E;
  --ep-green-60: #77D077;
  --ep-green-70: #4FC14F;
  --ep-green-80: #26B326;
  --ep-green-90: #107C10;  /* Success accent */
  --ep-green-100: #0E700E;

  /* Warning Colors */
  --ep-orange-10: #FFF9F5;
  --ep-orange-20: #FFF0E1;
  --ep-orange-30: #FFE7CC;
  --ep-orange-40: #FFD9A8;
  --ep-orange-50: #FFCB85;
  --ep-orange-60: #FFBA57;
  --ep-orange-70: #FFA929;
  --ep-orange-80: #F7630C;  /* Warning accent */
  --ep-orange-90: #D95200;

  /* Danger Colors */
  --ep-red-10: #FFF6F6;
  --ep-red-20: #FFE8E8;
  --ep-red-30: #FFD9D9;
  --ep-red-40: #FFC4C4;
  --ep-red-50: #FFAFAF;
  --ep-red-60: #FF8F8F;
  --ep-red-70: #F76F6F;
  --ep-red-80: #E84F4F;
  --ep-red-90: #D13438;  /* Danger accent */
  --ep-red-100: #BC2F32;

  /* Semantic Color Tokens */
  --ep-color-text-primary: var(--ep-gray-190);
  --ep-color-text-secondary: var(--ep-gray-130);
  --ep-color-text-tertiary: var(--ep-gray-100);
  --ep-color-text-disabled: var(--ep-gray-90);
  --ep-color-text-link: var(--ep-blue-90);
  --ep-color-text-on-accent: #FFFFFF;

  --ep-color-bg-page: var(--ep-gray-10);
  --ep-color-bg-card: #FFFFFF;
  --ep-color-bg-elevated: #FFFFFF;
  --ep-color-bg-subtle: var(--ep-gray-20);
  --ep-color-bg-hover: var(--ep-gray-30);
  --ep-color-bg-pressed: var(--ep-gray-40);

  --ep-color-border-default: var(--ep-gray-60);
  --ep-color-border-subtle: var(--ep-gray-40);
  --ep-color-border-strong: var(--ep-gray-80);

  --ep-color-accent-default: #008C45;  /* Chinese Red */
  --ep-color-accent-hover: #00753A;
  --ep-color-accent-pressed: #005F2F;
  --ep-color-accent-disabled: var(--ep-gray-90);

  --ep-color-success: var(--ep-green-90);
  --ep-color-warning: var(--ep-orange-80);
  --ep-color-danger: var(--ep-red-90);

  /* Spacing Scale - Fluent Design 3.2px base unit */
  --ep-space-1: 0.25rem;
  --ep-space-2: 0.5rem;
  --ep-space-3: 0.75rem;
  --ep-space-4: 1rem;
  --ep-space-5: 1.25rem;
  --ep-space-6: 1.5rem;
  --ep-space-7: 1.75rem;
  --ep-space-8: 2rem;
  --ep-space-10: 2.5rem;
  --ep-space-12: 3rem;
  --ep-space-16: 4rem;

  /* Border Radius - Fluent Design */
  --ep-radius-none: 0px;
  --ep-radius-small: 3.2px;
  --ep-radius-medium: 6.4px;
  --ep-radius-large: 9.6px;
  --ep-radius-xlarge: 12.8px;
  --ep-radius-circular: 7999.2px;

  /* Shadows - Fluent Design Elevation */
  --ep-shadow-2: 0 0 1.6px rgba(0, 0, 0, 0.12), 0 1.6px 3.2px rgba(0, 0, 0, 0.14);
  --ep-shadow-4: 0 0 1.6px rgba(0, 0, 0, 0.12), 0 3.2px 6.4px rgba(0, 0, 0, 0.14);
  --ep-shadow-8: 0 0 1.6px rgba(0, 0, 0, 0.12), 0 6.4px 12.8px rgba(0, 0, 0, 0.14);
  --ep-shadow-16: 0 0 1.6px rgba(0, 0, 0, 0.12), 0 12.8px 25.6px rgba(0, 0, 0, 0.14);
  --ep-shadow-28: 0 0 6.4px rgba(0, 0, 0, 0.12), 0 22.4px 38.4px rgba(0, 0, 0, 0.18);
  --ep-shadow-64: 0 0 6.4px rgba(0, 0, 0, 0.12), 0 51.2px 102.4px rgba(0, 0, 0, 0.24);

  /* Transitions - Fluent Motion */
  --ep-duration-ultrafast: 50ms;
  --ep-duration-faster: 100ms;
  --ep-duration-fast: 150ms;
  --ep-duration-normal: 250ms;
  --ep-duration-slow: 350ms;
  --ep-duration-slower: 500ms;

  --ep-easing-standard: cubic-bezier(0.33, 0, 0.67, 1);
  --ep-easing-accelerate: cubic-bezier(0.55, 0, 1, 0.45);
  --ep-easing-decelerate: cubic-bezier(0, 0.55, 0.45, 1);

  /* Layout Breakpoints - Responsive */
  --ep-breakpoint-xs: 384px;
  --ep-breakpoint-sm: 512px;
  --ep-breakpoint-md: 614.4px;
  --ep-breakpoint-lg: 819.2px;
  --ep-breakpoint-xl: 1024px;
  --ep-breakpoint-2xl: 1228.8px;

  /* Max Widths - Full width for ultrawide screens */
  --ep-max-width-page: 100%;
  --ep-max-width-content: 100%;
}

/* ----------------------------------------------------------------------------
   GLOBAL TYPOGRAPHY - Fluent Design
   ---------------------------------------------------------------------------- */
.ep-page,
.ep-page * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.ep-display,
.ep-title,
.ep-subtitle {
  font-family: var(--ep-font-family-display);
  font-weight: var(--ep-font-weight-semibold);
  letter-spacing: -0.02em;
}

/* ----------------------------------------------------------------------------
   LAYOUT SYSTEM - FULL RESPONSIVE
   ---------------------------------------------------------------------------- */

/* Page Container */
.ep-page {
  min-height: 100vh;
  background: var(--ep-color-bg-page);
  padding: var(--ep-space-3); /* Reducido de space-4 a space-3 (19.2px → 12.8px) */
}

/* Responsive padding */
@media (max-width: 768px) {
  .ep-page {
    padding: var(--ep-space-2); /* Reducido a 9.6px */
  }
}

@media (max-width: 480px) {
  .ep-page {
    padding: var(--ep-space-1); /* Reducido a 6.4px */
  }
}

.ep-page-inner {
  max-width: var(--ep-max-width-page);
  margin: 0 auto;
  width: 100%;
}

/* ----------------------------------------------------------------------------
   HEADER SECTION - Fluent Design
   ---------------------------------------------------------------------------- */
.ep-header {
  background: var(--ep-color-bg-card);
  border: 1px solid var(--ep-color-border-subtle);
  border-radius: var(--ep-radius-large);
  box-shadow: var(--ep-shadow-2);
  padding: var(--ep-space-5); /* Reducido de space-6 (32px) a space-5 (25.6px) */
  margin-bottom: var(--ep-space-3); /* Reducido de space-4 (19.2px) a space-3 (12.8px) */
  transition: box-shadow var(--ep-duration-normal) var(--ep-easing-standard);
}

.ep-header:hover {
  box-shadow: var(--ep-shadow-4);
}

/* Responsive header padding */
@media (max-width: 768px) {
  .ep-header {
    padding: var(--ep-space-4); /* Reducido de space-5 (25.6px) a space-4 (19.2px) */
  }
}

@media (max-width: 480px) {
  .ep-header {
    padding: var(--ep-space-3); /* Reducido de space-4 (19.2px) a space-3 (12.8px) */
  }
}

/* Breadcrumb */
.ep-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ep-space-2);
  font-size: var(--ep-font-caption);
  font-weight: var(--ep-font-weight-regular);
  margin-bottom: var(--ep-space-4);
  color: var(--ep-color-text-secondary);
}

.ep-breadcrumb a {
  color: var(--ep-color-text-link);
  text-decoration: none;
  transition: color var(--ep-duration-fast) var(--ep-easing-standard);
  padding: var(--ep-space-1) var(--ep-space-2);
  border-radius: var(--ep-radius-small);
}

.ep-breadcrumb a:hover {
  color: var(--ep-color-accent-hover);
  background: var(--ep-color-bg-subtle);
}

.ep-breadcrumb-separator {
  color: var(--ep-color-text-disabled);
}

.ep-breadcrumb-current {
  color: var(--ep-color-text-primary);
  font-weight: var(--ep-font-weight-semibold);
}

/* Title Section */
.ep-header-title {
  display: flex;
  align-items: center;
  gap: var(--ep-space-3); /* Reducido de space-4 (19.2px) a space-3 (12.8px) */
  margin-bottom: var(--ep-space-4); /* Reducido de space-6 (32px) a space-4 (19.2px) */
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .ep-header-title {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ep-space-2); /* Reducido de space-3 (12.8px) a space-2 (9.6px) */
  }
}

.ep-header-icon {
  width: 38.4px; /* Reducido de 41.6px a 38.4px */
  height: 38.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #008944 0%, #00753A 100%);
  border-radius: var(--ep-radius-large);
  color: #FFFFFF;
  flex-shrink: 0;
  box-shadow: 0 3.2px 9.6px rgba(15, 23, 42, 0.09);
}

.ep-header-icon .material-icons {
  font-size: 22.4px !important; /* Reducido de 25.6px a 22.4px */
}

.ep-header-text {
  flex: 1;
  min-width: 0;
}

.ep-header-text h1 {
  font-size: 17.6px; /* Reducido de var(--ep-font-title) 19.2px a 17.6px */
  font-weight: var(--ep-font-weight-semibold);
  color: var(--ep-color-text-primary);
  margin: 0 0 var(--ep-space-1) 0;
  line-height: 1.3; /* Más compacto */
}

@media (max-width: 768px) {
  .ep-header-text h1 {
    font-size: 15.2px; /* Reducido de var(--ep-font-subtitle) 16px a 15.2px */
  }
}

.ep-header-text p {
  font-size: 11px; /* Reducido de var(--ep-font-body) 11.2px a 10.4px */
  font-weight: var(--ep-font-weight-regular);
  color: var(--ep-color-text-secondary);
  margin: 0;
  line-height: 1.4; /* Más compacto */
}

.ep-header-badge {
  margin-left: auto;
}

@media (max-width: 480px) {
  .ep-header-badge {
    margin-left: 0;
    width: 100%;
  }
}

/* ----------------------------------------------------------------------------
   STATS ROW - FULL RESPONSIVE GRID | OPTIMIZADO
   ---------------------------------------------------------------------------- */
.ep-stats-row {
  display: grid;
  gap: var(--ep-space-3); /* Reducido de space-4 (19.2px) a space-3 (12.8px) */
  margin-bottom: 0; /* Eliminado margin-bottom, espacio ya en header */

  /* Responsive Grid - Fluent Design breakpoints */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 224px), 1fr));
}

/* Tablet: 2 columns */
@media (min-width: 641px) and (max-width: 1024px) {
  .ep-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3 columns */
@media (min-width: 1025px) and (max-width: 1440px) {
  .ep-stats-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large Desktop: 4+ columns */
@media (min-width: 1441px) {
  .ep-stats-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  .ep-stats-row {
    grid-template-columns: 1fr;
    gap: var(--ep-space-2); /* Reducido de space-3 (12.8px) a space-2 (9.6px) */
  }
}

/* Stat Card | OPTIMIZADO */
.ep-stat-card {
  display: flex;
  align-items: flex-start;
  gap: var(--ep-space-3); /* Reducido de space-4 (19.2px) a space-3 (12.8px) */
  background: var(--ep-color-bg-card);
  border: 1px solid var(--ep-color-border-subtle);
  border-radius: var(--ep-radius-large);
  padding: var(--ep-space-4); /* Reducido de space-6 (32px) a space-4 (19.2px) */
  transition: all var(--ep-duration-normal) var(--ep-easing-standard);
  position: relative;
  overflow: hidden;
  min-height: 88px; /* Reducido de 96px a 88px */
}

.ep-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2.4px;
  height: 100%;
  background: var(--stat-accent, var(--ep-color-accent-default));
  opacity: 0;
  transition: opacity var(--ep-duration-fast) var(--ep-easing-standard);
}

.ep-stat-card:hover {
  transform: translateY(-1.6px); /* Reducido de -3.2px a -1.6px */
  box-shadow: var(--ep-shadow-8);
  border-color: var(--stat-accent, var(--ep-color-border-default));
}

.ep-stat-card:hover::before {
  opacity: 1;
}

/* Stat card color variants */
.ep-stat-card.stat-primary {
  --stat-accent: #008C45;  /* Chinese Red - primary brand */
}

.ep-stat-card.stat-success {
  --stat-accent: var(--ep-green-90);
}

.ep-stat-card.stat-warning {
  --stat-accent: var(--ep-orange-80);
}

.ep-stat-card.stat-danger {
  --stat-accent: var(--ep-red-90);
}

/* Responsive stat card */
@media (max-width: 480px) {
  .ep-stat-card {
    padding: var(--ep-space-3); /* Reducido de space-4 (19.2px) a space-3 (12.8px) */
    gap: var(--ep-space-2); /* Reducido de space-3 (12.8px) a space-2 (9.6px) */
    min-height: 76px; /* Reducido de 80px a 76px */
  }
}

/* Stat Icon | OPTIMIZADO */
.ep-stat-icon {
  width: 44.8px; /* Reducido de 51.2px a 44.8px */
  height: 44.8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ep-radius-medium);
  flex-shrink: 0;
  background: var(--icon-bg, var(--ep-blue-10));
  transition: all var(--ep-duration-normal) var(--ep-easing-standard);
  box-shadow: var(--ep-shadow-2);
}

.ep-stat-card:hover .ep-stat-icon {
  transform: scale(1.05); /* Reducido de 1.08 a 1.05 */
  box-shadow: var(--ep-shadow-4);
}

.ep-stat-icon i {
  color: var(--icon-color, var(--ep-color-accent-default));
  font-size: 19.2px !important; /* Reducido de 22.4px a 19.2px */
}

/* Icon color variants */
.ep-stat-icon.primary {
  --icon-bg: #FFF3F3;        /* Chinese Red 5% tint */
  --icon-color: #00753A;     /* Chinese Red dark */
}

.ep-stat-icon.success {
  --icon-bg: var(--ep-green-10);
  --icon-color: var(--ep-green-100);
}

.ep-stat-icon.warning {
  --icon-bg: var(--ep-orange-10);
  --icon-color: var(--ep-orange-90);
}

.ep-stat-icon.danger {
  --icon-bg: var(--ep-red-10);
  --icon-color: var(--ep-red-100);
}

.ep-stat-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6px; /* Reducido de var(--ep-space-1) (6.4px) a 1.6px */
}

.ep-stat-label {
  font-size: 11px; /* Reducido de var(--ep-font-caption) 9.6px a 8.8px */
  color: var(--ep-color-text-secondary);
  font-weight: var(--ep-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin-bottom: 1.6px; /* Reducido de var(--ep-space-1) (6.4px) a 1.6px */
}

.ep-stat-number {
  font-size: 22.4px; /* Reducido de 25.6px a 22.4px */
  font-weight: var(--ep-font-weight-bold);
  color: var(--ep-color-text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: var(--ep-space-2);
}

@media (max-width: 480px) {
  .ep-stat-number {
    font-size: 19.2px; /* Reducido de 22.4px a 19.2px */
  }
}

.ep-stat-percentage {
  font-size: 11.2px; /* Reducido de 12.8px a 11.2px */
  font-weight: var(--ep-font-weight-semibold);
  color: var(--ep-green-90);
  background: var(--ep-green-10);
  padding: 1.6px 4.8px; /* Reducido de 1.6px 6.4px a 1.6px 4.8px */
  border-radius: var(--ep-radius-small);
}

.ep-stat-meta {
  font-size: 11px; /* Reducido de var(--ep-font-caption) 9.6px a 8.8px */
  font-weight: var(--ep-font-weight-regular);
  color: var(--ep-color-text-tertiary);
  line-height: 1.3;
}

/* ----------------------------------------------------------------------------
   CONTENT SECTION - DATA GRID CONTAINER
   ---------------------------------------------------------------------------- */
.ep-content {
  background: var(--ep-color-bg-card);
  border: 1px solid var(--ep-color-border-subtle);
  border-radius: var(--ep-radius-large);
  box-shadow: var(--ep-shadow-2);
  overflow: hidden;
}

body:has(form.needs-validation [name="movimiento"]) .ep-content,
body:has(form.needs-validation [name="movimiento1"]) .ep-content,
body:has(form.needs-validation [name="movimiento3"]) .ep-content,
body:has(form.needs-validation [name="movimiento4"]) .ep-content,
body:has(form.needs-validation [name="movimiento9"]) .ep-content,
body:has(form.needs-validation [name="movimiento12"]) .ep-content,
body:has(form.needs-validation [name="movimiento13"]) .ep-content {
  overflow: visible;
}

/* ----------------------------------------------------------------------------
   TOOLBAR - FLUENT DESIGN PROFESSIONAL | OPTIMIZADO
   ---------------------------------------------------------------------------- */
.ep-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ep-space-4); /* Reducido de space-5 space-6 a space-4 uniforme (19.2px) */
  border-bottom: 1px solid var(--ep-color-border-subtle);
  background: var(--ep-color-bg-card);
  gap: var(--ep-space-3); /* Reducido de space-4 (19.2px) a space-3 (12.8px) */
  flex-wrap: wrap;
}

/* Responsive toolbar */
@media (max-width: 768px) {
  .ep-toolbar {
    padding: var(--ep-space-3); /* Reducido de space-4 (19.2px) a space-3 (12.8px) */
    flex-direction: column;
    align-items: stretch;
  }
}

.ep-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--ep-space-5);
  flex: 1;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .ep-toolbar-left {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ep-space-3);
  }
}

.ep-toolbar-title-section {
  display: flex;
  align-items: center;
  gap: var(--ep-space-2); /* Reducido de space-3 (12.8px) a space-2 (9.6px) */
}

.ep-toolbar-icon {
  width: 28.8px; /* Reducido de 32px a 28.8px */
  height: 28.8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ep-blue-10);
  border-radius: var(--ep-radius-medium);
  flex-shrink: 0;
}

.ep-toolbar-icon i {
  color: var(--ep-blue-100);
  font-size: 14.4px !important; /* Reducido de 16px a 14.4px */
}

.ep-toolbar-title {
  font-size: 12px; /* Reducido de var(--ep-font-body-large) 12.8px a 12px */
  font-weight: var(--ep-font-weight-semibold);
  color: var(--ep-color-text-primary);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.ep-toolbar-count {
  font-size: 11px; /* Reducido de var(--ep-font-caption) 9.6px a 8.8px */
  color: var(--ep-color-text-secondary);
  font-weight: var(--ep-font-weight-regular);
  margin-top: 1.6px;
}

.ep-toolbar-selection {
  display: flex;
  align-items: center;
  gap: var(--ep-space-2);
  padding: var(--ep-space-2) var(--ep-space-4);
  background: var(--ep-blue-10);
  border: 1px solid var(--ep-blue-40);
  border-radius: var(--ep-radius-medium);
  font-size: var(--ep-font-caption);
  font-weight: var(--ep-font-weight-regular);
}

.ep-toolbar-selection i {
  color: var(--ep-blue-100);
  flex-shrink: 0;
}

.ep-toolbar-selection-text {
  color: var(--ep-blue-100);
}

.ep-toolbar-selection-text strong {
  font-weight: var(--ep-font-weight-semibold);
}

.ep-toolbar-right {
  display: flex;
  gap: var(--ep-space-2);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .ep-toolbar-right {
    width: 100%;
  }
}

/* Radzen Button Fluent Design Overrides */
.ep-toolbar .rz-button {
  min-height: 25.6px;
  padding: 0 var(--ep-space-4);
  font-size: var(--ep-font-body);
  font-weight: var(--ep-font-weight-semibold);
  border-radius: var(--ep-radius-medium);
  transition: all var(--ep-duration-fast) var(--ep-easing-standard);
  box-shadow: var(--ep-shadow-2);
  border: 1px solid var(--ep-color-border-default);
}

.ep-toolbar .rz-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--ep-shadow-4);
  background: var(--ep-color-bg-hover);
}

.ep-toolbar .rz-button:active {
  transform: translateY(0);
  box-shadow: var(--ep-shadow-2);
  background: var(--ep-color-bg-pressed);
}

.ep-toolbar .rz-button i {
  font-size: 12.8px;
}

/* ── Semantic button colors in toolbar ────────────────────────────────────── */

/* New / Delete / Anular  →  Chinese Red (danger) */
.ep-toolbar .rz-button.rz-danger {
  background: #FFF3F3 !important;
  color: #00753A !important;
  border-color: #FFAAAC !important;
}
.ep-toolbar .rz-button.rz-danger:hover {
  background: #008944 !important;
  color: #FFFFFF !important;
  border-color: #008C45 !important;
  box-shadow: 0 1.6px 6.4px rgba(15, 23, 42, 0.1) !important;
}

/* Edit / Unlock  →  Amber/Gold (warning) */
.ep-toolbar .rz-button.rz-warning {
  background: var(--ep-orange-10) !important;
  color: var(--ep-orange-90) !important;
  border-color: var(--ep-orange-40) !important;
}
.ep-toolbar .rz-button.rz-warning:hover {
  background: var(--ep-orange-80) !important;
  color: #FFFFFF !important;
  border-color: var(--ep-orange-80) !important;
  box-shadow: 0 1.6px 6.4px rgba(247, 99, 12, 0.30) !important;
}

/* Assign / Export / Process  →  Royal Blue (info) */
.ep-toolbar .rz-button.rz-info {
  background: var(--ep-blue-10) !important;
  color: var(--ep-blue-110) !important;
  border-color: var(--ep-blue-40) !important;
}
.ep-toolbar .rz-button.rz-info:hover {
  background: var(--ep-blue-90) !important;
  color: #FFFFFF !important;
  border-color: var(--ep-blue-90) !important;
  box-shadow: 0 1.6px 6.4px rgba(15, 125, 232, 0.28) !important;
}

/* Save / Primary  →  Chinese Red filled */
.ep-toolbar .rz-button.rz-primary,
.ep-toolbar .rz-button.rz-variant-filled.rz-primary {
  background: #008944 !important;
  color: #FFFFFF !important;
  border-color: #008C45 !important;
}
.ep-toolbar .rz-button.rz-primary:hover,
.ep-toolbar .rz-button.rz-variant-filled.rz-primary:hover {
  background: #00753A !important;
  border-color: #00753A !important;
  box-shadow: 0 1.6px 6.4px rgba(15, 23, 42, 0.12) !important;
}

/* Approve / Receive  →  Green (success - positive outcomes) */
.ep-toolbar .rz-button.rz-success {
  background: var(--ep-green-10) !important;
  color: var(--ep-green-100) !important;
  border-color: var(--ep-green-40) !important;
}
.ep-toolbar .rz-button.rz-success:hover {
  background: var(--ep-green-90) !important;
  color: #FFFFFF !important;
  border-color: var(--ep-green-90) !important;
  box-shadow: 0 1.6px 6.4px rgba(16, 124, 16, 0.28) !important;
}

/* Neutral / Light  →  Gray */
.ep-toolbar .rz-button.rz-light,
.ep-toolbar .rz-button.rz-secondary {
  background: var(--ep-gray-20) !important;
  color: var(--ep-gray-130) !important;
  border-color: var(--ep-gray-60) !important;
}
.ep-toolbar .rz-button.rz-light:hover,
.ep-toolbar .rz-button.rz-secondary:hover {
  background: var(--ep-gray-40) !important;
  color: var(--ep-gray-160) !important;
  border-color: var(--ep-gray-80) !important;
}


/* ----------------------------------------------------------------------------
   DATA GRID - MINIMALISTA PROFESIONAL CON INTER FONT
   Diseño limpio con Chinese Red (#008C45) como acento
   ---------------------------------------------------------------------------- */
.ep-data-grid {
  padding: 0;
  overflow-x: auto;
  overflow-y: visible;
}

/* Radzen Grid - Base limpia */
.ep-content .rz-datatable,
.ep-content .rz-grid {
  border: none !important;
  font-family: 'Inter', var(--ep-font-family-text);
  background: #FFFFFF !important;
}

/* Grid Header - Fondo sutil gris claro */
.ep-content .rz-datatable-header,
.ep-content .rz-grid-header,
.ep-content .rz-datatable thead,
.ep-content .rz-grid thead {
  background: #F8FAFC !important; /* Slate 50 - muy sutil */
  border-bottom: 1px solid #E5E7EB !important; /* Gray 200 - línea delgada */
}

.ep-content .rz-datatable thead th,
.ep-content .rz-grid thead th {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important; /* Compacto profesional */
  font-weight: 600 !important; /* SemiBold Inter */
  color: #64748B !important; /* Slate 500 - texto header */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 11.2px 12.8px !important;
  border-bottom: none !important;
  border-right: 1px solid #F1F5F9 !important; /* Slate 100 - separador muy sutil */
  white-space: nowrap;
  background: transparent !important;
  transition: background 0.15s ease;
}

.ep-content .rz-datatable thead th:last-child,
.ep-content .rz-grid thead th:last-child {
  border-right: none !important;
}

.ep-content .rz-datatable thead th:hover,
.ep-content .rz-grid thead th:hover {
  background: #F1F5F9 !important; /* Slate 100 - hover muy sutil */
  color: #475569 !important; /* Slate 600 - más oscuro en hover */
}

/* Grid Body - Fondo blanco puro */
.ep-content .rz-datatable tbody,
.ep-content .rz-grid tbody {
  background: #FFFFFF !important;
}

.ep-content .rz-datatable tbody td,
.ep-content .rz-grid tbody td {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.2px !important; /* Base legible */
  font-weight: 400 !important; /* Regular Inter */
  color: #0F172A !important; /* Slate 900 - texto principal */
  padding: 11.2px 12.8px !important;
  border-bottom: 1px solid #F1F5F9 !important; /* Slate 100 - línea muy sutil */
  border-right: 1px solid #FAFBFC !important; /* Casi invisible - profesional */
  vertical-align: middle;
  background: #FFFFFF !important;
  transition: all 0.18s ease;
}

.ep-content .rz-datatable tbody td:last-child,
.ep-content .rz-grid tbody td:last-child {
  border-right: none !important;
}

/* Grid Row Hover - Chinese Red muy sutil */
.ep-content .rz-datatable tbody tr:hover,
.ep-content .rz-grid tbody tr:hover {
  background: rgba(0, 140, 69, 0.03) !important; /* Chinese Red 3% */
  box-shadow: inset 0 0 0 1px rgba(0, 140, 69, 0.08) !important; /* Borde interno sutil */
}

.ep-content .rz-datatable tbody tr:hover td,
.ep-content .rz-grid tbody tr:hover td {
  background: transparent !important;
  color: #0F172A !important;
  border-bottom-color: rgba(0, 140, 69, 0.1) !important;
}

/* Grid Row Selected - Chinese Red como acento */
.ep-content .rz-datatable tbody tr.rz-state-highlight,
.ep-content .rz-grid tbody tr.rz-state-highlight {
  background: rgba(0, 140, 69, 0.06) !important; /* Chinese Red 6% */
  border-left: 2.4px solid #008C45 !important; /* Chinese Red sólido */
}

.ep-content .rz-datatable tbody tr.rz-state-highlight td,
.ep-content .rz-grid tbody tr.rz-state-highlight td {
  background: transparent !important;
  color: #00753A !important;  /* Chinese Red on selected row */
  font-weight: 600 !important; /* SemiBold Inter seleccionado */
  border-bottom-color: rgba(0, 140, 69, 0.18) !important;
}

/* Grid Row Active (on click) - Efecto presionado */
.ep-content .rz-datatable tbody tr:active,
.ep-content .rz-grid tbody tr:active {
  background: rgba(0, 140, 69, 0.08) !important;
  transform: scale(0.998);
}

.ep-content .rz-datatable tbody tr:active td,
.ep-content .rz-grid tbody tr:active td {
  background: transparent !important;
}

/* Grid Cell con Badges - Estilo minimalista profesional */
.ep-content .rz-datatable tbody td .rz-badge,
.ep-content .rz-grid tbody td .rz-badge {
  padding: 3.2px 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600; /* SemiBold Inter */
  border-radius: 4.8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 3.2px;
  transition: all 0.18s ease;
}

.ep-content .rz-datatable tbody td .rz-badge.rz-badge-success,
.ep-content .rz-grid tbody td .rz-badge.rz-badge-success {
  background: #ECFDF5 !important; /* Green 50 */
  color: #047857 !important; /* Green 700 - contraste AA */
  border-color: #A7F3D0 !important; /* Green 200 */
}

.ep-content .rz-datatable tbody td .rz-badge.rz-badge-success:hover,
.ep-content .rz-grid tbody td .rz-badge.rz-badge-success:hover {
  background: #D1FAE5 !important; /* Green 100 */
  border-color: #6EE7B7 !important; /* Green 300 */
}

.ep-content .rz-datatable tbody td .rz-badge.rz-badge-warning,
.ep-content .rz-grid tbody td .rz-badge.rz-badge-warning {
  background: #FFFBEB !important; /* Amber 50 */
  color: #B45309 !important; /* Amber 700 - contraste AA */
  border-color: #FDE68A !important; /* Amber 200 */
}

.ep-content .rz-datatable tbody td .rz-badge.rz-badge-warning:hover,
.ep-content .rz-grid tbody td .rz-badge.rz-badge-warning:hover {
  background: #FEF3C7 !important; /* Amber 100 */
  border-color: #FCD34D !important; /* Amber 300 */
}

.ep-content .rz-datatable tbody td .rz-badge.rz-badge-danger,
.ep-content .rz-grid tbody td .rz-badge.rz-badge-danger {
  background: #FEF2F2 !important; /* Red 50 */
  color: #B91C1C !important; /* Red 700 - contraste AA */
  border-color: #FECACA !important; /* Red 200 */
}

.ep-content .rz-datatable tbody td .rz-badge.rz-badge-danger:hover,
.ep-content .rz-grid tbody td .rz-badge.rz-badge-danger:hover {
  background: #FEE2E2 !important; /* Red 100 */
  border-color: #FCA5A5 !important; /* Red 300 */
}

.ep-content .rz-datatable tbody td .rz-badge.rz-badge-info,
.ep-content .rz-grid tbody td .rz-badge.rz-badge-info {
  background: #EFF6FF !important; /* Blue 50 */
  color: #1D4ED8 !important; /* Blue 700 - contraste AA */
  border-color: #BFDBFE !important; /* Blue 200 */
}

.ep-content .rz-datatable tbody td .rz-badge.rz-badge-info:hover,
.ep-content .rz-grid tbody td .rz-badge.rz-badge-info:hover {
  background: #DBEAFE !important; /* Blue 100 */
  border-color: #93C5FD !important; /* Blue 300 */
}

/* Badge con icono Material Icons */
.ep-content .rz-badge .material-icons {
  font-size: 11.2px;
  margin-right: 1.6px;
}

/* Grid Action Buttons - Minimalista y compacto */
.ep-content .rz-datatable tbody td .rz-button,
.ep-content .rz-grid tbody td .rz-button {
  min-height: 22.4px;
  padding: 0 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500; /* Medium Inter */
  border-radius: 4.8px;
  border: 1px solid #E5E7EB; /* Gray 200 */
  background: #FFFFFF !important;
  color: #475569 !important; /* Slate 600 */
  box-shadow: 0 1px 1.6px rgba(0, 0, 0, 0.04);
  transition: all 0.18s ease;
}

.ep-content .rz-datatable tbody td .rz-button:hover,
.ep-content .rz-grid tbody td .rz-button:hover {
  background: #F8FAFC !important; /* Slate 50 */
  border-color: #CBD5E1 !important; /* Slate 300 */
  color: #334155 !important; /* Slate 700 */
  box-shadow: 0 1.6px 3.2px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.ep-content .rz-datatable tbody td .rz-button:active,
.ep-content .rz-grid tbody td .rz-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 1.6px rgba(0, 0, 0, 0.04);
  background: #F1F5F9 !important; /* Slate 100 */
}

.ep-content .rz-datatable tbody td .rz-button .material-icons,
.ep-content .rz-grid tbody td .rz-button .material-icons {
  font-size: 12.8px;
  margin-right: 3.2px;
}

/* Grid Pager - Professional design with enhanced UX */
.ep-content .rz-paginator,
.ep-datagrid .rz-paginator {
  background: linear-gradient(to bottom, #FAFBFC 0%, #F9FAFB 100%) !important;
  border-top: 1.6px solid #E5E7EB !important;
  padding: 12.8px 16px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12.8px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  box-shadow: 0 -1px 1.6px rgba(0, 0, 0, 0.02);
}

.ep-content .rz-paginator-page,
.ep-content .rz-paginator-element,
.ep-datagrid .rz-paginator-page,
.ep-datagrid .rz-paginator-element {
  min-width: 28.8px;
  height: 28.8px;
  padding: 0 8px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6.4px;
  border: 1.2px solid transparent;
  background: #FFFFFF !important;
  color: #6B7280 !important; /* 4.6:1 contrast - AA+ */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 1px 1.6px rgba(0, 0, 0, 0.04);
}

.ep-content .rz-paginator-page:hover:not(.rz-state-disabled):not(.rz-state-active),
.ep-content .rz-paginator-element:hover:not(.rz-state-disabled),
.ep-datagrid .rz-paginator-page:hover:not(.rz-state-disabled):not(.rz-state-active),
.ep-datagrid .rz-paginator-element:hover:not(.rz-state-disabled) {
  background: #F0F9FF !important;
  color: #1E40AF !important; /* 9.2:1 contrast - AAA */
  border-color: #BFDBFE !important;
  transform: translateY(-1.6px);
  box-shadow: 0 3.2px 4.8px rgba(59, 130, 246, 0.15), 0 1.6px 3.2px rgba(59, 130, 246, 0.1);
}

.ep-content .rz-paginator-page.rz-state-active,
.ep-datagrid .rz-paginator-page.rz-state-active {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-color: #2563EB !important;
  box-shadow: 0 3.2px 4.8px rgba(37, 99, 235, 0.25), 0 1.6px 3.2px rgba(37, 99, 235, 0.15);
  transform: scale(1.05);
}

.ep-content .rz-paginator-page.rz-state-disabled,
.ep-content .rz-paginator-element.rz-state-disabled,
.ep-datagrid .rz-paginator-page.rz-state-disabled,
.ep-datagrid .rz-paginator-element.rz-state-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  color: #9CA3AF !important;
  box-shadow: none;
}

/* Paginador - Summary text with better typography */
.ep-content .rz-paginator-summary,
.ep-datagrid .rz-paginator-summary {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #6B7280; /* 4.6:1 contrast - AA+ */
  letter-spacing: -0.1px;
}

.ep-content .rz-paginator-summary strong,
.ep-datagrid .rz-paginator-summary strong {
  font-weight: 700;
  color: #111827; /* 15.8:1 contrast - AAA+ */
}

/* Paginador - Dropdown with professional styling */
.ep-content .rz-paginator .rz-dropdown,
.ep-datagrid .rz-paginator .rz-dropdown {
  min-width: 60px;
  height: 28.8px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6.4px;
  border: 1.2px solid #E5E7EB;
  background: #FFFFFF;
  padding: 0 8px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 1.6px rgba(0, 0, 0, 0.04);
}

.ep-content .rz-paginator .rz-dropdown:hover,
.ep-datagrid .rz-paginator .rz-dropdown:hover {
  border-color: #BFDBFE;
  box-shadow: 0 1.6px 3.2px rgba(59, 130, 246, 0.1);
  background: #F9FAFB;
}

/* Responsive Grid - Mobile Optimizations */
@media (max-width: 768px) {
  .ep-data-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ep-content .rz-datatable,
  .ep-content .rz-grid {
    min-width: 480px;
  }

  .ep-content .rz-datatable thead th,
  .ep-content .rz-grid thead th,
  .ep-content .rz-datatable tbody td,
  .ep-content .rz-grid tbody td {
    padding: var(--ep-space-3) !important;
    font-size: var(--ep-font-caption) !important;
  }
}

/* ----------------------------------------------------------------------------
   SKELETON LOADING - FLUENT DESIGN
   ---------------------------------------------------------------------------- */
.ep-skeleton {
  animation: ep-skeleton-pulse 1.5s ease-in-out infinite;
  background: linear-gradient(
    90deg,
    var(--ep-gray-30) 0%,
    var(--ep-gray-40) 50%,
    var(--ep-gray-30) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--ep-radius-small);
}

@keyframes ep-skeleton-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.ep-skeleton-header {
  background: var(--ep-color-bg-card);
  border: 1px solid var(--ep-color-border-subtle);
  border-radius: var(--ep-radius-large);
  padding: var(--ep-space-8);
  margin-bottom: var(--ep-space-6);
}

.ep-skeleton-breadcrumb {
  display: flex;
  gap: var(--ep-space-2);
  margin-bottom: var(--ep-space-4);
}

.ep-skeleton-breadcrumb-item {
  height: 12.8px;
  border-radius: var(--ep-radius-small);
}

.ep-skeleton-title-row {
  display: flex;
  align-items: center;
  gap: var(--ep-space-4);
  margin-bottom: var(--ep-space-6);
}

.ep-skeleton-icon {
  width: 38.4px;
  height: 38.4px;
  border-radius: var(--ep-radius-large);
  flex-shrink: 0;
}

.ep-skeleton-title {
  flex: 1;
}

.ep-skeleton-title-main {
  height: 22.4px;
  border-radius: var(--ep-radius-medium);
  margin-bottom: var(--ep-space-2);
}

.ep-skeleton-title-sub {
  height: 12.8px;
  border-radius: var(--ep-radius-small);
}

.ep-skeleton-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(192px, 1fr));
  gap: var(--ep-space-4);
}

.ep-skeleton-stat-card {
  display: flex;
  align-items: center;
  gap: var(--ep-space-4);
  background: var(--ep-color-bg-card);
  border: 1px solid var(--ep-color-border-subtle);
  border-radius: var(--ep-radius-large);
  padding: var(--ep-space-5);
}

.ep-skeleton-stat-icon {
  width: 44.8px;
  height: 44.8px;
  border-radius: var(--ep-radius-large);
  flex-shrink: 0;
}

.ep-skeleton-stat-content {
  flex: 1;
}

.ep-skeleton-stat-number {
  height: 22.4px;
  border-radius: var(--ep-radius-medium);
  margin-bottom: var(--ep-space-2);
}

.ep-skeleton-stat-label {
  height: 11.2px;
  border-radius: var(--ep-radius-small);
  width: 70%;
}

.ep-skeleton-content {
  background: var(--ep-color-bg-card);
  border: 1px solid var(--ep-color-border-subtle);
  border-radius: var(--ep-radius-large);
  overflow: hidden;
}

.ep-skeleton-toolbar {
  padding: var(--ep-space-5) var(--ep-space-6);
  border-bottom: 1px solid var(--ep-color-border-subtle);
  background: var(--ep-color-bg-card);
}

.ep-skeleton-toolbar-title {
  height: 16px;
  width: 160px;
  border-radius: var(--ep-radius-small);
  margin-bottom: var(--ep-space-3);
}

.ep-skeleton-toolbar-buttons {
  display: flex;
  gap: var(--ep-space-2);
}

.ep-skeleton-button {
  height: 25.6px;
  width: 64px;
  border-radius: var(--ep-radius-medium);
}

.ep-skeleton-table {
  padding: var(--ep-space-6);
}

.ep-skeleton-table-header {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ep-space-4);
  margin-bottom: var(--ep-space-4);
  padding-bottom: var(--ep-space-3);
  border-bottom: 1.6px solid var(--ep-color-border-subtle);
}

.ep-skeleton-table-header-item {
  height: 12.8px;
  border-radius: var(--ep-radius-small);
}

.ep-skeleton-table-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ep-space-4);
  padding: var(--ep-space-3) 0;
  border-bottom: 1px solid var(--ep-color-border-subtle);
}

.ep-skeleton-table-cell {
  height: 12.8px;
  border-radius: var(--ep-radius-small);
}

/* ----------------------------------------------------------------------------
   UTILITIES - FLUENT DESIGN
   ---------------------------------------------------------------------------- */
.ep-text-primary { color: var(--ep-blue-90) !important; }
.ep-text-success { color: var(--ep-green-90) !important; }
.ep-text-warning { color: var(--ep-orange-80) !important; }
.ep-text-danger { color: var(--ep-red-90) !important; }
.ep-text-muted { color: var(--ep-color-text-secondary) !important; }

.ep-bg-primary { background: var(--ep-blue-90) !important; color: var(--ep-color-text-on-accent) !important; }
.ep-bg-success { background: var(--ep-green-90) !important; color: var(--ep-color-text-on-accent) !important; }
.ep-bg-warning { background: var(--ep-orange-80) !important; color: var(--ep-color-text-on-accent) !important; }
.ep-bg-danger { background: var(--ep-red-90) !important; color: var(--ep-color-text-on-accent) !important; }

/* Responsive Display Utilities */
.ep-hide-mobile {
  display: block;
}

@media (max-width: 640px) {
  .ep-hide-mobile {
    display: none !important;
  }
}

.ep-hide-tablet {
  display: block;
}

@media (min-width: 641px) and (max-width: 1024px) {
  .ep-hide-tablet {
    display: none !important;
  }
}

.ep-hide-desktop {
  display: block;
}

@media (min-width: 1025px) {
  .ep-hide-desktop {
    display: none !important;
  }
}

.ep-show-mobile {
  display: none;
}

@media (max-width: 640px) {
  .ep-show-mobile {
    display: block !important;
  }
}

/* ----------------------------------------------------------------------------
   ACCESSIBILITY - WCAG 2.2 LEVEL AA
   ---------------------------------------------------------------------------- */

/* Focus visible styles */
.rz-button:focus-visible,
.rz-datatable tbody tr:focus-visible,
.rz-grid tbody tr:focus-visible {
  outline: 1.6px solid var(--ep-color-accent-default);
  outline-offset: 1.6px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .ep-stat-card,
  .ep-content,
  .ep-header {
    border-width: 1.6px;
  }
}

/* ----------------------------------------------------------------------------
   TOOLBAR BUTTON ENHANCEMENTS - PROFESSIONAL UX/UI
   ---------------------------------------------------------------------------- */

/* Toolbar action buttons wrapper */
.ep-toolbar-actions {
  display: flex;
  gap: var(--ep-space-2);
}

.ep-toolbar-button-group {
  display: flex;
  gap: var(--ep-space-2);
  flex-wrap: wrap;
}

/* Enhanced Radzen Button Styles */
.ep-toolbar-btn {
  min-height: 28.8px !important;
  padding: 0 var(--ep-space-4) !important;
  font-size: var(--ep-font-body) !important;
  font-weight: var(--ep-font-weight-semibold) !important;
  border-radius: var(--ep-radius-medium) !important;
  transition: all var(--ep-duration-fast) var(--ep-easing-standard) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--ep-space-2) !important;
  box-shadow: var(--ep-shadow-2) !important;
  border: 1px solid transparent !important;
}

.ep-toolbar-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--ep-shadow-4) !important;
}

.ep-toolbar-btn:active {
  transform: translateY(0);
  box-shadow: var(--ep-shadow-1) !important;
}

/* Primary button (Filled) - Chinese Red */
.ep-toolbar-btn.rz-variant-filled.rz-primary {
  background: #008944 !important;
  color: white !important;
  border-color: #008C45 !important;
}

.ep-toolbar-btn.rz-variant-filled.rz-primary:hover {
  background: #00753A !important;
  border-color: #00753A !important;
}

/* Success button */
.ep-toolbar-btn.rz-success {
  background: var(--ep-green-10) !important;
  color: var(--ep-green-100) !important;
  border-color: var(--ep-green-40) !important;
}

.ep-toolbar-btn.rz-success:hover {
  background: var(--ep-green-90) !important;
  color: white !important;
  border-color: var(--ep-green-90) !important;
}

/* Danger button */
.ep-toolbar-btn.rz-danger {
  background: var(--ep-red-10) !important;
  color: var(--ep-red-100) !important;
  border-color: var(--ep-red-40) !important;
}

.ep-toolbar-btn.rz-danger:hover {
  background: var(--ep-red-90) !important;
  color: white !important;
  border-color: var(--ep-red-90) !important;
}

/* Info button */
.ep-toolbar-btn.rz-info {
  background: var(--ep-blue-10) !important;
  color: var(--ep-blue-110) !important;
  border-color: var(--ep-blue-40) !important;
}

.ep-toolbar-btn.rz-info:hover {
  background: var(--ep-blue-90) !important;
  color: white !important;
  border-color: var(--ep-blue-90) !important;
}

/* Warning button - Amber/Gold for Edit/Unlock actions */
.ep-toolbar-btn.rz-warning {
  background: var(--ep-orange-10) !important;
  color: var(--ep-orange-90) !important;
  border-color: var(--ep-orange-40) !important;
}

.ep-toolbar-btn.rz-warning:hover {
  background: var(--ep-orange-80) !important;
  color: white !important;
  border-color: var(--ep-orange-80) !important;
}

/* Light/Neutral button - for Export/PDF/Reports */
.ep-toolbar-btn.rz-light {
  background: var(--ep-gray-20) !important;
  color: var(--ep-gray-130) !important;
  border-color: var(--ep-gray-60) !important;
}

.ep-toolbar-btn.rz-light:hover {
  background: var(--ep-gray-40) !important;
  color: var(--ep-gray-160) !important;
  border-color: var(--ep-gray-80) !important;
}

/* Secondary button */
.ep-toolbar-btn.rz-secondary {
  background: var(--ep-gray-20) !important;
  color: var(--ep-gray-130) !important;
  border-color: var(--ep-gray-60) !important;
}

.ep-toolbar-btn.rz-secondary:hover {
  background: var(--ep-gray-40) !important;
  color: var(--ep-gray-160) !important;
  border-color: var(--ep-gray-80) !important;
}

/* Light/Outlined buttons */
.ep-toolbar-btn.rz-variant-outlined {
  background: var(--ep-color-bg-card) !important;
  border-width: 1px !important;
  border-style: solid !important;
}

/* Toolbar button icons - Material Icons */
.ep-toolbar-btn .material-icons {
  font-size: 14.4px;
  margin-right: 3.2px;
  vertical-align: middle;
}

/* Legacy Radzen Icon support */
.ep-toolbar-btn .rz-icon {
  font-family: 'Material Icons' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 14.4px !important;
  width: 14.4px !important;
  height: 14.4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Responsive: Hide text on mobile, show only icons */
@media (max-width: 640px) {
  .ep-toolbar-btn-text {
    display: none;
  }

  .ep-toolbar-btn {
    padding: 0 var(--ep-space-3) !important;
    min-width: 28.8px;
    justify-content: center;
  }

  .ep-toolbar-btn .rz-icon {
    margin: 0 !important;
  }
}

/* Busy state */
.ep-toolbar-btn.rz-button-busy {
  cursor: wait;
  opacity: 0.7;
}

/* ----------------------------------------------------------------------------
   DATA GRID HEADER ICONS - Material Icons
   ---------------------------------------------------------------------------- */
.enterprise-column-header {
  display: flex;
  align-items: center;
  gap: 3.2px;
  font-weight: var(--ep-font-weight-semibold);
}

.enterprise-column-header .material-icons {
  opacity: 0.7;
  font-size: 12.8px;
  margin-right: 0;
  vertical-align: middle;
}

.enterprise-row-header .material-icons {
  opacity: 0.6;
  font-size: 12.8px;
  vertical-align: middle;
}

/* Legacy Radzen Icon support for DataGrid */
.enterprise-column-header .rz-icon {
  font-family: 'Material Icons' !important;
  font-weight: normal;
  font-style: normal;
  opacity: 0.7;
  font-size: 12.8px !important;
  width: 12.8px !important;
  height: 12.8px !important;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.enterprise-row-header .rz-icon {
  font-family: 'Material Icons' !important;
  font-weight: normal;
  font-style: normal;
  opacity: 0.6;
  font-size: 12.8px !important;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------------------------
   ENTERPRISE FORM PAGES - Professional UX/UI
   Diseño minimalista para páginas de creación/edición
   ---------------------------------------------------------------------------- */

/* Form Actions Top (Header buttons) */
.ep-form-actions-top {
  display: flex;
  gap: 9.6px;
  margin-left: auto;
}

@media (max-width: 768px) {
  .ep-form-actions-top {
    width: 100%;
    margin-left: 0;
  }

  .ep-form-actions-top .rz-button {
    flex: 1;
  }
}

/* Form Container - Layout principal */
.ep-form-container {
  display: grid;
  grid-template-columns: 1fr 256px;
  gap: 19.2px;
  align-items: start;
}

@media (max-width: 1024px) {
  .ep-form-container {
    grid-template-columns: 1fr;
  }
}

/* Form Card - Contenedor principal del formulario */
.ep-form-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 9.6px;
  box-shadow: 0 1px 2.4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: box-shadow 0.18s ease;
}

.ep-form-card:hover {
  box-shadow: 0 3.2px 9.6px rgba(0, 0, 0, 0.06);
}

/* Form Header */
.ep-form-header {
  display: flex;
  align-items: center;
  gap: 12.8px;
  padding: 16px 19.2px;
  background: #F8FAFC; /* Slate 50 */
  border-bottom: 1px solid #E5E7EB;
}

@media (max-width: 640px) {
  .ep-form-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 12.8px;
  }
}

.ep-form-header-icon {
  width: 38.4px;
  height: 38.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #008944;
  border-radius: 8px;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 1.6px 3.2px rgba(15, 23, 42, 0.06);
}

.ep-form-header-icon .material-icons {
  font-size: 25.6px;
  color: white;
}

.ep-form-header-text {
  flex: 1;
  min-width: 0;
}

.ep-form-header-text h2 {
  font-family: 'Inter', sans-serif;
  font-size: 14.4px;
  font-weight: 600;
  color: #0F172A;
  margin: 0 0 3.2px 0;
  line-height: 1.3;
}

.ep-form-header-text p {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #64748B;
  margin: 0;
  line-height: 1.4;
}

.ep-form-header-badge {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .ep-form-header-badge {
    width: 100%;
  }
}

.ep-required-badge {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  padding: 4.8px 9.6px;
  background: #FEF2F2; /* Red 50 */
  color: #B91C1C; /* Red 700 */
  border: 1px solid #FECACA; /* Red 200 */
  border-radius: 4.8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ep-required-badge .material-icons {
  font-size: 11.2px;
  color: #DC2626; /* Red 600 */
}

/* Form Body */
.ep-form-body {
  padding: 22.4px 19.2px;
}

@media (max-width: 640px) {
  .ep-form-body {
    padding: 16px 12.8px;
  }
}

/* Help Card - Tarjeta de ayuda lateral */
.ep-help-card {
  background: #FFFBEB; /* Amber 50 */
  border: 1px solid #FDE68A; /* Amber 200 */
  border-radius: 9.6px;
  padding: 16px;
  position: sticky;
  top: 70.4px; /* 51.2px header + 19.2px spacing */
}

@media (max-width: 1024px) {
  .ep-help-card {
    position: static;
  }
}

.ep-help-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FEF3C7; /* Amber 100 */
  border-radius: 6.4px;
  color: #B45309; /* Amber 700 */
  margin-bottom: 12.8px;
}

.ep-help-content h3 {
  font-family: 'Inter', sans-serif;
  font-size: 12.8px;
  font-weight: 600;
  color: #78350F; /* Amber 900 */
  margin: 0 0 6.4px 0;
}

.ep-help-content p {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #92400E; /* Amber 800 */
  margin: 0 0 12.8px 0;
  line-height: 1.5;
}

.ep-help-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ep-help-content ul li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 9.6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #92400E; /* Amber 800 */
  line-height: 1.5;
}

.ep-help-content ul li:last-child {
  margin-bottom: 0;
}

.ep-help-content ul li .material-icons {
  flex-shrink: 0;
  color: #B45309; /* Amber 700 */
  margin-top: 1.6px;
}

/* Radzen Form Controls dentro de ep-form-body */
.ep-form-body .rz-textbox,
.ep-form-body .rz-textarea,
.ep-form-body .rz-numeric,
.ep-form-body .rz-dropdown,
.ep-form-body .rz-datepicker input {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.2px !important;
  /*border-radius: 6.4px !important;*/
  border: 1px solid #E5E7EB !important;
  transition: all 0.18s ease !important;
}

.ep-form-body .rz-numeric,
.ep-form-body .rz-datepicker {
  padding: 0 !important;
}

.ep-form-body .rz-datepicker > .rz-inputtext,
.ep-form-body .rz-numeric > .rz-numeric-input {
  box-sizing: border-box;
}

.ep-form-body .rz-textbox:hover,
.ep-form-body .rz-textarea:hover,
.ep-form-body .rz-numeric:hover,
.ep-form-body .rz-dropdown:hover,
.ep-form-body .rz-datepicker input:hover {
  border-color: #CBD5E1 !important;
}

.ep-form-body .rz-textbox:focus,
.ep-form-body .rz-textarea:focus,
.ep-form-body .rz-numeric:focus,
.ep-form-body .rz-dropdown:focus,
.ep-form-body .rz-datepicker input:focus {
  border-color: #008C45 !important;
  box-shadow: 0 0 0 2.4px rgba(0, 140, 69, 0.1) !important;
  outline: none !important;
}

/* Form Labels */
.ep-form-body label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #334155;
  margin-bottom: 4.8px;
  display: inline-block;
}

/* Form Buttons */
.ep-form-body .rz-button {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  border-radius: 6.4px !important;
  transition: all 0.18s ease !important;
  min-height: 32px !important;
}

.ep-form-body .rz-button-primary {
  background: #008944 !important;
  border-color: #008C45 !important;
  box-shadow: 0 1.6px 3.2px rgba(15, 23, 42, 0.06) !important;
}

.ep-form-body .rz-button-primary:hover {
  background: #00753A !important;
  border-color: #00753A !important;
  box-shadow: 0 3.2px 6.4px rgba(15, 23, 42, 0.09) !important;
  transform: translateY(-1px);
}

/* Validation Messages */
.ep-form-body .validation-message {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #DC2626;
  margin-top: 3.2px;
  display: flex;
  align-items: center;
  gap: 3.2px;
}

.ep-form-body .validation-message::before {
  content: 'error';
  font-family: 'Material Icons';
  font-size: 11.2px;
}

/* ============================================
   FORM SUBMIT COMPONENT - ENTERPRISE UX/UI
   Typography: Inter | Icons: Material Icons
   Color: Chinese Red #00753A
   ============================================ */

/* Simple Form Container - Sin header (controlado por página padre) */
.simple-form-container {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

/* Simple Form Body - Contenedor principal */
.simple-form-body {
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Radzen Form Wrapper */
.simple-form-body .enterprise-form {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Form Fields Grid */
.enterprise-form-grid {
  display: grid;
  gap: 19.2px;
  margin-bottom: 25.6px;
}

/* Individual Field Container */
.enterprise-form-field {
  margin-bottom: 0;
}

/* Field Label - Inter SemiBold con Material Icons */
.enterprise-form-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #0F172A;
  margin-bottom: 6.4px;
  letter-spacing: -0.01em;
}

.enterprise-form-label .label-content {
  display: flex;
  align-items: center;
  gap: 4.8px;
}

.enterprise-form-label .label-icon {
  font-size: 12.8px;
  color: #94A3B8;
  transition: color 0.18s ease;
}

.enterprise-form-label:hover .label-icon {
  color: #64748B;
}

.enterprise-form-label .label-text {
  color: #0F172A;
}

.enterprise-form-label .required-indicator {
  color: #EF4444;
  margin-left: 3.2px;
   font-weight: 700;
  font-size: 11.2px;
}

/* Input Wrapper */
.enterprise-form-input-wrapper {
  position: relative;
}

/* Radzen Input Controls - Inter Regular con focus Chinese Red */
.enterprise-form-input-wrapper .rz-textbox,
.enterprise-form-input-wrapper .rz-dropdown,
.enterprise-form-input-wrapper .rz-numeric,
.enterprise-form-input-wrapper .rz-textarea,
.enterprise-form-input-wrapper .rz-mask,
.enterprise-form-input-wrapper .rz-datepicker,
.enterprise-form-input-wrapper .form-control {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 11.2px !important;
  font-weight: 400 !important;
  color: #0F172A !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  /*border-radius: 6.4px !important;*/
  transition: all 0.18s ease !important;
  line-height: 1.5 !important;
  box-shadow: 0 1px 1.6px rgba(0, 0, 0, 0.02) !important;
}

.enterprise-form-input-wrapper .rz-textbox:hover,
.enterprise-form-input-wrapper .rz-dropdown:hover,
.enterprise-form-input-wrapper .rz-numeric:hover,
.enterprise-form-input-wrapper .rz-textarea:hover,
.enterprise-form-input-wrapper .form-control:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 1px 2.4px rgba(0, 0, 0, 0.04) !important;
}

.enterprise-form-input-wrapper .rz-textbox:focus,
.enterprise-form-input-wrapper .rz-dropdown:focus,
.enterprise-form-input-wrapper .rz-numeric:focus,
.enterprise-form-input-wrapper .rz-textarea:focus,
.enterprise-form-input-wrapper .form-control:focus,
.enterprise-form-input-wrapper .rz-datepicker:focus-within {
  border-color: #008C45 !important;
  box-shadow: 0 0 0 2.4px rgba(0, 140, 69, 0.1), 0 1px 1.6px rgba(0, 0, 0, 0.04) !important;
  outline: none !important;
}

.enterprise-form-input-wrapper .rz-textbox::placeholder,
.enterprise-form-input-wrapper .rz-textarea::placeholder {
  color: #94A3B8 !important;
  opacity: 1 !important;
}

/* Checkbox Wrapper - Material Design style con mejor contraste */
.simple-checkbox-wrapper,
.enterprise-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 9.6px;
  padding: 11.2px 12.8px;
  background: #F8FAFC;
  border: 1px solid #E5E7EB;
  border-radius: 6.4px;
  transition: all 0.18s ease;
  cursor: pointer;
}

.simple-checkbox-wrapper:hover,
.enterprise-checkbox-wrapper:hover {
  background: rgba(0, 140, 69, 0.04);
  border-color: rgba(0, 140, 69, 0.3);
  box-shadow: 0 1px 2.4px rgba(15, 23, 42, 0.04);
}

.simple-checkbox-wrapper .rz-chkbox,
.enterprise-checkbox-wrapper .rz-chkbox {
  margin: 0;
  flex-shrink: 0;
}

.simple-checkbox-wrapper label,
.enterprise-checkbox-wrapper label {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11.2px;
  font-weight: 500;
  color: #0F172A;
  cursor: pointer;
  user-select: none;
}

/* Checkbox Label - Cuando está dentro del wrapper */
.checkbox-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11.2px;
  font-weight: 500;
  color: #0F172A;
  margin: 0;
  flex: 1;
}

/* Form Actions - Botones profesionales con mejor separación */
.enterprise-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22.4px;
  border-top: 1.6px solid #F1F5F9;
  margin-top: 28.8px;
  gap: 12.8px;
}

.form-actions-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12.8px;
  flex-wrap: wrap;
}

.action-buttons-container {
  display: flex;
  gap: 9.6px;
  align-items: center;
}

/* Enterprise Buttons - Inter Medium con Material Icons */
.enterprise-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6.4px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11.2px;
  font-weight: 500;
  padding: 8.8px 19.2px;
  border-radius: 6.4px;
  border: 1px solid transparent;
  transition: all 0.18s ease;
  cursor: pointer;
  letter-spacing: -0.01em;
  min-height: 33.6px;
  box-shadow: 0 1px 1.6px rgba(0, 0, 0, 0.04);
}

.enterprise-btn .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.enterprise-btn .btn-label {
  white-space: nowrap;
  font-weight: 500;
}

/* Primary Button - Chinese Red con mejor contraste */
.enterprise-btn-primary {
  background: linear-gradient(135deg, #008944 0%, #00753A 100%);
  color: #FFFFFF;
  border-color: #008C45;
  box-shadow: 0 1.6px 3.2px rgba(15, 23, 42, 0.06), 0 1px 1.6px rgba(15, 23, 42, 0.04);
}

.enterprise-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #00753A 0%, #005F2F 100%);
  border-color: #005F2F;
  box-shadow: 0 3.2px 9.6px rgba(15, 23, 42, 0.09), 0 1.6px 3.2px rgba(15, 23, 42, 0.04);
  transform: translateY(-1px);
}

.enterprise-btn-primary:active:not(:disabled) {
  background: #005F2F;
  border-color: #1C7430;
  transform: translateY(0);
  box-shadow: 0 1px 1.6px rgba(15, 23, 42, 0.06);
}

.enterprise-btn-primary:disabled {
  background: #94A3B8;
  border-color: #94A3B8;
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

/* Secondary Button - Outline con mejor contraste */
.enterprise-btn-secondary {
  background: #FFFFFF;
  color: #475569;
  border-color: #CBD5E1;
  box-shadow: 0 1px 1.6px rgba(0, 0, 0, 0.04);
}

.enterprise-btn-secondary:hover:not(:disabled) {
  background: #F8FAFC;
  border-color: #94A3B8;
  color: #0F172A;
  box-shadow: 0 1.6px 3.2px rgba(0, 0, 0, 0.08);
}

.enterprise-btn-secondary:active:not(:disabled) {
  background: #F1F5F9;
  border-color: #64748B;
  transform: translateY(0);
  box-shadow: 0 1px 1.6px rgba(0, 0, 0, 0.04);
}

/* Button Loading State */
.enterprise-btn[data-kt-indicator="on"] .indicator-label {
  display: none;
}

.enterprise-btn[data-kt-indicator="on"] .indicator-progress {
  display: flex;
  align-items: center;
  gap: 6.4px;
}

.enterprise-btn .indicator-progress {
  display: none;
}

.btn-spinner {
  display: inline-block;
  width: 12.8px;
  height: 12.8px;
}

.spinner-ring {
  width: 12.8px;
  height: 12.8px;
  border: 1.6px solid rgba(255, 255, 255, 0.3);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: spinner-rotate 0.6s linear infinite;
}

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

.btn-label-sm {
  font-size: 11px;
  font-weight: 500;
}

/* Form Footer Info - Security Badge */
.form-footer-info {
  display: flex;
  align-items: center;
  gap: 9.6px;
}

.form-security-badge {
  display: flex;
  align-items: center;
  gap: 4.8px;
  padding: 4.8px 9.6px;
  background: rgba(0, 140, 69, 0.08);
  border-radius: 4.8px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #00753A;
}

/* Validation Messages - Inter Regular */
.enterprise-form .validation-message,
.enterprise-form .rz-message {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #EF4444;
  margin-top: 4.8px;
  display: flex;
  align-items: center;
  gap: 4.8px;
}

/* Responsive - Mobile First */
@media (max-width: 768px) {
  .enterprise-form-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .enterprise-form-actions {
    flex-direction: column;
    gap: 12.8px;
    padding-top: 19.2px;
    margin-top: 22.4px;
  }

  .form-actions-wrapper {
    flex-direction: column;
    gap: 12.8px;
  }

  .action-buttons-container {
    width: 100%;
    flex-direction: column-reverse;
    gap: 9.6px;
  }

  .enterprise-btn {
    width: 100%;
    justify-content: center;
    min-height: 38.4px;
    padding: 10.4px 19.2px;
    font-size: 12px;
  }

  .enterprise-btn .btn-icon {
    font-size: 17.6px;
  }

  .enterprise-btn .btn-label {
    font-size: 12px;
    font-weight: 500;
  }

  .form-footer-info {
    width: 100%;
    justify-content: center;
    order: -1;
  }

  .form-security-badge {
    font-size: 11px;
  }
}

/* Tablet Portrait Improvements (≤614.4px) */
@media (max-width: 768px) {
  .enterprise-form-actions {
    position: sticky;
    bottom: 0;
    background: #FFFFFF;
    margin: 0 -12.8px;
    padding: 12.8px 12.8px 16px;
    border-top: 1px solid #E5E7EB;
    box-shadow: 0 -3.2px 9.6px rgba(0, 0, 0, 0.08);
    z-index: 100;
  }

  .form-actions-wrapper {
    gap: 9.6px;
  }

  .action-buttons-container {
    gap: 8px;
  }

  .enterprise-btn {
    min-height: 36.8px;
    border-radius: 8px;
    font-size: 11.2px;
  }

  .form-footer-info {
    padding-bottom: 0;
  }
}

/* Small Mobile (≤512px) */
@media (max-width: 640px) {
  .enterprise-form-actions {
    margin: 0 -9.6px;
    padding: 11.2px 9.6px 12.8px;
  }

  .enterprise-btn {
    min-height: 35.2px;
    font-size: 11.2px;
    padding: 8.8px 16px;
  }

  .enterprise-btn .btn-icon .material-icons {
    font-size: 16px !important;
  }

  .enterprise-btn .btn-label {
    font-size: 11.2px;
  }

  .form-security-badge {
    font-size: 11px;
    flex-direction: column;
    text-align: center;
    gap: 3.2px;
  }
}

/* ============================================
   ENHANCED NUEVO.RAZOR LAYOUT
   Professional Form Page Design
   ============================================ */

/* Form Layout - Main + Sidebar */
.ep-form-layout {
  display: grid;
  grid-template-columns: 1fr 288px;
  gap: 19.2px;
  align-items: start;
}

@media (max-width: 1024px) {
  .ep-form-layout {
    grid-template-columns: 1fr;
  }
}

/* Enhanced Header Content */
.ep-header-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 19.2px;
  margin-bottom: 25.6px;
  flex-wrap: wrap;
}

/* Enhanced Card Header */
.ep-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19.2px 22.4px;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  border-bottom: 1px solid #E5E7EB;
}

.ep-card-header-content {
  display: flex;
  align-items: center;
  gap: 12.8px;
  flex: 1;
}

.ep-card-icon {
  width: 38.4px;
  height: 38.4px;
  background: rgba(0, 140, 69, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ep-card-icon .material-icons {
  font-size: 19.2px;
  color: #00753A;
}

.ep-card-title h2 {
  font-family: 'Inter', sans-serif;
  font-size: 14.4px;
  font-weight: 600;
  color: #0F172A;
  margin: 0 0 3.2px 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.ep-card-title p {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #64748B;
  margin: 0;
  line-height: 1.4;
}

.ep-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  padding: 4.8px 9.6px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 4.8px;
  font-size: 11px;
  font-weight: 500;
  color: #2563EB;
  white-space: nowrap;
}

.ep-card-badge .material-icons {
  font-size: 12.8px;
}

/* Enhanced Card Body */
.ep-card-body {
  padding: 25.6px 22.4px;
}

/* Sidebar - Enhanced Help Card */
.ep-sidebar {
  position: sticky;
  top: 70.4px;
  height: fit-content;
}

.ep-help-card {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1px solid #FDE68A;
  border-radius: 9.6px;
  overflow: hidden;
  box-shadow: 0 1.6px 6.4px rgba(245, 158, 11, 0.08);
}

.ep-help-header {
  display: flex;
  align-items: center;
  gap: 9.6px;
  padding: 16px 19.2px;
  background: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid #FDE68A;
}

.ep-help-header .material-icons {
  font-size: 22.4px;
  color: #B45309;
}

.ep-help-header h3 {
  font-family: 'Inter', sans-serif;
  font-size: 12.8px;
  font-weight: 600;
  color: #78350F;
  margin: 0;
  letter-spacing: -0.01em;
}

.ep-help-body {
  padding: 19.2px;
}

.ep-help-description {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #92400E; /* Amber 800 */
  line-height: 1.6;
  margin: 0 0 16px 0;
}

.ep-help-section {
  margin-bottom: 16px;
}

.ep-help-section:last-child {
  margin-bottom: 0;
}

.ep-help-section h4 {
  display: flex;
  align-items: center;
  gap: 6.4px;
  font-family: 'Inter', sans-serif;
  font-size: 11.2px;
  font-weight: 600;
  color: #78350F;
  margin: 0 0 9.6px 0;
  letter-spacing: -0.01em;
}

.ep-help-section h4 .material-icons {
  font-size: 14.4px;
  color: #B45309;
}

.ep-help-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ep-help-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #92400E; /* Amber 800 */
  line-height: 1.5;
}

.ep-help-list li:last-child {
  margin-bottom: 0;
}

.ep-help-list li .material-icons {
  flex-shrink: 0;
  color: #B45309; /* Amber 700 */
  margin-top: 1.6px;
}


/* ============================================================================
   ENTERPRISE TOGGLE SWITCH CARD - MINIMALIST
   Diseño limpio y simple para campos booleanos
   ============================================================================ */
.enterprise-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6.4px 12.8px;
  background: #F8FAFC; /* Very subtle background */
  border-radius: 6.4px;
  transition: all 0.2s ease;
  cursor: pointer;
  min-height: 38.4px;
  border: 1px solid transparent;
}

.enterprise-toggle-card:hover {
  background: #F1F5F9;
}

.enterprise-toggle-card.active {
  background: #F0FDF4; /* Very subtle green tint when active */
}

.enterprise-toggle-content {
  display: flex;
  flex-direction: column;
  gap: 1.6px;
  flex: 1;
}

.enterprise-toggle-status {
  font-family: var(--ep-font-family-text);
  font-size: 11.2px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6.4px;
  transition: color 0.2s ease;
}

.enterprise-toggle-status.status-active {
  color: #15803D; /* Green-700 */
}

.enterprise-toggle-status.status-inactive {
  color: #64748B; /* Slate-500 */
}

.enterprise-switch-wrapper {
  margin-left: 9.6px;
}

/* Customizing RadzenSwitch within the card */
.enterprise-toggle-card .rz-switch {
  width: 32px !important;
  height: 17.6px !important;
  min-width: 32px !important;
  min-height: 17.6px !important;
}

.enterprise-toggle-card .rz-switch .rz-switch-circle {
  width: 14.4px !important;
  height: 14.4px !important;
  top: 1.6px !important;
  box-shadow: none !important;
}

.enterprise-toggle-card .rz-switch.rz-switch-checked {
  background-color: #16A34A !important; /* Green-600 */
  box-shadow: none !important;
}

.enterprise-toggle-card .rz-switch.rz-switch-checked .rz-switch-circle {
  box-shadow: none !important;
}

.enterprise-toggle-card .rz-switch:not(.rz-switch-checked) {
  background-color: #CBD5E1 !important; /* Slate-300 */
}

.enterprise-toggle-card .rz-switch:focus,
.enterprise-toggle-card .rz-switch:focus-visible,
.enterprise-toggle-card .rz-switch:focus-within {
  box-shadow: none !important;
  outline: none !important;
}

/* ===================================
   CONTENCIÓN DE SCROLL EN GRIDS (M-5)
   El scroll horizontal de tablas anchas queda DENTRO del grid,
   evitando que la página entera se desplace y se pierdan header/acciones.
   No altera columnas ni datos: solo el contenedor.
   =================================== */
.enterprise-data-grid-wrapper,
.enterprise-data-grid-wrapper .rz-data-grid,
.enterprise-data-grid-wrapper .rz-datatable {
  max-width: 100%;
}

.enterprise-data-grid-wrapper .rz-data-grid-data,
.enterprise-data-grid-wrapper .rz-datatable-data {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Columnas marcadas como opcionales (clase en el grid) se ocultan en móvil.
   El dato sigue disponible en el detalle/expansión: no se pierde funcionalidad. */
@media (max-width: 768px) {
  .enterprise-data-grid-wrapper .col-optional {
    display: none;
  }
}

/* Grillas que deben mostrar el contenido completo (sin truncado): las celdas
   y los títulos hacen wrap en varias líneas en lugar de recortar con ellipsis.
   Se aplica solo a las grillas con la clase .rz-grid-full-content. */
.rz-grid-full-content thead th,
.rz-grid-full-content tbody td {
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
  overflow-wrap: break-word;
  height: auto !important;
}

.rz-grid-full-content .rz-cell-data,
.rz-grid-full-content .rz-column-title,
.rz-grid-full-content .rz-column-title-content {
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
  overflow-wrap: break-word;
}

/* La tabla ocupa todo el ancho disponible; las columnas se dimensionan al
   contenido (layout automático) y el espacio sobrante se reparte. */
.rz-grid-full-content .rz-data-grid-data table,
.rz-grid-full-content table.rz-grid-table {
  width: 100% !important;
  table-layout: auto !important;
}

/* Altura adaptable al viewport para la grilla principal, en reemplazo del
   max-height fijo (428px). La grilla usa el alto real de pantalla disponible:
   en monitores grandes muestra más filas, en chicos menos, con scroll interno
   solo cuando hace falta. Header sticky se mantiene al hacer scroll.
   El offset (~192px) cubre el chrome de la app + toolbar + resumen de paginado.
   Si el ajuste no es perfecto en tu pantalla, es el ÚNICO número a tocar. */
.ep-grid-adaptive {
  /* height (no solo max-height) para que la grilla LLENE el alto disponible,
     con min-height de piso para que nunca se colapse a 1-2 filas en laptops
     de poca altura o con escalado de Windows. El scroll interno aparece solo
     si las filas superan el alto. */
  height: calc(100vh - 176px) !important;
  min-height: 368px !important;
}

@media (max-width: 768px) {
  .ep-grid-adaptive {
    height: calc(100vh - 128px) !important;
    min-height: 336px !important;
  }
}

/* Grillas internas (dentro del expand / RadzenTabs) con SCROLL HORIZONTAL.
   Opuesto a .rz-grid-full-content: en vez de envolver el texto y comprimir las
   columnas al ancho del contenedor, las columnas mantienen su ancho natural
   (nowrap), la tabla crece a lo ancho según su contenido y el área de datos
   scrollea de lado. El scroll es interno al contenedor de datos, así que la
   grilla nunca se corta en el borde de la tabla superior: se mantiene dentro
   de su fila y muestra su propia barra de scroll. */
.ep-grid-scroll-x .rz-data-grid-data {
  overflow-x: auto !important;
}

.ep-grid-scroll-x thead th,
.ep-grid-scroll-x tbody td {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.ep-grid-scroll-x .rz-data-grid-data table,
.ep-grid-scroll-x table.rz-grid-table {
  /* La tabla ocupa solo el ancho de su contenido: en tablas de pocas columnas
     (Logistic, Status, Documentation, Inbound) las columnas se pegan al contenido
     y NO se estiran dejando huecos. En tablas anchas (Detalles) el contenido
     supera el contenedor igual y aparece el scroll horizontal. */
  width: auto !important;
  min-width: 0 !important;
  table-layout: auto !important;
}

/* ---------------------------------------------------------------------------
   Financial documents status banner (Custom Attachment tab of ShipmentHeader
   Nuevo/Editar). Prominent card that reflects whether the 3 required financial
   documents (invoice + customs declaration + VAT bill) are all uploaded.
   Accent color and left border switch between "pending" (amber) and "ok"
   (green). Theme-aware via Radzen CSS variables. */
.ep-financial-banner {
  margin-bottom: 1rem !important;
  border-left: 4.8px solid var(--rz-warning) !important;
}

.ep-financial-banner .ep-financial-banner__icon {
  font-size: 2.25rem !important;
  color: var(--rz-warning) !important;
}

.ep-financial-banner--ok {
  border-left-color: var(--rz-success) !important;
}

.ep-financial-banner--ok .ep-financial-banner__icon {
  color: var(--rz-success) !important;
}

/* ---------------------------------------------------------------------------
   Compact grid (opt-in per grid via Class="ep-compact-grid").
   Same visual density as the .ep-content grids, but targeting the actual
   Radzen 9 DOM (.rz-grid-table) so it works anywhere (forms, tabs, dialogs).
   Used by the Custom Attachment document grids in ShipmentHeader Nuevo/Editar
   and Inventory Index. */
.ep-compact-grid .rz-grid-table thead th {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748B !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 12.8px !important;
  white-space: nowrap;
}

.ep-compact-grid .rz-grid-table tbody td {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.2px !important;
  font-weight: 400 !important;
  color: #0F172A !important;
  padding: 6.4px 12.8px !important;
  vertical-align: middle;
}

/* Action buttons inside the compact grid: smaller footprint, single row */
.ep-compact-grid .rz-grid-table tbody td .rz-button {
  width: 25.6px !important;
  height: 25.6px !important;
  min-width: 25.6px !important;
  padding: 0 !important;
}

.ep-compact-grid .rz-grid-table tbody td .rz-button .rzi {
  font-size: 14.4px !important;
}

/* ---------------------------------------------------------------------------
   Quick-summary read-only field grid (Basic Information tab of ShipmentHeader
   Editar). Flat label/value pairs, no nested Row>Column>Stack wrapper - keeps
   the at-a-glance summary shallow and easy to scan. Same typography scale as
   .ep-compact-grid so it matches the rest of the module.
   --------------------------------------------------------------------------- */
.ep-summary-field {
  margin-bottom: 0.85rem !important;
}

.ep-summary-label {
  display: block;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748B !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem !important;
}

.ep-summary-value {
  display: block;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.6px !important;
  font-weight: 500 !important;
  color: #0F172A !important;
  word-break: break-word;
}

/* ----------------------------------------------------------------------------
   DATA GRID PAGER - shared Radzen pager layout.
   Deduplicated from per-page <style> blocks (Inventory, MarketPriceHis, ...).
   !important is required to win over Radzen's theme stylesheet.
   ---------------------------------------------------------------------------- */
.ep-data-grid .rz-pager {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: var(--ep-space-2) !important;
  padding: 10px 16px !important;
}

.ep-data-grid .rz-pager-summary {
  margin-right: auto !important;
  order: 0 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.ep-data-grid .rz-pager-pages {
  order: 1 !important;
}

.ep-data-grid .rz-pager .rz-dropdown {
  order: 2 !important;
  width: 72px !important;
  min-width: 72px !important;
  font-size: 13px !important;
}

.ep-data-grid .rz-pager .rz-pagesize-text {
  order: 3 !important;
  font-size: 12px !important;
  color: var(--ep-gray-80) !important;
  white-space: nowrap !important;
}

/* ----------------------------------------------------------------------------
   TOOLBAR CHIPS - selection indicator icon + inline stat chips
   ---------------------------------------------------------------------------- */
.ep-toolbar-selection .material-icons {
  font-size: 14px;
}

.ep-toolbar-stat {
  display: inline-flex;
  align-items: center;
  gap: var(--ep-space-1);
  padding: var(--ep-space-1) var(--ep-space-3);
  border: 1px solid var(--ep-color-border-subtle);
  border-radius: var(--ep-radius-circular);
  background: var(--ep-color-bg-subtle);
  font-size: var(--ep-font-caption);
  font-weight: var(--ep-font-weight-semibold);
  color: var(--ep-color-text-secondary);
  white-space: nowrap;
}

.ep-toolbar-stat .material-icons {
  font-size: 14px;
  color: var(--ep-color-text-tertiary);
}