/* Estilos do editor de cartões. Usa as variáveis de site.css. */

#editor-app { margin-bottom: var(--espaco-4); }

/* Campos auxiliares */
.campo-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0 var(--espaco-2); }
.campo input[type="range"] { width: 100%; min-height: 2.75rem; accent-color: var(--ameixa-700); }
.campo input[type="number"], .campo select { min-height: 2.75rem; }
.marca-linha { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.7rem; }
.marca-linha input { width: 1.3rem; height: 1.3rem; margin-top: 0.2rem; accent-color: var(--ameixa-700); flex: none; }
fieldset.chips { border: 0; padding: 0; margin: 0 0 var(--espaco-2); min-width: 0; }
fieldset.chips legend { font-weight: 700; padding: 0; margin-bottom: 0.4rem; }
.chips__linha { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.radio-chip { display: inline-flex; align-items: center; gap: 0.45rem; border: 2px solid var(--ameixa-700); border-radius: 999px; padding: 0.35rem 1rem; font-weight: 700; cursor: pointer; background: var(--creme-50); color: var(--ameixa-700); min-height: 2.75rem; }
.radio-chip:has(input:checked) { background: var(--ameixa-700); color: var(--creme-50); }
.radio-chip input { accent-color: var(--mostarda-400); }
.chip { min-height: 2.75rem; }

.botao-peq { font: inherit; font-size: 0.95rem; font-weight: 700; background: var(--creme-50); color: var(--ameixa-700); border: 2px solid var(--ameixa-700); border-radius: var(--raio); padding: 0.35rem 0.8rem; min-height: 2.75rem; min-width: 2.75rem; cursor: pointer; }
.botao-peq:hover { background: var(--ameixa-200); }
.botao-peq[aria-pressed="true"] { background: var(--ameixa-700); color: var(--creme-50); }
.botao-peq[disabled] { opacity: 0.45; cursor: not-allowed; }
.botao-arquivo { display: inline-flex; align-items: center; cursor: pointer; }
.botao-arquivo:focus-within { outline: 3px solid var(--ameixa-700); outline-offset: 3px; }

/* Tela inicial */
.inicio__topo { max-width: var(--largura-texto); margin-bottom: var(--espaco-3); }
.inicio__acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.filtros-modelos { display: grid; gap: var(--espaco-1); margin-bottom: var(--espaco-2); }
.filtros-modelos .campo-linha { max-width: 32rem; }
.modelos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: var(--espaco-3); }
.editor__caixa { padding-top: var(--espaco-1); }
.modelo { display: grid; gap: 0.4rem; align-content: start; text-align: left; width: 100%; height: 100%; font: inherit; color: var(--tinta); background: var(--creme-50); border: 2px solid var(--ameixa-700); border-radius: var(--raio); padding: 0.85rem; cursor: pointer; box-shadow: 4px 4px 0 var(--ameixa-700); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.modelos li:nth-child(odd) .modelo { transform: rotate(-0.6deg); }
.modelos li:nth-child(even) .modelo { transform: rotate(0.6deg); }
.modelo:hover, .modelo:focus-visible { transform: translate(-2px, -5px) rotate(0deg); box-shadow: 7px 9px 0 var(--ameixa-700); }
.modelo__mini { display: grid; place-items: center; background: var(--mesa), var(--creme-200); padding: 1rem; margin-bottom: 0.35rem; }
.modelo__mini svg { display: block; height: 12rem; width: auto; max-width: 100%; aspect-ratio: var(--ratio); filter: drop-shadow(3px 4px 0 rgba(43, 15, 46, 0.28)); }
.modelo__nome { font-family: var(--fonte-titulo); font-size: var(--t-1); line-height: 1.15; }
.modelo__meta { font-size: var(--t-menos); font-weight: 700; color: var(--ameixa-500); }
.modelo__desc { font-size: 0.9rem; color: var(--tinta-suave); line-height: 1.45; }

/* Editor */
.barra { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: var(--espaco-2); }
.barra__status { margin-left: auto; font-size: var(--t-menos); color: var(--tinta-suave); }
.editor__grade { display: grid; gap: var(--espaco-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) {
  .editor__grade { grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.95fr); align-items: start; }
  .palco { position: sticky; top: 0.75rem; }
}
.palco__area { display: grid; place-items: center; padding: 1rem; background: var(--mesa), var(--creme-200); border: 2px solid var(--ameixa-700); box-shadow: 5px 5px 0 var(--ameixa-700); }
.palco__svg { overflow: visible; display: block; width: min(100%, calc(62vh * var(--ratio))); aspect-ratio: var(--ratio); height: auto; background: #fff; touch-action: none; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 5px 12px rgba(43, 15, 46, 0.4)); }
.palco__svg [data-id] { cursor: move; }
.alca { fill: #fff; stroke: #4e1e52; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.palco__margens { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.6rem; font-size: var(--t-menos); }
.palco__margens input { width: 1.2rem; height: 1.2rem; accent-color: var(--ameixa-700); }
.acoes { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.6rem; }
.acoes__grupo { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.palco__ajuda { font-size: var(--t-menos); color: var(--tinta-suave); margin-top: 0.6rem; }

/* Painéis */
.painel { border: 2px solid var(--ameixa-700); background: var(--creme-50); min-width: 0; }
.abas { display: flex; overflow-x: auto; background: var(--ameixa-700); }
@media (min-width: 48rem) { .abas { flex-wrap: wrap; overflow: visible; } }
.aba { flex: 0 0 auto; font: inherit; font-weight: 700; color: var(--creme-50); background: transparent; border: 0; padding: 0.7rem 1rem; min-height: 2.75rem; cursor: pointer; }
.aba:hover { background: var(--ameixa-800); }
.aba[aria-selected="true"] { background: var(--creme-50); color: var(--ameixa-900); }
.aba:focus-visible { outline-color: var(--mostarda-400); outline-offset: -4px; }
.aba__n { font-weight: 400; }
.painel__corpo { padding: var(--espaco-3); }
.painel__corpo h3 { font-size: var(--t-1); margin: var(--espaco-3) 0 var(--espaco-1); }
.painel__corpo h3:first-child { margin-top: 0; }
.grupo-t { font-family: var(--fonte-texto); font-size: 1rem; font-weight: 700; margin: 1rem 0 0.4rem; }
.grade-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr)); gap: 0.35rem; }
.icone-btn { aspect-ratio: 1; background: var(--creme-100); border: 2px solid var(--creme-300); border-radius: var(--raio); padding: 0.4rem; cursor: pointer; }
.icone-btn:hover { border-color: var(--ameixa-700); background: var(--creme-200); }
.icone-btn svg { display: block; width: 100%; height: 100%; }
.cor { border: 0; padding: 0; margin: 0 0 var(--espaco-2); min-width: 0; }
.cor legend { font-weight: 700; padding: 0; margin-bottom: 0.3rem; }
.cor__linha { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.amostra { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--ameixa-900); background: var(--c); cursor: pointer; padding: 0; }
.amostra[aria-pressed="true"] { outline: 3px solid var(--ameixa-700); outline-offset: 2px; }
.amostra--nenhuma { background: repeating-linear-gradient(45deg, #fff 0 4px, var(--erro) 4px 6px); }
.cor__livre input[type="color"] { width: 3rem; height: 2.5rem; padding: 0; border: 2px solid var(--ameixa-900); background: none; cursor: pointer; }
.paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.paleta { display: flex; height: 2.75rem; border: 2px solid var(--ameixa-900); padding: 0; cursor: pointer; background: none; overflow: hidden; border-radius: var(--raio); }
.paleta i { flex: 1; }
.paleta[aria-pressed="true"] { outline: 3px solid var(--ameixa-700); outline-offset: 2px; }
.lista-el { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.3rem; max-height: 17rem; overflow: auto; }
.lista-el__item { width: 100%; text-align: left; font: inherit; background: var(--creme-100); color: var(--tinta); border: 2px solid transparent; padding: 0.55rem 0.7rem; cursor: pointer; min-height: 2.75rem; }
.lista-el__item:hover { background: var(--creme-200); }
.lista-el__item[aria-pressed="true"] { border-color: var(--ameixa-700); background: var(--ameixa-200); }
.checagem { list-style: none; padding: 0; margin: 0 0 var(--espaco-2); display: grid; gap: 0.75rem; }
.checagem__item { padding: 0.75rem 0.9rem; border-left: 6px solid var(--ameixa-500); background: var(--creme-100); display: grid; gap: 0.35rem; justify-items: start; }
.checagem__item--erro { border-left-color: var(--erro); }
.checagem__item--aviso { border-left-color: var(--mostarda-500); }
.checagem__item--dica { border-left-color: var(--ameixa-200); }
.checagem__ajuda { color: var(--tinta-suave); font-size: 0.95rem; }
.checagem__resumo { font-weight: 700; }
.previa-folha { max-width: 15rem; border: 1px solid var(--creme-300); background: #fff; margin-bottom: 1rem; box-shadow: 3px 4px 0 rgba(43, 15, 46, 0.2); }
.previa-folha svg { display: block; }
.rasc { list-style: none; padding: 0; margin: 0; }
.rasc__item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.6rem 0; border-top: 1px solid var(--creme-300); }

/* Janela de confirmação */
.dialogo { border: 3px solid var(--ameixa-900); padding: var(--espaco-3); max-width: 28rem; background: var(--creme-50); color: var(--tinta); }
.dialogo::backdrop { background: rgba(43, 15, 46, 0.6); }
.dialogo h2 { font-size: var(--t-2); }
.dialogo__botoes { display: flex; gap: var(--espaco-2); justify-content: flex-end; flex-wrap: wrap; }

.notas-editor { margin-top: var(--espaco-4); }
.notas-editor h2 { font-size: var(--t-2); }

/* Impressão: só a folha montada pelo editor */
#area-impressao { display: none; }
@media print {
  body > *:not(#area-impressao) { display: none !important; }
  #area-impressao { display: block !important; }
  html, body { display: block !important; background: #fff !important; margin: 0 !important; padding: 0 !important; }
  #area-impressao svg { display: block; }
}