/* sg-tag — GERADO por `manage.py port_card_css` (design/card_ports.py).
 * Não editar à mão.
 * Chip de filtro removível, byte a byte do <style> de components/feedback/tag.card.html (bundle
 * 8cd72241, ZIP 48ebf484759c). Duas mudanças mecânicas e reversíveis: a classe `.tg` do card
 * vira `.sg-tag` e cada um dos 10 estilos (`.cv1`…`.cv10`) passa a valer no seu valor do eixo
 * data-tag (design/axis_css.py).
 * Marcação: {% sg_tag "Sinop" key="Município" %} (design/templatetags/sg_tag.py). O que o card
 * não traz — uma marcação só para os 10 estilos e o remover como botão ou link de verdade —
 * está em static/css/components.css. */
  /* ════════ BASE ════════ */
  .sg-tag{ display:inline-flex; align-items:center; gap:6px; height:27px; padding:0 5px 0 10px; box-sizing:border-box;
    font-family:var(--font-sans); font-size:var(--text-xs); font-weight:var(--weight-medium); color:var(--text-muted);
    background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius-md); white-space:nowrap;
    cursor:default; user-select:none; -webkit-user-select:none;
    transition:transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) var(--ease-standard); }
  .sg-tag:hover{ transform:translateY(-1px); }
  .sg-tag__dot{ width:7px; height:7px; border-radius:50%; background:var(--primary); display:none; flex:none; }
  .sg-tag__k{ display:none; }
  .sg-tag__x{ display:grid; place-items:center; width:17px; height:17px; border-radius:var(--radius-full); cursor:pointer;
    color:var(--text-subtle); flex:none;
    transition:color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
  .sg-tag__x svg{ width:12px; height:12px; }
  .sg-tag__x:hover{ color:var(--text); background:color-mix(in srgb, currentColor 14%, transparent); }

  /* 01 · POÇO — fundo afundado neutro (padrão) */
  @scope ([data-tag="sunken"]) to ([data-tag]) { .sg-tag/*data-tag*/{ } }

  /* 02 · MARCA — tinta da marca */
  @scope ([data-tag="brand"]) to ([data-tag]) { .sg-tag/*data-tag*/{ background:var(--primary-bg); color:var(--primary-text); border-color:var(--primary-border); } }
  @scope ([data-tag="brand"]) to ([data-tag]) { .sg-tag/*data-tag*/ .sg-tag__x{ color:var(--primary-text); } }

  /* 03 · CONTORNO — só borda, fundo da superfície */
  @scope ([data-tag="outline"]) to ([data-tag]) { .sg-tag/*data-tag*/{ background:var(--surface); border-color:var(--border-strong); color:var(--text); } }

  /* 04 · PÍLULA — totalmente arredondada */
  @scope ([data-tag="pill"]) to ([data-tag]) { .sg-tag/*data-tag*/{ border-radius:var(--radius-full); background:var(--primary-bg); color:var(--primary-text); border-color:transparent; padding:0 6px 0 12px; } }
  @scope ([data-tag="pill"]) to ([data-tag]) { .sg-tag/*data-tag*/ .sg-tag__x{ color:var(--primary-text); } }

  /* 05 · SÓLIDO — preenchido na marca, texto claro */
  @scope ([data-tag="solid"]) to ([data-tag]) { .sg-tag/*data-tag*/{ background:var(--primary); color:var(--on-primary); border-color:transparent; } }
  @scope ([data-tag="solid"]) to ([data-tag]) { .sg-tag/*data-tag*/ .sg-tag__x{ color:color-mix(in srgb, var(--on-primary) 80%, transparent); } }
  @scope ([data-tag="solid"]) to ([data-tag]) { .sg-tag/*data-tag*/ .sg-tag__x:hover{ background:rgba(255,255,255,.2); color:#fff; } }

  /* 06 · CHAVE-VALOR — rótulo e valor separados por divisória */
  @scope ([data-tag="key-value"]) to ([data-tag]) { .sg-tag/*data-tag*/{ padding:0 5px 0 0; overflow:hidden; } }
  @scope ([data-tag="key-value"]) to ([data-tag]) { .sg-tag/*data-tag*/ .sg-tag__k{ display:inline-flex; align-items:center; height:100%; padding:0 8px; background:color-mix(in srgb, var(--text) 6%, transparent);
    font-family:var(--font-mono); font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:.05em; color:var(--text-subtle);
    border-right:1px solid var(--border); margin-right:7px; } }

  /* 07 · COM PONTO — ponto de cor à esquerda */
  @scope ([data-tag="dot"]) to ([data-tag]) { .sg-tag/*data-tag*/{ background:var(--surface); border-color:var(--border); } }
  @scope ([data-tag="dot"]) to ([data-tag]) { .sg-tag/*data-tag*/ .sg-tag__dot{ display:block; } }

  /* 08 · TICKET — tracejado, mono, como uma etiqueta */
  @scope ([data-tag="dashed"]) to ([data-tag]) { .sg-tag/*data-tag*/{ background:repeating-linear-gradient(135deg, var(--surface-sunken) 0 6px, transparent 6px 12px), var(--surface);
    border:1px dashed var(--border-strong); border-radius:var(--radius-sm); font-family:var(--font-mono);
    font-size:var(--text-2xs); letter-spacing:.02em; color:var(--text-muted); } }

  /* 09 · ELEVADO — branco arredondado com sombra */
  @scope ([data-tag="raised"]) to ([data-tag]) { .sg-tag/*data-tag*/{ background:var(--surface); border-color:var(--border-subtle); border-radius:var(--radius-full);
    box-shadow:var(--shadow-sm); color:var(--text); } }
  @scope ([data-tag="raised"]) to ([data-tag]) { .sg-tag/*data-tag*/:hover{ box-shadow:var(--shadow-md); } }

  /* 10 · SUBLINHADO — texto sobre base, sem caixa */
  @scope ([data-tag="underline"]) to ([data-tag]) { .sg-tag/*data-tag*/{ background:transparent; border:none; border-bottom:2px solid var(--primary-border); border-radius:0;
    padding:0 2px 4px; color:var(--text); height:auto; gap:7px; } }
  @scope ([data-tag="underline"]) to ([data-tag]) { .sg-tag/*data-tag*/ .sg-tag__x{ width:15px; height:15px; } }