/* ─────────────────────────────────────────────────────────────────────────
   action_pill.css — Reusable pill-style action button group.

   Usage:
     <div class="action-pill-group" role="toolbar">
       <button class="action-pill-btn pill-success">Guardar</button>
       <a class="action-pill-btn pill-navy">Cerrar</a>
       <a class="action-pill-btn pill-danger">Eliminar</a>
     </div>

   Container = white pill with light border.
   Each button = rounded pill with semantic color tint, brightens on hover.

   Variants (matched to project semantics):
     .pill-success — positive action (Iniciar / Guardar / Reabrir)
     .pill-navy    — neutral / save (Finalizar / Cerrar)
     .pill-danger  — destructive (Cancelar / Eliminar)
     .pill-primary — secondary edit (Editar)

   Use this for ANY toolbar of independent actions (NOT for mutually
   exclusive choices — those go to .wb-filter-group / similar).
   ──────────────────────────────────────────────────────────────────────── */

.action-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: #fff;
  border: 1px solid #e6e6ee;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.04);
}

.action-pill-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 12.5px; font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .12s, color .12s, border-color .12s, transform .08s;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}
.action-pill-btn:hover { transform: translateY(-1px); }
.action-pill-btn:disabled,
.action-pill-btn[disabled] {
  opacity: .55; cursor: not-allowed; transform: none;
}
.action-pill-btn i { font-size: 13px; line-height: 1; }

/* ── Variants ──────────────────────────────────────────────── */

.action-pill-btn.pill-success {
  background: #DCFCE7; color: #047857;
}
.action-pill-btn.pill-success:hover {
  background: #10B981; color: #fff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.action-pill-btn.pill-navy {
  background: #EEF1F8; color: #344767;
}
.action-pill-btn.pill-navy:hover {
  background: linear-gradient(135deg, #344767 0%, #2c3c58 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(52, 71, 103, 0.3);
}

.action-pill-btn.pill-danger {
  background: #FEE2E2; color: #be3651;
}
.action-pill-btn.pill-danger:hover {
  background: linear-gradient(135deg, #fd5577 0%, #ff6a92 100%);
  /* background-color: #fd5577; */
  color: #fff;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}

.action-pill-btn.pill-primary {
  background: #EFEDFF; color: #6E5BFF;
}
.action-pill-btn.pill-primary:hover {
  background: #6E5BFF; color: #fff;
  box-shadow: 0 2px 6px rgba(110, 91, 255, 0.25);
}