/* ───────────────────────────────────────────────────────────────────────────
   Franja del periodo de prueba (modo demo).

   Barra full-width fija en el borde superior de la pagina, POR ENCIMA de todo
   el cromo (sidebar + navbar), con el mismo patron que la franja de ambiente
   (environment-banner.css): se fija arriba y desplaza el layout fijo de la
   plantilla (navbar, menu lateral) y el contenido hacia abajo, para que nada
   quede tapado. La altura se centraliza en la variable --demo-banner-h.

   La visibilidad la decide el backend (\Helper::demoBannerData()); el layout
   agrega la clase `has-demo-banner` al <body> cuando corresponde. El fondo es
   `bg-warning` (clase Bootstrap, design system). El color del texto se fija
   aca —casi-negro #212529— porque `.text-dark` de Bootstrap se invierte bajo
   `.dark-layout` y quedaba ilegible sobre el ambar; este valor mantiene alto
   contraste en modo claro y oscuro.

   Nota de especificidad: los selectores de desplazamiento del cromo llevan el
   prefijo `body` para ganarle a las reglas base de la plantilla (que fijan
   `top`/`padding`) sin recurrir a `!important`.
   ─────────────────────────────────────────────────────────────────────────── */

.demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050; /* sobre navbar (1030) y sidebar moderno (.cr-sidebar, 1030) */
  min-height: var(--demo-banner-h, 2.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.5rem 0.85rem;
  padding: 0.25rem 1rem;
  color: #212529; /* casi-negro: maximo contraste/legibilidad sobre el ambar en claro
                     y oscuro (las clases de texto de Bootstrap se invierten en dark-layout) */
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01rem;
  line-height: 1.2;
}

.demo-banner .demo-banner__text {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0; /* permite el truncado en pantallas angostas */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* El color se fija en el propio texto/icono (no por herencia del contenedor):
     alguna regla del tema pisaba el color heredado y lo dejaba ilegible. */
  color: #212529 !important;
}

.demo-banner .demo-banner__icon {
  font-size: 1rem;
  line-height: 1;
  flex: 0 0 auto;
  color: #212529 !important;
}

/* El CTA queda como pildora compacta, junto al mensaje. Se centra el contenido
   (icono + texto) haciendo del BOTON un inline-flex con align-items:center: asi
   el icono y el texto quedan centrados verticalmente y no pegados al borde
   inferior. Importante: NO se toca el display del icono de fuente (.bx) — hacerlo
   rompe el glyph. El btn-dark aporta el contraste sobre el ambar (via clase). */
.demo-banner .demo-banner__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 600;
  border-radius: 99px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

/* El botón centra su contenido con inline-flex; el icono de fuente (boxicon)
   carga su peso visual en la parte alta de su caja, por lo que centrar la caja
   lo deja un pelo bajo. Se sube 1.5px para nivelarlo OPTICAMENTE con el texto. */
.demo-banner .demo-banner__cta .bx {
  position: relative;
  top: -1.5px;
}

/* ── Reserva del espacio: desplaza el cromo fijo y el contenido hacia abajo ──
   Se activa solo con la clase `has-demo-banner` en el <body>. */
.has-demo-banner {
  --demo-banner-h: 2.75rem;
}

/* Sidebar moderno (position:fixed, top:0, height:100vh). */
body.has-demo-banner .cr-sidebar {
  top: var(--demo-banner-h);
  height: calc(100vh - var(--demo-banner-h));
}

/* Navbar (tema moderno y clasico fixed-top). */
body.has-demo-banner .header-navbar {
  top: var(--demo-banner-h);
}

/* Menu lateral clasico de Vuexy (cuando no se usa el sidebar moderno). */
body.has-demo-banner .main-menu.menu-fixed {
  top: var(--demo-banner-h);
}

/* Contenido: se baja el alto de la franja para acompañar al cromo. */
body.has-demo-banner .app-content {
  padding-top: var(--demo-banner-h);
}

/* ── Apilado con la franja de ambiente (solo entornos no productivos) ──
   Si ambas barras estan presentes, la del demo va DEBAJO de la de ambiente y
   el cromo/contenido se desplaza por la suma de ambas alturas. Los selectores
   compuestos ganan en especificidad a las reglas de una sola clase. */
body.has-env-banner.has-demo-banner .demo-banner {
  top: var(--env-banner-height, 1.75rem);
}

body.has-env-banner.has-demo-banner .cr-sidebar {
  top: calc(var(--env-banner-height, 1.75rem) + var(--demo-banner-h));
  height: calc(100vh - var(--env-banner-height, 1.75rem) - var(--demo-banner-h));
}

body.has-env-banner.has-demo-banner .header-navbar,
body.has-env-banner.has-demo-banner .main-menu.menu-fixed {
  top: calc(var(--env-banner-height, 1.75rem) + var(--demo-banner-h));
}

body.has-env-banner.has-demo-banner .app-content {
  padding-top: calc(var(--env-banner-height, 1.75rem) + var(--demo-banner-h));
}