/* Admin > Automações e E-mails enviados. Reaproveita .card-config, .criterio,
   .integracao-* (admin-integracoes.css) e .ap-* (admin-pessoas.css); aqui só o
   que é próprio dessas telas. Cores pelos tokens do tema (admin-tema.css). */

.automacao-cabecalho {
  flex-wrap: wrap;
}
.automacao-cabecalho__acoes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Editor: campos à esquerda, prévia à direita; empilha em tela estreita. */
.automacao-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 1100px) {
  .automacao-editor { grid-template-columns: minmax(0, 1fr); }
}
.automacao-editor__campos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.automacao-textarea {
  width: 100%;
  min-height: 260px;
  padding: 10px 12px;
  border: 1px solid var(--adm-border-strong, var(--linha-forte));
  border-radius: 8px;
  background: var(--adm-surface, var(--sup));
  color: var(--adm-text, var(--txt-1));
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
}
.automacao-textarea:focus {
  outline: none;
  border-color: var(--azul, var(--marca));
  box-shadow: var(--anel-foco);
}

.automacao-editor__previa {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 16px;
}

/* Rodapé do formulário: "Voltar" à esquerda, "Salvar" à direita, mesma altura. */
.automacao-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.automacao-rodape > .btn,
.automacao-rodape > .btn-salvar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
  text-decoration: none;
}
.automacao-excluir {
  display: flex;
  justify-content: flex-end;
}
.automacao-execucao .integracao-ajuda {
  display: block;
  margin-top: 2px;
}
/* .ap-tabela não quebra linha (nowrap); nestas colunas de texto longo, quebra,
   pra a tabela caber na tela sem rolar na horizontal. */
.ap-tabela td.automacao-quebra,
.ap-tabela td.automacao-execucao {
  white-space: normal;
}
.ap-tabela td.automacao-quebra { min-width: 120px; max-width: 170px; }
.ap-tabela td.automacao-execucao { min-width: 220px; max-width: 300px; }

/* E-mails enviados: números, filtros numa linha e tabela enxuta. */
.emails-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 4px 0 20px;
}
@media (max-width: 760px) {
  .emails-kpis { grid-template-columns: minmax(0, 1fr); }
}
.emails-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.emails-filtros__busca {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
}
.emails-filtros__busca .ap-input-filtro {
  width: 100%;
  padding-left: 34px;
}
.emails-filtros__lupa {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--adm-text-4, var(--txt-4));
  display: inline-flex;
  pointer-events: none;
}
.emails-filtros__testes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--adm-text-2, var(--txt-2));
  cursor: pointer;
  white-space: nowrap;
}
.emails-filtros__limpar {
  font-size: 13px;
  color: var(--azul, var(--info-texto));
  text-decoration: none;
  white-space: nowrap;
}
.emails-filtros__limpar:hover { text-decoration: underline; }

/* Células com duas linhas (principal + detalhe em cinza), sem quebrar a tabela. */
.emails-tabela td.emails-tabela__email,
.emails-tabela td.emails-tabela__automacao {
  white-space: normal;
}
.emails-tabela__email span,
.emails-tabela__automacao span,
.emails-tabela__data span {
  display: block;
}
.emails-tabela td.emails-tabela__email { max-width: 320px; }
.emails-tabela td.emails-tabela__automacao { min-width: 170px; max-width: 200px; }
.emails-tabela__automacao span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emails-tabela__assunto,
.emails-tabela__motivo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emails-tabela__assunto {
  font-size: 14px;
  color: var(--adm-text, var(--txt-1));
}
.emails-tabela__motivo,
.emails-tabela__empresa,
.emails-tabela__hora {
  margin-top: 2px;
  font-size: 12px;
  color: var(--adm-text-3, var(--txt-3));
}
.emails-tabela__automacao span:first-child {
  font-size: 13px;
  color: var(--adm-text-2, var(--txt-2));
}
.emails-tabela__data span:first-child {
  font-size: 13px;
  color: var(--adm-text-2, var(--txt-2));
}
.emails-tabela__situacao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.emails-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.emails-rodape .automacao-paginacao { margin-top: 0; }
.automacao-paginacao {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.automacao-motivo {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--adm-text-2, var(--txt-2));
}
.automacao-email-frame {
  width: 100%;
  min-height: 560px;
  border: 1px solid var(--adm-border, var(--linha));
  border-radius: 12px;
  background: var(--sup-sutil);
}

/* Escolha do público (nova automação) */
.automacao-publicos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.automacao-publico {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--adm-border, var(--linha));
  border-radius: 12px;
  background: var(--adm-surface, var(--sup));
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.automacao-publico:hover,
.automacao-publico:focus-visible {
  border-color: var(--azul, var(--marca));
  box-shadow: var(--anel-foco);
}
.automacao-publico__titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--adm-text, var(--txt-1));
}
.automacao-publico__texto {
  font-size: 13px;
  line-height: 1.5;
  color: var(--adm-text-3, var(--txt-3));
}

/* Lista de alunos do público "alunos específicos" */
.automacao-alunos {
  max-height: 340px;
  overflow-y: auto;
  margin-top: 8px;
}

/* "Nova automação" é link (não <button>): sem flex, o texto fica no topo dos 36px. */
.automacao-cabecalho__acoes .ap-btn-topo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Busca da lista de alunos (público "alunos específicos") e escolha da trilha. */
.automacao-busca-alunos {
  width: 100%;
  max-width: 560px;
}
.automacao-select-trilha {
  min-width: 320px;
}

/* Botão de destaque (texto + destino) lado a lado. */
.automacao-botao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .automacao-botao { grid-template-columns: minmax(0, 1fr); }
}

/* Prévia: o e-mail real num iframe, com o assunto em cima. */
.automacao-previa__assunto-linha {
  margin: 0;
  font-size: 13px;
  color: var(--adm-text, var(--txt-1));
}
.automacao-previa__assunto-linha span { color: var(--adm-text-3, var(--txt-3)); }
.automacao-previa-frame {
  width: 100%;
  height: 780px;
  border: 1px solid var(--adm-border, var(--linha));
  border-radius: 12px;
  background: var(--sup-sutil);
}

/* Variáveis em tabela, abaixo do editor. */
.automacao-variaveis {
  margin-top: 24px;
}
.automacao-variaveis__tabela code {
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--adm-subtle, var(--sup-hover));
  color: var(--adm-text, var(--txt-1));
  white-space: nowrap;
}
.automacao-variaveis__tabela td { vertical-align: top; }
.automacao-variaveis__exemplo { color: var(--adm-text-3, var(--txt-3)); }
.automacao-variaveis__grupo td {
  background: var(--adm-subtle, var(--sup-sutil));
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--adm-text-3, var(--txt-3));
}

/* Cor da marca */
.marca-cor {
  width: 64px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--adm-border-strong, var(--linha-forte));
  border-radius: 8px;
  background: var(--adm-surface, var(--sup));
  cursor: pointer;
}

/* Campos do botão ocupam a coluna inteira (o input-config--largo tem 440px fixos). */
.automacao-botao .input-config,
.automacao-botao .input-config--select {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

/* Logo atual + envio de arquivo (Marca dos e-mails). */
.marca-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.marca-logo__atual {
  width: 200px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--adm-border, var(--linha));
  border-radius: 10px;
  background: var(--sup);
}
.marca-logo__atual img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.marca-logo__acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.marca-logo__arquivo { font-size: 13px; }
.marca-logo__remover { font-size: 13px; }

/* Mensagem com barra de ferramentas presa no topo, como no Word. */
.automacao-mensagem {
  border: 1px solid var(--adm-border-strong, var(--linha-forte));
  border-radius: 8px;
  background: var(--adm-surface, var(--sup));
  overflow: hidden;
}
.automacao-mensagem:focus-within {
  border-color: var(--azul, var(--marca));
  box-shadow: var(--anel-foco);
}
.automacao-ferramentas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--adm-border, var(--linha));
  background: var(--adm-subtle, var(--sup-sutil));
}
.automacao-ferramentas__divisor {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--adm-border-strong, var(--sup-trilho));
}
.automacao-ferramenta {
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--adm-text-2, var(--txt-2));
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.automacao-ferramenta--icone {
  width: 30px;
  padding: 0;
}
.automacao-ferramenta:hover,
.automacao-ferramenta:focus-visible {
  background: var(--adm-surface, var(--sup));
  border-color: var(--adm-border-strong, var(--linha-forte));
  color: var(--azul, var(--info-texto));
}
.automacao-textarea.automacao-textarea--com-barra {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.automacao-textarea.automacao-textarea--com-barra:focus {
  box-shadow: none;
}