/* Distintivo del entorno (texto_entorno): avisa de forma llamativa en que entorno estamos
   (LOCAL, STAGING...). En produccion el parametro va vacio y no se pinta nada. */
.badge-entorno {
    display: inline-block;
    padding: .2rem .55rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background-color: #2C3E73;   /* azul serman */
    border: 1px solid #1c2950;
    border-radius: .35rem;
    vertical-align: middle;
    white-space: nowrap;
}

/* Variante para fondos oscuros/claros de las pantallas de acceso: mismo aviso, algo mas de aire. */
.badge-entorno-acceso {
    padding: .3rem .7rem;
    font-size: .8rem;
}

/* Parpadeo del distintivo de entorno en el menu, para que llame la atencion. */
@keyframes parpadeo-entorno {
    0%, 100% { opacity: 1; }
    50%      { opacity: .15; }
}
.badge-entorno-parpadeo {
    animation: parpadeo-entorno 1.2s ease-in-out infinite;
}

/* Respeta la preferencia de reducir movimiento: sin parpadeo. */
@media (prefers-reduced-motion: reduce) {
    .badge-entorno-parpadeo {
        animation: none;
    }
}