/* sg-switch — GERADO por `manage.py port_card_css` (design/card_ports.py).
 * Não editar à mão.
 * Switch, byte a byte do <style> de components/forms/switch.card.html (bundle 8cd72241, ZIP
 * 48ebf484759c), sem o bloco de movimento reduzido (ele mira a moldura `.scheme` do card).
 * Mudanças mecânicas e reversíveis: `.cc` → `.sg-switch`, `.sw` → `__track`, `.knob` / `.ink` /
 * `.fill` → `__knob` / `__ink` / `__fill`, `.trk` → `__slot`, `.kico` → `__icon`, `.dis` →
 * `.is-disabled`. Os 10 formatos (`.d1`…`.d10`) valem no eixo data-switch e os 10
 * comportamentos (`.a1`…`.a10`) no data-switch-fx, com o ancestral como raiz do escopo.
 * Tempos finitos e o raio de 3px viram tokens (design/component_tokens.py).
 * O que o card não traz — o conteúdo de cada encaixe, o curso do knob por formato nas animações
 * Carimbo/Salto/Dobra, o holofote e o movimento reduzido — está em
 * static/css/forms-choice.css e js/widgets/choice.js.
 * Marcação: {% sg_switch "Notificar vencimentos" name="notify" %} (templatetags/sg_choice.py). */
  /* ════════════ BASE — Switch ════════════ */
  .sg-switch{ display:inline-flex; align-items:center; gap:var(--space-2); cursor:pointer; font-size:var(--control-font);
    color:var(--text); user-select:none; position:relative; -webkit-tap-highlight-color:transparent; }
  .sg-switch.is-disabled{ cursor:not-allowed; color:var(--text-disabled); }
  .sg-switch input{ position:absolute; opacity:0; width:0; height:0; }
  .sg-switch__track{ width:36px; height:20px; flex:none; border-radius:var(--radius-full); background:var(--gray-300);
    position:relative; padding:2px; overflow:hidden;
    transition:background-color var(--duration-base) var(--ease-standard),
               border-color var(--duration-fast) var(--ease-standard),
               box-shadow var(--duration-fast) var(--ease-standard); }
  .sg-switch__track .sg-switch__ink, .sg-switch__track .sg-switch__fill{ position:absolute; inset:0; border-radius:inherit; background:var(--primary); z-index:0; }
  .sg-switch__track .sg-switch__ink{ transform-origin:left center; transform:scaleX(0); transition:transform var(--duration-base) var(--ease-out); display:none; }
  .sg-switch__track .sg-switch__fill{ transform-origin:left; transform:scaleX(0); transition:transform var(--duration-base) var(--ease-emphasized); display:none; }
  .sg-switch__track .sg-switch__slot{ position:absolute; z-index:1; top:50%; transform:translateY(-50%); display:grid; place-items:center; opacity:0;
    pointer-events:none; transition:opacity var(--duration-fast) var(--ease-standard); }
  .sg-switch__track .sg-switch__slot--l{ left:4px; } .sg-switch__track .sg-switch__slot--r{ right:4px; }
  .sg-switch__track .sg-switch__slot svg{ width:11px; height:11px; display:block; }
  .sg-switch__track .sg-switch__knob{ position:relative; z-index:2; width:16px; height:16px; border-radius:var(--radius-full); background:var(--white);
    box-shadow:var(--shadow-sm); transform:translateX(0); display:grid; place-items:center;
    transition:transform var(--duration-base) var(--ease-spring), background-color var(--duration-base) var(--ease-standard); }
  .sg-switch__track .sg-switch__icon{ position:absolute; inset:0; display:none; place-items:center; }
  .sg-switch__track .sg-switch__icon svg{ width:10px; height:10px; display:block; }
  .sg-switch input:checked + .sg-switch__track{ background:var(--primary); }
  .sg-switch input:checked + .sg-switch__track .sg-switch__knob{ transform:translateX(16px); }
  .sg-switch input:focus-visible + .sg-switch__track{ box-shadow:0 0 0 var(--ring-width) var(--ring); }
  .sg-switch.is-disabled .sg-switch__track{ background:var(--gray-200); }
  .sg-switch.is-disabled input:checked + .sg-switch__track{ background:var(--gray-300); }

  @keyframes cc-goo{
    0%,100%{ border-radius:46% 54% 56% 44% / 54% 46% 54% 46%; }
    25%{ border-radius:57% 43% 47% 53% / 45% 57% 43% 55%; }
    50%{ border-radius:43% 57% 53% 47% / 57% 43% 57% 43%; }
    75%{ border-radius:53% 47% 43% 57% / 47% 53% 47% 53%; } }

  /* ════════════ DESIGNS — 10 formatos do mesmo controle ════════════ */

  /* D01 · PADRÃO — pílula, knob branco, trilha-acento (linha de base) */

  /* D02 · QUADRADO — trilha e knob com cantos vivos */
  @scope ([data-switch="square"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track{ border-radius:var(--radius-sm); } }
  @scope ([data-switch="square"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__knob{ border-radius:var(--sg-switch-r-3); } }

  /* D03 · RÓTULO — I / O aparecem dentro da trilha */
  @scope ([data-switch="label-io"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track{ width:46px; height:22px; } }
  @scope ([data-switch="label-io"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__knob{ width:18px; height:18px; } }
  @scope ([data-switch="label-io"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch input:checked + .sg-switch__track .sg-switch__knob{ transform:translateX(24px); } }
  @scope ([data-switch="label-io"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__slot{ font-family:var(--font-mono); font-size:11px; font-weight:700; line-height:1; } }
  @scope ([data-switch="label-io"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__slot--l{ left:8px; color:var(--on-primary); opacity:0; } }
  @scope ([data-switch="label-io"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__slot--r{ right:8px; color:var(--text-subtle); opacity:1; } }
  @scope ([data-switch="label-io"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch input:checked + .sg-switch__track .sg-switch__slot--l{ opacity:1; } }
  @scope ([data-switch="label-io"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch input:checked + .sg-switch__track .sg-switch__slot--r{ opacity:0; } }

  /* D04 · ÍCONE — o knob carrega o sinal: ✓ ligado · ✕ desligado */
  @scope ([data-switch="knob-icon"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track{ width:40px; height:22px; } }
  @scope ([data-switch="knob-icon"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__knob{ width:18px; height:18px; } }
  @scope ([data-switch="knob-icon"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch input:checked + .sg-switch__track .sg-switch__knob{ transform:translateX(18px); } }
  @scope ([data-switch="knob-icon"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__icon--off{ display:grid; color:var(--gray-400); } }
  @scope ([data-switch="knob-icon"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__icon--on{ color:var(--primary); } }
  @scope ([data-switch="knob-icon"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch input:checked + .sg-switch__track .sg-switch__icon--off{ display:none; } }
  @scope ([data-switch="knob-icon"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch input:checked + .sg-switch__track .sg-switch__icon--on{ display:grid; } }

  /* D05 · MATERIAL — trilho fino, knob grande que ganha cor ao ligar */
  @scope ([data-switch="thin-track"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track{ height:14px; padding:0; overflow:visible; display:flex; align-items:center; } }
  @scope ([data-switch="thin-track"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__knob{ width:20px; height:20px; box-shadow:var(--shadow-md); } }
  @scope ([data-switch="thin-track"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch input:checked + .sg-switch__track{ background:color-mix(in srgb,var(--primary) 40%, var(--gray-200)); } }
  @scope ([data-switch="thin-track"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch input:checked + .sg-switch__track .sg-switch__knob{ transform:translateX(16px); background:var(--primary); } }
  @scope ([data-switch="thin-track"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch.is-disabled input:checked + .sg-switch__track .sg-switch__knob{ background:var(--gray-400); } }

  /* D06 · CONTORNO — trilha vazada; tudo desenhado a traço */
  @scope ([data-switch="outline"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track{ background:transparent; border:1.5px solid var(--border-strong); } }
  @scope ([data-switch="outline"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__knob{ width:14px; height:14px; background:var(--border-strong); box-shadow:none; } }
  @scope ([data-switch="outline"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch input:checked + .sg-switch__track{ background:transparent; border-color:var(--primary); } }
  @scope ([data-switch="outline"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch input:checked + .sg-switch__track .sg-switch__knob{ transform:translateX(15px); background:var(--primary); } }

  /* D07 · ENTALHE — trilha rebaixada, com sombra interna tátil */
  @scope ([data-switch="inset"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track{ background:var(--surface-sunken); box-shadow:inset 0 1px 3px rgba(0,0,0,.28); } }
  @scope ([data-switch="inset"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch input:checked + .sg-switch__track{ background:var(--primary); box-shadow:inset 0 1px 3px rgba(0,0,0,.32); } }
  @scope ([data-switch="inset"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__knob{ box-shadow:var(--shadow-sm), 0 0 0 .5px rgba(0,0,0,.06); } }

  /* D08 · SOL · LUA — sol e lua fixos na trilha, o knob desliza por cima */
  @scope ([data-switch="side-icons"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track{ width:42px; height:22px; } }
  @scope ([data-switch="side-icons"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__knob{ width:18px; height:18px; } }
  @scope ([data-switch="side-icons"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch input:checked + .sg-switch__track .sg-switch__knob{ transform:translateX(20px); } }
  @scope ([data-switch="side-icons"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__slot{ opacity:1; } }
  @scope ([data-switch="side-icons"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__slot--l{ left:4px; color:var(--on-primary); } }
  @scope ([data-switch="side-icons"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__slot--r{ right:4px; color:var(--text-subtle); } }

  /* D09 · COMPACTO — a versão densa, para barras e tabelas */
  @scope ([data-switch="compact"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track{ width:30px; height:16px; } }
  @scope ([data-switch="compact"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track .sg-switch__knob{ width:12px; height:12px; } }
  @scope ([data-switch="compact"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch input:checked + .sg-switch__track .sg-switch__knob{ transform:translateX(14px); } }

  /* D10 · HOLOFOTE — uma luz suave segue o cursor pela linha */
  @scope ([data-switch="spotlight"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch{ isolation:isolate; padding:6px 10px; margin:-6px -10px; border-radius:var(--radius-md); overflow:hidden; } }
  @scope ([data-switch="spotlight"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch__track, :scope/*data-switch*/ .sg-switch > span{ position:relative; z-index:1; } }
  @scope ([data-switch="spotlight"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch::before{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; opacity:0;
    background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--primary) 22%,transparent), transparent 60%);
    transition:opacity var(--duration-base) var(--ease-standard); } }
  @scope ([data-switch="spotlight"]) to ([data-switch]) { :scope/*data-switch*/ .sg-switch:not(.is-disabled):hover::before{ opacity:1; } }

  /* ════════════ ANIMAÇÕES — 10 comportamentos ao ligar ════════════ */

  /* A01 · PADRÃO — o knob desliza (linha de base) */

  /* A02 · CARIMBO — chega comprimindo (squash) */
  @scope ([data-switch-fx="stamp"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch__track .sg-switch__knob{ transition:transform var(--sg-switch-t-500) var(--ease-spring); } }
  @scope ([data-switch-fx="stamp"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch input:checked + .sg-switch__track .sg-switch__knob{ animation:a2knob var(--sg-switch-t-500) var(--ease-spring); } }
  @keyframes a2knob{ 0%{ transform:translateX(0) scale(1); } 50%{ transform:translateX(16px) scale(1.18,.82); } 100%{ transform:translateX(16px) scale(1); } }

  /* A03 · TINTA — a cor preenche a trilha como um traço */
  @scope ([data-switch-fx="ink"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch__track .sg-switch__ink{ display:block; } }
  @scope ([data-switch-fx="ink"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch input:checked + .sg-switch__track{ background:var(--gray-300); } }
  @scope ([data-switch-fx="ink"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch input:checked + .sg-switch__track .sg-switch__ink{ transform:scaleX(1); } }

  /* A04 · PREENCHE — a cor cresce da esquerda */
  @scope ([data-switch-fx="fill"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch__track .sg-switch__fill{ display:block; } }
  @scope ([data-switch-fx="fill"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch input:checked + .sg-switch__track{ background:var(--gray-300); } }
  @scope ([data-switch-fx="fill"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch input:checked + .sg-switch__track .sg-switch__fill{ transform:scaleX(1); } }

  /* A05 · LÍQUIDO — o knob vira blob enquanto desliza */
  @scope ([data-switch-fx="liquid"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch__track .sg-switch__knob{ transition:transform var(--sg-switch-t-550) var(--ease-spring); } }
  @scope ([data-switch-fx="liquid"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch input:checked + .sg-switch__track .sg-switch__knob{ animation:cc-goo 3.4s var(--ease-in-out) infinite; } }

  /* A06 · SALTO — o knob comprime e salta para o outro lado */
  @scope ([data-switch-fx="hop"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch__track .sg-switch__knob{ transition:transform var(--sg-switch-t-500) var(--ease-spring); } }
  @scope ([data-switch-fx="hop"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch input:checked + .sg-switch__track .sg-switch__knob{ animation:a6hop var(--sg-switch-t-500) var(--ease-spring); } }
  @keyframes a6hop{ 0%{ transform:translateX(0) scale(1,1); } 30%{ transform:translateX(2px) scale(1.2,.78); } 60%{ transform:translateX(16px) translateY(-5px) scale(.82,1.2); } 100%{ transform:translateX(16px) scale(1,1); } }

  /* A07 · HOLOFOTE — a trilha brilha ao ligar e permanece */
  @scope ([data-switch-fx="glow"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch input:checked + .sg-switch__track{ box-shadow:0 0 14px color-mix(in srgb,var(--primary) 50%,transparent); animation:a7bloom var(--sg-switch-t-600) var(--ease-out); } }
  @keyframes a7bloom{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 60%,transparent); } 100%{ box-shadow:0 0 14px color-mix(in srgb,var(--primary) 50%,transparent); } }

  /* A08 · ONDA — um anel emana da trilha */
  @scope ([data-switch-fx="wave"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch__track{ overflow:visible; } }
  @scope ([data-switch-fx="wave"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch input:checked + .sg-switch__track::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
    border:2px solid var(--primary); animation:a8ring var(--sg-switch-t-650) var(--ease-out); pointer-events:none; } }
  @keyframes a8ring{ 0%{ transform:scale(1); opacity:.45; } 100%{ transform:scale(1.5); opacity:0; } }

  /* A09 · DOBRA — o knob gira em 3D enquanto desliza */
  @scope ([data-switch-fx="flip"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch__track .sg-switch__knob{ transition:transform var(--duration-base) var(--ease-spring); } }
  @scope ([data-switch-fx="flip"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch input:checked + .sg-switch__track .sg-switch__knob{ animation:a9flip var(--sg-switch-t-500) var(--ease-spring); } }
  @keyframes a9flip{ 0%{ transform:translateX(0) rotateY(0); } 100%{ transform:translateX(16px) rotateY(360deg); } }

  /* A10 · PULSO — a trilha respira e brilha quando ligada */
  @scope ([data-switch-fx="pulse"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch input:checked + .sg-switch__track{ animation:a10sw 2.6s var(--ease-in-out) infinite; } }
  @scope ([data-switch-fx="pulse"]) to ([data-switch-fx]) { :scope/*data-switch-fx*/ .sg-switch:nth-of-type(2n) input:checked + .sg-switch__track{ animation-delay:-1.1s; } }
  @keyframes a10sw{ 0%,100%{ box-shadow:0 0 0 0 transparent; } 50%{ box-shadow:0 0 14px 1px color-mix(in srgb,var(--primary) 50%,transparent); } }