/**
 * OPTIMIZACIONES CSS - Paginación y búsqueda instantánea
 * Enfocado en rendimiento: evitar repaints y reflows
 */

/* ============================================
   PREVENT LAYOUT SHIFTS
   ============================================ */

.nd-pagination-container,
.nd-news-grid,
.nd-search-section {
  contain: layout style paint;
}

/* ============================================
   INSTANT TRANSITIONS - 0.15s is imperceptible 
   ============================================ */

.nd-pagination-btn,
.nd-search-input {
  will-change: background-color, color, border-color, box-shadow, opacity;
  /* Usar cubic-bezier para transiciones más naturales */
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   DISABLE EXPENSIVE EFFECTS
   ============================================ */

/* Reducir animaciones costosas */
.nd-news-grid {
  /* Usar CSS Grid para mejor performance */
  display: grid;
  will-change: auto;
}

/* ============================================
   PRELOAD PAGINATION STYLES
   ============================================ */

/* Precalcular estados para evitar recálculos */
.nd-pagination-active {
  background: #004582 !important;
  color: #ffffff !important;
  border-color: #004582 !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 6px rgba(0, 69, 130, 0.4) !important;
}

/* ============================================
   OPTIMIZE LOADER 
   ============================================ */

#nd-loading {
  /* Usar will-change para animaciones */
  will-change: opacity;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#nd-loading.visible {
  opacity: 1;
}

/* ============================================
   REDUCE MOTION FOR SLOWER DEVICES
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .nd-pagination-btn,
  .nd-search-input,
  .nd-pagination-container,
  .nd-news-grid {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   MOBILE OPTIMIZATION - REDUCE COMPLEXITY
   ============================================ */

@media (max-width: 768px) {
  .nd-pagination-container {
    /* Reducir padding en móvil */
    padding: 0.5rem 0;
  }
  
  .nd-pagination-btn {
    /* Aumentar tamaño touch en móvil */
    min-height: 44px;
    min-width: 44px;
  }
  
  .nd-news-grid {
    /* Cambiar a single column para móvil */
    grid-template-columns: 1fr;
  }
}

/* ============================================
   SEARCH INPUT OPTIMIZATION
   ============================================ */

.nd-search-input {
  /* Optimizar para búsqueda instantánea */
  min-height: 44px;
  padding: 10px 15px;
  font-size: 16px; /* Prevenir zoom en iOS */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px;
  border: 1px solid #ddd;
  transition: all 0.15s ease;
}

.nd-search-input:focus {
  outline: none;
  border-color: #004582;
  box-shadow: 0 0 0 3px rgba(0, 69, 130, 0.1);
}

/* ============================================
   DEFER HEAVY ANIMATIONS
   ============================================ */

/* Usar requestAnimationFrame en lugar de setInterval */
@media (prefers-reduced-motion: no-preference) {
  .nd-pagination-btn:active {
    transform: scale(0.98);
    transition-duration: 0.05s;
  }
}

/* ============================================
   AVOID LAYOUT THRASHING
   ============================================ */

.nd-pagination-btn {
  /* Usar transform en lugar de left/right */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ============================================
   LAZY LOAD IMAGES
   ============================================ */

img[loading="lazy"] {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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

img[loading="lazy"].loaded {
  animation: none;
  background: none;
}

/* ============================================
   CLIENT-SIDE PAGINATION - CARDS BY PAGE
   ============================================ */

.nd-news-card-wrapper {
  display: grid;
  /* Propiedades para animación suave y rápida */
  opacity: 1;
  will-change: transform, opacity;
}

/* Transiciones para cambio de página del grid */
.nd-card-exit {
  opacity: 1;
  transform: translateY(0);
}

.nd-card-exit-active {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nd-card-enter {
  opacity: 0;
  transform: translateY(8px);
}

.nd-card-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.26s ease, transform 0.26s ease;
}

/* Grid sin animaciones */
.nd-news-grid {
  will-change: auto;
  transition: none;
  transform: none;
}

/* Optimización de renderizado para tarjetas */
.nd-news-card-wrapper .nd-card {
  contain: content;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
}

/* Preferencia de usuario para reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .nd-card-exit-active,
  .nd-card-enter-active {
    transition: none !important;
  }
}

/* Scroll smooth para mejor UX */
html {
  scroll-behavior: smooth;
}