/* ==================== SISTEMA HÍBRIDO DE LOGOS ==================== */

/* Base para todos los logos/íconos */
.platform-logo {
  display: inline-block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  transition: all 0.2s ease;
}

/* ==================== LOGOS OFICIALES (Simple Icons) ==================== */
/* Logos a COLOR con filtro para hacerlos gris claro */
.platform-logo-official {
  /* Convertir a gris claro monocromático */
  filter: grayscale(100%) brightness(1.8) contrast(0.8);
}

.platform-logo-official:hover {
  /* Al hover: más brillo */
  filter: grayscale(100%) brightness(2.2) contrast(0.9);
  transform: scale(1.1);
}

/* ==================== ÍCONOS RETROARCH ==================== */
/* Ya vienen en monocromo, solo ajustar brillo */
.platform-logo-icon {
  /* Ajustar brillo para gris claro */
  filter: brightness(0) saturate(100%) invert(80%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.platform-logo-icon:hover {
  /* Al hover: más claro */
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
  transform: scale(1.1);
}

/* ==================== CONTEXTOS ESPECÍFICOS ==================== */

/* Para el listado de plataformas */
.platform-item .platform-logo {
  margin-right: 12px;
  width: 28px;
  height: 28px;
}

/* Para cards de juegos */
.game-card .platform-logo,
.game-card-home .platform-logo {
  width: 20px;
  height: 20px;
}

/* Para el home - cards clásicos */
.classic-card-home .platform-logo {
  width: 18px;
  height: 18px;
}

/* Para búsqueda global */
.global-search-result .platform-logo {
  width: 22px;
  height: 22px;
  margin-right: 8px;
}

/* ==================== FALLBACK EMOJI ==================== */
.platform-icon-emoji {
  display: inline-block;
  font-size: 24px;
  line-height: 1;
  vertical-align: middle;
}

/* ==================== CONTENEDOR ==================== */
.platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
  .platform-logo {
    width: 20px;
    height: 20px;
  }
  
  .platform-item .platform-logo {
    width: 24px;
    height: 24px;
  }
  
  .platform-icon-emoji {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .platform-logo {
    width: 18px;
    height: 18px;
  }
  
  .platform-item .platform-logo {
    width: 22px;
    height: 22px;
  }
}

/* ==================== DARK MODE ==================== */

@media (prefers-color-scheme: dark) {
  .platform-logo-official {
    /* Logos oficiales más brillantes en dark mode */
    filter: grayscale(100%) brightness(2.0) contrast(0.85);
  }
  
  .platform-logo-official:hover {
    filter: grayscale(100%) brightness(2.5) contrast(0.95);
  }
  
  .platform-logo-icon {
    /* Íconos RetroArch más brillantes */
    filter: brightness(0) saturate(100%) invert(90%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(95%);
  }
  
  .platform-logo-icon:hover {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(110%) contrast(100%);
  }
}

/* ==================== LOADING STATE ==================== */

.platform-logo[src=""] {
  opacity: 0.3;
  animation: logo-pulse 1.5s ease-in-out infinite;
}

@keyframes logo-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* ==================== ERROR STATE ==================== */

.platform-logo:not([src]),
.platform-logo[src=""] {
  display: none;
}

/* ==================== ACCESIBILIDAD ==================== */

.platform-logo:focus {
  outline: 2px solid var(--primary-color, #6366f1);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==================== PERFORMANCE ==================== */

.platform-logo {
  will-change: transform, filter;
}

/* Reducir animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .platform-logo {
    transition: none;
  }
  
  .platform-logo:hover {
    transform: none;
  }
  
  .logo-pulse {
    animation: none;
  }
}

/* ==================== TOOLTIPS (Opcional) ==================== */

.platform-logo[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
}