/* 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;
}

/* Pop-up que cresce do botão que o abriu (data-dialogo-crescer): o js anima a caixa saindo do botão e
   voltando para ele, no lugar destas animações; o véu entra e sai como sempre. */
.dialogo[open][data-crescendo],
.dialogo[data-fechando][data-crescendo] {
  animation: none;
}

.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%);
  }
}

/* Pop-up de vídeo: quase a tela toda, no escuro, com o vídeo em 16:9 (componentes/_video.html).
   Uso: <dialog class="dialogo dialogo--video" aria-label="..."> com o botão de fechar e o vídeo.
   O botão de fechar some junto com os controles do vídeo, quando ele fica parado tocando. */
.dialogo--video {
  width: min(94vw, calc(88vh * 16 / 9));
  max-height: none;
  color: var(--cor-off-white);
  background: var(--cor-grafite);
  border: 0;
  border-radius: var(--raio-3);
}

.dialogo--video::backdrop {
  background: color-mix(in srgb, var(--cor-grafite) 86%, transparent);
}

.dialogo--video .dialogo__fechar {
  z-index: 4;
  color: var(--cor-off-white);
  background: color-mix(in srgb, var(--cor-grafite) 55%, transparent);
  transition: opacity var(--duracao-3) var(--curva-padrao);
}

.dialogo--video .dialogo__fechar:hover {
  background: color-mix(in srgb, var(--cor-off-white) 16%, transparent);
}

.dialogo--video:has(.video--quieto) .dialogo__fechar {
  opacity: 0;
}

/* No celular, o vídeo fica no meio da tela, de ponta a ponta (a folha é para formulário). */
@media (max-width: 600px) {
  .dialogo--video {
    width: 100vw;
    max-height: none;
    margin: auto;
    border-radius: 0;
  }
}