/* AgilityOS — página Clientes (complementa styles.css, não duplica nada de lá) */

.clients-toolbar{display:flex;align-items:center;padding:18px 0 14px}
.filter-bar-static{display:flex;gap:8px}
.filter-bar-static .filter-chip{display:flex;align-items:center;gap:6px}
.filter-bar-static .filter-chip span{background:#20232a;color:#8b909a;border-radius:10px;padding:1px 6px;font-size:9px}
.filter-bar-static .filter-chip.active span{background:#2a331a;color:var(--lime)}

.clients-shell{border:1px solid #282b31;border-radius:10px;overflow:hidden;background:#111317;margin-bottom:40px}
.clients-head,.client-row{display:grid;grid-template-columns:minmax(200px,2fr) 130px minmax(140px,1.2fr) 100px 130px 110px 130px 70px;align-items:center;gap:10px;padding:0 15px}
.clients-head{height:42px;background:#15171b;color:#6f747e;font-size:10px;font-weight:700;letter-spacing:.08em;border-bottom:1px solid #292c32}
.client-row{min-height:58px;border-bottom:1px solid #24272c;color:#aeb2b9;font-size:12px;cursor:pointer}
.client-row:last-child{border-bottom:0}
.client-row:hover{background:#181a1f}
.client-name{display:flex;align-items:center;gap:10px;color:#e2e4e7;font-weight:600;min-width:0}
.client-name small{display:block;color:#70757e;font-size:10px;font-weight:400;margin-top:2px}
.client-name>div{min-width:0}
.client-name strong,.client-name small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.client-business{display:flex;align-items:center;gap:7px;color:#9297a1;font-size:11px}
.client-business i{width:7px;height:7px;border-radius:50%;background:var(--dot,#cbff57);flex:none}
.client-contact{display:flex;flex-direction:column;gap:2px;min-width:0}
.client-contact span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;color:#9297a1}
.status-pill{display:inline-block;border-radius:5px;font-size:9px;font-weight:700;padding:5px 8px;letter-spacing:.02em}
.status-pill.active{color:#d1fa71;background:#28321c}
.status-pill.inactive{color:#9297a1;background:#22252b}
.client-due{font-size:11px;color:#9297a1}
.client-due.due-soon{color:#ff9770}
.client-due.due-late{color:#ff5f5f}
.client-invoice-value{font-size:11px;font-weight:700;color:#c7cad0}
.client-actions{display:flex;gap:6px;justify-content:flex-end}
.client-actions button{width:26px;height:26px;border-radius:6px;border:1px solid #2b2e34;background:#15171a;color:#8d929b;cursor:pointer;font-size:12px;display:grid;place-items:center}
.client-actions button:hover{color:#eee;border-color:#41454d}
.client-actions .danger:hover{color:#ff7a7a;border-color:#5a2f2f}
.clients-empty{padding:50px;text-align:center;color:#656a73}

/* Tabs dentro do modal de detalhe do cliente (reaproveita o visual do .view-tabs) */
.client-tabs{display:flex;gap:4px;border-bottom:1px solid #292c32;padding:0 25px}
.client-tabs button{border:0;background:none;color:#777c85;height:44px;padding:0 6px;cursor:pointer;font-weight:600;font-size:12px;border-bottom:2px solid transparent}
.client-tabs button.active{color:#f0f1f2;border-bottom-color:var(--lime)}
.client-tab-panel{display:none}
.client-tab-panel.active{display:block}

.client-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.client-fields .field-full{grid-column:1/-1}
.client-fields small{display:block;color:#636973;font-size:8px;letter-spacing:.1em;font-weight:700;margin-bottom:6px}
.client-fields p{margin:0;font-size:13px;color:#dfe1e4}
.client-fields p.empty{color:#5c616a}

.service-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.service-row{display:flex;align-items:center;gap:12px;padding:11px 12px;background:#17191e;border:1px solid #292c32;border-radius:8px}
.service-type{font-size:8px;font-weight:700;letter-spacing:.06em;border-radius:5px;padding:4px 7px;text-transform:uppercase;flex:none}
.service-type.contrato{color:#74b6ff;background:#1e3042}
.service-type.aplicativo{color:#9d91ff;background:#29243e}
.service-type.site{color:#d1fa71;background:#28321c}
.service-type.iptv{color:#ff9d78;background:#3a2720}
.service-info{flex:1;min-width:0}
.service-info strong{display:block;font-size:12px;color:#dfe1e4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.service-info small{display:block;font-size:10px;color:#70757e;margin-top:2px}
.service-value{font-size:12px;font-weight:700;color:#e2e4e7;flex:none}
.service-row button{background:none;border:0;color:#5e636c;cursor:pointer;font-size:14px;flex:none}
.service-row button:hover{color:#ff7a7a}
.service-form{display:grid;grid-template-columns:120px 1fr 110px 130px auto;gap:8px;margin-top:6px}
.service-form select,.service-form input{background:#0e1013;border:1px solid #2b2f35;border-radius:6px;color:#eee;padding:8px 9px;font-size:10px;outline:0}

@media(max-width:900px){
  .clients-head{display:none}
  .client-row{grid-template-columns:1fr;gap:4px;padding:14px 17px}
  .client-invoice-value::before{content:'Fatura: ';color:#5c616a}
  .client-invoice-due::before{content:'Vence (fatura): ';color:#5c616a}
  .client-business,.client-contact{font-size:11px}
  .client-actions{justify-content:flex-start;margin-top:6px}
}
@media(max-width:700px){
  .client-fields{grid-template-columns:1fr}
  .service-form{grid-template-columns:1fr 1fr}
}

/* --------------------------------------------------------------------------
   AGT-0027 / v2 - Propostas: editor expandido, contra-assinatura e estados
   -------------------------------------------------------------------------- */
.proposal-state.countersigned{color:#b9ee70;background:#213218}
.proposal-row .proposal-state{justify-self:start}
.proposal-editor-section{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.proposal-editor-section>h4{margin:0 0 10px;color:#dfe1e4;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.proposal-editor-section>p{margin:0 0 12px;color:#70757e;font-size:10px;line-height:1.5}
.proposal-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.proposal-field-grid .field-full{grid-column:1/-1}
.proposal-field-grid label{display:block;color:#8d929b;font-size:10px}
.proposal-field-grid input,.proposal-field-grid textarea,.proposal-schedule-editor input,.proposal-schedule-editor textarea{display:block;width:100%;margin-top:6px;padding:9px;border:1px solid #2b2f35;border-radius:6px;background:#0e1013;color:#eee;font-size:11px;outline:0}
.proposal-field-grid textarea,.proposal-schedule-editor textarea{resize:vertical;line-height:1.5}
.proposal-field-grid input:focus,.proposal-field-grid textarea:focus,.proposal-schedule-editor input:focus,.proposal-schedule-editor textarea:focus{border-color:#718a35;box-shadow:0 0 0 3px rgba(200,246,91,.08)}
.proposal-list-editor{display:grid;gap:7px;margin-bottom:10px}
.proposal-list-editor-row{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}
.proposal-list-editor-row input{margin:0}
.proposal-list-editor-row button{width:30px;height:30px;border:1px solid #3a2b2b;border-radius:6px;background:#211719;color:#ff8f87;cursor:pointer}
.proposal-schedule-editor{display:grid;gap:7px;margin-bottom:10px}
.proposal-schedule-editor-row{display:grid;grid-template-columns:1fr 110px 1.3fr auto;gap:7px;align-items:start}
.proposal-schedule-editor-row input,.proposal-schedule-editor-row textarea{margin:0}
.proposal-schedule-editor-row button{height:31px;border:1px solid #3a2b2b;border-radius:6px;background:#211719;color:#ff8f87;cursor:pointer}
.proposal-view-pages{display:grid;gap:10px;margin-top:16px}
.proposal-view-page{padding:16px;border:1px solid #292c32;border-radius:9px;background:#15171b}
.proposal-view-page h4{margin:0;color:#e4e6e8;font:700 12px Manrope,sans-serif}
.proposal-view-page p{margin:7px 0 0;color:#9297a1;font-size:11px;line-height:1.6;white-space:pre-wrap}
.proposal-countersign{margin:16px 0;padding:14px;border:1px solid #3e5424;border-radius:8px;background:#171e12}
.proposal-countersign h4{margin:0;color:#c8f65b;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.proposal-countersign p{margin:7px 0 12px;color:#9faa91;font-size:10px;line-height:1.5}
.proposal-countersign-form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
.proposal-countersign-form label{display:block;color:#aeb9a0;font-size:10px}
.proposal-countersign-form input{display:block;width:100%;margin-top:6px;padding:9px;border:1px solid #34452a;border-radius:6px;background:#0e120c;color:#eff7e7;font-size:11px;outline:0}
.proposal-countersign-form input:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(200,246,91,.1)}
.proposal-countersign-result{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#bfe78b;font-size:11px}
.proposal-countersign-result strong{color:#e9f7d7}
.proposal-status-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.proposal-status-legend .proposal-state{font-size:9px}

@media(max-width:700px){
  .proposal-field-grid,.proposal-countersign-form{grid-template-columns:1fr}
  .proposal-field-grid .field-full{grid-column:auto}
  .proposal-schedule-editor-row{grid-template-columns:1fr 1fr}
  .proposal-schedule-editor-row textarea{grid-column:1/-1}
  .proposal-schedule-editor-row button{grid-column:2;justify-self:end;width:100%}
  .proposal-row .proposal-state{justify-self:end}
}

@media print{
  .proposal-countersign,.proposal-editor-section,.proposal-view-pages{break-inside:avoid}
}

/* Escala tipográfica compartilhada da área de clientes/propostas. */
.clients-shell,.client-detail,.invoice-panel{font-size:16px}
.client-tabs button,.invoice-head small,.invoices-header p,.invoice-comp,.invoice-due,.invoice-hint,.invoice-grid label,.invoice-form>label,.invoice-template-line,.invoice-section-label,.invoice-item,.proposal-about,.proposal-link>small,.proposal-signature-box>small,.proposal-rejection small{font-size:13px}
.client-fields small,.invoice-grid.readonly small,.proposal-editor-section>h4,.proposal-editor-section>p,.proposal-countersign h4{font-size:12px}
.proposal-logo-field label,.proposal-field-grid label,.proposal-schedule-editor label,.proposal-schedule-editor-row label,.proposal-countersign-form label{font-size:13px}
.client-fields p,.invoice-grid.readonly p,.invoice-item strong,.invoice-item small,.proposal-item strong,.proposal-item small,.proposal-countersign p,.proposal-countersign-result{font-size:14px;line-height:1.5}
.invoice-row{font-size:14px}.invoice-id,.proposal-title{font-size:14px}.invoice-total{font-size:14px}.invoice-state,.proposal-state{font-size:11px}
.invoice-grid input,.invoice-grid select,.invoice-form textarea,.proposal-logo-field input[type=text],.proposal-service input,.proposal-field-grid input,.proposal-field-grid textarea,.proposal-schedule-editor input,.proposal-schedule-editor textarea,.proposal-countersign-form input{font-size:14px}
.invoice-total-line strong{font-size:18px}.invoice-empty strong{font-size:15px}.invoice-empty p{font-size:13px}
.proposal-service{font-size:14px}.proposal-link-row input{font-size:13px}.proposal-signature-box strong{font-size:15px}.proposal-signature-box span,.proposal-rejection p{font-size:13px}
.proposal-page-section{font-size:15px}.proposal-page-lede,.proposal-card p,.proposal-field-card p,.proposal-numbered-list p,.proposal-scope-card li{font-size:14px;line-height:1.65}.proposal-card h3,.proposal-numbered-list strong{font-size:16px}.proposal-page-eyebrow,.proposal-cover-kicker{font-size:11px}.proposal-schedule{font-size:13px}.proposal-schedule th{font-size:11px}
.proposal-preview-body{font-size:15px}.proposal-preview-body .proposal-card p,.proposal-preview-body .proposal-field-card p,.proposal-preview-body .proposal-numbered-list p,.proposal-preview-body .proposal-scope-card li{font-size:14px;line-height:1.65}.proposal-preview-body .proposal-card h3,.proposal-preview-body .proposal-numbered-list strong{font-size:16px}.proposal-preview-body .proposal-page-eyebrow,.proposal-preview-body .proposal-cover-kicker{font-size:11px}.proposal-preview-body .proposal-schedule{font-size:13px}.proposal-preview-body .proposal-schedule th{font-size:11px}

/* --------------------------------------------------------------------------
   Pré-visualização interna do documento v2.
   Tudo fica sob .proposal-preview-dialog para não contaminar o painel escuro,
   os invoices ou a página pública. O renderer pode reutilizar as mesmas
   classes de página de proposta.css dentro de #proposalPreviewContent.
   -------------------------------------------------------------------------- */
.proposal-preview-dialog{width:min(1180px,calc(100% - 28px));height:min(94vh,920px);max-height:94vh;margin:auto;padding:0;border:1px solid #333840;border-radius:15px;background:#0d0f12;color:#f2f3f4;overflow:hidden;box-shadow:0 30px 100px #000c}
.proposal-preview-dialog::backdrop{background:#050607d9;backdrop-filter:blur(4px)}
.proposal-preview-shell{display:flex;height:100%;min-height:0;flex-direction:column}
.proposal-preview-head{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:18px;flex:none;padding:18px 24px;border-bottom:1px solid #2a2e35;background:#111317}
.proposal-preview-head small{display:block;color:var(--lime);font-size:9px;font-weight:700;letter-spacing:.15em}
.proposal-preview-head h2{margin:4px 0 0;color:#f0f1f2;font:700 18px Manrope,sans-serif;letter-spacing:-.03em}
.proposal-preview-close{display:grid;width:38px;height:38px;flex:none;place-items:center;border:1px solid #383d45;border-radius:8px;background:#191c21;color:#c8cbd0;font-size:24px;line-height:1;cursor:pointer}
.proposal-preview-close:hover{border-color:#737a84;color:#fff}
.proposal-preview-close:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.proposal-preview-body{min-height:0;flex:1;overflow:auto;padding:28px;background:radial-gradient(circle at 50% -10%,rgba(200,246,91,.06),transparent 42%),#0b0d10;overscroll-behavior:contain}
.proposal-preview-body:focus-visible{outline:2px solid var(--lime);outline-offset:-4px}
.proposal-preview-body .proposal-pages{width:min(860px,100%);margin:0 auto;gap:22px}
.proposal-preview-body .proposal-page-section{position:relative;min-height:560px;padding:clamp(28px,5vw,56px);border-radius:12px;background:#f7f7f5;color:#17191c;box-shadow:0 20px 50px rgba(0,0,0,.3);overflow:hidden;break-after:page}
.proposal-preview-body .proposal-page-section::after{position:absolute;right:32px;bottom:22px;color:#a2a49f;font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;content:attr(data-page)}
.proposal-preview-body .proposal-page-cover{display:flex;min-height:700px;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,#101216,#1c2027 62%,#121418);color:#f5f6f2}
.proposal-preview-body .proposal-page-cover::before{position:absolute;right:-18%;bottom:16%;width:60%;height:42%;border:1px solid rgba(200,246,91,.24);border-radius:50%;box-shadow:0 0 0 26px rgba(200,246,91,.03),0 0 0 52px rgba(200,246,91,.025);content:""}
.proposal-preview-body .proposal-cover-brand{display:flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:.16em}
.proposal-preview-body .proposal-cover-brand img{width:46px;height:46px;object-fit:contain;border-radius:10px;background:#fff;padding:5px}
.proposal-preview-body .proposal-cover-brand strong{font-size:11px}
.proposal-preview-body .proposal-cover-kicker,.proposal-preview-body .proposal-page-eyebrow{margin:0;color:#89918a;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.proposal-preview-body .proposal-cover-kicker{color:var(--lime)}
.proposal-preview-body .proposal-cover-title,.proposal-preview-body .proposal-page-title{margin:12px 0 0;font:800 clamp(30px,5vw,58px)/1.02 Manrope,sans-serif;letter-spacing:-.06em}
.proposal-preview-body .proposal-cover-title{max-width:9ch;color:#f5f6f2}
.proposal-preview-body .proposal-cover-subtitle,.proposal-preview-body .proposal-page-lede{max-width:58ch;margin:18px 0 0;color:#5f6469;font-size:13px;line-height:1.75}
.proposal-preview-body .proposal-cover-subtitle{color:#b9bec5}
.proposal-preview-body .proposal-cover-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border-top:1px solid #353941;padding-top:18px}
.proposal-preview-body .proposal-cover-meta small{display:block;color:#8d929b;font-size:8px;font-weight:700;letter-spacing:.16em}
.proposal-preview-body .proposal-cover-meta strong{display:block;margin-top:6px;color:#f0f2ef;font-size:12px}
.proposal-preview-body .proposal-page-title{color:#17191c}
.proposal-preview-body .proposal-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.proposal-preview-body .proposal-card-grid.is-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.proposal-preview-body .proposal-card{padding:17px;border:1px solid #deded8;border-radius:10px;background:#fbfbf9}
.proposal-preview-body .proposal-card-index{display:block;margin-bottom:24px;color:#9ba097;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace}
.proposal-preview-body .proposal-card h3{margin:0;color:#17191c;font:700 14px/1.25 Manrope,sans-serif}
.proposal-preview-body .proposal-card p,.proposal-preview-body .proposal-field-card p,.proposal-preview-body .proposal-numbered-list p{margin:8px 0 0;color:#656a70;font-size:12px;line-height:1.6}
.proposal-preview-body .proposal-field-grid,.proposal-preview-body .proposal-scope-grid,.proposal-preview-body .proposal-investment,.proposal-preview-body .proposal-terms,.proposal-preview-body .proposal-signatures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
.proposal-preview-body .proposal-field-card{padding:18px;border-left:3px solid #c8f65b;background:#efefeb}
.proposal-preview-body .proposal-field-card small,.proposal-preview-body .proposal-scope-card h3{display:block;color:#858a88;font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.proposal-preview-body .proposal-numbered-list{display:grid;gap:0;margin:26px 0 0;padding:0;list-style:none}
.proposal-preview-body .proposal-numbered-list li{display:grid;grid-template-columns:42px 1fr;gap:12px;padding:16px 0;border-top:1px solid #deded8}
.proposal-preview-body .proposal-numbered-list li:last-child{border-bottom:1px solid #deded8}
.proposal-preview-body .proposal-numbered-list b{color:#9ba097;font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace}
.proposal-preview-body .proposal-scope-card{padding:18px;border:1px solid #deded8;border-radius:10px;background:#fbfbf9}
.proposal-preview-body .proposal-scope-card.is-out{background:#faf5f3;border-color:#ead9d2}
.proposal-preview-body .proposal-scope-card h3{margin:0 0 12px;color:#303337;font-size:10px}
.proposal-preview-body .proposal-scope-card ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.proposal-preview-body .proposal-scope-card li{position:relative;padding-left:16px;color:#555a60;font-size:12px;line-height:1.5}
.proposal-preview-body .proposal-scope-card li::before{position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:50%;background:#c8f65b;content:""}
.proposal-preview-body .proposal-scope-card.is-out li::before{background:#d28c78}
.proposal-preview-body .proposal-schedule{width:100%;margin-top:26px;border-collapse:collapse;font-size:11px}
.proposal-preview-body .proposal-schedule th{padding:0 8px 9px;color:#858a88;font-size:8px;letter-spacing:.12em;text-align:left;text-transform:uppercase}
.proposal-preview-body .proposal-schedule td{padding:12px 8px;border-top:1px solid #deded8;vertical-align:top;color:#45494e}
.proposal-preview-body .proposal-investment-total{padding:24px;border-radius:12px;background:#111318;color:#f8faf5}
.proposal-preview-body .proposal-investment-total strong{display:block;margin-top:12px;color:#c8f65b;font:800 clamp(28px,5vw,46px) Manrope,sans-serif;letter-spacing:-.06em}
.proposal-preview-body .proposal-contact{display:grid;gap:7px;margin-top:24px;padding:20px;border-radius:12px;background:#111318;color:#f2f4ef}
.proposal-preview-body .proposal-contact span{color:#aab0a7;font-size:12px}
.proposal-preview-body .proposal-signature{min-height:140px;padding:16px;border-top:1px solid #bfc1bb}
.proposal-preview-body .proposal-signature small{color:#858a88;font-size:8px;font-weight:700;letter-spacing:.13em}
.proposal-preview-body .proposal-signature img{display:block;max-width:100%;height:50px;object-fit:contain;object-position:left bottom;margin:14px 0 8px;background:#fff}
.proposal-preview-body .proposal-signature strong{display:block;color:#17191c;font-size:12px}
.proposal-preview-body .proposal-signature span{display:block;margin-top:4px;color:#777c81;font-size:10px}

@media(max-width:700px){
  .proposal-preview-dialog{width:calc(100% - 12px);height:96vh;max-height:96vh}
  .proposal-preview-head{padding:15px 16px}
  .proposal-preview-body{padding:16px 10px}
  .proposal-preview-body .proposal-page-section{min-height:0;padding:24px 18px;border-radius:9px}
  .proposal-preview-body .proposal-page-cover{min-height:610px}
  .proposal-preview-body .proposal-card-grid,.proposal-preview-body .proposal-card-grid.is-four,.proposal-preview-body .proposal-field-grid,.proposal-preview-body .proposal-scope-grid,.proposal-preview-body .proposal-investment,.proposal-preview-body .proposal-terms,.proposal-preview-body .proposal-signatures{grid-template-columns:1fr}
  .proposal-preview-body .proposal-cover-meta{grid-template-columns:1fr;gap:12px}
  .proposal-preview-body .proposal-cover-title{font-size:52px}
  .proposal-preview-body .proposal-page-title{font-size:34px}
  .proposal-preview-body .proposal-schedule{display:block;overflow-x:auto;white-space:normal}
  .proposal-preview-body .proposal-schedule th,.proposal-preview-body .proposal-schedule td{min-width:118px}
}

@media print{
  .proposal-preview-dialog{position:static;width:100%;height:auto;max-height:none;margin:0;border:0;border-radius:0;overflow:visible;background:#fff;box-shadow:none}
  .proposal-preview-dialog::backdrop,.proposal-preview-head{display:none}
  .proposal-preview-shell,.proposal-preview-body{display:block;height:auto;overflow:visible;padding:0;background:#fff}
  .proposal-preview-body .proposal-pages{width:100%;gap:0}
  .proposal-preview-body .proposal-page-section{border-radius:0;box-shadow:none;break-after:page;page-break-after:always}
  .proposal-preview-body .proposal-page-section:last-child{break-after:auto;page-break-after:auto}
}

/* Aba "Tarefas" do detalhe do cliente. Reusa .service-row/.service-info para a
   linha ficar idêntica à de serviços; só o pill de status e o código são novos.
   Cores dos status espelham as colunas do quadro em app.js — as duas telas
   mostram o mesmo estado, então divergir na cor confundiria. */
.task-status{font-size:8px;font-weight:700;letter-spacing:.06em;border-radius:5px;padding:4px 7px;text-transform:uppercase;flex:none;white-space:nowrap}
.task-status.todo{color:#b6bcc6;background:#24272d}
.task-status.progress{color:#9d91ff;background:#29243e}
.task-status.review{color:#ff9d78;background:#3a2720}
.task-status.done{color:#d1fa71;background:#28321c}
.task-code{font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:#8b929d;flex:none}
.task-form{grid-template-columns:1fr 150px 130px auto}
.task-form-hint{margin:8px 0 0;font-size:10px;color:#70757e;line-height:1.5}
@media(max-width:700px){
  .task-form{grid-template-columns:1fr 1fr}
}

/* ---------------------------------------------------------------------------
   Aba "Faturas" do detalhe do cliente (AGT-0015).
   Tokens e linguagem visual vêm de styles.css: rascunho usa a família roxa
   (--purple), emitida usa a lime (--lime), e --orange fica reservado para
   atraso/bloqueio/erro — nunca para decoração.
   --------------------------------------------------------------------------- */

/* O modal de detalhe tem max-height + overflow:hidden em styles.css e nunca
   teve um contêiner de rolagem próprio — a aba Faturas é o primeiro conteúdo
   alto o bastante para estourar. max-height:inherit acompanha os três
   breakpoints do .detail-modal sem repetir os valores aqui. */
#clientDetailContent{display:flex;flex-direction:column;max-height:inherit}
#clientDetailContent .detail-main{overflow-y:auto;min-height:0}

.invoice-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.invoice-head>div:first-child{flex:1;min-width:0}
.invoice-head strong{display:block;font-size:14px;color:#eceef0}
.invoice-head small{display:block;font-size:10px;color:#70757e;margin-top:3px}

/* Cabeçalho da aba Faturas em coluna (título, subtítulo e, quando há dados, o
   CTA "Nova fatura"). Só um botão lime por contexto: no vazio ele some e fica
   o "Criar primeira fatura" do empty-state. */
.invoices-header{display:flex;flex-direction:column;margin-bottom:22px}
.invoices-header h3{margin:0;font-size:16px;color:#eceef0}
.invoices-header p{margin:7px 0 0;font-size:11px;color:#70757e}
.invoices-header .btn-primary{align-self:flex-start;margin-top:14px}

.invoice-list{display:flex;flex-direction:column;gap:8px}
.invoice-row{display:grid;grid-template-columns:minmax(90px,1fr) 100px minmax(110px,1fr) 110px auto;align-items:center;gap:12px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:8px;cursor:pointer}
.invoice-row:hover{border-color:#3a3f47;background:#191c21}
.invoice-row:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
[data-tab-panel="faturas"] .small-btn:focus-visible,[data-tab-panel="faturas"] .btn:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.invoice-id{font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;color:#e2e4e7}
.invoice-comp{font-size:11px;color:#9297a1;letter-spacing:.04em}
.invoice-due{font-size:11px;color:#9297a1}
.invoice-due.due-soon{color:var(--orange)}
.invoice-due.due-late{color:#ff5f5f}
.invoice-total{font-size:12px;font-weight:700;color:#e2e4e7;text-align:right}

.invoice-state{display:inline-flex;align-items:center;gap:5px;border-radius:5px;font-size:9px;font-weight:700;padding:5px 8px;letter-spacing:.02em;white-space:nowrap}
.invoice-state.draft{color:var(--purple);background:#29243e}
.invoice-state.issued{color:var(--lime);background:#28321c}

.invoice-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px;background:var(--panel);border:1px solid var(--line);border-radius:11px}
.invoice-empty strong{display:block;font-size:13px;color:#d3d6da}
.invoice-empty p{max-width:36ch;margin:6px 0 0;font-size:11px;color:#70757e}
.invoice-empty .btn-primary{margin-top:18px}

.invoice-panel{display:flex;flex-direction:column}
.invoice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.invoice-grid label{display:block;font-size:10px;color:#8d929b}
.invoice-grid input,.invoice-grid select,.invoice-form textarea{display:block;width:100%;margin-top:6px;background:#0e1013;border:1px solid #2b2f35;border-radius:6px;color:#eee;padding:9px;font-size:11px;outline:0}
.invoice-grid input:focus,.invoice-grid select:focus,.invoice-form textarea:focus{border-color:#596c30}
.invoice-form>label{display:block;font-size:10px;color:#8d929b;margin-bottom:12px}
.invoice-form textarea{resize:vertical;line-height:1.5}
.invoice-grid.readonly{grid-template-columns:repeat(4,1fr)}
.invoice-grid.readonly small{display:block;color:#636973;font-size:8px;letter-spacing:.1em;font-weight:700;margin-bottom:5px}
.invoice-grid.readonly p{margin:0;font-size:12px;color:#dfe1e4}

.invoice-template-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;background:var(--panel-2);border:1px solid #24272d;border-radius:7px;font-size:10px;color:#8d929b;margin-bottom:16px}
.invoice-template-line strong{color:#cdd0d5}
.invoice-template-line .small-btn{margin-left:auto}

.invoice-section-label{display:block;margin:0 0 8px;font-size:8px;letter-spacing:.1em;font-weight:700;color:#636973}

.invoice-picks{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.invoice-pick{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--panel-2);border:1px solid #24272d;border-radius:7px;cursor:pointer}
.invoice-pick.on{border-color:#4a5a2c;background:#181c16}
.invoice-pick input{accent-color:var(--lime);flex:none}
.invoice-pick-desc{flex:1;min-width:0;font-size:11px;color:#dfe1e4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invoice-pick-value{font-size:11px;color:#9297a1;flex:none}

.invoice-items{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.invoice-item{display:grid;grid-template-columns:1fr 62px 100px 100px 28px;align-items:center;gap:8px}
.invoice-item input{background:#0e1013;border:1px solid #2b2f35;border-radius:6px;color:#eee;padding:8px 9px;font-size:11px;outline:0;min-width:0}
.invoice-item input:focus{border-color:#596c30}
.invoice-item.readonly{grid-template-columns:1fr 62px 100px 100px;padding:9px 11px;background:var(--panel-2);border:1px solid #24272d;border-radius:7px;font-size:11px;color:#bfc3c9}
.invoice-item-total{font-size:11px;font-weight:700;color:#e2e4e7;text-align:right}
.invoice-item-remove{background:none;border:0;color:#5e636c;cursor:pointer;font-size:15px}
.invoice-item-remove:hover{color:#ff7a7a}

.invoice-add-service{margin-bottom:16px}
.invoice-add-row{display:flex;flex-wrap:wrap;gap:6px}
.invoice-manual{display:grid;grid-template-columns:1fr 62px 110px auto;gap:8px}
.invoice-manual input{background:#0e1013;border:1px solid #2b2f35;border-radius:6px;color:#eee;padding:8px 9px;font-size:11px;outline:0;min-width:0}
.invoice-manual input:focus{border-color:#596c30}
.invoice-manual .small-btn{white-space:nowrap}

.invoice-total-line{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid #282b32;font-size:11px;color:#8d929b}
.invoice-total-line strong{font-size:16px;color:#f0f1f2}

.invoice-hint{margin:0 0 12px;font-size:10px;color:#70757e;line-height:1.5}
.invoice-hint.warn{color:var(--orange)}

.invoice-alert{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-radius:7px;padding:11px 12px;font-size:11px;line-height:1.5;margin-bottom:14px}
.invoice-alert p{margin:0}
.invoice-alert.error{color:var(--orange);background:#2e1f1a;border:1px solid #50332a}
.invoice-alert.locked{color:#9aa1ac;background:#16181c;border:1px solid #282b32}
.invoice-alert .small-btn{margin-left:auto}

.invoice-skeleton{display:flex;flex-direction:column;gap:8px}
.invoice-skeleton i{display:block;height:46px;border-radius:8px;background:var(--panel-2)}

/* Prévia do documento: folha clara de propósito, porque é o que vira PDF na
   AGT-0016 — o resto da interface segue escuro. */
.invoice-sheet{background:#f6f6f4;color:#1a1c1f;border-radius:9px;padding:26px;margin:6px 0 18px;font-size:11px}
.invoice-sheet .sheet-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid #d9d9d5;padding-bottom:14px}
.invoice-sheet .sheet-logo{width:40px;height:40px;object-fit:contain;margin-bottom:8px;display:block}
.invoice-sheet .sheet-issuer strong{display:block;font-size:14px}
.invoice-sheet .sheet-issuer small{display:block;color:#5c5f66;margin-top:3px}
.invoice-sheet .sheet-title{text-align:right}
.invoice-sheet .sheet-title span{display:block;font-size:9px;letter-spacing:.22em;color:#75787f}
.invoice-sheet .sheet-title b{display:block;font-size:15px;margin-top:3px}
.invoice-sheet .sheet-title small{display:block;color:#5c5f66;margin-top:2px}
.invoice-sheet .sheet-to{padding:16px 0;border-bottom:1px solid #e2e2de}
.invoice-sheet .sheet-to small{display:block;font-size:8px;letter-spacing:.12em;color:#75787f;margin-bottom:5px}
.invoice-sheet .sheet-to strong{display:block;font-size:13px}
.invoice-sheet .sheet-to span{display:block;color:#5c5f66;margin-top:2px}
.invoice-sheet .sheet-items{width:100%;border-collapse:collapse;margin-top:14px}
.invoice-sheet .sheet-items th{text-align:left;font-size:8px;letter-spacing:.12em;color:#75787f;border-bottom:1px solid #d9d9d5;padding:0 0 7px}
.invoice-sheet .sheet-items th:last-child,.invoice-sheet .sheet-items td:last-child{text-align:right}
.invoice-sheet .sheet-items td{padding:9px 0;border-bottom:1px solid #eaeae6}
.invoice-sheet .sheet-total{display:flex;justify-content:space-between;align-items:center;padding:14px 0 0}
.invoice-sheet .sheet-total span{font-size:9px;letter-spacing:.12em;color:#75787f}
.invoice-sheet .sheet-total strong{font-size:17px}
.invoice-sheet .sheet-foot{margin-top:16px;padding-top:14px;border-top:1px solid #d9d9d5;color:#5c5f66;line-height:1.6}
.invoice-sheet .sheet-foot p{margin:0 0 4px}
.invoice-sheet .sheet-paid{display:inline-block;margin-bottom:12px;padding:5px 10px;border-radius:5px;background:#e3f5c9;color:#3c5a12;font-size:10px;font-weight:700;letter-spacing:.04em}

/* Aba Faturas: pagamento e duplicação (AGT-0026) */
.invoice-state.paid{color:#8fd35c;background:#1c2712;margin-left:5px}
.invoice-pay-form{display:flex;align-items:flex-end;gap:8px;padding:11px 12px;background:#15171b;border:1px solid #24272d;border-radius:7px;margin-bottom:14px}
.invoice-pay-form label{flex:1;font-size:10px;color:#8d929b}
.invoice-pay-form input{display:block;width:100%;margin-top:6px;background:#0e1013;border:1px solid #2b2f35;border-radius:6px;color:#eee;padding:8px 9px;font-size:11px;outline:0}
.invoice-paid-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;background:#1c2712;border:1px solid #2c3d1a;border-radius:7px;color:#a9dc7c;font-size:11px;margin-bottom:14px}
.invoice-paid-line button{margin-left:auto}
.invoice-pay-trigger{margin-bottom:14px}

@media(max-width:700px){
  .client-tabs{overflow-x:auto}
  .client-tabs button{white-space:nowrap}
  /* Nenhum dado da linha some no mobile: vira grade de duas linhas, com total e
     status sempre visíveis, como pede a spec. */
  .invoice-row{grid-template-columns:1fr auto;gap:6px 10px}
  .invoice-comp{order:2}
  .invoice-due{order:3;grid-column:1}
  .invoice-total{order:4;text-align:left}
  .invoice-state{order:5;justify-self:end}
  .invoice-grid,.invoice-grid.readonly{grid-template-columns:1fr}
  .invoice-item{grid-template-columns:1fr 1fr;gap:6px}
  .invoice-item input[data-field="description"]{grid-column:1/-1}
  .invoice-item.readonly{grid-template-columns:1fr 1fr}
  .invoice-manual{grid-template-columns:1fr 1fr}
  .invoice-manual input:first-child{grid-column:1/-1}
  .invoice-template-line .small-btn{margin-left:0}
  .invoice-empty{padding:22px}
  .invoice-sheet{padding:18px}
}
/* Aba Propostas comerciais (AGT-0016) — reusa a linguagem da aba Faturas
   (.invoice-row, .invoice-panel, .invoice-alert) e só acrescenta o que a
   proposta tem de diferente: badges de cinco estados, editor de serviços em
   lista livre, link público e assinatura recebida. */

.proposal-state{display:inline-flex;align-items:center;gap:5px;border-radius:5px;font-size:9px;font-weight:700;padding:5px 8px;letter-spacing:.02em;white-space:nowrap}
.proposal-state.draft{color:#a9aeb8;background:#212429}
.proposal-state.sent{color:var(--blue);background:#182534}
.proposal-state.viewed{color:var(--orange);background:#2e2318}
.proposal-state.approved{color:var(--lime);background:#28321c}
.proposal-state.rejected{color:#ff6b6b;background:#331b1b}

/* O título é o dado que identifica a proposta (a fatura tem número), então ele
   fica com a coluna elástica da linha. */
.proposal-row{grid-template-columns:minmax(120px,1.6fr) 90px minmax(110px,1fr) 110px auto}
.proposal-title{font-size:12px;font-weight:600;color:#e2e4e7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.proposal-logo-field{display:flex;gap:14px;align-items:flex-start;padding:12px;background:var(--panel-2);border:1px solid #24272d;border-radius:8px;margin-bottom:16px}
.proposal-logo-field>div{flex:1;min-width:0}
.proposal-logo-field label{display:block;font-size:10px;color:#8d929b}
.proposal-logo-field input[type=text]{display:block;width:100%;margin-top:6px;background:#0e1013;border:1px solid #2b2f35;border-radius:6px;color:#eee;padding:9px;font-size:11px;outline:0}
.proposal-logo-field input[type=text]:focus{border-color:#596c30}
.proposal-logo-preview{width:46px;height:46px;flex:none;object-fit:contain;background:#fff;border-radius:8px;padding:4px}
.proposal-logo-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.proposal-upload{cursor:pointer}
.proposal-logo-field .invoice-hint{margin:8px 0 0}

.proposal-services{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.proposal-service{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 110px 28px;align-items:center;gap:8px}
.proposal-service input{background:#0e1013;border:1px solid #2b2f35;border-radius:6px;color:#eee;padding:8px 9px;font-size:11px;outline:0;min-width:0}
.proposal-service input:focus{border-color:#596c30}
.proposal-add-service{margin-bottom:18px}

.proposal-item{grid-template-columns:1fr 120px}
.proposal-item strong{display:block;font-size:11px;color:#e2e4e7}
.proposal-item small{display:block;margin-top:3px;font-size:10px;color:#8d929b;line-height:1.5}

.proposal-about{margin:0 0 18px;font-size:12px;color:#bfc3c9;line-height:1.7;white-space:pre-wrap}

/* Link público: o campo existe para ser copiado, então o valor fica visível e
   selecionável mesmo quando a área de transferência não está disponível. */
.proposal-link{padding:12px;background:#161d12;border:1px solid #304022;border-radius:8px;margin-bottom:16px}
.proposal-link>small{display:block;font-size:8px;letter-spacing:.1em;font-weight:700;color:#8fae55;margin-bottom:8px}
.proposal-link-row{display:flex;gap:6px;flex-wrap:wrap}
.proposal-link-row input{flex:1;min-width:180px;background:#0e1013;border:1px solid #2b2f35;border-radius:6px;color:#c9ef80;padding:8px 9px;font-size:11px;outline:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.proposal-link-row .small-btn{white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center}
.proposal-link .invoice-hint{margin:8px 0 0}

.proposal-signature-box{padding:14px;background:var(--panel-2);border:1px solid #24272d;border-radius:8px;margin:16px 0}
.proposal-signature-box>small{display:block;font-size:8px;letter-spacing:.1em;font-weight:700;color:#636973;margin-bottom:10px}
.proposal-signature-box img{display:block;max-width:min(100%,260px);max-height:90px;background:#fff;border-radius:6px;margin-bottom:8px}
.proposal-signature-box strong{display:block;font-size:13px;color:#e2e4e7}
.proposal-signature-box span{display:block;margin-top:3px;font-size:10px;color:#8d929b}

.proposal-rejection{padding:12px;background:#241618;border:1px solid #452428;border-radius:8px;margin:16px 0}
.proposal-rejection small{display:block;font-size:8px;letter-spacing:.1em;font-weight:700;color:#c4757a;margin-bottom:6px}
.proposal-rejection p{margin:0;font-size:12px;color:#e3b9bc;line-height:1.6}

@media(max-width:700px){
  .proposal-row{grid-template-columns:1fr auto}
  .proposal-title{grid-column:1/-1}
  .proposal-service{grid-template-columns:1fr 90px 28px}
  .proposal-service input[data-field=name]{grid-column:1/-1}
  .proposal-logo-field{flex-direction:column}
  .proposal-link-row input{min-width:0}
}