/* ═══════════════════════════════════════════════════════════════
   WRITEGUARD — Chip "No disponible" para acciones bloqueadas
   ───────────────────────────────────────────────────────────────
   Reemplaza visualmente a botones de write (Adicionar / Editar /
   Eliminar) cuando la suscripción del tenant NO permite la acción.

   No usa candado intencionalmente: el mensaje es "feature inactiva
   por estado de plan", no "prohibido". El icono es bi-stars y el
   color un gris-azulado neutral con acento ámbar — comunica
   "premium / requiere upgrade" sin penalizar al usuario.

   USO (siempre vía template tag, no usar las clases sueltas):
       {% load global_tags %}
       {% writeguard "create" %}
           <a class="btn btn-navy">+ Adicionar</a>
       {% endwriteguard %}

   Si la sub permite el nivel → renderiza el botón tal cual.
   Si NO permite → renderiza este chip con tooltip + link a renovar.

   CARGAR EN base.html (CSS global) — disponible en todos los módulos.
   ─────────────────────────────────────────────────────────────── */

.wg-chip {
  /* Layout — chip inline alineable al lado de cualquier botón */
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .375rem .75rem;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;

  /* Tipografía */
  color: #5b6573;
  text-decoration: none;

  /* Caja — gris neutro con un toque de profundidad */
  background: #f1f3f6;
  border: 1px solid #e0e4ea;
  border-radius: .375rem;

  /* Animación */
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer;
}

.wg-chip:hover,
.wg-chip:focus {
  /* Hover sutil — el chip ES interactivo (linkea a /my_business/) */
  background: #fff8e6;
  border-color: #ffd279;
  color: #8a5b00;
  text-decoration: none;
}

.wg-chip-icon {
  /* Icono bi-stars en ámbar suave: comunica "premium" sin gritar */
  font-size: 1rem;
  color: #d6a200;
  line-height: 1;
}

.wg-chip:hover .wg-chip-icon,
.wg-chip:focus .wg-chip-icon {
  color: #b58400;
}

.wg-chip-text {
  /* Texto "No disponible" — pega al icono sin saltos verticales */
  display: inline-block;
}

/* ── VARIANTE: chip dentro de un dropdown-menu ─────────────────
   Cuando el writeguard envuelve un <a class="dropdown-item">,
   el padding del chip default no encaja. Esta variante ajusta
   para que el chip ocupe toda la línea del menú. */
.dropdown-menu .wg-chip {
  display: flex;
  width: 100%;
  padding: .375rem 1.25rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: .875rem;
  color: #adb3bd;
}

.dropdown-menu .wg-chip:hover,
.dropdown-menu .wg-chip:focus {
  background: #fff8e6;
  color: #8a5b00;
}

/* ── VARIANTE: chip en grupos de toolbar (botones top) ─────────
   En los headers de listado (block botones_top) el chip aparece
   junto a otros botones del btn-group. Le damos un mínimo de
   altura para alinearse con btn-sm sin desplazar el layout. */
.btn-group .wg-chip,
.nav.btn-group .wg-chip {
  min-height: calc(1.5em + .5rem + 2px);
}