/* BIFORC Estilos Industriales Dinámicos */
:root {
  --primary-color: #f59e0b;
  --primary-hover: #d97706;
  --primary-glow: rgba(245, 158, 11, 0.35);
  --bg-main: #0b0f19;
  --bg-card: #111827;
  --border-color: #1f2937;
  --font-family: 'Inter', system-ui, sans-serif;
}

/* Modo Claro si el usuario o cliente lo prefiere */
body.theme-light {
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --border-color: #e2e8f0;
  color: #0f172a;
}
body.theme-light .bg-brand-dark {
  background-color: #f1f5f9 !important;
}
body.theme-light .bg-brand-card {
  background-color: #ffffff !important;
}
body.theme-light .text-white {
  color: #0f172a !important;
}
body.theme-light .text-slate-300, body.theme-light .text-slate-400 {
  color: #475569 !important;
}
body.theme-light header {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Clases dinámicas aplicadas por el configurador */
.custom-primary-bg {
  background-color: var(--primary-color) !important;
}
.custom-primary-text {
  color: var(--primary-color) !important;
}
.custom-primary-border {
  border-color: var(--primary-color) !important;
}
.custom-primary-gradient {
  background-image: linear-gradient(to right, var(--primary-color), var(--primary-hover)) !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #0b0f19;
  color: #f1f5f9;
}

/* Patrón de textura industrial sutil */
.bg-industrial-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

.glow-yellow {
  box-shadow: 0 0 50px -10px rgba(245, 158, 11, 0.3);
}

.glow-yellow-sm {
  box-shadow: 0 0 20px -5px rgba(245, 158, 11, 0.4);
}

/* Borde acentuado de advertencia/maquinaria */
.industrial-border {
  border-left: 4px solid var(--biforc-yellow);
}

.diagonal-stripes {
  background: repeating-linear-gradient(
    -45deg,
    rgba(245, 158, 11, 0.15),
    rgba(245, 158, 11, 0.15) 10px,
    transparent 10px,
    transparent 20px
  );
}

/* Animaciones suaves */
@keyframes pulseSubtle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.pulse-btn {
  animation: pulseSubtle 3s infinite ease-in-out;
}

/* Modal */
.modal-backdrop {
  backdrop-filter: blur(8px);
}

/* Panel de personalización lateral */
#style-customizer-panel {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
}
#style-customizer-panel.is-open {
  transform: translateX(0) !important;
}
#style-customizer-panel.is-closed {
  transform: translateX(100%) !important;
}