/* js/tools/agreement/agreement.css — a faixa do agreement na aba Quote (v555): AG-1 os passos, AG-2 a ficha, AG-4 os botoes, AG-6 o assinado.
   Nada de cor solta alem das marcas dos passos: as do app (--accent, --line, --ink, --ink2, --muted). */
/* v698 (esboco "mapa e esboco do operador", Q4e e quadro 5): o agreement mora no trilho "Close the sale" (o cartao e' o trilho) — o caminho em 6 nos, um
   embaixo do outro, ligados por uma linha; o redondo diz o estado (numero = ainda nao, ✓ verde = feito, laranja = esperando, ✕ vermelho = parou, azul =
   o de agora); as pecas de agora dentro do no (ui.js agUiSteps). Antes do Send (.ag-pre) so os nos, sem o ↻. Cores fixas: o trilho e' claro em todo tema */
.ag{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;background:transparent;color:#1d2433}
.ag-h{display:none}
.ag-steps{display:flex;flex-direction:column}
.ag-node{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;padding-bottom:12px}
.ag-node:not(:last-child)::before{content:"";position:absolute;left:11px;top:27px;bottom:3px;width:2px;background:#e1e5eb}
.ag-dot{width:24px;height:24px;box-sizing:border-box;border:2px solid #c9d0db;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font:700 11px/1 Archivo,sans-serif;color:#636b78}
.ag-dot i{font-style:normal}
.ag-node.ag-now .ag-dot{border-color:#2c4a78;background:#2c4a78;color:#fff}
.ag-node[data-mark="wait"] .ag-dot{border-color:#b45309;background:#fff;color:#b45309}
.ag-node[data-mark="ok"] .ag-dot{border-color:#1a6b3c;background:#1a6b3c;color:#fff} .ag-node[data-mark="ok"] .ag-dot i{font-size:0} .ag-node[data-mark="ok"] .ag-dot i::before{content:"\2713";font-size:12px}
.ag-node[data-mark="bad"] .ag-dot{border-color:#b91c1c;background:#b91c1c;color:#fff} .ag-node[data-mark="bad"] .ag-dot i{font-size:0} .ag-node[data-mark="bad"] .ag-dot i::before{content:"\2715";font-size:11px}
.ag-nb{min-width:0;padding-top:3px}
.ag-nt{margin:0;font:700 14px/1.3 Archivo,sans-serif;color:#1d2433} .ag-node[data-mark="off"]:not(.ag-now) .ag-nt{color:#636b78}
.ag-nd{margin:1px 0 0;font-size:12px;line-height:1.35;color:#5f6b7d} .ag-nd:empty{display:none} .ag-node[data-mark="bad"] .ag-nd{color:#b91c1c}
.ag-nbody{display:flex;flex-direction:column;gap:8px;margin-top:7px} .ag-nbody:empty{display:none}
.ag-nbody .ag-dh{display:none} .ag-nbody>.ag-dep{padding:9px 10px;border-color:#e1e5eb}
.ag-pre .ag-foot{display:none}
.ag-form{container-type:inline-size} @container (max-width:380px){ .ag-row{grid-template-columns:1fr} } /* a ficha na coluna estreita do trilho: um campo por linha */
.ag-step{display:inline-flex;align-items:center;gap:5px;font:600 13px/1.3 "Source Sans 3",sans-serif;color:var(--muted)}
.ag-step i{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-radius:50%;box-sizing:border-box;font:800 10px/12px Archivo,sans-serif;font-style:normal;text-align:center}
.ag-step[data-mark="ok"]{color:#186b3f} .ag-step[data-mark="ok"] i{background:#186b3f;border-color:#186b3f;color:#fff} .ag-step[data-mark="ok"] i::before{content:"\2713"}
.ag-step[data-mark="wait"]{color:#b45309} .ag-step[data-mark="wait"] i{border-style:dashed}
.ag-step[data-mark="bad"]{color:#b91c1c} .ag-step[data-mark="bad"] i::before{content:"\2715"}
/* v691 (D1–D3): a linha DEPOSIT — o nome da fatura, o valor e o e-mail numa linha (no telefone o nome em cima), o estado com a marca dos passos, o botao */
.ag-dep{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;border:1px solid var(--line);border-radius:10px;container-type:inline-size} .ag-dep[hidden],.ag-dline[hidden]{display:none}
.ag-dh{margin:0;font:800 11.5px/1.2 Archivo,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
.ag-dline{display:flex;flex-wrap:wrap;gap:2px 6px;margin:0;font:600 13.5px/1.35 "Source Sans 3",sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
/* v695 (esboco L1–L3): o "·" fica colado no fim do pedaco de antes (espaco que nao quebra) — pode terminar uma linha, nunca comecar; o valor e o e-mail
   andam juntos (.ag-drest); caixa estreita (a CAIXA, nao a tela) = o numero da fatura numa linha so dele */
.ag-dline b::after{content:"\00a0·";font-weight:400;color:var(--muted)}
.ag-drest>span+span:not(:empty)::before{content:"\00a0· ";color:var(--muted)} .ag-drest>span:empty{display:none}
@container (max-width:520px){ .ag-dline b{flex-basis:100%} .ag-dline b::after{content:none} }
.ag-dep>.ag-acts{align-self:stretch}
.ag-msg{margin:0;font-size:13.5px;line-height:1.4;color:var(--ink)} .ag-msg.ag-bad{color:#b91c1c} .ag-msg.ag-ok{color:#186b3f} .ag-msg:empty{display:none}
.ag-acts{display:flex;flex-wrap:wrap;gap:8px} .ag-acts:empty{display:none}
.ag-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin:0;padding:8px 14px;border:0;border-radius:10px;background:var(--accent);color:var(--on-acc);font:700 13.5px/1.2 Archivo,sans-serif;text-decoration:none;cursor:pointer}
.ag-btn.ag-quiet{border:1px solid var(--line);background:#fff;color:var(--accent)}
.ag-btn:disabled{opacity:.55;cursor:default} .ag-btn[aria-busy="true"]{opacity:.7}
.ag-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px} /* v556: o ↻ e' um botao, a hora ao lado */
.ag-btn.ag-sm{min-height:34px;padding:6px 12px;font-size:12.5px}
.ag-at{margin:0;color:var(--muted);font:600 12px/1.3 "Source Sans 3",sans-serif} .ag-at:empty{display:none}
.ag-form{display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:10px;background:#f7f9fc}
.ag-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ag-row[hidden],.ag-f[hidden],.ag-lead:empty{display:none}
.ag-f{display:flex;flex-direction:column;gap:4px;min-width:0;margin:0}
.ag-f>span{font:700 12px/1.2 "Source Sans 3",sans-serif;color:var(--ink2)}
.ag-f input,.ag-f textarea{width:100%;min-height:40px;box-sizing:border-box;margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:600 15px/1.3 "Source Sans 3",sans-serif;font-variant-numeric:tabular-nums}
.ag-f textarea{min-height:60px;resize:vertical}
.ag-f.ag-need input,.ag-f.ag-need textarea{border-color:#b91c1c}
/* v693 (F2–F5): a linha do sinal embaixo do Down payment e do Payment; laranja (a cor do "wait" dos passos) quando nao bate ou e' Financing */
.ag-dhint{margin:-6px 0 0;font:600 12.5px/1.35 "Source Sans 3",sans-serif;color:var(--ink2)} .ag-dhint:empty{display:none} .ag-dhint.ag-warn{color:#b45309}
.ag-f.ag-warnf:not(.ag-need) input{border-color:#b45309}
.ag-bal{margin:-4px 0 0;font:600 13px/1.3 "Source Sans 3",sans-serif;color:var(--ink2)}
.ag-seg{display:flex;flex-wrap:wrap;gap:6px}
.ag-seg button{min-height:36px;margin:0;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink2);font:600 13px/1.2 "Source Sans 3",sans-serif;cursor:pointer}
.ag-seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-acc)}
.ag-chk{display:flex;align-items:flex-start;gap:8px;margin:0;font:600 13.5px/1.35 "Source Sans 3",sans-serif;color:var(--ink)} .ag-chk input{width:20px;height:20px;margin:0;flex:none}
.ag-lead{margin:0;font:600 13px/1.35 "Source Sans 3",sans-serif;color:#b45309}
.ag-miss{margin:0;font-size:13px;line-height:1.4;color:#b91c1c} .ag-miss:empty{display:none}
@media (max-width:420px){ .ag-row{grid-template-columns:1fr} .ag-acts .ag-btn{flex:1 1 100%} .ag-dline b{flex-basis:100%} .ag-dline b::after{content:none} } /* v695: o mesmo do @container, para navegador sem container query */
/* v699 (esboco "mapa e esboco do operador", quadro 6 A0–A8 e M7–M8) — a ficha em painel. PC: no lugar da lista (a Quote o poe na coluna da esquerda) — a barra
   "‹ Back to the quote", o titulo, os chips das 6 secoes (A1, a bolinha diz o estado), as secoes em cartoes (A2–A7) e os botoes presos embaixo (A8). Telefone
   (showModal, tela cheia): um passo por vez com a barra de progresso, Back / Next no polegar; no passo 6 o resumo dos 5 (Edit volta ao passo) e as 3 saidas */
dialog.ag-panel{margin:0;padding:0;border:0;max-width:none;max-height:none;background:transparent;color:#1d2433;font-family:"Source Sans 3",sans-serif}
dialog.ag-panel:modal{position:fixed;inset:0;width:100%;height:100%;overflow:auto;background:#fff}
dialog.ag-panel::backdrop{background:rgba(29,36,51,.45)}
.ag-pin{display:flex;flex-direction:column;gap:12px;min-height:100%;box-sizing:border-box}
.ag-pbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px} .ag-pbar small{font-size:12px;color:#5f6b7d}
body dialog.ag-panel button.ag-pback.ag-pback[data-ag-act]:not(#sheetload){min-height:40px;margin:0;padding:0 12px;border:1px solid #c9d0db;border-radius:10px;background:#fff;color:#2c4a78;font:700 14px/1 Archivo,sans-serif;cursor:pointer}
.ag-phead{display:flex;flex-direction:column;gap:6px}
.ag-pt{margin:0;display:flex;flex-direction:column;gap:2px} .ag-pt b{font:800 22px/1.2 Archivo,sans-serif} .ag-pt small{font-size:13px;color:#5f6b7d}
.ag-pstep,.ag-pprog,.ag-pnav,.ag-sum{display:none}
.ag-pprog{height:4px;border-radius:2px;background:#e1e5eb} .ag-pprog i{display:block;width:calc(var(--p,0) * 100%);height:100%;border-radius:2px;background:#2c4a78}
.ag-chips{display:flex;flex-wrap:wrap;gap:6px}
body dialog.ag-panel button.ag-chip.ag-chip[data-ag-act]:not(#sheetload){display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:0;padding:0 12px;border:1px solid #d3d9e2;border-radius:999px;background:#fff;color:#1d2433;font:600 13px/1 Archivo,sans-serif;cursor:pointer}
.ag-chip i{width:8px;height:8px;border-radius:50%;background:#c9d0db} .ag-chip[data-mark="ok"] i{background:#1a6b3c} .ag-chip[data-mark="need"] i{background:#c2410c}
.ag-panel .ag-form{gap:12px;padding:0;border-radius:0;background:transparent}
.ag-sec{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid #d3d9e2;border-radius:14px;background:#fff;scroll-margin-top:84px}
.ag-sech{display:flex;align-items:center;gap:8px;margin:0} .ag-sech b{font:700 16px/1.2 Archivo,sans-serif} .ag-sech small{margin-left:auto;font-size:12px;color:#5f6b7d}
.ag-sech i{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 12px/1 Archivo,sans-serif;font-style:normal;background:#e6e9ef;color:#5f6b7d}
.ag-sec[data-mark="ok"] .ag-sech i{background:#1a6b3c;color:#fff} .ag-sec[data-mark="need"] .ag-sech i{background:#c2410c;color:#fff}
.ag-b1{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:14px} .ag-b1 span{font:700 12px/1.2 Archivo,sans-serif;color:#5f6b7d} .ag-b1 small{font-size:12px;color:#5f6b7d}
.ag-note{margin:-4px 0 0;font-size:12px;color:#5f6b7d}
.ag-panel .ag-form>[data-ag-facts]{position:sticky;bottom:0;z-index:1;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));background:#f2f4f7;border-top:1px solid #d3d9e2}
.ag-panel [data-ag-facts] [data-ag-act="table"]{order:3} .ag-panel [data-ag-facts] [data-ag-act="email"]{order:2} .ag-panel [data-ag-facts] [data-ag-act="preview"]{order:1}
.ag-fsum{display:flex;flex-direction:column;gap:6px} .ag-fready{margin:0;font:600 13px/1.35 "Source Sans 3",sans-serif;color:#3d4757} .ag-fsum .ag-btn{align-self:flex-start}
/* o telefone: um passo por vez (M7), o resumo e as saidas no passo 6 (M8) */
dialog.ag-panel:modal .ag-pin{padding:12px 16px 0}
dialog.ag-panel:modal .ag-chips,dialog.ag-panel:modal .ag-pbar small{display:none}
dialog.ag-panel:modal .ag-pstep{display:block;margin:0;font:700 13px/1.2 Archivo,sans-serif;color:#5f6b7d} dialog.ag-panel:modal .ag-pprog{display:block}
dialog.ag-panel:modal .ag-sec{padding:0;border:0;border-radius:0} dialog.ag-panel:modal .ag-sec:not(.ag-cur){display:none} dialog.ag-panel:modal .ag-sech{display:none}
dialog.ag-panel:modal:not([data-last]) .ag-form>.ag-miss,dialog.ag-panel:modal:not([data-last]) .ag-form>[data-ag-facts]{display:none}
dialog.ag-panel:modal .ag-form>[data-ag-facts]{flex-direction:column;background:#fff;border-top:0} dialog.ag-panel:modal [data-ag-facts] .ag-btn{min-height:50px;font-size:16px}
dialog.ag-panel:modal .ag-pnav{display:flex;gap:10px;position:sticky;bottom:0;margin-top:auto;padding:10px 0 calc(14px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid #e6e9ef}
dialog.ag-panel:modal .ag-pnav .ag-btn{flex:1;min-height:50px;font-size:16px} dialog.ag-panel:modal .ag-pnav [hidden]{display:none}
dialog.ag-panel:modal[data-last] .ag-pnav{position:static;border-top:0}
dialog.ag-panel:modal .ag-sum{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:1px solid #d3d9e2;border-radius:12px}
.ag-si{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:44px;padding:4px 4px 4px 12px;border-bottom:1px solid #edf0f4;font-size:13.5px} .ag-si:last-child{border-bottom:0}
.ag-si span{font:700 12px/1.2 Archivo,sans-serif;color:#5f6b7d} .ag-si b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body dialog.ag-panel button.ag-sedit.ag-sedit[data-ag-act]:not(#sheetload){min-height:40px;margin:0;padding:0 10px;border:0;background:transparent;color:#2c4a78;font:700 13px/1 Archivo,sans-serif;cursor:pointer}
dialog.ag-panel{scroll-margin-top:84px} /* abrir no PC rola ate o painel sem esconder a barra "‹ Back" atras do topo da tela Job */
dialog.ag-panel:modal [data-ag-facts] [data-ag-act="table"]{order:1} dialog.ag-panel:modal [data-ag-facts] [data-ag-act="email"]{order:2} dialog.ag-panel:modal [data-ag-facts] [data-ag-act="preview"]{order:3} /* M8: o Sign na mesa primeiro, no polegar */
/* v805 (contraste dos temas, T3; esboco aprovado 04/11): os passos do Agreement no trilho Close the sale seguem o tema nos 4 escuros, como o trilho (quote.css v805).
   As marcas cheias (verde ✓, vermelho ✕, azul = o de agora) ficam como estao; o numero, o titulo e a descricao vao para as cores do tema */
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .ag{color:var(--ink)}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .ag-dot{border:2px solid var(--line);background:var(--panel);color:var(--muted)}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .ag-node.ag-now .ag-dot{border-color:var(--accent);background:var(--accent);color:var(--on-acc)}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .ag-node[data-mark="wait"] .ag-dot{background:var(--panel);color:var(--warn)}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .ag-nt{color:var(--ink)}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .ag-node[data-mark="off"]:not(.ag-now) .ag-nt{color:var(--muted)}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .ag-nd{color:var(--ink2)}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .ag-node[data-mark="bad"] .ag-nd{color:var(--bad)}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .ag-step[data-mark="wait"]{color:var(--warn)}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .ag-step[data-mark="bad"]{color:var(--bad)}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .ag-node:not(:last-child)::before{background:var(--line)}
body:is([data-theme="dark"],[data-theme="hud"],[data-theme="holo"],[data-theme="sketchdark"]) .ag-step[data-mark="ok"]{color:var(--good)}