/* Modo site: uma página por vez, escalada para caber na tela; campos editáveis */
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--aba, #e9e1d4); }
#palco { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 6px 30px rgba(0, 0, 0, .12); }
.pagina { display: none; }
.pagina.ativa { display: block; }

.w-pdf { display: block; margin: 16px auto 0; border: 1.5px solid var(--linha, #ccc); background: transparent; color: var(--suave, #666); border-radius: 20px; padding: 7px 16px; font: 600 12px var(--sans, sans-serif); letter-spacing: .06em; cursor: pointer; }
.w-pdf:hover { color: var(--destaque); border-color: var(--destaque); }
.capa-moldura .w-pdf { position: relative; z-index: 2; }
.formato-retrato .capa-moldura .w-pdf, .capa-moldura .w-pdf { margin-left: auto; margin-right: auto; }

.w-conta { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--suave); position: relative; z-index: 2; }
.w-conta .w-pdf { margin-top: 8px; }
.w-status { font-size: 11px; color: var(--suave); }

/* "Salvar em PDF": o navegador imprime todas as páginas, com o que foi preenchido */
@media print {
  html, body { height: auto; overflow: visible; background: none; }
  #palco { position: static; transform: none !important; width: auto !important; height: auto !important; box-shadow: none; }
  .pagina, .pagina.ativa { display: block; break-after: page; }
  .pagina:last-child { break-after: auto; }
  .w-pdf { display: none; }
}

[contenteditable], .w-campo { outline: none; caret-color: var(--destaque); cursor: text; -webkit-user-select: text; user-select: text; }
[data-tg] { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* marcações por toque */
i[data-tg].marcado { background: var(--destaque); border-color: var(--destaque); }
i[data-tg][data-v] { border-color: transparent; }
.checks li.marcado { color: var(--suave); text-decoration: line-through; }
.checks li.marcado::before { background: var(--destaque); border-color: var(--destaque); }
.checks li[contenteditable] { cursor: text; }

/* texto digitado */
.linhas[contenteditable], .notas-corpo[contenteditable] { line-height: var(--pauta); font-size: 15px; overflow: hidden; padding: 0 2px; white-space: pre-wrap; word-break: break-word; }
.papel-quadriculado[contenteditable], .papel-pontilhado[contenteditable] { line-height: 24px; }
.papel-branco[contenteditable] { line-height: 1.5; }
.tabela td[contenteditable] { overflow: hidden; white-space: nowrap; max-width: 0; font-size: 13px; }
.tela-celular .tabela td[contenteditable] { font-size: 11.5px; }
.checks li[contenteditable] { font-size: 15px; white-space: nowrap; overflow: hidden; }
.campo { position: relative; }
.w-campo { position: absolute; left: 0; right: 0; bottom: 2px; height: 22px; border: 0; padding: 0; background: transparent; font: inherit; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--tinta); }
.hora .w-txt { flex: 1; min-width: 0; padding: 3px 0 0 4px; font-size: 13px; line-height: 1.2; color: var(--tinta); overflow: hidden; white-space: nowrap; }
.lado, .ramo, .cornell > div { position: relative; }
.w-txt.bloco { flex: 1; min-height: 0; min-width: 0; margin-top: 4px; overflow: hidden; font-size: 14px; line-height: 1.35; color: var(--tinta); white-space: pre-wrap; word-break: break-word; }
.tela-celular .w-txt.bloco { font-size: 12.5px; }

/* assinatura: dica enquanto a linha está vazia (não sai no PDF) */
.dono-nome[contenteditable]:empty::before { content: attr(data-dica); font: italic 20px var(--sans, sans-serif); color: var(--suave); line-height: inherit; }
@media print { .dono-nome:empty::before, .dono-ajuda, .pagina-assinatura .botao { display: none; } }

/* bloqueio por licença */
.w-porta { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--aba, #e9e1d4); font-family: var(--sans, system-ui, sans-serif); color: var(--tinta, #2e2925); }
.w-cartao { max-width: 440px; width: 100%; text-align: center; }
.w-cartao h1 { margin: 0 0 10px; font-size: 24px; line-height: 1.2; font-family: var(--serif, inherit); }
.w-cartao p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--suave, #666); }
.w-cartao .w-preco { font-size: 17px; font-weight: 600; color: var(--tinta, #2e2925); }
.w-cartao .w-erro { color: #b3402a; font-size: 14px; min-height: 0; margin: 0; }
.w-acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 8px; }
.w-grande { margin: 0; padding: 11px 22px; font-size: 14px; }
.w-principal { background: var(--destaque, #c4765a); border-color: var(--destaque, #c4765a); color: #fff; }
.w-principal:hover { color: #fff; opacity: .9; }
.w-grande:disabled { opacity: .6; cursor: default; }
.w-link { font-size: 12px; color: var(--suave, #666); text-decoration: underline; cursor: pointer; margin-top: 4px; }
.w-acoes .w-link { margin-top: 0; font-size: 14px; }
@media print { .w-porta { display: none; } }

/* stickers colados e desenho à mão */
.pagina > .w-stickers { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.w-st { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; touch-action: none; cursor: grab; line-height: 0; }
.w-st img { width: 100%; display: block; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.w-st.sel { outline: 2px dashed var(--destaque); outline-offset: 4px; }
.w-st-x, .w-st-h, .w-st-r, .w-st-0 { display: none; position: absolute; }
.w-st.sel .w-st-x, .w-st.sel .w-st-h, .w-st.sel .w-st-r { display: block; }
.w-st.sel .w-st-0 { display: block; }
.w-st-o { display: none; position: absolute; top: 100%; left: 50%; margin-top: 18px; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 16px; background: #fff; border: 2px solid var(--destaque); color: var(--destaque); font: 700 14px/1 system-ui, sans-serif; white-space: nowrap; touch-action: none; cursor: default; }
.w-st-o input { width: 160px; height: 28px; margin: 0; accent-color: var(--destaque); touch-action: none; }
.w-st.sel .w-st-o { display: flex; }
.w-st-r { top: -16px; left: -16px; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--destaque); color: var(--destaque); font: 700 16px/22px system-ui, sans-serif; text-align: center; cursor: grab; touch-action: none; }
.w-st-0 { bottom: -16px; left: -16px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--destaque); color: #fff; font: 700 14px/26px system-ui, sans-serif; padding: 0; cursor: pointer; }
.w-st-x { top: -18px; right: -18px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--destaque); color: #fff; font: 700 18px/30px system-ui, sans-serif; padding: 0; cursor: pointer; }
.w-st-h { bottom: -16px; right: -16px; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--destaque); cursor: nwse-resize; touch-action: none; line-height: 0; }
.pagina > .w-tracos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.w-tracos path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.w-tracos .w-marca { opacity: .38; mix-blend-mode: multiply; }
body.w-modo-caneta .w-tracos { pointer-events: auto; touch-action: none; cursor: crosshair; }
body.w-modo-caneta .w-st { pointer-events: none; }
body.w-modo-caneta { -webkit-user-select: none; user-select: none; }

.w-flut { position: fixed; right: 12px; bottom: 12px; z-index: 600; display: flex; gap: 8px; }
body.w-modo-caneta .w-flut { display: none; }
.w-bt { font: 600 14px system-ui, sans-serif; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 20px; border: 1.5px solid var(--linha, #d8cfc2); background: var(--card, #fff); color: var(--tinta, #2e2925); cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .1); display: inline-flex; align-items: center; justify-content: center; }
.w-bt[hidden] { display: none; }
.w-bt:hover { border-color: var(--destaque); }
.w-bt.on { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.w-bt-grande { height: 44px; padding: 0 16px; }
.w-bt-ok { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.w-bandeja { position: fixed; left: 50%; bottom: 66px; transform: translateX(-50%); z-index: 650; width: min(560px, calc(100vw - 24px)); max-height: 46vh; overflow: auto; background: var(--card, #fffdf9); border: 1.5px solid var(--linha, #d8cfc2); border-radius: 18px; box-shadow: 0 8px 30px rgba(0, 0, 0, .18); padding: 12px 14px 16px; font-family: var(--sans, system-ui, sans-serif); color: var(--tinta, #2e2925); }
.w-bandeja[hidden], .w-barra[hidden] { display: none; }
.w-bandeja-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 4px; }
.w-bandeja-tit { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave, #888); }
.w-bandeja-grade { display: flex; flex-wrap: wrap; gap: 8px; }
.w-bandeja-item { min-width: 0; height: 56px; padding: 6px; border-radius: 12px; box-shadow: none; }
.w-bandeja-item img { max-height: 44px; max-width: 120px; width: auto; display: block; }
.w-barra { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 700; max-width: calc(100vw - 16px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 8px 10px; background: var(--card, #fffdf9); border: 1.5px solid var(--linha, #d8cfc2); border-radius: 22px; box-shadow: 0 8px 30px rgba(0, 0, 0, .18); font-family: var(--sans, system-ui, sans-serif); color: var(--tinta, #2e2925); }
.w-cor { width: 32px; min-width: 32px; height: 32px; padding: 0; border-radius: 50%; border-width: 3px; border-color: #fff; box-shadow: 0 0 0 1.5px var(--linha, #ccc); }
.w-cor.on { box-shadow: 0 0 0 3px var(--destaque); background-clip: padding-box; }
.w-mais-cores { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.w-mais-cores[hidden] { display: none; }
.formato-paisagem .w-barra.w-barra-topo { top: 12px; bottom: auto; }
.roda-cel { cursor: pointer; }
body.w-modo-caneta .roda-cel { cursor: inherit; }
.roda-toque { fill: transparent; cursor: pointer; }
.w-painel-cor { width: min(420px, calc(100vw - 24px)); }
.w-painel-cor .w-bandeja-grade { margin: 8px 0 12px; }
.w-painel-cor-pe { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.w-so input[type=color], .w-cor-livre input[type=color] { width: 36px; height: 32px; padding: 0; border: 1.5px solid var(--linha, #ccc); border-radius: 8px; background: none; cursor: pointer; }
.w-esp { width: 36px; min-width: 36px; padding: 0; }
.w-esp i { display: block; border-radius: 50%; background: var(--tinta, #2e2925); }
.w-esp.on { background: var(--card, #fff); border-color: var(--destaque); box-shadow: 0 0 0 2px var(--destaque); color: inherit; }
.w-sep { width: 1px; height: 24px; background: var(--linha, #ddd); margin: 0 4px; }
.w-so { font-size: 12px; color: var(--suave, #777); display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; cursor: pointer; }
.w-barra-aviso { flex-basis: 100%; text-align: center; font-size: 11px; color: var(--suave, #777); }
@media print { .w-flut, .w-bandeja, .w-barra, .w-st-x, .w-st-h, .w-st-r, .w-st-0, .w-st-o { display: none !important; } .w-st.sel { outline: none; } }
.w-bandeja-item { background: transparent; border: 1.5px solid var(--linha, #d8cfc2); border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; }

.w-consent { max-width: 380px; margin: 14px auto 0 !important; font-size: 11px !important; line-height: 1.45; color: var(--suave, #777) !important; }
.w-consent a { color: inherit; text-decoration: underline; }
.w-conta .w-consent { margin-top: 10px !important; }

/* dicas do guia: texto normal, quebra de linha e toque para marcar como lida */
.guia-dicas li { cursor: pointer; }
.guia-dicas li > span { white-space: normal; overflow: visible; }

/* botões flutuantes em tela estreita: quebram de linha em vez de sair da tela */
.w-flut { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 24px); }
@media (max-width: 520px) { .w-bt-grande { height: 40px; padding: 0 12px; font-size: 13px; } }

/* pop-up de evento e lembrete */
.w-ev-fundo { position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; background: rgba(46, 41, 37, .38); font-family: var(--sans, system-ui, sans-serif); color: var(--tinta, #2e2925); }
.w-ev { width: min(420px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--card, #fffdf9); border-radius: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.w-ev h2 { margin: 0 0 2px; font: 600 21px/1.2 var(--serif, inherit); }
.w-ev [hidden] { display: none; }
.w-ev-linha { display: flex; gap: 10px; }
.w-ev-linha .w-ev-campo { flex: 1; min-width: 0; }
.w-ev-campo { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--suave, #777); }
/* 16px: abaixo disso o iPhone dá zoom na tela ao tocar no campo */
.w-ev-campo input, .w-ev-campo textarea { width: 100%; min-height: 42px; padding: 8px 10px; border: 1.5px solid var(--linha, #d8cfc2); border-radius: 10px; background: #fff; color: #2e2925; font: 400 16px var(--sans, system-ui, sans-serif); resize: vertical; -webkit-appearance: none; appearance: none; }
.w-ev-campo input:focus, .w-ev-campo textarea:focus { outline: none; border-color: var(--destaque, #c4765a); }
.w-ev-opcao { display: flex; align-items: center; gap: 6px; min-height: 28px; font-size: 14px; cursor: pointer; }
.w-ev-opcao input { width: 18px; height: 18px; margin: 0; accent-color: var(--destaque, #c4765a); }
.w-ev-erro { margin: 0; font-size: 14px; color: #b3402a; }
.w-ev-erro:empty { display: none; }
.w-ev-acoes { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.w-ev-acao { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--linha, #d8cfc2); border-radius: 12px; background: transparent; color: inherit; font: 600 14px var(--sans, system-ui, sans-serif); cursor: pointer; }
.w-ev-acao:hover { border-color: var(--destaque, #c4765a); }
.w-ev-principal { background: var(--destaque, #c4765a); border-color: var(--destaque, #c4765a); color: #fff; }
.w-ev-cancelar { border-color: transparent; color: var(--suave, #777); }
.w-aviso { position: fixed; left: 50%; bottom: 68px; transform: translateX(-50%); z-index: 850; width: max-content; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 14px; background: #2e2925; color: #fff; font: 500 14px/1.35 var(--sans, system-ui, sans-serif); text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.w-aviso a { color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
@media print { .w-ev-fundo, .w-aviso { display: none !important; } }
/* vision board: fotos e textos editáveis */
.vb-foto { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vb-foto:not(.com-foto):hover::after { opacity: .9; }
.vb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.vb-img[hidden] { display: none; }
.vb-foto.com-foto { cursor: grab; touch-action: none; }
.vb-foto.com-foto::after { display: none; }
.vb-foto.aguardando::after { content: "foto a caminho"; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.vb-foto.sel { outline: 3px solid var(--destaque); outline-offset: -3px; }
.vb-edita[contenteditable]:focus { box-shadow: inset 0 0 0 1px var(--destaque); }
.w-foto-arquivo { position: fixed; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.w-foto-dica { font-size: 12px; color: var(--suave, #777); margin: 0 6px; }
@media (max-width: 520px) { .w-foto-dica { flex-basis: 100%; text-align: center; } }
.w-aviso[hidden] { display: none; }
@media print {
  .w-barra-foto, .w-aviso, .w-foto-arquivo { display: none !important; }
  .vb-foto::after { display: none; }
  .vb-foto.sel { outline: none; }
  .vb-palavra-ano:empty::before { content: ""; }
  .vb-edita[contenteditable]:focus { box-shadow: none; }
}