/* ============================================================================
   Páginas do tipo DOCUMENTO (orçamento, contrato, certificado, recibo).
   Visual sóbrio: superfície clara, tipografia legível, linhas discretas — o
   contrário do apelo visual de uma landing. Complementa landing.css/landing-v2.css.
   Lei de cor do design system: somente tokens (--m50ui-* com fallback --m50-*);
   --m50ui-primary é SUPERFÍCIE, nunca cor de texto (para texto, --m50ui-accent-text).
   ========================================================================== */

/* ─── Ritmo do documento ────────────────────────────────────────────────── */

/* A seção de landing respira 48–96px; num A4 isso vira página em branco entre
   as partes e as cláusulas. As três opções de espaçamento do painel continuam
   valendo — só que em escala de documento. Seletor com duas classes de propósito:
   precisa vencer .site-sec--normal independentemente da ordem dos arquivos. */
.site-secao.site-doc { padding-block: clamp(14px, 2.5vw, 28px); }
.site-secao.site-doc.site-sec--compacto { padding-block: clamp(8px, 1.5vw, 16px); }
.site-secao.site-doc.site-sec--amplo { padding-block: clamp(24px, 4vw, 48px); }

.site-doc {
    font-size: var(--m50ui-fs-md, 15px);
    line-height: var(--m50-line-height-relaxed, 1.6);
}

.site-doc .site-secao__cabecalho { margin-bottom: var(--m50ui-sp-lg, 16px); }

.site-doc .site-secao__titulo {
    font-size: clamp(19px, 2.2vw, 26px);
    font-weight: var(--m50-font-weight-bold, 700);
}

/* Lista vazia no canvas: orienta em vez de deixar um buraco que parece defeito. */
.site-doc__vazio {
    margin: 0;
    padding: var(--m50ui-sp-lg, 16px);
    border: 2px dashed var(--m50ui-border, var(--m50-border));
    border-radius: var(--m50ui-r-md, 8px);
    text-align: center;
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
    font-size: var(--m50ui-fs-sm, 13px);
}

/* ─── Partes ────────────────────────────────────────────────────────────── */

.site-partes__grade {
    display: grid;
    gap: var(--m50ui-sp-lg, 16px);
}

/* Contratante × contratada lado a lado só quando há largura para as duas colunas. */
@media (min-width: 861px) {
    .site-partes__grade { grid-template-columns: 1fr 1fr; }
}

.site-partes__item {
    padding: var(--m50ui-sp-lg, 16px);
    border: 1px solid var(--m50ui-border, var(--m50-border-light));
    border-radius: var(--m50ui-r-md, 8px);
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    text-align: left;
    break-inside: avoid;
}

.site-partes__papel {
    display: block;
    margin-bottom: 4px;
    font-size: var(--m50ui-fs-xs, 12px);
    font-weight: var(--m50-font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: var(--m50-letter-spacing-wide, 0.04em);
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
}

.site-partes__qualificacao { margin: 0; }

/* ─── Cláusulas ─────────────────────────────────────────────────────────── */

.site-clausulas__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--m50ui-sp-lg, 16px);
    text-align: left;
}

.site-clausulas__item { break-inside: avoid; }

.site-clausulas__titulo {
    display: flex;
    align-items: baseline;
    gap: var(--m50ui-sp-sm, 8px);
    margin: 0 0 6px;
    font-size: var(--m50ui-fs-md, 15px);
    font-weight: var(--m50-font-weight-bold, 700);
}

.site-clausulas__numero {
    font-variant-numeric: tabular-nums;
    font-weight: var(--m50-font-weight-bold, 700);
    color: var(--m50ui-on-bg-muted, var(--m50-text-secondary));
    white-space: nowrap;
}

.site-clausulas__texto > * { margin: 0 0 0.6em; }
.site-clausulas__texto > *:last-child { margin-bottom: 0; }
.site-clausulas__texto ul { padding-left: 1.3em; }
.site-clausulas__texto a { color: var(--m50ui-accent-text, var(--m50-info)); }

.site-clausulas__subitens {
    list-style: none;
    margin: var(--m50ui-sp-sm, 8px) 0 0;
    padding: 0 0 0 clamp(12px, 3vw, 28px);
    display: grid;
    gap: 4px;
}

.site-clausulas__subitem {
    display: flex;
    align-items: baseline;
    gap: var(--m50ui-sp-sm, 8px);
}

/* ─── Itens e valores ───────────────────────────────────────────────────── */

/* A tabela rola dentro do próprio bloco: espremer coluna de dinheiro em tela
   estreita torna o valor ilegível, e a página inteira nunca rola na horizontal. */
.site-tabela-itens__rolagem { overflow-x: auto; }

.site-tabela-itens__tabela {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    text-align: left;
    font-size: var(--m50ui-fs-md, 15px);
}

.site-tabela-itens__tabela th,
.site-tabela-itens__tabela td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--m50ui-border, var(--m50-border-light));
    vertical-align: top;
}

.site-tabela-itens__tabela thead th {
    border-bottom-width: 2px;
    font-size: var(--m50ui-fs-xs, 12px);
    font-weight: var(--m50-font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: var(--m50-letter-spacing-wide, 0.04em);
    color: var(--m50ui-on-bg-muted, var(--m50-text-secondary));
    white-space: nowrap;
}

.site-tabela-itens__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.site-tabela-itens__total th,
.site-tabela-itens__total td {
    border-bottom: 0;
    border-top: 2px solid var(--m50ui-border, var(--m50-border));
    font-size: var(--m50ui-fs-lg, 17px);
    font-weight: var(--m50-font-weight-bold, 700);
}

.site-tabela-itens__total th { text-align: right; }

/* ─── Resumo de valores ─────────────────────────────────────────────────── */

.site-resumo__valores {
    display: grid;
    gap: 2px;
    max-width: 420px;
    margin: 0 0 var(--m50ui-sp-lg, 16px);
    /* Encostado à direita, como nota fiscal — o olho procura o total nesse canto. */
    margin-inline-start: auto;
}

.site-resumo__linha {
    display: flex;
    justify-content: space-between;
    gap: var(--m50ui-sp-lg, 16px);
    padding: 4px 0;
}

.site-resumo__linha dt { color: var(--m50ui-on-bg-muted, var(--m50-text-secondary)); }

.site-resumo__linha dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.site-resumo__linha--total {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 2px solid var(--m50ui-border, var(--m50-border));
    font-size: var(--m50ui-fs-lg, 17px);
    font-weight: var(--m50-font-weight-bold, 700);
}

.site-resumo__linha--total dt { color: inherit; }

.site-resumo__condicoes,
.site-resumo__observacoes {
    margin: 0 0 6px;
    text-align: left;
    font-size: var(--m50ui-fs-sm, 13px);
    color: var(--m50ui-on-bg-muted, var(--m50-text-secondary));
}

/* ─── Assinaturas ───────────────────────────────────────────────────────── */

.site-assinaturas__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: clamp(20px, 5vw, 56px);
}

.site-assinaturas__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    break-inside: avoid;
}

/* Com ou sem rubrica a linha fica na mesma altura: sem imagem sobra o espaço
   para assinar à mão, que é o uso normal do documento impresso. */
.site-assinaturas__rubrica {
    height: 56px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    margin-bottom: 4px;
}

.site-assinaturas__rubrica--vazia { width: 100%; }

.site-assinaturas__linha {
    width: 100%;
    margin-bottom: 6px;
    border-top: 1px solid var(--m50ui-on-bg-muted, var(--m50-text-secondary));
}

.site-assinaturas__nome { font-weight: var(--m50-font-weight-semibold, 600); }

.site-assinaturas__nome--vazio {
    font-style: italic;
    font-weight: var(--m50-font-weight-normal, 400);
    font-size: var(--m50ui-fs-sm, 13px);
    color: var(--m50ui-on-bg-muted, var(--m50-text-tertiary));
}

.site-assinaturas__cargo {
    font-size: var(--m50ui-fs-sm, 13px);
    color: var(--m50ui-on-bg-muted, var(--m50-text-secondary));
}

/* ─── Validação ─────────────────────────────────────────────────────────── */

.site-validacao__codigo {
    margin: 0 0 var(--m50ui-sp-sm, 8px);
    text-align: center;
    font-family: var(--m50ui-mono, monospace);
    font-size: clamp(20px, 3vw, 28px);
    font-weight: var(--m50-font-weight-bold, 700);
    letter-spacing: 0.12em;
    word-break: break-all;
}

/* Código de exemplo do modelo: presente, mas visivelmente não-oficial. */
.site-validacao__codigo--exemplo { opacity: 0.45; }

/* QR do endereço de conferência. Fundo branco vem do próprio SVG (a zona muda só existe se for
   clara) — por isso ele funciona mesmo sobre o fundo colorido de um certificado. */
.site-validacao__qr {
    display: flex;
    justify-content: center;
    margin-bottom: var(--m50ui-sp-md, 12px);
}

/* Base do SVG de QR: nunca vaza do container; o tamanho é decisão de quem o usa. */
.site-qr {
    display: block;
    max-width: 100%;
    height: auto;
}

.site-validacao__aviso {
    margin: 0 0 var(--m50ui-sp-md, 12px);
    text-align: center;
    font-size: var(--m50ui-fs-sm, 13px);
    color: var(--m50ui-on-bg-muted, var(--m50-text-tertiary));
}

.site-validacao__instrucao {
    margin: 0 0 6px;
    text-align: center;
    color: var(--m50ui-on-bg-muted, var(--m50-text-secondary));
}

.site-validacao__endereco {
    display: block;
    text-align: center;
    font-family: var(--m50ui-mono, monospace);
    font-size: var(--m50ui-fs-sm, 13px);
    word-break: break-all;
    color: var(--m50ui-on-bg-muted, var(--m50-text-tertiary));
}

/* Só o endereço clicável (instância emitida) recebe cor de link. */
a.site-validacao__endereco { color: var(--m50ui-accent-text, var(--m50-info)); }

/* ─── Aceite ────────────────────────────────────────────────────────────── */

.site-aceite__form { margin: 0; }

.site-aceite__campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--m50ui-sp-lg, 16px);
    align-items: end;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: left;
}

.site-aceite__campos:disabled { opacity: 0.6; }

.site-aceite__campos > .site-botao { grid-column: 1 / -1; }

.site-aceite__botao--previa { cursor: default; }

.site-aceite__aviso {
    margin: var(--m50ui-sp-md, 12px) 0 0;
    font-size: var(--m50ui-fs-sm, 13px);
    color: var(--m50ui-on-bg-muted, var(--m50-text-tertiary));
}

.site-aceite__carimbo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: clamp(16px, 3vw, 28px);
    text-align: center;
    border: 1px solid var(--m50-success, var(--m50ui-border));
    border-radius: var(--m50ui-r-lg, 12px);
    background: color-mix(in srgb, var(--m50-success, var(--m50ui-accent-text)) 10%, transparent);
    break-inside: avoid;
}

.site-aceite__carimbo-titulo {
    font-size: var(--m50ui-fs-lg, 17px);
    font-weight: var(--m50-font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--m50-success, var(--m50ui-accent-text));
}

.site-aceite__carimbo-detalhe {
    margin: 0;
    color: var(--m50ui-on-bg-muted, var(--m50-text-secondary));
}

/* ─── Impressão ─────────────────────────────────────────────────────────── */

/* Só o que é específico destes blocos; a folha (A4/margens) é do CSS de impressão. */
@media print {
    .site-tabela-itens__rolagem { overflow: visible; }
    .site-tabela-itens__tabela { min-width: 0; }
    .site-tabela-itens__tabela tr { break-inside: avoid; }
    .site-partes__item,
    .site-clausulas__item,
    .site-assinaturas__item,
    .site-aceite__carimbo { break-inside: avoid; }
}

/* ─── Cabeçalho (timbre de documento / faixa de título) ─────────────────── */

/* Abertura da página: marca + identificação. Duas variantes do MESMO bloco —
   `--timbre` é o papel timbrado do documento, `--faixa` é a abertura de uma
   página web sem menu. Não confundir com .site-navbar, que é o menu do topo e
   sai da folha na impressão. */

.site-cabecalho__titulo {
    margin: 0;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: var(--m50-font-weight-bold, 700);
    line-height: var(--m50-line-height-tight, 1.2);
}

.site-cabecalho__subtitulo {
    margin: 4px 0 0;
    color: var(--m50ui-on-bg-muted, var(--m50-text-secondary));
}

/* ── Variante timbre ── */

.site-cabecalho__topo {
    display: grid;
    gap: var(--m50ui-sp-lg, 16px);
    align-items: start;
    text-align: left;
}

/* Duas colunas só quando cabem: em tela estreita o logo empilha sobre os textos. */
@media (min-width: 861px) {
    .site-cabecalho__topo { grid-template-columns: auto 1fr; }
    .site-cabecalho__topo--invertido { grid-template-columns: 1fr auto; }

    /* Inversão por `order`: a marca continua primeiro no DOM (ordem de leitura do
       leitor de tela), só troca de lado na tela e no papel. */
    .site-cabecalho__topo--invertido .site-cabecalho__marca { order: 2; }
}

.site-cabecalho__logo {
    display: block;
    /* Teto de altura: logo de 1000px empurraria o título para fora da primeira folha. */
    max-height: 64px;
    max-width: min(240px, 100%);
    width: auto;
    height: auto;
    object-fit: contain;
}

.site-cabecalho__emitente {
    margin: var(--m50ui-sp-md, 12px) 0 0;
    /* Razão social, documento, endereço e contato vêm em linhas separadas dentro do
       mesmo campo — sem pre-line viraria um parágrafo corrido. */
    white-space: pre-line;
    font-size: var(--m50ui-fs-sm, 13px);
    color: var(--m50ui-on-bg-muted, var(--m50-text-secondary));
}

/* Nº, data e validade encostados à direita, como em nota fiscal: é nesse canto que
   o olho procura o número do documento. */
.site-cabecalho__dados {
    display: grid;
    gap: 2px;
    margin: var(--m50ui-sp-md, 12px) 0 0;
    margin-inline-start: auto;
    max-width: 320px;
    font-size: var(--m50ui-fs-sm, 13px);
}

.site-cabecalho__dado {
    display: flex;
    justify-content: space-between;
    gap: var(--m50ui-sp-md, 12px);
}

.site-cabecalho__dado dt { color: var(--m50ui-on-bg-muted, var(--m50-text-secondary)); }

.site-cabecalho__dado dd {
    margin: 0;
    text-align: right;
    font-weight: var(--m50-font-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
}

/* Dica de preenchimento: renderizada só em modo de edição, some no site publicado. */
.site-cabecalho__dica { margin-top: var(--m50ui-sp-md, 12px); }

/* ── Variante faixa ── */

/* Abertura de página web pede mais respiro que o ritmo de documento. Duas classes
   para vencer `.site-secao.site-doc` sem !important — e as três opções de
   espaçamento do painel (`.site-sec--*`, mais específicas) continuam mandando. */
.site-secao.site-cabecalho--faixa { padding-block: clamp(40px, 7vw, 88px); }

.site-cabecalho__faixa {
    max-width: 65ch;
    margin-inline: auto;
    text-align: center;
}

.site-cabecalho--faixa .site-cabecalho__titulo {
    font-size: clamp(28px, 4.5vw, var(--m50-font-4xl, 36px));
}

.site-cabecalho--faixa .site-cabecalho__subtitulo {
    margin-top: var(--m50ui-sp-md, 12px);
    font-size: var(--m50ui-fs-lg, 17px);
}

/* ── Divisória ── */

.site-cabecalho__divisoria {
    margin-top: var(--m50ui-sp-lg, 16px);
    border-top: 1px solid var(--m50ui-border, var(--m50-border));
}

@media print {
    /* O cabeçalho abre o documento: não pode ser partido ao meio nem ficar sozinho
       no pé de uma folha, com o conteúdo começando só na seguinte. */
    .site-cabecalho,
    .site-cabecalho__topo,
    .site-cabecalho__dados { break-inside: avoid; }

    .site-cabecalho { break-after: avoid; }

    /* Altura em milímetros: no papel o teto em pixels não corresponde ao que sai. */
    .site-cabecalho__logo { max-height: 18mm; }
}