/* 🔹 RESPONSIVE DESIGN - MOBILE-FIRST APPROACH 🔹 */

/* 
   BASE STYLES (Mobile < 576px) are already defined in style.css. 
   This file progressively enhances the UI for larger screens using min-width.
*/

/* 🔹 SMALL TABLETS / LARGE MOBILES (min-width: 576px) -> 36em */

/* 🔹 EXTRA SMALL DEVICES (max-width: 300px) */
@media (max-width: 300px) {
  .logo-img,
  #site-logo {
    height: 30px;
    max-width: 90px;
  }
}

/* 🔹 EXTRA SMALL DEVICES (max-width: 350px) */
@media (max-width: 350px) {
  .container {
    padding: 0 var(--spacing-xs);
  }

  .nav-container {
    padding: var(--spacing-xs) 0;
  }

  .logo-img,
  #site-logo {
    height: 28px; /* Reducir un poco más para pantallas muy estrechas */
    max-width: 85px;
  }
/**
  .nav-actions {
    gap: 2px;
    
    background-color: #0284B3;
    margin-top: -1.5rem; /* Ajuste para evitar solapamiento */
  }

  .cart-btn,
  .hamburger {
    padding: 4px;
    min-width: 28px;
    min-height: 28px;
    font-size: 0.9rem;
  }

  .search-btn {
    padding: 4px;
    font-size: 0.9rem;
  }

  /* Ajustes específicos para el perfil del desarrollador */
  #imagen_programador,
  .dev-avatar {
    width: 30px ; /* Prioridad máxima solicitada */
    height: 30px ;
    border-width: 1px;
  }

  .dev-profile {
    gap: 6px; /* Menor espacio entre imagen y texto */
  }

  .dev-name {
    font-size: 0.75rem; /* Texto más pequeño */
  }

  .dev-label {
    font-size: 0.55rem;
  }

  .developer-credit {
    padding: 4px 10px 4px 4px;
  }
  
  /* Full Screen Loader - Optimización para pantallas pequeñas */
  #initial-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    z-index: var(--z-loader);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
  }

  #initial-loader .spinner {
    width: 20px;
    height: 20px;
    border: 4px solid rgba(52, 152, 219, 0.3);
    border-radius: 50%;
    border-top-color: var(--secondary-color);
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 20px;
  }

  #initial-loader img {
    width: 200px;
    height: auto;
    margin-bottom: 20px;
    animation: pulse 2s infinite ease-in-out;
  }
}

@media (min-width: 36em) {
  .container {
    padding: 0 var(--spacing-lg);
  }

  .logo h1 {
    font-size: var(--font-size-2xl);
  }

  .carousel-container {
    height: 400px;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 🔹 TABLETS (min-width: 768px) -> 48em */
@media (min-width: 48em) {
  .hamburger {
    display: none;
  }

  .nav-menu {
    display: flex;
    position: static;
    flex-direction: row;
    width: auto;
    height: auto;
    padding: 0;
    box-shadow: none;
    background: transparent;
    gap: var(--spacing-lg);
  }

  .nav-link {
    border-bottom: none;
  }

  .search-container {
    display: flex;
  }

  .auth-buttons {
    display: flex;
  }

  .auth-buttons .btn span {
    display: inline;
  }

  .carousel-container {
    height: 450px;
  }

  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal-content {
    width: 80%;
    max-width: 600px;
  }
}

/* 🔹 DESKTOPS / LAPTOPS (min-width: 1024px) -> 64em */
@media (min-width: 64em) {
  .nav-menu {
    gap: var(--spacing-xl);
  }

  .carousel-container {
    height: 550px;
  }

  .carousel-caption h2 {
    font-size: var(--font-fluid-h1);
  }

  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 🔹 LARGE SCREENS (min-width: 1400px) -> 87.5em */
@media (min-width: 87.5em) {
  .container {
    max-width: 1400px;
  }

  .carousel-container {
    height: 650px;
  }
}

/* 🔹 ACCESSIBILITY & PREFERENCES */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Orientation Landscape (Compact Height) */
@media (max-height: 500px) and (orientation: landscape) {
  .carousel-container {
    height: 250px;
  }

  .carousel-caption p {
    display: none;
  }

  .modal-content {
    max-height: 85vh;
    overflow-y: auto;
  }
}

/* High Resolution Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}