/* Interface do editor (não é o estilo das folhas — isso é folhas.css). Sóbrio: mesma
   família tipográfica e paleta das folhas, sem cantos arredondados nem sombra decorativa. */

:root {
  --mata: #152721; --papel: #FFFFFF; --nevoa: #EEF2EE; --linha: #D5DDD7;
  --tx: #152721; --tx-2: #55635B; --aviso: #8A3B1E; --aviso-fundo: #FBEDE6;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tx);
  font-family: 'Roboto', system-ui, sans-serif;
  font-stretch: 100%; font-size: 14.5px; line-height: 1.5;
}
button, input, select, textarea { font: inherit; color: inherit; }

.app { display: flex; flex-direction: column; height: 100vh; }

/* ---------- topo ---------- */
.topo {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px; background: var(--mata); color: #fff;
}
.topo .marca { font-stretch: 70%; font-weight: 400; font-size: 19px; letter-spacing: -.01em; }

/* ---------- botões ---------- */
.botao-principal, .botao-secundario {
  border: 1px solid var(--mata); padding: 8px 14px; cursor: pointer; background: var(--mata); color: #fff;
}
.botao-secundario { background: transparent; color: inherit; border-color: currentColor; }
.topo .botao-secundario { border-color: rgba(255,255,255,.5); color: #fff; }
.botao-link {
  border: 0; background: none; padding: 2px 0; color: var(--tx-2); text-decoration: underline;
  cursor: pointer; font-size: 13px;
}
.botao-adicionar {
  border: 1px dashed var(--linha); background: none; color: var(--tx); padding: 8px 12px;
  cursor: pointer; width: 100%; text-align: left; margin-top: 8px;
}
.botao-adicionar:hover { background: var(--nevoa); }
.botao-icone {
  border: 1px solid var(--linha); background: var(--papel); width: 26px; height: 26px;
  cursor: pointer; line-height: 1; padding: 0;
}
.botao-icone:disabled { opacity: .3; cursor: default; }
.botao-icone:not(:disabled):hover { background: var(--nevoa); }

/* ---------- corpo: formulário + prévia ---------- */
.corpo { flex: 1; display: flex; min-height: 0; }

.formulario {
  flex: none; width: 420px; overflow-y: auto; border-right: 1px solid var(--linha);
  padding: 8px 20px 60px;
}

.seletor-tipo { padding: 14px 0 18px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
.seletor-tipo label { display: block; font-size: 12.5px; color: var(--tx-2); margin-bottom: 6px; }
.seletor-tipo select { width: 100%; padding: 8px 10px; border: 1px solid var(--linha); background: var(--papel); }

/* ---------- seções recolhíveis ---------- */
.secao { border-bottom: 1px solid var(--linha); }
.secao summary {
  list-style: none; cursor: pointer; padding: 14px 0; font-size: 16px; font-stretch: 80%;
  font-weight: 500; display: flex; align-items: center; gap: 8px; user-select: none;
}
.secao summary::-webkit-details-marker { display: none; }
.secao summary .seta {
  display: inline-block; width: 0; height: 0; flex: none;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid var(--tx-2);
  transition: transform .1s;
}
.secao[open] summary .seta { transform: rotate(90deg); }
.secao-corpo { padding: 0 0 20px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- campos ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: 12.5px; color: var(--tx-2); }
.campo input[type="text"], .campo textarea, .campo select {
  border: 1px solid var(--linha); background: var(--papel); padding: 8px 10px; width: 100%;
}
.campo textarea { resize: vertical; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.campo-moeda { display: flex; align-items: stretch; border: 1px solid var(--linha); }
.campo-moeda .moeda-prefixo { padding: 8px 8px 8px 10px; color: var(--tx-2); background: var(--nevoa); }
.campo-moeda input { border: 0; padding: 8px 10px 8px 4px; flex: 1; min-width: 0; }

.opcao { display: flex; align-items: center; gap: 8px; font-size: 14.5px; cursor: pointer; }
.opcional-campos { display: flex; flex-direction: column; gap: 14px; padding: 12px 0 2px 26px; border-left: 2px solid var(--linha); margin-left: 3px; }
.opcional-campos[hidden] { display: none; }

.campo-imagem .imagem-preview { max-width: 100%; max-height: 140px; display: block; margin-bottom: 8px; background: var(--nevoa); }
.campo-imagem .imagem-preview[hidden] { display: none; }
.campo-imagem-botoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.campo-imagem input[type="file"] { font-size: 12.5px; max-width: 100%; }

.nota-calculada { font-size: 13px; color: var(--tx-2); margin: 0; }
.aviso { font-size: 13px; color: var(--aviso); background: var(--aviso-fundo); padding: 8px 10px; margin: 0; }

/* ---------- listas editáveis ---------- */
.lista-editavel { display: flex; flex-direction: column; }
.lista-linha { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.lista-linha:first-child { border-top: 1px solid var(--linha); }
.lista-campos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-botoes { flex: none; display: flex; gap: 4px; padding-top: 1px; }

/* ---------- prévia ---------- */
.previa { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--nevoa); }
.previa-barra {
  flex: none; display: flex; align-items: center; gap: 18px; padding: 10px 20px;
  border-bottom: 1px solid var(--linha); background: var(--papel);
}
.abas { display: inline-flex; border: 1px solid var(--linha); }
.abas button { border: 0; background: var(--papel); padding: 7px 14px; cursor: pointer; }
.abas button + button { border-left: 1px solid var(--linha); }
.abas button[aria-pressed="true"] { background: var(--mata); color: #fff; }
.previa-contagem { font-size: 13px; color: var(--tx-2); }

.previa-acoes {
  flex: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 20px; border-bottom: 1px solid var(--linha); background: var(--papel);
}
.previa-acoes-nota { font-size: 12.5px; color: var(--tx-2); }
.aviso-impressao { margin: 0; border-bottom: 1px solid var(--linha); }
.aviso-impressao p { margin: 0 0 4px; }
.aviso-impressao ul { margin: 0; padding-left: 20px; }

.previa-rolagem { flex: 1; overflow: auto; padding: 24px; }
.previa-folhas { display: flex; gap: 28px; }
.previa-folhas.modo-d { flex-direction: column; align-items: flex-start; }
.previa-folhas.modo-m { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.previa-item { position: relative; flex: none; margin-bottom: 20px; }
.previa-moldura { position: absolute; top: 0; left: 0; transform-origin: 0 0; box-shadow: 0 1px 2px rgba(21,39,33,.12), 0 10px 26px -12px rgba(21,39,33,.3); }
.previa-legenda { position: absolute; top: 100%; left: 0; margin-top: 8px; font-size: 12px; color: var(--tx-2); white-space: nowrap; }

/* ---------- diálogos (confirmação de troca de tipo, configuração do estúdio) ---------- */
dialog { border: 1px solid var(--mata); padding: 0; max-width: 420px; width: 90vw; }
dialog::backdrop { background: rgba(21,39,33,.45); }
.dialog-conteudo { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.dialog-conteudo h2 { font-size: 17px; font-stretch: 80%; margin: 0; }
.dialog-nota { font-size: 13px; color: var(--tx-2); margin: -8px 0 0; }
.dialog-botoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }