/* Janela (Atlassian Modal dialog) com <dialog>. Larguras: pequena, media, grande.
   <c-janela id="…" titulo="…"> com slot "rodape" para os botões. */

.ds-janela {
  width: min(37.5rem, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  padding: 0;
  border: 0;
  border-radius: var(--raio-grande);
  background: var(--cor-sobreposicao);
  color: var(--cor-texto);
  box-shadow: var(--sombra-sobreposta);
}
.ds-janela::backdrop { background: var(--cor-cortina); }
.ds-janela--pequena { width: min(25rem, calc(100vw - 2rem)); }
.ds-janela--grande { width: min(50rem, calc(100vw - 2rem)); }
.ds-janela__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-200); padding: var(--espaco-300) var(--espaco-300) var(--espaco-200); }
.ds-janela__titulo { font: var(--fonte-titulo-m); margin: 0; }
.ds-janela__corpo { padding: 0 var(--espaco-300); overflow: auto; }
.ds-janela__rodape { display: flex; justify-content: flex-end; gap: var(--espaco-100); padding: var(--espaco-300); }