.topbar{position:fixed;top:0;left:0;height:70px;width:100%;background:rgba(2,6,23,0.85);backdrop-filter:blur(14px);display:flex;justify-content:space-between;align-items:center;padding:0 30px;z-index:100;box-shadow:0 0 25px rgba(37,99,235,0.25);}
.logo{font-size:1.4rem;font-weight:bold;letter-spacing:3px;color:#38bdf8;}
.mode{font-size:0.75rem;color:#94a3b8;}
.status.online{color:#22c55e;margin-right:20px;}
.status.alert{color:#ef4444;margin-right:20px;}
#hora{color:#38bdf8;font-weight:bold;}
/* LOGO REDONDEADO + FUTURISTA */
.intro-logo,
.topbar-logo {
  width: 120px;          /* intro */
  height: 120px;
  object-fit: contain;  /* no deforma */
  border-radius: 50%;   /* 🔴 LO REDONDEA */
  background: transparent;
  box-shadow:
    0 0 15px rgba(0, 234, 255, 0.6),
    0 0 35px rgba(0, 234, 255, 0.3);
  animation: logoGlow 2s infinite alternate;
}

/* versión pequeña en la topbar */
.topbar-logo {
  width: 42px;
  height: 42px;
}

/* ANIMACIÓN HUD */
@keyframes logoGlow {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 10px rgba(0,234,255,0.5),
      0 0 20px rgba(0,234,255,0.3);
  }
  100% {
    transform: scale(1.05);
    box-shadow:
      0 0 25px rgba(0,234,255,0.9),
      0 0 45px rgba(0,234,255,0.6);
  }
}