/* ============================================================
   ORDO · EMAIL-EDITOR.CSS — construtor visual de e-mails.
   Glassmorphism em tudo. 3 colunas no desktop (paleta+blocos /
   preview / estilo), empilhado no mobile.
   ============================================================ */

.mailed { display: flex; flex-direction: column; gap: var(--sp-4); }

/* barra de topo: nome/assunto/tipo + ações */
.mailed-top { display: flex; flex-direction: column; gap: var(--sp-3); }
.mailed-acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.mailed-acoes .mailed-toggle { display: inline-flex; align-items: center; gap: 8px; }
.mailed-campos { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }

/* corpo em 3 zonas */
.mailed-corpo { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }

/* cada "painel" é vidro */
.mailed-painel {
  background: var(--glass-1);
  backdrop-filter: blur(var(--blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--sombra-card), var(--brilho-borda);
}
.mailed-painel__tit { font-size: var(--fs-micro); letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-txt-3); font-weight: 600; margin-bottom: var(--sp-3); }

/* grade de blocos p/ adicionar */
.mailed-blocos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.mailed-bloco-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: var(--sp-4) var(--sp-2); border-radius: var(--r-sm);
  background: var(--glass-3); border: 1px solid var(--borda); color: var(--c-txt-2);
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease; min-height: 68px;
}
.mailed-bloco-add:hover { background: var(--glass-1); border-color: var(--borda-ouro); color: var(--c-txt); }
.mailed-bloco-add:active { transform: scale(.97); }
.mailed-bloco-add .ic { font-size: 18px; }
.mailed-bloco-add .lbl { font-size: 12px; }

/* temas de cor (swatches) */
.mailed-temas { display: flex; flex-direction: column; gap: var(--sp-2); }
.mailed-tema {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--r-sm); background: var(--glass-3);
  border: 1px solid var(--borda); color: var(--c-txt-2); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.mailed-tema:hover { background: var(--glass-1); }
.mailed-tema[aria-selected="true"] { border-color: var(--borda-ouro); background: linear-gradient(120deg, rgba(200,163,106,.14), rgba(200,163,106,.04)); color: var(--c-txt); }
.mailed-tema__sw { display: inline-flex; gap: 3px; }
.mailed-tema__sw i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.12); }

/* PREVIEW ao vivo */
.mailed-preview-wrap { padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--borda); background: rgba(0,0,0,.25); }
.mailed-preview {
  max-width: 480px; margin-inline: auto; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(200,163,106,.28); box-shadow: 0 12px 40px -12px rgba(0,0,0,.7);
}
.mailed-preview .m-inner { padding: 26px 28px; }
.mailed-preview .m-bloco { position: relative; }
/* o bloco selecionado ganha contorno dourado no preview */
.mailed-preview .m-bloco.sel { outline: 2px solid var(--c-ouro); outline-offset: 3px; border-radius: 6px; }
.mailed-preview .m-bloco[data-tipo] { cursor: pointer; }

/* lista de blocos (reordenar/excluir) */
.mailed-lista { display: flex; flex-direction: column; gap: var(--sp-2); }
.mailed-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--glass-3); border: 1px solid var(--borda); cursor: pointer; transition: border-color .15s ease;
}
.mailed-item[aria-selected="true"] { border-color: var(--borda-ouro); }
.mailed-item__lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-txt-2); font-size: 14px; }
.mailed-item__lbl b { color: var(--c-txt); font-weight: 600; }
.mailed-item__acoes { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.mailed-item__acoes button { width: 32px; height: 32px; border-radius: 8px; color: var(--c-txt-3); font-size: 15px; }
.mailed-item__acoes button:hover { color: var(--c-ouro); background: var(--glass-1); }

/* painel de estilo do bloco (direita) */
.mailed-estilo-vazio { color: var(--c-txt-3); font-size: 13px; line-height: 1.5; }
.mailed-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); }
.mailed-campo > .micro { color: var(--c-txt-3); }
.mailed-cores { display: flex; flex-wrap: wrap; gap: 8px; }
.mailed-swatch { width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.mailed-swatch[aria-selected="true"] { border-color: var(--c-txt); box-shadow: 0 0 0 2px var(--c-abs) inset; }
.mailed-align { display: flex; gap: 6px; }
.mailed-align button { flex: 1; padding: 8px; border-radius: 8px; background: var(--glass-3); border: 1px solid var(--borda); color: var(--c-txt-2); cursor: pointer; }
.mailed-align button[aria-selected="true"] { border-color: var(--borda-ouro); color: var(--c-ouro); }

/* desktop: 3 colunas de verdade */
@media (min-width: 1024px) {
  .mailed-corpo { grid-template-columns: 268px 1fr 268px; align-items: start; }
  .mailed-campos { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .mailed-esq { display: flex; flex-direction: column; gap: var(--sp-4); }
}

/* Select de tipografia em glassmorphism (o campo fechado; as options herdam
   fundo escuro onde o SO permite). Seta dourada custom, sem a aparência nativa. */
.mailed-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background: var(--glass-3);
  backdrop-filter: blur(var(--blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
  border: 1px solid var(--borda);
  border-radius: var(--r-sm);
  color: var(--c-txt);
  padding: 12px 40px 12px 14px;
  font-size: 15px; width: 100%; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C8A36A' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}
.mailed-select:focus { outline: none; border-color: var(--borda-ouro); }
.mailed-select option { background: #101917; color: var(--c-txt); }

/* Dropdown custom de tipografia — 100% glassmorphism, sem cores do sistema.
   Substitui o <select> nativo (cujo item destacado usa o azul do Windows). */
.mailed-dd { position: relative; }
.mailed-dd__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--glass-3);
  backdrop-filter: blur(var(--blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
  border: 1px solid var(--borda); border-radius: var(--r-sm);
  color: var(--c-txt); padding: 12px 14px; font-size: 15px;
  transition: border-color .15s ease;
}
.mailed-dd__btn:hover, .mailed-dd__btn.aberto { border-color: var(--borda-ouro); }
.mailed-dd__seta { color: var(--c-ouro); font-size: 14px; transition: transform .18s ease; flex: 0 0 auto; }
.mailed-dd__btn.aberto .mailed-dd__seta { transform: rotate(180deg); }
.mailed-dd__rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mailed-dd__lista {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: linear-gradient(180deg, rgba(16,25,23,.96), rgba(7,17,17,.96));
  backdrop-filter: blur(var(--blur-forte)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--blur-forte)) saturate(1.3);
  border: 1px solid var(--borda-ouro); border-radius: var(--r-md);
  box-shadow: var(--sombra-flutuante); max-height: 320px; overflow-y: auto;
}
.mailed-dd__op {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: transparent; color: var(--c-txt-2); font-size: 14.5px;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.mailed-dd__op:hover { background: var(--glass-1); color: var(--c-txt); }
.mailed-dd__op[aria-selected="true"] {
  background: linear-gradient(120deg, rgba(200,163,106,.18), rgba(200,163,106,.05));
  border-color: var(--borda-ouro); color: var(--c-ouro);
}