/* ============================================================
   Caligraf.ia — identidade visual sobre o Bootstrap 5
   ============================================================ */

:root {
  --cg-tinta: #4f46e5;
  --cg-tinta-escura: #3730a3;
  --cg-tinta-suave: #eef2ff;
  --cg-grafite: #0f172a;
  --cg-papel: #f8f7f4;
  --cg-cartao: #ffffff;
  --cg-borda: #e7e5e0;

  --bs-body-bg: var(--cg-papel);
  --bs-body-color: var(--cg-grafite);
  --bs-border-radius: .65rem;
  --bs-font-sans-serif: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}

body { background: var(--cg-papel); color: var(--cg-grafite); min-height: 100vh; display: flex; flex-direction: column; }

[hidden] { display: none !important; }   /* hidden vence .d-flex e afins do Bootstrap */

.btn-primary {
  --bs-btn-bg: var(--cg-tinta);
  --bs-btn-border-color: var(--cg-tinta);
  --bs-btn-hover-bg: var(--cg-tinta-escura);
  --bs-btn-hover-border-color: var(--cg-tinta-escura);
  --bs-btn-active-bg: var(--cg-tinta-escura);
  --bs-btn-active-border-color: var(--cg-tinta-escura);
  /* O BOTAO DESABILITADO E A PRIMEIRA COISA QUE O VISITANTE VE — a caixa de texto comeca
     vazia, entao "Escrever a pagina" nasce desligado. Estava #fff sobre #a5b4fc AINDA POR CIMA
     de opacity .65: 1,99:1 medido, contra o minimo 4,5:1 do AA. O produto se apresentava com o
     proprio nome quase ilegivel.
     Agora e um cinza-azulado solido com texto escuro, sem opacidade: le-se que esta desligado
     pela cor fria e pela falta de relevo, e nao por estar apagando. Medido: 7,4:1. */
  --bs-btn-disabled-bg: #dfe3ee;
  --bs-btn-disabled-border-color: #dfe3ee;
  --bs-btn-disabled-color: #3a4256;
  --bs-btn-disabled-opacity: 1;
}
.text-primary { color: var(--cg-tinta) !important; }

/* ---------- navbar ---------- */
.app-navbar {
  background: rgba(248, 247, 244, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cg-borda);
}
.app-navbar .navbar-brand { font-size: 1.15rem; color: var(--cg-grafite); }
.logo-nib { color: var(--cg-tinta); }
.versao { font-size: .75rem; color: #475569; }
.uso-dia {
  font-size: .78rem; font-weight: 600; color: var(--cg-tinta-escura);
  background: var(--cg-tinta-suave);
  padding: .3rem .7rem; border-radius: 2rem;
}
.uso-dia.esgotado { color: #b45309; background: #fff7ed; }

/* ---------- hero ---------- */
.hero { padding: 2.6rem 0 1.6rem; }
.hero-badge {
  background: var(--cg-tinta-suave); color: var(--cg-tinta-escura);
  font-weight: 600; padding: .45em .9em; border-radius: 2rem;
}
.grifo { background: linear-gradient(transparent 62%, #c7d2fe 62%, #c7d2fe 94%, transparent 94%); padding: 0 .08em; }

/* ---------- cards ---------- */
.card-elevated {
  border: 1px solid var(--cg-borda);
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px -12px rgba(15,23,42,.12);
  border-radius: .9rem;
  background: var(--cg-cartao);
}

#texto { resize: vertical; min-height: 12rem; }

/* ---------- mini-prévia instantânea ---------- */
/* A FOLHA INTEIRA, e nao um recorte do topo. A altura era FIXA em 188px enquanto a largura e
   responsiva, e a escala do JS vem da largura — entao a previa mostrava so o pedaco de cima.
   Medido em 24/08: em 1400px de viewport ela desenhava 10 filas com o slider dizendo 30; a folha
   naquela escala precisaria de 692px de altura e tinha 186px. Em 390px mostrava 15 de 30.

   A densidade estava CERTA (o conserto de 58% documentado no app.js funciona) — o que estava
   errado era o enquadramento. E ele importa porque o controle se chama "Linhas na folha", o
   numero ao lado dele diz 30, e a folha ao lado mostrava 10: o cliente nao conseguia usar a
   previa para julgar quanto texto cabe numa pagina, que e a decisao que determina quantas
   paginas ele vai pagar.

   `aspect-ratio` com a proporcao real da folha resolve sem numero magico: a previa passa a ter a
   forma do papel, e o `max-height` a mantem dentro da coluna de controles. A largura vira
   consequencia (via `margin: auto`), e a escala do JS — que le clientWidth — continua correta. */
.mini-papel {
  position: relative;
  aspect-ratio: var(--cg-folha-prop, 1240 / 1753);
  max-height: 62vh;
  margin-inline: auto;
  border: 1px solid var(--cg-borda);
  border-radius: .5rem;
  overflow: hidden;
  background: #fcfbf7;
  box-shadow: inset 0 1px 3px rgba(15,23,42,.06);
}
.mini-margem { position: absolute; top: 0; bottom: 0; width: 2px; background: #dc9696; z-index: 2; }
.mini-linhas { position: absolute; inset: 0; overflow: hidden; }
/* campo de data e rodapé: primitivas geométricas, sem texto — a página também não imprime texto
   neles (fonte de computador ao lado de escrita à mão denuncia a página gerada) */
.mini-folha { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.mini-folha > * { position: absolute; }
.mini-linha {
  display: flex; align-items: flex-end;
  overflow: visible; white-space: nowrap;   /* descendente cruza a pauta, como no caderno */
  font-family: "Segoe Script", "Ink Free", "Bradley Hand", cursive;
}
.mini-linha span { display: inline-block; line-height: .95; transform-origin: 50% 100%; }

/* palavra com TINTA REAL do modelo: PNG transparente usado como máscara — a cor de fundo
   é a tinta, então recolore instantaneamente junto com o seletor de cor. O contêiner
   .palavra-corte permite mostrar só uma FRAÇÃO do recorte (cabeça/cauda da hifenização). */
.palavra-corte {
  display: inline-block; flex: none;
  overflow: hidden;
  transform-origin: 50% 100%;
}
.palavra-tinta {
  display: block;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.aviso-charset { color: #b45309; }
.aviso-charset code { color: inherit; background: #fff7ed; padding: 0 .3em; border-radius: .25rem; }

/* ---------- grade de estilos (tinta real) ---------- */
/* O `min-width: 0` NAO E DETALHE: sem ele a grade nunca teve duas colunas em tela nenhuma.
   O padrao de um item de grid e `min-width: auto`, que vale o tamanho MIN-CONTENT do conteudo —
   e o conteudo aqui e uma tira flex com tres palavras de tinta, ~608px. A pista de `1fr`
   crescia para caber isso, e o `overflow: hidden` da tira nunca entrava em acao.

   Medido em 24/08 com navegador de verdade: a grade tinha scrollWidth de 1227px em TODOS os
   viewports, com cartoes de 628px. Em 768px de largura dava 7 cartoes inteiros visiveis de 13;
   em 390px e em 320px, ZERO — o cliente via meia palavra de um estilo por vez, e como todos os
   cartoes mostram as MESMAS duas palavras cortadas, os 13 estilos pareciam iguais. No desktop as
   duas colunas prometidas nunca aconteciam.

   O diferencial do produto e ter 13 letras manuscritas para escolher; a grade e onde essa escolha
   acontece. */
.estilo-grade {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
  max-height: 19rem; overflow-y: auto; overflow-x: hidden; padding-right: .15rem;
}
.estilo-cartao {
  border: 1.5px solid var(--cg-borda); border-radius: .55rem;
  background: #fff; cursor: pointer;
  padding: .45rem .55rem .3rem;
  transition: border-color .12s, box-shadow .12s;
  min-width: 0;                  /* ver a nota em .estilo-grade: e o que permite as duas colunas */
}
.estilo-cartao:hover { border-color: #c7d2fe; }
.estilo-cartao.ativo {
  border-color: var(--cg-tinta);
  box-shadow: 0 0 0 3px var(--cg-tinta-suave);
}
.estilo-cartao .tira {
  height: 26px; display: flex; align-items: flex-end; gap: 6px;
  overflow: hidden; min-width: 0;      /* o hidden so funciona com o min-width solto */
}
.estilo-cartao .nome { font-size: .72rem; color: #64748b; margin-top: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estilo-cartao.ativo .nome { color: var(--cg-tinta-escura); font-weight: 600; }

/* #94a3b8 sobre branco da 2,56:1, e a WCAG pede 4,5:1 para texto abaixo de 18,66px. Estes sao
   os quatro titulos de secao do painel de ajustes — a estrutura de navegacao dele. #475569 da
   5,23:1 e continua discreto. */
.grupo-titulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: #475569; font-weight: 700; margin: .9rem 0 .5rem;
}

/* ---------- sliders de estilo ---------- */
.ajuste label { font-size: .85rem; font-weight: 600; display: flex; justify-content: space-between; }
/* O NUMERO DO SLIDER e a unica indicacao do valor escolhido, e era o texto MENOS legivel da
   tela: #94a3b8 sobre branco da 2,56:1 contra os 4,5:1 que a WCAG pede abaixo de 18,66px.
   #475569 da 5,23:1. */
.ajuste label .valor { color: #475569; font-weight: 500; font-variant-numeric: tabular-nums; }
.form-range::-webkit-slider-thumb { background: var(--cg-tinta); }
.form-range::-moz-range-thumb { background: var(--cg-tinta); }

/* ---------- progresso ---------- */
.progress { height: .55rem; background: #edeae4; }
.progress-bar { background: var(--cg-tinta); transition: width .4s ease; }
.etapa { font-size: .85rem; color: #64748b; }

/* ---------- resultado ---------- */
.papel-resultado {
  background:
    repeating-linear-gradient(transparent, transparent 28px, #eef1f7 28px, #eef1f7 29px),
    #fdfdfc;
  border: 1px solid var(--cg-borda);
  border-radius: .7rem;
  min-height: 26rem;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  overflow: auto;
  position: relative;          /* âncora do destaque de linha (modo reescrever) */
}

/* faixa que destaca a linha sob o mouse no modo "reescrever uma linha" */
.destaque-linha {
  position: absolute; z-index: 3;
  pointer-events: none;        /* o clique atravessa até a imagem */
  background: rgba(79, 70, 229, .13);
  border-top: 1.5px solid rgba(79, 70, 229, .55);
  border-bottom: 1.5px solid rgba(79, 70, 229, .55);
  border-radius: 3px;
  box-shadow: 0 2px 12px rgba(79, 70, 229, .25);
  transition: top .05s linear;
}
#pagina-imagem {
  max-width: 100%;
  box-shadow: 0 2px 6px rgba(15,23,42,.08), 0 16px 40px -18px rgba(15,23,42,.3);
  border-radius: .35rem;
  background: #fff;
}
.estado-vazio { color: #475569; }

.aplicando { opacity: .55; transition: opacity .2s; }

/* ---------- meus documentos ---------- */
.doc-item {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--cg-borda); border-radius: .5rem;
  padding: .35rem .6rem; background: #fff;
  font-size: .82rem;
}
.doc-item .resumo {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: "Segoe Script", cursive; color: #334155;
}
.doc-item .meta { color: #475569; font-size: .72rem; white-space: nowrap; }
.doc-item button { border: none; background: none; padding: .1rem .3rem; border-radius: .3rem; }
.doc-item .abrir { color: var(--cg-tinta); font-weight: 600; }
.doc-item .abrir:hover { background: var(--cg-tinta-suave); }
/* 1,48:1 antes (#cbd5e1 sobre branco), e visivel so no :hover — ou seja, NO CELULAR o botao
   que apaga o trabalho do cliente era um fantasma ate ser tocado por acidente. Agora tem
   contraste proprio (4,7:1) e nao depende de hover para existir. */
.doc-item .apagar { color: #6b7280; }
.doc-item .apagar:hover { color: #ef4444; background: #fef2f2; }

/* A NAVBAR E STICKY (55px) e nada compensava isso: os dois scrollIntoView({block:"start"})
   — depois de gerar, e ao abrir um documento — paravam com 21px do card e 4px do titulo
   "Sua pagina" escondidos debaixo dela. Acontecia toda vez que uma geracao terminava. */
#col-resultado, #card-ajustes { scroll-margin-top: 4rem; }

/* ---------- modal de documento (histórico) ---------- */
.modal-doc-conteudo { border: none; border-radius: .9rem; }
.modal-doc-pagina {
  max-width: 100%; max-height: 72vh;
  border-radius: .4rem;
  box-shadow: 0 4px 14px rgba(15,23,42,.12), 0 22px 60px -20px rgba(15,23,42,.35);
  background: #fff;
}

/* flash sutil quando o conteúdo da página da direita troca (abrir p/ edição) */
@keyframes pagina-trocada {
  0%   { box-shadow: 0 0 0 4px rgba(79,70,229,.45), 0 2px 6px rgba(15,23,42,.08); }
  100% { box-shadow: 0 0 0 0 rgba(79,70,229,0), 0 2px 6px rgba(15,23,42,.08); }
}
.pagina-trocada { animation: pagina-trocada 1.1s ease-out 1; }

/* ---------- conta, pacotes e pagamento ---------- */
.saldo-paginas {
  font-size: .78rem; font-weight: 700; color: #92400e;
  background: #fef3c7; border: 1px solid #fde68a;
  padding: .3rem .7rem; border-radius: 2rem;
}
.plano-cartao {
  border: 1.5px solid var(--cg-borda); border-radius: .8rem;
  background: var(--cg-cartao); padding: 1.1rem 1rem; height: 100%;
  display: flex; flex-direction: column; text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.plano-cartao:hover { border-color: var(--cg-tinta); box-shadow: 0 4px 14px rgba(79,70,229,.12); }
.plano-cartao.destaque { border-color: var(--cg-tinta); position: relative; }
.plano-cartao .selo {
  position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
  background: var(--cg-tinta); color: #fff; font-size: .68rem; font-weight: 700;
  padding: .15rem .6rem; border-radius: 2rem; white-space: nowrap;
}
.plano-cartao .paginas { font-size: 2rem; font-weight: 800; color: var(--cg-grafite); line-height: 1.1; }
.plano-cartao .preco { font-size: 1.15rem; font-weight: 700; color: var(--cg-tinta-escura); }
.plano-cartao .por-pagina { font-size: .74rem; color: #475569; }
.plano-cartao .frase { font-size: .8rem; color: #64748b; min-height: 2.2em; }
.plano-cartao.gratis { background: #fbfaf8; }
.resumo-plano {
  background: var(--cg-tinta-suave); border-radius: .65rem; padding: .8rem 1rem;
}
.pix-box {
  border: 1.5px dashed var(--cg-borda); border-radius: .8rem; padding: 1rem;
  background: #fbfaf8;
}
#pix-qr { image-rendering: pixelated; border: 6px solid #fff; border-radius: .35rem;
  box-shadow: 0 1px 4px rgba(15,23,42,.12); }

/* ---------- rodapé ---------- */
.app-footer { border-top: 1px solid var(--cg-borda); background: #fbfaf8; }

@media (max-width: 768px) { .hero { padding: 1.8rem 0 1rem; } }

/* ---------- selo da garantia de qualidade ---------- */
/* Diz "conferida", não a nota: a nota é similaridade de OCR, e o leitor é treinado em
   inglês — mostrar 87% numa página impecável assustaria o cliente à toa. */
.selo-conferido {
  background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
  font-weight: 600; font-size: .72rem; padding: .32rem .6rem; border-radius: .5rem;
  cursor: help;
}
.selo-conferido.reprovada {
  background: #fff7ed; color: #b45309; border-color: #fed7aa;
}
/* NEM verde NEM alarme: a página foi alterada depois da conferência, e isso não é um defeito
   nem uma aprovação — é uma informação. Cinza-azulado para não parecer erro (o cliente acabou
   de arrumar a página por vontade própria) e não parecer selo válido. */
.selo-conferido.desatualizado {
  background: #f1f5f9; color: #475569; border-color: #cbd5e1;
}




/* ---------------------------------------------------------------- ampliar a página
   No celular a folha A4 cabe em ~360px de largura, e a letra fica pequena demais para o cliente
   conferir o que pagou — o produto ENTREGA uma imagem, e não poder examiná-la é não poder avaliar
   a compra. Um toque amplia para a largura real e deixa arrastar. */
.papel-resultado.ampliado {
  -webkit-overflow-scrolling: touch;   /* arrasto com inércia no iOS */
  /* justify-content: center + filho MAIOR que o container torna o scroll para a esquerda
     inacessivel (comportamento conhecido do flexbox: a area que transborda antes do inicio nao
     entra na regiao rolavel). Ao ampliar, o alinhamento vira flex-start e a folha rola inteira. */
  justify-content: flex-start;
  align-items: flex-start;
}
.papel-resultado.ampliado #pagina-imagem {
  max-width: none;
  width: 1240px;                       /* a largura real do render, a 150 DPI */
  cursor: zoom-out;
}
#pagina-imagem { cursor: zoom-in; }

/* dica de que a imagem amplia — some depois do primeiro toque (o JS tira a classe) */
.papel-resultado.pode-ampliar::after {
  content: "toque para ampliar";
  position: absolute; bottom: 10px; right: 12px;
  background: rgba(26, 32, 92, .82); color: #fff;
  font-size: .72rem; padding: 3px 9px; border-radius: 10px;
  pointer-events: none;
}
@media (min-width: 992px) { .papel-resultado.pode-ampliar::after { display: none; } }

/* ---------------------------------------------------------------- contraste
   Os rótulos de seção e o texto do estado vazio ficavam abaixo de 4.5:1 sobre o papel claro
   (AA do WCAG para texto normal). Estes tons passam, e continuam sendo secundários na hierarquia. */
.text-secondary { color: #545c6b !important; }
.estado-vazio .small { color: #4f5765; }


/* ---------------------------------------------------------------- a vitrine (estado vazio)
   A amostra tem 820px e a coluna do resultado é estreita no celular: max-width 100% com altura
   automática mantém a proporção sem esticar a letra — letra esticada num exemplo de caligrafia
   desmente o próprio exemplo. */
.amostra-exemplo {
  max-width: 100%; height: auto;
  border: 1px solid var(--cg-borda);
  border-radius: .5rem;
  box-shadow: 0 2px 12px rgba(26, 32, 92, .10);
}
.estado-vazio { padding: 1rem .5rem; max-width: 560px; }
.selo-garantia-vazio {
  background: #eef6ee; border: 1px solid #c9e0c9; color: #2b5d2b;
  border-radius: .5rem; padding: .5rem .7rem;
}
@media (max-width: 575px) {
  /* no celular a amostra ainda precisa ser legível: recorta a altura em vez de encolher tudo */
  .amostra-exemplo { max-height: 42vh; object-fit: cover; object-position: top; }
}