/* ═══ DIÁRIO EM LIVRO — capa, papel, elementos e editor ═══
   A escala --dz-escala (largura real / 620) é posta por js/diario.js no
   #dz-livro e no #dz-folha-corpo: tamanhos de letra, stickers e fitas
   crescem com a página em vez de quebrar em ecrãs pequenos. */

#dz-raiz { --dz-rosa: #ec4899; --dz-rosa-claro: #fbcfe8; --dz-turquesa: #5fc7b8; }

/* o atributo hidden tem de ganhar a qualquer display de autor (a barra é
   display:flex e sem isto nunca se escondia) */
#dz-raiz [hidden] { display: none !important; }

#dz-raiz .dz-topo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
  max-width: 940px; margin: 6px auto 36px; padding: 0 12px;
  /* 36px: a capa dura sobressai ~21px por cima do bloco e não pode tocar
     as letras do título */
}
#dz-raiz .dz-topo h3 { margin: 0; font-size: 22px; color: #6b46c1; }
#dz-raiz .dz-privacidade { font-size: 12.5px; color: #718096; }

/* ── livro (leitura) ── */
#dz-palco { position: relative; max-width: 940px; margin: 0 auto; padding: 0 6px; }
#dz-livro { width: 100%; --dz-escala: 1; }

.dz-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: none; cursor: pointer; z-index: 5;
  background: rgba(255, 255, 255, 0.92); color: #6b46c1;
  font-size: 26px; line-height: 1; box-shadow: 0 3px 10px rgba(107, 70, 193, 0.25);
}
.dz-seta:hover { background: var(--dz-rosa-claro); }
#dz-ant { left: -22px; }
#dz-seg { right: -22px; }

.dz-barra { display: flex; gap: 10px; justify-content: center; margin: 14px auto 4px; flex-wrap: wrap; }
.dz-barra button {
  border: none; border-radius: 999px; padding: 11px 22px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dz-barra button:active { transform: scale(0.96); }
#dz-nova { background: var(--dz-rosa); color: #fff; box-shadow: 0 4px 12px rgba(236, 72, 153, 0.35); }
#dz-nova:disabled { background: #cbd5e0; box-shadow: none; cursor: not-allowed; }
#dz-editar { background: #fff; color: #6b46c1; border: 1px solid var(--dz-rosa-claro); }
#dz-editar:disabled { color: #a0aec0; cursor: not-allowed; }
#dz-personalizar { background: #fff; color: #6b46c1; border: 1px solid var(--dz-rosa-claro); }

/* ── painel «Personalizar»: escolher capa e papel ── */
#dz-painel {
  width: min(940px, calc(100vw - 40px)); max-width: none;
  max-height: calc(100dvh - 40px); margin: 20px auto 0; padding: 18px;
  background: #fffcf8; color: #352d42; border: 1px solid #eadfe7; border-radius: 24px;
  font-family: 'Nunito', sans-serif; overflow: hidden;
  box-shadow: 0 8px 24px rgba(48, 34, 59, .08);
}
.dz-painel-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dz-painel-topo strong { color: #6b46c1; font-size: 16px; }
.dz-painel-fechar {
  border: none; background: #fdf2f8; color: #b83280; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-weight: 800; line-height: 1;
  font-family: inherit;
}
.dz-painel-fechar:hover { background: var(--dz-rosa-claro); }
.dz-painel-seccao {
  font-weight: 800; color: #6b46c1; font-size: 13.5px; margin: 12px 0 8px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.dz-painel-linha { display: flex; flex-wrap: wrap; gap: 10px; }
.dz-painel-linha.dz-capas { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 12px; justify-items: center; }
.dz-painel-linha.dz-papeis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* capas ilustradas: a amostra é a própria ilustração em miniatura */
.dz-capa-opcao.dz-com-arte { background-size: cover !important; background-position: center !important; }
.dz-capa-opcao.dz-com-arte span { display: none; }
.dz-capa-opcao.dz-com-arte.dz-escolhida { border-color: var(--dz-rosa); }
/* cor do nome */
.dz-cores-nome { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-cor-nome {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 0 1px #cbd5e0; cursor: pointer;
}
.dz-cor-nome.dz-escolhida { box-shadow: 0 0 0 3px var(--dz-rosa); }
/* letra do nome */
.dz-letras { display: grid; grid-template-columns: 1fr; gap: 8px; }
.dz-letra-nome {
  border: 2px solid var(--dz-rosa-claro); border-radius: 10px; background: #fffdf6;
  color: #4a5568; cursor: pointer; padding: 8px 12px; font-size: 15px; font-weight: 700;
  font-family: inherit; text-align: left;
}
.dz-letra-nome.dz-escolhida { border-color: var(--dz-rosa); background: #fdf2f8; }
.dz-capa-opcao {
  width: 64px; height: 84px; border-radius: 10px; border: 3px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); cursor: pointer;
  display: grid; place-items: center; font-size: 30px; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.dz-capa-opcao.dz-escolhida { border-color: var(--dz-rosa); box-shadow: 0 0 0 3px var(--dz-rosa-claro), 0 3px 8px rgba(0, 0, 0, 0.2); }
.dz-papel-opcao {
  border: 3px solid #fff; border-radius: 10px; cursor: pointer;
  padding: 10px 16px; background-color: #fffdf6;
  font-family: inherit; font-weight: 700; font-size: 14.5px; color: #4a5568;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); text-align: left;
}
.dz-papel-opcao.dz-escolhida { border-color: var(--dz-rosa); box-shadow: 0 0 0 3px var(--dz-rosa-claro), 0 2px 6px rgba(0, 0, 0, 0.12); }
.dz-prev-pautado { background-image: repeating-linear-gradient(to bottom, transparent 0 9px, #d9e6f2 9px 10px); }
.dz-prev-quadriculado {
  background-image: repeating-linear-gradient(to right, transparent 0 9px, #dde7f0 9px 10px),
    repeating-linear-gradient(to bottom, transparent 0 9px, #dde7f0 9px 10px);
}
.dz-prev-pontos { background-image: radial-gradient(#c3d2e2 1.2px, transparent 1.6px); background-size: 10px 10px; }

/* ── PIN do cadeado ── */
.dz-pin-linha { display: flex; gap: 8px; align-items: center; }
.dz-pin-linha input {
  flex: 1; min-width: 0; border: 2px solid var(--dz-rosa-claro); border-radius: 10px;
  padding: 9px 12px; font-family: inherit; font-size: 16px; font-weight: 700;
  color: #4a5568; letter-spacing: 6px; text-align: center; background: #fffdf6;
}
.dz-pin-linha input:focus { outline: none; border-color: var(--dz-rosa); }
.dz-pin-guardar, .dz-pin-tirar {
  border: none; border-radius: 10px; padding: 9px 12px; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 13.5px; white-space: nowrap;
}
.dz-pin-guardar { background: var(--dz-rosa); color: #fff; }
.dz-pin-tirar { background: #fee2e2; color: #b83280; }
.dz-pin-estado { font-size: 13.5px; color: #4a5568; }
.dz-pin-dica { font-size: 12px; color: #a0aec0; margin-top: 8px; }

/* trinco: teclado do PIN sobre o livro fechado */
#dz-pin-trinco {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: rgba(45, 38, 58, 0.42);
}
.dz-pin-cartao {
  background: #fff; border-radius: 20px; padding: 18px 20px;
  box-shadow: 0 12px 30px rgba(45, 38, 58, 0.35);
  text-align: center; font-family: 'Nunito', sans-serif;
}
.dz-pin-cartao.dz-pin-erro { animation: dz-pin-treme 0.4s; }
@keyframes dz-pin-treme {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.dz-pin-titulo { font-weight: 800; color: #6b46c1; font-size: 16px; margin-bottom: 10px; }
.dz-pin-buracos { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; }
.dz-pin-buracos span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--dz-rosa-claro); }
.dz-pin-buracos span.cheio { background: var(--dz-rosa); border-color: var(--dz-rosa); }
.dz-pin-teclas { display: grid; grid-template-columns: repeat(3, 56px); gap: 8px; justify-content: center; }
.dz-pin-teclas button {
  border: none; background: #fdf2f8; color: #6b46c1; font-size: 20px; font-weight: 800;
  border-radius: 12px; height: 48px; cursor: pointer; font-family: inherit;
}
.dz-pin-teclas button:hover { background: var(--dz-rosa-claro); }
.dz-pin-esqueci {
  margin-top: 12px; border: none; background: none; color: #a0aec0;
  font-size: 12.5px; cursor: pointer; text-decoration: underline; font-family: inherit;
}

/* sem a livraria (raro): páginas empilhadas simples, roda-se com o dedo */
.dz-sem-flip .dz-pagina { position: relative; display: block; max-width: 560px; margin: 0 auto 24px; }
.dz-sem-flip .dz-capa-miolo, .dz-sem-flip .dz-fim-miolo { position: static; padding: 44px 18px; }

/* ── presença de livro ── */
/* capa dura (hardcover): vive ATRÁS do bloco. O transform:translateZ(0) do
   .stf__parent cria o contexto de empilhamento que segura os z-index:-1
   aqui dentro. Sobra à volta das páginas, lombada escura no lado esquerdo,
   brilho de cartão e sombra de livro pousado em camadas. Nada de filter no
   pai — aplainava as transformações 3D do flip. */
#dz-livro.stf__parent::before {
  content: ''; position: absolute; z-index: -1;
  inset: calc(var(--dz-escala, 1) * -18px) calc(var(--dz-escala, 1) * -20px);
  border-radius: calc(var(--dz-escala, 1) * 24px);
  background:
    linear-gradient(to right,
      rgba(23, 9, 28, 0.10) 0,
      rgba(23, 9, 28, 0) calc(var(--dz-escala, 1) * 18px)),
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.10) 0,
      rgba(255, 255, 255, 0) 22%,
      rgba(23, 9, 28, 0.05) 82%,
      rgba(23, 9, 28, 0.12) 100%),
    linear-gradient(165deg, var(--dz-capa-a, #86d8ca) 0%, var(--dz-capa-b, #5fc0b0) 55%, var(--dz-capa-c, #48a494) 100%);
  box-shadow:
    inset 0 0 0 calc(var(--dz-escala, 1) * 1px) rgba(255, 255, 255, 0.28),
    0 3px 6px rgba(45, 38, 58, 0.14),
    0 14px 24px -8px rgba(45, 38, 58, 0.22),
    0 38px 64px -14px rgba(45, 38, 58, 0.4);
}

/* pilha de folhas à vista entre a capa dura e a 1.ª página */
#dz-livro.stf__parent::after {
  content: ''; position: absolute; z-index: -1;
  inset: calc(var(--dz-escala, 1) * -6px) calc(var(--dz-escala, 1) * -7px);
  border-radius: calc(var(--dz-escala, 1) * 12px);
  background: repeating-linear-gradient(to bottom, #fbf6e9 0 2px, #e5dcc5 2px 3px);
}

/* livro FECHADO (paisagem, na capa): a capa dura e a pilha de folhas
   envolvem só a metade direita — o bloco é de spread mas o livro está
   fechado sobre a mesa */
#dz-livro.stf__parent[data-vista="fechado"]::before,
#dz-livro.stf__parent[data-vista="fechado"]::after { left: 51%; }

/* lombada: sombra de encadernação no lado interior de cada página. As
   classes dz-esq/dz-dir são postas por js/diario.js em paisagem (índice par
   = esquerda) e vivem na própria página: viram com ela durante o flip */
#dz-livro .dz-esq::before, #dz-livro .dz-dir::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 9%;
  pointer-events: none; z-index: 4;
}
#dz-livro .dz-esq::before { right: 0; background: linear-gradient(to right, rgba(58, 48, 74, 0), rgba(58, 48, 74, 0.15)); }
#dz-livro .dz-dir::before { left: 0; background: linear-gradient(to left, rgba(58, 48, 74, 0), rgba(58, 48, 74, 0.13)); }

/* ── páginas ── */
.dz-pagina {
  /* fundo do papel é desenhado aqui; as páginas do flip assumem o tamanho */
  background: #fffdf6;
  color: #4a5568; overflow: hidden;
  font-family: 'Nunito', sans-serif;
  border-radius: calc(var(--dz-escala, 1) * 12px);
}
/* em paisagem, o canto voltado para a lombada é recto (as páginas
   encontram-se ali); o exterior é que arredonda */
#dz-livro .dz-esq { border-top-right-radius: 0; border-bottom-right-radius: 0; }
#dz-livro .dz-dir { border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* papel interior — escolhido no painel «Personalizar»; a classe vive no
   #dz-raiz e veste o livro E a folha do editor (o .dz-papel sem variante
   é o mesmo branco, para o fallback dz-sem-flip) */
.dz-papel { color: #4a5568; overflow: hidden; font-family: 'Nunito', sans-serif; }
#dz-raiz.dz-papel--pautado .dz-papel {
  background:
    linear-gradient(90deg, transparent 0 calc(9% - 1px), #f9c6d5 calc(9% - 1px) 9%, transparent 9%),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--dz-escala, 1) * 44px - 1px), #d9e6f2 calc(var(--dz-escala, 1) * 44px - 1px) calc(var(--dz-escala, 1) * 44px)),
    #fffdf6;
}
#dz-raiz.dz-papel--quadriculado .dz-papel {
  background:
    linear-gradient(90deg, transparent 0 calc(9% - 1px), #f9c6d5 calc(9% - 1px) 9%, transparent 9%),
    repeating-linear-gradient(to right, transparent 0 calc(var(--dz-escala, 1) * 44px - 1px), #dde7f0 calc(var(--dz-escala, 1) * 44px - 1px) calc(var(--dz-escala, 1) * 44px)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--dz-escala, 1) * 44px - 1px), #dde7f0 calc(var(--dz-escala, 1) * 44px - 1px) calc(var(--dz-escala, 1) * 44px)),
    #fffdf6;
}
#dz-raiz.dz-papel--pontos .dz-papel {
  background:
    linear-gradient(90deg, transparent 0 calc(9% - 1px), #f9c6d5 calc(9% - 1px) 9%, transparent 9%),
    radial-gradient(circle, #c3d2e2 calc(var(--dz-escala, 1) * 1.5px), transparent calc(var(--dz-escala, 1) * 2.2px)),
    #fffdf6;
  background-size: auto, calc(var(--dz-escala, 1) * 44px) calc(var(--dz-escala, 1) * 44px), auto;
}
#dz-raiz.dz-papel--liso .dz-papel { background: #fffdf6; }

.dz-data {
  display: inline-block; margin: 3.5% 8% 0 11%; padding: 0 14px 2px 6px;
  font-family: 'Caveat', cursive; font-weight: 600;
  font-size: calc(var(--dz-escala, 1) * 22px);
  color: #8a94a6;
  border-bottom: 2px dotted #d3dbe7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 78%;
}
.dz-corpo { position: absolute; inset: 0; }
.dz-num {
  position: absolute; right: 4%;
  /* desviado do canto dobrado */
  bottom: calc(3% + var(--dz-escala, 1) * 30px);
  font-size: calc(var(--dz-escala, 1) * 14px); color: #b8c0cf;
}
/* canto exterior, como num livro: páginas esquerdas numeram à esquerda */
#dz-livro .dz-esq .dz-num { right: auto; left: 4%; }

/* ── elementos sobre a página ── */
.dz-el { position: absolute; }
.dz-txt {
  font-family: 'Caveat', cursive; font-weight: 600;
  line-height: calc(var(--dz-escala, 1) * 44px); /* assenta nas pautas */
  overflow-wrap: break-word; white-space: pre-wrap;
}
.dz-txt.t-p { font-size: calc(var(--dz-escala, 1) * 24px); }
.dz-txt.t-m { font-size: calc(var(--dz-escala, 1) * 31px); }
.dz-txt.t-g { font-size: calc(var(--dz-escala, 1) * 42px); }

.dz-stk { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18)); user-select: none; }

.dz-foto {
  background: #fff; padding: calc(var(--dz-escala, 1) * 7px) calc(var(--dz-escala, 1) * 7px) calc(var(--dz-escala, 1) * 20px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}
.dz-foto img { display: block; width: 100%; height: auto; }
.dz-foto img:not([src]) { visibility: hidden; }
.dz-foto::before {   /* fita washi a segurar a fotografia */
  content: ''; position: absolute; top: calc(var(--dz-escala, 1) * -12px); left: 50%;
  width: 34%; height: calc(var(--dz-escala, 1) * 26px);
  transform: translateX(-50%) rotate(-4deg);
  background: repeating-linear-gradient(45deg, var(--dz-rosa-claro) 0 8px, #fda4cf 8px 16px);
  opacity: 0.85; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.dz-foto-espera::after {
  content: '📷'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: calc(var(--dz-escala, 1) * 30px); opacity: 0.6;
}

/* ── capa ── */
/* a livraria força display:block nas páginas visíveis: a composição flex
   vive no .dz-capa-miolo (filho), a página só traz o fundo. O gradiente
   vem das vars da capa escolhida (postas por aplicarPreferencias no
   #dz-raiz — a capa dura do livro bebe das mesmas vars) */
.dz-capa {
  cursor: pointer;
  color: #fff;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.35) 0 6%, transparent 7%),
    radial-gradient(circle at 84% 22%, rgba(255, 255, 255, 0.3) 0 4%, transparent 5%),
    radial-gradient(circle at 76% 82%, rgba(255, 255, 255, 0.28) 0 5%, transparent 6%),
    linear-gradient(160deg, var(--dz-capa-a, #8fdccf) 0%, var(--dz-capa-b, #6ecfc0) 55%, var(--dz-capa-c, #5fc7b8) 100%);
}
/* moldura gravada, como numa capa dura */
.dz-capa-moldura {
  position: absolute; inset: calc(var(--dz-escala, 1) * 9px);
  border: calc(var(--dz-escala, 1) * 1.5px) solid rgba(255, 255, 255, 0.5);
  border-radius: calc(var(--dz-escala, 1) * 9px);
  pointer-events: none;
}
.dz-capa-miolo {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--dz-escala, 1) * 8px);
  padding: 6% 5%;
  overflow: hidden;   /* fontes de fallback mais altas não podem empurrar a pílula para fora */
  color: #fff; text-align: center;
}
.dz-capa-fita {
  position: absolute; top: calc(var(--dz-escala, 1) * 18px); left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 42%; height: calc(var(--dz-escala, 1) * 26px);
  background: repeating-linear-gradient(45deg, #fbcfe8 0 10px, #f9a8d4 10px 20px);
  border-radius: 3px; opacity: 0.9; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.dz-capa-estrelas { font-size: calc(var(--dz-escala, 1) * 20px); letter-spacing: 8px; }
.dz-capa-enfeite { font-size: calc(var(--dz-escala, 1) * 58px); line-height: 1; }
.dz-capa-principal { font-size: calc(var(--dz-escala, 1) * 112px); line-height: 1; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18)); }
.dz-capa-titulo {
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: calc(var(--dz-escala, 1) * 44px); line-height: 1.05;
  text-shadow: 0 3px 0 #ec4899, 0 6px 14px rgba(0, 0, 0, 0.25);
  text-align: center; padding: 0 6%;
}
.dz-capa-nome { font-family: var(--dz-nome-fonte, 'Caveat', cursive); font-weight: 700; font-size: calc(var(--dz-escala, 1) * 30px); color: var(--dz-nome-cor, white); overflow-wrap: anywhere; }
.dz-capa-ilustrada { background: #f3e8db; }
.dz-capa-arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.dz-capa-escrita { position: absolute; top: var(--dz-titulo-topo, 17%); left: 14%; right: 14%; text-align: center; color: var(--dz-tinta); }
.dz-capa-ilustrada .dz-capa-titulo { color: var(--dz-tinta); font-size: calc(var(--dz-escala, 1) * var(--dz-titulo-tamanho, 77px)); line-height: .98; font-weight: 800; letter-spacing: -.025em; padding: 0; text-shadow: none; }
.dz-capa-ilustrada .dz-capa-nome { margin-top: calc(var(--dz-escala, 1) * 14px); font-size: calc(var(--dz-escala, 1) * 35px); line-height: 1.1; }
.dz-capa-ilustrada .dz-nome-longo { font-size: calc(var(--dz-escala, 1) * 24px); }
.dz-capa-assinatura { position: absolute; bottom: 6.7%; left: 25%; right: 25%; text-align: center; color: var(--dz-tinta); font: 800 calc(var(--dz-escala, 1) * 12px)/1 'Nunito', sans-serif; letter-spacing: calc(var(--dz-escala, 1) * 5px); }
.dz-capa-abrir { position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 800 calc(var(--dz-escala, 1) * 13px)/1.3 'Nunito', sans-serif; color: #47334c; background: rgba(255,252,246,.92); border-radius: 999px; padding: calc(var(--dz-escala, 1) * 6px) calc(var(--dz-escala, 1) * 13px); }
.dz-sem-flip .dz-capa-ilustrada { aspect-ratio: 620 / 800; }
.dz-capa-cadeado { font-size: calc(var(--dz-escala, 1) * 30px); animation: dz-balanco 2.6s ease-in-out infinite; }
@keyframes dz-balanco { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.dz-capa-toque {
  font-size: calc(var(--dz-escala, 1) * 15px); font-weight: 700;
  background: rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 5px 16px;
  animation: dz-pulsar 1.8s ease-in-out infinite;
}
@keyframes dz-pulsar {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.07); opacity: 1; }
}

/* última página */
.dz-fim-miolo {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--dz-escala, 1) * 18px);
}
.dz-fim-emoji { font-size: calc(var(--dz-escala, 1) * 34px); letter-spacing: 6px; }
.dz-fim-texto { font-family: 'Caveat', cursive; font-weight: 600; font-size: calc(var(--dz-escala, 1) * 30px); color: #a0aec0; text-align: center; padding: 0 10%; }

/* ── presents: páginas da família no fim do livro ── */
.dz-presente {
  background:
    radial-gradient(circle at 12% 8%, rgba(236, 72, 153, 0.10) 0 8%, transparent 9%),
    radial-gradient(circle at 88% 14%, rgba(236, 72, 153, 0.08) 0 6%, transparent 7%),
    linear-gradient(165deg, #fff5fa 0%, #fdeef6 60%, #fbdce9 100%);
}
.dz-presente-selo {
  display: inline-block; margin: 6% 8% 0;
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: calc(var(--dz-escala, 1) * 15px); color: #be185d;
  background: rgba(255, 255, 255, 0.7); border-radius: 999px; padding: 4px 14px;
  box-shadow: 0 2px 6px rgba(190, 24, 93, 0.15);
}
.dz-presente-msg {
  font-family: 'Caveat', cursive; font-weight: 600;
  font-size: calc(var(--dz-escala, 1) * 31px);
  line-height: calc(var(--dz-escala, 1) * 40px);
  color: #9d174d; padding: 5% 11% 0;
  overflow-wrap: break-word; white-space: pre-wrap;
}
.dz-presente-autor {
  position: absolute; bottom: calc(9% + var(--dz-escala, 1) * 6px); right: 8%;
  font-family: 'Caveat', cursive; font-weight: 700;
  font-size: calc(var(--dz-escala, 1) * 26px); color: #be185d;
}

/* ── editor ── */
#dz-editor { position: relative; max-width: 640px; margin: 0 auto; padding: 0 10px 30px; }
.dz-ferramentas {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fdf2f8; border: 2px solid var(--dz-rosa-claro); border-radius: 18px;
  padding: 8px 10px; margin-bottom: 12px; position: relative; z-index: 6;
}
.dz-ferramentas button {
  border: none; border-radius: 999px; padding: 9px 16px; cursor: pointer;
  font-size: 14.5px; font-weight: 700; font-family: inherit; background: #fff; color: #6b46c1;
  box-shadow: 0 2px 6px rgba(236, 72, 153, 0.18);
}
.dz-ferramentas button:active { transform: scale(0.95); }
#dz-concluir { background: var(--dz-rosa) !important; color: #fff !important; margin-left: auto; }
#dz-btn-apagar { background: #fff; color: #e53e3e; border: 2px solid #fed7d7 !important; }
#dz-btn-apagar:disabled { color: #a0aec0; cursor: not-allowed; }
#dz-btn-desenho { background: #fff; color: #2f855a; border: 2px solid #c6f6d5 !important; }

/* ── desenho livre: lápis sobre a página ── */
#dz-desenho {
  position: absolute; inset: 0; z-index: 5;
  cursor: crosshair; touch-action: none;
}
#dz-desenho-barra {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 auto 8px; padding: 7px 10px;
  background: #f0fff4; border: 2px solid #c6f6d5; border-radius: 14px;
  position: relative; z-index: 6;
}
.dz-desenho-cor {
  width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 0 1px #cbd5e0; cursor: pointer;
}
.dz-desenho-cor.dz-escolhida { box-shadow: 0 0 0 3px #2f855a; }
.dz-desenho-ferr {
  border: none; background: #fff; color: #2f855a; font-weight: 700; cursor: pointer;
  border-radius: 999px; padding: 7px 12px; font-size: 13px; font-family: inherit;
  box-shadow: 0 2px 5px rgba(47, 133, 90, 0.18);
}
.dz-desenho-usar {
  border: none; background: #2f855a; color: #fff; font-weight: 700; cursor: pointer;
  border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-family: inherit;
  margin-left: auto; box-shadow: 0 3px 8px rgba(47, 133, 90, 0.3);
}
.dz-dica { font-size: 11.5px; color: #b83280; width: 100%; }

.dz-folha {
  position: relative;
  width: 100%; max-width: 560px; aspect-ratio: 620 / 800;
  margin: 0 auto; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(74, 85, 104, 0.25);
  touch-action: pan-y;
}
.dz-folha.dz-soltar { outline: 3px dashed var(--dz-rosa); outline-offset: -8px; }
#dz-folha-corpo { position: absolute; inset: 0; --dz-escala: 1; }
#dz-folha-data { position: relative; z-index: 1; }

#dz-folha-corpo .dz-el { touch-action: none; cursor: grab; }
#dz-folha-corpo .dz-el:active { cursor: grabbing; }
#dz-folha-corpo .dz-txt { cursor: text; }
#dz-folha-corpo .dz-txt:focus { outline: none; }
#dz-folha-corpo .dz-sel { outline: 2px dashed var(--dz-rosa); outline-offset: 4px; }
.dz-alca {
  position: absolute; right: calc(var(--dz-escala, 1) * -9px); bottom: calc(var(--dz-escala, 1) * -9px);
  width: calc(var(--dz-escala, 1) * 24px); height: calc(var(--dz-escala, 1) * 24px);
  border-radius: 50%; background: var(--dz-rosa); border: 2.5px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); display: none;
}
.dz-sel .dz-alca { display: block; }

/* paleta de stickers */
#dz-palheta {
  /* popover sobre a folha: antigamente ficava DEPOIS da página no fluxo e
     caía abaixo da dobra do ecrã — a criança tocava em Stickers e não a via */
  position: absolute; z-index: 25;
  top: 96px; left: 50%; transform: translateX(-50%);
  width: min(94%, 560px); margin: 0;
  background: #fff; border: 2px solid var(--dz-rosa-claro); border-radius: 16px;
  padding: 8px; max-height: min(58vh, 460px); overflow-y: auto;
  box-shadow: 0 14px 34px rgba(107, 70, 193, 0.3);
}
.dz-palheta-linha { display: flex; flex-wrap: wrap; }
.dz-palheta-epoca {
  font-size: 12.5px; font-weight: 800; color: #b83280;
  margin: 2px 0 4px; letter-spacing: 0.3px;
}
.dz-palheta-linha.dz-epoca {
  background: #fdf2f8; border-radius: 10px; padding: 2px 4px;
  margin-bottom: 6px;
}
.dz-emoji {
  border: none; background: transparent; font-size: 27px; cursor: pointer;
  width: 40px; height: 40px; border-radius: 10px; line-height: 1;
}
.dz-emoji:hover { background: #fdf2f8; }

/* mini-barra do elemento selecionado */
#dz-mini {
  position: absolute; left: 50%; bottom: calc(var(--dz-escala, 1) * -20px);
  transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 999px; padding: 7px 12px;
  box-shadow: 0 4px 14px rgba(74, 85, 104, 0.3);
  white-space: nowrap;
}
#dz-mini[hidden] { display: none; }
.dz-mini-cores { display: inline-flex; gap: 5px; }
#dz-mini:not(.so-texto) .dz-mini-cores, #dz-mini:not(.so-texto) [data-tam] { display: none; }
.dz-cor { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 0 0 1px #cbd5e0; cursor: pointer; }
.dz-mini-btn {
  border: none; background: #fdf2f8; color: #6b46c1; font-weight: 800;
  border-radius: 999px; padding: 5px 10px; cursor: pointer; font-size: 13px; font-family: inherit;
}
.dz-mini-apagar { background: #fee2e2; }

@media (max-width: 640px) {
  #dz-painel { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 20px; }
  .dz-personalizar-topo { padding: 16px 18px; }
  #dz-painel h2 { font-size: 24px; }
  .dz-personalizar-corpo { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .dz-personalizar-preview { padding: 18px; display: grid; grid-template-columns: 120px 1fr; gap: 8px 20px; align-items: center; text-align: left; }
  #dz-preview { grid-row: 1 / 3; width: 120px; }
  .dz-personalizar-preview strong { align-self: end; margin: 0; }
  .dz-personalizar-preview p { align-self: start; margin: 0; }
  .dz-personalizar-opcoes { padding: 20px 18px; overflow: visible; }
  .dz-mini-capa { height: 105px; }
  .dz-personalizar-pe { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
  .dz-personalizar-pe p:empty { display: none; }
  .dz-seta { width: 38px; height: 38px; font-size: 21px; }
  #dz-ant { left: 0; } #dz-seg { right: 0; }
  .dz-ferramentas button { padding: 8px 12px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-capa-cadeado, .dz-capa-toque { animation: none; }
  .dz-mini-capa { transition: none; }
}

/* Livro fechado/aberto: uma capa rígida, uma junta fina e folhas suaves. */
#view-diario { container: diario / inline-size; }
#dz-raiz {
  --dz-altura-livro: clamp(240px, calc(var(--dz-espaco, 100dvh - 160px) - 64px), 920px);
  --dz-raio-livro: 10px;
  --dz-sombra-livro: 0 14px 18px -14px rgba(39,30,48,.26), 0 34px 40px -18px rgba(39,30,48,.3);
}
#dz-raiz .dz-topo { margin-bottom: 20px; }
#dz-raiz #dz-palco { box-sizing: border-box; width: 100%; max-width: calc(var(--dz-altura-livro) * 1.55 + 56px); padding: 18px 28px 24px; container-type: inline-size; }

#dz-livro { min-width: 0 !important; max-width: calc(var(--dz-altura-livro) * 1.55) !important; margin: 0 auto; }
#dz-livro.dz-modo-fechado { display: flex; flex-direction: column; align-items: center; }
.dz-volume { position: relative; isolation: isolate; width: 50%; aspect-ratio: 620 / 800; border-radius: 6px var(--dz-raio-livro) var(--dz-raio-livro) 6px; cursor: pointer; outline-offset: 9px; }
.dz-volume:focus-visible { outline: 3px solid #a33c72; }
#dz-livro .dz-volume > .dz-capa { position: absolute; inset: 0; border-radius: inherit; }
.dz-volume::before { content: ''; position: absolute; z-index: -1; inset: 2px -3px -3px -4px; border-radius: inherit; background: #e5e1da; box-shadow: var(--dz-sombra-livro); }
.dz-volume::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg,rgba(255,255,255,.5),rgba(30,25,32,.09) 1%,rgba(255,255,255,.25) 2%,transparent 3%,rgba(20,15,24,.11) 3.4%,rgba(255,255,255,.2) 4.3%,transparent 6%,transparent 98.8%,rgba(38,30,38,.05)); }
.dz-convite { margin: 22px 0 0; font: 600 12px/1.5 'Nunito',sans-serif; color: #766b7f; }
#dz-livro.stf__parent::before { inset: -3px -4px -4px; border-radius: calc(var(--dz-raio-livro) + 3px); background: #e7e3df; box-shadow: var(--dz-sombra-livro); }
#dz-livro.stf__parent::after { inset: 0 -2px -2px; border-radius: calc(var(--dz-raio-livro) + 1px); background: #f1eee9; }
#dz-livro .dz-pagina { border-radius: var(--dz-raio-livro); }
#dz-livro .dz-esq::before, #dz-livro .dz-dir::before { width: 6%; }
#dz-livro .dz-esq::before { background: linear-gradient(90deg,transparent,rgba(42,36,40,.065) 85%,rgba(42,36,40,.11)); }
#dz-livro .dz-dir::before { background: linear-gradient(90deg,rgba(42,36,40,.08),rgba(42,36,40,.035) 15%,transparent); }
#dz-livro .dz-esq { border-top-right-radius: 9px 3px; border-bottom-right-radius: 16px 5px; }
#dz-livro .dz-dir { border-top-left-radius: 9px 3px; border-bottom-left-radius: 16px 5px; }
/* As capas clássicas usam a mesma encadernação e uma composição simples. */
.dz-capa:not(.dz-capa-ilustrada) { background: linear-gradient(100deg,var(--dz-capa-b),var(--dz-capa-a)); }
.dz-capa-moldura, .dz-capa-fita, .dz-capa-estrelas, .dz-capa-enfeite, .dz-capa-cadeado, .dz-capa-toque { display: none; }
.dz-capa-miolo { gap: calc(var(--dz-escala,1) * 20px); padding: 12% 9%; }
.dz-capa-principal { font-size: calc(var(--dz-escala,1) * 94px); filter: none; margin-bottom: calc(var(--dz-escala,1) * 12px); }
.dz-capa-titulo { text-shadow: none; font-size: calc(var(--dz-escala,1) * 46px); }
.dz-seta { width: 36px; height: 36px; font-size: 23px; color: #7c6a86; box-shadow: 0 2px 9px rgba(50,38,60,.07); }
#dz-ant { left: 0; } #dz-seg { right: 0; }
#dz-fechar-livro { color: #766b7f; background: transparent; font-size: 13px; box-shadow: none; }
#dz-pin-trinco { border-radius: 8px; background: rgba(248,246,243,.94); }
@container (max-width: 540px) {
  #dz-livro { max-width: calc(var(--dz-altura-livro) * .775) !important; }
  .dz-volume { width: 100%; }
}
@media (max-width: 640px) {
  #dz-raiz #dz-palco { padding: 14px 18px 20px; }
  .dz-barra { gap: 8px; }
  .dz-barra button { padding: 10px 16px; font-size: 13px; }
}

#dz-raiz #dz-painel { box-sizing: border-box; width: 100%; overflow-y: auto; }

/* Título e ações à esquerda, livro ao centro, personalização à direita. */
.dz-navegacao { min-width: 0; }
#dz-raiz .dz-topo { display: block; margin: 0; padding: 0; }
#dz-raiz .dz-topo h3 { font-size: 18px; line-height: 1.4; }
#dz-raiz .dz-privacidade { display: block; margin-top: 14px; font-size: 12px; line-height: 1.65; }
#dz-raiz .dz-barra { margin: 24px 0 0; }
#dz-raiz #dz-painel { margin: 0; max-height: var(--dz-espaco, calc(100dvh - 160px)); }
#dz-painel .dz-capas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
#dz-painel .dz-capa-opcao { width: 100%; max-width: 64px; height: auto; aspect-ratio: 64 / 84; }
#dz-painel .dz-papeis { grid-template-columns: minmax(0, 1fr); }
#dz-painel .dz-papel-opcao { width: 100%; }
@container diario (min-width: 680px) {
  #dz-raiz { display: grid; grid-template-columns: clamp(172px, 17cqw, 216px) minmax(0, 1fr); gap: 20px; align-items: start; }
  #dz-raiz.dz-painel-aberto { grid-template-columns: clamp(172px, 17cqw, 216px) minmax(0, 1fr) clamp(216px, 22cqw, 264px); gap: 16px; }
  .dz-navegacao { grid-column: 1; grid-row: 1; padding-top: 20px; }
  #dz-raiz .dz-barra { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  #dz-raiz .dz-barra button { width: 100%; padding: 12px 10px; font-size: 13px; line-height: 1.35; text-align: left; }
  #dz-raiz #dz-fechar-livro { padding-left: 12px; }
  #dz-raiz #dz-palco { grid-column: 2; grid-row: 1; min-width: 0; padding: 14px 22px 28px; }
  #dz-raiz #dz-painel { grid-column: 3; grid-row: 1; }
  #dz-editor { grid-column: 2; grid-row: 1; box-sizing: border-box; width: 100%; padding-top: 14px; }
  #dz-sem-sessao { grid-column: 2 / -1; grid-row: 1; }
}
@container diario (max-width: 679px) {
  #dz-raiz { --dz-altura-livro: clamp(240px, calc(var(--dz-espaco, 100dvh - 160px) - 230px), 640px); display: flex; flex-direction: column; gap: 20px; }
  .dz-navegacao { width: 100%; }
  #dz-raiz .dz-privacidade { margin-top: 8px; }
  #dz-raiz .dz-barra { margin-top: 16px; display: flex; justify-content: flex-start; gap: 8px; }
  #dz-raiz .dz-barra button { font-size: 12px; padding: 10px 12px; }
  #dz-raiz #dz-palco { padding-top: 4px; }
  #dz-raiz #dz-painel { max-height: none; }
  #dz-painel .dz-capas { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); }
  #dz-painel .dz-papeis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Refinação: comandos tranquilos e navegação fora das folhas. */
#dz-raiz { --dz-ui-texto: var(--shell-ink, #292338); --dz-ui-mudo: var(--shell-muted, #716b80); --dz-ui-linha: var(--shell-line, #e7e3e8); --dz-ui-card: var(--shell-card, #fff); }
.dz-icon { display: inline-block; width: 19px; height: 19px; flex-shrink: 0; fill: none; vertical-align: middle; }
#dz-raiz .dz-topo h3 { display: flex; align-items: center; gap: 10px; color: var(--dz-ui-texto); font: 800 22px/1.3 'Nunito', sans-serif; text-transform: none; }
#dz-raiz .dz-topo h3 .dz-icon { width: 26px; height: 26px; }
#dz-raiz .dz-barra { margin-top: 24px; }
#dz-raiz .dz-barra button { display: flex; align-items: center; justify-content: flex-start; gap: 9px; min-height: 44px; border-radius: 15px; font-size: 12px; font-weight: 800; box-shadow: none; }
#dz-raiz .dz-barra #dz-nova { background: var(--dz-rosa); color: white; box-shadow: 0 4px 10px rgba(210, 37, 121, .1); }
.dz-mais { font-size: 22px; line-height: 1; font-weight: 500; }
#dz-raiz :is(#dz-editar, #dz-personalizar) { border: 1px solid var(--dz-ui-linha); background: var(--dz-ui-card); color: var(--dz-ui-texto); }
#dz-raiz :is(#dz-editar, #dz-personalizar):hover { border-color: #d2bdcd; background: color-mix(in srgb, var(--dz-rosa) 3%, var(--dz-ui-card)); }
#dz-raiz #dz-editar:disabled { opacity: .5; cursor: not-allowed; }
.dz-chevron { margin-left: auto; font-size: 21px; line-height: 1; font-weight: 500; }
#dz-raiz #dz-fechar-livro { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--dz-ui-linha); border-radius: 0; color: var(--dz-ui-mudo); font-size: 12px; }
#dz-raiz .dz-privacidade { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--dz-ui-linha); color: var(--dz-ui-mudo); font-size: 11px; line-height: 1.7; }
.dz-privacidade h4 { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font: 800 12px/1.4 'Nunito', sans-serif; }
.dz-privacidade h4 .dz-icon { color: var(--dz-ui-texto); }
#dz-raiz #dz-painel { background: var(--dz-ui-card); color: var(--dz-ui-texto); border-color: var(--dz-ui-linha); border-radius: 20px; box-shadow: 0 8px 24px rgba(48,34,59,.05); }
#dz-painel .dz-painel-topo strong { color: var(--dz-ui-texto); font-size: 16px; }
#dz-painel .dz-painel-seccao { color: var(--dz-ui-mudo); font-size: 10px; letter-spacing: .7px; }
#dz-painel .dz-letra-nome { border-width: 1px; background: var(--dz-ui-card); color: var(--dz-ui-texto); }
#dz-painel .dz-letra-nome.dz-escolhida { background: color-mix(in srgb, var(--dz-rosa) 7%, var(--dz-ui-card)); }
#dz-raiz .dz-paginacao { display: flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; gap: 10px; margin: 34px auto 0; padding: 4px 10px; border: 1px solid var(--dz-ui-linha); border-radius: 999px; background: var(--dz-ui-card); color: var(--dz-ui-mudo); box-shadow: 0 6px 18px rgba(48,34,59,.04); }
#dz-paginas { min-width: 90px; text-align: center; font: 800 11px/1.3 'Nunito', sans-serif; }
#dz-raiz .dz-paginacao .dz-seta { position: static; transform: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--dz-ui-texto); box-shadow: none; font-size: 25px; text-decoration: none; cursor: pointer; }
#dz-raiz .dz-paginacao .dz-seta:hover { background: color-mix(in srgb, var(--dz-rosa) 6%, var(--dz-ui-card)); }
#dz-raiz .dz-paginacao .dz-seta:disabled { opacity: .3; cursor: default; }
@container diario (min-width: 680px) {
  #dz-raiz { --dz-altura-livro: clamp(240px, calc(var(--dz-espaco, 100dvh - 160px) - 112px), 920px); grid-template-columns: clamp(178px, 18cqw, 212px) minmax(0, 1fr); gap: 24px; }
  #dz-raiz.dz-painel-aberto { grid-template-columns: clamp(178px, 18cqw, 212px) minmax(0, 1fr) clamp(212px, 22cqw, 252px); gap: 20px; }
  #dz-raiz #dz-painel { max-height: calc(var(--dz-espaco, 100dvh - 160px) - 16px); }
  #dz-raiz .dz-navegacao { padding-top: 14px; }
  #dz-raiz .dz-barra { gap: 10px; }
  #dz-raiz .dz-barra button { padding: 11px 12px; font-size: 12px; }
}
@container diario (max-width: 679px) {
  #dz-raiz .dz-navegacao { display: flex; flex-direction: column; }
  #dz-raiz .dz-topo h3 { font-size: 20px; }
  #dz-raiz .dz-barra { margin-top: 16px; }
  #dz-raiz .dz-barra button { padding: 10px 12px; font-size: 12px; }
  #dz-raiz .dz-privacidade { margin-top: 14px; padding-top: 12px; font-size: 11px; }
  #dz-raiz .dz-privacidade h4 { margin-bottom: 5px; }
  #dz-raiz #dz-fechar-livro { margin: 0; border: 0; padding: 10px; }
  #dz-raiz .dz-paginacao { margin-top: 30px; }
/* ═══ MAQUETE 2026-09 — rail de ações à esquerda + livro à direita +
   pílula de páginas por baixo (sobrepõe os layouts anteriores) ═══ */
#dz-raiz .dz-topo { max-width: none; margin: 0 0 16px; padding: 0; }
#dz-raiz .dz-topo h3 { font-size: 21px; color: #352d42; }

.dz-zona { display: flex; gap: 26px; align-items: flex-start; max-width: 1240px; margin: 0 auto; }
.dz-lateral { width: 250px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.dz-lateral button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; border: 1px solid #eadfe7; border-radius: 12px;
  background: #fff; color: #352d42; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  padding: 12px 16px; text-align: left;
  box-shadow: 0 2px 8px rgba(80, 60, 90, 0.07);
  transition: border-color .15s, box-shadow .15s;
}
.dz-lateral button:hover { border-color: var(--dz-rosa-claro); box-shadow: 0 4px 12px rgba(80, 60, 90, 0.12); }
.dz-lateral button:active { transform: scale(0.985); }
#dz-nova {
  background: linear-gradient(135deg, #f472b6, #ec4899); color: #fff; border: none;
  justify-content: center; box-shadow: 0 6px 16px rgba(236, 72, 153, 0.35);
}
#dz-personalizar { justify-content: space-between; }
#dz-personalizar .dz-seta-mini { color: #b8a8c4; font-weight: 800; margin-left: auto; }
#dz-personalizar span:first-of-type { margin-left: 0; }
.dz-fechar-diario {
  background: none !important; border: none !important; box-shadow: none !important;
  color: #7c6a86; font-weight: 700; padding: 8px 4px;
}
.dz-fechar-diario:hover { box-shadow: none !important; color: #4a3b56; }
.dz-lateral-divisoria { height: 1px; background: #eee2ea; margin: 6px 0; }
.dz-quem-titulo { font-weight: 800; font-size: 13.5px; color: #352d42; margin-bottom: 6px; }
.dz-quem p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #8a7d94; }

#dz-palco { flex: 1; min-width: 0; max-width: none; }

.dz-paginacao {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; margin: 18px 4px 0 auto;
  background: #fff; border-radius: 999px; padding: 6px 10px;
  box-shadow: 0 4px 14px rgba(80, 60, 90, 0.12);
}
.dz-pag-seta {
  border: none; background: none; color: #6b5a78; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%; font-size: 17px; line-height: 1;
  font-family: inherit;
}
.dz-pag-seta:hover { background: #f6eef4; }
#dz-pag-rotulo { font-size: 13px; font-weight: 700; color: #4a3b56; min-width: 96px; text-align: center; }

/* capas ilustradas: amostras um pouco maiores no rail estreito da grelha */
@media (min-width: 1024px) {
  #dz-raiz.dz-painel-aberto { grid-template-columns: minmax(0, 1fr) 320px; }
  #dz-raiz.dz-painel-aberto .dz-topo { grid-column: 1 / -1; grid-row: 1; }
  #dz-raiz.dz-painel-aberto .dz-zona { grid-column: 1; grid-row: 2; }
  #dz-raiz.dz-painel-aberto .dz-paginacao { grid-column: 1; grid-row: 3; margin-right: 40px; }
  #dz-raiz.dz-painel-aberto #dz-editor,
  #dz-raiz.dz-painel-aberto #dz-sem-sessao { grid-column: 1 / -1; }
  #dz-raiz.dz-painel-aberto #dz-painel {
    grid-column: 2; grid-row: 2 / 4;
    position: sticky; top: 10px;
    max-width: none; margin: 0;
    max-height: calc(100vh - 30px); overflow-y: auto;
  }
}

/* ecrãs estreitos: rail por cima do livro, botões em linha */
@media (max-width: 1023px) {
  .dz-zona { flex-direction: column; gap: 16px; }
  .dz-lateral { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .dz-lateral button { width: auto; }
  #dz-nova { flex: 1; }
  .dz-lateral-divisoria, .dz-quem { display: none; }
  .dz-paginacao { margin: 14px auto 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT AUTORITATIVO DO DIÁRIO (2026-09 — sobrepõe TODAS as eras)
   Três gerações de layout vivem neste ficheiro e disputam os mesmos
   elementos. Esta secção, no fim do ficheiro, assume o controlo total:
   display:block !important mata as grelhas antigas em qualquer media
   query, e o layout do mockup é definido aqui de forma completa.
   ═══════════════════════════════════════════════════════════════════ */
#dz-raiz { display: block !important; max-width: 1240px; margin: 0 auto; }
#dz-raiz .dz-navegacao, #dz-raiz .dz-barra { display: none !important; }
#dz-raiz .dz-topo { display: block; margin: 0 0 16px; padding: 0; }
#dz-raiz .dz-topo h3 { font-size: 21px; color: #352d42; }
#dz-raiz .dz-privacidade { display: none !important; }
#dz-raiz .dz-seta { display: none !important; }

#dz-raiz .dz-zona {
  display: flex; gap: 26px; align-items: flex-start;
  max-width: none; margin: 0;
}
#dz-raiz .dz-lateral {
  width: 250px; flex: none; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  position: static; inset: auto;
}
#dz-raiz .dz-lateral button {
  position: static; inset: auto; width: 100%;
  display: flex; align-items: center; gap: 8px;
  border-radius: 12px; padding: 12px 16px;
}
#dz-raiz #dz-nova { justify-content: center; }
#dz-raiz #dz-personalizar { justify-content: space-between; }
#dz-raiz #dz-fechar { justify-content: flex-start; }
#dz-raiz #dz-palco {
  flex: 1; min-width: 0; max-width: none;
  position: relative; padding: 0 6px;
}
#dz-raiz .dz-paginacao {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; margin: 18px 4px 0 auto;
}
#dz-raiz #dz-pag-rotulo { min-width: 96px; text-align: center; }

/* sidebar de personalização: coluna à direita, sticky */
#dz-raiz #dz-painel {
  position: sticky; top: 10px;
  max-width: none; margin: 0;
  max-height: calc(100dvh - 30px); overflow-y: auto;
}
#dz-raiz.dz-painel-aberto {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px;
  column-gap: 24px; align-items: start;
}
#dz-raiz.dz-painel-aberto .dz-topo { grid-column: 1 / -1; grid-row: 1; }
#dz-raiz.dz-painel-aberto .dz-zona { grid-column: 1; grid-row: 2; }
#dz-raiz.dz-painel-aberto .dz-paginacao { grid-column: 1; grid-row: 3; }
#dz-raiz.dz-painel-aberto #dz-editor,
#dz-raiz.dz-painel-aberto #dz-sem-sessao { grid-column: 1 / -1; }
#dz-raiz.dz-painel-aberto #dz-painel { grid-column: 2; grid-row: 2 / 4; }

/* ecrãs estreitos: rail em linha por cima do livro, pílula centrada */
@media (max-width: 1023px) {
  #dz-raiz.dz-painel-aberto { display: block !important; }
  #dz-raiz .dz-zona { flex-direction: column; gap: 16px; }
  #dz-raiz .dz-lateral { width: 100%; flex-direction: row; flex-wrap: wrap; }
  #dz-raiz .dz-lateral button { width: auto; }
  #dz-raiz #dz-nova { flex: 1; }
  #dz-raiz .dz-lateral-divisoria, #dz-raiz .dz-quem { display: none; }
  #dz-raiz .dz-paginacao { margin: 14px auto 0; }
}