/**
 * ============================================
 * THEME.CSS - Paleta neutra del sitio
 * ============================================
 *
 * Variables CSS que replican la paleta de Tailwind.
 * Uso: fondos, bordes y textos en popup.css y estilos inline
 * cuando no se usan clases de Tailwind.
 *
 * Modo claro:
 *   - Fondos claros: gray-soft, gray-light, white
 *   - Acentos/botones: gray-base, gray-deep
 *   - Hover botón gris: gray-hover
 *
 * Modo oscuro:
 *   - Fondo página: gray-darker
 *   - Paneles/cards: gray-dark
 *   - Acentos: gray-base, gray-mid
 */

:root {
  --gray-soft: #F5F5F5;
  --gray-light: #E6E6E6;
  --gray-mid: #B3B3B3;
  --gray-base: #8C8C8C;
  --gray-hover: #6E6E6E;
  --gray-deep: #4D4D4D;
  --gray-dark: #262626;
  --gray-darker: #121212;
}

/* ============================================
   ESTABILIZAR SCROLLBAR
   ============================================ */
/* Reserva espacio fijo para la scrollbar para evitar que el contenido se mueva */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

/* ============================================
   OPTIMIZACIÓN DE CARGA DE IMÁGENES (SHIMMER)
   ============================================ */

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

/* 
   Todos los contenedores de imágenes tienen el efecto shimmer
   como capa de fondo que se ve mientras la imagen carga.
   Usamos ::before para no interferir con el background de Tailwind.
*/
.aspect-square::before,
.proceso-paso-imagen-container::before,
.popup-como-paso-imagen-container::before,
.logo-container::before,
.inline-block:has(> img)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg, 
    #E0E0E0 25%, 
    #F5F5F5 50%, 
    #E0E0E0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  z-index: 0;
}

html.dark .aspect-square::before,
html.dark .proceso-paso-imagen-container::before,
html.dark .popup-como-paso-imagen-container::before,
html.dark .logo-container::before,
html.dark .inline-block:has(> img)::before {
  background: linear-gradient(
    90deg, 
    #1a1a1a 25%, 
    #333333 50%, 
    #1a1a1a 75%
  );
  background-size: 200% 100%;
}

/* Asegurar que los contenedores tengan position relative */
.aspect-square,
.proceso-paso-imagen-container,
.popup-como-paso-imagen-container,
.logo-container,
.inline-block:has(> img) {
  position: relative;
}

/* Cuando la imagen carga, ocultar el shimmer */
.aspect-square.shimmer-done::before,
.proceso-paso-imagen-container.shimmer-done::before,
.popup-como-paso-imagen-container.shimmer-done::before,
.logo-container.shimmer-done::before,
.inline-block.shimmer-done::before {
  display: none;
}

/* 
   Las imágenes empiezan invisibles y aparecen con fade-in
   cuando terminan de cargar.
   También incluimos transition para transform (hover effects).
   EXCEPCIÓN: .logo-navbar debe ser instantáneo (sin shimmer)
*/
img:not(.no-shimmer):not(.logo-navbar) {
  opacity: 0;
  transition: opacity 0.4s ease-in-out, transform 700ms ease-in-out;
}

img.cargada {
  opacity: 1 !important;
}

/* Fallback: las imágenes cargadas también quitan el shimmer propio si tuvieran */
img.cargada {
  background: none !important;
  animation: none !important;
}

/* 
   Excepción para cuando falla la carga
*/
img.error-carga {
  opacity: 1;
  background: var(--gray-light) !important;
  animation: none !important;
}

/* Las imágenes se posicionan por encima del fondo shimmer */
.aspect-square img,
.card-producto img,
.proceso-paso-imagen,
.popup-como-paso-imagen,
.logo-navbar,
.logo-hero {
  position: relative;
  z-index: 1;
}