/* =====================================================================
   CADERNO DE CALIGRAFIA
   =====================================================================
   Duas peles no mesmo HTML: a de tela, escura como o resto do site, e
   a de papel, que aparece só na impressão. Por isso não existe "gerar
   PDF" aqui — quem gera é a janela de imprimir do sistema, e ela já
   traz "Salvar como PDF".
   ===================================================================== */

.cg-topo{max-width:1000px;margin:0 auto;padding:34px 22px 0}
.cg-topo h1{font-size:clamp(26px,4vw,38px);letter-spacing:-.02em;margin:0 0 8px}
.cg-topo .chamada{max-width:64ch}

.cg-grade{max-width:1000px;margin:0 auto;padding:20px 22px 60px;
  display:grid;grid-template-columns:290px 1fr;gap:22px;align-items:start}
@media (max-width:900px){.cg-grade{grid-template-columns:1fr}}

/* ---------------------------------------------------------- controles */
.cg-painel{position:sticky;top:calc(var(--h-obra,38px) + 74px);
  background:var(--surf);border:1px solid var(--linha);border-radius:var(--raio);
  padding:16px;display:flex;flex-direction:column;gap:13px}
@media (max-width:900px){.cg-painel{position:static}}
.cg-painel label{display:flex;flex-direction:column;gap:5px;
  font-size:11.5px;color:var(--tx3);letter-spacing:.02em}
.cg-painel select,.cg-painel input[type=number],.cg-painel input[type=text]{
  height:36px;padding:0 10px;border:1px solid var(--linha2);border-radius:7px;
  background:var(--bg);color:var(--tx);font:13.5px Inter,system-ui,sans-serif}
.cg-painel textarea{min-height:120px;padding:9px 10px;border:1px solid var(--linha2);
  border-radius:7px;background:var(--bg);color:var(--tx);
  font:13.5px/1.6 Inter,system-ui,sans-serif;resize:vertical}
.cg-painel select:focus,.cg-painel textarea:focus,.cg-painel input:focus{
  outline:0;border-color:var(--dourado)}
.cg-dupla{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cg-marca{flex-direction:row!important;align-items:center;gap:8px;
  font-size:12.5px!important;color:var(--tx2)!important}
.cg-conta{font-size:11.5px;color:var(--tx3);text-align:center}
.cg-painel .btn{width:100%;justify-content:center}

/* ------------------------------------------------------------- a folha */
.cg-papel{background:#fff;border-radius:var(--raio);padding:16px 18px 20px;
  box-shadow:0 0 0 1px #d8d8d8}
.cg-cab{border-bottom:1px solid #c9c9c9;padding-bottom:10px;margin-bottom:14px}
.cg-cab > b{display:block;font:500 15px Inter,system-ui,sans-serif;color:#1a1a1a}
.cg-cab > s{display:block;text-decoration:none;font-size:10.5px;color:#6a6a6a;margin-top:2px}
.cg-nome{display:flex;gap:22px;margin-top:11px;font-size:10.5px;color:#8a8a8a}
.cg-nome > i{font-style:normal;border-bottom:1px solid #c9c9c9;flex:1;padding-bottom:2px}
.cg-faixa{display:block;width:100%;margin-bottom:1.2mm}
.cg-rodape{margin-top:12px;padding-top:8px;border-top:1px solid #e2e2e2;
  display:flex;justify-content:space-between;font-size:9.5px;color:#9a9a9a}

.cg-aviso{margin-top:14px;font-size:12px;color:var(--tx3);line-height:1.6}
.cg-aviso b{color:var(--tx2)}

/* =====================================================================
   IMPRESSÃO — some tudo o que não é a folha
   =====================================================================
   A4 com 15 mm de margem, que é a mesma conta do viewBox do SVG:
   210 mm menos 30 mm dá os 180 mm de largura útil. Se mudar aqui,
   muda em app/publico/js/caligrafia.js também, senão a pauta de 9 mm
   deixa de ter 9 mm no papel.
   ===================================================================== */
@media print{
  @page{size:A4 portrait;margin:15mm}
  .obra,.topo,.rodape,.cg-topo,.cg-painel,.cg-aviso{display:none!important}
  body{background:#fff!important}
  .cg-grade{display:block;max-width:none;margin:0;padding:0}
  .cg-papel{box-shadow:none;border-radius:0;padding:0;background:#fff}
  .cg-cab{border-color:#999}
  .cg-cab > b{font-size:12pt}
  /* uma faixa nunca parte no meio entre duas páginas */
  .cg-faixa{break-inside:avoid;page-break-inside:avoid}
  .cg-rodape{position:fixed;bottom:0;left:0;right:0;border:0}
}

/* Papel gasto é dinheiro. Quando passa de oito folhas, a conta muda de
   cor e um recado diz como diminuir — antes de a pessoa clicar. */
.cg-conta.muito{color:var(--falta)}
.cg-muito{margin:0;font-size:11.5px;line-height:1.55;color:var(--falta);
  background:var(--falta-bg);border:1px solid var(--falta-bd);
  border-radius:7px;padding:9px 11px}