/* Banner base */
.banner {
  position: sticky; top: 0; z-index: 50;
  width: 100%;
  color: #fff;
  font-size: 0.9375rem; /* 15px aprox */
  line-height: 1.3;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  will-change: transform, opacity;
}
.banner--hidden { display: none; }

.banner__inner {
  display: flex; gap: .5rem; align-items: center; justify-content: center;
  padding: .5rem .75rem; text-align: center; flex-wrap: wrap;
}

/* Estados/temas */
.banner--loading { background: linear-gradient(90deg, #6EE7B7, #10B981); }
.banner--ok      { background: linear-gradient(90deg, #22C55E, #16A34A); }
.banner--error   { background: linear-gradient(90deg, #F97316, #EA580C); }

/* Partes */
.banner__emoji { font-size: 1rem; }
.banner__title { font-weight: 700; margin-right: .25rem; }
.banner__items { opacity: .95; }
.banner__link  { margin-left: .5rem; color: #fff; text-decoration: underline; }
.banner__link:hover { text-decoration: none; }

/* Dot pulse / warn */
.dot {
  width: .5rem; height: .5rem; border-radius: 999px; display: inline-block;
  box-shadow: 0 0 0 0 rgba(255,255,255,.7);
  animation: pulse 1.6s infinite;
}
.dot--pulse { background: #ffffff; }
.dot--warn  { background: #fff; animation: pulse-warn 1.6s infinite; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@keyframes pulse-warn {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Pequeños ajustes responsivos */
@media (max-width: 640px) {
  .banner__inner { padding-left: .5rem; padding-right: .5rem; }
  .banner__items, .banner__link { width: 100%; }
}