/* Usado por Components/UI/Modal.razor — novo componente, sem equivalente no protótipo,
   segue os mesmos tokens (hairline, papel, radius/espessura por tema, sem sombra pesada). */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(24, 20, 14, .35);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 100;
}
/* Focado via JS (FocusAsync) só pra Esc funcionar assim que o modal abre — não é navegação
   por teclado de verdade, então não queremos o anel de foco visível aqui. */
.modal-backdrop:focus-visible { outline: none; }
.modal {
  background: var(--surface); border: var(--border-w) solid var(--line-strong);
  border-radius: var(--r); width: 100%; max-width: 480px;
  max-height: calc(100vh - 48px); display: flex; flex-direction: column;
  box-shadow: 0 8px 24px rgba(24, 20, 14, .12);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: var(--border-w) solid var(--line);
}
.modal-head b { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: var(--display-weight); }
.modal-close { border: 0; background: transparent; color: var(--ink-3); font-size: var(--fs-lg); line-height: 1; padding: 4px; }
.modal-close:hover { color: var(--ink); }
.modal-body { padding: 20px; overflow-y: auto; font-size: var(--fs-sm); color: var(--ink-2); }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--line);
}