/* ==========================================================================
   SGP — Design System · Camada 11: editor rico (.editor-rico)

   O editor ÚNICO de Documentos, Biblioteca e corpo do e-mail. Antes cada tela
   desenhava o seu — e duas delas eram um <textarea> monoespaçado, onde se pedia
   ao assessor que escrevesse HTML de e-mail à mão.

   A área de escrita é deliberadamente CLARA (fundo branco, texto quase preto)
   mesmo no tema escuro: o que se escreve ali vira papel timbrado ou e-mail, e
   os dois são brancos. Editor escuro mentiria sobre o resultado.
   ========================================================================== */

.editor-rico {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-elevado);
  overflow: hidden;
}

/* --- Partir de um modelo --------------------------------------------------- */

.editor-rico__modelos {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
  padding: var(--esp-2) var(--esp-3);
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo-sutil);
  /* min-width:0 no filho: item de flex não encolhe abaixo do conteúdo, e era
     isso que cortava o <select> em tela estreita (a mesma causa do "cortado"
     de Listas). */
  min-width: 0;
}

.editor-rico__rotulo {
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-suave);
}

/* R4 — o `.editor-rico__campo` era o <select> de títulos que virou a janela de
   prévia. Sem elemento nenhum usando, a regra (e a irmã do media query lá
   embaixo) saiu: CSS morto é a próxima pessoa lendo desenho que não existe. */

/* --- Barra de ferramentas -------------------------------------------------- */

.editor-rico__barra {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  flex-wrap: wrap;
  padding: var(--esp-2) var(--esp-3);
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo-afundado);
}

.editor-rico__grupo {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: var(--esp-2);
  border-right: 1px solid var(--cor-borda);
}

.editor-rico__grupo:last-child { border-right: 0; padding-right: 0; }

.editor-rico__botao {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-texto-suave);
  font: inherit;
  font-size: var(--texto-sm);
  line-height: 1;
  padding: var(--esp-2) var(--esp-2);
  min-width: 2rem;
  cursor: pointer;
  transition: background var(--transicao-rapida), color var(--transicao-rapida);
}

.editor-rico__botao:hover {
  background: var(--cor-fundo-elevado);
  border-color: var(--cor-borda);
  color: var(--cor-texto);
}

.editor-rico__botao:focus-visible {
  outline: none;
  box-shadow: var(--sombra-foco);
  color: var(--cor-texto);
}

.editor-rico__cor {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  padding-left: var(--esp-1);
}

.editor-rico__cor input[type="color"] {
  inline-size: 1.75rem;
  block-size: 1.5rem;
  padding: 0;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: transparent;
  cursor: pointer;
}

/* --- Gaveta de blocos ------------------------------------------------------ */

.editor-rico__gaveta {
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo-sutil);
}

.editor-rico__gaveta-titulo {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  flex-wrap: wrap;
  padding: var(--esp-2) var(--esp-3);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto);
  cursor: pointer;
}

.editor-rico__gaveta-nota {
  font-weight: var(--peso-normal);
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
}

.editor-rico__blocos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--esp-2);
  padding: 0 var(--esp-3) var(--esp-3);
}

.editor-rico__bloco {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* min-width:0: sem isto o item do grid não encolhe abaixo do texto e a
     descrição vaza para fora do cartão em tela estreita. */
  min-width: 0;
  text-align: left;
  appearance: none;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cor-fundo-elevado);
  padding: var(--esp-2) var(--esp-3);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--transicao-rapida), box-shadow var(--transicao-rapida);
}

.editor-rico__bloco:hover { border-color: var(--cor-acao); }

.editor-rico__bloco:focus-visible { outline: none; box-shadow: var(--sombra-foco); }

.editor-rico__bloco-titulo {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto);
}

.editor-rico__bloco-descricao {
  font-size: var(--texto-xs);
  line-height: var(--altura-normal);
  color: var(--cor-texto-suave);
}

/* --- Área de escrita ------------------------------------------------------- */

.editor-rico__area {
  padding: var(--esp-4);
  background: #ffffff;
  color: #111111;
  overflow: auto;
  line-height: var(--altura-normal);
}

.editor-rico__area:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: -2px; }

.editor-rico__area h1,
.editor-rico__area h2,
.editor-rico__area h3 { margin: 0 0 .5em; line-height: var(--altura-apertada); }

.editor-rico__area p { margin: 0 0 .75em; }

.editor-rico__area img { max-width: 100%; height: auto; }

/* Tabela é a diagramação real do e-mail: mostrar a malha enquanto se edita
   evita o clássico "sumiu meu texto" (célula vazia é invisível sem borda). */
.editor-rico__area table { max-width: 100%; }
.editor-rico__area table td,
.editor-rico__area table th { outline: 1px dashed rgba(17, 22, 29, .12); }

@media (max-width: 640px) {
  .editor-rico__grupo { border-right: 0; padding-right: 0; }
}

/* --------------------------------------------------------------------------
   Pré-visualização do modelo (R4) — a janela de "partir de um modelo".

   Mesmo desenho do <dialog> da prova de campanha (11_campanha_fluxo.css): é o
   único padrão de janela da casa e não se inventa um segundo. O que muda é o
   miolo — duas colunas, lista à esquerda e o papel à direita, porque o pedido
   do cliente foi justamente ver o modelo sem sair de onde escolhe.
   -------------------------------------------------------------------------- */
.modelo-previa__janela {
  inline-size: min(56rem, calc(100vw - var(--esp-6)));
  padding: 0;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
  color: var(--cor-texto);
}

.modelo-previa__janela::backdrop { background: rgb(0 0 0 / 45%); }

.modelo-previa__cabecalho { padding: var(--esp-4) var(--esp-4) 0; }
.modelo-previa__titulo { margin: 0 0 var(--esp-1); font-size: 1.125rem; }

.modelo-previa__corpo {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--esp-4);
  padding: var(--esp-4);
}

.modelo-previa__lista { min-width: 0; }

.modelo-previa__opcoes {
  block-size: 100%;
  min-block-size: 16rem;
  padding: var(--esp-1);
}

.modelo-previa__quadro {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  min-width: 0;
}

/* Fundo branco mesmo no tema escuro, como a área de escrita logo acima: o
   modelo vira papel timbrado ou e-mail, e os dois são brancos. */
.modelo-previa__papel {
  inline-size: 100%;
  block-size: 22rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: #ffffff;
}

.modelo-previa__rodape {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-fundo-sutil);
  border-end-start-radius: var(--raio-lg);
  border-end-end-radius: var(--raio-lg);
}

@media (max-width: 760px) {
  .modelo-previa__corpo { grid-template-columns: 1fr; }
  .modelo-previa__opcoes { min-block-size: 10rem; }
  .modelo-previa__papel { block-size: 14rem; }
}