/* Modal: overlay full-screen + cartão central. Componente PRÓPRIO — não confundir com .panel (cards do dashboard). Usado pelo modal de detalhe de tarefa (dashboard, execuções, automações, dados), pelo modal de parâmetros (automações) e pelo modal de certificado (migrado do Tailwind cru em 2026-08-01 - ver components/_certificado_modal.html). Aberto/fechado via JS, que alterna o display inline do .modal-overlay entre 'flex' e 'none'. Estado atual (redesign "glass escuro" 2026-08-01, pedido do usuário): - o PRÓPRIO .modal-overlay borra o que está atrás dele via backdrop-filter (blur forte, --blur-backdrop) - diferente da versão anterior, que dependia de uma classe extra no (.modal-aberto) borrando um wrapper de conteúdo espepcífico de CADA página (só existia no Dashboard). Como backdrop-filter borra "o que está pintado atrás do elemento" sem tocar nos FILHOS do próprio elemento, o cartão do modal (que é filho do overlay) nunca fica borrado - funciona em qualquer página sem precisar de nenhuma classe/seletor por página; - cartão (.modal) com fundo translúcido próprio (estilo "vidro", igual .glass-elev), cantos bem arredondados; - botão de fechar pode usar a variante .modal-close--danger (círculo vermelho, flutuando sobre a borda) - ver mais abaixo; - botão de ação primária (.btn.primary) DENTRO do modal vira uma pill verde, substituindo o azul-gradiente padrão só nesse contexto - ver mais abaixo; - bloco de log (
) sem fundo — transparente (herda o fundo do .modal). */

.modal-overlay {
  display: none;            /* JS faz style.display = 'flex' ao abrir */
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* quase sem escurecimento (pedido do usuário 2026-07-31) - o blur forte
     abaixo já dá contraste/profundidade suficiente sem escurecer a página. */
  background: rgba(5, 8, 16, 0.10);
  backdrop-filter: blur(var(--blur-backdrop));
  -webkit-backdrop-filter: blur(var(--blur-backdrop));
  /* fade suave ao abrir */
  animation: modal-fade 0.45s ease;
}
[data-theme="light"] .modal-overlay {
  background: rgba(210, 220, 240, 0.14);
}

/* fade-in do modal: a animação reinicia toda vez que o JS troca o display
   de none para flex (ou seja, sempre que o modal abre) */
@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* o cartão — fundo translúcido tipo "vidro", MESMO tom de .glass-elev
   (components/surface.css) - pedido do usuário pra todo modal/card do
   sistema usar o mesmo estilo de fundo (mais transparente/menos escuro
   que a versão anterior, 0.92). position:relative ancora o
   .modal-close--danger flutuando sobre o canto superior direito. */
.modal {
  position: relative;
  /* baixou de 0.62 pra 0.50 em 2026-08-06 (pedido do usuario: "torne o
     modal um pouco transparente") - cartao um pouco mais translucido. */
  background: rgba(10, 14, 26, 0.50);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid rgba(138, 150, 175, 0.14);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55);
  width: 100%;
  max-width: 1200px;        /* largura do modal de log */
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  /* contém o "orb" de status (ver .modal--ok/.modal--erro logo abaixo)
     dentro dos cantos arredondados, sem vazar pra fora do cartão. */
  overflow: hidden;
  /* "surgir": cartão nasce um pouco menor/mais baixo e mais transparente,
     cresce até o tamanho normal - igual ao fade do overlay (modal-fade
     acima), reinicia sozinho toda vez que o JS troca display:none -> flex,
     sem precisar de nenhum hook em JS (pedido do usuário 2026-08-06). */
  animation: modal-surgir 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-surgir {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
[data-theme="light"] .modal {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(15, 23, 42, 0.10);
}

/* modal de certificado (components/_certificado_modal.html) - só um
   formulário curto, não precisa da largura do modal de log. Mesmo espírito
   de .autom-params-modal (pages/automacoes.css). */
.cert-modal { max-width: 480px; }

/* cabeçalho do modal (sem linha divisória, para manter o cartão limpo).
   padding-right maior que o resto (64px) pra abrir espaço pro
   .modal-close--danger, que agora fica ENCAIXADO dentro do cartão (não
   mais flutuando pra fora da borda) - ver bloco do botão mais abaixo. */
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* vertical/esquerda migrados pra --space-* (Fase 5, 2026-08-07) - o
     64px da direita fica como está, não é espaçamento "de grid", é o
     respiro calculado pro botão de fechar não sobrepor título comprido. */
  padding: var(--space-4) 64px var(--space-4) var(--space-5);
}
.modal-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* dono do título/meta - min-width:0 é o que permite esse filho ENCOLHER
   dentro do flex pai (senão texto comprido, tipo um parâmetro gigante sem
   espaço pra quebrar, força o cabeçalho inteiro mais largo que o modal e
   empurra o botão de fechar pra fora da área visível - já aconteceu com o
   "codigos" de exportar-contratos, ver automacoes_console.js). */
.modal-heading > div { min-width: 0; }
.modal-meta { overflow-wrap: anywhere; }

/* modal arrastavel pelo cabecalho (static/js/modal-drag.js, global em
   base.html) - cursor de "pode arrastar" na area vazia do cabecalho,
   normal em cima de botao/link (ex: fechar), "arrastando" enquanto o
   ponteiro esta pressionado. */
.modal-head--arrastavel { cursor: grab; }
.modal-head--arrastavel :is(button, a) { cursor: pointer; }
.modal-head--arrastando,
.modal-head--arrastando :is(button, a) { cursor: grabbing !important; }

/* bolinha de status (cor definida via JS) */
.modal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
}

/* "orb" no canto inferior direito do modal - brilho verde/vermelho
   indicando se a execução exibida terminou bem ou com erro (pedido do
   usuário 2026-08-11, olhando o modal de detalhe de execução: "coloca um
   orb no canto verde pra quando a execução der certo e execução der errado
   em vermelho"; canto ajustado no mesmo dia pra inferior direito).
   Classe alternada via JS junto com a cor do .modal-dot - ver
   dashboard.js/execucoes_console.js/automacoes_console.js. z-index
   negativo: fica ATRÁS do cabeçalho/corpo (conteúdo normal do modal já
   pinta por cima de descendentes posicionados com z-index negativo), só
   "vazando" cor através do fundo translúcido do cartão. */
.modal--ok::before,
.modal--erro::before {
  content: "";
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.30;
  pointer-events: none;
  z-index: -1;
}
.modal--ok::before    { background: var(--ok); }
.modal--erro::before  { background: var(--err); }

.modal-title { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.modal-meta  {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
  font-weight: 400;
  letter-spacing: 0;       /* anula o letter-spacing -0.01em do body */
}

/* botão de fechar: mantém o estilo .btn (precisa ficar visível e clicável).
   O seletor descendente garante que este padding vença o .btn. flex-shrink:0
   garante que ele nunca seja espremido/empurrado pra fora, mesmo se o
   título/meta ao lado tiver texto comprido. */
.modal .modal-close { padding: 6px 10px; flex-shrink: 0; }

/* corpo rolável */
.modal-body {
  padding: 14px 18px;
  overflow: auto;
  flex: 1;
}

/* Bloco 
 do log DENTRO do modal: sem fundo (transparente) e sem borda.
   Escopado em .modal-body para NÃO afetar o 
 da página de logs, que
   usa o estilo de log-view.css. */
.modal-body .logs {
  background: transparent;
  border: 0;
}

/* ---------------------------------------------------------------------
   Botão de fechar — variante "pill sutil" (pedido do usuário 2026-08-04,
   baseado numa referência de design: mesmas cores --danger do sistema,
   só o FORMATO mudou - de círculo sólido flutuando pra fora da borda,
   pra pill encaixada dentro do cartão, fundo/borda com tom de vermelho
   suave em vez de preenchimento sólido). Não substitui .modal-close
   (mantido intacto como fallback neutro caso algum modal futuro prefira
   o estilo antigo) - é uma classe A MAIS, combinada no HTML
   (class="btn modal-close modal-close--danger").
   Reaproveitada também pelas telinhas de  nativo (admin_tenants.css
   .admtn-dialog), que não têm .modal como ancestral - por isso o seletor
   não é escopado por .modal, funciona em qualquer container com
   position:relative (.modal e .admtn-dialog já têm). Como o botão agora
   fica DENTRO da área do cartão (não mais flutuando pra fora), o
   .modal-head (e o .admtn-dialog-form h3) ganharam padding-right extra
   pra não deixar título comprido passar por baixo dele. */
.btn.modal-close.modal-close--danger {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(240, 69, 91, 0.35);
  border-radius: var(--radius-full);
  background: rgba(240, 69, 91, 0.12);
  color: var(--danger);
  box-shadow: none;
  z-index: 2;
  transition: background .15s, border-color .15s;
}
.btn.modal-close.modal-close--danger:hover:not(:disabled) {
  background: rgba(240, 69, 91, 0.20);
  border-color: rgba(240, 69, 91, 0.5);
}
.btn.modal-close.modal-close--danger svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------
   Botão de ação primária DENTRO de um modal/telinha — ATE' 2026-08-06 era
   pill verde sólida (substituindo o azul só nesse contexto). Removido:
   acento unificado, um só azul pra ação primária em qualquer lugar do
   sistema (pedido do usuário: "unifique o azul") - .modal .btn.primary
   agora herda direto de .btn.primary (components/button.css), que já é
   pill + tem o mesmo hover com leve "levantada". Nada pra sobrescrever
   aqui, o que também elimina de vez o bug antigo do hover azulzinho
   (a causa era justamente essa sobreposição de regras).
   --------------------------------------------------------------------- */