/* =============================================================================
   Aviso de nova versão — APP-V2-9.1 (js/versao.js, só em modo api)
   Cartão pequeno no canto inferior esquerdo, ao lado da sidebar: não cobre o
   drawer (que abre à direita) nem rouba o foco. Fica acima do scrim do drawer
   para continuar visível enquanto alguém digita nele.
   Arquivo próprio: o app.css tem um @media sem fechamento perto do fim.
   ========================================================================== */
.sf-versao:empty { display: none; }
.sf-versao {
  position: fixed; left: calc(var(--sidebar-width) + 24px); bottom: 20px; z-index: 75;
  display: flex; align-items: flex-start; gap: 14px;
  width: min(400px, calc(100vw - var(--sidebar-width) - 48px));
  padding: 14px 12px 14px 16px;
  background: var(--bg-card); color: var(--t-base);
  border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-lg);
  font-size: 13px; line-height: 1.45;
  animation: sf-versao-entra .2s ease-out;
}
.sf-versao-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sf-versao-tit { font-family: var(--ff-tight); font-size: 14px; font-weight: 700; letter-spacing: -.015em; }
.sf-versao-txt > span { color: var(--t-muted); }
.sf-versao-nota {
  margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r-control);
  background: var(--warning-soft); color: var(--t-base);
}
.sf-versao-acoes { display: flex; margin-top: 10px; }
.sf-versao .x {
  flex: none; margin: -6px -2px 0 0;
  border: 0; background: transparent; color: var(--t-muted); font-size: 16px; line-height: 1;
  min-width: 32px; min-height: 32px; border-radius: var(--r-control); cursor: pointer;
}
.sf-versao .x:hover { background: var(--bg-muted); color: var(--t-base); }
.sf-versao :is(.btn, .x):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@keyframes sf-versao-entra { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
/* telas sem sidebar (entrada): canto esquerdo da página */
body:not(:has(.sidebar)) .sf-versao { left: 24px; width: min(400px, calc(100vw - 48px)); }

@media (prefers-reduced-motion: reduce) { .sf-versao { animation: none; } }

/* sidebar recolhida (≤1024px): canto esquerdo com 16px de margem, sem chegar ao botão
   de estados do protótipo (canto direito); no celular sobe acima dele */
@media (max-width: 1024px) {
  .sf-versao { left: 16px; bottom: 16px; width: min(400px, calc(100vw - 32px)); }
}
@media (max-width: 480px) {
  .sf-versao { bottom: 64px; }
}
@media print { .sf-versao { display: none; } }