/* sg-tip — GERADO por `manage.py port_card_css` (design/card_ports.py).
 * Não editar à mão.
 * Dica de hover/foco, do <style> de components/feedback/tooltip.card.html (bundle 8cd72241, ZIP
 * 48ebf484759c). Mudanças mecânicas e reversíveis:
 * - classes do card → as do Tooltip.jsx: `.tipwrap` → `.sg-tip-wrap`, `.tip` → `.sg-tip`,
 *   `.arr` → `.sg-tip__arrow`;
 * - os 10 formatos (`.d1`…`.d10` no bloco do card) valem no eixo data-tooltip e as 10 animações
 *   de entrada (`body[data-anim]`) no eixo data-tooltip-fx. Nos dois o token do card fica num
 *   ancestral, que aqui é a raiz do escopo (`:scope`); nas animações o seletor perde o `body`
 *   e pesa um tipo a menos (nada mais disputa `animation` com ele);
 * - tempos de entrada e o raio do <kbd> viram tokens --sg-tooltip-* (acompanham Movimento e Forma);
 * - CORREÇÃO de digitação do card: em Expandir e Girar faltava o espaço entre `body[…]` e a
 *   dica, e as duas nunca animavam (pendência de brief no design/README).
 * O card mostra as dicas fixas; quando a dica aparece e some é de static/css/components.css e
 * de js/widgets/tooltip.js. Marcação: {% sg_tooltip "Texto" %}…gatilho…{% endsg_tooltip %}. */
  /* ════ TOOLTIP BASE — fixo ESCURO (não inverte com o tema) ════ */
  .sg-tip-wrap{ position:relative; display:inline-flex; }
  .sg-tip{ position:absolute; bottom:calc(100% + 11px); left:50%; transform:translateX(-50%); z-index:5; white-space:nowrap;
    background:var(--gray-900); color:var(--gray-50); font-family:var(--font-sans); font-size:12px; line-height:1.4; font-weight:var(--weight-medium);
    padding:7px 11px; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); pointer-events:none; transform-origin:bottom center; }
  .sg-tip .sg-tip__arrow{ position:absolute; top:100%; left:50%; transform:translateX(-50%); width:0; height:0;
    border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid var(--gray-900); }
  .sg-tip b{ color:#fff; font-weight:700; }
  .sg-tip kbd{ font-family:var(--font-mono); font-size:11px; background:rgba(255,255,255,.16); color:var(--gray-50); border-radius:var(--sg-tooltip-r-4); padding:1px 5px; margin-left:2px; }

  /* ════ 10 DESIGNS ════ */
  /* 01 ESCURO — base fixa (sempre escuro) */
  /* 02 GRAFITE — escuro com borda + degradê (sempre escuro) */
  @scope ([data-tooltip="graphite"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip{ background:linear-gradient(180deg,var(--gray-800),var(--gray-900)); border:1px solid rgba(255,255,255,.13); box-shadow:0 10px 26px -10px rgba(0,0,0,.6); } }
  @scope ([data-tooltip="graphite"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip .sg-tip__arrow{ border-top-color:var(--gray-900); } }
  /* 03 VIDRO — fosco translúcido */
  @scope ([data-tooltip="glass"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip{ background:color-mix(in srgb,var(--gray-900) 52%, transparent); -webkit-backdrop-filter:blur(9px) saturate(1.5); backdrop-filter:blur(9px) saturate(1.5);
    border:1px solid rgba(255,255,255,.2); box-shadow:0 10px 28px -12px rgba(0,0,0,.5); } }
  @scope ([data-tooltip="glass"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip .sg-tip__arrow{ border-top-color:color-mix(in srgb,var(--gray-900) 52%, transparent); } }
  /* 04 RECORTE — canto dobrado (etiqueta) */
  @scope ([data-tooltip="notch"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip{ padding-right:18px; } }
  @scope ([data-tooltip="notch"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip::after{ content:""; position:absolute; top:0; right:0; width:0; height:0; border-top:14px solid var(--surface); border-left:14px solid transparent; } }
  @scope ([data-tooltip="notch"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip::before{ content:""; position:absolute; top:0; right:0; width:0; height:0; border-top:14px solid rgba(255,255,255,.13); border-left:14px solid transparent; transform:scale(.6); transform-origin:top right; } }
  /* 05 ACENTO — claro com barra primária (MANTIDO) */
  @scope ([data-tooltip="accent"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip{ background:var(--surface-elevated); color:var(--text); border:1px solid var(--border); border-left:3px solid var(--primary); padding-left:11px; } }
  @scope ([data-tooltip="accent"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip .sg-tip__arrow{ border-top-color:var(--surface-elevated); } }
  @scope ([data-tooltip="accent"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip b{ color:var(--text); } }
  /* 06 GUIA — marca-guia (coachmark) com conector pontilhado + ponto */
  @scope ([data-tooltip="coachmark"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip{ bottom:calc(100% + 28px); background:var(--primary); color:var(--on-primary); } }
  @scope ([data-tooltip="coachmark"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip b{ color:#fff; } }
  @scope ([data-tooltip="coachmark"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip .sg-tip__arrow{ display:none; } }
  @scope ([data-tooltip="coachmark"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:2px; height:21px;
    background:repeating-linear-gradient(var(--primary) 0 3px, transparent 3px 6px); } }
  @scope ([data-tooltip="coachmark"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip::before{ content:""; position:absolute; top:calc(100% + 19px); left:50%; transform:translateX(-50%); width:7px; height:7px; border-radius:50%;
    background:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 24%, transparent); } }
  /* 07 GRADIENTE — degradê de marca + brilho */
  @scope ([data-tooltip="gradient"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip{ background:linear-gradient(135deg, color-mix(in srgb,var(--primary) 76%, white), var(--primary)); color:var(--on-primary);
    box-shadow:0 10px 24px -8px color-mix(in srgb,var(--primary) 60%, transparent); display:inline-flex; align-items:center; gap:7px; } }
  @scope ([data-tooltip="gradient"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip .sg-tip__arrow{ border-top-color:var(--primary); } }
  @scope ([data-tooltip="gradient"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip b{ color:#fff; } }
  @scope ([data-tooltip="gradient"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip kbd{ background:rgba(255,255,255,.24); color:#fff; } }
  /* 08 BILHETE — pílula com entalhes laterais (ticket) */
  @scope ([data-tooltip="ticket"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip{ border-radius:var(--radius-full); padding:6px 18px; } }
  @scope ([data-tooltip="ticket"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip::before, :scope/*data-tooltip*/ .sg-tip::after{ content:""; position:absolute; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; background:var(--surface); } }
  @scope ([data-tooltip="ticket"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip::before{ left:-4.5px; } } @scope ([data-tooltip="ticket"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip::after{ right:-4.5px; } }
  @scope ([data-tooltip="ticket"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip .sg-tip__arrow{ border-top-color:var(--gray-900); } }
  /* 09 STATUS — colorido pelo estado (MANTIDO) */
  @scope ([data-tooltip="status"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip{ background:var(--warning-bg); color:var(--warning-text); border:1px solid var(--warning-border); box-shadow:var(--shadow-md); display:inline-flex; align-items:center; gap:7px; } }
  @scope ([data-tooltip="status"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip svg{ width:14px; height:14px; } }
  @scope ([data-tooltip="status"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip .sg-tip__arrow{ border-top-color:var(--warning-bg); } }
  @scope ([data-tooltip="status"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip b{ color:var(--warning-text); } }
  /* 10 BRILHO — chip escuro com halo de marca */
  @scope ([data-tooltip="glow"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip{ background:var(--gray-950); border:1px solid color-mix(in srgb,var(--primary) 42%, transparent); border-top-color:color-mix(in srgb,var(--primary) 72%, transparent); color:var(--gray-50);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 18%, transparent), 0 0 22px -2px color-mix(in srgb,var(--primary) 60%, transparent); } }
  @scope ([data-tooltip="glow"]) to ([data-tooltip]) { :scope/*data-tooltip*/ .sg-tip .sg-tip__arrow{ border-top-color:var(--gray-950); } }

  /* ════ 10 ANIMAÇÕES (body[data-anim]) — replay via .replay ════ */
  .sg-tip{ animation-fill-mode:both; }
  @scope ([data-tooltip-fx="fade"]) to ([data-tooltip-fx]) { :scope/*data-tooltip-fx*/  .sg-tip.replay{ animation:tipFade var(--sg-tooltip-t-260) var(--ease-out); } }
  @keyframes tipFade{ from{ opacity:0; } }
  @scope ([data-tooltip-fx="rise"]) to ([data-tooltip-fx]) { :scope/*data-tooltip-fx*/  .sg-tip.replay{ animation:tipRise var(--sg-tooltip-t-300) var(--ease-out); } }
  @keyframes tipRise{ from{ opacity:0; transform:translateX(-50%) translateY(8px); } }
  @scope ([data-tooltip-fx="scale"]) to ([data-tooltip-fx]) { :scope/*data-tooltip-fx*/ .sg-tip.replay{ animation:tipScale var(--sg-tooltip-t-280) var(--ease-spring); } }
  @keyframes tipScale{ from{ opacity:0; transform:translateX(-50%) scale(.7); } }
  @scope ([data-tooltip-fx="spring"]) to ([data-tooltip-fx]) { :scope/*data-tooltip-fx*/.sg-tip.replay, :scope/*data-tooltip-fx*/ .sg-tip.replay{ animation:tipSpring var(--sg-tooltip-t-420) var(--ease-spring); } }
  @keyframes tipSpring{ 0%{ opacity:0; transform:translateX(-50%) translateY(10px) scale(.9); } 60%{ transform:translateX(-50%) translateY(-3px) scale(1.02); } 100%{ transform:translateX(-50%) translateY(0) scale(1); } }
  @scope ([data-tooltip-fx="slide"]) to ([data-tooltip-fx]) { :scope/*data-tooltip-fx*/ .sg-tip.replay{ animation:tipSlide var(--sg-tooltip-t-300) var(--ease-out); } }
  @keyframes tipSlide{ from{ opacity:0; transform:translateX(-50%) translateX(-12px); } }
  @scope ([data-tooltip-fx="drop"]) to ([data-tooltip-fx]) { :scope/*data-tooltip-fx*/  .sg-tip.replay{ animation:tipDrop var(--sg-tooltip-t-320) var(--ease-spring); } }
  @keyframes tipDrop{ 0%{ opacity:0; transform:translateX(-50%) translateY(-12px); } 60%{ transform:translateX(-50%) translateY(2px); } 100%{ transform:translateX(-50%) translateY(0); } }
  @scope ([data-tooltip-fx="expand"]) to ([data-tooltip-fx]) { :scope/*data-tooltip-fx*/ .sg-tip.replay{ animation:tipExpand var(--sg-tooltip-t-300) var(--ease-emphasized); } }
  @keyframes tipExpand{ from{ opacity:0; clip-path:inset(0 50% 0 50%); } to{ opacity:1; clip-path:inset(0 0 0 0); } }
  @scope ([data-tooltip-fx="rotate"]) to ([data-tooltip-fx]) { :scope/*data-tooltip-fx*/ .sg-tip.replay{ animation:tipRot var(--sg-tooltip-t-340) var(--ease-spring); } }
  @keyframes tipRot{ from{ opacity:0; transform:translateX(-50%) rotate(-6deg) scale(.92); } }
  @scope ([data-tooltip-fx="pulse"]) to ([data-tooltip-fx]) { :scope/*data-tooltip-fx*/ .sg-tip.replay{ animation:tipPulse var(--sg-tooltip-t-500) var(--ease-out); } }
  @keyframes tipPulse{ 0%{ transform:translateX(-50%) scale(.96); } 50%{ transform:translateX(-50%) scale(1.04); } 100%{ transform:translateX(-50%) scale(1); } }
  @scope ([data-tooltip-fx="none"]) to ([data-tooltip-fx]) { :scope/*data-tooltip-fx*/  .sg-tip.replay{ animation:none; } }

  @media (prefers-reduced-motion: reduce){ .sg-tip{ animation:none !important; } }