/* ============================================================
   editor.css — estilo da INTERFACE. Nunca vai para o PDF:
   tudo é .ui e removido no onclone / @media print.
   ============================================================ */
:root {
  --ui-bg: var(--c-offwhite);
  --ui-panel: var(--c-branco);
  --ui-ink: var(--c-chumbo);
  --ui-line: var(--c-chumbo-20);
  --ui-accent: var(--c-rust);
  --ui-err: var(--c-rust);
  --ui-font: var(--f-title);
  --topbar-h: 48px;
  --panel-w: 320px;
}
html, body { margin: 0; height: 100%; }
body { background: var(--ui-bg); color: var(--ui-ink); font-family: var(--ui-font); font-size: 13px; overflow: hidden; }
button.ui, select.ui, input.ui { font-family: inherit; }
.ui[hidden], [hidden].ui { display: none !important; }
.ui.grow { flex: 1 1 auto; }

/* ---------- Barra superior ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--ui-panel); border-bottom: 1px solid var(--ui-line); z-index: 50; }
.brand { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ui-ink); text-decoration: none; font-size: 12px; white-space: nowrap; }
.status { font-size: 11px; color: var(--c-chumbo-60); white-space: nowrap; }
.status.err { color: var(--ui-ink); font-weight: 700; border-bottom: 2px solid var(--ui-err); }
.status.ok { color: var(--c-verde); }
.badge { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); }
.badge-warn { background: var(--ui-ink); color: var(--c-offwhite); box-shadow: 0 0 0 2px var(--c-rust); }

/* ---------- Botões ---------- */
.btn { font-family: var(--ui-font); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--ui-ink); background: var(--ui-panel); color: var(--ui-ink); cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1; }
.btn:hover { background: var(--c-chumbo-10); }
.btn-primary { background: var(--ui-ink); color: var(--c-offwhite); }
.btn-primary:hover { background: var(--ui-ink); border-color: var(--c-rust); box-shadow: 0 0 0 2px var(--c-rust); }
.btn-danger { border-color: var(--c-rust); color: var(--ui-ink); }
.btn-sm { padding: 6px 10px; font-size: 10px; }
.btn-xs { padding: 4px 8px; font-size: 10px; }
.btn.on { background: var(--ui-ink); color: var(--c-offwhite); border-color: var(--c-rust); box-shadow: 0 0 0 2px var(--c-rust); }
.ibtn { width: 30px; height: 30px; border-radius: var(--r-8); border: 1px solid var(--ui-line); background: var(--ui-panel); color: var(--ui-ink); cursor: pointer; font-size: 14px; font-family: var(--ui-font); font-weight: 600; }
.ibtn:hover { border-color: var(--ui-ink); }
.link { background: none; border: 0; color: var(--ui-ink); text-decoration: underline; cursor: pointer; font-size: 11px; font-family: var(--ui-font); padding: 0; }
.ui.hint { font-family: var(--f-body); font-size: 12px; color: var(--c-chumbo-60); margin: 6px 0 0; line-height: 1.35; }

/* ---------- Layout ---------- */
.layout { position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: 0; display: flex; }
.panel { width: var(--panel-w); flex: 0 0 var(--panel-w); background: var(--ui-panel); border-right: 1px solid var(--ui-line); overflow-y: auto; padding: 10px 12px 40px; box-sizing: border-box; }
body.panel-hidden .panel { display: none; }
.panel-tools { display: flex; gap: 12px; justify-content: flex-end; margin-bottom: 6px; }
.stage { flex: 1 1 auto; overflow: auto; position: relative; }
.stage-inner { padding: 24px; min-width: max-content; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.page-box { position: relative; }
.page-label { position: absolute; left: 0; top: 0; height: 20px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-chumbo-60); white-space: nowrap; }
.page-box.cur .page-label { color: var(--ui-ink); font-weight: 700; border-bottom: 2px solid var(--c-rust); }
.page-box.over .page-label::after { content: " · excede a página"; color: var(--ui-ink); font-weight: 700; }
.sheet-wrap { position: absolute; left: 0; top: 24px; transform-origin: 0 0; box-shadow: var(--shadow-2); }
.page-box.cur .sheet-wrap { box-shadow: 0 0 0 2px var(--c-rust), var(--shadow-2); }
.pages { display: flex; flex-direction: column; gap: 4px; }
.page-row { display: grid; grid-template-columns: 1fr auto; gap: 4px; align-items: center; padding: 4px; border: 1px solid var(--ui-line); border-radius: var(--r-8); }
.page-row.cur { border-color: var(--c-rust); }
.page-row input { font-family: var(--f-body); font-size: 12px; padding: 4px 6px; border: 1px solid transparent; border-radius: var(--r-8); background: none; color: var(--ui-ink); width: 100%; box-sizing: border-box; min-width: 0; }
.page-row input:focus { border-color: var(--ui-line); background: var(--ui-panel); }
.page-row .acts { display: flex; gap: 2px; }
.page-row .acts .ibtn { width: 24px; height: 24px; font-size: 11px; }
.tree-page { display: block; padding: 6px 6px 2px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-ink); font-weight: 700; background: none; border: 0; border-left: 3px solid var(--c-rust); text-align: left; font-family: var(--ui-font); cursor: pointer; width: 100%; }
.backdrop { position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(19,18,16,.35); z-index: 40; }

/* Barra superior compacta (A5): abaixo de 600 px os estados saem e os botões continuam visíveis */
@media (max-width: 600px) {
  .topbar { gap: 6px; padding: 0 8px; }
  .topbar .status, .topbar .brand { display: none; }
  .topbar .badge { font-size: 9px; padding: 2px 6px; }
  .topbar .btn { padding: 6px 8px; font-size: 10px; }
}
.inp-xs { width: 56px; font-family: var(--f-body); font-size: 12px; padding: 3px 4px; border: 1px solid var(--ui-line); border-radius: var(--r-8); }
.fld-inline { flex-direction: row; align-items: center; gap: 4px; flex: 0 0 auto; }
.sheet .pill:focus-visible, .sheet figure.fig:focus-visible { outline: 2px solid var(--c-azul); outline-offset: 2px; }

/* Gaveta sobreposta em telas menores */
@media (max-width: 1099px) {
  .panel { position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: 45; width: min(var(--panel-w), 88vw); flex: none; box-shadow: var(--shadow-2); display: none; }
  body.drawer-open .panel { display: block; }
  body.panel-hidden .panel { display: none; }
  body.drawer-open.panel-hidden .panel { display: block; }
}

/* ---------- Seções do painel ---------- */
.ps { border-top: 1px solid var(--ui-line); }
.ps-h { display: flex; width: 100%; align-items: center; justify-content: space-between; background: none; border: 0; padding: 10px 0; font-family: var(--ui-font); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-ink); cursor: pointer; text-align: left; }
.ps-h::after { content: "−"; font-size: 14px; }
.ps-h[aria-expanded="false"]::after { content: "+"; }
.ps-h[aria-expanded="false"] + .ps-b { display: none; }
.ps-b { padding: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.sub { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--ui-line); border-radius: var(--r-8); }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-chumbo-60); flex: 1 1 auto; min-width: 0; }
.fld input[type="text"], .fld input[type="number"], .fld select, .sel-xs { font-family: var(--f-body); font-size: 13px; padding: 6px 8px; border: 1px solid var(--ui-line); border-radius: var(--r-8); background: var(--ui-panel); color: var(--ui-ink); width: 100%; box-sizing: border-box; }
.sel-xs { width: auto; font-size: 12px; padding: 4px 6px; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 11px; cursor: pointer; }
.chkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.row { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; }
.lbl { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-chumbo-60); }
.zoomv { min-width: 44px; text-align: center; font-size: 12px; }

/* Amostras de cor (só a paleta) */
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.sw { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--ui-line); cursor: pointer; padding: 0; position: relative; }
.sw.on { outline: 2px solid var(--c-rust); outline-offset: 2px; }
.sw-default { width: auto; border-radius: var(--r-pill); padding: 0 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; background: var(--ui-panel); font-family: var(--ui-font); color: var(--ui-ink); }
.sw[data-c="rust"] { background: var(--c-rust); }
.sw[data-c="chumbo"] { background: var(--c-chumbo); }
.sw[data-c="offwhite"] { background: var(--c-offwhite); }
.sw[data-c="azul"] { background: var(--c-azul); }
.sw[data-c="verde"] { background: var(--c-verde); }
.sw[data-c="branco"] { background: var(--c-branco); }
.sw[data-c="preto"] { background: var(--c-preto); }

/* Árvore */
.tree { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.tree-sec { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: var(--r-8); cursor: pointer; background: none; border: 0; text-align: left; font-family: var(--ui-font); color: var(--ui-ink); width: 100%; }
.tree-sec .kind { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-chumbo-60); }
.tree-blk { display: block; padding: 3px 6px 3px 20px; border-radius: var(--r-8); cursor: pointer; background: none; border: 0; text-align: left; font-family: var(--f-body); font-size: 12px; color: var(--ui-ink); width: 100%; }
.tree-empty { padding: 2px 6px 2px 20px; font-family: var(--f-body); font-size: 11px; color: var(--c-chumbo-60); font-style: italic; }
.tree-sec:hover, .tree-blk:hover { background: var(--c-chumbo-10); }
.tree-sec.sel, .tree-blk.sel { background: var(--ui-ink); color: var(--c-offwhite); box-shadow: inset 3px 0 0 var(--c-rust); }
.tree-sec.sel .kind { color: var(--c-offwhite); }

/* ---------- Folha: estados só na tela ---------- */
.sheet .sec { outline: 1px dashed transparent; outline-offset: -1px; transition: outline-color .1s; }
.sheet .sec:hover { outline-color: var(--c-chumbo-20); }
.sheet .sec.sel-sec { outline: 1px dashed var(--c-azul); }
.sheet .sec.hl { outline: 2px solid var(--c-azul); }
.sheet.hl { outline: 3px solid var(--c-azul); outline-offset: -3px; }
.sheet .blk { outline: 1px solid transparent; outline-offset: 2px; }
.sheet .blk:hover { outline-color: var(--c-chumbo-20); }
.sheet .blk.sel-blk { outline: 2px solid var(--c-rust); }
.sheet .blk.drop-before { box-shadow: 0 -3px 0 0 var(--c-azul); }
.sheet .blk.drop-after { box-shadow: 0 3px 0 0 var(--c-azul); }
.sheet .grid.drop-into { outline: 2px dashed var(--c-azul); min-height: 10mm; }
.sheet .blk.dragging { opacity: .4; }
.sheet [data-e]:focus { outline: 1px dotted var(--c-azul); outline-offset: 1px; }
.sheet figure.fig:empty { border: 1px dashed var(--c-chumbo-40); min-height: 12mm; cursor: pointer; }
.sheet figure.fig:empty::before { content: "Clique para adicionar imagem"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2mm; font-family: var(--f-title); font-size: 7pt; letter-spacing: .06em; text-transform: uppercase; color: var(--c-chumbo-60); }
.sheet figure.fig { cursor: pointer; }
.sheet figure.fig.sel-fig { outline: 2px solid var(--c-azul); }
.sheet figure.fig.drag-over, .sheet .blk.drag-over { outline: 2px dashed var(--c-azul); }
.sheet .blk .blk-x { display: none; }
.sheet figure.fig .fh { position: absolute; width: 8px; height: 8px; background: var(--c-azul); border: 1px solid var(--c-branco); display: none; z-index: 3; }
.sheet figure.fig.sel-fig .fh { display: block; }
.fh-l { left: -4px; top: 50%; margin-top: -4px; cursor: ew-resize; }
.fh-r { right: -4px; top: 50%; margin-top: -4px; cursor: ew-resize; }
.fh-b { bottom: -4px; left: 50%; margin-left: -4px; cursor: ns-resize; }
.fh-c { right: -4px; bottom: -4px; cursor: nwse-resize; }
.sheet .sec-handle { position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; cursor: ns-resize; z-index: 3; }
.sheet .sec-handle:hover, .sheet .sec-handle.on { background: var(--c-azul); opacity: .6; }
.sheet .sec-handle .hv { position: absolute; right: 0; bottom: 8px; background: var(--c-chumbo); color: var(--c-offwhite); font-size: 9px; padding: 2px 6px; border-radius: var(--r-8); display: none; font-family: var(--f-title); }
.sheet .sec-handle.on .hv { display: block; }
.sheet .pill { cursor: pointer; }
.sheet a { cursor: text; }

/* Guias de margem (pontilhadas, só tela) */
.guides { position: absolute; inset: 0; pointer-events: none; display: none; }
.stage-inner.show-guides .guides { display: block; }
.guides::before { content: ""; position: absolute; top: var(--margin); left: var(--margin); right: var(--margin); bottom: var(--margin); border: 1px dotted var(--c-azul); }

/* Alça de mover bloco / barras flutuantes */
.blk-handle { position: fixed; z-index: 60; background: var(--c-chumbo); color: var(--c-offwhite); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); cursor: grab; user-select: none; }
.blk-handle:active { cursor: grabbing; }
.item-bar, .img-bar { position: fixed; z-index: 60; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: var(--r-8); padding: 4px; box-shadow: var(--shadow-2); max-width: 420px; }
.popover { position: fixed; z-index: 70; background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: var(--r-8); padding: 8px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 6px; min-width: 180px; max-width: 280px; }
.popover .pop-title { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-chumbo-60); }
.pop-item { background: none; border: 0; text-align: left; padding: 5px 6px; border-radius: var(--r-8); cursor: pointer; font-family: var(--f-body); font-size: 13px; color: var(--ui-ink); }
.pop-item:hover { background: var(--c-chumbo-10); }
.drag-ghost { position: fixed; z-index: 80; pointer-events: none; background: var(--c-chumbo); color: var(--c-offwhite); font-size: 11px; padding: 4px 10px; border-radius: var(--r-pill); opacity: .9; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; background: var(--c-chumbo); color: var(--c-offwhite); padding: 10px 14px; border-radius: var(--r-8); font-size: 12px; display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow-2); }
.toast a { color: var(--c-offwhite); }

/* Diálogos */
.dlg { border: 1px solid var(--ui-line); border-radius: var(--r-18); padding: 20px; max-width: 460px; width: calc(100vw - 32px); background: var(--ui-panel); color: var(--ui-ink); font-family: var(--f-body); }
.dlg::backdrop { background: rgba(19,18,16,.45); }
.dlg h2 { font-family: var(--ui-font); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
.dlg p { font-size: 14px; line-height: 1.4; margin: 0 0 10px; }
.dlg menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 14px 0 0; }
.dlg .fld { margin-bottom: 10px; }
.dlg-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 50vh; overflow: auto; }
.dlg-item { text-align: left; padding: 10px; border: 1px solid var(--ui-line); border-radius: var(--r-8); background: var(--ui-panel); cursor: pointer; font-family: var(--ui-font); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-ink); }
.dlg-item:hover { border-color: var(--ui-ink); background: var(--c-chumbo-10); }

/* ---------- Impressão: só a folha ---------- */
@media print {
  .topbar, .panel, .panel-tools, .backdrop, .blk-handle, .item-bar, .img-bar, .popover, .toast, .guides, .dlg, .drag-ghost,
  .sheet .fh, .sheet .sec-handle, .sheet .ui { display: none !important; }
  html, body { overflow: visible !important; background: #fff !important; height: auto !important; margin: 0 !important; }
  .layout, .stage, .stage-inner, .page-box, .sheet-wrap { display: block !important; position: static !important; transform: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; width: auto !important; height: auto !important; overflow: visible !important; }
  .page-label { display: none !important; }
  .page-box { page-break-after: always; break-after: page; }
  .page-box:last-child { page-break-after: auto; break-after: auto; }
  .sheet { margin: 0 !important; box-shadow: none !important; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sheet .sec, .sheet .blk, .sheet figure.fig { outline: none !important; box-shadow: none !important; }
  .sheet figure.fig:empty { border: 0 !important; min-height: 0 !important; }
  .sheet figure.fig:empty::before { content: none !important; }
  .sheet [data-e]:focus { outline: none !important; }
}

/* Aviso único (documento migrado do formato antigo) e marcador de build */
.notice { position: fixed; top: calc(var(--topbar-h) + 8px); left: 50%; transform: translateX(-50%); z-index: 60; max-width: min(720px, calc(100vw - 32px)); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; background: var(--c-offwhite); color: var(--c-chumbo); border: 1px solid var(--c-rust); border-radius: var(--r-8); font-size: 12px; box-shadow: var(--shadow-2); }
.hint.build { font-family: var(--ui-font); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-ink); }