/* SAIR — contorno fino inclinado, discreto; no hover esquenta para vermelho
   alaranjado e a seta sai pela porta. Arquivo independente.
   Estados: :hover, :active, :focus-visible, :disabled.

   <button type="button" class="bv-sair">
     <svg viewBox="0 0 24 24" aria-hidden="true">…</svg>Sair
   </button> */
.bv-sair {
  --bv-inclinacao: -12deg;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 calc(12px - .16em) 0 12px;
  border: 0; background: none; color: #8c9099; cursor: pointer;
  font: 700 10px/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  transition: color .16s;
  -webkit-tap-highlight-color: transparent;
}
.bv-sair::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: skewX(var(--bv-inclinacao)); border-radius: 2px;
  box-shadow: inset 0 0 0 1px #ffffff2b;
  transition: box-shadow .16s, background .16s;
}
.bv-sair svg {
  width: 12px; height: 12px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .16s;
}
.bv-sair:hover:not(:disabled) { color: #ff6a4d; }
.bv-sair:hover:not(:disabled)::before { box-shadow: inset 0 0 0 1px #ff6a4d80; background: #ff6a4d14; }
.bv-sair:hover:not(:disabled) svg { transform: translateX(2px); }
.bv-sair:active:not(:disabled) { transform: translateY(1px); }
.bv-sair:focus-visible { outline: none; color: #f4f5f7; }
.bv-sair:focus-visible::before { box-shadow: inset 0 0 0 1px #ffffff5c, 0 0 0 2px #07080b, 0 0 0 4px #ffd84a; }
.bv-sair:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .bv-sair svg { transition: none; } }
/* O display acima venceria o [hidden] do navegador. */
.bv-sair[hidden] { display: none; }