/* sg-badge — GERADO por `manage.py port_card_css` (design/card_ports.py).
 * Não editar à mão.
 * Badge de status, byte a byte do <style> de components/feedback/badge.card.html (bundle
 * 8cd72241, ZIP 48ebf484759c). Duas mudanças mecânicas e reversíveis: a classe `.bd` do card
 * vira `.sg-badge` (nome do Badge.jsx) e cada um dos 10 estilos (`.cv1`…`.cv10`) passa a valer
 * no seu valor do eixo data-badge (design/axis_css.py). Os 5 estados são fixos:
 * .sg-badge--positive/--warning/--negative/--progress/--neutral.
 * Marcação: <span class="sg-badge sg-badge--positive"><span class="sg-badge__dot"></span>
 * <svg/><span>Vigente</span></span> — ou {% sg_badge "positive" "Vigente" %}. */
  /* ════════ BASE ════════ */
  .sg-badge{ --c:var(--neutral); --cbg:var(--neutral-bg); --ctx:var(--neutral-text); --cbd:var(--neutral-border); --con:var(--neutral-on);
    display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 9px; box-sizing:border-box; cursor:default; user-select:none; -webkit-user-select:none;
    font-family:var(--font-display); font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:1;
    letter-spacing:var(--tracking-tight); white-space:nowrap; border:1px solid transparent; border-radius:var(--radius-sm);
    transition:transform var(--duration-fast) var(--ease-spring); }
  .sg-badge:hover{ transform:translateY(-1px); }
  .sg-badge svg{ width:13px; height:13px; flex:none; }
  .sg-badge__dot{ width:6px; height:6px; border-radius:50%; background:var(--c); display:none; flex:none; }

  .sg-badge--positive{ --c:var(--positive); --cbg:var(--positive-bg); --ctx:var(--positive-text); --cbd:var(--positive-border); --con:var(--positive-on); }
  .sg-badge--warning{ --c:var(--warning); --cbg:var(--warning-bg); --ctx:var(--warning-text); --cbd:var(--warning-border); --con:var(--warning-on); }
  .sg-badge--negative{ --c:var(--negative); --cbg:var(--negative-bg); --ctx:var(--negative-text); --cbd:var(--negative-border); --con:var(--negative-on); }
  .sg-badge--progress{ --c:var(--progress); --cbg:var(--progress-bg); --ctx:var(--progress-text); --cbd:var(--progress-border); --con:var(--progress-on); }
  .sg-badge--neutral{ --c:var(--neutral); --cbg:var(--neutral-bg); --ctx:var(--neutral-text); --cbd:var(--neutral-border); --con:var(--neutral-on); }

  /* 01 · TINGIDO — fundo claro + texto da cor (padrão) */
  @scope ([data-badge="tinted"]) to ([data-badge]) { .sg-badge/*data-badge*/{ background:var(--cbg); color:var(--ctx); border-color:var(--cbd); } }
  @scope ([data-badge="tinted"]) to ([data-badge]) { .sg-badge/*data-badge*/ svg{ color:var(--c); } }

  /* 02 · SÓLIDO — preenchido na cor cheia */
  @scope ([data-badge="solid"]) to ([data-badge]) { .sg-badge/*data-badge*/{ background:var(--c); color:var(--con); } }

  /* 03 · CONTORNO — só borda na cor, fundo transparente */
  @scope ([data-badge="outline"]) to ([data-badge]) { .sg-badge/*data-badge*/{ background:transparent; color:var(--ctx); border-color:var(--c); } }
  @scope ([data-badge="outline"]) to ([data-badge]) { .sg-badge/*data-badge*/ svg{ color:var(--c); } }

  /* 04 · PONTO — ponto de status + texto, sem moldura */
  @scope ([data-badge="dot"]) to ([data-badge]) { .sg-badge/*data-badge*/{ background:transparent; color:var(--text); padding:0 2px; } }
  @scope ([data-badge="dot"]) to ([data-badge]) { .sg-badge/*data-badge*/ .sg-badge__dot{ display:block; } }
  @scope ([data-badge="dot"]) to ([data-badge]) { .sg-badge/*data-badge*/ svg{ display:none; } }

  /* 05 · MONO — cápsula monoespaçada em caixa-alta */
  @scope ([data-badge="mono"]) to ([data-badge]) { .sg-badge/*data-badge*/{ background:var(--cbg); color:var(--ctx); border-color:var(--cbd); border-radius:var(--radius-full);
    font-family:var(--font-mono); font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:.08em; height:22px; padding:0 11px; } }
  @scope ([data-badge="mono"]) to ([data-badge]) { .sg-badge/*data-badge*/ svg{ display:none; } }
  @scope ([data-badge="mono"]) to ([data-badge]) { .sg-badge/*data-badge*/ .sg-badge__dot{ display:block; } }

  /* 06 · BARRA — faixa de acento à esquerda sobre superfície */
  @scope ([data-badge="bar"]) to ([data-badge]) { .sg-badge/*data-badge*/{ background:var(--surface); color:var(--text); border-color:var(--border); border-left:3px solid var(--c); border-radius:0 var(--radius-sm) var(--radius-sm) 0; } }
  @scope ([data-badge="bar"]) to ([data-badge]) { .sg-badge/*data-badge*/ svg{ color:var(--c); } }

  /* 07 · ELEVADO — chip branco arredondado com sombra colorida */
  @scope ([data-badge="raised"]) to ([data-badge]) { .sg-badge/*data-badge*/{ background:var(--surface); color:var(--ctx); border-radius:var(--radius-full);
    box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 10px -4px color-mix(in srgb, var(--c) 55%, transparent); } }
  @scope ([data-badge="raised"]) to ([data-badge]) { .sg-badge/*data-badge*/ svg{ color:var(--c); } }

  /* 08 · GRADIENTE — leve degradê na cor, texto claro */
  @scope ([data-badge="gradient"]) to ([data-badge]) { .sg-badge/*data-badge*/{ color:var(--con); border:none;
    background:linear-gradient(135deg, color-mix(in srgb, var(--c) 86%, white), var(--c)); } }

  /* 09 · ANEL — anel interno duplo na cor */
  @scope ([data-badge="ring"]) to ([data-badge]) { .sg-badge/*data-badge*/{ background:var(--cbg); color:var(--ctx); box-shadow:inset 0 0 0 1.5px var(--c); border-radius:var(--radius-md); } }
  @scope ([data-badge="ring"]) to ([data-badge]) { .sg-badge/*data-badge*/ svg{ color:var(--c); } }

  /* 10 · SUBLINHADO — texto da cor com base sublinhada, sem caixa */
  @scope ([data-badge="underline"]) to ([data-badge]) { .sg-badge/*data-badge*/{ background:transparent; color:var(--ctx); border-radius:0; border-bottom:2px solid var(--c); padding:0 2px 3px;
    font-family:var(--font-mono); font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:.06em; height:auto; } }
  @scope ([data-badge="underline"]) to ([data-badge]) { .sg-badge/*data-badge*/ svg{ width:11px; height:11px; color:var(--c); } }