/* ============================================================================
   SIDEBAR DRAWER ANIMATIONS - TERRAVIX v4.1
   ============================================================================
   Animaciones y efectos visuales adicionales para el sidebar drawer
   - Swipe indicators
   - Loading states
   - Micro-interactions
   ============================================================================ */

/* ----------------------------------------------------------------------------
   SWIPE EDGE INDICATOR - Visual cue para abrir drawer
   ---------------------------------------------------------------------------- */
.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(40, 167, 69, 0.2) 60%,
    rgba(40, 167, 69, 0.3)
  );
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 45;
  border-radius: 0 9.6px 9.6px 0;
}

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

/* Variante con pulso suave */
@keyframes swipe-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(-50%) translateX(0);
  }
  50% {
    opacity: 0.6;
    transform: translateY(-50%) translateX(3.2px);
  }
}

.tvx-swipe-edge-indicator.is-pulsing {
  animation: swipe-pulse 2s ease-in-out infinite;
}

/* ----------------------------------------------------------------------------
   SIDEBAR LOADING STATE
   ---------------------------------------------------------------------------- */
.tvx-sidebar__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25.6px 12.8px;
  gap: 9.6px;
}

.tvx-sidebar__loading-spinner {
  width: 25.6px;
  height: 25.6px;
  border: 2.4px solid var(--tvx-sidebar-border);
  border-top-color: var(--tvx-sidebar-item-active-rail);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
}

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

.tvx-sidebar__loading-text {
  font-family: var(--tvx-sidebar-font-family);
  font-size: var(--tvx-sidebar-font-label);
  color: var(--tvx-sidebar-text-muted);
  margin: 0;
}

/* ----------------------------------------------------------------------------
   MOBILE CLOSE BUTTON - Fixed en esquina superior derecha
   ---------------------------------------------------------------------------- */
.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 cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

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

.tvx-sidebar__close-mobile:active {
  transform: rotate(90deg) scale(0.95);
}

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

/* Solo visible en mobile cuando drawer está abierto */
@media (min-width: 1025px) {
  .tvx-sidebar__close-mobile {
    display: none;
  }
}

/* ----------------------------------------------------------------------------
   ITEM MICRO-INTERACTIONS
   ---------------------------------------------------------------------------- */
/* Ripple effect al hacer click */
.tvx-sidebar-item::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--tvx-sidebar-item-active-rail);
  opacity: 0.2;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease-out, height 0.4s ease-out;
  pointer-events: none;
}

.tvx-sidebar-item:active::after {
  width: 160px;
  height: 160px;
}

/* Hover effect en favorito */
.tvx-sidebar-item__action-btn.is-favorite {
  animation: favorite-pulse 0.6s ease-out;
}

@keyframes favorite-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* ----------------------------------------------------------------------------
   SECTION COLLAPSE ANIMATION - Suave y natural
   ---------------------------------------------------------------------------- */
.tvx-sidebar__section-content {
  overflow: hidden;
  transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

.tvx-sidebar__section.is-collapsed .tvx-sidebar__section-content {
  max-height: 0 !important;
  opacity: 0;
}

/* ----------------------------------------------------------------------------
   BADGE ANIMATIONS - Contador de notificaciones
   ---------------------------------------------------------------------------- */
.tvx-sidebar-item__badge {
  animation: badge-pop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes badge-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Actualización de badge (nuevo número) */
.tvx-sidebar-item__badge.is-updating {
  animation: badge-update 0.4s ease-out;
}

@keyframes badge-update {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.15);
  }
  50% {
    transform: scale(0.95);
  }
  75% {
    transform: scale(1.05);
  }
}

/* ----------------------------------------------------------------------------
   SKELETON LOADING - Para ítems del menú
   ---------------------------------------------------------------------------- */
.tvx-sidebar-item--skeleton {
  pointer-events: none;
  opacity: 0.6;
}

.tvx-sidebar-item--skeleton .tvx-sidebar-item__icon,
.tvx-sidebar-item--skeleton .tvx-sidebar-item__label {
  background: linear-gradient(
    90deg,
    var(--tvx-sidebar-border) 25%,
    var(--tvx-sidebar-item-hover-bg) 50%,
    var(--tvx-sidebar-border) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 3.2px;
  color: transparent;
}

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

/* ----------------------------------------------------------------------------
   SMOOTH SCROLL - Para navegación larga
   ---------------------------------------------------------------------------- */
.tvx-sidebar__nav {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
}

/* Scroll shadow indicators */
.tvx-sidebar__nav::before,
.tvx-sidebar__nav::after {
  content: '';
  position: sticky;
  left: 0;
  right: 0;
  height: 6.4px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 200ms;
}

.tvx-sidebar__nav::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--tvx-sidebar-bg),
    transparent
  );
}

.tvx-sidebar__nav::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--tvx-sidebar-bg),
    transparent
  );
}

/* Mostrar shadows cuando hay scroll */
.tvx-sidebar__nav.has-scroll-top::before {
  opacity: 1;
}

.tvx-sidebar__nav.has-scroll-bottom::after {
  opacity: 1;
}

/* ----------------------------------------------------------------------------
   REDUCED MOTION - Accessibility
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tvx-sidebar-enterprise,
  .tvx-sidebar__section-toggle svg,
  .tvx-sidebar-item__chevron,
  .tvx-sidebar__close-mobile,
  .tvx-sidebar-item::after,
  .tvx-sidebar__section-content,
  .tvx-swipe-edge-indicator {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------------------------
   HIGH CONTRAST MODE - Accessibility
   ---------------------------------------------------------------------------- */
@media (prefers-contrast: high) {
  .tvx-sidebar-enterprise {
    border-right-width: 1.6px;
  }
  
  .tvx-sidebar-item.is-active {
    outline: 1.6px solid currentColor;
    outline-offset: -1.6px;
  }
  
  .tvx-sidebar-item:focus-visible {
    outline-width: 2.4px;
  }
}

/* ----------------------------------------------------------------------------
   PRINT STYLES - Ocultar sidebar al imprimir
   ---------------------------------------------------------------------------- */
@media print {
  .tvx-sidebar-enterprise,
  .tvx-overlay,
  .tvx-swipe-edge-indicator {
    display: none !important;
  }
}