/* Diálogo (pop-up). Usa o <dialog> do navegador, que já cuida do foco e da tecla Esc,
   com a aparência do sistema. No celular, vira uma folha que sobe de baixo.
   Abrir: <button data-abrir-dialogo="id">. Fechar: <button data-fechar-dialogo>,
   Esc ou clique fora (js/componentes/dialogo.js). */

.dialogo {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: min(88vh, 860px);
  margin: auto;
  padding: 0;
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-4);
  box-shadow: var(--sombra-3);
  overflow: hidden;
}

.dialogo--largo {
  width: min(760px, calc(100vw - 32px));
}

.dialogo[open] {
  display: flex;
  flex-direction: column;
  animation: dialogo-entrar var(--duracao-4) var(--curva-saida);
}

.dialogo[data-fechando] {
  animation: dialogo-sair var(--duracao-3) var(--curva-padrao) forwards;
}

.dialogo::backdrop {
  background: var(--cor-veu);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  animation: veu-entrar var(--duracao-4) var(--curva-saida);
}

.dialogo[data-fechando]::backdrop {
  animation: veu-sair var(--duracao-3) var(--curva-padrao) forwards;
}

.dialogo__cabecalho {
  position: relative;
  display: grid;
  gap: 6px;
  padding: var(--espaco-5) var(--espaco-7) var(--espaco-4) var(--espaco-5);
  border-bottom: 1px solid var(--cor-borda);
}

.dialogo__titulo {
  font-size: var(--titulo-sm);
}

.dialogo__subtitulo {
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

.dialogo__fechar {
  position: absolute;
  top: var(--espaco-3);
  right: var(--espaco-3);
}

.dialogo__corpo {
  flex: 1;
  padding: var(--espaco-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dialogo__rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--espaco-2);
  padding: var(--espaco-4) var(--espaco-5);
  background: var(--cor-superficie-suave);
  border-top: 1px solid var(--cor-borda);
}

@keyframes dialogo-entrar {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
}

@keyframes dialogo-sair {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

@keyframes veu-entrar {
  from {
    opacity: 0;
  }
}

@keyframes veu-sair {
  to {
    opacity: 0;
  }
}

/* Celular: folha que sobe de baixo, colada na borda. */
@media (max-width: 600px) {
  .dialogo,
  .dialogo--largo {
    width: 100vw;
    max-height: 92vh;
    margin: auto 0 0;
    border-bottom: 0;
    border-radius: var(--raio-4) var(--raio-4) 0 0;
  }

  .dialogo[open] {
    animation-name: folha-entrar;
  }

  .dialogo[data-fechando] {
    animation-name: folha-sair;
  }

  /* A alça no topo da folha. */
  .dialogo__cabecalho::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    background: var(--cor-borda-forte);
    border-radius: var(--raio-pilula);
  }
}

@keyframes folha-entrar {
  from {
    transform: translateY(100%);
  }
}

@keyframes folha-sair {
  to {
    transform: translateY(100%);
  }
}