/* Maquety Comunicação Visual — ajustes do ofício sobre o app.css */
.cv-head { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); margin-top: 6px; }
.cv-head .input { font-weight: 600; }
#items-tbl .input { min-width: 0; }
#items-tbl .c-name .input { min-width: 170px; }
#items-tbl .num { width: 76px; text-align: right; }
#items-tbl .c-mat .select { min-width: 190px; }
#items-tbl .chip-check span { font-size: 0; padding: 0; width: 26px; height: 26px; display: inline-grid; place-items: center; }
#items-tbl .chip-check span::after { content: '✓'; font-size: 14px; opacity: .25; }
#items-tbl .chip-check input:checked + span::after { opacity: 1; }
#items-tbl .c-iss { min-width: 140px; }
#items-tbl .c-iss .badge { white-space: normal; }
.cv-seg { margin-bottom: 8px; }
.cv-seg > span { display: block; font-size: 11px; margin-bottom: 2px; }
.cv-seg .sheet-svg { max-height: 260px; }
.cv-color { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.cv-lib .input { min-width: 70px; }
.cv-lib td:first-child .input { min-width: 220px; }
.cv-preview { overflow-x: auto; }
.cv-quote td { vertical-align: top; }
.doc-scene { margin: 6px 0 10px; text-align: center; }
.doc-scene svg { max-width: 100%; }
.tpl svg { width: 22px; height: 22px; color: var(--accent); }

@media (max-width: 860px) {
  .cv-head { grid-template-columns: 1fr; }
  /* itens: cada linha vira um cartão */
  .table-wrap #items-tbl { min-width: 0; }
  #items-tbl thead { display: none; }
  #items-tbl, #items-tbl tbody { display: block; }
  #items-tbl tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 14px 14px; border-bottom: 1px solid var(--border);
    grid-template-areas: "name name act" "w h qty" "mat mat mat" "print lam rot" "inst ilhos bainha" "bastao metalon contorno" "iss iss iss"; }
  #items-tbl tr:hover { background: transparent; }
  #items-tbl td { display: block; padding: 0; border: 0; min-width: 0 !important; }
  #items-tbl td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; font-weight: 650; color: var(--text-3); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .03em; }
  #items-tbl .idx { display: none; }
  #items-tbl .input, #items-tbl .select { width: 100%; min-width: 0 !important; height: 40px; font-size: 15px; }
  #items-tbl .num { text-align: left; }
  .c-name { grid-area: name; } .c-act { grid-area: act; align-self: end; text-align: right; white-space: nowrap; }
  .c-w { grid-area: w; } .c-h { grid-area: h; } .c-qty { grid-area: qty; } .c-mat { grid-area: mat; }
  .c-print { grid-area: print; } .c-lam { grid-area: lam; } .c-rot { grid-area: rot; } .c-inst { grid-area: inst; }
  .c-ilhos { grid-area: ilhos; } .c-bainha { grid-area: bainha; } .c-bastao { grid-area: bastao; } .c-metalon { grid-area: metalon; } .c-contorno { grid-area: contorno; }
  .c-iss { grid-area: iss; } .c-iss:empty { display: none; }
  #items-tbl td[class^="c-"][data-l] .chip-check::before { content: none; }
  /* biblioteca e orçamento: cartões também */
  .table-wrap .cv-lib, .table-wrap .cv-quote { min-width: 0; }
  .cv-lib thead { display: none; }
  .cv-lib, .cv-lib tbody { display: block; }
  .cv-lib tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .cv-lib td { display: block; padding: 0; border: 0; }
  .cv-lib td:first-child { grid-column: 1 / -1; }
  .cv-lib td:first-child .input, .cv-lib .input { min-width: 0; width: 100%; }
  .cv-lib td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; font-weight: 650; color: var(--text-3); margin-bottom: 3px; text-transform: uppercase; }
  .cv-quote th:nth-child(3), .cv-quote td:nth-child(3) { display: none; }
  .cv-quote td, .cv-quote th { padding-left: 10px; padding-right: 10px; }
}

/* rodada 2: produção, retalhos, catálogo, figuras */
.cv-prog { grid-template-columns: 1fr 1fr; }
.cat-item svg { flex: none; }
.cv-fig-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.doc-sec .doc-fig svg { max-width: 100%; height: auto; }
@media (max-width: 860px) {
  .cv-prog { grid-template-columns: 1fr; }
  .cv-off tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-off td.actions { text-align: right; }
}