/* Documento A4 (modo único: folha branca com margem segura, sem sangria). */

/* Tons: o texto acompanha a cor de fundo escolhida (a variável vem do ancestral mais próximo). */
[data-tone="light"] { --c-label: var(--purple-600); --c-body: var(--ink-700); --c-strong: var(--burgundy-900); --c-head: var(--viva-purple); --c-link: var(--purple-600); --c-muted: var(--ink-500); --c-line: var(--border-default); --c-arrow: var(--burgundy-500); }
[data-tone="ink"]   { --c-label: var(--burgundy-700); --c-body: var(--ink-900); --c-strong: var(--burgundy-900); --c-head: var(--burgundy-900); --c-link: var(--burgundy-500); --c-muted: var(--ink-700); --c-line: var(--burgundy-300); --c-arrow: var(--burgundy-700); }
[data-tone="dark"]  { --c-chip-bg: rgba(255,255,255,.12); --c-label: #fff; --c-body: var(--mist-100); --c-strong: #fff; --c-head: #fff; --c-link: var(--blue-200); --c-muted: var(--mist-100); --c-line: rgba(255,255,255,.4); --c-arrow: var(--mist-100); }

.sheet {
  --margin: 10mm;
  width: 210mm;
  height: 297mm;
  padding: var(--margin);
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  font-family: var(--font-sans);
  color: var(--ink-700);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.sheet *, .sheet *::before, .sheet *::after { box-sizing: border-box; }
.doc { height: 100%; display: flex; flex-direction: column; gap: 4mm; }

.vv-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--c-label); margin: 0 0 2mm; }
.vv-body { font-family: var(--font-sans); font-weight: var(--weight-light); font-size: 11px; line-height: 1.5; color: var(--c-body); margin: 0; }
.vv-chip { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; background: var(--c-chip-bg, var(--mist-0)); border: 1px solid var(--c-line); border-radius: 20px; padding: 2.2px 8px; color: var(--c-body); white-space: nowrap; }
.sheet a { color: var(--c-link); }
.sheet strong { font-weight: var(--weight-medium); color: var(--c-strong); }

/* Cabeçalho */
.hdr { flex: 0 0 auto; background: var(--surface-canvas); border-radius: 3mm; padding: 8mm 9mm 7mm; display: flex; justify-content: space-between; align-items: center; gap: 6mm; }
.hdr-text { flex: 1; min-width: 0; }
.hdr-title { font-family: var(--font-serif); font-weight: var(--weight-regular); font-size: 38px; line-height: 1.08; letter-spacing: var(--tracking-tight); color: var(--c-head); margin: 2.5mm 0 4mm; }
.hdr-lead { font-size: 12.5px; max-width: 120mm; }
.hdr-img { flex: 0 0 auto; width: 34mm; height: 34mm; max-width: 60%; object-fit: contain; }

/* Zonas de blocos de imagem: acima / abaixo / laterais */
.zone { display: flex; gap: 3mm; }
.zone:empty { display: none; }
.zone-above, .zone-below { flex: 0 0 auto; flex-direction: column; align-items: center; }
.mid { flex: 1; min-height: 0; display: flex; gap: 4mm; }
.zone-left, .zone-right { flex: 0 0 auto; flex-direction: column; justify-content: center; align-items: stretch; }
.zone-hdr-left, .zone-hdr-right { flex: 0 0 auto; flex-direction: column; justify-content: center; }
.hdr .imgblock { border-radius: 2.5mm; }

/* Corpo: o conteúdo se reorganiza conforme a largura disponível */
.body { flex: 1; min-width: 0; min-height: 0; padding: 2mm 3mm 0; display: flex; flex-direction: column; gap: 7mm; overflow: hidden; justify-content: space-evenly; container-type: inline-size; }
.box { border: 1px solid var(--c-line); border-radius: 10px; padding: 4mm 5mm; }
.chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sep { color: var(--c-muted); font-size: 12px; }
.sep.arrow { color: var(--c-arrow); font-size: 13px; margin: 0 2px; }
.mono-note { font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--c-muted); }
.focus-goal { font-weight: var(--weight-medium); font-size: 11.5px; color: var(--c-strong); }
.focus .vv-label { margin-bottom: 2.5mm; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; }
.cols3 { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8mm; border-top: 1px solid var(--c-line); padding-top: 4mm; }
@container (max-width: 150mm) { .cols3 { grid-template-columns: 1fr 1fr; } .cols3 > :last-child { grid-column: 1 / -1; } }
@container (max-width: 112mm) { .cols { grid-template-columns: 1fr; gap: 5mm; } .cols3 { grid-template-columns: 1fr; gap: 5mm; } }
.list { margin: 0 0 3mm; padding-left: 4.5mm; font-size: 11.5px; display: flex; flex-direction: column; gap: 1.5mm; }
.list.small { font-size: 10px; margin: 0 0 1.5mm; padding-left: 4mm; gap: 0.5mm; }
.deliver { margin: 0; padding-left: 5mm; font-size: 11.5px; display: flex; flex-direction: column; gap: 3.5mm; }
.cols .vv-body { font-size: 11.5px; }
.cols3 .vv-body { font-size: 11.5px; }

.budget { padding: 3.5mm 5mm; border-radius: 8px; }
.price { font-family: var(--font-serif); font-size: 18px; color: var(--c-strong); margin: 0; }
.budget .note { font-size: 10px; color: var(--c-muted); margin-top: 1mm; }
.status-label { margin: 2.5mm 0 1mm; }

.phases { display: flex; flex-direction: column; gap: 2mm; }
.phase .small { font-size: 10px; margin: 0 0 1.5mm; }
.down { color: var(--c-arrow); font-size: 12px; }

.pill { display: inline-block; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; border-radius: 20px; padding: 1.5px 7px; }
.pill[data-status="success"] { color: var(--success); background: var(--success-soft); }
.pill[data-status="warning"] { color: var(--warning); background: var(--warning-soft); }
.pill[data-status="danger"]  { color: var(--danger);  background: var(--danger-soft); }
.pill[data-status="info"]    { color: var(--blue-700); background: var(--blue-50); }
.pill[data-status="neutral"] { color: var(--ink-500);  background: var(--mist-100); }

/* Rodapé */
.ftr { flex: 0 0 auto; background: var(--viva-burgundy); color: var(--c-body); border-radius: 3mm; padding: 5mm 8mm; display: flex; flex-direction: column; gap: 3mm; }
.ftr-row { display: flex; justify-content: space-between; align-items: center; }
.logo-viva { height: 9mm; width: auto; }
.logo-client { height: 6.5mm; width: auto; }
.ftr-contact { font-size: 9.5px; color: var(--c-body); margin: 0; }
.ftr-legal { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--c-muted); margin: 0; text-align: center; }
/* Logos do rodapé são brancos: em fundo claro viram silhueta escura */
.ftr[data-tone="light"] img[data-orig], .ftr[data-tone="ink"] img[data-orig] { filter: brightness(0); }

/* Blocos de imagem */
.imgblock { margin: 0; position: relative; max-width: 100%; border-radius: 4mm; overflow: hidden; background: transparent; flex: 0 0 auto; }
.imgblock.empty { background: var(--mist-100); }
.imgblock[data-fit="contain"] { border-radius: 0; }
.imgblock[data-fit="contain"] img { object-fit: contain; }
.imgblock img { display: block; width: 100%; height: 100%; object-fit: cover; }
.imgblock.empty img { display: none; }
.imgblock .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4mm; font: 11px var(--font-sans); color: var(--ink-500); border: 1.5px dashed var(--purple-300); border-radius: 4mm; }
.imgblock:not(.empty) .ph { display: none; }
.zone-left .imgblock, .zone-right .imgblock { max-width: none; }

/* Paleta de fundos VIVA (aplicada em qualquer área com data-bgc) */
[data-bgc="white"]        { background: var(--mist-0); }
[data-bgc="mist-100"]     { background: var(--mist-100); }
[data-bgc="gray"]         { background: var(--viva-gray); }
[data-bgc="purple-50"]    { background: var(--purple-50); }
[data-bgc="purple-100"]   { background: var(--purple-100); }
[data-bgc="purple-200"]   { background: var(--purple-200); }
[data-bgc="purple-500"]   { background: var(--purple-500); }
[data-bgc="purple-700"]   { background: var(--purple-700); }
[data-bgc="burgundy-100"] { background: var(--burgundy-100); }
[data-bgc="burgundy-500"] { background: var(--burgundy-500); }
[data-bgc="burgundy-900"] { background: var(--burgundy-900); }
[data-bgc="blue-50"]      { background: var(--blue-50); }
[data-bgc="blue-100"]     { background: var(--blue-100); }
[data-bgc="blue-400"]     { background: var(--blue-400); }
[data-bgc="blue-700"]     { background: var(--blue-700); }