/* A casca do editor de templates.

   MORA EM PASTA PRÓPRIA: `paginas/editor/` é recriada do zero pelo vendorizador
   a cada versão nova, e `paginas/painel/` é conferida contra os identificadores
   do index.html — esta folha é de outra página.

   AS CORES VÊM DO TEMA, sempre. A primeira versão usava `#f5f7fa` e `#fff` como
   valor de reserva, e o painel de quem tem o sistema em tema escuro abria uma
   página branca com texto claro — ilegível. Os nomes certos são `--papel`,
   `--tinta` e `--cartao`, e eles já viram do claro para o escuro sozinhos. */

.editor {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
}

/* A barra fica presa no topo porque o editor ocupa a tela inteira abaixo dela:
   sem isto, salvar exige rolar de volta ao começo. */
.barra-do-editor {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  background: var(--cartao);
  color: var(--tinta);
  border-bottom: 1px solid var(--borda);
}

.barra-do-editor h1 {
  margin: 0;
  font-size: var(--texto-secao);
}

.acoes-do-editor {
  display: flex;
  align-items: center;
  gap: var(--e3);
}

/* As faixas de aviso e de campo compartilham a margem lateral com o editor, para
   o texto nascer alinhado com o canvas. */
.faixa-do-editor {
  margin: var(--e2) var(--e4);
  color: var(--tinta);
}

.faixa-do-editor:empty {
  /* Um parágrafo vazio ainda ocupa altura, e três deles empurram o editor para
     baixo antes de qualquer coisa acontecer. */
  display: none;
}

/* O TEMA DO EDITOR, pelas variáveis que a própria biblioteca declara.

   A folha vendorizada nasce escura e fixa. No painel em tema claro isso é uma
   faixa preta no meio da tela — foi o que quem usa apontou: "os estilos estão
   nada a ver, nem dá para ler direito".

   Os nomes `--gjs-*` são da biblioteca; os valores são os do sistema, e por isso
   viram junto com o tema. O artefato continua intocado: quem muda é esta folha,
   que é nossa. */
.editor {
  --gjs-primary-color: var(--cartao);
  --gjs-secondary-color: var(--tinta);
  --gjs-tertiary-color: var(--acao);
  --gjs-quaternary-color: var(--acao);
  --gjs-font-color: var(--tinta);
  --gjs-main-color: var(--cartao);
  --gjs-main-dark-color: var(--papel);
  --gjs-light-color: var(--tinta);
}

.editor .gjs-pn-views-container,
.editor .gjs-pn-views,
.editor .gjs-pn-options {
  border-color: var(--borda);
}

/* O texto dos painéis herda `--gjs-font-color`, mas os rótulos de setor têm cor
   própria na folha vendorizada — e ela é clara demais para fundo claro. */
.editor .gjs-sm-sector-title,
.editor .gjs-block-category .gjs-title,
.editor .gjs-clm-tags-label,
.editor .gjs-label {
  color: var(--tinta);
}

/* O canvas é uma PÁGINA sendo montada, e página tem fundo claro mesmo no tema
   escuro — é assim que ela vai aparecer para quem abrir o hotsite ou receber o
   e-mail. Sem isto, quem edita no escuro monta contra um fundo que não é o do
   resultado. */
.editor .gjs-cv-canvas {
  background-color: #ffffff;
}

/* O botão de voltar não quebra em três linhas.

   `button` tem `white-space: normal` de propósito — rótulo longo quebrando é
   melhor que botão atravessando a tela. Aqui a barra é larga e o rótulo é curto:
   quebrar só deixou "Voltar / ao / painel" empilhado, que foi o que apareceu na
   captura. */
.acoes-do-editor .botao,
.acoes-do-editor button {
  white-space: nowrap;
}

/* O seletor de destino cabe o rótulo inteiro: "E-mail do código de vot…" cortado
   obriga a abrir a lista para saber o que está escolhido. */
#destino {
  min-width: 22ch;
}

/* Os três controles da barra têm a MESMA altura.

   `.principal` é o botão de fim de FORMULÁRIO: largura total, fonte maior e
   margem no topo, para ser a ação óbvia de uma pilha de campos. Numa barra
   horizontal isso vira um botão 5px mais alto que os vizinhos e deslocado para
   baixo pela margem — medido: 50px contra 45 e 44, e os centros em 53, 45 e 45.

   Aqui ele volta ao tamanho de botão comum. A cor continua distinguindo a ação
   principal; o tamanho não precisa fazer isso de novo. */
.acoes-do-editor .principal {
  width: auto;
  margin-top: 0;
  font-size: var(--texto-apoio);
  padding: var(--e3) var(--e5);
}

/* E os três encostam na mesma linha de base. `stretch` faria o select esticar
   junto com o botão mais alto; `center` alinha pelos meios, que é o que o olho
   lê como alinhado. */
.acoes-do-editor {
  align-items: center;
}

/* O aviso de tela pequena só existe em tela pequena. */
#so-computador {
  display: none;
  border-left: 4px solid var(--acao);
  background: var(--acao-clara);
  padding: var(--e4);
  border-radius: 0 var(--raio) var(--raio) 0;
}

/* ABAIXO DE 900px o editor SAI, e o aviso entra no lugar dele.

   Medido em 18/08/2026: em 768px e em 390px a página transborda na horizontal —
   a barra do editor e os painéis laterais dele têm largura própria e não
   encolhem. E mesmo que coubessem, arrastar bloco por toque não entrega o que a
   tela prometeria.

   Esconder é mais honesto que espremer: quem abre no telefone lê a frase e sabe
   o que fazer, em vez de descobrir arrastando. */
@media (max-width: 900px) {
  #editor {
    display: none;
  }
  #so-computador {
    display: block;
  }
  /* Sem o editor, o que sobra na barra cabe — e o que não couber quebra, em vez
     de empurrar a página para os lados. */
  .barra-do-editor {
    position: static;
  }
}

/* A barra de ações QUEBRA quando não cabe — e só então.

   Medido em 18/08/2026: em 390px ela media 480px e empurrava a página para os
   lados. Sem `flex-wrap`, um flex não quebra: estoura.

   Mas o wrap NÃO pode valer em tela grande. Solto, ele quebrou a barra em duas
   linhas até em 1500px, onde tudo cabia — 70px viraram 161px. Por isso mora
   dentro da faixa estreita, junto do aviso que já toma conta dela. */
@media (max-width: 900px) {
  .acoes-do-editor {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}