/**
 * ICON FIXES - Corrección de iconos de Bootstrap Icons
 * Version: 1.0.0
 * Fecha: 2025-10-20
 *
 * PROBLEMA CORREGIDO:
 * - Icono de código de barras (bi-upc-scan) mostraba un icono incorrecto
 * - Conflictos con CSS que sobrescribía el contenido de los iconos
 */

/* =============================================
   1. RESETEAR SOBRESCRITURAS INCORRECTAS
   ============================================= */

/* Permitir que Bootstrap Icons use su propio contenido */
/* IMPORTANTE: NO usar content:normal porque previene que los iconos se muestren */
/* Bootstrap Icons usa ::before con content para mostrar los iconos */

/* =============================================
   2. ASEGURAR CARGA CORRECTA DE BOOTSTRAP ICONS
   ============================================= */

/* Asegurar que la fuente Bootstrap Icons esté correctamente aplicada */
.bi {
  font-family: 'bootstrap-icons' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  display: inline-block !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* =============================================
   3. CORRECCIÓN ESPECÍFICA PARA BOTONES DEL NAVBAR
   ============================================= */

/* Botón de búsqueda - icono de lupa */
.sp-navbar__btn--search,
.sp-navbar__btn--search i.bi,
.sp-navbar__btn--search i.bi-search,
button[type="submit"][aria-label*="Buscar"],
button[type="submit"][aria-label*="Buscar"] i.bi {
  color: white !important;
}

.sp-navbar__btn--search i.bi,
.sp-navbar__btn--search i.bi-search,
button[type="submit"][aria-label*="Buscar"] i.bi {
  font-size: 1.5rem !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Botón de escaneo - estilos removidos, ahora se manejan en critical-mobile-fixes.css */
/* Estado normal: fondo semi-transparente con ícono blanco */
/* Estado activo: fondo blanco con ícono verde */

.sp-navbar__btn--scan i.bi,
.sp-navbar__btn--scan i.bi-qr-code-scan,
button[aria-label*="Escanear"] i.bi,
#tour2 i.bi {
  font-size: 1.5rem !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =============================================
   4. MEJORA DE BORDER-RADIUS (12px óptimo)
   ============================================= */

/* Actualizar border-radius de 10px a 12px para mejor UX */
.sp-navbar__btn,
.sp-navbar__btn--search,
.sp-navbar__btn--scan,
button[type="submit"][aria-label*="Buscar"],
button[aria-label*="Escanear"],
#tour2 {
  border-radius: 12px !important;
}

/* Desktop: mantener 12px también */
@media (min-width: 768px) {
  .sp-navbar__btn {
    border-radius: 12px !important;
  }
}

/* =============================================
   5. PREVENIR CONFLICTOS CON OTROS ESTILOS
   ============================================= */

/* Asegurar que los iconos no sean afectados por otros estilos */
.sp-navbar__btn i,
.sp-navbar__actions button i {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* CRÍTICO: Forzar visibilidad de iconos Bootstrap */
.bi-search::before,
.bi-qr-code-scan::before {
  display: inline-block !important;
  font-family: 'bootstrap-icons' !important;
  speak: none !important;
}

/* Asegurar que los botones del navbar muestren sus iconos */
.sp-navbar__btn--search .bi-search,
.sp-navbar__btn--scan .bi-qr-code-scan {
  pointer-events: none; /* Los clicks van al botón, no al icono */
}

/* =============================================
   6. ESTADOS DE INTERACCIÓN
   ============================================= */

/* Asegurar que los iconos no cambien en hover/focus */
.sp-navbar__btn:hover i,
.sp-navbar__btn:focus i,
.sp-navbar__btn:active i {
  color: inherit !important;
  transform: none !important;
}

/* =============================================
   7. ALTERNATIVAS DE ICONOS (Si el problema persiste)
   ============================================= */

/*
  Si bi-upc-scan sigue sin funcionar, considera alternativas:

  Opción A: Usar bi-qr-code-scan (más moderno)
  <i class="bi bi-qr-code-scan" aria-hidden="true"></i>

  Opción B: Usar bi-upc (código de barras simple)
  <i class="bi bi-upc" aria-hidden="true"></i>

  Opción C: Usar bi-barcode
  <i class="bi bi-barcode" aria-hidden="true"></i>
*/

/* =============================================
   8. DEBUG HELPERS (Descomentar para debugging)
   ============================================= */

/*
.sp-navbar__btn--scan::after {
  content: " [SCAN ICON]";
  position: absolute;
  bottom: -20px;
  left: 0;
  font-size: 10px;
  color: red;
  background: yellow;
  padding: 2px 4px;
}

.bi-upc-scan::after {
  content: " [UPC-SCAN]";
  font-size: 10px;
  color: blue;
  background: yellow;
}
*/

/* =============================================
   9. VERIFICACIÓN DE CARGA DE FUENTE
   ============================================= */

/* Si la fuente no está cargando, mostrar placeholder */
@supports not (font-family: 'bootstrap-icons') {
  .bi::before {
    content: "📷" !important; /* Emoji de cámara como fallback */
    font-family: system-ui, -apple-system, sans-serif !important;
  }
}

/* =============================================
   10. ACCESIBILIDAD
   ============================================= */

/* Asegurar que sr-only funcione correctamente */
.sp-navbar__btn .sr-only,
.sp-navbar__btn .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =============================================
   11. CONTRASTE Y LEGIBILIDAD
   ============================================= */

/* High contrast mode */
@media (prefers-contrast: high) {
  .sp-navbar__btn--scan i {
    color: #0d4d28 !important;
    font-weight: bold !important;
  }

  .sp-navbar__btn--search i {
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5) !important;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .sp-navbar__btn--scan {
    background-color: rgba(255, 255, 255, 0.95) !important;
  }
}

/* =============================================
   12. PERFORMANCE
   ============================================= */

/* GPU acceleration para iconos animados */
.sp-navbar__btn i {
  will-change: transform !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

/* Reducir repaints */
@media (prefers-reduced-motion: reduce) {
  .sp-navbar__btn i {
    will-change: auto !important;
    transform: none !important;
  }
}