/* Barra de aplicaciones (apps-trons.js). Arriba a la izquierda; el HUD vive a la derecha. */
.apps-trons {
  position: fixed; z-index: 7; top: 18px; left: 22px;
  display: flex; align-items: flex-start; gap: 18px;
  font-family: 'Archivo', Arial, sans-serif;
}
.apps-trons-app {
  --app-color: #21dae9;
  display: grid; justify-items: center; gap: 6px; width: 96px;
  color: #cfd6d0; text-decoration: none; text-align: center;
  opacity: .62; transition: opacity .3s, transform .3s;
}
.apps-trons-app img {
  display: block; width: 72px; height: 72px; object-fit: contain;
  filter: drop-shadow(0 4px 10px #000a);
  transition: filter .35s, transform .35s;
}
.apps-trons-app.con-tarjeta img { border-radius: 14px; background: #fff; padding: 4px; }
.apps-trons-app span {
  font: 600 10px/1.25 'Archivo', Arial, sans-serif; letter-spacing: .06em;
  text-transform: uppercase; text-shadow: 0 1px 8px #000;
}
.apps-trons-app:hover, .apps-trons-app:focus-visible { opacity: 1; transform: translateY(-2px); }
.apps-trons-app:focus-visible { outline: 2px solid var(--app-color); outline-offset: 4px; border-radius: 6px; }

/* La aplicación de la página actual: plena y con resplandor que respira. */
.apps-trons-app.activa { opacity: 1; color: #fff; }
.apps-trons-app.activa img { animation: apps-trons-resplandor 2.6s ease-in-out infinite; }
.apps-trons-app.activa span { text-shadow: 0 0 10px var(--app-color), 0 1px 8px #000; }
@keyframes apps-trons-resplandor {
  0%, 100% { filter: drop-shadow(0 0 6px var(--app-color)) drop-shadow(0 0 14px var(--app-color)); }
  50%      { filter: drop-shadow(0 0 10px var(--app-color)) drop-shadow(0 0 26px var(--app-color)); }
}

@media (max-width: 700px) {
  /* En móvil el HUD (Inicio, capítulo, Ajustes) ocupa casi todo el ancho de arriba:
     la barra va justo debajo para no taparlo. */
  .apps-trons { top: 70px; left: 14px; gap: 10px; }
  .apps-trons-app { width: 52px; }
  .apps-trons-app img { width: 44px; height: 44px; }
  .apps-trons-app.con-tarjeta img { border-radius: 9px; padding: 3px; }
  .apps-trons-app span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .apps-trons-app.activa img { animation: none; filter: drop-shadow(0 0 8px var(--app-color)) drop-shadow(0 0 20px var(--app-color)); }
}