/* ============================================================
   ASCENT · Propostas: folha das entregas técnicas
   ------------------------------------------------------------
   Depende de tokens.css e proposta.css, carregada depois dos
   dois. Cobre só o que a proposta não tem: as ações de
   documento, os controles de circuito, o diagrama hidráulico,
   a legenda, o visor da prancha e a tabela larga.

   Topbar, capa, seções, cards, callouts, listas, rodapé e a
   paginação do A4 vêm inteiros do proposta.css.

   Regra de cor: emerald significa EM OPERAÇÃO, cream significa
   CALOR, navy significa água fria. Nenhum hex fora da marca.
   Por isso o botão de ação primária é navy e não emerald: na
   página do diagrama, emerald já tem um significado técnico e
   usá-lo num botão diluiria a leitura.
   ============================================================ */

/* ============================================================
   AÇÕES DE DOCUMENTO
   O .btn-contato do proposta.css é cream sobre navy, feito para
   o bloco de aceite. Sobre paper ele some, então a entrega tem
   a sua própria pílula.
   ============================================================ */
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 22px;
}
.btn-doc {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink);
    text-decoration: none;
    background: var(--doc-surface);
    border: 1px solid var(--doc-border-strong);
    border-radius: 999px;
    padding: 11px 18px;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-doc:hover {
    background: var(--doc-inset);
    border-color: var(--cream-600);
    transform: translateY(-1px);
}
.btn-doc svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-doc.primaria {
    color: var(--white);
    background: var(--navy);
    border-color: var(--navy);
}
.btn-doc.primaria:hover { background: var(--navy-700); border-color: var(--navy-700); }

/* ============================================================
   VISOR DA PRANCHA
   ============================================================ */
.pdfwrap {
    height: 640px;
    border: 1px solid var(--doc-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--doc-surface-alt);
}
.pdfwrap iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ============================================================
   CONTROLES DOS CIRCUITOS
   O estado ligado mora em aria-pressed, não numa classe: é o
   mesmo atributo que o leitor de tela anuncia, então não há
   como o visual e a semântica divergirem.
   ============================================================ */
.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.mbtn {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    background: var(--doc-surface);
    border: 1px solid var(--doc-border-strong);
    border-radius: 999px;
    padding: 10px 18px;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.mbtn:hover { border-color: var(--ink-4); color: var(--ink); }
.mbtn:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.mbtn[aria-pressed="true"] {
    color: var(--white);
    background: var(--emerald);
    border-color: var(--emerald);
}
.mbtn[aria-pressed="true"]:hover { background: var(--emerald-700); border-color: var(--emerald-700); }

/* Linha de estado. min-height fixa para a página não saltar
   quando o texto encurta, e aparência de callout porque é
   exatamente isso que ela é: o resumo do que está ligado. */
.status {
    margin: 0 0 24px;
    padding: 16px 20px;
    min-height: 74px;
    max-width: 78ch;
    font-size: 0.95rem;
    color: var(--ink-2);
    background: var(--doc-inset);
    border-left: 3px solid var(--cream);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* ============================================================
   DIAGRAMA
   ============================================================ */
.frame {
    padding: 20px;
    background: var(--doc-surface);
    border: 1px solid var(--doc-border);
    border-radius: var(--r-lg);
}
.frame svg { display: block; width: 100%; height: auto; }

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--doc-border);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}
.legend span { display: flex; align-items: center; gap: 8px; }
.legend i { flex-shrink: 0; }
.chip { width: 24px; height: 0; border-top: 3px solid var(--doc-border-strong); }
.chip.live { border-top: 4px solid var(--emerald); }
.dot {
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--doc-surface);
    border: 1.5px solid var(--doc-border-strong);
}
.dot.open { background: var(--emerald); border-color: var(--emerald-700); }
.sq {
    width: 13px; height: 13px; border-radius: 3px;
    background: var(--cream-200);
    border: 1px solid var(--cream-600);
}

/* --- classes de dentro do SVG ---------------------------- */
.t  { font-family: var(--font-body); font-size: 14px; fill: var(--ink); }
.ts { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-3); }
.th { font-family: var(--font-body); font-size: 15px; font-weight: 500; fill: var(--ink); }

.body-piscina { fill: var(--doc-surface-alt); stroke: var(--navy-400); stroke-width: 1.2; }
.body-spa     { fill: var(--paper-warm);      stroke: var(--cream-600); stroke-width: 1.2; }
.lbl-piscina  { fill: var(--ink); }
.lbl-spa      { fill: var(--cream-700); }

/* O estado nunca depende só de cor: a tubulação em operação
   também engrossa e vira tracejado. */
.pipe { fill: none; stroke: var(--doc-border-strong); stroke-width: 3; }
.pipe.on { stroke: var(--emerald); stroke-width: 4; stroke-dasharray: 11 7; }

.vlv { fill: var(--doc-surface); stroke: var(--doc-border-strong); stroke-width: 1.4; }
.vlv.open { fill: var(--emerald); stroke: var(--emerald-700); }

.eqbox { fill: var(--doc-surface-alt); stroke: var(--doc-border); stroke-width: 1.2; }
.eqbox.on { fill: var(--cream-200); stroke: var(--cream-600); }

.flow { stroke: var(--navy-400); stroke-width: 1.5; }

@media (prefers-reduced-motion: no-preference) {
    .pipe.on { animation: flow 1.1s linear infinite; }
    @keyframes flow { to { stroke-dashoffset: -36; } }
}

/* ============================================================
   PENDÊNCIAS
   Os cards ficam deitados, um por linha, para o olho percorrer
   um grupo de cada vez. Como cada um passa a ocupar os 1080px
   da medida, a lista interna abre em colunas: sem isso a linha
   iria a 150 caracteres, o dobro do confortável.
   ============================================================ */
#pendencias .card ul.dashes {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    column-gap: 34px;
}

/* ============================================================
   TABELA DOS CIRCUITOS
   O proposta.css fixa table-layout com larguras para três
   colunas (46/27/27). Esta tem cinco, então declara as suas.
   ============================================================ */
table.circuitos { min-width: 880px; }
table.circuitos thead th:nth-child(1) { width: 17%; }
table.circuitos thead th:nth-child(2) { width: 19%; }
table.circuitos thead th:nth-child(3) { width: 20%; }
table.circuitos thead th:nth-child(4) { width: 26%; }
table.circuitos thead th:nth-child(5) { width: 18%; }

/* ============================================================
   ESTIMATIVA DE CUSTOS
   Os botões de cenário reusam o .mbtn dos circuitos. As tabelas
   têm 4 e 5 colunas, então declaram as suas larguras contra o
   table-layout de três do proposta.css. Subtotal e total moram
   em <tfoot>, que o proposta.css já sabe pesar.
   ============================================================ */
.cenario {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 34px;
    margin-bottom: 4px;
}
.ctl { display: flex; flex-direction: column; gap: 10px; }
.ctl-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.ctl-opts { display: flex; flex-wrap: wrap; gap: 8px; }

.totalcard {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 46px;
    align-items: baseline;
    margin-top: 22px;
    padding: 24px 26px;
    background: var(--doc-inset);
    border: 1px solid var(--doc-border);
    border-left: 3px solid var(--cream);
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.totalcard .lbl {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.totalcard .val {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.totalcard .val.menor {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ink-2);
}

/* participação de cada grupo no total */
.bar-wrap { display: flex; align-items: center; gap: 10px; }
.bar-track { flex: 1; min-width: 60px; height: 7px; border-radius: 999px; background: var(--doc-border); }
.bar { height: 7px; border-radius: 999px; background: var(--navy-400); min-width: 2px; }
.pct { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

th.n { text-align: right; }
td.n {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink);
}
td.ref { color: var(--ink-3); font-size: 0.88rem; }

table.custos { min-width: 840px; }
table.custos thead th:nth-child(1) { width: 25%; }
table.custos thead th:nth-child(2) { width: 35%; }
table.custos thead th:nth-child(3) { width: 8%; }
table.custos thead th:nth-child(4) { width: 16%; }
table.custos thead th:nth-child(5) { width: 16%; }

table.resumo { min-width: 620px; }
table.resumo thead th:nth-child(1) { width: 32%; }
table.resumo thead th:nth-child(2) { width: 32%; }
table.resumo thead th:nth-child(3) { width: 18%; }
table.resumo thead th:nth-child(4) { width: 18%; }

.grupo { margin-top: 34px; }
.grupo h3 { margin-bottom: 12px; }

/* link para a outra página da entrega, separado das âncoras */
.topbar nav a.nav-ext {
    margin-left: 4px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0 999px 999px 0;
    color: var(--cream);
}

@media (max-width: 600px) {
    .pdfwrap { height: 420px; }
}

/* ============================================================
   IMPRESSÃO
   Duas coisas obrigam este bloco. As regras de break-inside por
   seção do proposta.css estão amarradas aos IDs da proposta, que
   a entrega não usa; e o print de lá zera fundos e reescreve as
   cores em hex literal, então o diagrama precisa repintar as
   suas do mesmo jeito, senão o Chrome o descarta para contorno
   cinza.
   ============================================================ */
@media print {
    .controls,
    .pdfwrap,
    .actions { display: none !important; }

    #prancha,
    #operacao,
    #circuitos { break-inside: avoid; }
    .frame { break-inside: avoid; background: #fff !important; border-color: #d9dbe1; padding: 8px 0 0; }

    .status {
        break-inside: avoid;
        min-height: 0;
        padding: 12px 16px;
        font-size: 9pt;
        color: #3A4657;
        background: #f3efe6 !important;
        border-left-color: #F9D592 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* o tracejado congela, mas espessura e dash seguem separando
       a tubulação em operação da que está em espera */
    .pipe.on { animation: none; }

    .frame svg,
    .legend i {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .body-piscina { fill: #FAFAFB !important; stroke: #3E5678 !important; }
    .body-spa     { fill: #FAF6EF !important; stroke: #D19A42 !important; }
    .pipe         { stroke: #C9CBD2 !important; }
    .pipe.on      { stroke: #10B981 !important; }
    .vlv          { fill: #FFFFFF !important; stroke: #C9CBD2 !important; }
    .vlv.open     { fill: #10B981 !important; stroke: #047857 !important; }
    .eqbox        { fill: #FAFAFB !important; stroke: #E1E2E6 !important; }
    .eqbox.on     { fill: #FBE2AE !important; stroke: #D19A42 !important; }
    .flow         { stroke: #3E5678 !important; }
    .t, .th       { fill: #1d2735 !important; }
    .ts           { fill: #667286 !important; }
    .lbl-spa      { fill: #A87828 !important; }

    .legend { font-size: 8pt; color: #667286; border-top-color: #d9dbe1; }
    .chip      { border-top-color: #C9CBD2 !important; }
    .chip.live { border-top-color: #10B981 !important; }
    .dot       { background: #FFFFFF !important; border-color: #C9CBD2 !important; }
    .dot.open  { background: #10B981 !important; border-color: #047857 !important; }
    .sq        { background: #FBE2AE !important; border-color: #D19A42 !important; }

    table.circuitos { min-width: 0; font-size: 8.4pt; }
    table.circuitos thead th,
    table.circuitos tbody td { padding: 8px 10px; }

    /* --- estimativa de custos ---------------------------- */
    .cenario { display: none !important; }

    .totalcard {
        break-inside: avoid;
        background: #f3efe6 !important;
        border-color: #d9dbe1;
        border-left-color: #F9D592 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .totalcard .val { font-size: 15pt; color: #1d2735; }
    .totalcard .val.menor { font-size: 9pt; color: #3A4657; }

    .bar-track,
    .bar {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .bar-track { background: #e6e7ea !important; }
    .bar { background: #3E5678 !important; }
    .pct { color: #667286; }

    .grupo { break-inside: avoid; }

    table.custos,
    table.resumo { min-width: 0; font-size: 8.2pt; }
    table.custos thead th, table.custos tbody td, table.custos tfoot td,
    table.resumo thead th, table.resumo tbody td, table.resumo tfoot td { padding: 7px 8px; }
    td.n { font-size: 8pt; }
    td.ref { font-size: 7.8pt; color: #667286; }
}