/* ============================================================================
   TERRAVIX HEADER ENTERPRISE - METRONIC STYLE
   ============================================================================
   Diseño: Senior UX/UI Enterprise
   Sistema de Diseño:
   - Grid base: 6.4px (espaciado enterprise)
   - Altura header: 51.2px desktop → 44.8px scrolled → 44.8px mobile
   - Container: max-w-1280 centrado, px-24 desktop / px-12 mobile
   - Controles uniformes: 32px alto (±1.6px permitido)
   - Tipografía: Inter 14/12.8px semibold para labels
   - Contraste: 4.5:1 texto, 3:1 iconos
   ========================================================================== */

/* ----------------------------------------------------------------------------
   DESIGN TOKENS ENTERPRISE
   ---------------------------------------------------------------------------- */
:root {
  /* Spacing Scale (base 6.4px enterprise) */
  --tvx-ent-space-1: 3.2px;
  --tvx-ent-space-2: 6.4px;
  --tvx-ent-space-3: 9.6px;
  --tvx-ent-space-4: 12.8px;
  --tvx-ent-space-5: 16px;
  --tvx-ent-space-6: 19.2px;
  --tvx-ent-space-8: 25.6px;
  --tvx-ent-space-10: 32px;
  
  /* Colors Light Mode - Enterprise Palette */
  --tvx-ent-bg-primary: #FFFFFF;
  --tvx-ent-bg-secondary: #F8FAFC;
  --tvx-ent-bg-tertiary: #F1F5F9;
  --tvx-ent-border-light: #E6E9EE;
  --tvx-ent-border-medium: #CBD5E1;
  --tvx-ent-text-primary: #0F172A;
  --tvx-ent-text-secondary: #475569;
  --tvx-ent-text-tertiary: #64748B;
  --tvx-ent-accent-primary: #008C45;
  --tvx-ent-accent-hover: #00753A;
  --tvx-ent-accent-40: rgba(0, 140, 69, 0.25);
  
  /* Heights */
  --tvx-ent-header-height-full: 60px; /* breathing room for the 32px context pills */
  --tvx-ent-header-height-scrolled: 52px;
  --tvx-ent-control-height: 32px;
  --tvx-ent-pill-height: 28.8px;
  
  /* Shadows Enterprise */
  --tvx-ent-shadow-sm: 0 1px 1.6px 0 rgba(0, 0, 0, 0.05);
  --tvx-ent-shadow-md: 0 1.6px 9.6px rgba(16, 24, 40, 0.06);
  --tvx-ent-shadow-lg: 0 8px 12px -2.4px rgba(0, 0, 0, 0.1), 0 3.2px 4.8px -1.6px rgba(0, 0, 0, 0.05);
  --tvx-ent-shadow-xl: 0 16px 20px -4px rgba(0, 0, 0, 0.1), 0 8px 8px -4px rgba(0, 0, 0, 0.04);
  
  /* Typography */
  --tvx-ent-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tvx-ent-font-size-sm: 10.4px;
  --tvx-ent-font-size-base: 11.2px;
  --tvx-ent-font-size-md: 12.8px;
  --tvx-ent-font-weight-normal: 400;
  --tvx-ent-font-weight-medium: 500;
  --tvx-ent-font-weight-semibold: 600;
  --tvx-ent-font-weight-bold: 700;
  
  /* Transitions */
  --tvx-ent-timing-fast: 150ms;
  --tvx-ent-timing-base: 200ms;
  --tvx-ent-timing-slow: 300ms;
  --tvx-ent-ease: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Border Radius */
  --tvx-ent-radius-sm: 4.8px;
  --tvx-ent-radius-md: 6.4px;
  --tvx-ent-radius-lg: 8px;
  --tvx-ent-radius-pill: 7999.2px;
}

/* Dark Mode Tokens */
@media (prefers-color-scheme: dark) and (max-width: 0px) { /* Tema oscuro deshabilitado: la app siempre usa tema claro */
  :root {
    --tvx-ent-bg-primary: #0F172A;
    --tvx-ent-bg-secondary: #1E293B;
    --tvx-ent-bg-tertiary: #334155;
    --tvx-ent-border-light: #334155;
    --tvx-ent-border-medium: #475569;
    --tvx-ent-text-primary: #F1F5F9;
    --tvx-ent-text-secondary: #CBD5E1;
    --tvx-ent-text-tertiary: #94A3B8;
    --tvx-ent-accent-primary: #FC8181;
    --tvx-ent-accent-hover: #008C45;
  }
}

/* ----------------------------------------------------------------------------
   HEADER CONTAINER - ENTERPRISE STICKY
   ---------------------------------------------------------------------------- */
.tvx-header-enterprise {
  position: fixed; /* Cambiado de sticky a fixed para mantener siempre arriba */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000; /* Alto z-index para mantener siempre visible sobre el contenido */
  
  /* Visual */
  background-color: var(--tvx-ent-bg-primary);
  border-bottom: 1px solid var(--tvx-ent-border-light);
  box-shadow: var(--tvx-ent-shadow-md);
  
  /* Height transitions */
  height: var(--tvx-ent-header-height-full);
  transition: height var(--tvx-ent-timing-base) var(--tvx-ent-ease),
              box-shadow var(--tvx-ent-timing-base) var(--tvx-ent-ease);
  
  /* Prevent content shift */
  contain: layout style;
}

/* Scrolled state - Reduce to 44.8px con frosted glass */
.tvx-header-enterprise.is-scrolled {
  height: var(--tvx-ent-header-height-scrolled);
  backdrop-filter: blur(6.4px);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3.2px 12.8px rgba(16, 24, 40, 0.08);
}

@media (prefers-color-scheme: dark) and (max-width: 0px) { /* Tema oscuro deshabilitado: la app siempre usa tema claro */
  .tvx-header-enterprise.is-scrolled {
    background-color: rgba(15, 23, 42, 0.9);
  }
}

/* Ocultar solo en móviles pequeños ≤512px (mobile-first) */
@media (max-width: 640px) {
  .tvx-header-enterprise {
    display: none !important;
  }
}

/* ----------------------------------------------------------------------------
   INNER CONTAINER - FULL WIDTH (sin centrado)
   ---------------------------------------------------------------------------- */
.tvx-header-enterprise__inner {
  max-width: 100%;
  margin: 0;
  padding: 0 var(--tvx-ent-space-3); /* 9.6px */
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tvx-ent-space-4); /* 12.8px entre clusters */
}

@media (max-width: 1440px) {
  .tvx-header-enterprise__inner {
    padding: 0 var(--tvx-ent-space-2); /* 6.4px */
  }
}

/* ----------------------------------------------------------------------------
   CLUSTERS - LEFT / CENTER / RIGHT
   ---------------------------------------------------------------------------- */
.tvx-header-enterprise__left {
  display: flex;
  align-items: center;
  gap: var(--tvx-ent-space-4); /* 12.8px entre controles */
  flex-shrink: 0;
}

.tvx-header-enterprise__center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 384px; /* 336px search + margins */
}

.tvx-header-enterprise__right {
  display: flex;
  align-items: center;
  gap: var(--tvx-ent-space-4); /* 12.8px entre controles */
  flex-shrink: 0;
}

/* Responsive: Reducir gaps en pantallas < 819.2px */
@media (max-width: 1024px) {
  .tvx-header-enterprise__inner {
    gap: var(--tvx-ent-space-3); /* 9.6px entre clusters */
  }
  
  .tvx-header-enterprise__left {
    gap: var(--tvx-ent-space-2); /* 6.4px entre controles */
  }
  
  .tvx-header-enterprise__right {
    gap: var(--tvx-ent-space-2); /* 6.4px entre controles */
  }
}

/* Responsive: Gaps mínimos en móviles */
@media (max-width: 640px) {
  .tvx-header-enterprise__inner {
    padding: 0 var(--tvx-ent-space-2); /* 6.4px */
    gap: var(--tvx-ent-space-2); /* 6.4px entre clusters */
  }
  
  .tvx-header-enterprise__left {
    gap: var(--tvx-ent-space-2); /* 6.4px entre controles */
  }
  
  .tvx-header-enterprise__right {
    gap: var(--tvx-ent-space-2); /* 6.4px entre controles */
  }
}

/* ----------------------------------------------------------------------------
   SEPARADORES VERTICALES - 1PX SUTIL
   ---------------------------------------------------------------------------- */
.tvx-header-enterprise__separator {
  width: 1px;
  height: 19.2px;
  background-color: var(--tvx-ent-border-light);
  margin: 0 var(--tvx-ent-space-2); /* 6.4px spacing */
  flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   HAMBURGER BUTTON - 40×40PX
   ---------------------------------------------------------------------------- */
.tvx-ent-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  
  width: var(--tvx-ent-control-height);
  height: var(--tvx-ent-control-height);
  padding: var(--tvx-ent-space-2);
  
  background-color: transparent;
  border: none;
  border-radius: var(--tvx-ent-radius-md);
  cursor: pointer;
  
  transition: background-color var(--tvx-ent-timing-base) var(--tvx-ent-ease);
}

.tvx-ent-hamburger:hover {
  background-color: var(--tvx-ent-bg-tertiary);
}

.tvx-ent-hamburger:focus-visible {
  outline: 1.6px solid var(--tvx-ent-accent-40);
  outline-offset: 1.6px;
}

.tvx-ent-hamburger__line {
  width: 14.4px;
  height: 1.6px;
  background-color: var(--tvx-ent-text-primary);
  border-radius: 1px;
  transform: none !important;
  opacity: 1 !important;
  transition: none;
}


/* ----------------------------------------------------------------------------
   LOGO + BRAND - COMPACTO
   ---------------------------------------------------------------------------- */
.tvx-ent-brand {
  display: flex;
  align-items: center;
  gap: var(--tvx-ent-space-2); /* 6.4px */
  text-decoration: none;
  padding: var(--tvx-ent-space-1) var(--tvx-ent-space-2);
  border-radius: var(--tvx-ent-radius-md);
  transition: background-color var(--tvx-ent-timing-base) var(--tvx-ent-ease);
}

.tvx-ent-brand:hover {
  background-color: var(--tvx-ent-bg-secondary);
}

.tvx-ent-brand:focus-visible {
  outline: 1.6px solid var(--tvx-ent-accent-40);
  outline-offset: 1.6px;
}

.tvx-ent-brand__logo {
  height: 34px; /* brand mark: primary visual anchor of the bar */
  width: auto;
  display: block;
}

.tvx-ent-brand__name {
  font-family: var(--tvx-ent-font-family);
  font-size: var(--tvx-ent-font-size-md); /* 12.8px */
  font-weight: var(--tvx-ent-font-weight-bold);
  color: var(--tvx-ent-text-primary);
  letter-spacing: -0.02em;
}

/* Ocultar nombre en scrolled */
.tvx-header-enterprise.is-scrolled .tvx-ent-brand__name {
  display: none;
}

/* Responsive: Ocultar nombre en pantallas < 819.2px */
@media (max-width: 1024px) {
  .tvx-ent-brand__name {
    display: none;
  }
}

/* ----------------------------------------------------------------------------
   BREADCRUMB - AGRÍCOLA › OPERACIÓN › DASHBOARD
   ---------------------------------------------------------------------------- */
.tvx-ent-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--tvx-ent-space-2); /* 6.4px */
  font-family: var(--tvx-ent-font-family);
  font-size: var(--tvx-ent-font-size-sm); /* 10.4px */
  color: var(--tvx-ent-text-tertiary);
}

.tvx-ent-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--tvx-ent-space-2);
}

.tvx-ent-breadcrumb__link {
  color: var(--tvx-ent-text-secondary);
  text-decoration: none;
  padding: var(--tvx-ent-space-1) var(--tvx-ent-space-2);
  border-radius: var(--tvx-ent-radius-sm);
  transition: color var(--tvx-ent-timing-base) var(--tvx-ent-ease),
              background-color var(--tvx-ent-timing-base) var(--tvx-ent-ease);
}

.tvx-ent-breadcrumb__link:hover {
  color: var(--tvx-ent-text-primary);
  background-color: var(--tvx-ent-bg-secondary);
}

.tvx-ent-breadcrumb__separator {
  color: var(--tvx-ent-border-medium);
  font-size: var(--tvx-ent-font-size-sm);
}

.tvx-ent-breadcrumb__current {
  color: var(--tvx-ent-text-primary);
  font-weight: var(--tvx-ent-font-weight-semibold);
}

/* Responsive: Ocultar breadcrumb en pantallas < 614.4px */
@media (max-width: 768px) {
  .tvx-ent-breadcrumb {
    display: none;
  }
  
  /* Ocultar separador después del logo */
  .tvx-header-enterprise__left > .tvx-header-enterprise__separator {
    display: none;
  }
}

/* Skeleton loading para breadcrumb */
.tvx-ent-breadcrumb.is-loading {
  background: linear-gradient(
    90deg,
    var(--tvx-ent-bg-tertiary) 25%,
    var(--tvx-ent-bg-secondary) 50%,
    var(--tvx-ent-bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  height: 16px;
  width: 192px;
  border-radius: var(--tvx-ent-radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ----------------------------------------------------------------------------
   GLOBAL SEARCH - 420PX × 40PX
   ---------------------------------------------------------------------------- */
.tvx-ent-search {
  position: relative;
  width: 100%;
  max-width: 336px;
  height: var(--tvx-ent-control-height);
}

.tvx-ent-search__input-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.tvx-ent-search__icon {
  position: absolute;
  left: var(--tvx-ent-space-3); /* 9.6px */
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--tvx-ent-text-tertiary);
  pointer-events: none;
}

.tvx-ent-search__input {
  width: 100%;
  height: 100%;
  padding: 0 var(--tvx-ent-space-10) 0 var(--tvx-ent-space-10); /* 32px left/right */
  
  font-family: var(--tvx-ent-font-family);
  font-size: var(--tvx-ent-font-size-base);
  color: var(--tvx-ent-text-primary);
  
  background-color: var(--tvx-ent-bg-secondary);
  border: 1px solid var(--tvx-ent-border-light);
  border-radius: var(--tvx-ent-radius-lg);
  
  transition: all var(--tvx-ent-timing-base) var(--tvx-ent-ease);
}

.tvx-ent-search__input::placeholder {
  color: var(--tvx-ent-text-tertiary);
}

.tvx-ent-search__input:hover {
  border-color: var(--tvx-ent-border-medium);
  background-color: var(--tvx-ent-bg-primary);
}

.tvx-ent-search__input:focus {
  outline: none;
  border-color: var(--tvx-ent-accent-primary);
  background-color: var(--tvx-ent-bg-primary);
  box-shadow: 0 0 0 2.4px var(--tvx-ent-accent-40);
}

.tvx-ent-search__shortcut {
  position: absolute;
  right: var(--tvx-ent-space-3);
  top: 50%;
  transform: translateY(-50%);
  
  padding: 1.6px var(--tvx-ent-space-2);
  font-family: var(--tvx-ent-font-family);
  font-size: 11px;
  font-weight: var(--tvx-ent-font-weight-semibold);
  color: var(--tvx-ent-text-tertiary);
  
  background-color: var(--tvx-ent-bg-tertiary);
  border: 1px solid var(--tvx-ent-border-light);
  border-radius: var(--tvx-ent-radius-sm);
  
  pointer-events: none;
}

/* Shimmer loading para search */
.tvx-ent-search.is-loading .tvx-ent-search__input {
  background: linear-gradient(
    90deg,
    var(--tvx-ent-bg-tertiary) 25%,
    var(--tvx-ent-bg-secondary) 50%,
    var(--tvx-ent-bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ----------------------------------------------------------------------------
   CONTEXT PILLS - ORGANIZACIÓN & CAMPO
   ---------------------------------------------------------------------------- */
.tvx-ent-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--tvx-ent-space-2); /* 6.4px entre icono y texto */
  
  height: var(--tvx-ent-pill-height); /* 28.8px */
  padding: 0 var(--tvx-ent-space-3) 0 var(--tvx-ent-space-2); /* Asimétrico: 6.4px left, 9.6px right */
  
  font-family: var(--tvx-ent-font-family);
  font-size: var(--tvx-ent-font-size-sm); /* 10.4px */
  font-weight: var(--tvx-ent-font-weight-semibold);
  color: var(--tvx-ent-text-secondary);
  
  background-color: var(--tvx-ent-bg-secondary);
  border: 1px solid var(--tvx-ent-border-light);
  border-radius: var(--tvx-ent-radius-pill);
  
  cursor: pointer;
  transition: all var(--tvx-ent-timing-base) var(--tvx-ent-ease);
}

.tvx-ent-pill:hover {
  background-color: var(--tvx-ent-bg-tertiary);
  border-color: var(--tvx-ent-border-medium);
  color: var(--tvx-ent-text-primary);
}

.tvx-ent-pill:active {
  background-color: var(--tvx-ent-bg-primary);
  transform: scale(0.98);
}

.tvx-ent-pill:focus-visible {
  outline: 1.6px solid var(--tvx-ent-accent-40);
  outline-offset: 1.6px;
}

.tvx-ent-pill.is-active {
  background-color: var(--tvx-ent-accent-primary);
  border-color: var(--tvx-ent-accent-primary);
  color: #FFFFFF;
}

.tvx-ent-pill:disabled,
.tvx-ent-pill.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.tvx-ent-pill__icon {
  width: 12.8px;
  height: 12.8px;
  flex-shrink: 0;
}

.tvx-ent-pill__label {
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tvx-ent-pill__caret {
  width: 11.2px;
  height: 11.2px;
  margin-left: var(--tvx-ent-space-1);
  transition: transform var(--tvx-ent-timing-base) var(--tvx-ent-ease);
}

.tvx-ent-pill[aria-expanded="true"] .tvx-ent-pill__caret {
  transform: rotate(180deg);
}

/* Responsive: Reducir ancho máximo de labels en tablets */
@media (max-width: 1024px) {
  .tvx-ent-pill__label {
    max-width: 80px;
  }
}

/* Responsive: Ocultar labels en móviles, solo iconos */
@media (max-width: 640px) {
  .tvx-ent-pill__label {
    display: none;
  }
  
  .tvx-ent-pill__caret {
    display: none;
  }
  
  .tvx-ent-pill {
    padding: 0 var(--tvx-ent-space-2);
    width: 28.8px;
    justify-content: center;
  }
}

/* Loading state con spinner */
.tvx-ent-pill.is-loading {
  pointer-events: none;
}

.tvx-ent-pill.is-loading .tvx-ent-pill__icon {
  animation: spin 0.6s linear infinite;
}

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

/* ----------------------------------------------------------------------------
   CONTEXT PILL WRAPPER - DROPDOWN DATA GRID CON ASPECTO DE PILL
   ---------------------------------------------------------------------------- */
.tvx-ent-pill-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* Estilizar el dropdown de Radzen: chip enterprise rectangular */
.tvx-ent-pill-dropdown.rz-dropdown {
  height: 33.6px;
  min-width: 118.4px;
  max-width: 176px;
  border-radius: var(--tvx-ent-radius-sm); /* 4.8px */
  border: 1px solid rgba(226, 232, 240, 1);
  background-color: #FAFAFA;
  font-family: var(--tvx-ent-font-family);
  font-size: 11px;
  font-weight: var(--tvx-ent-font-weight-medium);
  color: var(--tvx-ent-text-secondary);
  transition: all var(--tvx-ent-timing-fast) var(--tvx-ent-ease);
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
}

/* Ocultar iconos nativos de Radzen (flecha hacia abajo y botón clear) */
.tvx-ent-pill-dropdown .rz-dropdown-icon,
.tvx-ent-pill-dropdown .rz-dropdown-clear-icon {
  display: none !important;
}

.tvx-ent-pill-dropdown.rz-dropdown:hover {
  background-color: rgba(241, 245, 249, 0.95);
  border-color: var(--tvx-ent-border-medium);
  color: var(--tvx-ent-text-primary);
  box-shadow: 0 1px 3.2px rgba(15, 23, 42, 0.06);
}

.tvx-ent-pill-dropdown.rz-dropdown:focus,
.tvx-ent-pill-dropdown.rz-dropdown:focus-within {
  outline: none;
  border-color: var(--tvx-ent-accent-primary);
  box-shadow: 0 0 0 1.6px rgba(0, 140, 69, 0.15);
}

/* Template display dentro del dropdown: columna de dos líneas */
.tvx-ent-pill-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.6px;
  padding: 4.8px 9.6px;
  height: 33.6px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Micro-label de contexto (línea superior) */
.tvx-ent-pill__context {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94A3B8;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--tvx-ent-timing-fast) var(--tvx-ent-ease);
}

/* Fila de valor (línea inferior): icon + label + caret */
.tvx-ent-pill__value-row {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  overflow: hidden;
}

.tvx-ent-pill__value-row .tvx-ent-pill__icon {
  width: 9.6px;
  height: 9.6px;
  flex-shrink: 0;
  color: #6B7280;
  transition: color var(--tvx-ent-timing-fast) var(--tvx-ent-ease);
}

.tvx-ent-pill__value-row .tvx-ent-pill__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  color: #111827;
  line-height: 1.1;
}

.tvx-ent-pill__value-row .tvx-ent-pill__caret {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  color: #9CA3AF;
  margin-left: auto;
  transition: transform var(--tvx-ent-timing-fast) var(--tvx-ent-ease);
}

.tvx-ent-pill-dropdown.rz-dropdown:hover .tvx-ent-pill__icon,
.tvx-ent-pill-dropdown.rz-state-open .tvx-ent-pill__icon {
  color: var(--tvx-ent-accent-primary);
}

.tvx-ent-pill-dropdown.rz-dropdown:hover .tvx-ent-pill__caret,
.tvx-ent-pill-dropdown.rz-state-open .tvx-ent-pill__caret {
  opacity: 0.85;
}

/* Rotar caret cuando está abierto */
.tvx-ent-pill-dropdown.rz-state-open .tvx-ent-pill__caret {
  transform: rotate(180deg);
}

/* Estado abierto: acento sutil en el chip */
.tvx-ent-pill-dropdown.rz-state-open.rz-dropdown {
  border-color: var(--tvx-ent-accent-primary);
  background-color: rgba(0, 140, 69, 0.03);
  box-shadow: 0 0 0 1.6px rgba(0, 140, 69, 0.12);
  color: var(--tvx-ent-text-primary);
}

/* Ajustar popup del grid */
.tvx-ent-pill-dropdown .rz-dropdown-panel {
  border-radius: var(--tvx-ent-radius-md);
  box-shadow: 0 6.4px 19.2px rgba(15, 23, 42, 0.12), 0 1.6px 6.4px rgba(15, 23, 42, 0.06);
  border: 1px solid var(--tvx-ent-border-light);
  border-top: 1.6px solid var(--tvx-ent-accent-primary);
  max-width: 448px;
  margin-top: 4.8px;
  overflow: hidden;
}

/* Estilos para el DataGrid dentro del dropdown */
.tvx-ent-pill-dropdown .rz-datatable {
  font-size: 11px;
}

.tvx-ent-pill-dropdown .rz-datatable-scrollable-header {
  background-color: var(--tvx-ent-bg-secondary);
}

.tvx-ent-pill-dropdown .rz-datatable-scrollable-header th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tvx-ent-text-tertiary);
  background-color: var(--tvx-ent-bg-secondary);
  border-bottom: 1px solid var(--tvx-ent-border-light);
}

.tvx-ent-pill-dropdown .rz-datatable-data tr:hover > td {
  background-color: rgba(0, 140, 69, 0.04) !important;
}

.tvx-ent-pill-dropdown .rz-datatable-data tr.rz-state-highlight > td,
.tvx-ent-pill-dropdown .rz-datatable-data tr.rz-row-selected > td {
  background-color: rgba(0, 140, 69, 0.07) !important;
  color: var(--tvx-ent-text-primary) !important;
}

/* ----------------------------------------------------------------------------
   NOTIFICATION BELL - CON BADGE
   ---------------------------------------------------------------------------- */
.tvx-ent-notification {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: var(--tvx-ent-control-height);
  height: var(--tvx-ent-control-height);
  
  background-color: transparent;
  border: none;
  border-radius: var(--tvx-ent-radius-md);
  cursor: pointer;
  
  transition: background-color var(--tvx-ent-timing-base) var(--tvx-ent-ease);
}

.tvx-ent-notification:hover {
  background-color: var(--tvx-ent-bg-secondary);
}

.tvx-ent-notification:focus-visible {
  outline: 1.6px solid var(--tvx-ent-accent-40);
  outline-offset: 1.6px;
}

.tvx-ent-notification__icon {
  width: 17.6px;
  height: 17.6px;
  color: var(--tvx-ent-text-secondary);
}

.tvx-ent-notification__badge {
  position: absolute;
  top: 4.8px;
  right: 4.8px;
  
  min-width: 14.4px;
  height: 14.4px;
  padding: 0 4px;
  
  font-family: var(--tvx-ent-font-family);
  font-size: 11px;
  font-weight: var(--tvx-ent-font-weight-bold);
  color: #FFFFFF;
  
  background-color: #EF4444;
  border: 1.6px solid var(--tvx-ent-bg-primary);
  border-radius: var(--tvx-ent-radius-pill);
  
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------------------------------------------
   QUICK ACTION BUTTON
   ---------------------------------------------------------------------------- */
.tvx-ent-quick-action {
  display: inline-flex;
  align-items: center;
  gap: var(--tvx-ent-space-2);
  
  height: var(--tvx-ent-pill-height);
  padding: 0 var(--tvx-ent-space-4);
  
  font-family: var(--tvx-ent-font-family);
  font-size: var(--tvx-ent-font-size-sm);
  font-weight: var(--tvx-ent-font-weight-semibold);
  color: #FFFFFF;
  
  background-color: var(--tvx-ent-accent-primary);
  border: none;
  border-radius: var(--tvx-ent-radius-lg);
  
  cursor: pointer;
  transition: all var(--tvx-ent-timing-base) var(--tvx-ent-ease);
}

.tvx-ent-quick-action:hover {
  background-color: var(--tvx-ent-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--tvx-ent-shadow-md);
}

.tvx-ent-quick-action:active {
  transform: translateY(0);
}

.tvx-ent-quick-action:focus-visible {
  outline: 1.6px solid var(--tvx-ent-accent-40);
  outline-offset: 1.6px;
}

.tvx-ent-quick-action__icon {
  width: 12.8px;
  height: 12.8px;
}

/* ----------------------------------------------------------------------------
   USER AVATAR + NOMBRE ABREVIADO
   ---------------------------------------------------------------------------- */
.tvx-ent-user {
  display: flex;
  align-items: center;
  gap: var(--tvx-ent-space-2);
  
  padding: var(--tvx-ent-space-1);
  background-color: transparent;
  border: none;
  border-radius: var(--tvx-ent-radius-lg);
  cursor: pointer;
  
  transition: background-color var(--tvx-ent-timing-base) var(--tvx-ent-ease);
}

.tvx-ent-user:hover {
  background-color: var(--tvx-ent-bg-secondary);
}

.tvx-ent-user:focus-visible {
  outline: 1.6px solid var(--tvx-ent-accent-40);
  outline-offset: 1.6px;
}

.tvx-ent-user__avatar {
  width: 25.6px;
  height: 25.6px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: 11px;
  font-weight: var(--tvx-ent-font-weight-semibold);
  color: #FFFFFF;
  
  background: linear-gradient(135deg, #008944 0%, #00753A 100%);
  border-radius: var(--tvx-ent-radius-md);
}

.tvx-ent-user__name {
  font-family: var(--tvx-ent-font-family);
  font-size: var(--tvx-ent-font-size-sm);
  font-weight: var(--tvx-ent-font-weight-medium);
  color: var(--tvx-ent-text-primary);
  
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tvx-ent-user__caret {
  width: 11.2px;
  height: 11.2px;
  color: var(--tvx-ent-text-tertiary);
  transition: transform var(--tvx-ent-timing-base) var(--tvx-ent-ease);
}

.tvx-ent-user[aria-expanded="true"] .tvx-ent-user__caret {
  transform: rotate(180deg);
}

/* Ocultar el chevron que Radzen agrega automáticamente al RadzenProfileMenu */
.tvx-ent-user .rz-dropdown-icon,
.tvx-ent-user .rz-button-icon-right {
  display: none !important;
}

/* Responsive: Ocultar nombre y caret del usuario en tablets */
@media (max-width: 1024px) {
  .tvx-ent-user__name {
    display: none;
  }
  
  .tvx-ent-user__caret {
    display: none;
  }
  
  .tvx-ent-user {
    padding: var(--tvx-ent-space-1);
  }
}

/* ----------------------------------------------------------------------------
   RESPONSIVE - MOBILE ≤768PX
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Ocultar breadcrumb */
  .tvx-ent-breadcrumb {
    display: none;
  }
  
  /* Ocultar search en header (abre como overlay) */
  .tvx-ent-search {
    display: none;
  }
  
  /* Ocultar pills (van a carrousel bajo header) */
  .tvx-ent-pill {
    display: none;
  }
  
  /* Ocultar context selectors en mobile */
  .tvx-ent-context-selector {
    display: none;
  }
  
  /* Ocultar quick action */
  .tvx-ent-quick-action {
    display: none;
  }
  
  /* Ocultar nombre en user */
  .tvx-ent-user__name {
    display: none;
  }
  
  /* Ocultar separadores */
  .tvx-header-enterprise__separator {
    display: none;
  }
}

/* ----------------------------------------------------------------------------
   NOTIFICATION POPUP - Desktop & Mobile
   ---------------------------------------------------------------------------- */

.tvx-ent-notification-wrapper,
.tvx-mobile-notification-wrapper {
  position: relative;
}

.tvx-ent-notification.is-active,
.tvx-mobile-notification.is-active {
  background-color: var(--tvx-ent-bg-tertiary);
}

/* Mobile notification button */
.tvx-mobile-notification {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: var(--tvx-ent-radius-md);
  cursor: pointer;
  transition: background-color var(--tvx-ent-timing-base) var(--tvx-ent-ease);
}

.tvx-mobile-notification:hover {
  background-color: var(--tvx-ent-bg-secondary);
}

.tvx-mobile-notification__icon {
  width: 16px;
  height: 16px;
  color: var(--tvx-ent-text-secondary);
}

.tvx-mobile-notification__badge {
  position: absolute;
  top: 4.8px;
  right: 4.8px;
  min-width: 14.4px;
  height: 14.4px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--tvx-ent-font-weight-bold);
  color: #FFFFFF;
  background-color: #EF4444;
  border: 1.6px solid var(--tvx-ent-bg-primary);
  border-radius: 7.2px;
}

/* Notification Popup Container */
.tvx-notification-popup {
  position: absolute;
  top: calc(100% + 6.4px);
  right: 0;
  width: 320px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  
  background-color: var(--tvx-ent-bg-primary);
  border: 1px solid var(--tvx-ent-border-medium);
  border-radius: var(--tvx-ent-radius-xl);
  box-shadow: var(--tvx-ent-shadow-xl);
  
  z-index: 1100;
  
  animation: notificationSlideIn 0.2s var(--tvx-ent-ease);
}

@keyframes notificationSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6.4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile popup adjustments */
.tvx-notification-popup--mobile {
  position: fixed;
  top: 44.8px;
  left: 0;
  right: 0;
  width: 100%;
  max-height: calc(100vh - 44.8px);
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* Popup Header */
.tvx-notification-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tvx-ent-space-4);
  border-bottom: 1px solid var(--tvx-ent-border-light);
}

.tvx-notification-popup__title {
  margin: 0;
  font-family: var(--tvx-ent-font-family);
  font-size: var(--tvx-ent-font-size-lg);
  font-weight: var(--tvx-ent-font-weight-semibold);
  color: var(--tvx-ent-text-primary);
}

.tvx-notification-popup__mark-all {
  padding: var(--tvx-ent-space-1) var(--tvx-ent-space-2);
  font-size: var(--tvx-ent-font-size-xs);
  font-weight: var(--tvx-ent-font-weight-medium);
  color: var(--tvx-ent-accent-primary);
  background-color: transparent;
  border: none;
  border-radius: var(--tvx-ent-radius-md);
  cursor: pointer;
  transition: background-color var(--tvx-ent-timing-base) var(--tvx-ent-ease);
}

.tvx-notification-popup__mark-all:hover {
  background-color: var(--tvx-ent-accent-10);
}

.tvx-notification-popup__close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 25.6px;
  height: 25.6px;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: var(--tvx-ent-radius-md);
  cursor: pointer;
  transition: background-color var(--tvx-ent-timing-base) var(--tvx-ent-ease);
}

.tvx-notification-popup--mobile .tvx-notification-popup__close {
  display: flex;
}

.tvx-notification-popup__close:hover {
  background-color: var(--tvx-ent-bg-secondary);
}

.tvx-notification-popup__close svg {
  width: 16px;
  height: 16px;
  color: var(--tvx-ent-text-secondary);
}

/* Popup Content */
.tvx-notification-popup__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--tvx-ent-space-2);
}

/* Notification Item */
.tvx-notification-item {
  position: relative;
  display: flex;
  gap: var(--tvx-ent-space-3);
  padding: var(--tvx-ent-space-3);
  border-radius: var(--tvx-ent-radius-lg);
  cursor: pointer;
  transition: background-color var(--tvx-ent-timing-base) var(--tvx-ent-ease);
}

.tvx-notification-item:hover {
  background-color: var(--tvx-ent-bg-secondary);
}

.tvx-notification-item.is-unread {
  background-color: var(--tvx-ent-accent-5);
}

.tvx-notification-item.is-unread:hover {
  background-color: var(--tvx-ent-accent-10);
}

.tvx-notification-item__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tvx-ent-radius-md);
}

.tvx-notification-item__icon svg {
  width: 16px;
  height: 16px;
}

.tvx-notification-item__icon--success {
  background-color: #DCFCE7;
  color: #16A34A;
}

.tvx-notification-item__icon--warning {
  background-color: #FEF3C7;
  color: #D97706;
}

.tvx-notification-item__icon--error {
  background-color: #FEE2E2;
  color: #DC2626;
}

.tvx-notification-item__icon--info {
  background-color: #DBEAFE;
  color: #00753A;
}

.tvx-notification-item__content {
  flex: 1;
  min-width: 0;
}

.tvx-notification-item__title {
  margin: 0 0 var(--tvx-ent-space-1) 0;
  font-family: var(--tvx-ent-font-family);
  font-size: var(--tvx-ent-font-size-sm);
  font-weight: var(--tvx-ent-font-weight-semibold);
  color: var(--tvx-ent-text-primary);
  line-height: 1.4;
}

.tvx-notification-item__message {
  margin: 0 0 var(--tvx-ent-space-1) 0;
  font-family: var(--tvx-ent-font-family);
  font-size: var(--tvx-ent-font-size-xs);
  color: var(--tvx-ent-text-secondary);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tvx-notification-item__time {
  font-family: var(--tvx-ent-font-family);
  font-size: 11px;
  color: var(--tvx-ent-text-tertiary);
}

.tvx-notification-item__unread-indicator {
  position: absolute;
  top: 12.8px;
  right: 9.6px;
  width: 6.4px;
  height: 6.4px;
  background-color: var(--tvx-ent-accent-primary);
  border-radius: 50%;
}

/* Empty State */
.tvx-notification-popup__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--tvx-ent-space-8) var(--tvx-ent-space-4);
  text-align: center;
}

.tvx-notification-popup__empty svg {
  width: 38.4px;
  height: 38.4px;
  margin-bottom: var(--tvx-ent-space-3);
  color: var(--tvx-ent-text-tertiary);
  opacity: 0.5;
}

.tvx-notification-popup__empty p {
  margin: 0;
  font-family: var(--tvx-ent-font-family);
  font-size: var(--tvx-ent-font-size-sm);
  color: var(--tvx-ent-text-tertiary);
}

/* Popup Footer */
.tvx-notification-popup__footer {
  padding: var(--tvx-ent-space-3);
  border-top: 1px solid var(--tvx-ent-border-light);
}

.tvx-notification-popup__view-all {
  width: 100%;
  padding: var(--tvx-ent-space-2);
  font-family: var(--tvx-ent-font-family);
  font-size: var(--tvx-ent-font-size-sm);
  font-weight: var(--tvx-ent-font-weight-medium);
  color: var(--tvx-ent-accent-primary);
  background-color: transparent;
  border: 1px solid var(--tvx-ent-border-light);
  border-radius: var(--tvx-ent-radius-lg);
  cursor: pointer;
  transition: all var(--tvx-ent-timing-base) var(--tvx-ent-ease);
}

.tvx-notification-popup__view-all:hover {
  background-color: var(--tvx-ent-accent-5);
  border-color: var(--tvx-ent-accent-primary);
}

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

/* Focus visible mejorado */
*:focus-visible {
  outline: 1.6px solid var(--tvx-ent-accent-40);
  outline-offset: 1.6px;
}

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

/* High contrast */
@media (prefers-contrast: high) {
  .tvx-header-enterprise {
    border-bottom-width: 1.6px;
  }
  
  .tvx-ent-pill,
  .tvx-ent-search__input {
    border-width: 1.6px;
  }
}

/* ============================================================================
   GF NEXUS - ASIAN MARKET REFINEMENTS
   Mercado objetivo: China, Asia-Pac enterprise
   Inspirado en: DingTalk, WeWork China, Alibaba Cloud Console, ByteDance infra
   Principios: Clarity, Information density, Meaningful color, Precise typography
   ============================================================================ */

/* --- Extended accent tokens for notification items --- */
:root {
  --tvx-ent-accent-5:  rgba(0, 140, 69, 0.05);
  --tvx-ent-accent-10: rgba(0, 140, 69, 0.10);
  /* Noto Sans SC as CJK fallback for Asian market */
  --tvx-ent-font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* --- Global font upgrade with CJK support --- */
body,
.tvx-header-enterprise,
.tvx-header-mobile,
.tvx-sidebar-enterprise {
  font-family: var(--tvx-ent-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Header enterprise: red bottom-line on scroll (Asian app style) --- */
.tvx-header-enterprise.is-scrolled {
  border-bottom: 1.6px solid rgba(0, 140, 69, 0.18);
}

/* --- Brand name: strong tracking, Chinese enterprise look --- */
.tvx-ent-brand__name {
  letter-spacing: -0.025em;
  font-weight: 700;
  color: #0F172A;
}

/* --- Pill dropdowns: active state uses red border accent instead of full fill --- */
.tvx-ent-pill-dropdown.rz-dropdown:focus,
.tvx-ent-pill-dropdown.rz-dropdown:focus-within,
.tvx-ent-pill-dropdown.rz-state-open {
  border-color: #008C45 !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 1.6px rgba(0, 140, 69, 0.15) !important;
}

/* --- Notification unread dot: Chinese Red --- */
.tvx-notification-item__unread-indicator {
  background-color: #008944;
}

/* --- Notification info icon: use gold/amber to distinguish from red danger --- */
.tvx-notification-item__icon--info {
  background-color: #FEF3C7;
  color: #D97706;
}

/* --- Notification view-all button: red text --- */
.tvx-notification-popup__view-all {
  color: #00753A;
  border-color: rgba(0, 140, 69, 0.2);
}
.tvx-notification-popup__view-all:hover {
  background-color: rgba(0, 140, 69, 0.05);
  border-color: #008C45;
}

/* --- Notification mark-all button: red text --- */
.tvx-notification-popup__mark-all {
  color: #00753A;
}
.tvx-notification-popup__mark-all:hover {
  background-color: rgba(0, 140, 69, 0.06);
}


/* --- Sidebar close mobile button: red hover --- */
.tvx-sidebar__close-mobile:hover {
  color: #00753A;
  background: rgba(0, 140, 69, 0.08);
}

/* --- Sidebar search: red focus ring --- */
.tvx-sidebar-search__input:hover,
.tvx-sidebar-search__input:focus {
  border-color: #008C45;
  box-shadow: 0 0 0 2.4px rgba(0, 140, 69, 0.10);
}

/* --- Sidebar favorites "see more" button: red text --- */
.tvx-sidebar__favorites-more {
  color: #00753A;
}

/* --- User avatar: Chinese Red gradient (professional, not aggressive) --- */
.tvx-ent-user__avatar {
  background: linear-gradient(135deg, #008944 0%, #00753A 100%);
  border-radius: 6.4px;
}

/* --- Focus visible: tighter ring, Chinese enterprise style --- */
*:focus-visible {
  outline: 1.6px solid rgba(0, 140, 69, 0.60) !important;
  outline-offset: 1.6px;
}

/* --- Logout dialog confirm button: Chinese Red (matches existing erp-forms.css danger) --- */
.tvx-logout-dialog__btn--confirm {
  background: linear-gradient(135deg, #008944 0%, #00753A 100%) !important;
  box-shadow: 0 3.2px 9.6px rgba(15, 23, 42, 0.09) !important;
}
.tvx-logout-dialog__btn--confirm:hover {
  background: linear-gradient(135deg, #00753A 0%, #005F2F 100%) !important;
  box-shadow: 0 4.8px 12.8px rgba(15, 23, 42, 0.12) !important;
}

/* --- Swipe edge indicator: red tint --- */
.tvx-swipe-edge-indicator {
  background: linear-gradient(to right, transparent, rgba(0, 140, 69, 0.18));
}

/* --- DataGrid selected row: red --- */
.rz-datatable-data tr.rz-state-selected {
  background-color: rgba(0, 140, 69, 0.06) !important;
}
.rz-datatable-data tr.rz-state-selected td {
  color: #00753A !important;
}

/* ============================================================================ */