/* --- CONFIGURACIÓN DE TAILWIND --- */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* Efectos de Cristal (Glassmorphism) */
  .glass-base {
    @apply bg-[rgba(251,251,253,0.7)] dark:bg-[#1c1c1e]/60 backdrop-blur-3xl border border-black/[0.05] dark:border-white/[0.05] shadow-[0_8px_32px_rgba(0,0,0,0.05)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)];
  }
  .glass-hover {
    @apply hover:bg-white/90 dark:hover:bg-[#2c2c2e]/80 transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)];
  }
  .glass-input {
    @apply bg-white/50 dark:bg-[#2c2c2e]/50 backdrop-blur-2xl border border-black/10 dark:border-white/10 text-[#1d1d1f] dark:text-white placeholder-[#86868b] focus:outline-none focus:border-[#c60c30] focus:ring-1 focus:ring-[#c60c30] rounded-2xl p-4 w-full transition-all;
  }
  
  /* --- Estilos del Menú DOCK --- */
  .nav-btn {
    /* Estado por defecto: Círculo perfecto (p-3.5) */
    @apply snap-center relative flex items-center justify-center p-3.5 rounded-full transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] text-[#86868b] hover:text-[#1d1d1f] dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/10;
  }
  
  /* Botón Activo: Cambia fondo pero mantiene tamaño circular */
  .nav-btn.active {
    @apply bg-[#1d1d1f] dark:bg-white text-white dark:text-[#1d1d1f] shadow-md dark:shadow-sm hover:bg-[#1d1d1f] dark:hover:bg-white;
  }
  
  /* Etiqueta de texto: Oculta por defecto */
  .nav-label {
    @apply max-w-0 opacity-0 ml-0 relative z-10 text-[0.9rem] font-semibold tracking-tight whitespace-nowrap overflow-hidden transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)];
  }

  /* Hover: Expande el botón a píldora y muestra el texto (Solo en PC/pantallas con mouse) */
  @media (hover: hover) {
    .nav-btn:hover {
      @apply px-5; 
    }
    .nav-btn:hover .nav-label {
      @apply max-w-[200px] opacity-100 ml-2.5; 
    }
  }
}

/* --- COMPORTAMIENTO DE SCROLL Y BARRAS --- */
html { 
  scroll-behavior: auto; /* Desactivado el smooth scroll nativo para que el cambio de tab sea instantáneo */
}

/* Scrollbar vertical */
.custom-scrollbar::-webkit-scrollbar { 
  width: 8px; 
}
.custom-scrollbar::-webkit-scrollbar-track { 
  background: rgba(128, 128, 128, 0.1); 
  border-radius: 10px; 
}
.custom-scrollbar::-webkit-scrollbar-thumb { 
  background: rgba(128, 128, 128, 0.3); 
  border-radius: 10px; 
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { 
  background: #c60c30; 
}

/* Ocultar scrollbar horizontal en el menú píldora de teléfonos */
.custom-scrollbar-hide::-webkit-scrollbar { 
  display: none; 
}
.custom-scrollbar-hide { 
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}

/* =========================================================
   PERSONALIZACIÓN FANCYBOX - ESTILO APPLE / GLASSMORPHISM
   ========================================================= */

/* 1. Fondo esmerilado (Glassmorphism) */
.fancybox__backdrop {
  background: rgba(29, 29, 31, 0.75) !important; /* Usa el color oscuro base de tu web con opacidad */
  backdrop-filter: blur(15px); /* Este es el secreto del efecto Apple */
  -webkit-backdrop-filter: blur(15px);
}

/* 2. Configuración general y color de carga */
.fancybox__container {
  --f-spinner-color-1: rgba(255, 255, 255, 0.1);
  --f-spinner-color-2: #c60c30; /* Tu rojo de acento para la animación de carga */
  font-family: inherit; /* Fuerza a Fancybox a usar la tipografía de tu web */
}

/* 3. Estilo de los botones (Cerrar, Flechas) */
.f-button {
  background: rgba(255, 255, 255, 0.1) !important; /* Fondo cristalino */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 50% !important; /* Botones perfectamente redondos */
  color: #f5f5f7 !important; /* Tu color de texto claro */
  transition: all 0.3s ease !important;
  margin: 8px; /* Separación de los bordes */
}

/* Efecto al pasar el mouse por los botones */
.f-button:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  transform: scale(1.05);
}

/* 4. Estilo del texto (Caption) inferior */
.fancybox__caption {
  font-weight: 500;
  font-size: 1.125rem; /* Texto un poco más grande y legible */
  color: #f5f5f7;
  padding-bottom: 2rem; /* Separación del borde inferior */
}