/* ─────────────────────────────────────────────────────────────────────────
   impersonation_banner.css — Banner de impersonación.
   Componente reutilizable: barra superior tinted que aparece cuando un
   admin está navegando como otro usuario.

   Replica el estilo original (bg-primary bg-opacity-10 + text-primary +
   btn-primary), pero envuelto en un componente nombrado para reutilizar
   sin depender de la composición de utilidades Bootstrap.

   Markup esperado (ver templates/components/impersonation_banner.html):
     <div class="impersonation-banner">
       <span class="impersonation-text">
         <i class="bi bi-eye-fill"></i>
         Navegando como <strong>Nombre</strong>
         <small class="impersonation-meta">(Admin Origen)</small>
       </span>
       <a class="impersonation-btn">…</a>
     </div>

   Variantes futuras (no implementadas, dejar como guía):
     .impersonation-banner.banner-strong   → gradient saturado (casos críticos)
     .impersonation-banner.banner-warning  → tinted amber (modo dev / mantenimiento)
   ──────────────────────────────────────────────────────────────────────── */

.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 20px;
  /* Bg sólido equivalente visual a rgba(var(--bs-primary-rgb), 0.10)
     mezclado sobre var(--bs-body-bg) #f5f4f8. Mantiene la tinta primary
     original pero sin transparencia — el .header es sticky y un bg
     translúcido dejaba pasar el contenido scrolleado por detrás. */
  background: #e6e7f6;
  border-bottom: 1px solid var(--bs-primary);
  color: var(--bs-primary);
  font-size: 13px;
}

.impersonation-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.impersonation-text strong {
  font-weight: 600;
}

.impersonation-meta {
  color: var(--bs-secondary, #6c757d);
  font-size: 12px;
  margin-left: 4px;
}

.impersonation-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 14px;
  background: var(--bs-primary);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.12s, transform 0.08s;
  white-space: nowrap;
  flex-shrink: 0;
}
.impersonation-btn:hover {
  background: rgba(var(--bs-primary-rgb), 0.85);
  color: #fff;
  transform: translateY(-1px);
}
.impersonation-btn i {
  font-size: 12px;
}