/* JC-PoetAPP — folha de escrita com margem rubricada (anotações a vermelho, como nos manuscritos) */

@font-face { font-family: "EB Garamond"; src: url(../fonts/eb-garamond-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(../fonts/eb-garamond-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(../fonts/eb-garamond-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(../fonts/eb-garamond-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --papel: #fdfcfa;
  --tinta: #1b1918;
  --grafite: #6e6964;
  --regra: #e6e2dc;
  --lacre: #8a0e14;
  --lacre-veu: #f5e4e4;
  --sombra: rgba(27, 25, 24, .14);
  --letra: 19px;
  --entrelinha: 1.7;
  --margem: 4.6rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #201d1c; --tinta: #ece7e0; --grafite: #a39c94; --regra: #3a3634;
    --lacre: #e2797c; --lacre-veu: #3a2627; --sombra: rgba(0, 0, 0, .45); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #201d1c; --tinta: #ece7e0; --grafite: #a39c94; --regra: #3a3634;
  --lacre: #e2797c; --lacre-veu: #3a2627; --sombra: rgba(0, 0, 0, .45); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.45;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--lacre); outline-offset: 2px; }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 6px) 12px 6px 14px;
  background: var(--papel);
  border-bottom: 1px solid var(--regra);
}
.marca { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; letter-spacing: .01em; white-space: nowrap; min-width: 0; }
.marca img { width: 40px; height: 40px; object-fit: contain; }
:root[data-theme="dark"] .marca img { background: #fdfcfa; border-radius: 50%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marca img { background: #fdfcfa; border-radius: 50%; } }
.acoes { display: flex; gap: 2px; }
.icone {
  width: 44px; height: 44px; border: 0; background: none; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--tinta);
}
.icone:hover { background: var(--lacre-veu); }
.icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Folha ---------- */
.folha {
  flex: 1;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 18px 16px 120px;
}
.titulo {
  display: block; width: 100%; resize: none; overflow: hidden;
  border: 0; background: none; outline: none;
  font-style: italic; font-size: 1.85rem; line-height: 1.2;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--regra);
  margin-bottom: 18px;
}
.titulo:focus-visible { outline: none; border-bottom-color: var(--lacre); }
.titulo::placeholder { color: var(--grafite); opacity: .7; }

.pagina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--margem);
}
.escrita { position: relative; }
#texto, .espelho {
  font-family: inherit;
  font-size: var(--letra);
  line-height: var(--entrelinha);
  padding: 0 12px 0 0;
  margin: 0;
  border: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  letter-spacing: normal;
  tab-size: 4;
}
#texto {
  display: block; width: 100%;
  min-height: calc(var(--letra) * var(--entrelinha) * 8);
  background: none; resize: none; outline: none; overflow: hidden;
  caret-color: var(--lacre);
}
#texto::placeholder { color: var(--grafite); opacity: .75; font-style: italic; }
.espelho { position: absolute; top: 0; left: 0; right: 0; z-index: 0; color: transparent; pointer-events: none; user-select: none; }
.espelho div { min-height: calc(var(--letra) * var(--entrelinha)); }

/* Margem rubricada: o elemento que dá carácter à app */
.margem {
  position: relative;
  border-left: 1px solid var(--lacre);
  font-variant-numeric: oldstyle-nums tabular-nums;
}
.nota-verso {
  position: absolute; left: 0; right: 0;
  height: calc(var(--letra) * var(--entrelinha));
  display: flex; align-items: center; gap: 8px;
  padding: 0 0 0 10px;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--lacre);
  font-size: calc(var(--letra) * .95);
  white-space: nowrap;
}
.nota-verso .n { min-width: 1.4em; font-weight: 500; }
.nota-verso .r { font-style: italic; }
.nota-verso .r.sozinha { color: var(--grafite); }
.nota-verso .rot { font-size: .72em; color: var(--grafite); overflow: hidden; text-overflow: ellipsis; display: none; }
@media (min-width: 640px) { .com-rotulos .nota-verso .rot { display: inline; } }
.nota-verso.ajustado .n { text-decoration: underline dotted; text-underline-offset: 4px; }
.nota-verso.irregular .n { color: var(--tinta); text-decoration: underline wavy var(--lacre); text-underline-offset: 4px; }
.nota-verso.livre .n { color: var(--grafite); }
.nota-verso:hover { background: var(--lacre-veu); }

.com-rotulos { --margem: 4.6rem; }
@media (min-width: 640px) {
  .com-rotulos { --margem: 13rem; }
}

/* ---------- Rodapé ---------- */
.rodape {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px;
  padding: 8px 16px calc(env(safe-area-inset-bottom) + 8px);
  background: var(--papel);
  border-top: 1px solid var(--regra);
  font-size: .95rem;
  color: var(--grafite);
}
.rodape b { color: var(--tinta); font-weight: 500; font-variant-numeric: oldstyle-nums; }
.rodape .metro b { color: var(--lacre); }
.rodape .esquema { font-style: italic; color: var(--lacre); letter-spacing: .04em; word-spacing: .3em; }
.rodape .guardado { margin-left: auto; font-size: .85rem; }

/* ---------- Folhetos (diálogos) ---------- */
dialog.folheto {
  width: min(34rem, 100vw);
  max-height: 86vh;
  max-height: 86dvh;
  margin: auto auto 0;
  padding: 0 18px calc(env(safe-area-inset-bottom) + 18px);
  border: 0; border-radius: 14px 14px 0 0;
  background: var(--papel); color: var(--tinta);
  box-shadow: 0 -8px 40px var(--sombra);
  overflow: auto;
}
@media (min-width: 640px) { dialog.folheto { margin: auto; border-radius: 10px; } }
dialog::backdrop { background: rgba(20, 18, 17, .38); }
dialog[open] { animation: subir .22s ease-out; }
@keyframes subir { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog[open] { animation: none; } }
.cab {
  position: sticky; top: 0; background: var(--papel);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 10px; margin: 0; border-bottom: 1px solid var(--regra);
}
.cab h2 { margin: 0; font-weight: 500; font-size: 1.3rem; }
.fechar { width: 40px; height: 40px; border: 0; background: none; font-size: 1.7rem; cursor: pointer; color: var(--grafite); line-height: 1; }

.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 8px 16px;
  border: 1px solid var(--lacre); border-radius: 8px;
  background: var(--lacre); color: var(--papel);
  cursor: pointer; font-size: 1rem;
}
.botao.secundario { background: none; color: var(--lacre); }
.botao.perigo { background: none; color: var(--grafite); border-color: var(--regra); }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.grelha-botoes { display: grid; gap: 10px; margin-top: 16px; }
.nota { color: var(--grafite); font-size: .92rem; }

.campo { display: grid; gap: 6px; margin: 16px 0; }
.campo.linha { grid-template-columns: 1fr auto; align-items: center; }
.campo label { font-weight: 500; }
.campo select, .campo input[type="range"] { width: 100%; min-height: 44px; }
.campo select { padding: 6px 10px; border: 1px solid var(--regra); border-radius: 8px; background: var(--papel); }
.campo input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--lacre); }
input[type="range"] { accent-color: var(--lacre); }
.ajuda { margin-top: 18px; border-top: 1px solid var(--regra); padding-top: 12px; }
.ajuda summary { cursor: pointer; font-weight: 500; }
.amostra { display: inline-block; min-width: 2.2em; color: var(--lacre); font-weight: 500; }
.amostra.ajustado { text-decoration: underline dotted; text-underline-offset: 4px; }
.amostra.irregular { color: var(--tinta); text-decoration: underline wavy var(--lacre); text-underline-offset: 4px; }
.amostra.livre { color: var(--grafite); }

/* Lista de poemas */
.lista { list-style: none; margin: 8px 0 0; padding: 0; }
.lista li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--regra); }
.lista .abrir { flex: 1; text-align: left; background: none; border: 0; padding: 12px 0; cursor: pointer; min-width: 0; }
.lista .abrir strong { display: block; font-weight: 500; font-size: 1.1rem; }
.lista .abrir span { display: block; color: var(--grafite); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista li.atual .abrir strong { color: var(--lacre); }
.lista .apagar { border: 0; background: none; color: var(--grafite); cursor: pointer; padding: 10px; font-size: .9rem; }
.lista .vazio { padding: 16px 0; color: var(--grafite); border: 0; }

/* Detalhe do verso */
.esc { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 6px; }
.esc span {
  padding: 2px 7px; border: 1px solid var(--regra); border-radius: 5px; font-size: 1.05rem;
}
.esc span.ton { border-color: var(--lacre); color: var(--lacre); font-weight: 600; }
.esc span.cauda { border-style: dashed; color: var(--grafite); }
.esc span sup { font-size: .62em; color: var(--grafite); margin-left: 2px; font-weight: 400; }
.resumo { font-size: 1.15rem; margin: 8px 0; }
.resumo b { color: var(--lacre); font-weight: 600; }
.dv-sec { margin-top: 16px; }
.dv-sec h3 { font-size: 1rem; font-weight: 500; margin: 0 0 6px; color: var(--grafite); }
.dv-sec ul { margin: 0; padding-left: 1.1em; }
.alt { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--regra); }
.alt .n { color: var(--lacre); min-width: 1.6em; font-weight: 500; }
.alt.escolhida .n::after { content: " •"; }
.alt small { color: var(--grafite); display: block; }

/* Aviso flutuante */
.aviso[hidden] { display: none; }
.aviso {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 70px); transform: translateX(-50%);
  z-index: 10; max-width: calc(100vw - 32px);
  background: var(--tinta); color: var(--papel);
  padding: 10px 16px; border-radius: 8px; display: flex; gap: 12px; align-items: center;
  box-shadow: 0 6px 24px var(--sombra);
}
.aviso button { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; font-weight: 600; }

/* ---------- Impressão / PDF ---------- */
.impressao { display: none; }
@media print {
  @page { margin: 22mm 20mm; }
  body > *:not(.impressao) { display: none !important; }
  .impressao { display: block; color: #000; font-size: 13pt; line-height: 1.6; }
  .impressao h1 { font-style: italic; font-weight: 400; font-size: 22pt; margin: 0 0 18pt; }
  .impressao .estrofe { margin: 0 0 14pt; white-space: pre-wrap; break-inside: avoid; }
  .impressao .assinatura { margin-top: 24pt; display: flex; align-items: center; gap: 8pt; font-size: 10pt; color: #555; }
  .impressao .assinatura img { width: 28pt; }
}

/* ---------- Compatibilidade com telemóveis ---------- */
/* Sem <dialog> nativo (iOS < 15.4 e alguns Android antigos) */
.sem-dialog dialog { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; }
.sem-dialog dialog[open] { display: block; }
@media (min-width: 640px) { .sem-dialog dialog[open] { top: 50%; bottom: auto; left: 50%; right: auto; transform: translate(-50%, -50%); } }
.dialog-fundo { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 19; background: rgba(20, 18, 17, .38); }
.dialog-fundo[hidden] { display: none; }

/* Teclado aberto: esconde o rodapé para não tapar o verso que está a escrever */
.teclado .rodape { display: none; }
.teclado .folha { padding-bottom: 40vh; }

/* Botões e campos com área de toque confortável */
button, select, input, textarea { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Diagnóstico */
.diag { margin: 8px 0 0; padding: 0; list-style: none; font-size: .95rem; }
.diag li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--regra); }
.diag .ok { color: var(--grafite); }
.diag .falta { color: var(--lacre); font-weight: 600; }

/* Telemóveis estreitos (360–399 px, ex.: Samsung Galaxy A/S) */
@media (max-width: 399px) {
  :root { --margem: 3.9rem; }
  .topo { padding-left: 10px; padding-right: 6px; }
  .marca { font-size: .98rem; gap: 6px; }
  .marca img { width: 34px; height: 34px; }
  .icone { width: 40px; height: 40px; }
  .folha { padding: 14px 12px 120px; }
  .titulo { font-size: 1.6rem; }
  #texto, .espelho { padding-right: 8px; }
  .nota-verso { padding-left: 8px; gap: 6px; }
  .rodape { gap: 2px 12px; padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 340px) {
  .marca span { display: none; }
}

/* ---------- Ortografia: sublinhado ondulado sob a palavra (camada por baixo do texto) ---------- */
#texto { position: relative; z-index: 1; background: transparent; }
.erro-ort {
  text-decoration: underline wavy var(--lacre);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
  -webkit-text-decoration: underline wavy var(--lacre);
}
.espelho .erro-ort { color: transparent; }

/* Botão Rever com contador */
.icone { position: relative; }
.contador {
  position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--lacre); color: var(--papel);
  font-size: 11px; line-height: 18px; font-weight: 600; text-align: center; font-variant-numeric: lining-nums;
}
.contador[hidden] { display: none; }

/* Painel de revisão */
.rv-sec { padding: 6px 0 4px; border-bottom: 1px solid var(--regra); }
.rv-sec h3 { font-size: 1.1rem; font-weight: 600; margin: 12px 0 6px; }
.rv-item { padding: 10px 0; border-top: 1px dashed var(--regra); }
.rv-item:first-of-type { border-top: 0; }
.rv-tit { margin: 0 0 4px; font-weight: 500; }
.rv-tit .erro-ort { color: var(--tinta); font-weight: 600; }
.rv-item.acento .rv-tit .erro-ort { color: var(--lacre); }
.verso-cit { margin: 0 0 4px; font-style: italic; }
.rv-item .nota { margin: 2px 0 6px; }
.sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.sugestao { min-height: 38px; padding: 4px 12px; border: 1px solid var(--lacre); border-radius: 20px; background: var(--lacre-veu); color: var(--tinta); cursor: pointer; font-size: 1rem; }
.acoes-item { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ligacao { background: none; border: 0; padding: 6px 0; color: var(--lacre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: .98rem; min-height: 36px; }
.tudo-bem { color: var(--grafite); font-style: italic; margin: 4px 0 8px; }
.rv-info { margin: 8px 0; }
.rv-info summary { cursor: pointer; color: var(--grafite); }
.rodape-rever { margin-top: 14px; }
@media (max-width: 399px) { .icone { width: 38px; } .acoes { gap: 0; } }

/* Botão flutuante de rimas */
.botao-rimas {
  position: fixed; right: 14px; z-index: 6;
  min-height: 44px; padding: 8px 16px; border-radius: 22px;
  border: 1px solid var(--lacre); background: var(--lacre); color: var(--papel);
  font-size: 1rem; box-shadow: 0 4px 16px var(--sombra); cursor: pointer;
  max-width: calc(100vw - 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.botao-rimas[hidden] { display: none; }
.grupo-rimas h3 { font-size: 1rem; font-weight: 600; margin: 14px 0 4px; color: var(--grafite); }

/* ---------- Vistas: página inicial e editor ---------- */
.vista-inicio .so-editor, .vista-inicio #folha, .vista-inicio #rodape { display: none !important; }
.vista-editor .so-inicio, .vista-editor #inicio { display: none !important; }
body:not(.vista-inicio):not(.vista-editor) #inicio,
body:not(.vista-inicio):not(.vista-editor) #folha { visibility: hidden; }

.inicio { width: 100%; max-width: 46rem; margin: 0 auto; padding: 18px 16px 48px; }
.inicio-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--lacre); }
.inicio-cab h1 { margin: 0; font-size: 1.7rem; font-weight: 400; font-style: italic; line-height: 1.2; }
.cartoes { list-style: none; margin: 0; padding: 0; }
.cartoes li { display: flex; align-items: flex-start; gap: 4px; border-bottom: 1px solid var(--regra); }
.cartao { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 14px 0; cursor: pointer; display: grid; gap: 3px; color: var(--tinta); }
.cartao:hover .c-titulo { color: var(--lacre); }
.c-titulo { font-size: 1.25rem; font-style: italic; line-height: 1.25; }
.c-meta { font-size: .9rem; color: var(--grafite); }
.c-versos { white-space: pre-line; color: var(--grafite); font-size: 1rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; border-left: 1px solid var(--lacre); padding-left: 10px; margin-top: 4px; }
.cartoes .apagar { border: 0; background: none; color: var(--grafite); cursor: pointer; padding: 16px 4px 10px 10px; font-size: .9rem; }
.cartoes .vazio { display: block; padding: 22px 0; border: 0; }
.cartoes .vazio p { margin: 0 0 4px; }
.concluidos { margin-top: 22px; }
.concluidos summary { cursor: pointer; font-size: 1.1rem; padding: 8px 0; color: var(--grafite); }
.concluidos .c-titulo { color: var(--grafite); }
.copias { margin-top: 34px; padding-top: 12px; border-top: 1px solid var(--regra); }
.copias h2 { font-size: 1.1rem; font-weight: 500; margin: 0 0 4px; }

/* Etiqueta de estado do poema */
.estado-poema { margin: -10px 0 16px; }
.etiqueta { border: 1px solid var(--regra); background: none; border-radius: 16px; padding: 4px 12px; min-height: 32px;
  font-size: .92rem; color: var(--grafite); cursor: pointer; }
.etiqueta::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--grafite); margin-right: 7px; vertical-align: 1px; }
.etiqueta.feito { border-color: var(--lacre); color: var(--lacre); }
.etiqueta.feito::before { background: var(--lacre); border-color: var(--lacre); }

/* Botão Guardar: ponto quando há alterações por guardar */
#btnGuardar.pendente::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--lacre); }