/* =========================
   VARS E BASE
========================= */
:root{
  --verde:#009b3a;
  --amarelo:#ffdf00;
  --page-w:210mm;
  --page-h:290mm;
  --head-h:62mm;   /* ↑ aumentamos para acomodar o QR + legenda */
  --foot-h:25mm;
  --pad-lr:18mm;
  --topbar-h:56px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ background:#cfd0d3; margin:0; }
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  counter-reset: page;
}

/* Offcanvas padrão */
.offcanvas{ height:auto !important; }

/* =========================
   LAYOUT DA PÁGINA (A4)
========================= */
.Page{
  position:relative;
  width:var(--page-w);
  height:var(--page-h);
  margin:10mm auto;
  background:#fff; color:#111;
  box-shadow:0 0 8mm rgba(0,0,0,.25);
  overflow:hidden;
  font-family:sans-serif;
  counter-increment: page;
  break-after: page;
}
.Page:last-child{ break-after:auto; }

/* =========================
   CABEÇALHO
========================= */
.Page-head{
  position:absolute; inset:0 0 auto 0;
  z-index:2;
  padding:8mm var(--pad-lr) 0;
  text-align:justify;
  font-size:0.8rem; line-height:1.3;
  overflow:hidden; /* impede “crescer” */
  /* OBS: altura controlada por --head-h */
}


.Page-head .logo{
  position:absolute; left:var(--pad-lr); top:10mm;
  height:16mm; max-width:60mm; object-fit:contain;
  display:none;
}

.title{
  font-size:18pt; font-weight:800; font-variant:small-caps;
  letter-spacing:.3px; margin:6px 0 3px;
  display:flex; align-items:center; justify-content:center;
}
.subtitle{ font-size:11pt; color:#444; margin-top:2px; }
.idline{ font-size:10.5pt; color:#222; margin-top:6px; }
.hr{ height:1px; background:#ddd; margin:8px auto 0; width:100%; }

/* =========================
   QR DINÂMICO (opcional)
========================= */
.qrbox{
  z-index:300;
  position:absolute; right:var(--pad-lr); top:7mm;
  width:29mm; height:29mm;
  display:none; /* JS liga quando houver state.qr */
  align-items:center; justify-content:center;
  border:1px solid #ddd; border-radius:4px; background:#fff;
}
.qrbox #qrTarget{ width:26mm; height:26mm; pointer-events:none; }
.qr-cap{
  /*z-index:400; position:absolute; right:var(--pad-lr);
  top: calc(7mm + 29mm + 2mm);*/
  font-size:8.5pt; color:#000; display:none;
  margin-left: 412px;
}
.qr-cap a{ color:inherit; text-decoration:underline; }

/* =========================
   CORPO (ÁREA ÚTIL)
========================= */
.Page-body{
  position:absolute; left:0; right:0; top:var(--head-h);
  height:calc(var(--page-h) - var(--head-h) - var(--foot-h));
  padding:0 var(--pad-lr);
  /* Evita “invadir” o rodapé. Em impressão, o overflow é neutralizado */
  overflow:clip;
}
.Page-body .content{
  height:100%;
  padding:2mm 0 4mm;
  overflow:clip;
}

/* =========================
   TIPOGRAFIA
========================= */
h2,h3,p,ul{ margin:0; }
h2{ font-size:14pt; font-weight:800; font-variant:small-caps; margin-bottom:2mm; break-after:avoid; }
h3{ font-size:12.5pt; font-weight:700; margin:2mm 0; break-after:avoid; }
p,li{ font-size:11pt; line-height:1.55; }
ul{ padding-left:18pt; }
ul.tight>li{ margin:3pt 0; }
.Block{ margin:0 0 6mm 0; page-break-inside:avoid; }

/* Placeholder de página vazia */
.Block.block--empty-page:empty::before{
  content:"Página em branco — clique e comece a digitar.";
  opacity:.35;
}

/* Força texto preto no conteúdo (evita heranças acidentais) */
.Page-body .content,
.Page-body .content h1,
.Page-body .content h2,
.Page-body .content h3,
.Page-body .content p,
.Page-body .content li{ color:#000 !important; }

/* =========================
   RODAPÉ
========================= */
.Page-foot{
  position:absolute; inset:auto 0 0 0;
  height:var(--foot-h);
  z-index:2;
  padding:1mm var(--pad-lr);
  display:grid; grid-template-columns:1fr auto; align-items:end;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  font-size:0.55rem; line-height:1.3;
  text-align:justify;
  color:#333; white-space:pre-line;
  overflow:hidden; /* impede “crescer” a página */
}
.pageno::before{ content:"Página " counter(page); }

/* =========================
   DECORAÇÃO
========================= */
.patriotic{
  position:absolute; inset:-12% -20%;
  z-index:0; pointer-events:none; opacity:.10;
  background:linear-gradient(
    45deg,
    transparent 0 42%,
    var(--verde) 42% 50%,
    var(--amarelo) 50% 58%,
    transparent 58% 100%
  );
}
.flag-br{
  position:absolute; right:6mm; bottom:12mm;
  width:12mm; z-index:0; opacity:.7; pointer-events:none;
}

/* =========================
   TOPBAR (WEB)
========================= */
.topbar{ z-index:1040; }
.topbar.no-print{
  position:sticky; top:0;
  background:#0b1020; color:#fff; padding:.5rem 0;
}

.canvas-wrap{ padding:12px 0; position:relative; }

/* Compacta botões e select no mobile */
@media (max-width:575.98px){
  .topbar .btn{ padding:.35rem .55rem; font-size:.875rem; }
  .topbar .form-select-sm{ padding-top:.25rem; padding-bottom:.25rem; }
}

/* Garante contraste do select no tema escuro */
.topbar .form-select.bg-dark.text-white{
  background-color:#212529 !important; color:#fff !important;
}

/* Quando o menu colapsado ficar alto no mobile, ele próprio rola */
@media (max-width:991.98px){
  #topbarTools{ max-height:65vh; overflow:auto; }
}

/* =========================
   MOBILE: FIT-TO-VIEW
========================= */
@media (max-width:576px){
  :root{ --content-zoom:.4; }

  .canvas-wrap{
    width:100%;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  #pagesRoot{
    width:calc(100vw / var(--content-zoom));
    max-width:none;
    transform:scale(var(--content-zoom));
    transform-origin:top left;
  }

  html,body{ overflow-x:hidden; } /* evita barra horizontal */
}

/* =========================
   TOUCH: PINCH ENABLE
========================= */
@media (hover:none) and (pointer:coarse){
  .canvas-wrap{ touch-action:none; } /* permite pinch sem o navegador roubar o gesto */
}

/* =========================
   IMPRESSÃO (ÚNICO BLOCO)
========================= */
@page{ size:A4; margin:0; }

@media print{
  html,body{ background:#fff; }

  /* Páginas sem sombra e com quebra correta */
  .Page{
    margin:0 auto;
    box-shadow:none;
    break-inside:avoid;
    break-after:page;
  }
  .Page:last-child{ break-after:auto; }

  /* Conteúdo sem cortes */
  .Page-body, .Page-body .content{ overflow:visible !important; }

  /* Ajusta transform mobile → tamanho real A4 */
  #pagesRoot{
    width:auto !important;
    transform:none !important;
  }

  /* Oculta qualquer elemento marcado como no-print */
  .no-print{ display:none !important; }

  /* Força fidelidade de cores em logos/faixas */
  *{
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* HARD-KILL do navbar (inclui casos sticky/fixed em mobile) */
  #appTopbar, #appTopbar *{ visibility:hidden !important; }
  #appTopbar{
    display:block !important;           /* alguns mobiles ignoram display:none */
    position:absolute !important;       /* tira do fluxo */
    top:0 !important; left:0 !important;
    width:0 !important; height:0 !important;
    margin:0 !important; padding:0 !important; border:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    z-index:-1 !important;
  }
  .navbar.sticky-top, .navbar.fixed-top{
    position:static !important;
    height:0 !important; overflow:hidden !important; opacity:0 !important;
  }

  /* Esconde barra flutuante do editor */
  #miniToolbar.editor-floatbar{ display:none !important; }
}

/* ===== Floating editor toolbar ===== */
#miniToolbar.editor-floatbar{
  position:fixed; /* <- agora usamos coordenadas de viewport */
  top:0; left:0;
  transform:translate(-9999px,-9999px);
  z-index:1055; /* acima do conteúdo/topbar (ajuste se usar modal) */
  background:#fff; border:1px solid #dee2e6;
  border-radius:.5rem; box-shadow:0 2px 10px rgba(0,0,0,.08);
  padding:.25rem; display:flex; gap:.25rem; align-items:center;
  pointer-events:auto;
}


#miniToolbar.editor-floatbar.hidden{
  opacity:0;
  pointer-events:none;
}
#miniToolbar.hidden{
  opacity:0; pointer-events:none;
}