/* ───────────────────────────────────────────────────────────────────────────
   Franja de aviso de ambiente no productivo (QA / staging / local).

   Solo maquetacion y posicionamiento: el color proviene de las clases Bootstrap
   (bg-danger / text-white) aplicadas en el parcial, segun el design system
   (docs/design-system.md) — cero hex hardcodeado aqui.

   La franja se fija arriba de todo y desplaza el layout fijo de Vuexy (navbar y
   menu lateral) hacia abajo, ademas de empujar el contenido, para que nada quede
   tapado. La altura se centraliza en la variable --env-banner-height.
   ─────────────────────────────────────────────────────────────────────────── */

.env-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040; /* por encima del navbar (1030) y del main-menu (1031) de Vuexy */
  height: var(--env-banner-height, 1.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02rem;
  line-height: 1.2;
}

.env-banner .env-banner__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Reserva el espacio de la franja desplazando los elementos fijos del template. */
.has-env-banner {
  --env-banner-height: 1.75rem;
}

.has-env-banner .header-navbar.fixed-top {
  top: var(--env-banner-height);
}

.has-env-banner .main-menu.menu-fixed {
  top: var(--env-banner-height);
}

.has-env-banner .app-content {
  padding-top: var(--env-banner-height);
}