/* ========================================================
   ESTILOS PERSONALIZADOS - FRANCISCO SOTELO PORTFOLIO
   ======================================================== */

/* Patrón de cuadrícula de fondo */
.bg-grid-pattern {
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(99, 102, 241, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
}

.dark .bg-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(99, 102, 241, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99, 102, 241, 0.08) 1px, transparent 1px);
}

/* Efecto de luces ambientales difusas */
.glow-blob {
  filter: blur(80px);
  pointer-events: none;
}

/* Transiciones fluidas para modo oscuro y cambios de estado optimizadas para alto rendimiento */
a, button, input, textarea, select, .theme-transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Barra de desplazamiento personalizada y estilizada */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.6);
}