/* System Icons CSS - Generado automáticamente Phase 1.b */
/* Touch-friendly 44px minimum + color variants */

/* === BASE ICON STYLES === */
.icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon-sm { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
.icon-lg { width: 56px; height: 56px; min-width: 56px; min-height: 56px; }

/* === COLOR VARIANTS === */
.icon-primary { 
  background-image: url('/icons/primary/menu.svg'); 
  color: #FF6B9D;
}
.icon-secondary { 
  background-image: url('/icons/secondary/menu.svg'); 
  color: #4ECDC4;
}
.icon-neutral { 
  background-image: url('/icons/neutral/menu.svg'); 
  color: #6B7280;
}
.icon-success { 
  background-image: url('/icons/success/menu.svg'); 
  color: #10B981;
}
.icon-warning { 
  background-image: url('/icons/warning/menu.svg'); 
  color: #F59E0B;
}
.icon-error { 
  background-image: url('/icons/error/menu.svg'); 
  color: #EF4444;
}

/* === SPECIFIC ICONS === */

/* Menú hamburguesa */
.icon-menu-primary { background-image: url('/icons/primary/menu.svg'); }
.icon-menu-secondary { background-image: url('/icons/secondary/menu.svg'); }
.icon-menu-neutral { background-image: url('/icons/neutral/menu.svg'); }
.icon-menu-success { background-image: url('/icons/success/menu.svg'); }
.icon-menu-warning { background-image: url('/icons/warning/menu.svg'); }
.icon-menu-error { background-image: url('/icons/error/menu.svg'); }
/* Buscar productos */
.icon-search-primary { background-image: url('/icons/primary/search.svg'); }
.icon-search-secondary { background-image: url('/icons/secondary/search.svg'); }
.icon-search-neutral { background-image: url('/icons/neutral/search.svg'); }
.icon-search-success { background-image: url('/icons/success/search.svg'); }
.icon-search-warning { background-image: url('/icons/warning/search.svg'); }
.icon-search-error { background-image: url('/icons/error/search.svg'); }
/* Favoritos */
.icon-heart-primary { background-image: url('/icons/primary/heart.svg'); }
.icon-heart-secondary { background-image: url('/icons/secondary/heart.svg'); }
.icon-heart-neutral { background-image: url('/icons/neutral/heart.svg'); }
.icon-heart-success { background-image: url('/icons/success/heart.svg'); }
.icon-heart-warning { background-image: url('/icons/warning/heart.svg'); }
.icon-heart-error { background-image: url('/icons/error/heart.svg'); }
/* Carrito de compras */
.icon-cart-primary { background-image: url('/icons/primary/cart.svg'); }
.icon-cart-secondary { background-image: url('/icons/secondary/cart.svg'); }
.icon-cart-neutral { background-image: url('/icons/neutral/cart.svg'); }
.icon-cart-success { background-image: url('/icons/success/cart.svg'); }
.icon-cart-warning { background-image: url('/icons/warning/cart.svg'); }
.icon-cart-error { background-image: url('/icons/error/cart.svg'); }
/* Perfil de usuario */
.icon-user-primary { background-image: url('/icons/primary/user.svg'); }
.icon-user-secondary { background-image: url('/icons/secondary/user.svg'); }
.icon-user-neutral { background-image: url('/icons/neutral/user.svg'); }
.icon-user-success { background-image: url('/icons/success/user.svg'); }
.icon-user-warning { background-image: url('/icons/warning/user.svg'); }
.icon-user-error { background-image: url('/icons/error/user.svg'); }
/* Filtrar productos */
.icon-filter-primary { background-image: url('/icons/primary/filter.svg'); }
.icon-filter-secondary { background-image: url('/icons/secondary/filter.svg'); }
.icon-filter-neutral { background-image: url('/icons/neutral/filter.svg'); }
.icon-filter-success { background-image: url('/icons/success/filter.svg'); }
.icon-filter-warning { background-image: url('/icons/warning/filter.svg'); }
.icon-filter-error { background-image: url('/icons/error/filter.svg'); }
/* Valoración/Rating */
.icon-star-primary { background-image: url('/icons/primary/star.svg'); }
.icon-star-secondary { background-image: url('/icons/secondary/star.svg'); }
.icon-star-neutral { background-image: url('/icons/neutral/star.svg'); }
.icon-star-success { background-image: url('/icons/success/star.svg'); }
.icon-star-warning { background-image: url('/icons/warning/star.svg'); }
.icon-star-error { background-image: url('/icons/error/star.svg'); }
/* Inicio */
.icon-home-primary { background-image: url('/icons/primary/home.svg'); }
.icon-home-secondary { background-image: url('/icons/secondary/home.svg'); }
.icon-home-neutral { background-image: url('/icons/neutral/home.svg'); }
.icon-home-success { background-image: url('/icons/success/home.svg'); }
.icon-home-warning { background-image: url('/icons/warning/home.svg'); }
.icon-home-error { background-image: url('/icons/error/home.svg'); }
/* Confirmación */
.icon-check-primary { background-image: url('/icons/primary/check.svg'); }
.icon-check-secondary { background-image: url('/icons/secondary/check.svg'); }
.icon-check-neutral { background-image: url('/icons/neutral/check.svg'); }
.icon-check-success { background-image: url('/icons/success/check.svg'); }
.icon-check-warning { background-image: url('/icons/warning/check.svg'); }
.icon-check-error { background-image: url('/icons/error/check.svg'); }
/* Cerrar */
.icon-close-primary { background-image: url('/icons/primary/close.svg'); }
.icon-close-secondary { background-image: url('/icons/secondary/close.svg'); }
.icon-close-neutral { background-image: url('/icons/neutral/close.svg'); }
.icon-close-success { background-image: url('/icons/success/close.svg'); }
.icon-close-warning { background-image: url('/icons/warning/close.svg'); }
.icon-close-error { background-image: url('/icons/error/close.svg'); }

/* === INTERACTIVE STATES === */
.icon-button {
  @apply icon;
  cursor: pointer;
  border-radius: 8px;
  padding: 8px;
  transition: all 0.2s ease;
  background-size: 24px 24px;
  background-position: center;
  background-repeat: no-repeat;
}

.icon-button:hover {
  transform: scale(1.05);
  background-color: rgba(0,0,0,0.05);
}

.icon-button:active {
  transform: scale(0.95);
  background-color: rgba(0,0,0,0.1);
}

/* === ACCESSIBILITY === */
.icon-button:focus {
  outline: 2px solid #FF6B9D;
  outline-offset: 2px;
}

.icon[aria-hidden="false"] {
  /* Screen reader friendly */
}

/* === MOBILE BOTTOM NAV === */
.mobile-nav-icon {
  @apply icon-button;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 64px;
  padding: 8px 4px;
}

.mobile-nav-icon-text {
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  line-height: 1;
}

/* === RESPONSIVE HELPERS === */
@media (max-width: 768px) {
  .icon-responsive { @apply icon; }
  .icon-button-responsive { @apply icon-button; }
}

@media (min-width: 769px) {
  .icon-responsive { @apply icon-sm; }
  .icon-button-responsive { 
    @apply icon-button;
    width: 32px;
    height: 32px;
    padding: 4px;
  }
}