/* ============================================================================
   SIDEBAR ENTERPRISE - TERRAVIX
   Senior UX/UI Design | Consistente con header-enterprise.css
   ============================================================================
   Ancho: 211.2px (expandido) | 57.6px (colapsado)
   Visual: Light/Dark mode | Scrollbar discreto
   Interacción: Keyboard nav | Drag & drop | Search filtering
   ========================================================================== */

/* ----------------------------------------------------------------------------
   DESIGN TOKENS ENTERPRISE SIDEBAR
   Tipografía heredada del theme.css para consistencia total
   ---------------------------------------------------------------------------- */
:root {
  /* Sidebar Dimensions */
  --tvx-sidebar-width-expanded: 224px;
  --tvx-sidebar-width-collapsed: 57.6px;
  --tvx-sidebar-item-height: 36px;   /* OPCION A: sitio para interlineado CJK */
  --tvx-sidebar-search-height: 32px;

  /* Sidebar Colors Light Mode (heredadas del theme.css) */
  --tvx-sidebar-bg: var(--color-surface, #FFFFFF);
  --tvx-sidebar-border: var(--color-border, #E5E7EB);
  --tvx-sidebar-text-primary: var(--color-text, #0F172A);
  --tvx-sidebar-text-muted: var(--color-text-muted, #64748B);
  --tvx-sidebar-icon-default: rgba(15, 23, 42, 0.7);
  --tvx-sidebar-icon-active: #008C45;

  /* Item States (usando colores del theme) */
  --tvx-sidebar-item-hover-bg: var(--color-hover, #F8FAFC);
  --tvx-sidebar-item-active-bg: rgba(0, 140, 69, 0.06);
  --tvx-sidebar-item-active-rail: #008C45;
  --tvx-sidebar-item-focus: rgba(0, 140, 69, 0.10);

  /* Scrollbar */
  --tvx-scrollbar-thumb: rgba(16, 24, 40, 0.2);
  --tvx-scrollbar-width: 3.2px;

  /* Spacing */
  --tvx-sidebar-px: 9.6px;
  --tvx-sidebar-py-section: 4.8px;
  --tvx-sidebar-item-gap: 9.6px;
  --tvx-sidebar-indent: 12.8px;

  /* Typography - HEREDADA DEL THEME GLOBAL */
  --tvx-sidebar-font-label: 14px;    /* OPCION A: en px porque la raiz esta en ~10.8px */
  /* 10.4px del theme */
  --tvx-sidebar-font-overline: 13px; /* OPCION A: 8.8px dejaba el chino sin trazos */
  /* 8.8px del theme */
  --tvx-sidebar-icon-size: 16px;
  --tvx-sidebar-font-family: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  /* Sistema del theme */
  --tvx-sidebar-line-height: 1.65;   /* OPCION A: CJK necesita mas aire */
  /* Del theme */
  --tvx-sidebar-font-weight-normal: var(--fw-normal, 400);
  --tvx-sidebar-font-weight-medium: var(--fw-medium, 500);
  --tvx-sidebar-font-weight-semibold: var(--fw-semibold, 600);
}

/* Dark Mode Tokens */
@media (prefers-color-scheme: dark) and (max-width: 0px) { /* Tema oscuro deshabilitado: la app siempre usa tema claro */
  :root {
    --tvx-sidebar-bg: #0F172A;
    --tvx-sidebar-border: #1E293B;
    --tvx-sidebar-text-primary: #E5E7EB;
    --tvx-sidebar-text-muted: #94A3B8;
    --tvx-sidebar-icon-default: rgba(229, 231, 235, 0.7);
    --tvx-sidebar-icon-active: #008C45;
    /* Verde TerraVix en dark mode */
    --tvx-sidebar-item-hover-bg: #1E293B;
    --tvx-sidebar-item-active-bg: rgba(0, 140, 69, 0.15);
    /* Verde con opacidad */
    --tvx-sidebar-item-active-rail: #008C45;
    /* Verde TerraVix */
    --tvx-scrollbar-thumb: rgba(229, 231, 235, 0.2);
  }
}

/* ----------------------------------------------------------------------------
   SIDEBAR CONTAINER - DESKTOP & MOBILE OFF-CANVAS
   ---------------------------------------------------------------------------- */
.tvx-sidebar-enterprise {
  position: fixed;
  top: var(--tvx-ent-header-height-full, 51.2px);
  left: 0;
  bottom: 0;
  width: var(--tvx-sidebar-width-expanded);
  background: var(--tvx-sidebar-bg);
  border-right: 1px solid var(--tvx-sidebar-border);
  display: flex;
  flex-direction: column;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    width 200ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 200ms;
  z-index: 60;
  overflow: hidden;
  will-change: transform, width;
}

/* ============================================================================
   DESKTOP BEHAVIOR - Sidebar desaparece completamente al cerrar
   ============================================================================ */
@media (min-width: 1025px) {

  /* Estado Expandido (por defecto) */
  .tvx-sidebar-enterprise {
    width: var(--tvx-sidebar-width-expanded);
    transform: translateX(0);
    visibility: visible;
    pointer-events: all;
  }

  /* Estado Colapsado - DESAPARECE COMPLETAMENTE */
  .tvx-sidebar-enterprise.is-collapsed {
    width: 0;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
  }

  /* Cuando está colapsado, ocultar TODO el contenido */
  .tvx-sidebar-enterprise.is-collapsed .tvx-sidebar__search,
  .tvx-sidebar-enterprise.is-collapsed .tvx-sidebar__nav,
  .tvx-sidebar-enterprise.is-collapsed .tvx-sidebar__dashboard {
    display: none !important;
    visibility: hidden;
  }
}

/* ----------------------------------------------------------------------------
   SEARCH BAR - Zona Superior
   ---------------------------------------------------------------------------- */
.tvx-sidebar__search {
  flex-shrink: 0;
  padding: var(--tvx-sidebar-px);
  border-bottom: 1px solid var(--tvx-sidebar-border);
}

.tvx-sidebar-search {
  position: relative;
  height: var(--tvx-sidebar-search-height);
}

.tvx-sidebar-search__input {
  width: 100%;
  height: 100%;
  padding: 0 var(--tvx-sidebar-px) 0 32px;
  border: 1px solid var(--tvx-sidebar-border);
  border-radius: 6.4px;
  background: var(--tvx-sidebar-bg);
  color: var(--tvx-sidebar-text-primary);
  font-family: var(--tvx-sidebar-font-family);
  /* Hereda del theme */
  font-size: var(--tvx-sidebar-font-label);
  line-height: var(--tvx-sidebar-line-height);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tvx-sidebar-search__input::placeholder {
  color: var(--tvx-sidebar-text-muted);
}

.tvx-sidebar-search__input:hover {
  border-color: var(--tvx-sidebar-item-active-rail);
}

.tvx-sidebar-search__input:focus {
  outline: none;
  border-color: var(--tvx-sidebar-item-active-rail);
  box-shadow: 0 0 0 2.4px var(--tvx-sidebar-item-focus);
}

.tvx-sidebar-search__icon {
  position: absolute;
  left: 9.6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12.8px;
  height: 12.8px;
  color: var(--tvx-sidebar-text-muted);
  pointer-events: none;
}

.tvx-sidebar-search__clear {
  position: absolute;
  right: 6.4px;
  top: 50%;
  transform: translateY(-50%);
  width: 19.2px;
  height: 19.2px;
  padding: 3.2px;
  border: none;
  background: none;
  color: var(--tvx-sidebar-text-muted);
  border-radius: 3.2px;
  cursor: pointer;
  transition: all 150ms;
}

.tvx-sidebar-search__clear:hover {
  background: var(--tvx-sidebar-item-hover-bg);
  color: var(--tvx-sidebar-text-primary);
}

/* Collapsed: Hide search */
.tvx-sidebar-enterprise.is-collapsed .tvx-sidebar__search {
  display: none;
}

/* ----------------------------------------------------------------------------
   NAVIGATION CONTAINER
   ---------------------------------------------------------------------------- */
.tvx-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--tvx-sidebar-py-section) 0;
}

/* Custom Scrollbar */
.tvx-sidebar__nav::-webkit-scrollbar {
  width: var(--tvx-scrollbar-width);
}

.tvx-sidebar__nav::-webkit-scrollbar-track {
  background: transparent;
}

.tvx-sidebar__nav::-webkit-scrollbar-thumb {
  background: var(--tvx-scrollbar-thumb);
  border-radius: 8px;
}

.tvx-sidebar__nav::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 24, 40, 0.3);
}

/* ----------------------------------------------------------------------------
   DASHBOARD - Primer Ítem (Fijo)
   ---------------------------------------------------------------------------- */
.tvx-sidebar__dashboard {
  padding: 0 var(--tvx-sidebar-px);
  margin-top: 12.8px;
  /* Espacio superior para separar del borde */
  margin-bottom: 6.4px;
}

.tvx-sidebar-item--dashboard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9.6px;
  height: var(--tvx-sidebar-item-height);
  padding: 0 9.6px;
  border: none;
  background: none;
  color: var(--tvx-sidebar-text-primary);
  font-family: var(--tvx-sidebar-font-family);
  font-size: var(--tvx-sidebar-font-label);
  font-weight: 500;
  border-radius: 6.4px;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.tvx-sidebar-item--dashboard:hover {
  background: var(--tvx-sidebar-item-hover-bg);
}

.tvx-sidebar-item--dashboard.is-active {
  background: var(--tvx-sidebar-item-active-bg);
  font-weight: 600;
}

.tvx-sidebar-item--dashboard.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3.2px;
  height: 19.2px;
  background: var(--tvx-sidebar-item-active-rail);
  border-radius: 0 1.6px 1.6px 0;
}

/* ----------------------------------------------------------------------------
   ICONOS Y BULLETS | Sistema de columna fija 16px
   ============================================================================
   Layout consistente: [16px icon/bullet] [9.6px gap] [label flexible]
   ---------------------------------------------------------------------------- */
.tvx-sidebar-item__icon {
  flex-shrink: 0;
  width: 16px;
  /* Columna fija */
  height: 16px;
  color: #64748B;
  /* Color muted por defecto */
  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: 0;
  /* Gap aplicado por el parent */
}

/* Hover: iconos más visibles */
.tvx-sidebar-item:hover .tvx-sidebar-item__icon {
  color: #00753A;
  /* Verde TerraVix */
  transform: scale(1.05);
  /* Microinteracción sutil */
}

/* Activo: iconos con color primario */
.tvx-sidebar-item.is-active .tvx-sidebar-item__icon {
  color: #00753A;
}

/* Dashboard específico */
.tvx-sidebar-item--dashboard:hover .tvx-sidebar-item__icon,
.tvx-sidebar-item--dashboard.is-active .tvx-sidebar-item__icon {
  color: var(--tvx-sidebar-icon-active);
}

/* ============================================================================
   FAVORITOS CIRCLE-DOT - PROFESSIONAL MINIMALIST DESIGN
   Principios: Clarity through simplicity, subtle elegance
   ============================================================================ */
/* Circle-dot específico para favoritos - Más pequeño y refinado */
.tvx-sidebar-item__icon[data-lucide="circle-dot"] {
  width: 9.6px;
  /* Reducido de 16px a 9.6px */
  height: 9.6px;
  opacity: 0.5;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* Hover State - Dot se vuelve más prominente y crece sutilmente */
.tvx-sidebar-item:hover .tvx-sidebar-item__icon[data-lucide="circle-dot"] {
  opacity: 0.75;
  color: #00753A;
  /* Verde TerraVix */
  transform: scale(1.15);
}

/* Active State - Dot completamente visible con micro-bounce */
.tvx-sidebar-item.is-active .tvx-sidebar-item__icon[data-lucide="circle-dot"] {
  opacity: 1;
  color: #00753A;
  /* Verde TerraVix activo */
  transform: scale(1.1);
  animation: dot-pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes dot-pulse {

  0%,
  100% {
    transform: scale(1.1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

/* Dark Mode - Ajuste de contraste para circle-dot */
@media (prefers-color-scheme: dark) and (max-width: 0px) { /* Tema oscuro deshabilitado: la app siempre usa tema claro */
  .tvx-sidebar-item__icon[data-lucide="circle-dot"] {
    opacity: 0.4;
  }

  .tvx-sidebar-item:hover .tvx-sidebar-item__icon[data-lucide="circle-dot"] {
    opacity: 0.7;
    color: #FC8181;
    /* Green 400 - Better contrast on dark */
  }

  .tvx-sidebar-item.is-active .tvx-sidebar-item__icon[data-lucide="circle-dot"] {
    opacity: 0.9;
    color: #FC8181;
  }
}

/* ============================================================================
   BULLETS GENÉRICOS - Para submenús (nivel 2+)
   ============================================================================ */
/* Bullets ocupan la MISMA columna de 16px que los iconos */
.tvx-sidebar-item__bullet {
  flex-shrink: 0;
  width: 16px;
  /* MISMA anchura que icono */
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  opacity: 0.7;
  transition: all 150ms ease;
  margin-right: 0;
  /* Gap aplicado por el parent */
}

/* Hover/Active states aumentan visibilidad del bullet */
.tvx-sidebar-item:hover .tvx-sidebar-item__bullet,
.tvx-sidebar-item.is-active .tvx-sidebar-item__bullet {
  opacity: 1;
  color: var(--brand-500);
}

/* ----------------------------------------------------------------------------
   LABELS | Typography consistente
   ---------------------------------------------------------------------------- */
.tvx-sidebar-item__label {
  flex: 1;
  min-width: 0;
  /* CRÍTICO: permite text-overflow funcionar en flex child */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: inherit;
  letter-spacing: -0.01em;
}

/* Collapsed: Solo icono centrado */
.tvx-sidebar-enterprise.is-collapsed .tvx-sidebar-item--dashboard {
  justify-content: center;
  padding: 0;
}

.tvx-sidebar-enterprise.is-collapsed .tvx-sidebar-item__label {
  display: none;
}

/* ----------------------------------------------------------------------------
   SECCIONES - Favoritos, Aplicaciones | ENTERPRISE PROFESSIONAL v2.0
   ============================================================================
   Sistema de separación visual mejorado con dividers y spacing consistente
   ---------------------------------------------------------------------------- */
.tvx-sidebar__section {
  margin-bottom: 16px;
  /* Espacio consistente entre secciones */
}

/* Divider profesional entre secciones (excepto primera) */
.tvx-sidebar__section:not(:first-child) {
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  margin-top: 16px;
}

.tvx-sidebar__section-header {
  display: flex;
  align-items: center;
  gap: 6.4px;
  padding: 6.4px var(--tvx-sidebar-px);
  margin-bottom: 6.4px;
  /* Incrementado de 3.2px a 6.4px */
  position: relative;
}

.tvx-sidebar__section-title {
  flex: 1;
  font-family: var(--tvx-sidebar-font-family);
  font-size: var(--tvx-sidebar-font-overline);
  font-weight: 700;
  /* Más bold para mejor jerarquía */
  letter-spacing: 0;
  /* El chino no tiene mayusculas: no se usa text-transform */
  color: #64748B;
  /* Color más contrastante */
  user-select: none;
}

.tvx-sidebar__section-toggle {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 1.6px;
  border: none;
  background: none;
  color: var(--tvx-sidebar-text-muted);
  cursor: pointer;
  border-radius: 3.2px;
  transition: all 150ms;
}

.tvx-sidebar__section-toggle:hover {
  background: var(--tvx-sidebar-item-hover-bg);
  color: var(--tvx-sidebar-text-primary);
}

.tvx-sidebar__section-toggle svg {
  width: 100%;
  height: 100%;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tvx-sidebar__section.is-collapsed .tvx-sidebar__section-toggle svg {
  transform: rotate(-90deg);
}

.tvx-sidebar__section-action {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 1.6px;
  border: none;
  background: none;
  color: var(--tvx-sidebar-text-muted);
  cursor: pointer;
  border-radius: 3.2px;
  transition: all 150ms;
}

.tvx-sidebar__section-action:hover {
  background: var(--tvx-sidebar-item-hover-bg);
  color: var(--tvx-sidebar-item-active-rail);
}

/* Collapsed: Hide section headers */
.tvx-sidebar-enterprise.is-collapsed .tvx-sidebar__section-header {
  display: none;
}

/* ----------------------------------------------------------------------------
   ÍTEMS DE NAVEGACIÓN | ENTERPRISE PROFESSIONAL v2.0
   ============================================================================
   Sistema de alineación perfecto con grid consistente
   ---------------------------------------------------------------------------- */
.tvx-sidebar__section-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Sin gap para diseño más compacto */
  padding: 0 var(--tvx-sidebar-px);
  width: 100%;
  overflow: visible;
  /* Permitir que el contenido se expanda */
}

.tvx-sidebar__section.is-collapsed .tvx-sidebar__section-content {
  display: none;
}

.tvx-sidebar-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* FORZAR alineación izquierda */
  gap: 8px;
  /* Gap entre icon/bullet y label - reducido para más espacio */
  height: 33.6px;
  padding: 0 6.4px 0 6.4px;
  /* Padding reducido - más pegado a la izquierda */
  border: none;
  background: none;
  color: #0F172A;
  font-family: var(--tvx-sidebar-font-family);
  font-size: 11.2px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 6.4px;
  text-decoration: none;
  text-align: left;
  /* FORZAR texto alineado izquierda */
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  box-sizing: border-box;
  /* Asegurar que padding no afecte width */
}

.tvx-sidebar-item:hover {
  background: rgba(0, 140, 69, 0.05);
  /* Hover con tinte verde TerraVix */
  color: #0F172A;
  transform: translateX(1.6px);
  /* Microinteracción sutil */
}

/* Estado Activo - Diseño Profesional Mejorado */
.tvx-sidebar-item.is-active {
  background: linear-gradient(90deg, rgba(0, 140, 69,0.07) 0%, rgba(0, 140, 69,0.03) 100%);
  color: #00753A;
  /* Verde TerraVix */
  font-weight: 600;
}

/* Rail Indicador Activo - Más visible y profesional */
.tvx-sidebar-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2.4px;
  /* Más delgado y elegante */
  height: 22.4px;
  /* Más alto para mejor visibilidad */
  background: linear-gradient(180deg, #00A854 0%, #005F2F 100%);
  /* Gradiente verde */
  border-radius: 0 2.4px 2.4px 0;
  box-shadow: 0 0 6.4px rgba(15, 23, 42, 0.07);
  /* Glow sutil */
}

.tvx-sidebar-item:focus-visible {
  outline: 1.6px solid var(--tvx-sidebar-item-focus);
  outline-offset: 1.6px;
}

.tvx-sidebar-item.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.tvx-sidebar-item:hover .tvx-sidebar-item__icon {
  color: var(--tvx-sidebar-icon-active);
}

.tvx-sidebar-item.is-active .tvx-sidebar-item__icon {
  color: var(--tvx-sidebar-icon-active);
}

/* ----------------------------------------------------------------------------
   SUBNIVELES - Nivel 2 y 3 | ALINEACIÓN PERFECTA
   ============================================================================
   Sistema de indentación consistente basado en grid de iconos 16px
   ---------------------------------------------------------------------------- */

/* GRUPOS PADRES (Expandibles) - Diseño limpio y alineado */
.tvx-sidebar-item.has-children {
  padding-right: 9.6px;
  /* Más espacio para el chevron */
  padding-left: 9.6px;
  /* Alineación consistente con items normales */
  font-weight: 600;
  color: #0F172A;
}

.tvx-sidebar-item.has-children:hover {
  background: rgba(0, 140, 69, 0.04);
}

/* Indicador expandible más visible */
.tvx-sidebar-item.has-children.has-active-child {
  background: rgba(0, 140, 69, 0.04);
  color: #00753A;
}

.tvx-sidebar-item__chevron {
  flex-shrink: 0;
  width: 14.4px;
  /* Ligeramente más grande */
  height: 14.4px;
  color: #64748B;
  /* Color muted consistente */
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Transición más suave */
  margin-left: auto;
}

.tvx-sidebar-item.is-expanded .tvx-sidebar-item__chevron {
  transform: rotate(90deg);
  color: #00753A;
  /* Verde cuando está expandido */
}

/* NIVEL 2 - Hijos directos - Alineado con bullet bajo el icono padre */
.tvx-sidebar-item--level-2 {
  padding-left: 6.4px !important;
  /* Mismo padding que nivel 1 - bullet se alinea con icono padre */
  height: 30.4px;
  font-size: 11.2px;
  font-weight: 500;
  color: #475569;
  text-align: left !important;
}

.tvx-sidebar-item--level-2:hover {
  background: rgba(0, 140, 69, 0.04);
  color: #0F172A;
}

.tvx-sidebar-item--level-2.is-active {
  background: rgba(0, 140, 69, 0.07);
  color: #00753A;
  font-weight: 600;
  border-left: 2.4px solid #008C45;
  padding-left: 4px !important;
  /* Compensar borde - mantiene alineación */
}

.tvx-sidebar-item--level-2.is-active::before {
  display: none;
  /* Usar border-left */
}

/* NIVEL 3 - Nietos - Indentado 19.2px desde nivel 2 */
.tvx-sidebar-item--level-3 {
  padding-left: 25.6px !important;
  /* 6.4px base + 19.2px indent - clara jerarquía visual */
  height: 28.8px;
  font-size: 11px;
  font-weight: 500;
  color: #64748B;
  text-align: left !important;
}

.tvx-sidebar-item--level-3:hover {
  background: rgba(0, 140, 69, 0.04);
  color: #0F172A;
}

.tvx-sidebar-item--level-3.is-active {
  background: rgba(0, 140, 69, 0.07);
  color: #00753A;
  font-weight: 600;
  border-left: 2.4px solid #008C45;
  padding-left: 23.2px !important;
  /* Compensar borde - mantiene alineación */
}

.tvx-sidebar-item--level-3.is-active::before {
  display: none;
  /* Usar border-left */
}

/* NIVEL 4 - Bisnieto - Indentado 19.2px desde nivel 3 */
.tvx-sidebar-item--level-4 {
  padding-left: 44.8px !important;
  /* 6.4px + 19.2px + 19.2px = progresión consistente */
  height: 27.2px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-align: left !important;
}

.tvx-sidebar-item--level-4:hover {
  background: rgba(0, 140, 69, 0.04);
  color: var(--color-text);
}

.tvx-sidebar-item--level-4.is-active {
  background: rgba(0, 140, 69, 0.04);
  color: #00753A;
  font-weight: var(--fw-semibold);
  border-left: 1.6px solid #008C45;
  padding-left: 43.2px !important;
  /* Compensar borde */
}

.tvx-sidebar-item--level-4.is-active::before {
  display: none;
}

/* NIVEL 5 - Tataranieto - Indentado 19.2px desde nivel 4 */
.tvx-sidebar-item--level-5 {
  padding-left: 64px !important;
  /* 6.4px + 19.2px×3 = progresión consistente */
  height: 25.6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--color-text-light);
  text-align: left !important;
}

.tvx-sidebar-item--level-5:hover {
  background: rgba(0, 140, 69, 0.04);
  color: var(--color-text);
}

.tvx-sidebar-item--level-5.is-active {
  background: rgba(0, 140, 69, 0.04);
  color: #00753A;
  font-weight: var(--fw-semibold);
  border-left: 1.6px solid #008C45;
  padding-left: 62.4px !important;
}

.tvx-sidebar-item--level-5.is-active::before {
  display: none;
}

/* NIVEL 6+ - Sexta generación y superiores (catch-all) */
.tvx-sidebar-item--level-6,
.tvx-sidebar-item--level-7,
.tvx-sidebar-item--level-8,
.tvx-sidebar-item--level-9,
.tvx-sidebar-item--level-10,
.tvx-sidebar-item[class*="--level-"]:not([class*="--level-1"]):not([class*="--level-2"]):not([class*="--level-3"]):not([class*="--level-4"]):not([class*="--level-5"]) {
  padding-left: 83.2px !important;
  /* 6.4px + 19.2px×4 = máximo razonable */
  height: 25.6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--color-text-light);
  opacity: 0.85;
  text-align: left !important;
}

.tvx-sidebar-item--level-6:hover,
.tvx-sidebar-item--level-7:hover,
.tvx-sidebar-item--level-8:hover,
.tvx-sidebar-item--level-9:hover,
.tvx-sidebar-item--level-10:hover,
.tvx-sidebar-item[class*="--level-"]:not([class*="--level-1"]):not([class*="--level-2"]):not([class*="--level-3"]):not([class*="--level-4"]):not([class*="--level-5"]):hover {
  background: rgba(0, 140, 69, 0.04);
  color: var(--color-text);
  opacity: 1;
}

.tvx-sidebar-item--level-6.is-active,
.tvx-sidebar-item--level-7.is-active,
.tvx-sidebar-item--level-8.is-active,
.tvx-sidebar-item--level-9.is-active,
.tvx-sidebar-item--level-10.is-active,
.tvx-sidebar-item[class*="--level-"]:not([class*="--level-1"]):not([class*="--level-2"]):not([class*="--level-3"]):not([class*="--level-4"]):not([class*="--level-5"]).is-active {
  background: rgba(0, 140, 69, 0.04);
  color: #00753A;
  font-weight: var(--fw-semibold);
  border-left: 1.6px solid #008C45;
  padding-left: 136px;
  opacity: 1;
}

.tvx-sidebar-item--level-6.is-active::before,
.tvx-sidebar-item--level-7.is-active::before,
.tvx-sidebar-item--level-8.is-active::before,
.tvx-sidebar-item--level-9.is-active::before,
.tvx-sidebar-item--level-10.is-active::before,
.tvx-sidebar-item[class*="--level-"]:not([class*="--level-1"]):not([class*="--level-2"]):not([class*="--level-3"]):not([class*="--level-4"]):not([class*="--level-5"]).is-active::before {
  display: none;
}

/* ----------------------------------------------------------------------------
   BULLET POINTS - Indicadores visuales para jerarquía anidada
   ============================================================================
   Sistema de bullets profesional (niveles 2+):
   - Level 2: Bullet filled (●) - 8px
   - Level 3: Bullet circle (○) - 7.2px
   - Level 4: Bullet square (▪) - 6.4px
   - Level 5+: Bullet dash (–) - 8px
   ---------------------------------------------------------------------------- */

/* LEVEL 2 - Bullet filled (●) - MÁS VISIBLE */
.tvx-sidebar-item--level-2 .tvx-sidebar-item__bullet::before {
  content: '●';
  font-size: 6.4px;
  line-height: 1;
  color: #64748B;
  font-weight: 600;
}

/* LEVEL 3 - Bullet circle (○) - DISTINTIVO */
.tvx-sidebar-item--level-3 .tvx-sidebar-item__bullet::before {
  content: '○';
  font-size: 6.4px;
  line-height: 1;
  color: #94A3B8;
  font-weight: 500;
}

/* LEVEL 4 - Bullet square (▪) - CLARO */
.tvx-sidebar-item--level-4 .tvx-sidebar-item__bullet::before {
  content: '▪';
  font-size: 5.6px;
  line-height: 1;
  color: #94A3B8;
  font-weight: 600;
}

/* LEVEL 5+ - Bullet dash (–) - SUTIL */
.tvx-sidebar-item--level-5 .tvx-sidebar-item__bullet::before,
.tvx-sidebar-item--level-6 .tvx-sidebar-item__bullet::before,
.tvx-sidebar-item[class*="--level-"] .tvx-sidebar-item__bullet::before {
  content: '–';
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  color: #CBD5E1;
}

/* ============================================================================
   GUÍAS VISUALES PARA JERARQUÍA - Líneas sutiles para claridad
   ============================================================================ */

/* Línea vertical conectora para mostrar jerarquía padre-hijo */
.tvx-sidebar-group__children::before {
  content: '';
  position: absolute;
  left: 13.6px;
  /* Centrado con el bullet/icono (16px/2 + 6.4px base) */
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
      transparent 0%,
      rgba(148, 163, 184, 0.15) 10%,
      rgba(148, 163, 184, 0.15) 90%,
      transparent 100%);
  pointer-events: none;
}

/* Espaciado entre items hermanos para mejor legibilidad */
.tvx-sidebar-group__children .tvx-sidebar-item,
.tvx-sidebar-group__children .tvx-sidebar-group {
  margin-top: 1.6px;
}

.tvx-sidebar-group__children .tvx-sidebar-item:first-child,
.tvx-sidebar-group__children .tvx-sidebar-group:first-child {
  margin-top: 3.2px;
  /* Un poco más de espacio después del padre */
}

.tvx-sidebar-group__children .tvx-sidebar-item:last-child,
.tvx-sidebar-group__children .tvx-sidebar-group:last-child {
  margin-bottom: 3.2px;
  /* Un poco más de espacio antes del siguiente */
}

/* ----------------------------------------------------------------------------
   GRUPOS EXPANDIBLES | Layout y animaciones
   ============================================================================
   Estructura: .tvx-sidebar-group > button + .tvx-sidebar-group__children
   ---------------------------------------------------------------------------- */
.tvx-sidebar-group {
  width: 100%;
  position: relative;
  /* Para líneas guía */
}

/* Contenedor de hijos - Con líneas guía para jerarquía visual */
.tvx-sidebar-group__children {
  width: 100%;
  position: relative;
  /* Para líneas guía */
}

/* Estado colapsado - Ocultar completamente con máxima prioridad */
.tvx-sidebar-group:not(.is-expanded)>.tvx-sidebar-group__children {
  display: none !important;
}

/* Estado expandido - Mostrar completamente */
.tvx-sidebar-group.is-expanded>.tvx-sidebar-group__children {
  display: block !important;
}

/* ----------------------------------------------------------------------------
   ACCIONES RÁPIDAS - Estrella, Menú Contextual
   ---------------------------------------------------------------------------- */
.tvx-sidebar-item__actions {
  display: none;
  align-items: center;
  gap: 3.2px;
  margin-left: auto;
}

.tvx-sidebar-item:hover .tvx-sidebar-item__actions {
  display: flex;
}

/* ============================================================================
   BOTÓN DE FAVORITO - PROFESSIONAL MINIMALIST DESIGN
   Inspirado en: Linear, Notion, Arc Browser
   Principios: Micro-interacciones sutiles, feedback visual claro, animaciones fluidas
   ============================================================================ */
.tvx-sidebar-item__action-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22.4px;
  height: 22.4px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--tvx-sidebar-text-muted);
  border-radius: 4.8px;
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  will-change: transform, background-color;
}

/* Hover State - Sutil y profesional */
.tvx-sidebar-item__action-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--tvx-sidebar-text-primary);
  transform: scale(1.05);
}

/* Dark Mode Hover */
@media (prefers-color-scheme: dark) and (max-width: 0px) { /* Tema oscuro deshabilitado: la app siempre usa tema claro */
  .tvx-sidebar-item__action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* Active/Focus State - Feedback táctil */
.tvx-sidebar-item__action-btn:active {
  transform: scale(0.95);
  transition-duration: 100ms;
}

.tvx-sidebar-item__action-btn:focus-visible {
  outline: 1.6px solid #008C45;
  outline-offset: 1.6px;
}

/* ============================================================================
   ESTADO FAVORITO - Golden Star con animación profesional
   ============================================================================ */
.tvx-sidebar-item__action-btn.is-favorite {
  color: #F59E0B;
  /* Amber 500 - Universal gold standard */
}

/* Hover sobre favorito activo - Mantiene el dorado pero más brillante */
.tvx-sidebar-item__action-btn.is-favorite:hover {
  color: #FBBF24;
  /* Amber 400 - Brighter gold */
  background: rgba(245, 158, 11, 0.08);
  transform: scale(1.1) rotate(4deg);
  /* Micro-rotación para personalidad */
}

/* Active state - Bounce effect */
.tvx-sidebar-item__action-btn.is-favorite:active {
  transform: scale(0.9) rotate(-2deg);
}

/* Dark Mode - Ajuste de contraste para favoritos */
@media (prefers-color-scheme: dark) and (max-width: 0px) { /* Tema oscuro deshabilitado: la app siempre usa tema claro */
  .tvx-sidebar-item__action-btn.is-favorite {
    color: #FCD34D;
    /* Amber 300 - Better contrast on dark */
  }

  .tvx-sidebar-item__action-btn.is-favorite:hover {
    color: #FDE68A;
    /* Amber 200 - Lighter on hover */
    background: rgba(252, 211, 77, 0.12);
  }
}

/* Icono SVG - Tamaño óptimo y transiciones suaves */
.tvx-sidebar-item__action-btn svg {
  width: 12.8px;
  height: 12.8px;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Animación de fill cuando se marca favorito */
.tvx-sidebar-item__action-btn.is-favorite svg {
  animation: star-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes star-pop {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Disabled State - Profesional y accesible */
.tvx-sidebar-item__action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

.tvx-sidebar-item__action-btn:disabled:hover {
  background: transparent;
  color: var(--tvx-sidebar-text-muted);
}

/* ============================================================================
   BOTÓN DE ELIMINAR - MODO EDICIÓN PROFESIONAL
   Inspirado en: iOS delete animations, Material Design dismiss actions
   Principios: Destructive action clarity, smooth micro-interactions
   ============================================================================ */
.tvx-sidebar-item__remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22.4px;
  height: 22.4px;
  padding: 0;
  margin-left: auto;
  border: none;
  background: transparent;
  color: #EF4444;
  /* Red 500 - Destructive action color */
  border-radius: 4.8px;
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  opacity: 0.7;
  will-change: transform, background-color, opacity;
}

/* Hover State - Clear destructive intent */
.tvx-sidebar-item__remove-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
  /* Red 600 - Darker on hover */
  opacity: 1;
  transform: scale(1.1);
}

/* Active State - Press feedback */
.tvx-sidebar-item__remove-btn:active {
  transform: scale(0.95) rotate(-4deg);
  background: rgba(239, 68, 68, 0.15);
  transition-duration: 100ms;
}

/* Focus State - Accesibilidad */
.tvx-sidebar-item__remove-btn:focus-visible {
  outline: 1.6px solid #EF4444;
  outline-offset: 1.6px;
  opacity: 1;
}

/* Icono SVG - Smooth transitions */
.tvx-sidebar-item__remove-btn svg {
  width: 12.8px;
  height: 12.8px;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tvx-sidebar-item__remove-btn:hover svg {
  transform: rotate(90deg);
  /* Subtle rotation for visual interest */
}

/* Dark Mode Adjustments */
@media (prefers-color-scheme: dark) and (max-width: 0px) { /* Tema oscuro deshabilitado: la app siempre usa tema claro */
  .tvx-sidebar-item__remove-btn {
    color: #F87171;
    /* Red 400 - Better contrast on dark */
  }

  .tvx-sidebar-item__remove-btn:hover {
    background: rgba(248, 113, 113, 0.15);
    color: #FCA5A5;
    /* Red 300 - Lighter on hover */
  }
}

/* Disabled State */
.tvx-sidebar-item__remove-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none !important;
}

.tvx-sidebar-item__remove-btn:disabled:hover {
  background: transparent;
  color: #EF4444;
}

.tvx-sidebar-item__remove-btn:active {
  transform: scale(0.95);
}

.tvx-sidebar-item__remove-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.tvx-sidebar-item__remove-btn svg {
  width: 14.4px;
  height: 14.4px;
}

/* ----------------------------------------------------------------------------
   BADGES - Contador, Estado
   ---------------------------------------------------------------------------- */
.tvx-sidebar-item__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4.8px;
  background: var(--tvx-sidebar-item-active-rail);
  color: #FFFFFF;
  font-size: var(--tvx-sidebar-font-overline);
  /* 8.8px del theme */
  font-weight: var(--tvx-sidebar-font-weight-semibold);
  border-radius: 7999.2px;
  margin-left: auto;
}

.tvx-sidebar-item__badge--secondary {
  background: var(--tvx-sidebar-text-muted);
}

.tvx-sidebar-item__badge--success {
  background: #16A34A;
}

.tvx-sidebar-item__badge--warning {
  background: #EA580C;
}

/* ----------------------------------------------------------------------------
   EMPTY STATE - Sin resultados de búsqueda
   ---------------------------------------------------------------------------- */
.tvx-sidebar__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25.6px 12.8px;
  text-align: center;
}

.tvx-sidebar__empty-icon {
  width: 38.4px;
  height: 38.4px;
  color: var(--tvx-sidebar-text-muted);
  margin-bottom: 9.6px;
}

.tvx-sidebar__empty-title {
  font-family: var(--tvx-sidebar-font-family);
  font-size: var(--tvx-sidebar-font-label);
  /* 10.4px del theme */
  font-weight: var(--tvx-sidebar-font-weight-semibold);
  color: var(--tvx-sidebar-text-primary);
  margin-bottom: 3.2px;
}

.tvx-sidebar__empty-text {
  font-family: var(--tvx-sidebar-font-family);
  font-size: var(--tvx-sidebar-font-label);
  /* 10.4px del theme */
  color: var(--tvx-sidebar-text-muted);
  margin-bottom: 12.8px;
}

.tvx-sidebar__empty-cta {
  padding: 6.4px 12.8px;
  border: 1px solid var(--tvx-sidebar-item-active-rail);
  background: none;
  color: var(--tvx-sidebar-item-active-rail);
  font-family: var(--tvx-sidebar-font-family);
  font-size: var(--tvx-sidebar-font-label);
  /* 10.4px del theme */
  font-weight: var(--tvx-sidebar-font-weight-semibold);
  border-radius: 4.8px;
  cursor: pointer;
  transition: all 150ms;
}

.tvx-sidebar__empty-cta:hover {
  background: var(--tvx-sidebar-item-active-rail);
  color: #FFFFFF;
}

/* ----------------------------------------------------------------------------
   FAVORITOS - Ver Más
   ---------------------------------------------------------------------------- */
.tvx-sidebar__favorites-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.4px;
  height: 25.6px;
  margin-top: 3.2px;
  padding: 0 9.6px;
  border: none;
  background: none;
  color: var(--tvx-sidebar-item-active-rail);
  font-family: var(--tvx-sidebar-font-family);
  font-size: 11px;
  font-weight: 600;
  border-radius: 4.8px;
  cursor: pointer;
  transition: all 150ms;
  width: 100%;
}

.tvx-sidebar__favorites-more:hover {
  background: var(--tvx-sidebar-item-hover-bg);
}

.tvx-sidebar__favorites-more svg {
  width: 12.8px;
  height: 12.8px;
  transition: transform 200ms;
}

.tvx-sidebar__favorites-more.is-expanded svg {
  transform: rotate(180deg);
}

/* ----------------------------------------------------------------------------
   FLYOUT - Menú emergente en modo colapsado
   ---------------------------------------------------------------------------- */
.tvx-sidebar__flyout {
  position: fixed;
  left: var(--tvx-sidebar-width-collapsed);
  min-width: 160px;
  max-width: 224px;
  background: var(--tvx-sidebar-bg);
  border: 1px solid var(--tvx-sidebar-border);
  border-radius: 6.4px;
  box-shadow: 0 8px 12px -2.4px rgba(0, 0, 0, 0.1), 0 3.2px 4.8px -1.6px rgba(0, 0, 0, 0.05);
  padding: 6.4px;
  z-index: 1050;
  opacity: 0;
  transform: translateX(-6.4px);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.tvx-sidebar__flyout.is-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

.tvx-sidebar__flyout-title {
  padding: 6.4px 9.6px;
  font-family: var(--tvx-sidebar-font-family);
  font-size: var(--tvx-sidebar-font-overline);
  font-weight: 650;
  letter-spacing: 0;
  /* Sin mayusculas ni letter-spacing: no aportan jerarquia en chino y el
     espaciado entre glifos CJK perjudica la lectura */
  color: var(--tvx-sidebar-text-muted);
  border-bottom: 1px solid var(--tvx-sidebar-border);
  margin-bottom: 3.2px;
}

/* ----------------------------------------------------------------------------
   RESPONSIVE - MOBILE/TABLET OFF-CANVAS DRAWER
   ============================================================================
   Comportamiento:
   - Sidebar funciona como drawer lateral
   - Ancho: 88% del viewport (min 256px, máx 304px)
   - Overlay con blur y close on tap
   - Focus trap y accesibilidad completa
   - Swipe gestures para abrir/cerrar
   ---------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tvx-sidebar-enterprise {
    position: fixed;
    top: 0;
    /* Drawer ocupa TODA la altura desde arriba, tapando el header */
    left: 0;
    bottom: 0;
    width: 90vw;
    min-width: 240px;
    max-width: 288px;
    transform: translateX(-100%);
    box-shadow: none;
    transition: transform 150ms cubic-bezier(0.4, 0, 1, 1),
      /* Cierre rápido */
      box-shadow 150ms cubic-bezier(0.4, 0, 1, 1);
    z-index: 1002;
    /* POR ENCIMA del header mobile (1001) y todo lo demás */
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0 16px 16px 0;
    /* Bordes redondeados a la derecha */
    border-right: none;
    display: flex;
    flex-direction: column;
    /* CRÍTICO: Layout vertical para mobile */
    /* Shadow profesional cuando está abierto */
    will-change: transform;
  }

  /* Estado Abierto en Mobile - Transición más suave al abrir */
  .tvx-sidebar-enterprise.is-open {
    transform: translateX(0);
    box-shadow: 0 19.2px 38.4px rgba(16, 24, 40, 0.18),
      0 6.4px 12.8px rgba(16, 24, 40, 0.12);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
      /* Apertura más suave */
      box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* En mobile, forzar que TODO el contenido sea visible cuando está abierto */
  .tvx-sidebar-enterprise.is-open .tvx-sidebar__search,
  .tvx-sidebar-enterprise.is-open .tvx-sidebar__nav,
  .tvx-sidebar-enterprise.is-open .tvx-sidebar__dashboard {
    display: flex !important;
    flex-direction: column !important;
    /* CRÍTICO: Forzar layout vertical */
    visibility: visible;
  }

  /* FORZAR layout vertical para secciones en mobile */
  .tvx-sidebar-enterprise .tvx-sidebar__nav,
  .tvx-sidebar-enterprise .tvx-sidebar__section,
  .tvx-sidebar-enterprise .tvx-sidebar__section-content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Asegurar que los ítems de menú estén apilados verticalmente */
  .tvx-sidebar-enterprise .tvx-sidebar__section-content {
    gap: 1.6px !important;
  }

  /* En mobile cerrado, ocultar todo el contenido (prevenir fugas visuales) */
  .tvx-sidebar-enterprise:not(.is-open) .tvx-sidebar__search,
  .tvx-sidebar-enterprise:not(.is-open) .tvx-sidebar__nav,
  .tvx-sidebar-enterprise:not(.is-open) .tvx-sidebar__dashboard {
    display: none !important;
    visibility: hidden;
  }

  /* Ajustar padding superior para que no interfiera con el header mobile */
  .tvx-sidebar__search {
    margin-top: 12.8px;
    /* Espacio superior en mobile */
  }

  /* Safe areas para iOS */
  .tvx-sidebar-enterprise {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ----------------------------------------------------------------------------
   OVERLAY - Mobile Drawer Background
   ---------------------------------------------------------------------------- */
.tvx-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(3.2px);
  -webkit-backdrop-filter: blur(3.2px);
  z-index: 999;
  /* Debajo del sidebar drawer (1000) pero encima de headers (40) */
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms cubic-bezier(0.4, 0, 1, 1);
  /* Cierre rápido, igual que sidebar */
  pointer-events: none;
  will-change: opacity;
}

.tvx-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Apertura más suave */
}

/* Focus trap en mobile */
@media (max-width: 1024px) {
  body.drawer-open {
    overflow: hidden;
    /* Bloquear scroll del body */
  }
}

/* ----------------------------------------------------------------------------
   DRAG & DROP - Reordenar Favoritos
   ---------------------------------------------------------------------------- */
.tvx-sidebar-item.is-dragging {
  opacity: 0.5;
  cursor: move;
}

.tvx-sidebar-item.is-drag-over::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1.6px;
  background: var(--tvx-sidebar-item-active-rail);
}

/* ----------------------------------------------------------------------------
   SEARCH HIGHLIGHT
   ---------------------------------------------------------------------------- */
.tvx-sidebar-item__label mark {
  background: rgba(0, 140, 69, 0.15);
  color: var(--tvx-sidebar-item-active-rail);
  font-weight: 600;
  padding: 0 1.6px;
  border-radius: 1.6px;
}

/* ----------------------------------------------------------------------------
   ACCESSIBILITY - Focus States & Keyboard Navigation
   ---------------------------------------------------------------------------- */
.tvx-sidebar-search__input:focus-visible,
.tvx-sidebar-item:focus-visible,
.tvx-sidebar__section-toggle:focus-visible,
.tvx-sidebar__section-action:focus-visible {
  outline: 1.6px solid var(--tvx-sidebar-item-active-rail);
  outline-offset: 1.6px;
}

/* Focus trap para drawer mobile */
@media (max-width: 1024px) {

  /* Skip link para regresar al contenido */
  .tvx-sidebar__close-mobile {
    position: absolute;
    top: 9.6px;
    right: 9.6px;
    width: 25.6px;
    height: 25.6px;
    padding: 4.8px;
    border: none;
    background: var(--tvx-sidebar-item-hover-bg);
    color: var(--tvx-sidebar-text-primary);
    border-radius: 4.8px;
    cursor: pointer;
    transition: all 150ms;
    z-index: 10;
  }

  .tvx-sidebar__close-mobile:hover {
    background: var(--tvx-sidebar-item-active-bg);
    color: var(--tvx-sidebar-item-active-rail);
  }

  .tvx-sidebar__close-mobile svg {
    width: 100%;
    height: 100%;
  }
}

/* ARIA live region para anuncios */
.tvx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ----------------------------------------------------------------------------
   SWIPE GESTURE SUPPORT - Touch interactions
   ---------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Visual feedback durante swipe */
  .tvx-sidebar-enterprise.is-swiping {
    transition: none;
    /* Desactivar transición durante swipe para seguimiento suave */
  }

  /* Edge swipe indicator - Indicador visual en el borde izquierdo */
  .tvx-swipe-edge-indicator {
    position: fixed;
    top: 50%;
    left: 0;
    width: 19.2px;
    height: 64px;
    transform: translateY(-50%);
    background: linear-gradient(to right,
        transparent,
        rgba(0, 140, 69, 0.15));
    opacity: 0;
    transition: opacity 200ms;
    pointer-events: none;
    z-index: 45;
  }

  .tvx-swipe-edge-indicator.is-active {
    opacity: 1;
  }
}

/* ----------------------------------------------------------------------------
   PERFORMANCE - Will-change for animations
   ---------------------------------------------------------------------------- */
.tvx-sidebar-enterprise,
.tvx-sidebar__section-toggle svg,
.tvx-sidebar-item__chevron,
.tvx-sidebar__flyout {
  will-change: transform;
}

/* Disable animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {

  .tvx-sidebar-enterprise,
  .tvx-sidebar__section-toggle svg,
  .tvx-sidebar-item__chevron,
  .tvx-sidebar__flyout,
  .tvx-sidebar-item {
    transition-duration: 0.01ms !important;
  }
}