/* ============================================================================
   NEXUS UX FIXES — Capa de override autoritativa (cargar SIEMPRE AL FINAL)
   ----------------------------------------------------------------------------
   Por qué este archivo existe:
   El header/pills/dialog viven repartidos en header-enterprise.css,
   mobile-header.css, dialog-styles.css, style.css y nexus-china-premium.css,
   con reglas !important que se pisan entre sí. En vez de parchear 5 archivos
   enredados, centralizamos los fixes acá y lo cargamos último para ganar la
   cascada de forma predecible, revisable y reversible.

   Paleta: marca #008C45 · slate (#0F172A / #475569 / #64748B / #E2E8F0).
   Contraste objetivo: WCAG 2.1 AA (texto normal ≥ 4.5:1).
   ============================================================================ */

:root {
  --nxfix-brand:        #008C45;
  --nxfix-brand-hover:  #00753A;
  --nxfix-ink:          #0F172A; /* slate-900  */
  --nxfix-text:         #334155; /* slate-700 — AA en blanco (8.8:1) */
  --nxfix-muted:        #64748B; /* slate-500 — AA en blanco (4.6:1) */
  --nxfix-border:       #E2E8F0; /* slate-200 */
  --nxfix-surface:      #F8FAFC; /* slate-50  */
  --nxfix-focus:        rgba(0, 140, 69, 0.35);
  --nxfix-overlay:      rgba(15, 23, 42, 0.55); /* slate-900 @55% (no negro puro) */
}

/* ============================================================================
   1. SWITCH RESPONSIVE DEL HEADER  @614.4px
   Desktop header  (.tvx-header-enterprise)  → visible  ≥615.2px
   Mobile  header  (.tvx-header-mobile)       → visible  ≤614.4px
   (El código original cambiaba a 512px y dejaba 641–768 con el header desktop
   desbordado: ahí es donde "desaparecían" los selectores.)
   ============================================================================ */
@media (max-width: 768px) {
  .tvx-header-enterprise { display: none !important; }
  .tvx-header-mobile.tvx-hidden-desktop { display: block !important; }
}
@media (min-width: 769px) {
  .tvx-header-mobile.tvx-hidden-desktop { display: none !important; }
}

/* ============================================================================
   2. HEADER DESKTOP — sin overflow en 769–819.2px  (FIX DE RAÍZ)
   CAUSA RAÍZ (auditada): nexus-china-premium.css fija
   .tvx-ent-pill-wrapper { flex-shrink: 0 !important }. Antes solo soltábamos el
   CONTENEDOR (__right), no los wrappers HIJOS → los 3 pills no cedían ancho, el
   cluster derecho (3 pills + 3 separadores + idioma + notif + usuario ≈ 488px)
   desbordaba y empujaba Company/Season/Plant fuera de pantalla. Acá soltamos los
   wrappers (prefijo `body` para ganar especificidad sin depender del orden de
   carga), permitimos truncar, y en el tramo angosto achicamos pills + ocultamos
   separadores y el texto del idioma (queda solo la bandera).
   ============================================================================ */
body .tvx-header-enterprise__inner { min-width: 0 !important; }
body .tvx-header-enterprise__right {
  min-width: 0 !important;
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
}
/* CLAVE: soltar los wrappers de los pills (china los fija en flex-shrink:0 !important) */
body .tvx-ent-pill-wrapper { flex-shrink: 1 !important; min-width: 0 !important; }

/* La etiqueta del pill (nombre de la compañía) trunca con elipsis y nunca rompe */
.tvx-ent-pill__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;        /* flex child: necesario para que el ellipsis recorte */
  flex: 0 1 auto;
  display: block;
}
.tvx-ent-pill-display,
.tvx-ent-pill__value-row { min-width: 0; }

/* Tablet / laptop chico: pills más chicos, gaps comprimidos, sin separadores y
   idioma solo-bandera → prioriza ver los 3 selectores de contexto (clave ERP). */
@media (max-width: 1024px) {
  body .tvx-header-enterprise__inner { gap: 8px !important; }
  body .tvx-header-enterprise__right { gap: 4.8px !important; }
  body .tvx-header-enterprise__right > .tvx-header-enterprise__separator { display: none !important; }
  body .tvx-lang-selector button span { display: none !important; } /* solo bandera + caret */

  /* ── ANULAR el modo "icon-only" de nexus-china-premium.css (L969-1002) ──
     Ese archivo a ≤1024 forzaba los pills a width:28.8px ocultando contexto,
     valor y caret → no se veía QUÉ company/season/planta estaba activa.
     Acá los mostramos como [icono + VALOR truncado + caret] en una línea
     compacta. Ocultamos solo la mini-etiqueta de contexto (el icono ya indica
     el tipo). Specificity con `body` (0,2,1) gana a china (0,2,0). */
  body .tvx-ent-pill-wrapper { height: auto !important; flex-shrink: 1 !important; min-width: 0 !important; }
  body .tvx-ent-pill-dropdown.rz-dropdown {
    width: auto !important;
    min-width: 73.6px !important;
    max-width: 136px !important;
    height: 30.4px !important;
  }
  body .tvx-ent-pill-display {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4.8px !important;
    padding: 0 8px !important;
    height: 30.4px !important;
  }
  body .tvx-ent-pill__context { display: none !important; } /* redundante con el icono */
  body .tvx-ent-pill__value-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  body .tvx-ent-pill__value-row .tvx-ent-pill__icon {
    display: block !important;
    width: 12.8px !important; height: 12.8px !important;
    flex: 0 0 auto !important;
    color: var(--nx-primary, #00753A) !important;   /* icono con color de marca */
    opacity: 1 !important;
  }
  body .tvx-ent-pill__value-row .tvx-ent-pill__label {
    display: block !important;                       /* MOSTRAR el valor (anula display:none) */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
  }
  body .tvx-ent-pill__value-row .tvx-ent-pill__caret { display: block !important; flex: 0 0 auto !important; }
}
@media (max-width: 900px) {
  body .tvx-ent-brand__name { display: none !important; }   /* logo sí, wordmark no */
  body .tvx-ent-pill-dropdown.rz-dropdown { min-width: 62.4px !important; max-width: 107.2px !important; }
}

/* ============================================================================
   3. BARRA DE CONTEXTO MOBILE (Fila 2) — look profesional + táctil AA
   Patrón ERP: contexto siempre visible bajo el header, scroll horizontal.
   ============================================================================ */
.tvx-header-mobile .tvx-filter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12.8px 9.6px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--nxfix-border);
  overflow: hidden;
}

/* Etiqueta "Contexto" — slate-500 = AA (4.6:1) en blanco */
.tvx-header-mobile .tvx-filter-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nxfix-muted);
  white-space: nowrap;
}

/* Carril scrolleable con scroll-snap y scrollbar oculta */
.tvx-header-mobile .tvx-filter-scroll {
  display: flex;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  padding-right: 19.2px; /* espacio para la pista de fade */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tvx-header-mobile .tvx-filter-scroll::-webkit-scrollbar { display: none; }

/* Pista de fade a la derecha: pista visual de que hay más para scrollear */
.tvx-header-mobile .tvx-filter::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 22.4px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #FFFFFF 80%);
}

/* Cada selector: tarjeta-pill táctil */
.tvx-header-mobile .tvx-filter-item {
  flex: 0 0 auto;
  min-width: 124.8px;
  max-width: 176px;
  scroll-snap-align: start;
}

/* RadzenDropDown dentro del filtro mobile */
.tvx-header-mobile .tvx-filter-item .rz-dropdown {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 35.2px;            /* target táctil AA */
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--nxfix-border);
  background: var(--nxfix-surface);
  font-size: 11.2px;
  color: var(--nxfix-ink);     /* valor seleccionado bien contrastado */
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.tvx-header-mobile .tvx-filter-item .rz-dropdown:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
}
.tvx-header-mobile .tvx-filter-item .rz-dropdown:focus,
.tvx-header-mobile .tvx-filter-item .rz-dropdown:focus-within,
.tvx-header-mobile .tvx-filter-item .rz-dropdown.rz-state-focused {
  outline: none;
  background: #FFFFFF;
  border-color: var(--nxfix-brand);
  box-shadow: 0 0 0 2.4px var(--nxfix-focus);
}
.tvx-header-mobile .tvx-filter-item .rz-dropdown .rz-dropdown-label,
.tvx-header-mobile .tvx-filter-item .rz-dropdown .rz-inputtext {
  color: var(--nxfix-ink);
  font-weight: 600;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tvx-header-mobile .tvx-filter-item .rz-dropdown .rz-placeholder,
.tvx-header-mobile .tvx-filter-item .rz-dropdown .rz-dropdown-label.rz-placeholder {
  color: var(--nxfix-muted);   /* placeholder AA, no gris fantasma */
  font-weight: 500;
}
.tvx-header-mobile .tvx-filter-item .rz-dropdown .rz-dropdown-trigger,
.tvx-header-mobile .tvx-filter-item .rz-dropdown .rz-dropdown-trigger-icon {
  color: var(--nxfix-muted);
}
/* Estado deshabilitado (temporada/planta sin datos) legible, no invisible */
.tvx-header-mobile .tvx-filter-item .rz-dropdown.rz-state-disabled,
.tvx-header-mobile .tvx-filter-item .rz-dropdown:disabled {
  background: #F1F5F9;
  border-color: var(--nxfix-border);
  opacity: 1;                  /* nada de opacity:0.6 que borra el texto */
  color: #64748B;              /* AA: 4.3:1 sobre #F1F5F9, legible aun deshabilitado */
  cursor: not-allowed;
}

/* ============================================================================
   4. (El bug de hover global de botones se arregla en ORIGEN, scopeándolo en
   mobile-header.css a .tvx-header-mobile. No re-implementar acá con selectores
   amplios + 'revert': romperían el hover legítimo de .nx-btn-primary, etc.)
   ============================================================================ */

/* ============================================================================
   5. BACKDROP DE DIALOGS — slate translúcido, profesional (no negro puro)
   Antes: rgba(0,0,0,0.72) repetido. Ahora: slate-900 @55%, sin blur
   (el blur en la máscara crea un stacking context que atrapa los position:fixed
   de los dropdowns dentro del modal — por eso NO usamos backdrop-filter).
   ============================================================================ */
.rz-dialog-mask,
div.rz-dialog-mask,
body > div.rz-dialog-mask,
body:has(.rz-dialog) .rz-dialog-mask,
body:has(.enterprise-dialog) .rz-dialog-mask,
.tv-dialog-backdrop,
.modal-backdrop {
  background: var(--nxfix-overlay) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Dialog en sí: sombra y radio profesionales (refuerzo, por si lo pisan) */
.rz-dialog,
.enterprise-dialog {
  border-radius: 12.8px !important;
  box-shadow: 0 19.2px 48px rgba(15, 23, 42, 0.28), 0 6.4px 16px rgba(15, 23, 42, 0.14) !important;
}

/* ============================================================================
   6. FOCUS VISIBLE — anillo de foco consistente para teclado (a11y)
   ============================================================================ */
.tvx-header-enterprise :focus-visible,
.tvx-header-mobile :focus-visible,
.rz-dialog :focus-visible,
.tvx-ent-pill-dropdown.rz-dropdown:focus-visible {
  outline: 1.6px solid var(--nxfix-brand);
  outline-offset: 1.6px;
  border-radius: 4.8px;
}

/* ============================================================================
   7. CONTRASTE AA — textos apagados del header
   ============================================================================ */
.tvx-ent-pill__context { color: var(--nxfix-muted) !important; } /* etiqueta "Compañía/Temporada/Planta" */

/* ============================================================================
   8. TOKENS --nx-*  (CAUSA RAÍZ del botón "Aplicar" invisible)
   MainLayout.razor usa var(--nx-primary) etc. con !important, PERO esas
   variables nunca se definieron en ningún :root. Una var indefinida SIN
   fallback hace que la propiedad caiga a su valor inicial: para
   background-color eso es 'transparent'. Resultado:
       .rz-button.rz-primary.rz-shade-default { background: transparent !important }
   → el botón "Aplicar" del filtro (rz-primary) queda transparente + texto
   blanco de Radzen = INVISIBLE. Mismo bug en paginador y highlights de fila.
   Definimos el set completo acá.
   ============================================================================ */
:root {
  --nx-primary:        #008C45;
  --nx-primary-hover:  #00753A;
  --nx-primary-active: #005F2F;
  --nx-primary-light:  #F0FDF4; /* fondo selección de fila */
  --nx-primary-bg:     #DCFCE7; /* fondo hover de fila */
  --nx-primary-border: #BBF7D0;
  --nx-border:         #E2E8F0;
  --nx-border-dark:    #CBD5E1;
  --nx-radius-sm:      4.8px;
  --nx-radius-md:      6.4px;
  --nx-shadow-lg:      0 8px 24px rgba(15, 23, 42, 0.12);
}

/* NOTA de cascada: el <style> de MainLayout.razor es inline en el <body>, que
   va DESPUÉS de este <link> en orden de documento. Con misma especificidad +
   !important ganaría MainLayout. Por eso prefijamos con `body` (sube la
   especificidad a 0,3,1 > 0,3,0) y así estos overrides ganan siempre. */

/* Botón PRIMARIO de Radzen — incluye "Aplicar" del filtro y el paginador.
   Rojo de marca + texto blanco (contraste ~5:1 = AA). Fallback hardcodeado. */
body .rz-button.rz-primary,
body .rz-button.rz-primary.rz-shade-default,
body .rz-paginator .rz-paginator-element.rz-primary {
  background-color: var(--nx-primary, #008944) !important;
  border-color: var(--nx-primary, #008C45) !important;
  color: #FFFFFF !important;
}
body .rz-button.rz-primary:hover:not(:disabled):not(.rz-state-disabled),
body .rz-button.rz-primary.rz-shade-default:hover:not(:disabled):not(.rz-state-disabled) {
  background-color: var(--nx-primary-hover, #00753A) !important;
  border-color: var(--nx-primary-hover, #00753A) !important;
  color: #FFFFFF !important;
}
body .rz-button.rz-primary:disabled,
body .rz-button.rz-primary.rz-shade-default:disabled,
body .rz-button.rz-primary.rz-state-disabled {
  background-color: #E2E8F0 !important; /* claramente deshabilitado, no rojo fantasma */
  border-color: #E2E8F0 !important;
  color: #94A3B8 !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* Botón SECUNDARIO ("Limpiar") — neutral legible (antes también quedaba
   transparente por la misma var indefinida). Slate-700 sobre slate-100 = AA ~9:1. */
body .rz-button.rz-secondary,
body .rz-button.rz-secondary.rz-shade-default {
  background-color: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #334155 !important;
}
body .rz-button.rz-secondary:hover:not(:disabled):not(.rz-state-disabled),
body .rz-button.rz-secondary.rz-shade-default:hover:not(:disabled):not(.rz-state-disabled) {
  background-color: #E2E8F0 !important;
  color: #0F172A !important;
}

/* ============================================================================
   9. DENSIDAD COMPACTA (ERP denso) — "que se vea más pequeño todo"
   Palanca principal: base tipográfica 12px→11.2px reescala TODO el sistema rem
   (Radzen, --ep-*, --tvx-ent-*) ~7% de forma coherente. Después apretamos los
   tokens que dominan la altura: el input "filled" de Radzen (3.25rem≈38.4px era
   el culpable de formularios "gordos"), filas de grid, y paddings de layout.
   Pisos de accesibilidad: cuerpo ≥9.6px; táctil mobile 35.2px (blindado abajo).
   ============================================================================ */
/* html font-size is now controlled by theme.css via clamp() */

:root {
  /* Radzen — inputs / formularios */
  --rz-form-field-filled-height: 2.5rem;     /* ~28px (era 3.25rem≈38.4px) */
  --rz-input-height:             2.5rem;
  --rz-input-padding-block:      0.375rem;
  --rz-input-padding-inline:     0.5rem;
  --rz-body-line-height:         1.35;       /* era 1.429 */
  /* Radzen — grid denso (cerca de la densidad "compact" nativa) */
  --rz-grid-cell-padding:        0.3125rem 0.5rem;
  --rz-grid-cell-line-height:    1.25rem;
  --rz-grid-header-padding:      0.5rem 1rem;
  --rz-grid-header-cell-padding: 0.375rem 0;
  /* Enterprise pages — espaciado + tipografía de layout */
  --ep-space-4: 9.6px;
  --ep-space-5: 12.8px;
  --ep-space-6: 16px;
  --ep-font-body:     10.4px;
  --ep-font-subtitle: 14.4px;
  --ep-font-title:    17.6px;   /* era 22.4px */
  --ep-font-display:  25.6px;   /* era 38.4px */
  /* Header enterprise — más bajo, controles alineados con inputs */
  --tvx-ent-header-height-full:     44.8px;    /* era 51.2px */
  --tvx-ent-header-height-scrolled: 38.4px;
  --tvx-ent-control-height:         28.8px;    /* era 32px */
  --tvx-ent-radius-md:              4.8px;
}

/* Paddings de layout (los mayores consumidores de aire vertical) */
body .ep-page    { padding: 8px !important; }
body .ep-header  { padding: 11.2px !important; margin-bottom: 8px !important; }
body .ep-toolbar { padding: 9.6px !important; }

/* Toolbar: botones apretados (mantienen 25.6px táctil mínimo) */
body .ep-toolbar .rz-button {
  min-height: 25.6px !important;
  padding: 0 9.6px !important;
  font-size: 11px !important;
  gap: 3.2px !important;
}

/* BLINDAJE táctil: los selectores del header mobile NO bajan de 35.2px pese a la
   compactación global de inputs (WCAG/Apple mínimo táctil en mobile). */
body .tvx-header-mobile .tvx-filter-item .rz-dropdown { min-height: 35.2px !important; }

/* ============================================================================
   10. DROPDOWNDATAGRID (pills del header) + RADZEN — "que se vean bien los datos"
   ============================================================================ */
/* Panel del datagrid del pill: más ancho para que no se corten los nombres */
body .tvx-ent-pill-dropdown .rz-dropdown-panel { max-width: 512px !important; }
/* Las celdas de datos no truncan los nombres de compañía/planta */
body .tvx-ent-pill-dropdown .rz-dropdown-panel .rz-data-row td,
body .tvx-ent-pill-dropdown .rz-dropdown-panel .rz-data-row .rz-cell-data {
  max-width: 256px !important;
  white-space: nowrap;
}
/* Fila seleccionada del grid: el DATO en slate-900 (no rojo). El rojo reducía
   legibilidad y choca con la convención ERP (rojo = error). El acento de
   selección queda en el fondo/border, no en el texto. (Specificity > MainLayout) */
body .rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data,
body .rz-datatable  tbody tr.rz-data-row.rz-state-highlight .rz-cell-data {
  color: #0F172A !important;
}

/* ============================================================================
   11. CONTRASTE AA — placeholders, empty-states y headers de columna
   Estaban en #94A3B8 / #9CA3AF (~2.6:1, REPRUEBAN). → #64748B (4.6:1) y
   #475569 (8.6:1) para encabezados de tabla.
   ============================================================================ */
/* Placeholders de inputs y dropdowns (global, AA) */
body .rz-textbox::placeholder,
body .rz-textarea::placeholder,
body .enterprise-form-input-wrapper .rz-textbox::placeholder,
body .enterprise-form-input-wrapper .rz-textarea::placeholder,
body .tvx-ent-pill-dropdown .rz-dropdown-filter-container .rz-inputtext::placeholder {
  color: #64748B !important;
}
/* Placeholder del pill vacío (Compañía/Temporada/Planta sin selección) */
body .tvx-ent-pill-dropdown .rz-placeholder { color: #64748B !important; }
/* Empty-state del grid / panel ("sin resultados") */
body .rz-grid-empty-text,
body .rz-datatable-empty-text { color: #64748B !important; }
/* Headers de columna del datagrid del pill (texto chico bold uppercase) */
body .tvx-ent-pill-dropdown .rz-datatable-scrollable-header th,
body .tvx-ent-pill-dropdown .rz-column-title,
body .tvx-ent-pill-dropdown .rz-column-header { color: #475569 !important; }
/* Paginador deshabilitado: visible (≥3:1) en vez de fantasma */
body .rz-paginator-element.rz-state-disabled,
body .rz-paginator-page.rz-state-disabled { color: #64748B !important; }

/* ============================================================================
   12. ICONO EXPAND/COLLAPSE del master-detail (filas con hijos)
   El toggle de Radzen es .rz-datatable .rzi-chevron-circle-right / -down.
   enterprise-pages.css remapea TODOS los iconos de Radzen a Material Icons…
   menos ESTE → renderizaba el glifo roto del font de Radzen (que no está
   cargado) = el "triángulo rojo" feo. Lo remapeamos a Material Icons limpio
   (chevron_right / expand_more), en slate neutro, con acento de marca al hover.
   ============================================================================ */
body .rz-datatable .rzi-chevron-circle-right,
body .rz-datatable .rzi-chevron-circle-down {
  font-family: 'Material Icons' !important;
  color: #64748B !important;        /* slate-500 neutro, NO rojo */
  background: transparent !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: color .15s ease, transform .15s ease;
  cursor: pointer;
}
body .rz-datatable .rzi-chevron-circle-right::before {
  content: 'chevron_right' !important;   /* colapsado: › */
  font-family: 'Material Icons' !important;
  font-size: 17.6px !important;
  line-height: 1 !important;
}
body .rz-datatable .rzi-chevron-circle-down::before {
  content: 'expand_more' !important;     /* expandido: ⌄ */
  font-family: 'Material Icons' !important;
  font-size: 17.6px !important;
  line-height: 1 !important;
}
/* Acento de marca al pasar el mouse sobre la fila/icono */
body .rz-datatable .rz-data-row:hover .rzi-chevron-circle-right,
body .rz-datatable .rz-data-row:hover .rzi-chevron-circle-down,
body .rz-datatable .rzi-chevron-circle-right:hover,
body .rz-datatable .rzi-chevron-circle-down:hover {
  color: #00753A !important;
}

/* ============================================================================
   13. PANEL del DropDownDataGrid (la lista desplegable) — TODO el sistema
   Simple, legible, intuitivo, responsive. Aplica al panel genérico
   (.rz-dropdown-panel, todos los selectores del sistema) y — con mayor
   especificidad — al de los pills del header (.tvx-ent-pill-dropdown ...) para
   ganarle a nexus-china-premium.css (que solo estilaba el del header, feo).
   ============================================================================ */
/* Contenedor: conectado al trigger (sin borde superior, esquinas inf. redondeadas) */
body .rz-dropdown-panel {
  border: 1px solid #008C45 !important;
  border-top: none !important;
  border-radius: 0 0 6.4px 6.4px !important;
  box-shadow: 0 6.4px 16px rgba(15,23,42,.10), 0 1.6px 3.2px rgba(15,23,42,.04) !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin-top: 0 !important;
  min-width: min(240px, 92vw) !important;
  max-width: min(448px, 96vw) !important;
}
/* Pills del header: panel más ancho */
body .tvx-ent-pill-dropdown .rz-dropdown-panel {
  border: 1px solid #008C45 !important;
  border-top: none !important;
  border-radius: 0 0 6.4px 6.4px !important;
  box-shadow: 0 6.4px 16px rgba(15,23,42,.10), 0 1.6px 3.2px rgba(15,23,42,.04) !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin-top: 0 !important;
  min-width: min(256px, 96vw) !important;
  max-width: min(528px, 98vw) !important;
}

/* Fila de búsqueda: input limpio full-width */
body .rz-dropdown-filter-container,
body .tvx-ent-pill-dropdown .rz-dropdown-filter-container {
  display: flex !important;
  align-items: center !important;
  gap: 4.8px !important;
  padding: 6.4px 8px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #EEF2F6 !important;
}
body .rz-dropdown-filter-container .rz-inputtext,
body .rz-dropdown-panel input.rz-inputtext,
body .tvx-ent-pill-dropdown .rz-dropdown-filter-container .rz-inputtext {
  flex: 1 1 auto !important;
  height: 30.4px !important;
  padding: 0 9.6px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 6.4px !important;
  background: #F8FAFC !important;
  color: #0F172A !important;
  font-size: 11px !important;
  box-shadow: none !important;
}
body .rz-dropdown-filter-container .rz-inputtext:focus,
body .rz-dropdown-panel input.rz-inputtext:focus,
body .tvx-ent-pill-dropdown .rz-dropdown-filter-container .rz-inputtext:focus {
  border-color: #008C45 !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 2.4px rgba(0, 140, 69,0.14) !important;
}
body .rz-dropdown-filter-container .rz-inputtext::placeholder,
body .tvx-ent-pill-dropdown .rz-dropdown-filter-container .rz-inputtext::placeholder {
  color: #64748B !important;   /* AA */
}
/* Botón de búsqueda: sutil (gris), NO círculo rojo. El filtro es en vivo al tipear. */
body .rz-dropdown-filter-container .rz-button,
body .tvx-ent-pill-dropdown .rz-dropdown-filter-container .rz-button {
  flex: 0 0 auto !important;
  width: 28.8px !important; height: 28.8px !important; min-width: 28.8px !important;
  padding: 0 !important;
  border-radius: 6.4px !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #64748B !important;
  box-shadow: none !important;
}
body .rz-dropdown-filter-container .rz-button:hover,
body .tvx-ent-pill-dropdown .rz-dropdown-filter-container .rz-button:hover {
  background: #E2E8F0 !important;
  color: #00753A !important;
}

/* Encabezados de columna: legibles (AA), discretos */
body .rz-dropdown-panel .rz-datatable-scrollable-header th,
body .rz-dropdown-panel th .rz-column-title,
body .tvx-ent-pill-dropdown .rz-dropdown-panel .rz-datatable-scrollable-header th {
  background: #F8FAFC !important;
  color: #475569 !important;       /* AA ~8:1 */
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 6.4px 9.6px !important;
  border-bottom: 1px solid #E8ECF0 !important;
}

/* Filas: legibles, menos truncado, alineadas */
body .rz-dropdown-panel .rz-datatable-data tr > td,
body .rz-dropdown-panel .rz-data-row > td,
body .tvx-ent-pill-dropdown .rz-dropdown-panel .rz-datatable-data tr > td {
  font-size: 11px !important;
  color: #334155 !important;
  padding: 7.2px 9.6px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  background: #FFFFFF !important;
  max-width: 320px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}
/* Hover claro */
body .rz-dropdown-panel .rz-datatable-data tr:hover > td,
body .rz-dropdown-panel .rz-data-row:hover > td,
body .tvx-ent-pill-dropdown .rz-dropdown-panel .rz-datatable-data tr:hover > td {
  background: #F8FAFC !important;
  color: #0F172A !important;
}
/* Selección: tinte de marca MUY suave + acento izquierdo (no rosa fuerte) */
body .rz-dropdown-panel .rz-datatable-data tr.rz-state-highlight > td,
body .rz-dropdown-panel .rz-data-row.rz-state-highlight > td,
body .tvx-ent-pill-dropdown .rz-dropdown-panel .rz-datatable-data tr.rz-state-highlight > td {
  background: #F0FDF4 !important;
  color: #0F172A !important;
  font-weight: 600 !important;
}
body .rz-dropdown-panel .rz-datatable-data tr.rz-state-highlight > td:first-child,
body .tvx-ent-pill-dropdown .rz-dropdown-panel .rz-datatable-data tr.rz-state-highlight > td:first-child {
  box-shadow: inset 2.4px 0 0 #008C45 !important;
}

/* Altura máxima con scroll */
body .rz-dropdown-panel .rz-datatable-scrollable-body,
body .rz-dropdown-panel .rz-datatable-data,
body .tvx-ent-pill-dropdown .rz-dropdown-panel .rz-datatable-scrollable-body {
  max-height: 256px !important;
}

/* Responsive: en mobile el panel ocupa casi todo el ancho; filas táctiles */
@media (max-width: 640px) {
  body .rz-dropdown-panel,
  body .tvx-ent-pill-dropdown .rz-dropdown-panel {
    min-width: min(224px, 94vw) !important;
    max-width: 94vw !important;
  }
  body .rz-dropdown-panel .rz-datatable-data tr > td,
  body .tvx-ent-pill-dropdown .rz-dropdown-panel .rz-datatable-data tr > td {
    padding: 9.6px !important;
    font-size: 11.2px !important;
  }
}


/* ============================================================================
   14. GRIDS principales DENSOS (refuerzo directo) — "que no se vea tan grande"
   Celdas y headers de los RadzenDataGrid compactos y legibles. Refuerza los
   tokens de densidad de la sección 9 con reglas directas (por si Radzen no
   honra algún token). NO afecta el panel del dropdown (sección 13, más
   específica) ni los inputs táctiles del header mobile (blindados).
   ============================================================================ */
body .rz-datatable .rz-data-row > td,
body .rz-datatable .rz-data-row > td .rz-cell-data {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}
body .rz-datatable-scrollable-header th .rz-column-title,
body .rz-datatable .rz-column-title {
  padding-top: 4.8px !important;
  padding-bottom: 4.8px !important;
  font-size: 11px !important;
}
/* Badges dentro de celdas: compactos */
body .rz-datatable .rz-data-row > td .rz-badge {
  font-size: 11px !important;
  padding: 1.6px 6.4px !important;
}

/* ============================================================================
   15. SKELETON de carga para diálogos (shimmer) — reemplaza el spinner <Loading>
   ============================================================================ */
.nx-skel {
  position: relative;
  overflow: hidden;
  background: #EEF2F6;
  border-radius: 6.4px;
}
.nx-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: nx-shimmer 1.3s ease-in-out infinite;
}
@keyframes nx-shimmer { 100% { transform: translateX(100%); } }

.nx-dialog-skel { padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 12.8px; }
.nx-dialog-skel .nxsk-title { height: 20.8px; width: 42%; }
.nx-dialog-skel .nxsk-cards { display: flex; gap: 9.6px; flex-wrap: wrap; }
.nx-dialog-skel .nxsk-card  { flex: 1 1 96px; height: 49.6px; }
.nx-dialog-skel .nxsk-row   { display: flex; gap: 11.2px; align-items: center; }
.nx-dialog-skel .nxsk-lbl   { flex: 0 0 auto; width: 32%; height: 11.2px; }
.nx-dialog-skel .nxsk-inp   { flex: 1 1 auto; height: 28.8px; }
.nx-dialog-skel .nxsk-btn   { width: 120px; height: 32px; margin-top: 6.4px; }
@media (prefers-reduced-motion: reduce) { .nx-skel::after { animation: none; } }

/* ============================================================================
   16. RadzenDropDown / MultiSelect / AutoComplete (LISTA simple) — fix de recorte
   La sección 13 (pensada para el panel del DataGrid) puso padding:0 + overflow:
   hidden + min-width a TODOS los .rz-dropdown-panel, pero el base de Radzen usa
   box-sizing:content-box → en las listas simples descuadraba el ancho y recortaba
   la 1ª letra de cada item. Acá normalizamos: box-sizing predecible, items con
   padding izquierdo, ancho 100%, sin offset negativo, y scroll vertical propio.
   ============================================================================ */
body .rz-dropdown-panel,
body .rz-multiselect-panel,
body .rz-autocomplete-panel {
  box-sizing: border-box !important;
}
body .rz-dropdown-panel .rz-dropdown-items,
body .rz-multiselect-panel .rz-multiselect-items,
body .rz-autocomplete-panel .rz-autocomplete-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  max-height: 256px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body .rz-dropdown-panel .rz-dropdown-item,
body .rz-dropdown-panel .rz-dropdown-items li,
body .rz-multiselect-panel .rz-multiselect-item,
body .rz-autocomplete-panel .rz-autocomplete-items li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6.4px 11.2px !important;   /* la 1ª letra ya no se esconde */
  text-indent: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box !important;
  color: #334155 !important;       /* slate-700, AA */
}
/* Selección/hover: dejar el texto bien contrastado (no rojo ilegible) */
body .rz-dropdown-panel .rz-dropdown-item.rz-state-highlight,
body .rz-dropdown-panel .rz-dropdown-items li.rz-state-highlight {
  background: #F0FDF4 !important;
  color: #0F172A !important;
}
body .rz-dropdown-panel .rz-dropdown-item:hover,
body .rz-dropdown-panel .rz-dropdown-items li:hover {
  background: #F8FAFC !important;
  color: #0F172A !important;
}

/* ============================================================================
   DROPDOWN / MULTISELECT — botón de búsqueda, lista con grupos
   Radzen usa .rz-button-icon-only (círculo) y .rz-list / .rz-group-header
   para DropDown con GroupProperty. Los selectores anteriores no los cubrían.
   ============================================================================ */

/* ── Botón de búsqueda (ícono lupa) — reemplaza círculo verde por cuadrado gris ── */
body .rz-dropdown-filter-container .rz-button,
body .rz-dropdown-filter-container .rz-button.rz-button-icon-only,
body .rz-multiselect-filter-container .rz-button,
body .rz-multiselect-filter-container .rz-button.rz-button-icon-only,
body .rz-list-filter-container .rz-button,
body .rz-list-filter-container .rz-button.rz-button-icon-only {
  width: 27.2px !important;
  height: 27.2px !important;
  min-width: 27.2px !important;
  padding: 0 !important;
  border-radius: 6.4px !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #64748B !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}
body .rz-dropdown-filter-container .rz-button:hover,
body .rz-dropdown-filter-container .rz-button.rz-button-icon-only:hover,
body .rz-multiselect-filter-container .rz-button:hover,
body .rz-list-filter-container .rz-button:hover {
  background: #E2E8F0 !important;
  color: #00753A !important;
}
/* Ícono dentro del botón */
body .rz-dropdown-filter-container .rz-button i,
body .rz-dropdown-filter-container .rz-button .rzi,
body .rz-multiselect-filter-container .rz-button i,
body .rz-list-filter-container .rz-button i {
  font-size: 12.8px !important;
  color: inherit !important;
}

/* ── Lista simple (.rz-list) — items y grupo-header ── */
body .rz-dropdown-panel .rz-list,
body .rz-popup .rz-list {
  margin: 0 !important;
  padding: 0 !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Group header (ej: "Variety") */
body .rz-dropdown-panel .rz-group-header,
body .rz-popup .rz-group-header,
body .rz-dropdown-panel .rz-list-group-header {
  padding: 4.8px 11.2px 3.2px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #94A3B8 !important;
  background: #F8FAFC !important;
  border-bottom: 1px solid #F1F5F9 !important;
  border-top: 1px solid #F1F5F9 !important;
}

/* Items de lista */
body .rz-dropdown-panel .rz-list-item,
body .rz-popup .rz-list-item,
body .rz-dropdown-panel .rz-list li,
body .rz-popup .rz-list li {
  display: flex !important;
  align-items: center !important;
  padding: 7.2px 11.2px !important;
  font-size: 11px !important;
  color: #334155 !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #F1F5F9 !important;
  cursor: pointer !important;
  transition: background .1s !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
  gap: 6.4px !important;
}
body .rz-dropdown-panel .rz-list-item:last-child,
body .rz-popup .rz-list-item:last-child,
body .rz-dropdown-panel .rz-list li:last-child {
  border-bottom: none !important;
}
/* Hover */
body .rz-dropdown-panel .rz-list-item:hover,
body .rz-popup .rz-list-item:hover,
body .rz-dropdown-panel .rz-list li:hover {
  background: #F0FDF4 !important;
  color: #0F172A !important;
}
/* Seleccionado */
body .rz-dropdown-panel .rz-list-item.rz-state-highlight,
body .rz-popup .rz-list-item.rz-state-highlight,
body .rz-dropdown-panel .rz-list li.rz-state-highlight {
  background: #ECFDF5 !important;
  color: #005F2F !important;
  font-weight: 600 !important;
  box-shadow: inset 2.4px 0 0 #008C45 !important;
}

/* Checkbox en multiselect — alinear con el texto */
body .rz-dropdown-panel .rz-chkbox,
body .rz-popup .rz-chkbox,
body .rz-multiselect-panel .rz-chkbox {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* ============================================================================
   SIDEBAR — Compact + Bold Headers v2
   Solo cambios visuales / UX. Cero cambios de logica.
   ============================================================================ */

/* ── Section headers — OPCION A: legibilidad en chino ──
   Antes: 8.8px, peso 800, MAYUSCULAS, letter-spacing 0.10em y una barra verde.
   Cuatro problemas para una interfaz que se lee en chino:
     · 8.8px deja los glifos CJK sin trazos (son densos y cuadrados, no tienen
       ascendentes ni descendentes que ayuden a reconocer la palabra).
     · El chino NO TIENE MAYUSCULAS, asi que text-transform no aporta jerarquia:
       solo afecta al texto latino y descuadra la mezcla.
     · letter-spacing separa glifos que deben leerse como una unidad: en CJK
       perjudica activamente la lectura.
     · La barra verde repetia el mismo signo visual del item activo, con lo cual
       no se distinguia "seccion" de "seleccionado".
   Ahora la jerarquia se da con tamaño, peso y color. */
.tvx-sidebar__section-title {
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--tvx-sidebar-text-muted, #64748B) !important;
  padding-left: 0 !important;
  position: relative !important;
}

/* Se retira la barra verde del encabezado: queda reservada al item activo */
.tvx-sidebar__section-title::before {
  content: none !important;
}

/* ── Separadores de seccion con tinte verde ── */
.tvx-sidebar__section:not(:first-child) {
  border-top: 1px solid rgba(0, 140, 69, 0.15) !important;
  margin-top: 11.2px !important;
  padding-top: 11.2px !important;
}

/* ── Items — OPCION A ──
   Antes: 30.4px de alto y 10.8px de texto. A ese tamaño el chino pierde trazos.
   14px es el minimo practico para CJK (es la base de Ant Design, el estandar de
   facto en software empresarial chino) y 36px de alto da sitio al interlineado
   de 1.65 que el CJK necesita.
   Los tamaños van en px y no en rem a proposito: la raiz del documento esta en
   clamp(10px … 10.8px), asi que un valor en rem rendiria ~2/3 de lo esperado. */
.tvx-sidebar-item {
  height: 36px !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}
.tvx-sidebar-item--dashboard {
  height: 36px !important;
}

/* Stack con fuentes chinas. El sidebar resolvia a --font-sans, que es
   'Inter', ui-sans-serif, system-ui… sin ninguna fuente CJK: el chino caia
   a la que el sistema eligiera (SimSun serif en Windows).
   Este stack es el que el proyecto ya usa en nexus-china-premium.css. */
.tvx-sidebar-enterprise,
.tvx-sidebar-item,
.tvx-sidebar__section-title,
.tvx-sidebar-item__label {
  font-family: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* ── Icono activo: fondo verde tenue (muy visible) ── */
.tvx-sidebar-item.is-active .tvx-sidebar-item__icon {
  background: rgba(0, 140, 69, 0.14) !important;
  border-radius: 4.8px !important;
  padding: 2.4px !important;
  width: 20.8px !important;
  height: 20.8px !important;
  color: #00753A !important;
  box-sizing: border-box !important;
}

/* ── Active item: fondo + texto verde ── */
.tvx-sidebar-item.is-active {
  background: linear-gradient(90deg, rgba(0,140,69,0.10) 0%, rgba(0,140,69,0.03) 100%) !important;
  color: #00753A !important;
  font-weight: 600 !important;
}

/* ── Active rail: verde con glow lateral ── */
.tvx-sidebar-item.is-active::before {
  background: linear-gradient(180deg, #00A854 0%, #005F2F 100%) !important;
  box-shadow: 1.6px 0 6.4px rgba(15, 23, 42, 0.12) !important;
  height: 20.8px !important;
  width: 2.4px !important;
}

/* ── Hover ── */
.tvx-sidebar-item:hover {
  background: rgba(0, 140, 69, 0.05) !important;
  color: #0F172A !important;
}

/* ── Parent items ── */
.tvx-sidebar-item.has-children {
  color: #0F172A !important;
  font-weight: 600 !important;
}

/* ================================================================
   SIDEBAR FOOTER — Boton colapsar (desktop)
   ================================================================ */
.tvx-sidebar__footer-collapse {
  flex-shrink: 0;
  padding: 8px 9.6px 11.2px;
  border-top: 1px solid rgba(0, 140, 69, 0.14);
}

.tvx-sidebar__collapse-btn {
  display: flex;
  align-items: center;
  gap: 6.4px;
  width: 100%;
  padding: 7.2px 9.6px;
  background: none;
  border: 1px solid rgba(0, 140, 69, 0.22);
  border-radius: 6.4px;
  color: #64748B;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--tvx-sidebar-font-family, inherit);
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
  overflow: hidden;
}

.tvx-sidebar__collapse-btn:hover {
  background: rgba(0, 140, 69, 0.07);
  color: #00753A;
  border-color: rgba(0, 140, 69, 0.40);
}

.tvx-sidebar__collapse-btn svg {
  width: 12.8px;
  height: 12.8px;
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.tvx-sidebar__collapse-btn:hover svg {
  transform: translateX(-2.4px);
}

/* ============================================================================
   NEXUS BRAND IDENTITY — Cafe calido del logo
   #3C2A18 = color exacto del texto "Nexus" y nodos del grafo en el icono
   ============================================================================ */
:root {
  --nx-brand-brown:      #3C2A18;
  --nx-brand-brown-dark: #2A1D10;
  --nx-brand-brown-soft: #6B4A31;
}

/* Header: nombre "Nexus" en cafe del logo */
.tvx-ent-brand__name {
  color: #3C2A18 !important;
  font-weight: 700 !important;
}

/* Header: linea inferior con cafe del logo */
.tvx-header-enterprise {
  border-bottom: 1.6px solid #3C2A18 !important;
}

/* Sidebar: titulos de seccion en cafe del logo */
.tvx-sidebar__section-title {
  color: #3C2A18 !important;
}

/* Botones primarios: texto cafe oscuro sobre verde hoja (contraste AA ~5.5:1) */
body .rz-button.rz-primary,
body .rz-button.rz-primary.rz-shade-default,
body .rz-button.rz-primary:hover {
  color: #2D1F10 !important;
}

body .nx-btn-primary {
  color: #2D1F10 !important;
}

/* ============================================================================
   17. DROPDOWNS CONECTADOS — Look "chip" en todos los combobox del proyecto
   El trigger adopta el estilo chip (fondo gris, borde slate, radio 4.8px).
   Cuando está abierto, el borde inferior desaparece y el panel se conecta.
   Aplica a RadzenDropDown, RadzenDropDownDataGrid, MultiSelect, AutoComplete.
   Override sobre secciones 13-16: carga al final, misma o mayor especificidad.
   ============================================================================ */

/* ── 1. PANEL: sin borde superior ni margen, conecta con trigger ── */
body .rz-dropdown-panel,
body .rz-multiselect-panel,
body .rz-autocomplete-panel,
body .rz-popup {
  border: 1px solid #008C45 !important;
  border-top: none !important;
  border-radius: 0 0 6.4px 6.4px !important;
  margin-top: 0 !important;
  box-shadow: 0 6.4px 16px rgba(15,23,42,.10), 0 1.6px 3.2px rgba(15,23,42,.04) !important;
}

/* ── 2. TRIGGER: aspecto chip (fondo gris suave, borde slate, radio 4.8px) ── */
body .rz-dropdown,
body .rz-multiselect,
body .rz-autocomplete {
  background: #FAFAFA !important;
  border: 1px solid #E6E9EE !important;
  border-radius: 4.8px !important;
  transition: background .15s, border-color .15s !important;
}
body .rz-dropdown:hover:not(.rz-state-disabled):not([disabled]),
body .rz-multiselect:hover:not(.rz-state-disabled):not([disabled]) {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

/* ── 3. TRIGGER ABIERTO (.rz-dropdown-open): borde verde, sin borde inferior,
        esquinas inferiores cuadradas → se "funde" con el panel ── */
body .rz-dropdown.rz-dropdown-open,
body .rz-multiselect.rz-dropdown-open {
  background: #FFFFFF !important;
  border: 1px solid #008C45 !important;
  border-bottom: none !important;
  border-radius: 4.8px 4.8px 0 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* ── 4. CHECKMARK en ítem seleccionado (✓ verde, dibujado con CSS border) ──
        Aplica a listas simples (RadzenDropDown). Los DataGrid ya tienen el
        rail verde izquierdo de sección 13. ── */
body .rz-dropdown-panel .rz-dropdown-item { position: relative !important; }
body .rz-dropdown-panel .rz-dropdown-items li { position: relative !important; }
body .rz-popup .rz-list-item { position: relative !important; }

body .rz-dropdown-panel .rz-dropdown-item.rz-state-highlight,
body .rz-dropdown-panel .rz-dropdown-items li.rz-state-highlight,
body .rz-popup .rz-list-item.rz-state-highlight {
  padding-right: 30.4px !important;
}
body .rz-dropdown-panel .rz-dropdown-item.rz-state-highlight::after,
body .rz-dropdown-panel .rz-dropdown-items li.rz-state-highlight::after,
body .rz-popup .rz-list-item.rz-state-highlight::after {
  content: '';
  position: absolute;
  right: 11.2px;
  top: 50%;
  width: 4px;
  height: 7.2px;
  transform: translateY(-65%) rotate(45deg);
  border: 1.6px solid #008C45;
  border-top: none;
  border-left: none;
}

/* ── 5. LABEL del trigger: colores chip (label pequeño gris, valor oscuro) ── */
body .rz-dropdown .rz-dropdown-label:not(.rz-placeholder),
body .rz-multiselect .rz-inputtext {
  color: #111827 !important;
  font-weight: 500 !important;
  font-size: 11px !important;
}
body .rz-dropdown .rz-placeholder,
body .rz-dropdown .rz-dropdown-label.rz-placeholder {
  color: #94A3B8 !important;
  font-weight: 400 !important;
}

/* ── 6. DISCAPACITADO: legible pero visualmente atenuado ── */
body .rz-dropdown.rz-state-disabled,
body .rz-dropdown[disabled],
body .rz-multiselect.rz-state-disabled {
  background: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}
body .rz-dropdown.rz-state-disabled .rz-dropdown-label,
body .rz-dropdown[disabled] .rz-dropdown-label {
  color: #94A3B8 !important;
}
/* ============================================================================
   FORM <-> GRID DENSITY ALIGNMENT
   Form labels inherit the body font (1rem = 12.8px) while data grids run at
   10.4-11.2px, so forms looked oversized next to detail grids. Align form
   text to the grid-cell scale (0.875rem = 11.2px) and compact the input
   height accordingly. rem-based: follows the root density knob in app.css.
   ============================================================================ */
:root {
  --rz-input-height: 2rem; /* 25.6px, was 2.25rem */
  --rz-text-body1-font-size: 0.875rem; /* RadzenText default, was 1rem */
}

body .rz-label,
body .rz-radiobutton-label,
body .rz-chkbox-label,
body .rz-fieldset-legend-text,
body .rz-fieldset-legend {
  font-size: 0.875rem !important;
}

/* Inherited body text (plain divs, RadzenText) joins the same scale.
   Bootstrap sets body at 1rem; Radzen's own intent is 0.875rem. */
body {
  font-size: 0.875rem;
}

/* ============================================================================
   FOTO DE PERFIL EN EL AVATAR DEL HEADER
   ----------------------------------------------------------------------------
   El avatar del header mostraba solo iniciales (GetUserInitials en Layout.razor).
   Ahora Layout inyecta un <img class="tvx-avatar-img"> con la foto del blob
   (GET api/User/Avatar/{idUser} vía gateway) SOBRE las iniciales.

   Por qué superpuesto y no reemplazado: si el usuario no tiene foto el endpoint
   responde 404, el onerror del <img> lo oculta y quedan visibles las iniciales.
   Así el fallback no necesita lógica en C# ni una segunda petición.

   Se define acá porque nexus-ux-fixes.css carga después de nexus-china-premium.css,
   que fija el avatar con border-radius: 50% !important. La imagen hereda ese radio.
   ========================================================================= */

.tvx-ent-user__avatar,
.tvx-avatar,
.tvx-profile-dropdown__avatar-lg {
  position: relative;
  overflow: hidden;
}

.tvx-avatar-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* recorta sin deformar: las fotos no vienen cuadradas */
  border-radius: inherit;
  background: inherit;    /* tapa las iniciales mientras la imagen carga */
}

/* ============================================================================
   PASO 4 · BORDE DE CONTROLES — WCAG 1.4.11 (contraste no textual, min 3:1)
   ----------------------------------------------------------------------------
   El limite visible de un campo es lo que permite saber donde se puede escribir.
   Los valores anteriores no llegaban ni a 1.3:1 contra el fondo blanco:
     Radzen  --rz-base-200  #e9eaed  1.20:1
     Sistema --color-border #E5E7EB  1.24:1
   Ahora usan --color-border-control (#8A9099, 3.22:1).

   El token de Radzen se sobrescribe en theme.css. Acá van solo los controles que
   NO pasan por Radzen: los .form-control de Bootstrap y los checkbox/radio nativos.

   Los divisores decorativos siguen con --color-border a proposito: WCAG no les
   exige contraste, y subirlos ensuciaria visualmente las tarjetas.
   ========================================================================= */

.form-control,
.form-select,
textarea.form-control {
  border-color: var(--color-border-control);
}

/* Checkbox y radio nativos: el borde ES el control cuando estan sin marcar */
input[type="checkbox"]:not(:checked),
input[type="radio"]:not(:checked) {
  border-color: var(--color-border-control);
}

/* El foco no debe perder contraste al pasar por encima del borde nuevo */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary-text);
}

/* ============================================================================
   PASO 7 · CONTROLES QUE ERAN <div @onclick>
   ----------------------------------------------------------------------------
   Un div con @onclick no recibe foco con Tab, no responde a Enter ni Espacio y
   los lectores de pantalla no lo anuncian como accionable. Los que son controles
   reales pasaron a <button type="button">.

   Estas clases devuelven al boton la apariencia que tenia el div: el navegador
   le pone fondo, borde y padding propios que hay que neutralizar.
   El foco NO se neutraliza: es justamente lo que faltaba.
   ========================================================================= */

.nx-unbutton {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* Foco visible y consistente con el resto del sistema */
.nx-unbutton:focus-visible {
  outline: 2px solid var(--color-primary-text, #00753A);
  outline-offset: 2px;
  border-radius: 4px;
}

/* La tarjeta clickeable debe ocupar el ancho del contenedor como lo hacia el div */
.nx-unbutton--block {
  display: block;
  width: 100%;
}

/* ============================================================================
   BADGES DE ESTADO — Activado / Desactivado en las grillas (159 usos)
   ----------------------------------------------------------------------------
   Las grillas usan RadzenBadge con Shade.Lighter. Los valores por defecto de
   Radzen no alcanzan el minimo de 4.5:1 para texto, y el rojo es un magenta
   ajeno a la paleta:
     Activado    texto #009B51 sobre tinte 16%  ->  2.98:1
     Desactivado texto #F31155 sobre tinte 16%  ->  3.23:1
   Con los tokens del sistema: 5.10:1 y 6.29:1.

   Ojo con --color-success: sobre un fondo con tinte da 4.24:1 y NO alcanza.
   Por eso el texto usa --color-success-text: #0A7940, 4.81:1 sobre el tinte.
   Es el verde mas vivo que pasa AA; #009B51 daba 2.98:1 y #14654A (6.15:1) apagaba de mas.
   ========================================================================= */

:root {
  --rz-success-lighter: rgba(27, 127, 93, 0.10);
  --rz-on-success-lighter: var(--color-success-text, #0A7940);
  --rz-danger-lighter: rgba(158, 43, 43, 0.10);
  --rz-on-danger-lighter: var(--color-danger, #9E2B2B);
}

/* El estado no debe distinguirse SOLO por color: se agrega un punto como
   segunda señal. Si aparece en algun badge numerico que use estilo success o
   danger, hay que acotar el selector a la grilla. */
.rz-badge-success,
.rz-badge-danger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.rz-badge-success::before,
.rz-badge-danger::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* ============================================================================
   CHECKBOX Y RADIO — check y punto dibujados en CSS
   ----------------------------------------------------------------------------
   Problemas que resuelve, todos medidos:
     · Borde sin marcar #D5DBDB (--border-color de crud.css) = 1.40:1
     · Relleno marcado #07C160 (verde de WeChat, gana la 4a definicion de
       --brand-primary) = 2.38:1, bajo el minimo de 3:1 para un grafico
     · El glifo salia de la fuente de iconos de Radzen a 12.8px dentro de una
       caja de 19.2px: chico y dependiente de que la fuente cargue
     · El hover hacia scale(1.08): la caja crecia y se movia bajo el cursor

   Dibujarlo en CSS lo vuelve nitido a cualquier tamaño y lo hace inmune al
   problema de las fuentes remotas.
   ========================================================================= */

/* ── CHECKBOX ── */
.rz-chkbox-box,
.rz-checkbox .rz-chkbox-box {
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid var(--color-border-control, #8A9099) !important;
  border-radius: 4px !important;
  background: var(--color-surface, #FFFFFF) !important;
  position: relative !important;
  box-shadow: none !important;
  transition: background 120ms ease, border-color 120ms ease !important;
  transform: none !important;          /* anula el scale(1.08) de crud.css */
}

.rz-chkbox-box:hover,
.rz-checkbox .rz-chkbox-box:hover {
  border-color: var(--color-primary-text, #00753A) !important;
  background: #F0F8F4 !important;
  transform: none !important;          /* la caja no se mueve al pasar el mouse */
  box-shadow: none !important;
}

.rz-chkbox-box.rz-state-active {
  background: var(--color-primary, #008944) !important;
  border-color: var(--color-primary, #008944) !important;
  box-shadow: none !important;
  animation: none !important;
}

/* El glifo de la fuente se oculta para que no se superponga al check dibujado */
.rz-chkbox-box .rz-chkbox-icon,
.rz-checkbox .rz-chkbox-icon { display: none !important; }

/* El check: dos bordes rotados 42 grados */
.rz-chkbox-box.rz-state-active::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3.4px;
  width: 6px;
  height: 9.5px;
  border-right: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(42deg);
}

/* Indeterminado: un guion. Necesario para el "seleccionar todo" parcial de las
   grillas, que hoy se ve igual que "nada seleccionado" — informacion equivocada. */
.rz-chkbox-box.rz-state-indeterminate {
  background: var(--color-primary, #008944) !important;
  border-color: var(--color-primary, #008944) !important;
}
.rz-chkbox-box.rz-state-indeterminate::after {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 7.2px;
  width: auto; height: 2px;
  background: #FFFFFF;
  border: 0;
  border-radius: 1px;
  transform: none;
}

.rz-chkbox-box:focus-visible,
.rz-checkbox .rz-chkbox-box:focus-visible {
  outline: none !important;
  border-color: var(--color-primary-text, #00753A) !important;
  box-shadow: 0 0 0 3px var(--color-focus, rgba(0,137,68,.15)) !important;
}

/* ── RADIO ──
   Cambio de forma a proposito: el radio NO se rellena, deja el fondo blanco y
   dibuja el punto en verde con el borde reforzado. Asi se distingue del
   checkbox, que si se rellena. Antes ambos se veian casi iguales al marcarse. */
.rz-radiobutton-box {
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid var(--color-border-control, #8A9099) !important;
  border-radius: 50% !important;
  background: var(--color-surface, #FFFFFF) !important;
  position: relative !important;
  box-shadow: none !important;
  transition: border-color 120ms ease !important;
  transform: none !important;
}

.rz-radiobutton-box:hover {
  border-color: var(--color-primary-text, #00753A) !important;
  transform: none !important;
}

.rz-radiobutton-box .rzi-circle-on,
.rz-radiobutton-box .rz-radiobutton-icon { display: none !important; }

.rz-radiobutton-checked .rz-radiobutton-box,
.rz-radiobutton-box.rz-state-active {
  border-color: var(--color-primary, #008944) !important;
  border-width: 2px !important;
  background: var(--color-surface, #FFFFFF) !important;
}

.rz-radiobutton-checked .rz-radiobutton-box::after,
.rz-radiobutton-box.rz-state-active::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--color-primary, #008944);
}

.rz-radiobutton-box:focus-visible {
  outline: none !important;
  border-color: var(--color-primary-text, #00753A) !important;
  box-shadow: 0 0 0 3px var(--color-focus, rgba(0,137,68,.15)) !important;
}

/* ============================================================================
   UNIFICACION DEL SISTEMA DE TOKENS PARALELO
   ----------------------------------------------------------------------------
   crud.css define su propia paleta con nombres distintos a los del sistema
   auditado, y por eso las correcciones AA no llegaban a sus componentes.
   Medido: los CINCO colores de marca fallan como relleno con texto blanco,
   y dos de los de texto fallan sobre blanco:

     --brand-primary    #16A085  3.28    --brand-warning  #F39C12  2.19
     --brand-danger     #E74C3C  3.82    --brand-accent   #2ECC71  2.10
     --brand-secondary  #3498DB  3.15    --text-muted     #95A5A6  2.56
                                         --text-3         #7F8C8D  3.48

   En vez de reemplazarlos en los cientos de reglas que los usan, se apuntan
   los nombres viejos a los tokens del sistema. Va aca y no en theme.css porque
   crud.css se carga DESPUES de theme.css, y lleva !important porque
   nexus-china-premium.css tambien declara --brand-primary con !important.
   ========================================================================= */

:root {
  /* Marca */
  --brand-primary:        var(--color-primary) !important;        /* 4.50 */
  --brand-primary-hover:  var(--color-primary-hover) !important;  /* 5.82 */
  --brand-primary-light:  var(--brand-50) !important;             /* verde, ya no turquesa */
  --brand-primary-dark:   var(--brand-700) !important;

  /* Estados */
  --brand-secondary:      var(--color-info) !important;           /* 5.17 */
  --brand-accent:         var(--color-success) !important;        /* 4.95 */
  --brand-warning:        var(--color-warning) !important;        /* 4.51 */
  --brand-danger:         var(--color-danger) !important;         /* 7.41 */

  /* Texto: solo los dos que fallaban. --text-1 y --text-2 ya cumplian
     (10.98 y 9.29) y se dejan como estan para no alterar la jerarquia. */
  --text-3:               var(--color-text-muted) !important;     /* 2.56 -> 4.76 */
  --text-muted:           var(--color-text-muted) !important;     /* 3.48 -> 4.76 */

  /* Superficies */
  --bg-card:              var(--color-surface) !important;
  --bg-body:              var(--color-bg) !important;
  --text-white:           var(--color-primary-contrast) !important;

  /* Bordes: se apunta al DECORATIVO (#E5E7EB), no al de controles.
     --border-color se usa en crud.css para tarjetas y divisores, no solo para
     campos; llevarlo a #8A9099 oscureceria todos los bordes de las tarjetas.
     El contraste de los controles ya lo resuelven las reglas de checkbox,
     radio e input, que usan --color-border-control directamente. */
  --border-color:         var(--color-border) !important;

  /* Anillos de foco: eran turquesa y verde lima, ahora siguen la marca */
  --shadow-focus:         0 0 0 2.4px var(--color-focus) !important;
  --shadow-success:       0 0 0 2.4px rgba(27, 127, 93, 0.15) !important;
  --shadow-danger:        0 0 0 2.4px rgba(158, 43, 43, 0.15) !important;
}

/* ============================================================================
   FIX DEL CHECK QUE NO SE VEIA
   ----------------------------------------------------------------------------
   El checkbox marcado se veia como un cuadrado verde SIN check. Causa:
   MainLayout.razor tiene un <style> inline con

       .rz-chkbox-box .rzi { background-color: var(--nx-primary) !important; }

   El glifo del check es un elemento .rzi (icono de Radzen) y esa regla le pone
   un fondo verde solido que tapa la caja completa, incluido el check dibujado.

   Dos detalles que obligan a este bloque aparte:
     1. Antes se oculto .rz-chkbox-icon, que es OTRA clase. El glifo real es .rzi.
     2. Un <style> inline vive en el body, o sea DESPUES de todos los <link>:
        con la misma especificidad e !important, gana el inline. Por eso aca se
        prefija con `body` para subir la especificidad a (0,2,1) y ganarle
        al (0,2,0) de MainLayout.
   ========================================================================= */

body .rz-chkbox-box .rzi,
body .rz-checkbox .rz-chkbox-box .rzi {
  display: none !important;
  background: none !important;
}

body .rz-radiobutton-box .rzi,
body .rz-radiobutton-box .rzi-circle-on {
  display: none !important;
  background: none !important;
}

/* El check dibujado, ahora con !important para no perder ante otro inline */
body .rz-chkbox-box.rz-state-active::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 5px !important;
  top: 3.4px !important;
  width: 6px !important;
  height: 9.5px !important;
  background: none !important;
  border: 0 !important;
  border-right: 2px solid #FFFFFF !important;
  border-bottom: 2px solid #FFFFFF !important;
  border-radius: 0 !important;
  transform: rotate(42deg) !important;
}

body .rz-chkbox-box.rz-state-indeterminate::after {
  content: "" !important;
  left: 3px !important;
  right: 3px !important;
  top: 7.2px !important;
  width: auto !important;
  height: 2px !important;
  background: #FFFFFF !important;
  border: 0 !important;
  border-radius: 1px !important;
  transform: none !important;
}

body .rz-radiobutton-checked .rz-radiobutton-box::after,
body .rz-radiobutton-box.rz-state-active::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 3px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--color-primary, #008944) !important;
  transform: none !important;
}

/* ============================================================================
   FILAS DE LA GRILLA — hover y seleccion diferenciables
   ----------------------------------------------------------------------------
   Los tres estados usaban el mismo verde a opacidades casi iguales y eran
   indistinguibles. Medido, componiendo sobre blanco:

     normal      #FFFFFF
     hover       rgba(0,140,69,0.025) -> #F9FCFA   1.034 vs blanco
     SELECCIONADA rgba(0,140,69,0.04) -> #F5FAF8   1.021 vs blanco
     seleccionada vs hover                          1.013

   1.00 = identicos. Y estaba INVERTIDO: el hover era mas oscuro que la fila
   seleccionada, asi que al pasar el mouse cualquier fila se veia "mas
   seleccionada" que la real. Importa porque la barra de herramientas actua
   sobre la fila seleccionada ("Seleccione una fila para editar").

   No se agrega zebra a proposito: un rayado al 2-5% es imperceptible y consume
   el rango tonal que necesita la seleccion. Mejor blanco + estados claros.

   El rail izquierdo es la señal decisiva: un tinte de fondo, por mas que se
   suba, siempre es sutil. Con el rail la seleccion es inequivoca.
   ========================================================================= */

/* ── HOVER: 0.05 -> #F2F9F6 (1.068 vs blanco) ── */
body .ep-content .rz-grid tbody tr.rz-data-row:hover:not(.rz-state-highlight),
body .rz-datatable tbody tr.rz-data-row:hover:not(.rz-state-highlight),
body .rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) {
  background: rgba(0, 140, 69, 0.05) !important;
  background-color: rgba(0, 140, 69, 0.05) !important;
}

/* ── SELECCIONADA: 0.14 -> #DBEFE5 (1.201 vs blanco, 1.124 vs hover) ── */
body .rz-selectable tbody tr.rz-data-row.rz-state-highlight,
body .rz-datatable tbody tr.rz-data-row.rz-state-highlight,
body .ep-content .rz-grid tbody tr.rz-data-row.rz-state-highlight {
  background: rgba(0, 140, 69, 0.14) !important;
  background-color: rgba(0, 140, 69, 0.14) !important;
}

body .rz-selectable tbody tr.rz-data-row.rz-state-highlight > td,
body .rz-datatable tbody tr.rz-data-row.rz-state-highlight > td,
body .ep-content .rz-grid tbody tr.rz-data-row.rz-state-highlight > td {
  background: rgba(0, 140, 69, 0.14) !important;
  background-color: rgba(0, 140, 69, 0.14) !important;
  /* El texto vuelve al color principal. Antes se pintaba #00753A: con el fondo
     practicamente invisible, la seleccion quedaba señalada SOLO por el color
     del texto, que incumple el criterio 1.4.1. */
  color: var(--color-text, #0F172A) !important;
}

/* Rail verde a la izquierda de la fila seleccionada. Se usa box-shadow inset
   y no un borde ni un pseudo-elemento para no alterar el alto ni el ancho de
   la celda: la grilla no se mueve al seleccionar. */
body .rz-selectable tbody tr.rz-data-row.rz-state-highlight > td:first-child,
body .rz-datatable tbody tr.rz-data-row.rz-state-highlight > td:first-child,
body .ep-content .rz-grid tbody tr.rz-data-row.rz-state-highlight > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--color-primary, #008944) !important;
}

/* Texto secundario sobre filas con tinte.
   --color-text-muted (#64748B) da 3.96:1 sobre la fila seleccionada y NO
   alcanza. No hay tinte visible que lo salve: incluso al 10% queda en 4.20.
   #475569 da 6.31:1 y mantiene la jerarquia de "secundario". */
body .rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data,
body .rz-selectable tbody tr.rz-data-row.rz-state-highlight small,
body .rz-datatable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data {
  color: var(--color-text, #0F172A) !important;
}

/* ============================================================================
   MARCA DEL HEADER — sin recuadro contra el fondo
   ----------------------------------------------------------------------------
   Antes: <img src="Nexus.png"> + <span>Nexus</span>.
   Dos problemas:
     · Nexus.png es RGB SIN canal alfa (1448x1086) con un gris claro incrustado
       en los pixeles. Ese gris era el "recuadro" que se notaba contra el header
       blanco, y no se puede quitar por CSS: viene dentro de la imagen.
     · El PNG ya contiene la palabra "Nexus", asi que el <span> la repetia.

   Ahora se usa nexus-lockup-trimmed.png (1341x409, RGBA, recortado): trae la
   palabra y es transparente, asi que se apoya directamente en el fondo.

   El alto baja de 34px a 28px porque el lockup es apaisado (3.28:1): a 34px
   ocuparia 111px de ancho y dominaria la barra. A 28px son ~92px, un peso
   parecido al que tenia antes.
   ========================================================================= */

body .tvx-ent-brand__logo {
  height: 28px !important;
  width: auto !important;
  display: block !important;
  /* Sin fondo ni sombra: la transparencia del PNG hace todo el trabajo */
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  /* Dial de intensidad: bajar a .75 o .62 si se quiere mas integrada al fondo */
  opacity: 1;
}

/* La palabra ya viene en la imagen: el span se oculta siempre.
   Antes solo se ocultaba bajo 1024px, asi que en escritorio se veia doble. */
body .tvx-ent-brand__name {
  display: none !important;
}

/* El hover del enlace ahora SI se percibe: con el PNG opaco quedaba tapado.
   Sirve para que se lea como lo que es, un enlace al inicio. */
body .tvx-ent-brand:hover {
  background-color: rgba(0, 140, 69, 0.06) !important;
}

/* ============================================================================
   SE QUITA EL CIRCULO VERDE AL PULSAR UN ITEM DEL MENU
   ----------------------------------------------------------------------------
   Origen: sidebar-drawer-animations.css L130 (se carga en index.html L75).

     .tvx-sidebar-item::after       { border-radius:50%; width:0; height:0;
                                      background: <verde>; opacity:.2;
                                      transition: width .4s, height .4s; }
     .tvx-sidebar-item:active::after{ width:160px; height:160px; }

   Un ripple hecho a mano: un circulo verde que crece hasta 160x160 px sobre un
   item de 36 px de alto. Ademas .tvx-sidebar__section-content declara
   overflow: visible (para que salgan los flyouts), asi que nada lo recorta y
   el circulo terminaba pintando sobre 3 o 4 items vecinos.

   Por que se retira y no se acota:
     · No aporta informacion. El item seleccionado ya se comunica con el rail
       verde y el tinte de fondo; el circulo repite en grande lo que el rail
       ya dice en pequeño.
     · Tapa las etiquetas de los items de alrededor mientras dura, y sugiere
       que esos items estan involucrados en la accion.
     · 0.4s es lento para navegacion: un menu debe sentirse instantaneo.
     · El ripple es un idioma tactil (Material) para botones; en un ERP denso
       operado con mouse ya existen hover, focus y active.

   Se reemplaza por un :active inmediato y contenido en el propio item.
   ========================================================================= */

body .tvx-sidebar-item::after,
body .tvx-sidebar-item:active::after,
body .tvx-sidebar-item:focus::after {
  content: none !important;
  display: none !important;
}

/* Feedback de pulsacion: instantaneo y dentro del item. Un tinte algo mas
   profundo que el hover basta para que el clic se sienta acusado. */
body .tvx-sidebar-item:active {
  background: rgba(0, 140, 69, 0.12) !important;
  transition: none !important;
}

/* Misma familia de efecto en metronic-layout.css L1351: circulos al 200% en
   .tvx-nav-item y .tvx-action-btn. Se retiran por coherencia. */
body .tvx-nav-item::after,
body .tvx-nav-item:hover::after,
body .tvx-action-btn::after,
body .tvx-action-btn:hover::after {
  content: none !important;
  display: none !important;
}

/* ============================================================================
   CIFRAS TABULARES EN GRILLAS Y CAMPOS NUMERICOS
   ----------------------------------------------------------------------------
   Problema: en la mayoria de tipografias de interfaz los digitos tienen ancho
   distinto -- el "1" es mas angosto que el "8". En una columna de cantidades
   eso hace que las cifras no caigan alineadas y haya que LEER cada numero para
   comparar magnitudes, en vez de verlo de un vistazo.

   font-variant-numeric: tabular-nums activa la caracteristica OpenType 'tnum',
   que fuerza a todos los digitos a ocupar el mismo ancho de avance. Unidades
   bajo unidades, decimales bajo decimales.

   Verificado antes de aplicar:
     · Clases reales de Radzen 9.1 (no supuestas): .rz-grid-table, .rz-data-row,
       .rz-cell-data, .rz-datatable-data.
     · La familia efectiva soporta 'tnum'. Radzen usa --rz-text-font-family =
       "Source Sans Pro" (local, SourceSans3VF) con fallback a Segoe UI; el
       token propio --font-sans usa Inter. Las tres soportan tnum, asi que la
       regla funciona tanto si Google Fonts carga como si no (importante para
       los usuarios en China, donde Inter no llega y cae a Segoe UI).
     · Raleway NO trae tnum, pero su unica declaracion (app.css:258) esta
       dentro de un bloque comentado: no aplica.
     · Sin conflicto con font-feature-settings: las 3 declaraciones de 'liga'
       en enterprise-pages.css son de iconos (.material-icons, .rz-icon), no
       de celdas. font-feature-settings habria apagado tnum si coincidieran.

   Es seguro aplicarlo de forma amplia: solo cambia el ancho de avance de los
   digitos. No afecta el texto ni requiere revisar pantalla por pantalla.

   NOTA: esto NO alinea las columnas a la derecha. Eso es un cambio aparte que
   debe hacerse columna por columna, distinguiendo las numericas (cantidades,
   pesos, montos) de los codigos como "EMB-107", que se quedan a la izquierda.
   ========================================================================= */

.rz-grid-table td,
.rz-grid-table th,
.rz-datatable-data td,
.rz-data-row td,
.rz-cell-data,
.rz-datatable-footer,
.rz-paginator {
  font-variant-numeric: tabular-nums;
}

/* Campos numericos: mientras se escribe, el valor no "baila" al cambiar de
   digito, y los importes quedan comparables entre filas de un formulario. */
.rz-numeric input,
.rz-spinner input,
input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   18. BARRA DE ACCIONES DE FORMULARIO (Nuevo/Editar ShipmentHeader)
   .erp-form-actions-inline: el Save ya es verde de marca (seccion 8, rz-primary),
   pero Cancelar (ButtonStyle.Light + Outlined) no tenia override y quedaba
   lavado — parecia DESHABILITADO al lado del primario lleno. Alineamos ambos
   con el sistema nx-btn de los dialogos: misma altura, radio y peso; Cancelar
   toma el look nx-btn--secondary (blanco, borde #D1D5DB, tinta #374151).
   ============================================================================ */
body .erp-form-actions-inline .rz-button {
  min-height: 38px;
  padding: 0 20px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease;
}
body .erp-form-actions-inline .rz-button .rzi {
  font-size: 17px !important;
}
body .erp-form-actions-inline .rz-button.rz-primary:hover:not(:disabled):not(.rz-state-disabled) {
  box-shadow: 0 2px 8px rgba(0, 140, 69, .30);
}

/* Cancelar: mismo blanco/borde/tinta que .nx-btn--secondary (nx-dialog.css). */
body .erp-form-actions-inline .rz-button.rz-light {
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  color: #374151 !important;
}
body .erp-form-actions-inline .rz-button.rz-light .rzi {
  color: #6B7280 !important;
}
body .erp-form-actions-inline .rz-button.rz-light:hover:not(:disabled):not(.rz-state-disabled) {
  background: #F9FAFB !important;
  border-color: #9CA3AF !important;
  color: #111827 !important;
}

/* Teclado: anillo de foco visible en ambos (antes solo el default del browser). */
body .erp-form-actions-inline .rz-button:focus-visible {
  outline: 2px solid var(--nx-primary, #008C45);
  outline-offset: 2px;
}