/* Documentos independentes, ações contextuais e seleção persistente. */
.documents-panel,.conversion-panel,.split-results { margin-bottom:18px; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--bg) }
.documents-list { display:flex; gap:12px; padding:14px; overflow-x:auto; align-items:stretch }
.document-card { position:relative; min-width:220px; max-width:300px; padding:12px; border:1px solid var(--border); border-radius:9px; background:var(--bg) }
.document-card.active { border-color:var(--purple); box-shadow:0 0 0 2px #8a70d322 }
.document-open { display:block; background:none; border:0; text-align:left; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0; font-weight:600 }
.document-card small { display:block; color:var(--muted); margin:4px 0 8px }
.document-card input { max-width:100%; width:100%; padding:5px }
.document-actions { display:flex; gap:3px; opacity:0; transition:opacity .15s }
.document-card:hover .document-actions,.document-card:focus-within .document-actions,.document-card.active .document-actions { opacity:1 }
.document-actions .icon-button { width:29px; height:29px; min-width:0; min-height:0; padding:5px }
.editor-page-card { position:relative; border:1px solid transparent; border-radius:6px; min-width:0; padding:2px; cursor:grab; transition:transform .16s,box-shadow .16s,background .16s; transform-origin:center }
.editor-page-card.active { background:#8a70d31a; border-color:#9b88d6 }
.editor-page-card.selected { background:#8a70d32b; border-color:#8363ce; box-shadow:inset 0 0 0 1px #8363ce }
.editor-page-card:is(:hover,:focus-within):not(.dragging) { z-index:5; transform:scale(1.06); background:#8a70d324; border-color:#9b88d6; box-shadow:0 4px 14px #36234e33 }
.page-selection-badge { display:none; position:absolute; right:6px; bottom:21px; width:18px; height:18px; border-radius:50%; background:#7654c6; color:white; font-size:12px; line-height:18px; text-align:center; pointer-events:none; box-shadow:0 1px 4px #0003 }
.editor-page-card.selected .page-selection-badge { display:block }
#editor-page-selection { color:var(--muted); font-size:9px; margin:7px 0 0 }
.editor-page-thumb { width:100% }
.page-thumb-actions { position:absolute; top:8px; left:2px; z-index:2; display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:3px; width:max-content; padding:4px; border:1px solid #c8bce3; border-radius:7px; background:#fffffff5; box-shadow:0 3px 10px #30214230; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s }
.editor-page-card:nth-child(even) .page-thumb-actions { left:auto; right:2px }
.editor-page-card:is(:hover,:focus-within) .page-thumb-actions { opacity:1; visibility:visible; pointer-events:auto }
.page-thumb-actions .icon-button { flex:0 0 25px; padding:4px; width:25px; min-width:25px; height:27px; min-height:27px; border-radius:4px }
.page-thumb-actions .icon { width:16px; height:16px }
.editor-page-card.drop-before { border-top:4px solid var(--purple) }
.editor-page-card.dragging { opacity:.45; transform:none }
.editor-page-card.dragging .page-thumb-actions { opacity:0; visibility:hidden; pointer-events:none }
.page-trash { position:fixed; z-index:60; right:30px; bottom:28px; display:flex; align-items:center; gap:12px; padding:22px; border:2px dashed #cf5d79; border-radius:14px; background:#fff0f3; color:#962846; box-shadow:0 4px 28px #0003 }
.page-trash.drag-over { background:#b82b50; color:white; transform:scale(1.05) }
.viewer-scroll.drag-over { outline:3px dashed var(--purple); outline-offset:-5px }
.selection-overlay { position:absolute; inset:0; z-index:4; pointer-events:none }
.selection-mark { position:absolute; background:#8063e942; border-bottom:2px solid #6d52c9 }
.selection-marquee { position:absolute; border:1px solid #7753cd; background:#8861df24 }
.textLayer { user-select:text; -webkit-user-select:text; cursor:crosshair }
.image-handles { position:absolute; inset:0; z-index:3; pointer-events:none }
.image-box { position:absolute; pointer-events:auto; border:1px dashed transparent; cursor:move; touch-action:none }
.image-box:is(:hover,:focus-within,.moving) { border-color:#7d56d1; outline:1px solid white }
.image-box>.icon-button,.image-resize { opacity:0; position:absolute; padding:3px; width:25px; height:25px; min-width:0; min-height:0 }
.image-box>.icon-button { top:0; right:0 }
.image-resize { bottom:0; right:0; width:14px; height:14px; border:1px solid white; background:var(--purple); cursor:nwse-resize; touch-action:none }
.image-box:is(:hover,:focus-within,.moving)>button { opacity:1 }
.drawing-layer { z-index:5 }
.text-draft { z-index:6 }
.split-results { padding:18px }
.split-results h2 { font-size:17px; margin-bottom:12px }
.split-result { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin-bottom:12px }
.split-result label { display:flex; flex-direction:column; gap:5px; flex:1; min-width:180px }
.split-result input { padding:8px; border:1px solid var(--border); border-radius:5px; width:100% }
.conversion-panel { padding:20px }
.conversion-panel .settings-panel { padding:0 0 16px; background:none; border:0 }
#conversion-hint { max-width:850px; margin:0 0 16px; color:var(--muted) }
#conversion-files { padding-left:20px; margin-bottom:16px; overflow-wrap:anywhere }
#workspace-merge-list { display:flex; flex-direction:column; gap:10px; margin:18px 0; max-height:45vh; overflow:auto }
#workspace-merge-list label { white-space:normal; overflow-wrap:anywhere }
#split-options { flex-wrap:wrap }
#split-options p { flex-basis:100% }
#editor-page-list { max-height:480px; padding:8px }
[data-theme=dark] .document-card,[data-theme=dark] .conversion-panel,[data-theme=dark] .split-results { background:#242d3f }
[data-theme=dark] .page-thumb-actions { background:#202a3bf5; border-color:#7f6ca4; box-shadow:0 3px 12px #0006 }
[data-theme=dark] .page-trash { background:#482e3b; color:#ffd4e0 }
[data-theme=dark] .page-trash.drag-over { background:#a52c50 }
@media (hover:none) {
  .document-actions,.page-thumb-actions { opacity:1; visibility:visible; pointer-events:auto }
  .editor-page-card:is(:hover,:focus-within):not(.dragging) { transform:none }
}
@media (max-width:600px) {
  .documents-list { padding:10px; gap:8px }
  .document-card { min-width:225px }
  .document-actions { opacity:1; pointer-events:auto }
  .editor-settings .properties-pages { display:block; width:100% }
  #editor-page-list { display:flex; overflow-x:auto; max-height:240px }
  .editor-page-card { flex:0 0 105px }
  .editor-page-card .page-thumb-actions { left:50%; right:auto; transform:translateX(-50%); opacity:1; visibility:visible; pointer-events:auto }
  .page-trash { right:12px; bottom:12px; padding:15px; font-size:12px }
  #conversion-kind { max-width:100% }
  .conversion-panel { padding:14px }
  #workspace-merge-dialog .modal-actions { flex-wrap:wrap }
}
@media (prefers-reduced-motion:reduce) { .editor-page-card,.page-thumb-actions { transition:none } }

/* A lateral abre sobre o conteúdo: o canvas mantém o tamanho durante o hover. */
.sidebar,.editor-workspace .sidebar { width:68px; padding:14px 10px 16px; overflow:hidden; z-index:40; transition:width .18s,box-shadow .18s }
.sidebar.sidebar-open,.editor-workspace .sidebar.sidebar-open { width:245px; box-shadow:8px 0 24px #25213c24 }
.app-shell,.editor-workspace .app-shell { margin-left:68px }
.sidebar-header { display:flex; align-items:center; gap:8px; min-height:42px; margin-bottom:26px; flex-shrink:0 }
.sidebar-toggle { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; padding:8px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink) }
.sidebar-toggle:hover { border-color:var(--purple); color:var(--purple) }
.sidebar .brand,.editor-workspace .sidebar .brand { width:0; max-width:0; padding:0; gap:8px; font-size:20px; overflow:hidden; opacity:0; visibility:hidden; white-space:nowrap; transition:opacity .15s }
.sidebar.sidebar-open .brand { width:auto; max-width:176px; opacity:1; visibility:visible }
.sidebar .brand-mark { flex:0 0 31px; width:31px; height:36px; border-radius:9px }
.sidebar .brand-mark .icon { width:23px; height:25px }
.sidebar .brand small { font-size:6px; letter-spacing:1.8px }
.sidebar .nav-label { padding:0 10px; opacity:0; white-space:nowrap; transition:opacity .15s }
.sidebar.sidebar-open .nav-label { opacity:1 }
.sidebar .tools-label { display:block; margin-top:22px }
.sidebar nav { display:block; flex:0 1 auto; min-height:0; margin:0; padding:0; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin }
.sidebar .nav-item { min-height:42px; gap:12px; padding:11px 15px; margin:0 0 5px; overflow:hidden; font-size:12px }
.sidebar .nav-item .icon { flex:0 0 18px; width:18px; height:18px }
.sidebar .nav-title,.sidebar .nav-tag { opacity:0; visibility:hidden }
.sidebar.sidebar-open .nav-title,.sidebar.sidebar-open .nav-tag { opacity:1; visibility:visible }
.sidebar .sidebar-bottom { display:none; flex-shrink:0; padding-top:20px }
.sidebar.sidebar-open .sidebar-bottom { display:block }
.sidebar .local-card { padding:12px }
.sidebar .version { margin-top:12px; padding-top:12px }
.sidebar-backdrop { position:fixed; inset:64px 0 0; z-index:35; background:#13172566 }
@media(max-width:800px) {
  .sidebar,.sidebar.sidebar-open,.editor-workspace .sidebar,.editor-workspace .sidebar.sidebar-open { position:fixed; width:100%; height:64px; padding:11px 16px; border-right:0; border-bottom:1px solid var(--border); overflow:visible; box-shadow:none }
  .app-shell,.editor-workspace .app-shell { margin-left:0; padding-top:64px }
  .sidebar-header { gap:12px; margin:0 }
  .sidebar .brand,.editor-workspace .sidebar .brand { width:auto; max-width:none; opacity:1; visibility:visible }
  .sidebar>.nav-label,.sidebar .sidebar-bottom,.sidebar.sidebar-open .sidebar-bottom { display:none }
  .sidebar nav { position:absolute; top:63px; left:0; right:0; max-height:calc(100dvh - 64px); margin:0; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface); box-shadow:0 12px 20px #15152a24; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px); transition:opacity .15s,transform .15s,visibility .15s }
  .sidebar.sidebar-open nav { opacity:1; visibility:visible; pointer-events:auto; transform:none }
  .sidebar .nav-title,.sidebar .nav-tag,.sidebar .nav-label { opacity:1; visibility:visible }
  .sidebar .nav-item { font-size:13px; margin-bottom:4px }
  .sidebar .tools-label { margin:13px 0 10px }
  .sidebar .nav-tag { display:block }
}
@media(prefers-reduced-motion:reduce) { .sidebar,.sidebar .brand,.sidebar .nav-label,.sidebar nav { transition:none } }

/* Composição de documentos e grupos de divisão. */
.creator-panel { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:20px; margin-bottom:18px; border:1px solid var(--border); border-radius:12px; background:var(--surface) }
.creator-panel h2 { font-size:18px; margin:0 0 6px }
.creator-panel p { margin:0; color:var(--muted); font-size:13px }
.split-groups-panel { flex:1 0 100%; padding:16px; border:1px solid var(--border); border-radius:9px; background:var(--surface) }
.split-group-heading,.split-group-row { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin-bottom:12px }
.split-group-heading input { max-width:110px }
.split-group-row label { flex:1; min-width:160px }
.split-group-row input { width:100% }
.split-group-badge { position:absolute; top:10px; right:10px; max-width:calc(100% - 45px); padding:4px 8px; border-radius:5px; background:var(--purple); color:#fff; font-size:10px; pointer-events:none }
#split-group-summary { display:block; font-weight:600; font-size:13px; overflow-wrap:anywhere }
.object-properties { display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--border); padding-top:12px }
.object-properties strong { font-size:11px }
.object-order,.creator-page-actions { display:flex; flex-wrap:wrap; gap:6px }
.creator-page-actions { margin-bottom:12px }
.object-box { position:absolute; pointer-events:auto; border:1px dashed transparent; cursor:move; touch-action:none }
.object-box:is(:hover,:focus-within,.moving,.object-selected) { border-color:#7d56d1; outline:1px solid white }
.object-box>.icon-button { opacity:0; position:absolute; top:0; right:0; padding:3px; width:25px; height:25px; min-width:0; min-height:0 }
.object-box:is(:hover,:focus-within,.moving,.object-selected)>button { opacity:1 }
.page-border-box { pointer-events:none }
.page-border-box>button { pointer-events:auto }
.border-grip { position:absolute; top:-12px; left:8px; padding:3px 7px; font-size:10px; background:var(--purple); color:white; border:0; border-radius:4px; cursor:move; touch-action:none }
.create-fields { display:flex; gap:12px; flex-wrap:wrap; margin-top:14px }
.create-fields label { flex:1; min-width:125px }
#create-dialog input,#create-dialog select,#watermark-dialog select { width:100%; padding:9px; border:1px solid var(--border); border-radius:6px; margin:6px 0 10px; background:var(--bg); color:var(--ink) }
#watermark-opacity { display:block; width:100%; margin:12px 0 }
#watermark-dialog .modal-actions { flex-wrap:wrap }
.main-footer>span:first-child { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px }
.company-logo { width:42px; height:46px; object-fit:contain; flex:0 0 auto }
.hiddenCanvasElement { position:absolute; top:0; left:0; width:0; height:0; visibility:hidden; pointer-events:none }
.editor-settings .properties-pages { margin-top:6px }
@media(min-width:801px) {
  .editor-workspace .editor-settings { flex-wrap:nowrap; max-height:calc(100dvh - 110px); overflow-y:auto; scrollbar-width:thin; position:sticky; top:12px; align-self:start }
  .editor-workspace .editor-settings>* { flex-shrink:0 }
}
@media(max-width:600px) {
  .creator-panel { padding:15px }
  .split-groups-panel { padding:12px; min-width:0 }
  .split-group-row input { min-width:0; max-width:100% }
  .editor-settings .object-properties { flex:1 0 100%; display:flex; flex-direction:row; flex-wrap:wrap; align-items:end }
  .object-properties strong { flex-basis:100% }
  .object-properties label { min-width:140px }
  .create-fields { flex-direction:column }
  .company-logo { width:34px; height:38px }
}