/* Fase B — Pipeline: contatos, orçamentos, contratos, catálogo, precificação e modelos.
 * Só modificadores sobre os componentes de app.css (ver docs/design/app-ui.md). Nada de hex solto: tokens. */

/* ---------- Utilitários locais ---------- */
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-success { color: var(--success); }
.prewrap { white-space: pre-wrap; }
.break-all { word-break: break-all; }
.fw-400 { font-weight: 400; }
.textarea--xs { min-height: 64px; }
.textarea--sm { min-height: 84px; }
.textarea--code { min-height: 420px; font-family: var(--mono); font-size: 13px; line-height: 1.5; }
.textarea--code-lg { min-height: 520px; }
.input--w-xs { max-width: 120px; }
.input--w-sm { max-width: 160px; }
.input--upper { text-transform: uppercase; }
.input--file { padding-top: 10px; }
.select--auto { width: auto; min-height: 36px; padding-block: 4px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.stat__value.is-warning { color: var(--warning); }
.is-overdue { color: var(--danger); }
.page-head--desktop { display: none; }
@media (min-width: 900px) { .page-head--desktop { display: flex; } }

/* Listas */
.list-row--xs { min-height: 40px; padding-block: var(--sp-2); }
.list-row--flush { padding-inline: 0; border: 0; }
.list-row__actions { display: flex; gap: var(--sp-2); align-items: center; flex: none; }
.list-row.is-inactive { opacity: .55; }
.list-row__meta svg { width: 12px; height: 12px; vertical-align: -1px; }
.list-row__meta .badge { vertical-align: 1px; }
.list-row__title .muted { font-weight: 400; }
.list-row__body--link { color: inherit; text-decoration: none !important; }
.list-row__amount small { display: block; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }
.list-row--btn { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border-subtle); font: inherit; text-align: left; cursor: pointer; min-height: 56px; }
.card__note { padding: 0 var(--sp-5) var(--sp-5); font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.card--pad-0 > .alert { margin: 0 var(--sp-5) var(--sp-4); }
.card--pad-0 > .list + .pagination { margin: var(--sp-3) var(--sp-5); }
.card__header--sub { margin-bottom: var(--sp-2); }
.card__text { font-size: var(--fs-sm); color: var(--ink-2); margin: 0 0 var(--sp-4); }

/* Cartão recolhível (endereço do contato) */
.card--details > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-md); }
.card--details > summary::-webkit-details-marker { display: none; }
.card--details > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform var(--dur-1) var(--ease); margin: 0 6px 4px 0; flex: none; }
.card--details[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
.card--details > summary .muted { font-weight: 500; font-size: var(--fs-sm); }

/* ---------- Filtros ---------- */
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips--scroll::-webkit-scrollbar { display: none; }
.chips--scroll .chip { flex: none; }
.chip--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border-strong)); }
.chip--danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.chip--muted.is-active { background: var(--ink-3); border-color: var(--ink-3); color: var(--surface); }
.stage-chips > form { display: contents; }
.segmented--block { display: flex; width: 100%; }
.segmented--block label, .segmented--block > a, .segmented--block > button { flex: 1; text-align: center; justify-content: center; }

/* ---------- Cabeçalho de documento (ficha de orçamento / contrato) ---------- */
.doc-head__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.doc-head__main { min-width: 0; flex: 1 1 260px; }
.doc-head__eyebrow { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--primary); margin: 0 0 6px; }
.doc-head__title { font-size: var(--fs-xl); margin: 0; letter-spacing: -.02em; line-height: var(--lh-tight); }
.doc-head__meta { color: var(--ink-2); font-size: var(--fs-sm); margin: var(--sp-2) 0 0; }
.doc-head__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; }
.doc-head__amount { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink); }
.doc-head__amount small { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.doc-head__views { font-size: var(--fs-xs); color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.doc-head__views svg { width: 12px; height: 12px; }
.doc-head__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-4); }
.doc-head__link { font-size: var(--fs-xs); color: var(--ink-3); margin: var(--sp-4) 0 0; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.doc-head__link .copyable { color: var(--ink-2); word-break: break-all; }
@media (max-width: 639px) {
  .doc-head__side { flex-direction: row-reverse; align-items: center; justify-content: space-between; width: 100%; text-align: left; flex-wrap: wrap; }
  .doc-head__views { width: 100%; }
  .doc-head__actions .btn:not(.btn--icon) { flex: 1 1 auto; }
}

/* Faixa de fatos (resumo em tiles rebaixados) */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; margin-top: var(--sp-4); }
.facts__item { background: var(--surface-2); padding: var(--sp-3) var(--sp-4); min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none !important; }
a.facts__item:hover { background: var(--surface-hover); }
.facts__label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.facts__value { font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facts__value.is-danger { color: var(--danger); }
.facts__value.is-success { color: var(--success); }
.facts__value.is-muted { color: var(--ink-3); font-weight: 500; }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Duas colunas da ficha: principal larga + lateral */
.detail-grid { display: grid; gap: var(--sp-4); align-items: start; }
.detail-grid > * { min-width: 0; }
@media (min-width: 1000px) { .detail-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--sp-5); } }
@media (min-width: 1000px) { .detail-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Totais */
.totals { display: grid; gap: 6px; font-size: var(--fs-sm); }
.totals__row { display: flex; justify-content: space-between; gap: var(--sp-3); color: var(--ink-2); align-items: baseline; }
.totals__row > :last-child { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.totals__row--muted > :last-child { color: var(--ink-3); font-weight: 400; }
.totals__row--total { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border); font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
.totals__row--total > :last-child { font-weight: 700; font-family: var(--font-display); letter-spacing: -.02em; font-size: var(--fs-xl); }
.table tr.is-optional td { color: var(--ink-3); }
.table__sub { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; white-space: pre-wrap; }
.table .badge { vertical-align: 1px; }

/* Chave/valor (dados do contato) */
.kv { list-style: none; margin: 0; padding: 0; }
.kv__row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) var(--sp-5); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); min-height: 42px; align-items: baseline; }
.kv__row:last-child { border-bottom: 0; }
.kv__key { color: var(--ink-3); font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caps); padding-top: 3px; }
.kv__val { color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 479px) { .kv__row { grid-template-columns: 1fr; gap: 1px; } }

/* ---------- Ficha do contato ---------- */
.contact-hero { display: flex; gap: var(--sp-4); align-items: flex-start; }
.contact-hero__body { flex: 1; min-width: 0; }
.contact-hero__name { font-size: var(--fs-xl); margin: 0; letter-spacing: -.02em; line-height: var(--lh-tight); }
.contact-hero__meta { color: var(--ink-2); font-size: var(--fs-sm); margin: 2px 0 var(--sp-2); }
.contact-hero__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-4); }
.quick-actions .btn { padding-inline: var(--sp-3); }
@media (min-width: 640px) { .quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.note-form__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.timeline__body { white-space: pre-wrap; }
.timeline__body a { color: inherit; }

/* Funil (kanban) */
.kanban__link { display: block; color: inherit; text-decoration: none !important; }
.kanban__name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban__sub { display: block; font-size: var(--fs-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban__next { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--ink-2); }
.kanban__next svg { width: 12px; height: 12px; vertical-align: -1px; }
.kanban__next.is-overdue { color: var(--danger); }
.kanban__actions { display: flex; gap: 4px; align-items: center; margin-top: var(--sp-2); flex-wrap: nowrap; }
.kanban__empty { padding: var(--sp-5) var(--sp-3); text-align: center; font-size: var(--fs-sm); color: var(--ink-3); border: 1px dashed var(--border-strong); border-radius: var(--r-md); }

/* Importação */
.import-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.import-stats .stat__value { font-size: var(--fs-xl); }
.table td.truncate { max-width: 200px; }

/* ---------- Construtor de orçamento ---------- */
.quote-items { counter-reset: qi; }
.quote-items:empty + .quote-items__empty { display: flex; }
.quote-items__empty { display: none; margin: 0 var(--sp-5); padding: var(--sp-5); border: 1px dashed var(--border-strong); border-radius: var(--r-md); color: var(--ink-3); font-size: var(--fs-sm); align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; }
.quote-items__empty svg { width: 18px; height: 18px; flex: none; }
.quote-item { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border-subtle); counter-increment: qi; }
.quote-item__head { display: flex; gap: var(--sp-3); align-items: flex-start; }
.quote-item__num { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); font-size: var(--fs-2xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 10px; font-variant-numeric: tabular-nums; }
.quote-item__num::before { content: counter(qi); }
.quote-item__fields { flex: 1; min-width: 0; display: grid; gap: var(--sp-2); }
.quote-item__fields .textarea { min-height: 44px; }
.quote-item__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.quote-item__grid .field { margin: 0; gap: 4px; }
.quote-item__grid .field__label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); font-weight: 600; }
.quote-item__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.quote-item__total { font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-md); letter-spacing: -.01em; }
.quote-item__total small { font-weight: 500; font-size: var(--fs-xs); color: var(--ink-3); margin-right: 6px; }
@media (min-width: 640px) {
  .quote-item__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quote-item__num { margin-top: 11px; }
}
@media (min-width: 900px) { .quote-item__head { padding-left: 0; } .quote-item__grid, .quote-item__foot { padding-left: calc(26px + var(--sp-3)); } }
.quote-item-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border-subtle); margin-top: var(--sp-4); }
.quote-items:not(:empty) ~ .quote-item-actions { margin-top: 0; }
.assistant-unknown { padding: 0 var(--sp-5) var(--sp-3); margin: 0; list-style: none; }
.input-group--sm .input-prefix, .input-group--sm .input-suffix { padding: 0 10px; font-size: var(--fs-xs); }
.input-group--sm .input-prefix { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group--sm .input-suffix { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.input-group--sm .input-prefix + .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.input-group--sm .input:has(+ .input-suffix) { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.discount-row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.discount-row .input { max-width: 160px; }
.picker-results { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.contact-selected { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; }

/* ---------- Catálogo ---------- */
.reorder { display: none; flex-direction: column; flex: none; }
@media (min-width: 900px) { .reorder { display: flex; } }
.reorder .btn { width: 28px; min-height: 22px; height: 22px; border-radius: var(--r-xs); color: var(--ink-3); }
.reorder .btn svg { width: 14px; height: 14px; }
.reorder .btn--flip svg { transform: rotate(180deg); }
.reorder .btn:disabled { opacity: .3; }
.card--suggest { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }

/* ---------- Precificação ---------- */
.rate-card.is-on { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 92%, #fff) 0%, var(--primary) 55%, color-mix(in srgb, var(--primary) 85%, #000) 100%); border-color: transparent; color: var(--on-primary); box-shadow: var(--shadow-inset), 0 8px 20px -8px var(--primary-glow); }
.rate-card.is-on .stat__label, .rate-card.is-on .rate-card__k, .rate-card.is-on .rate-card__formula { color: color-mix(in srgb, var(--on-primary) 82%, transparent); }
.rate-card.is-on .stat__value, .rate-card.is-on .rate-card__v { color: var(--on-primary); }
.rate-card .stat__value { font-size: var(--fs-4xl); }
.rate-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); font-size: var(--fs-sm); }
.rate-card__k { display: block; font-size: var(--fs-xs); color: var(--ink-2); }
.rate-card__v { font-weight: 700; font-variant-numeric: tabular-nums; }
.rate-card__formula { font-size: var(--fs-xs); margin: var(--sp-4) 0 0; color: var(--ink-3); }
.price-hours.is-estimate { color: var(--ink-3); }
.sim-row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); padding: var(--sp-2) 0; border-top: 1px solid var(--border-subtle); }
.sim-row strong { font-variant-numeric: tabular-nums; }

/* ---------- Contratos ---------- */
.var-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.var-list li { display: flex; gap: var(--sp-3); align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border-subtle); }
.var-list li:last-child { border-bottom: 0; }
.var-btn { font-family: var(--mono); font-size: 12px; justify-content: flex-start; text-align: left; flex: none; color: var(--primary-ink); background: var(--primary-soft); min-height: 30px; padding: 0 8px; border-radius: var(--r-xs); }
.var-btn:hover { background: color-mix(in srgb, var(--primary-soft) 70%, var(--primary) 30%); }
.var-list .list-row__meta { margin: 0; }
.signer-card .list-row__title { font-size: var(--fs-sm); }
.sig-level { align-items: flex-start; }
.signer-row__head .input { flex: 1; }

/* ---------- Modelos (marketplace) ---------- */
.market-card--orcamento .market-card__kind { color: var(--primary); }
.market-card--contrato .market-card__kind { color: var(--info); }
.market-card--mensagem .market-card__kind { color: var(--success); }
.market-card--automacao .market-card__kind { color: var(--warning); }
.market-card--catalogo .market-card__kind { color: var(--ink-2); }
.market-card__title { font-size: var(--fs-md); letter-spacing: -.01em; }
.market-card { transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.market-stars input:checked ~ label, .market-stars label:hover, .market-stars label:hover ~ label, .market-review__stars span.is-on { color: var(--warning); }
.market-foryou { background: linear-gradient(135deg, var(--primary-soft) 0%, color-mix(in srgb, var(--primary-soft) 40%, var(--surface)) 100%); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); }
.market-section__title svg { color: var(--primary); }
.market-sort { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.market-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.market-meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-2); }
.market-meta svg { width: 12px; height: 12px; vertical-align: -1px; }
.market-show__head { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.market-show__lead { font-size: var(--fs-md); color: var(--ink-2); margin: 0 0 var(--sp-2); }
.market-rate .row { gap: var(--sp-2); }
.rating-chip { font-size: var(--fs-xs); color: var(--ink-2); }

/* ---------- Complementos ---------- */
.row--center { justify-content: center; }
.grid--start { align-items: start; }
.field--xs .input { max-width: 120px; text-transform: uppercase; }
.field--short .textarea { min-height: 84px; }
.field--tiny .textarea { min-height: 64px; }
.field--code .textarea, .field--code-lg .textarea { min-height: 420px; font-family: var(--mono); font-size: 13px; line-height: 1.5; }
.field--code-lg .textarea { min-height: 520px; }

/* ---------- Ajustes r2 ---------- */
.list-row__meta svg, .kanban__next svg, .doc-head__views svg, .market-meta svg, .facts__value svg, .quote-items__empty svg { display: inline-block; }
.list-row__meta > span { display: inline; }
@media (max-width: 639px) {
  .contact-row .list-row__end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 46%; }
  .contact-row .list-row__end .list-row__meta { margin-top: 0; }
  .facts__label { white-space: normal; }
  .catalog-row .list-row__amount small { display: none; }
  .doc-head__actions .btn--primary, .doc-head__actions .btn--whatsapp { flex-basis: 100%; }
  .doc-head__actions > .btn:not(.btn--icon):not(.btn--primary):not(.btn--whatsapp), .doc-head__actions > form { flex: 1 1 36%; }
  .doc-head__actions > form .btn { width: 100%; }
  .doc-head__actions .dropdown { flex: none; }
}
.doc-head__actions > form { display: contents; }
.market-meta > span { display: inline-flex; align-items: center; gap: 4px; }