/* Janela sobre a tela (modal): `c.janela` em src/portal/ui/componentes.py.

   A primeira é a resposta da Petrobras à solicitação de posto, em
   Colaboradores (pedido do Riquelme em 22/09/2026: clicar na linha, e a
   data, a observação e o anexo da resposta numa janela só daquele pedido).

   Escrito à mão, e não em classe do Tailwind, pelo motivo da câmera do ponto
   (32-ponto-selfie.css): o CSS do Tailwind não é versionado e só existe
   depois do `npm run css` ou dentro da imagem. Sem ele a janela deixaria de
   ser fixa e de cobrir a tela.

   Empilhamento: a sidebar do celular é 50, a janela 90 e o véu de
   carregamento 100 (20-carregando.css). O véu fica POR CIMA da janela, e
   segura o segundo clique em "Autorizada" enquanto o primeiro grava. */

.janela {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(17, 24, 39, 0.45);
}

/* Sem esta linha, o display:flex acima vence o `hidden`. A segunda vale para
   o que a janela esconde dentro dela (os botões de cada situação): uma
   classe `flex` num elemento escondido venceria o `hidden` do mesmo jeito. */
.janela[hidden],
.janela [hidden] {
  display: none !important;
}

/* Em tela baixa (notebook, celular deitado) quem rola é o meio do painel:
   o título e os botões do rodapé ficam sempre à vista, e a página atrás não
   se mexe. Medido a 1280 x 900: com o painel rolando inteiro, o Autorizada
   ficava abaixo da dobra. */
.janela-painel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 36rem;
  max-height: calc(100vh - 32px);
}

.janela-painel > header,
.janela-painel > footer {
  flex: 0 0 auto;
}

/* `overflow-wrap: anywhere`: um trecho longo sem espaço (link do SharePoint,
   nome de arquivo) na justificativa ou na observação quebra a linha. Sem ele,
   a 375 px o corpo rolava de lado (589 px de conteúdo em 331). */
.janela-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

/* A frase de erro fica fora da rolagem, logo acima do rodapé: no fim do corpo
   ela caía abaixo da parte visível (medido a 375 x 812 e a 1280 x 720), e
   quem clicava Recusada não via nada acontecer. Vazia, não ocupa espaço. */
.janela-mensagem {
  flex: 0 0 auto;
  padding: 0 1.25rem 1rem;
  overflow-wrap: anywhere;
}

.janela-mensagem:empty {
  display: none;
}

/* O painel recebe o foco quando a janela não tem campo para ele
   (34-janela.js); sem esta linha, o contorno do navegador cercaria o painel. */
.janela-painel:focus {
  outline: none;
}