/**
 * Performance CSS - Loading states and visual feedback
 */

/* ========================================
   LOADING STATE - Navegación
   ======================================== */

body.navigating {
  cursor: wait;
}

body.navigating * {
  pointer-events: none;
}

body.navigating::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0d6efd, #0dcaf0, #0d6efd);
  background-size: 200% 100%;
  animation: loading-bar 1s ease-in-out infinite;
  z-index: 9999;
}

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

/* ========================================
   BUTTON LOADING STATE
   ======================================== */

button.loading,
.btn.loading {
  position: relative;
  color: transparent !important;
}

button.loading::after,
.btn.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid rgba(37,99,235,0.2);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

/* ========================================
   SKELETON LOADING - Placeholders
   ======================================== */

.skeleton {
  background: linear-gradient(90deg, #bcc3cd 25%, #cdd3dc 50%, #bcc3cd 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

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

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-text:last-child {
  width: 70%;
}

.skeleton-title {
  height: 1.5em;
  width: 40%;
  margin-bottom: 1em;
}

.skeleton-row {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.skeleton-cell {
  height: 1.2em;
}

.skeleton-cell:nth-child(1) { width: 30px; }
.skeleton-cell:nth-child(2) { flex: 2; }
.skeleton-cell:nth-child(3) { flex: 1; }
.skeleton-cell:nth-child(4) { flex: 1.5; }

/* ========================================
   INSTANT FEEDBACK - Hover states
   ======================================== */

tr[onclick] {
  transition: background-color 0.1s ease;
}

tr[onclick]:active {
  background-color: rgba(13, 110, 253, 0.2) !important;
}

/* ========================================
   SEARCH INDICATOR
   ======================================== */

.search-indicator {
  display: none;
  color: #6c757d;
  font-size: 0.875em;
}

.search-indicator::after {
  content: '...';
  animation: dots 1s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

/* ========================================
   OPTIMIZED TRANSITIONS
   ======================================== */

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

/* ========================================
   CONTENT VISIBILITY - Render optimization
   ======================================== */

.table tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: 0 50px;
}

/* ========================================
   WILL-CHANGE hints para animaciones
   ======================================== */

.sidebar,
.quote-cart-panel {
  will-change: transform;
}