/* sg-drop — GERADO por `manage.py port_card_css` (design/card_ports.py).
 * Não editar à mão.
 * Zonas de soltar, byte a byte do <style> de components/forms/file-upload.card.html (bundle
 * 8cd72241, ZIP 48ebf484759c), sem a legenda `.sub` da demonstração. Cada um dos 10 designs tem
 * a sua própria estrutura: o template desenha os 10 e o eixo data-upload mostra um
 * (static/css/forms-field.css) — por isso nada aqui precisa de escopo.
 * Mudanças mecânicas e reversíveis: a zona padrão ganha os nomes do FileUpload.jsx (`.zone` →
 * `.sg-drop__zone`, `__ic` / `__t` / `__h` → `.sg-drop__icon` / `__title` / `__hint`), cada
 * raiz curta vira `.sg-drop-<design>` (`.scan`, `.stack`, `.geo`, `.split`, `.folder`, `.seal`,
 * `.ticket`, `.ruled`, `.tile(s)`; `.tcap` → `.sg-drop-tile__cap`), o arrastando `.over` →
 * `.is-over` e as peças `.s1` / `.s2` / `.tl` / `.tr` / `.bl` / `.br` → `.is-*`. Um reparo: o
 * `:not(.dis)` do hover vira `:not(.is-disabled)`, o estado desabilitado do FileUpload.jsx.
 * Tempos finitos e raios cravados viram tokens; o feixe da Digitalização (laço) fica literal.
 * Marcação: {% sg_upload "attachments" %} (templatetags/sg_upload.py). */
  /* ════════════ 01 · PADRÃO (idle + arrastando + inline) ════════════ */
  .sg-drop__zone{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    gap:6px; padding:26px; min-height:128px; background:var(--surface-sunken); color:var(--text-muted);
    border:1.5px dashed var(--border-strong); border-radius:var(--radius-lg); cursor:pointer;
    transition:border-color var(--sg-fileupload-t-140) var(--ease-standard), background-color var(--sg-fileupload-t-140), color var(--sg-fileupload-t-140); }
  .sg-drop__zone:hover:not(.is-disabled), .sg-drop__zone.is-over{ border-color:var(--primary); background:var(--primary-bg); }
  .sg-drop__zone.is-over{ border-style:solid; color:var(--primary-text); }
  .sg-drop__icon{ display:grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-full);
    background:var(--surface); border:1px solid var(--border); color:var(--primary); box-shadow:var(--shadow-xs); }
  .sg-drop__icon svg{ width:22px; height:22px; }
  .sg-drop__title{ font-size:var(--text-base); color:var(--text); font-weight:500; } .sg-drop__title b{ color:var(--primary-text); font-weight:600; }
  .sg-drop__hint{ font-size:var(--text-sm); color:var(--text-subtle); }
  .sg-drop__zone--inline{ flex-direction:row; min-height:0; padding:0 14px; height:var(--control-h); gap:10px; justify-content:flex-start; cursor:pointer; }
  .sg-drop__zone--inline .sg-drop__icon{ width:24px; height:24px; box-shadow:none; } .sg-drop__zone--inline .sg-drop__icon svg{ width:15px; height:15px; }
  .sg-drop__zone--inline .sg-drop__title{ font-size:var(--text-sm); }

  /* ════════════ 02 · MOLDURA DE DIGITALIZAÇÃO ════════════ */
  .sg-drop-scan{ position:relative; min-height:172px; display:grid; place-items:center; text-align:center;
    background:radial-gradient(circle at 50% 42%, color-mix(in srgb,var(--accent) 7%, transparent), transparent 60%), var(--surface-sunken);
    border-radius:var(--radius-lg); cursor:pointer; overflow:hidden; transition:background-color var(--sg-fileupload-t-140); }
  .sg-drop-scan:hover .sg-drop-scan__br, .sg-drop-scan.is-over .sg-drop-scan__br{ border-color:var(--accent); }
  .sg-drop-scan__br{ position:absolute; width:34px; height:34px; border:2.5px solid var(--border-strong); transition:border-color var(--sg-fileupload-t-140); }
  .sg-drop-scan__br.is-tl{ top:18px; left:18px; border-right:0; border-bottom:0; border-radius:var(--sg-fileupload-r-8) 0 0 0; }
  .sg-drop-scan__br.is-tr{ top:18px; right:18px; border-left:0; border-bottom:0; border-radius:0 var(--sg-fileupload-r-8) 0 0; }
  .sg-drop-scan__br.is-bl{ bottom:18px; left:18px; border-right:0; border-top:0; border-radius:0 0 0 var(--sg-fileupload-r-8); }
  .sg-drop-scan__br.is-br{ bottom:18px; right:18px; border-left:0; border-top:0; border-radius:0 0 var(--sg-fileupload-r-8) 0; }
  .sg-drop-scan__beam{ position:absolute; left:18px; right:18px; top:46px; height:2px; border-radius:var(--sg-fileupload-r-2);
    background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.8; animation:beam 2.6s var(--ease-standard) infinite; }
  @keyframes beam{ 0%{ transform:translateY(0); } 50%{ transform:translateY(78px); } 100%{ transform:translateY(0); } }
  .sg-drop-scan__c{ display:flex; flex-direction:column; align-items:center; gap:8px; z-index:1; }
  .sg-drop-scan__ic{ color:var(--accent); } .sg-drop-scan__ic svg{ width:30px; height:30px; }
  .sg-drop-scan__t{ font-size:var(--text-base); font-weight:600; color:var(--text); }
  .sg-drop-scan__h{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--text-subtle); }

  /* ════════════ 03 · PILHA DE DOCUMENTOS ════════════ */
  .sg-drop-stack{ position:relative; padding:6px 0 2px; }
  .sg-drop-stack__sheet{ position:absolute; left:50%; top:14px; width:84%; height:118px; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-xs); }
  .sg-drop-stack__sheet.is-back{ transform:translateX(-50%) rotate(-3.5deg); }
  .sg-drop-stack__sheet.is-front{ transform:translateX(-50%) rotate(2.5deg); }
  .sg-drop-stack__zone{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:7px; min-height:140px; text-align:center; background:var(--surface); border:1.5px dashed var(--border-strong);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); cursor:pointer; transition:border-color var(--sg-fileupload-t-140), background-color var(--sg-fileupload-t-140); }
  .sg-drop-stack__zone:hover, .sg-drop-stack__zone.is-over{ border-color:var(--primary); background:var(--primary-bg); }
  .sg-drop-stack__ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:var(--radius-md);
    background:var(--primary-bg); border:1px solid var(--primary-border); color:var(--primary); }
  .sg-drop-stack__ic svg{ width:23px; height:23px; }
  .sg-drop-stack__t{ font-size:var(--text-base); font-weight:500; color:var(--text); } .sg-drop-stack__t b{ color:var(--primary-text); font-weight:600; }
  .sg-drop-stack__h{ font-size:var(--text-sm); color:var(--text-subtle); }

  /* ════════════ 04 · DROP GEOESPACIAL ════════════ */
  .sg-drop-geo{ position:relative; min-height:158px; display:grid; place-items:center; text-align:center; overflow:hidden;
    border:1.5px solid var(--accent-bg); border-radius:var(--radius-lg); cursor:pointer;
    background:
      linear-gradient(color-mix(in srgb,var(--accent) 11%, transparent) 1px, transparent 1px) 0 0/28px 28px,
      linear-gradient(90deg, color-mix(in srgb,var(--accent) 11%, transparent) 1px, transparent 1px) 0 0/28px 28px,
      radial-gradient(closest-side, transparent 60%, color-mix(in srgb,var(--accent) 9%, transparent) 61% 63%, transparent 64%) 50% 46%/150px 150px no-repeat,
      var(--surface);
    transition:border-color var(--sg-fileupload-t-140), background-color var(--sg-fileupload-t-140); }
  .sg-drop-geo:hover, .sg-drop-geo.is-over{ border-color:var(--accent); }
  .sg-drop-geo__c{ display:flex; flex-direction:column; align-items:center; gap:8px; z-index:1; }
  .sg-drop-geo__pin{ display:grid; place-items:center; width:48px; height:48px; border-radius:var(--radius-full);
    background:var(--surface); border:1px solid var(--accent-bg); color:var(--accent); box-shadow:var(--shadow-sm); }
  .sg-drop-geo__pin svg{ width:24px; height:24px; }
  .sg-drop-geo__t{ font-size:var(--text-base); font-weight:600; color:var(--text); }
  .sg-drop-geo__chips{ display:flex; gap:6px; }
  .sg-drop-geo__chip{ font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--accent-text);
    background:var(--accent-bg); border-radius:var(--radius-full); padding:3px 9px; }

  /* ════════════ 05 · FAIXA DIVIDIDA ════════════ */
  .sg-drop-split{ display:flex; align-items:stretch; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; min-height:120px; transition:border-color var(--sg-fileupload-t-140); }
  .sg-drop-split.is-over{ border-color:var(--primary); }
  .sg-drop-split__art{ flex:none; width:148px; display:grid; place-items:center; color:var(--on-primary);
    background:linear-gradient(150deg, var(--primary), var(--primary-active)); position:relative; overflow:hidden; }
  .sg-drop-split__art::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 10px, transparent 10px 20px); }
  .sg-drop-split__art svg{ width:40px; height:40px; position:relative; }
  .sg-drop-split__body{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:18px 22px; }
  .sg-drop-split__t{ font-family:var(--font-display); font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--text); }
  .sg-drop-split__h{ font-size:var(--text-sm); color:var(--text-muted); line-height:1.45; }
  .sg-drop-split__btn{ align-self:flex-start; margin-top:8px; display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--on-primary); background:var(--primary);
    border:none; border-radius:var(--radius-md); padding:9px 16px; cursor:pointer; transition:background var(--sg-fileupload-t-120); }
  .sg-drop-split__btn:hover{ background:var(--primary-hover); } .sg-drop-split__btn svg{ width:16px; height:16px; }

  /* ════════════ 06 · PASTA COM ABA ════════════ */
  .sg-drop-folder{ position:relative; padding-top:18px; cursor:pointer; }
  .sg-drop-folder__tab{ position:absolute; top:0; left:24px; height:22px; padding:0 14px; display:flex; align-items:center;
    font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--primary-text);
    background:var(--primary-bg); border:1px solid var(--primary-border); border-bottom:none; border-radius:var(--sg-fileupload-r-8) var(--sg-fileupload-r-8) 0 0; transition:background var(--sg-fileupload-t-140); }
  .sg-drop-folder__body{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:128px; text-align:center;
    background:var(--surface-sunken); border:1.5px dashed var(--border-strong); border-radius:0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
    transition:border-color var(--sg-fileupload-t-140), background-color var(--sg-fileupload-t-140); }
  .sg-drop-folder:hover .sg-drop-folder__body, .sg-drop-folder.is-over .sg-drop-folder__body{ border-color:var(--primary); background:var(--primary-bg); }
  .sg-drop-folder__ic{ display:grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-full);
    background:var(--surface); border:1px solid var(--border); color:var(--primary); box-shadow:var(--shadow-xs); }
  .sg-drop-folder__ic svg{ width:22px; height:22px; }
  .sg-drop-folder__t{ font-size:var(--text-base); font-weight:500; color:var(--text); } .sg-drop-folder__t b{ color:var(--primary-text); font-weight:600; }
  .sg-drop-folder__h{ font-size:var(--text-sm); color:var(--text-subtle); }

  /* ════════════ 07 · SELO OFICIAL ════════════ */
  .sg-drop-seal{ display:grid; place-items:center; min-height:176px; cursor:pointer; }
  .sg-drop-seal__ring{ position:relative; width:128px; height:128px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    text-align:center; background:var(--surface-sunken); border:2px dashed var(--border-strong); transition:border-color var(--sg-fileupload-t-140), background-color var(--sg-fileupload-t-140); }
  .sg-drop-seal__ring::before{ content:""; position:absolute; inset:9px; border-radius:50%; border:1.5px solid var(--border); transition:border-color var(--sg-fileupload-t-140); }
  .sg-drop-seal:hover .sg-drop-seal__ring, .sg-drop-seal.is-over .sg-drop-seal__ring{ border-color:var(--primary); background:var(--primary-bg); }
  .sg-drop-seal:hover .sg-drop-seal__ring::before, .sg-drop-seal.is-over .sg-drop-seal__ring::before{ border-color:var(--primary-border); }
  .sg-drop-seal__ic{ color:var(--primary); z-index:1; } .sg-drop-seal__ic svg{ width:30px; height:30px; }
  .sg-drop-seal__t{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); z-index:1; }

  /* ════════════ 08 · BILHETE PERFURADO ════════════ */
  .sg-drop-ticket{ position:relative; display:flex; align-items:center; gap:18px; min-height:118px; padding:0 22px 0 26px; margin:0 8px;
    background:var(--surface); border:1.5px dashed var(--border-strong); border-radius:var(--radius-lg); cursor:pointer; transition:border-color var(--sg-fileupload-t-140), background-color var(--sg-fileupload-t-140); }
  .sg-drop-ticket:hover, .sg-drop-ticket.is-over{ border-color:var(--primary); background:var(--primary-bg); }
  .sg-drop-ticket::before, .sg-drop-ticket::after{ content:""; position:absolute; top:50%; width:18px; height:18px; border-radius:50%;
    background:var(--surface); border:1.5px solid var(--border-strong); transform:translateY(-50%); }
  .sg-drop-ticket::before{ left:-9px; } .sg-drop-ticket::after{ right:-9px; }
  .sg-drop-ticket__ic{ flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:var(--radius-md);
    background:var(--surface-sunken); border:1px solid var(--border); color:var(--primary); }
  .sg-drop-ticket__ic svg{ width:23px; height:23px; }
  .sg-drop-ticket__perf{ align-self:stretch; margin:16px 0; border-left:2px dashed var(--border-strong); }
  .sg-drop-ticket__body{ flex:1; min-width:0; }
  .sg-drop-ticket__t{ font-size:var(--text-base); font-weight:600; color:var(--text); }
  .sg-drop-ticket__h{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em; color:var(--text-subtle); margin-top:3px; }

  /* ════════════ 09 · PAUTA / FORMULÁRIO PAUTADO ════════════ */
  .sg-drop-ruled{ position:relative; min-height:140px; padding:14px 18px 14px 32px; cursor:pointer; overflow:hidden;
    background:
      linear-gradient(transparent 27px, color-mix(in srgb,var(--text) 8%, transparent) 27px, color-mix(in srgb,var(--text) 8%, transparent) 28px, transparent 28px) 0 8px/100% 28px,
      var(--surface);
    border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-xs); transition:border-color var(--sg-fileupload-t-140); }
  .sg-drop-ruled::before{ content:""; position:absolute; left:22px; top:0; bottom:0; width:1.5px; background:color-mix(in srgb,var(--negative) 45%, transparent); }
  .sg-drop-ruled:hover, .sg-drop-ruled.is-over{ border-color:var(--primary); }
  .sg-drop-ruled__cap{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-subtle); margin-bottom:18px; }
  .sg-drop-ruled__add{ display:inline-flex; align-items:center; gap:9px; height:34px; padding:0 14px;
    font-size:var(--text-sm); font-weight:500; color:var(--primary-text); background:var(--surface);
    border:1.4px dashed var(--border-strong); border-radius:var(--radius-full); transition:border-color var(--sg-fileupload-t-140), background-color var(--sg-fileupload-t-140); }
  .sg-drop-ruled:hover .sg-drop-ruled__add, .sg-drop-ruled.is-over .sg-drop-ruled__add{ border-color:var(--primary); background:var(--primary-bg); }
  .sg-drop-ruled__add svg{ width:16px; height:16px; }

  /* ════════════ 10 · GALERIA DE TILES ════════════ */
  .sg-drop-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
  .sg-drop-tile{ aspect-ratio:1; border:1.5px dashed var(--border-strong); border-radius:var(--radius-lg); display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center; color:var(--text-subtle); cursor:pointer; background:var(--surface-sunken); transition:border-color var(--sg-fileupload-t-120), background var(--sg-fileupload-t-120), color var(--sg-fileupload-t-120); }
  .sg-drop-tile:hover, .sg-drop-tile.is-over{ border-color:var(--primary); background:var(--primary-bg); color:var(--primary-text); }
  .sg-drop-tile svg{ width:20px; height:20px; }
  .sg-drop-tile__lab{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.04em; }
  .sg-drop-tile--filled{ border-style:solid; border-color:var(--border); padding:0; overflow:hidden; position:relative; background:
    repeating-linear-gradient(135deg, var(--surface-sunken) 0 7px, var(--surface) 7px 14px); }
  .sg-drop-tile--filled .sg-drop-tile__cap{ position:absolute; left:0; right:0; bottom:0; font-family:var(--font-mono); font-size:9.5px; color:var(--text-muted);
    background:color-mix(in srgb,var(--surface) 86%, transparent); padding:3px 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  @media (prefers-reduced-motion: reduce){ .sg-drop-scan__beam{ animation:none; } }