/* ============================================================
   SAPIEN UI · BLOCO Badges & Toasts  (autocontido)
   Carregue DEPOIS do CSS de marca. Inclui os tokens que usa, então
   funciona mesmo sem o sapien-ui.css completo.
   ============================================================ */

:root {
  --ui-fg:#0b1f23; --ui-fg-muted:#66767b; --ui-fg-subtle:#939fa3;
  --ui-border:#e4e7e7; --ui-border-strong:#d3d8d8; --ui-bg-muted:#f0f2f2;
  --ui-shadow-md:0 4px 12px -2px rgba(11,31,35,0.10), 0 2px 6px -2px rgba(11,31,35,0.06);
  --ui-font:'Inter', system-ui, -apple-system, sans-serif;
}

/* ===================== BADGE · Outline =====================
   <span class="sp-badge sp-badge--success">Finalizado</span>
   Com ícone à esquerda (opcional — use em status dinâmicos,
   ex: spinner de "processando"):
   <span class="sp-badge sp-badge--info"><i class="fas fa-spinner fa-spin"></i> Processando</span>
   tons: --success --warning --danger --info --neutral --primary
*/
.sp-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 9px;
  border:1px solid; border-radius:9999px;
  background:#fff;
  font-family:var(--ui-font);
  font-size:11.5px; font-weight:600; line-height:1.5;
  white-space:nowrap;
}
.sp-badge > i { font-size:10px; }            /* ícone à esquerda mantém-se */
.sp-badge--success { color:#1d7330; border-color:rgba(40,167,69,0.40); }
.sp-badge--warning { color:#b9740a; border-color:rgba(245,166,35,0.50); }
.sp-badge--danger  { color:#c52a39; border-color:rgba(220,53,69,0.40); }
.sp-badge--info    { color:#0c7689; border-color:rgba(23,162,184,0.40); }
.sp-badge--neutral { color:var(--ui-fg-muted); border-color:var(--ui-border-strong); }
.sp-badge--primary { color:#05636c; border-color:rgba(5,99,108,0.40); }

/* ===================== TOAST · borda-accent + ícone soft =====================
   Disparado por código (SapienToast.*) — ver sapien-toast.js.
*/
.sp-toast-stack {
  position:fixed; right:20px; bottom:20px;
  display:flex; flex-direction:column; gap:10px;
  z-index:1100; width:360px; max-width:calc(100vw - 40px);
}
.sp-toast {
  display:flex; align-items:flex-start; gap:11px;
  background:#fff;
  border:1px solid var(--ui-border);
  border-left:3px solid var(--ui-border-strong);
  border-radius:11px; padding:12px 13px;
  box-shadow:var(--ui-shadow-md);
}
.sp-toast-stack .sp-toast { animation:sp-toast-in 220ms cubic-bezier(.16,1,.3,1); }
@keyframes sp-toast-in { from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;} }
.sp-toast.is-leaving { opacity:0; transform:translateX(12px); transition:opacity .2s ease, transform .2s ease; }
.sp-toast__icon { width:30px; height:30px; flex-shrink:0; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; }
.sp-toast__body { flex:1; min-width:0; }
.sp-toast__title { font-family:var(--ui-font); font-size:13px; font-weight:700; color:var(--ui-fg); line-height:1.25; }
.sp-toast__desc { font-family:var(--ui-font); font-size:11.5px; color:var(--ui-fg-muted); line-height:1.4; margin-top:1px; }
.sp-toast__close { flex-shrink:0; background:none; border:none; color:var(--ui-fg-subtle); cursor:pointer; font-size:12px; padding:2px; border-radius:5px; }
.sp-toast__close:hover { background:var(--ui-bg-muted); color:var(--ui-fg); }
.sp-toast--success { border-left-color:#2f8f57; } .sp-toast--success .sp-toast__icon { background:rgba(40,167,69,0.12); color:#1d7330; }
.sp-toast--danger  { border-left-color:#cf4555; } .sp-toast--danger  .sp-toast__icon { background:rgba(220,53,69,0.10); color:#c52a39; }
.sp-toast--warning { border-left-color:#d18b1e; } .sp-toast--warning .sp-toast__icon { background:rgba(245,166,35,0.14); color:#b9740a; }
.sp-toast--info    { border-left-color:#05636c; } .sp-toast--info    .sp-toast__icon { background:rgba(5,99,108,0.10); color:#05636c; }

/* ===================== SEGMENTED · filtros com contador =====================
   Grupo de filtros mutuamente exclusivos. O ativo fica em teal sólido.
   <div class="sp-seg" role="tablist">
     <button class="sp-seg__item is-active"><i class="fas fa-layer-group"></i> Todos <span class="sp-seg__count">4</span></button>
     <button class="sp-seg__item"><i class="fas fa-handshake"></i> Conciliação <span class="sp-seg__count">3</span></button>
     ...
   </div>
*/
.sp-seg {
  display:inline-flex; align-items:center; gap:2px;
  padding:3px; background:var(--ui-bg-muted);
  border:1px solid var(--ui-border); border-radius:9px;
  font-family:var(--ui-font);
}
.sp-seg__item {
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 10px;
  border:none; border-radius:6px; background:transparent;
  font-family:var(--ui-font); font-size:12.5px; font-weight:600;
  color:var(--ui-fg-muted); cursor:pointer; white-space:nowrap;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.sp-seg__item > i { font-size:11px; opacity:.85; }
.sp-seg__item:hover { color:var(--ui-fg); }
.sp-seg__item.is-active {
  background:#fff; color:#05636c;
  box-shadow:0 1px 2px rgba(11,31,35,0.10);
}
.sp-seg__count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 5px;
  border-radius:9999px;
  background:rgba(11,31,35,0.06); color:var(--ui-fg-muted);
  font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
.sp-seg__item.is-active .sp-seg__count { background:rgba(5,99,108,0.12); color:#05636c; }
/* contador zerado fica apagado */
.sp-seg__count[data-zero="true"] { opacity:.5; }